@charset "UTF-8";
/* マチリーチ サービスサイト v2（2026-09-04: ロゴに合わせて青・オレンジ・ネイビーに変更）
   主役はロゴの青のグラデーション。オレンジは「相談する」のボタンだけ。角丸はボタンのピルとカードの小さな角のみ。 */

:root{
  --paper:#FFFFFF;
  --ink:#0F1F3D;        /* ネイビー（ロゴの文字色） */
  --ink-2:#4A5568;      /* 白地でコントラスト約7.5:1 */
  --accent:#0069E8;     /* ロゴの青。白文字とのコントラスト約5:1 */
  --accent-dark:#0052B8;
  --accent-2:#00DBE4;   /* ロゴの水色。濃い地の上の目印に使う */
  --accent-pale:#EAF3FF;
  --cta:#FD8100;        /* ロゴのオレンジ。文字はネイビー（白文字だと4.5:1に届かない） */
  --cta-dark:#E86F00;
  --grad:linear-gradient(90deg,#00DBE4 0%,#01A9EF 50%,#0069E8 100%);
  --grad-diag:linear-gradient(135deg,#00DBE4 0%,#01A9EF 45%,#0069E8 100%);
  --grey:#F4F6FA;
  --rule:#E1E6EF;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  padding-bottom:78px;               /* 画面下の固定バーぶん */
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* use で差し込むアイコンは線画にする（塗りつぶさない） */
.bicon,.cicon{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

a{ color:var(--accent-dark); }
a:hover{ color:var(--accent); }

h1,h2,h3{
  font-weight:900;
  font-feature-settings:"palt" 1;
  letter-spacing:-0.03em;
  line-height:1.24;
  text-wrap:balance;
  margin:0;
}
h3{ letter-spacing:-0.02em; line-height:1.4; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.band :focus-visible,.final :focus-visible,.scard :focus-visible{ outline-color:#FFFFFF; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; text-decoration:none; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ---------- 器 ---------- */
.container{ width:min(100% - 40px, 1180px); margin-inline:auto; }
.container-narrow{ width:min(100% - 40px, 760px); margin-inline:auto; }

section{ padding:64px 0; }
.sec-head{ max-width:44em; margin-bottom:36px; }
.sec-lead{ color:var(--ink-2); font-size:15px; margin-top:14px; }
.small{ font-size:13.5px; }
.muted{ color:var(--ink-2); }
.table-note{ font-size:13.5px; color:var(--ink-2); margin-top:20px; }

h2{ font-size:clamp(1.5rem, 5.6vw, 2.25rem); }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:10px 24px;
  border:2px solid transparent; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:700; line-height:1.4;
  text-align:center; text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-lg{ min-height:60px; padding:12px 30px; font-size:16.5px; }
.btn-sm{ min-height:44px; padding:8px 16px; font-size:14px; }
.btn-primary{ background:var(--cta); color:var(--ink); border-color:var(--cta); }
.btn-primary:hover{ background:var(--cta-dark); color:var(--ink); border-color:var(--cta-dark); }
.btn-outline{ border-color:var(--accent); color:var(--accent-dark); background:transparent; }
.btn-outline:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-on-accent{ background:#fff; color:var(--accent-dark); }
.btn-on-accent:hover{ background:var(--ink); color:#fff; }
.btn-ghost{ border-color:rgba(255,255,255,.75); color:#fff; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
.btn .arw{ width:1.05em; height:1.05em; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn .icon{ width:1.05em; height:1.05em; flex:none; }

/* ---------- ヘッダー / ナビ ---------- */
.site-header{ border-bottom:1px solid var(--rule); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; padding:10px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-logo{ display:block; height:34px; width:auto; }
.brand-name{ font-weight:900; font-size:16px; letter-spacing:-0.02em; line-height:1.2; display:flex; flex-direction:column; }
.brand-name small{ font-weight:500; font-size:11px; color:var(--ink-2); letter-spacing:0; margin-top:3px; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-hours{ display:none; font-size:13px; color:var(--ink-2); }
.btn-tel{ font-variant-numeric:tabular-nums; white-space:nowrap; background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-tel:hover{ background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.tel-num{ display:none; }

.site-nav{ border-bottom:1px solid var(--rule); }
.site-nav ul{ display:flex; flex-wrap:wrap; gap:0 18px; list-style:none; margin:0; padding:7px 0; }
.site-nav a{
  display:inline-block; padding:5px 0; font-size:13.5px; font-weight:700;
  color:var(--ink); text-decoration:none; border-bottom:2px solid transparent;
}
.site-nav a:hover{ border-bottom-color:var(--accent); }
.site-nav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:44px 0 64px;
}
.hero-grid{ position:relative; z-index:1; }

.eyebrow{
  font-size:13px; font-weight:700; color:var(--accent-dark);
  margin:0 0 14px; letter-spacing:.01em;
}
.hero h1{
  font-size:clamp(1.78rem, 9vw, 4.25rem);
  letter-spacing:-0.038em;
  margin:0 0 22px;
}
.hero h1 em{ font-style:normal; color:var(--accent); }
/* 4行になる見出しは1段小さくする */
.hero h1.h1-tight{ font-size:clamp(1.62rem, 8.2vw, 3.75rem); }
.hero-lead{ max-width:34em; font-size:15.5px; color:var(--ink-2); margin:0 0 28px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* 斜めに積むカード＋その下の斜めの青の色面（下層ページのヒーロー） */
.stack{ position:relative; margin-top:72px; display:flex; flex-direction:column; gap:14px; }
.stack::before{
  content:""; position:absolute; z-index:-1;
  left:-24px; right:-24px; top:-64px; bottom:-110px;
  background:var(--grad-diag);
  clip-path:polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}
.hero-rough{
  display:none;
  position:absolute; z-index:-1; left:-8px; right:-8px; bottom:-56px; height:70px;
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  opacity:.34; pointer-events:none;
}
.hero-rough circle{ fill:#fff; stroke:none; }
.scard{
  background:var(--ink); color:#fff;
  border-radius:8px; padding:20px 22px;
  box-shadow:0 14px 30px rgba(20,24,33,.28);
}
.scard-1{ transform:rotate(-1.4deg); }
.scard-2{ transform:rotate(1deg); }
.scard-3{ transform:rotate(-.7deg); }
.scard-k{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.72); margin:0 0 6px; }
.scard-v{
  font-size:clamp(2rem, 8vw, 2.5rem); font-weight:900; line-height:1.1;
  letter-spacing:-0.04em; font-variant-numeric:tabular-nums; margin:0;
}
.scard-v span{ font-size:.42em; font-weight:700; letter-spacing:0; margin-left:.3em; }
.scard-v-text{ font-size:clamp(1.35rem, 5.6vw, 1.7rem); letter-spacing:-0.03em; }
.scard-who{ font-size:16px; font-weight:900; letter-spacing:-0.02em; line-height:1.5; margin:0; }
.scard-sub{ font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.78); margin:6px 0 0; }

/* ---------- 黒帯（先に書いていること） ---------- */
.band{ background:var(--ink); color:#fff; padding:40px 0 44px; }
.band-h{
  width:min(100% - 40px, 1180px); margin:0 auto 22px;
  font-size:13px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.72);
  line-height:1.5;
}
.band-h::before{ content:""; display:inline-block; width:26px; height:2px; background:var(--accent-2); vertical-align:middle; margin-right:10px; }
.band-viewport{ overflow:hidden; }
/* margin-left は本文の左端に合わせる。translate は 0→-50% なので継ぎ目は途切れない。 */
.band-track{ display:flex; width:max-content; margin-left:20px; animation:band-slide 46s linear infinite; }
.band-list{
  display:flex; align-items:center; gap:40px;
  list-style:none; margin:0; padding:0 20px 0 0;
}
.band-list li{
  display:flex; align-items:center; gap:10px; white-space:nowrap;
  font-size:16px; font-weight:700; letter-spacing:-0.01em;
}
.bicon{ width:22px; height:22px; flex:none; color:var(--accent-2); }
@keyframes band-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- サービス ---------- */
.svc-grid{ display:grid; gap:18px; }
.svc{
  display:flex; flex-direction:column;
  border:1px solid var(--rule); border-top:6px solid var(--ink);
  border-radius:8px; padding:26px 24px 28px; background:var(--paper);
}
.svc .small.muted{ margin-bottom:0; }
.svc:first-child{ border-top-color:var(--accent); }
.svc h3{ font-size:19px; margin:0 0 10px; }
.price{
  font-size:clamp(2.5rem, 11vw, 3.75rem); font-weight:900; line-height:1.05;
  letter-spacing:-0.045em; font-variant-numeric:tabular-nums;
  margin:0 0 18px; color:var(--ink);
}
.price-u{ font-size:.3em; font-weight:700; letter-spacing:0; margin-left:.35em; }
.price-text{ font-size:clamp(1.4rem, 6.2vw, 1.9rem); letter-spacing:-0.03em; line-height:1.3; }
.svc-foot{ margin-top:auto; padding-top:24px; }

/* ---------- 見本 ---------- */
.sample{ background:var(--grey); }
.sample-grid{ display:grid; gap:28px; align-items:center; }
.sample h2{ margin-bottom:0; }
.sample .btn{ margin-top:22px; }
.mock{ display:block; width:100%; height:auto; }

/* ---------- できないこと ---------- */
.cannot-list{ list-style:none; margin:0; padding:0; counter-reset:none; }
.cannot-list li{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px; align-items:start;
  padding:22px 0; border-top:1px solid var(--rule);
}
.cannot-list li:last-child{ border-bottom:1px solid var(--rule); }
.cnum{
  font-size:clamp(1.75rem, 8vw, 2.5rem); font-weight:900; line-height:1;
  letter-spacing:-0.05em; font-variant-numeric:tabular-nums; color:var(--accent);
}
.cbody h3{ display:flex; align-items:center; gap:10px; font-size:17px; margin:0 0 8px; }
.cicon{ width:24px; height:24px; flex:none; color:var(--ink); }
.cbody p{ font-size:14.5px; color:var(--ink-2); margin:0; }

/* ---------- 品質 ---------- */
.quality{ background:var(--accent-pale); }
.statement{
  margin:28px 0 0; padding:26px 24px;
  background:var(--paper); border-left:6px solid var(--accent); border-radius:0 8px 8px 0;
  font-size:16px; line-height:1.9;
}
.disclaimer{ font-size:13.5px; color:var(--ink-2); margin-top:18px; }

/* ---------- だれがやっているか ---------- */
.who{ background:var(--grey); }
.who-grid{ display:grid; gap:26px; }
/* スマホでは項目名を上、内容を下に置く（横に潰れて読みにくくなるため） */
.deflist{ margin:0; border-top:1px solid var(--rule); }
.deflist dt{ padding:15px 0 0; font-size:13.5px; font-weight:700; color:var(--accent-dark); }
.deflist dd{ margin:0; padding:3px 0 15px; border-bottom:1px solid var(--rule); font-size:14.5px; }

/* ---------- よくあるご質問 ---------- */
.faq h2{ margin-bottom:24px; }
.faq-item{ border-top:1px solid var(--rule); }
.faq-item:last-child{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  position:relative; list-style:none; cursor:pointer;
  padding:18px 46px 18px 0;
  font-size:16px; font-weight:700; letter-spacing:-0.01em; line-height:1.5;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after,
.faq-item summary::before{
  content:""; position:absolute; right:8px; top:50%; background:var(--accent);
}
.faq-item summary::before{ width:16px; height:2.5px; margin-top:-1.25px; }
.faq-item summary::after{ width:2.5px; height:16px; margin-top:-8px; right:14.75px; }
.faq-item[open] summary::after{ display:none; }
.faq-a{ padding:0 0 20px; font-size:14.5px; color:var(--ink-2); }

/* ---------- 締め ---------- */
.final{
  position:relative; overflow:hidden;
  background:var(--accent); color:#fff;
  padding:64px 0 68px;
}
.final-wedge{
  position:absolute; inset:auto -10% -30% -10%; height:70%;
  background:rgba(15,31,61,.14); transform:skewY(-6deg); transform-origin:left bottom;
}
.final-inner{ position:relative; z-index:1; }
.final h2{ font-size:clamp(1.75rem, 7.4vw, 3rem); letter-spacing:-0.04em; margin:0 0 18px; }
.final p{ font-size:15.5px; color:rgba(255,255,255,.94); max-width:34em; }
.final .hero-actions{ margin-top:28px; }
.final-hours{ font-size:13.5px; color:rgba(255,255,255,.88); margin-top:18px; }
@media (min-width:641px){
  .final-inner{ text-align:center; }
  .final-inner p{ margin-inline:auto; text-wrap:balance; }
  .final .hero-actions{ justify-content:center; }
}

/* ---------- フッター ---------- */
.site-footer{ border-top:1px solid var(--rule); padding:36px 0 40px; font-size:13.5px; color:var(--ink-2); }
.footer-org{ font-weight:900; font-size:15px; color:var(--ink); letter-spacing:-0.02em; }
.footer-grid p{ margin:0 0 10px; }
.site-footer nav{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:18px 0; }
.site-footer nav a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.site-footer nav a:hover{ border-bottom-color:var(--accent); color:var(--accent-dark); }
.footer-copy{ margin-top:16px; }

/* ---------- 画面下の固定バー（〜640px） ---------- */
.mobile-cta-bar{
  position:fixed; z-index:100; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:1fr 1.4fr; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); border-top:1px solid var(--rule);
}
.mobile-cta-bar .btn{ min-height:48px; padding:8px 12px; font-size:15px; }

/* ===================================================================
   下層ページ（ホームページ制作・問い合わせ改善診断）で使う部品
   =================================================================== */

/* 節の地色 */
.sec-grey{ background:var(--grey); }
.sec-pale{ background:var(--accent-pale); }

/* 黒帯を流さずに置く形（下層ページ用） */
.band-wrap{
  width:min(100% - 40px, 1180px); margin-inline:auto;
  flex-wrap:wrap; gap:14px 34px; padding:0;
}
.band-wrap li{ white-space:normal; }

/* 白い囲み */
.panel{
  margin-top:28px; padding:22px 20px;
  background:var(--paper); border:1px solid var(--rule); border-radius:8px;
}
.panel h3{ font-size:17px; margin:0 0 12px; }
.panel > p + p{ margin-top:.9em; }
.panel-attention{
  margin-top:24px; background:var(--accent-pale);
  border-color:#F3C7B6; border-left:5px solid var(--accent);
}

/* 中黒つきの箇条書き */
.plain-list{ list-style:none; margin:0; padding:0; }
.plain-list li{ position:relative; padding-left:20px; font-size:14.5px; margin-bottom:9px; }
.plain-list li:last-child{ margin-bottom:0; }
.plain-list li::before{
  content:""; position:absolute; left:0; top:.82em;
  width:11px; height:2px; background:var(--accent);
}

/* 料金カード */
.pgrid{ display:grid; gap:18px; }
.pcard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule); border-top:6px solid var(--ink);
  border-radius:8px; padding:24px 22px 26px;
}
.pcard.is-rec{ border-top-color:var(--accent); border-color:var(--ink); }
.pcard-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  margin:0; padding:5px 14px; white-space:nowrap;
  background:var(--accent); color:#fff; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:-.01em;
}
.pcard-name{ font-size:18px; margin:0 0 8px; }
.pcard-amount{
  font-size:clamp(2.25rem, 9vw, 2.9rem); font-weight:900; line-height:1.05;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:0;
}
.pcard-amount span{ font-size:.3em; font-weight:700; letter-spacing:0; margin-left:.3em; white-space:nowrap; }
.pcard-amount-sm{ font-size:clamp(1.75rem, 7vw, 2.25rem); }
.pcard-tax{ font-size:13px; color:var(--ink-2); margin:6px 0 0; font-variant-numeric:tabular-nums; }
.pcard-spec{
  font-size:13.5px; font-weight:700; margin:14px 0 0;
  padding-top:14px; border-top:1px solid var(--rule);
}
.checks{ list-style:none; margin:16px 0 0; padding:0; }
.checks li{ position:relative; padding-left:24px; font-size:14px; line-height:1.7; margin-bottom:9px; }
.checks li::before{
  content:""; position:absolute; left:4px; top:.42em;
  width:6px; height:11px; border:solid var(--accent); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg);
}
.pcard-foot{
  margin:auto 0 0; padding-top:18px;
  font-size:12.5px; color:var(--ink-2);
}

/* 表（箱の中だけ横に動く） */
.tbl-h{ font-size:18px; margin:44px 0 14px; }
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper);
}
.table-wrap:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
table.data{ border-collapse:collapse; width:100%; min-width:660px; font-size:14px; }
table.data th,table.data td{
  padding:12px 16px; text-align:left; vertical-align:top; line-height:1.65;
  border-bottom:1px solid var(--rule);
}
table.data thead th{
  background:var(--ink); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:-.01em; border-bottom:none; white-space:nowrap;
}
table.data tbody th{ font-weight:700; background:var(--grey); white-space:nowrap; }
table.data tbody tr:last-child th,table.data tbody tr:last-child td{ border-bottom:none; }
table.data .num{ font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }

/* 番号つきの理由（この金額をどう考えているか） */
.numlist{ list-style:none; margin:0; padding:0; }
.numlist li{
  display:grid; grid-template-columns:auto 1fr; gap:0 16px; align-items:start;
  padding:20px 0; border-top:1px solid var(--rule);
}
.numlist li:last-child{ border-bottom:1px solid var(--rule); }
.numlist-n{
  font-size:clamp(1.6rem, 7vw, 2.25rem); font-weight:900; line-height:1;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--accent);
}
.numlist-b h3{ font-size:16.5px; margin:0 0 7px; }
.numlist-b p{ font-size:14.5px; color:var(--ink-2); margin:0; }

/* 手順（順番があるものだけ番号をふる） */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; }
.steps li{
  position:relative; counter-increment:step;
  padding:0 0 26px 52px;
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:900; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
}
.steps li::after{
  content:""; position:absolute; left:17.5px; top:40px; bottom:4px;
  width:2px; background:var(--rule);
}
.steps li:last-child{ padding-bottom:0; }
.steps li:last-child::after{ display:none; }
.step-b h3{ font-size:16.5px; margin:6px 0 7px; }
.step-b p{ font-size:14.5px; color:var(--ink-2); margin:0; }

/* 含まれないこと */
.exlist{ list-style:none; margin:0; padding:0; }
.exlist li{ padding:20px 0; border-top:1px solid var(--rule); }
.exlist li:last-child{ border-bottom:1px solid var(--rule); }
.exlist h3{
  position:relative; padding-left:22px; font-size:16.5px; margin:0 0 7px;
}
.exlist h3::before{
  content:""; position:absolute; left:0; top:.62em;
  width:13px; height:3px; background:var(--accent);
}
.exlist p{ padding-left:22px; font-size:14.5px; color:var(--ink-2); margin:0; }

/* 46項目 */
.itemgroup{ margin-top:40px; }
.itemgroup:first-of-type{ margin-top:0; }
.itemgroup-h{ display:flex; align-items:center; gap:12px; font-size:19px; margin:0 0 10px; }
.itemgroup-n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:34px; padding:0 8px; border-radius:6px;
  background:var(--ink); color:#fff;
  font-size:19px; font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.itemsub{
  font-size:13.5px; font-weight:900; letter-spacing:-.01em;
  margin:26px 0 0; padding-bottom:8px; border-bottom:2px solid var(--accent);
  display:inline-block;
}
.itemlist{ list-style:none; margin:10px 0 0; padding:0; }
.itemlist li{
  display:grid; grid-template-columns:4.6em 1fr; gap:0 10px; align-items:baseline;
  padding:9px 0; border-top:1px solid var(--rule); font-size:14px; line-height:1.65;
}
.item-id{
  font-size:12px; font-weight:900; letter-spacing:.01em;
  color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- 電話ボタンに番号を出せる幅から ---------- */
@media (min-width:560px){
  .tel-num{ display:inline; }
  .tel-word{ display:none; }
}

/* ---------- 中間（640px〜） ---------- */
@media (min-width:641px){
  body{ padding-bottom:0; }
  .mobile-cta-bar{ display:none; }
  .container,.band-h{ width:min(100% - 64px, 1180px); }
  .container-narrow{ width:min(100% - 64px, 760px); }
  section{ padding:80px 0; }
  .hero{ padding:56px 0 80px; }
  .stack::before{ left:-32px; right:-32px; top:-72px; }
  .site-nav ul{ gap:0 24px; padding:9px 0; }
  .band-track{ margin-left:max(32px, (100vw - 1180px) / 2); }
  .statement{ padding:30px 32px; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .pgrid{ grid-template-columns:1fr 1fr; gap:20px; }
  .pcard{ padding:28px 26px 30px; }
  .panel{ margin-top:32px; padding:26px 28px; }
  .band-wrap{ width:min(100% - 64px, 1180px); gap:16px 44px; }
  .numlist li{ gap:0 22px; padding:24px 0; }
  .steps li{ padding-left:60px; padding-bottom:30px; }
  .steps li::before{ width:42px; height:42px; font-size:14px; }
  .steps li::after{ left:20.5px; top:46px; }
  .exlist li{ padding:24px 0; }
  .tbl-h{ font-size:20px; }
  .svc{ padding:32px 30px 34px; }
  .sample-grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .cannot-list li{ grid-template-columns:auto 1fr; gap:0 22px; padding:26px 0; }
  .statement{ padding-left:28px; font-size:16.5px; }
  .deflist{ display:grid; grid-template-columns:auto 1fr; gap:0; }
  .deflist dt{ grid-column:1; padding:14px 20px 14px 0; border-bottom:1px solid var(--rule); color:var(--ink); white-space:nowrap; }
  .deflist dd{ grid-column:2; padding:14px 0; }
  .final{ padding:88px 0 92px; }
}

/* ---------- PC（1000px〜） ---------- */
@media (min-width:1000px){
  section{ padding:104px 0; }
  .hero{ padding:72px 0 96px; }
  .header-hours{ display:inline; }
  .hero-grid{ display:grid; grid-template-columns:1.28fr .72fr; gap:60px; align-items:center; }
  .hero h1{ font-size:clamp(3.5rem, 5.6vw, 4.5rem); margin-bottom:26px; }
  .hero h1.h1-tight{ font-size:clamp(2.9rem, 4.7vw, 3.75rem); }
  .hero-lead{ font-size:16px; }
  /* PC は斜めに切り取った青の色面をヒーロー全体に敷く（下層ページ） */
  .hero::before{
    content:""; position:absolute; z-index:0; inset:0 -4% 0 56%;
    background:var(--grad-diag);
    clip-path:polygon(19% 0, 100% 0, 100% 90%, 0 100%);
  }
  .stack{ margin-top:0; gap:0; }
  .stack::before{ display:none; }
  .hero-rough{ display:block; left:0; right:-32px; bottom:-88px; height:72px; }
  .scard{ padding:24px 26px; }
  .scard-1{ transform:rotate(-2.6deg); }
  .scard-2{ transform:rotate(1.8deg); margin-top:-8px; }
  .scard-3{ transform:rotate(-1.2deg); margin-top:-6px; }
  .band{ padding:50px 0 54px; }
  .band-list li{ font-size:18px; }
  .bicon{ width:24px; height:24px; }
  .svc h3{ font-size:21px; }
  .sample-grid{ grid-template-columns:.85fr 1.15fr; gap:56px; }

  /* できないこと: 左右交互 */
  .cannot-list{ border-top:1px solid var(--rule); }
  .cannot-list li{ width:58%; border-top:none; padding:30px 0; }
  .cannot-list li + li{ margin-top:-10px; }
  .cannot-list li:nth-child(even){ margin-left:auto; }
  .cannot-list li:last-child{ border-bottom:none; padding-bottom:0; }
  .cnum{ font-size:3.25rem; }
  .cbody h3{ font-size:19px; }
  .cbody p{ font-size:15px; }

  .who-grid{ grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
  .pgrid{ grid-template-columns:repeat(3, 1fr); gap:24px; }
  .svc-grid-3{ grid-template-columns:repeat(3, 1fr); }
  .itemlist{ display:grid; grid-template-columns:1fr 1fr; column-gap:44px; }
  .itemlist li{ font-size:14.5px; }
  .numlist-b h3{ font-size:18px; }
  .numlist-b p,.step-b p,.exlist p{ font-size:15px; }
  .step-b h3,.exlist h3{ font-size:18px; }
  .exlist li{ padding:26px 0; }
  /* 手順は「上から下へ→次の列」の順に並べる。列の最後は縦線を消す。 */
  .steps{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(4, auto); column-gap:56px; }
  .steps li:nth-child(4)::after{ display:none; }
  .itemgroup-h{ font-size:21px; }
  .deflist dt{ padding-right:32px; }
  .faq-item summary{ font-size:17px; padding:22px 46px 22px 0; }
  .final h2{ font-size:clamp(2.5rem, 4vw, 3.25rem); }
  .final p{ font-size:16.5px; }
}

/* ---------- 広い画面では色面をもう少し左へ ---------- */
@media (min-width:1200px){
  .hero::before{ inset:0 -4% 0 54%; }
}

/* ---------- 320px 付近の詰め ---------- */
@media (max-width:359px){
  .container,.band-h{ width:min(100% - 32px, 1180px); }
  .container-narrow{ width:min(100% - 32px, 760px); }
  .brand-name{ font-size:15px; }
  .brand-logo{ height:28px; }
  .header-cta .btn-sm{ padding:8px 12px; font-size:13px; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .band-viewport{ overflow:visible; }
  .band-track{ display:block; width:auto; animation:none; }
  .band-list{ flex-wrap:wrap; gap:14px 32px; padding:0; }
  .band-dup{ display:none; }
  /* 斜めの塗り・積みカードの傾きは動きではないので、そのまま残す。 */
}

/* 会社概要・お問い合わせ用の部品（2026-09-03 統合） */
.sec-alt{ background:var(--grey); }
.info-box{
  margin-top:28px; padding:24px;
  background:var(--paper); border:1px solid var(--rule); border-left:6px solid var(--accent);
  border-radius:0 8px 8px 0;
}
body:has(.contact-grid) .info-box{ margin-top:30px; }
.info-box h3{ font-size:18px; margin:0 0 12px; }
.policy-block h3{ font-size:19px; margin:34px 0 10px; }
.policy-block h3:first-of-type{ margin-top:28px; }
.contact-grid{ display:grid; gap:18px; margin-top:30px; }
.contact-card{
  display:flex; flex-direction:column;
  min-width:0; padding:24px;
  background:var(--paper); border:1px solid var(--rule); border-top:6px solid var(--ink);
  border-radius:8px;
}
.contact-card:first-child{ border-top-color:var(--accent); }
.contact-card h3{ font-size:19px; margin:0 0 10px; }
.contact-card p{ font-size:14.5px; color:var(--ink-2); }
.contact-card .card-foot{ margin-top:auto; padding-top:18px; }
.contact-card .btn{ width:100%; }
.flow-steps{
  display:grid; gap:14px;
  list-style:none; margin:30px 0 0; padding:0; counter-reset:flow;
}
.flow-steps li{
  position:relative; padding:22px 22px 22px 72px;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper);
}
.flow-steps li::before{
  counter-increment:flow; content:counter(flow, decimal-leading-zero);
  position:absolute; left:22px; top:22px;
  color:var(--accent); font-weight:900; font-size:22px; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-0.03em;
}
.flow-steps h3{ font-size:17px; margin:0 0 8px; }
.flow-steps p{ font-size:14.5px; color:var(--ink-2); margin:0; }
.page-stack{ max-width:420px; margin-inline:auto; }
.page-stack .scard{ transform:none; }
@media (min-width:1000px){
  .contact-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }   /* 2026-09-09: 641〜999px はボタンが折れるので1列に */
}
@media (min-width:1000px){
  .page-stack{ margin-left:auto; margin-right:0; }
  .page-stack .scard:nth-child(1){ transform:rotate(-2deg); }
  .page-stack .scard:nth-child(2){ transform:rotate(1.3deg); margin-top:-6px; }
  .page-stack .scard:nth-child(3){ transform:rotate(-.8deg); margin-top:-6px; }
}
@media (max-width:359px){
  .deflist{ grid-template-columns:1fr; }
  .deflist dt,.deflist dd{ grid-column:1; }
  .deflist dt{ padding:12px 0 2px; border-bottom:0; white-space:normal; }
  .deflist dd{ padding:0 0 12px; overflow-wrap:anywhere; }
}


/* ===================================================================
   トップの最初の画面（2026-09-04 案②: 点検前／改善後のスマホ2台）
   =================================================================== */
.hero-ba{ padding:36px 0 44px; }
.hero-ba::before{ display:none; }           /* トップは斜めの面を使わない */
.hero-ba .hero-grid{ display:block; }
.hero-ba .hero-copy{ position:relative; z-index:2; }
.hero-ba .hero-lead{ margin-bottom:24px; }
/* 見出し「作るのも、直すのも。／ホームページからの集客に／困ったら、マチリーチ」は2行目が12文字なので一段小さく */
.hero-ba h1{ font-size:clamp(1.55rem, 7.3vw, 3.4rem); letter-spacing:-0.04em; }

/* 2台のまとまり。後ろにロゴの波形、右上にオレンジの点 */
.ba{ position:relative; margin:40px auto 0; max-width:560px; padding:22px 0 6px; }
.ba-wave{ position:absolute; z-index:0; left:-16%; right:-16%; top:14%; height:60%; pointer-events:none; opacity:.92; }
.ba-wave svg{ display:block; width:100%; height:100%; }
.ba-dot{ position:absolute; z-index:0; right:1%; top:0; width:24px; height:24px; border-radius:50%; background:var(--cta); }
.ba-pair{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.phone{ position:relative; margin:0; }
.ph-tag{
  display:inline-block; margin:0 0 10px; padding:3px 12px;
  font-size:13px; font-weight:900; line-height:1.5; color:var(--ink);
  background:#fff; border:1.5px solid var(--ink); border-radius:999px;
}
.ph-tag-after{ background:var(--ink); color:#fff; }
.ph-frame{
  position:relative; overflow:hidden; aspect-ratio:1 / 2;
  border:5px solid #1B2130; border-radius:24px; background:#1B2130;
  box-shadow:0 18px 34px rgba(15,31,61,.26);
}
.ph-frame::before{
  content:""; position:absolute; z-index:2; left:50%; top:0; transform:translateX(-50%);
  width:38%; height:13px; background:#1B2130; border-radius:0 0 10px 10px;
}
.ph-frame img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:19px; }
.phone-after .ph-frame{ box-shadow:0 24px 44px rgba(0,105,232,.30); }

/* 吹き出し（点検前）と ✓ 札（改善後）。スマホでは各スマホの下に並べる */
.callouts{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; }
.callouts li{
  position:relative; padding:6px 9px;
  font-size:12.5px; font-weight:700; line-height:1.35; color:var(--ink);
  background:#fff; border:1.5px solid var(--ink); border-radius:9px;
}
.callouts-after li{ border-color:var(--accent); color:var(--accent-dark); padding-left:26px; }
.callouts-after li::before{
  content:""; position:absolute; left:8px; top:8px; width:11px; height:6px;
  border-left:2.2px solid var(--accent); border-bottom:2.2px solid var(--accent); transform:rotate(-45deg);
}

/* 3つの事実の帯 */
.facts{
  position:relative; z-index:2; margin-top:30px; padding:4px 18px;
  background:#fff; border:1px solid var(--rule); border-radius:14px;
  box-shadow:0 12px 30px rgba(15,31,61,.08);
  display:grid;
}
.fact{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--rule); }
.fact:first-child{ border-top:none; }
.fact-ic{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--grad-diag); color:#fff; display:grid; place-items:center; }
.fact-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fact-k{ margin:0 0 2px; font-size:12.5px; font-weight:700; color:var(--ink-2); }
.fact-v{
  margin:0; font-size:clamp(1.3rem, 5.2vw, 1.6rem); font-weight:900; line-height:1.15;
  letter-spacing:-0.03em; color:var(--accent); font-variant-numeric:tabular-nums;
}
.fact-v small{ font-size:.55em; font-weight:700; letter-spacing:0; margin-left:.25em; color:var(--ink); }
.fact-v-text{ font-size:clamp(1.05rem, 4.2vw, 1.25rem); letter-spacing:-0.02em; }

/* 業種の帯（トップの最初の画面のすぐ下） */
.industries{ background:var(--grey); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:16px 0; }
.industries-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.industries-h{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.industries ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.industries li{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; }
.industries li svg{ width:22px; height:22px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.industries li.etc{ font-weight:500; color:var(--ink-2); }

@media (min-width:641px){
  .hero-ba{ padding:52px 0 56px; }
  .ba{ margin-top:48px; }
  .ba-pair{ width:min(100%, 440px); margin:0 auto; gap:22px; }
  .facts{ margin-top:40px; padding:8px 8px; grid-template-columns:repeat(3, 1fr); }
  .fact{ padding:16px 18px; border-top:none; border-left:1px solid var(--rule); }
  .fact:first-child{ border-left:none; }
  .industries{ padding:18px 0; }
}

@media (min-width:1000px){
  .hero-ba{ padding:60px 0 64px; }
  .hero-ba .hero-grid{ display:grid; grid-template-columns:minmax(0, .98fr) minmax(0, 1.02fr); gap:56px; align-items:center; }
  .hero-ba h1{ font-size:clamp(2.2rem, 3.45vw, 2.7rem); margin-bottom:22px; }
  .ba{ margin:0; max-width:none; padding:30px 0 16px; }
  .ba-pair{ width:min(100%, 400px); }
  .ba-wave{ left:-30%; right:-30%; top:-2%; height:98%; }
  .phone-after{ margin-top:-22px; }
  .facts{ margin-top:48px; }
}

/* 広い画面では吹き出しを左右に出して画面を指す */
@media (min-width:1200px){
  .ba-pair{ width:400px; }
  .callouts{ position:absolute; top:22%; margin:0; gap:34px; width:150px; }
  .callouts-before{ right:calc(100% - 16px); }
  .callouts-after{ left:calc(100% - 16px); }
  .callouts li{ padding:8px 11px; box-shadow:0 6px 14px rgba(15,31,61,.10); }
  .callouts-before li::after{
    content:""; position:absolute; right:-7px; top:50%; width:11px; height:11px;
    background:#fff; border-right:1.5px solid var(--ink); border-top:1.5px solid var(--ink);
    transform:translateY(-50%) rotate(45deg);
  }
  .callouts-after li::after{
    content:""; position:absolute; left:-7px; top:50%; width:11px; height:11px;
    background:#fff; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent);
    transform:translateY(-50%) rotate(45deg);
  }
  .callouts-after li{ padding-left:28px; }
}

/* サービスロゴ（親ロゴ＋サービス名のロックアップ。2026-09-04） */
/* サービスページのヘッダーは親ロゴではなくサービスロゴ（C型: 上に小さくマチリーチ、下に大きくサービス名） */
.brand-logo-svc{ display:block; height:46px; width:auto; }
@media (min-width:641px){ .brand-logo-svc{ height:50px; } }
.eyebrow-logo{ margin:0 0 10px; }
.eyebrow-logo img{ display:block; height:34px; width:auto; }
.svc-logo{ margin:0 0 12px !important; }
.svc-logo img{ display:block; height:32px; width:auto; }
@media (max-width:359px){ .eyebrow-logo img{ height:28px; } .svc-logo img{ height:26px; } }

/* ===================================================================
   サービスページの最初の画面（2026-09-04: 制作＝端末に見本サイト、改善＝点検前のスマホ＋46）
   =================================================================== */
.hero-hp h1,.hero-kz h1{ font-size:clamp(1.75rem, 8.4vw, 3.6rem); }
.hero-kz h1.h1-tight{ font-size:clamp(1.6rem, 7.6vw, 3.2rem); }

/* 制作: ノートパソコン＋スマホ */
.ba-hp{ max-width:600px; }
.devices{ position:relative; z-index:1; margin:0 auto; max-width:560px; padding:12px 0 0; }
.laptop{ margin:0; position:relative; }
.lp-screen{
  overflow:hidden; aspect-ratio:16 / 10; background:#1B2130;
  border:6px solid #1B2130; border-bottom-width:10px; border-radius:14px 14px 4px 4px;
  box-shadow:0 22px 44px rgba(15,31,61,.22);
}
.lp-screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.lp-base{ height:12px; margin:0 -3%; background:linear-gradient(#DCE1EA, #B5BDCB); border-radius:0 0 12px 12px; }
.phone-hp{ display:none; }

/* 改善: 点検前のスマホ＋吹き出し＋46 */
.ba-kz{ max-width:560px; }
.kz-pair{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:16px; align-items:center; }
.big46{ margin:0; text-align:center; }
.big46-n{ display:block; font-size:clamp(4.2rem, 17vw, 7.5rem); font-weight:900; line-height:.95; letter-spacing:-0.05em; color:var(--accent); font-variant-numeric:tabular-nums; }
.big46-t{ display:block; margin-top:6px; font-size:clamp(1rem, 3.8vw, 1.5rem); font-weight:900; letter-spacing:-0.02em; color:var(--ink); }

@media (min-width:641px){
  .devices{ max-width:640px; padding:12px 0 40px; }
  .phone-hp{ display:block; position:absolute; left:-2%; bottom:0; width:24%; margin:0; }
  .phone-hp .ph-frame{ border-width:4px; border-radius:18px; box-shadow:0 18px 34px rgba(15,31,61,.30); }
  .phone-hp .ph-frame::before{ height:9px; }
  .kz-pair{ gap:28px; }
}
@media (min-width:1000px){
  .hero-hp .hero-grid{ grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); }
  .ba-hp{ max-width:none; }
  .devices{ max-width:none; padding:26px 0 44px 8%; }
  .hero-hp h1,.hero-kz h1{ font-size:clamp(2.6rem, 4.2vw, 3.5rem); }
  .hero-kz h1.h1-tight{ font-size:clamp(2.3rem, 3.7vw, 3.1rem); }
  .ba-kz{ max-width:none; }
  .kz-pair{ grid-template-columns:250px minmax(0, 1fr); gap:36px; width:min(100%, 520px); margin:0 auto; }
}
@media (min-width:1200px){
  .kz-pair{ margin-left:150px; }
}

/* ===================================================================
   トップの下半分（2026-09-04 夜・ChatGPT 案A/B の混合）: 節1〜4
   =================================================================== */
/* 節1 先に書いていること: ネイビーの角丸の箱（流れる帯をやめる） */
.band-card{ background:var(--paper); padding:8px 0 0; color:var(--ink); }
.band-box{ background:var(--ink); color:#fff; border-radius:18px; padding:24px 16px 22px; }
.band-card .band-h{
  display:flex; align-items:center; justify-content:center; gap:14px;
  width:auto; margin:0 0 18px; font-size:15px; font-weight:700; letter-spacing:.02em; color:#fff; line-height:1.4;
}
.band-card .band-h::before,.band-card .band-h::after{ content:""; display:block; flex:0 0 34px; height:2px; background:var(--accent-2); margin:0; vertical-align:baseline; }
.band-card .band-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px 8px; list-style:none; margin:0; padding:0; }
.band-card .band-list li{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  font-size:13.5px; font-weight:700; line-height:1.45; white-space:normal; letter-spacing:-0.01em;
}
.band-card .band-list li:last-child{ grid-column:1 / -1; }
.band-ic{ width:52px; height:52px; border-radius:50%; border:2px solid var(--accent-2); color:var(--accent-2); display:grid; place-items:center; }
.band-ic svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.br-pc{ display:none; }

/* 節2 業種: 薄い青の角丸の箱 */
.industries-panel{ background:var(--paper); border:0; padding:14px 0 0; }
.industries-box{ background:var(--accent-pale); border-radius:16px; padding:18px 16px 16px; text-align:center; }
.industries-panel .industries-h{ margin:0 0 12px; color:var(--ink); font-size:14.5px; white-space:normal; }  /* 320px で折り返す */
.industries-panel ul{ justify-content:center; gap:10px 18px; }

/* 節3 2つのサービス: カードの見せ場 */
.plan-mini{ list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:8px; }
.plan-mini li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--paper);
}
.plan-mini b{ font-size:20px; font-weight:900; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan-mini b small{ font-size:12px; font-weight:700; margin-left:2px; }
.plan-mini span{ font-size:12.5px; color:var(--ink-2); text-align:right; }
/* 46項目の内訳（2026-09-04 夜 本人指摘: 番号の格子はやめ、合計を1つ目立たせて代表項目を3つずつ） */
.check-mini{ margin:4px 0 18px; }
.check-mini-total{
  display:flex; align-items:baseline; gap:8px; margin:0 0 10px 2px;
}
.check-mini-total b{ font-size:34px; font-weight:900; line-height:1; letter-spacing:-0.04em; color:var(--accent); font-variant-numeric:tabular-nums; }
.check-mini-total span{ font-size:14px; font-weight:900; color:var(--ink); }
.check-mini-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--rule); border-radius:10px; background:var(--paper); overflow:hidden;
}
.check-mini-col{ padding:12px 12px 12px 14px; min-width:0; }
.check-mini-col + .check-mini-col{ border-left:1px solid var(--rule); }
.check-mini-h{ display:flex; align-items:baseline; gap:6px; margin:0 0 8px; }
.check-mini-h b{ font-size:22px; font-weight:900; line-height:1; letter-spacing:-0.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.check-mini-h span{ font-size:12px; font-weight:700; color:var(--ink-2); }
.check-mini-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.check-mini-col li{ position:relative; padding-left:12px; font-size:12px; line-height:1.45; color:var(--ink); }
.check-mini-col li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.check-mini-more{ margin:8px 0 0; font-size:11.5px; font-weight:700; color:var(--ink-2); }

/* 節4 見本: 薄い青の地、ブラウザ窓＋スマホ、波の透かし */
.sample-v2{ position:relative; overflow:hidden; background:var(--accent-pale); }
.sample-wave{ position:absolute; z-index:0; left:-10%; bottom:-4%; width:46%; height:auto; aspect-ratio:1088 / 444; color:var(--accent); opacity:.10; pointer-events:none; }
.sample-v2 .sample-grid{ position:relative; z-index:1; }
.sample-devices{ position:relative; max-width:560px; margin:0 auto; padding:0 0 12%; }
.browser{ margin:0; border-radius:12px; overflow:hidden; background:#fff; border:1px solid var(--rule); box-shadow:0 22px 44px rgba(15,31,61,.16); }
.browser-bar{ display:flex; align-items:center; gap:6px; height:26px; padding:0 12px; background:#E8ECF3; }
.browser-bar i{ width:9px; height:9px; border-radius:50%; background:#C3CAD6; }
.browser-screen{ aspect-ratio:16 / 10; background:#F4F6FA; }   /* 画像が読み込まれる前も高さを確保 */
.browser-screen img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.phone-sample{ position:absolute; right:-2%; bottom:0; width:27%; margin:0; }
.phone-sample .ph-frame{ border-width:4px; border-radius:18px; box-shadow:0 18px 34px rgba(15,31,61,.28); }
.phone-sample .ph-frame::before{ height:9px; }

@media (min-width:641px){
  .band-card{ padding-top:12px; }
  .band-box{ padding:28px 22px 26px; border-radius:22px; }
  .band-card .band-h{ font-size:16px; margin-bottom:22px; }
  .band-card .band-list{ grid-template-columns:repeat(5, 1fr); gap:0; }
  .band-card .band-list li{ padding:0 10px; font-size:14px; }
  .band-card .band-list li + li{ border-left:1px solid rgba(255,255,255,.18); }
  .band-card .band-list li:last-child{ grid-column:auto; }
  .br-pc{ display:inline; }
  .industries-panel{ padding-top:18px; }
  .industries-box{ padding:20px 24px 18px; }
  .industries-panel .industries-h{ font-size:15.5px; }
  .industries-panel ul{ gap:10px 26px; }
  .check-mini-col{ padding:14px 16px; }
  .check-mini-col li{ font-size:12.5px; }
  .sample-devices{ max-width:640px; }
}
@media (min-width:1000px){
  .band-box{ padding:30px 32px 28px; }
  .band-card .band-list li{ font-size:15px; }
  .sample-devices{ max-width:none; padding:0 6% 10% 0; }
}

/* ---- 節5 品質: 薄い青の箱、大きな22と22項目の一覧 ---- */
.quality-v2{ background:var(--paper); padding-top:24px; }
.q-box{ background:var(--accent-pale); border-radius:18px; padding:28px 18px 26px; }
.sec-head-c{ text-align:center; max-width:none; margin-bottom:22px; }
.sec-head-c .sec-lead{ margin-inline:auto; max-width:40em; }
.q-grid{ display:grid; gap:18px; margin-bottom:22px; }
.q-big{ margin:0; text-align:center; }
.q-big-n{ display:block; font-size:clamp(4rem, 18vw, 6.5rem); font-weight:900; line-height:.95; letter-spacing:-0.05em; color:var(--accent); font-variant-numeric:tabular-nums; }
.q-big-t{ display:block; margin-top:4px; font-size:15px; font-weight:900; color:var(--ink); line-height:1.4; }
.q-big-t small{ display:block; font-size:12px; font-weight:700; color:var(--ink-2); }
.q-list{ list-style:none; margin:0; padding:16px 16px 14px; background:var(--paper); border:1px solid var(--rule); border-radius:12px; display:grid; gap:8px 18px; }
.q-list li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; font-weight:700; line-height:1.45; color:var(--ink); }
.q-list svg{ width:16px; height:16px; flex:none; color:var(--accent); margin-top:2px; }
.statement-v2{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; border:1.5px solid var(--accent); border-left-width:1.5px; border-radius:12px; background:var(--paper); padding:20px 18px; margin-top:0; }
.statement-ic{ width:34px; height:34px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.statement-v2 p{ margin:0; font-size:15px; }
.quality-v2 .disclaimer{ margin-top:16px; }
.q-note{ text-align:center; font-weight:700; color:var(--ink); margin-top:16px; }

/* ---- 節7 よくあるご質問: 薄い青の箱に白いカード ---- */
.faq-v2{ padding-top:24px; }
.faq-box{ background:var(--accent-pale); border-radius:18px; padding:24px 16px 18px; }
.faq-v2 h2{ margin-bottom:18px; }
.faq-v2 .faq-item{ background:var(--paper); border:1px solid var(--rule); border-radius:10px; margin-bottom:8px; padding:0 14px; }
.faq-v2 .faq-item:last-child{ border-bottom:1px solid var(--rule); }
.faq-v2 .faq-item summary{ padding-left:2px; }

/* ---- 節8 締め: 青のグラデーションの帯と波の透かし ---- */
.final-v2{ background:linear-gradient(120deg, #00C2E0 0%, #0069E8 58%, #0052B8 100%); }
.final-wave{ position:absolute; right:-6%; bottom:-10%; width:46%; height:auto; aspect-ratio:1088 / 444; color:#fff; opacity:.14; pointer-events:none; }
.final-v2 .btn-on-accent{ color:var(--ink); }
.final-v2 .btn-on-accent:hover{ background:var(--ink); color:#fff; }

/* ---- 節9 フッター: ネイビー ---- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.82); border-top:0; padding:40px 0 44px; }
.footer-logo{ display:block; height:34px; width:auto; margin-bottom:14px; }
.site-footer .footer-org{ color:#fff; }
.site-footer a{ color:#fff; }
.site-footer nav a{ color:#fff; border-bottom-color:rgba(255,255,255,.28); }
.site-footer nav a:hover{ border-bottom-color:var(--accent-2); color:var(--accent-2); }
.site-footer .footer-copy{ color:rgba(255,255,255,.62); }

@media (min-width:641px){
  .q-box{ padding:36px 32px 32px; border-radius:22px; }
  .q-grid{ grid-template-columns:200px 1fr; gap:28px; align-items:center; }
  .q-list{ grid-template-columns:1fr 1fr; padding:20px 22px 18px; }
  .statement-v2{ padding:24px 26px; gap:18px; }
  .faq-box{ padding:32px 28px 24px; border-radius:22px; }
  .site-footer{ padding:48px 0 52px; }
}
@media (min-width:1000px){
  .q-grid{ grid-template-columns:240px 1fr; gap:36px; }
  .q-list li{ font-size:14px; }
}

@media (max-width:640px){
  .plan-mini li{ flex-direction:column; align-items:flex-start; gap:2px; }
  .plan-mini span{ text-align:left; }
  .check-mini-cols{ grid-template-columns:1fr; }
  .check-mini-col + .check-mini-col{ border-left:0; border-top:1px solid var(--rule); }
}

/* ===================================================================
   下層4ページ（2026-09-09: ChatGPT 案A/B の混合。制作・改善・会社概要・お問い合わせ）
   4ページで共用する部品。ページ固有のものは、この下に「制作」「改善」「会社概要」「お問い合わせ」の見出しで追記する。
   =================================================================== */

/* 表の左列は薄い青（比較表・追加費用） */
table.data tbody th{ background:var(--accent-pale); }

/* 薄い青の丸に線画アイコン（分かること・含まれないこと・金額の考え方・窓口） */
.icon-ring{
  display:grid; place-items:center; flex:none;
  width:56px; height:56px; border-radius:50%;
  background:var(--accent-pale); color:var(--accent);
}
.icon-ring svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* 薄い青の地の上では丸を白にする（同色で消えないように） */
.sec-pale .icon-ring,.q-box .icon-ring,.after-box .icon-ring{ background:var(--paper); }

/* 枠付きの定義リスト: 左列が薄い青の表（契約条件・会社概要・特商法・話が早いこと） */
.deflist.deflist-table{ border:1px solid var(--rule); border-top:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper); }
.deflist.deflist-table dt{ padding:12px 16px 4px; background:var(--accent-pale); color:var(--ink); font-size:13.5px; }
.deflist.deflist-table dd{ padding:10px 16px 14px; border-bottom:1px solid var(--rule); }
.deflist.deflist-table dd:last-of-type{ border-bottom:0; }
h2 + .deflist.deflist-table{ margin-top:24px; }   /* 見出しの直後に置くとき（会社概要・特商法） */

/* アイコンの丸を上に置いた白いカード（分かること 3枚など） */
.icard-grid{ display:grid; gap:14px; }
.icard{ background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:24px 18px 22px; text-align:center; }
.icard .icon-ring{ margin:0 auto 12px; }
.icard h3{ font-size:17px; margin:0 0 8px; }
.icard p{ font-size:14px; color:var(--ink-2); margin:0; text-align:left; }

/* 流れ（カード型 A: 番号の丸＋線画アイコン＋見出し＋説明。制作の流れ・相談のあとの流れ） */
.flow-cards{ list-style:none; margin:0; padding:0; counter-reset:fc; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.flow-cards li{
  position:relative; counter-increment:fc; min-width:0;
  background:var(--accent-pale); border:1.5px solid transparent; border-radius:12px; padding:18px 14px 16px;
  text-align:center;
}
.flow-cards li.is-key{ background:var(--paper); border-color:var(--accent); box-shadow:0 10px 24px rgba(0,105,232,.12); }
.fc-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:12.5px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.fc-n::before{ content:counter(fc, decimal-leading-zero); }
.fc-ic{ display:block; width:30px; height:30px; margin:10px auto 8px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.flow-cards h3{ font-size:14.5px; line-height:1.4; margin:0 0 8px; }
.flow-cards p{ font-size:12.5px; line-height:1.6; color:var(--ink-2); margin:0; text-align:left; }
/* 次のカードへ向かう矢印。行末（2列なら偶数番目）は出さない */
.flow-cards li::after{
  content:""; position:absolute; right:-9px; top:50%; z-index:1;
  width:7px; height:7px; border-top:2px solid var(--accent); border-right:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
}
.flow-cards li:last-child::after,.flow-cards li:nth-child(2n)::after{ display:none; }

/* 最初の画面の右側: ネイビーの箱に3つの事実（会社概要・お問い合わせ。斜めに積むカードの代わり） */
.page-stack{ position:relative; }
.info-stack{
  position:relative; z-index:1;
  background:var(--ink); color:#fff; border-radius:16px; padding:6px 22px;
  box-shadow:0 18px 40px rgba(15,31,61,.28);
}
.info-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid rgba(255,255,255,.14); }
.info-row:first-child{ border-top:0; }
.info-ic{ flex:none; width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.10); color:var(--accent-2); display:grid; place-items:center; }
.info-ic svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.info-k{ margin:0 0 2px; font-size:12px; font-weight:700; color:rgba(255,255,255,.7); }
.info-v{ margin:0; font-size:18px; font-weight:900; letter-spacing:-0.02em; line-height:1.3; overflow-wrap:anywhere; }
.info-sub{ margin:4px 0 0; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.78); }
.hero-wave{ position:absolute; z-index:0; right:-12%; bottom:-14%; width:70%; height:auto; aspect-ratio:1088 / 444; color:#fff; opacity:.22; pointer-events:none; }

@media (min-width:641px){
  .deflist.deflist-table{ grid-template-columns:minmax(150px, auto) 1fr; }
  .deflist.deflist-table dt{ padding:14px 20px; border-bottom:1px solid var(--rule); white-space:nowrap; }
  .deflist.deflist-table dd{ padding:14px 20px; }
  .deflist.deflist-table dt:last-of-type{ border-bottom:0; }
  .icard-grid{ grid-template-columns:repeat(3, 1fr); gap:18px; }
  .icard{ padding:28px 22px 26px; }
  .flow-cards{ gap:16px; }
  .flow-cards li{ padding:20px 16px 18px; }
  .flow-cards li::after{ right:-11px; }
  .info-stack{ padding:8px 26px; }
  .info-row{ padding:20px 0; }
  .info-v{ font-size:20px; }
}
@media (min-width:1000px) and (max-width:1199px){
  .info-v{ font-size:17px; }
}
@media (min-width:1000px){
  .icard h3{ font-size:18px; }
  .icard p{ font-size:14.5px; }
  .flow-cards{ grid-template-columns:repeat(4, 1fr); gap:20px; }
  .flow-cards li:nth-child(2n)::after{ display:block; }
  .flow-cards li:last-child::after,.flow-cards li:nth-child(4n)::after{ display:none; }
  .flow-cards h3{ font-size:15.5px; }
  .flow-cards p{ font-size:13px; }
  .flow-cards li::after{ right:-13px; }
  .page-stack{ max-width:440px; }
  .hero-wave{ right:-24%; bottom:-30%; width:86%; }
}
@media (max-width:359px){
  .deflist.deflist-table dt{ padding:10px 14px 2px; border-bottom:0; }
  .deflist.deflist-table dd{ padding:6px 14px 12px; }
  .flow-cards{ grid-template-columns:1fr; }
  .flow-cards li::after{ display:none; }
}

/* ---- 制作（2026-09-09） ---- */
/* 節3: 節の右上に波の透かし（B） */
.sec-wave{ position:relative; overflow:hidden; }
.sec-wave > .container{ position:relative; z-index:1; }
.corner-wave{ position:absolute; z-index:0; right:-6%; top:-4%; width:38%; height:auto; aspect-ratio:1088 / 444; color:var(--accent); opacity:.10; pointer-events:none; }
/* 節3: 範囲に含まれないもの（B: 白い囲みをやめ、線画アイコン付きの2列の一覧） */
.exclude-h{ font-size:18px; margin:36px 0 16px; }
.exclude-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.exclude-list li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.exclude-list svg{ flex:none; width:28px; height:28px; margin-top:2px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.exclude-list b{ font-weight:900; color:var(--ink); }
/* 節5: この金額をどう考えているか（B: 番号なし、丸いアイコンだけ。スマホはアイコン左） */
.reasons{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.reasons li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; align-content:start; }
.reasons h3{ font-size:16px; margin:0 0 6px; }
.reasons p{ font-size:14px; color:var(--ink-2); margin:0; }
/* 節6: 品質（トップと同じ薄い青の箱）。仕上がりの囲みは PC で文とボタンを左右に */
.q-sample{ margin-top:22px; }
.q-sample h3{ font-size:17px; margin:0 0 8px; }
.q-sample .btn{ margin-top:14px; }
@media (min-width:641px){
  .exclude-h{ margin-top:40px; }
  .exclude-list{ grid-template-columns:1fr 1fr; gap:20px 36px; }
  .reasons{ grid-template-columns:repeat(3, 1fr); gap:28px 22px; }
  .reasons li{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:12px; }
}
@media (min-width:1000px){
  .q-sample{ display:flex; align-items:center; justify-content:space-between; gap:28px; }
  .q-sample p{ margin:0; }
  .q-sample .btn{ margin-top:0; flex:none; }
  .reasons h3{ font-size:16.5px; }
  .reasons p{ font-size:14.5px; }
}
/* 任せる→採用: 金額の拡大と5列は 1200px から（1000〜1199px では「（税抜）」や見出しが折れるため）。
   641〜1199px は金額を少し小さくして「円（税抜）」が次の行に落ちないようにする */
@media (min-width:641px) and (max-width:1199px){
  .pcard-amount{ font-size:2.5rem; }
}
@media (min-width:1200px){
  .pcard-amount{ font-size:3.1rem; }
  .pcard-amount-sm{ font-size:2.4rem; }
  .reasons{ grid-template-columns:repeat(5, 1fr); gap:28px 18px; }
}
/* ---- /制作 ---- */

/* ---- 改善（2026-09-09） ---- */
/* 節2: レポートに入るもの（行ごとに線画アイコン） */
.icon-list{ list-style:none; margin:0; padding:0; }
.icon-list li{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-top:1px solid var(--rule); font-size:14.5px; line-height:1.7; }
.icon-list li:first-child{ border-top:0; padding-top:0; }
.icon-list svg{ flex:none; width:24px; height:24px; margin-top:3px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-list + .small{ margin-top:14px; padding-top:14px; border-top:1px solid var(--rule); }
/* 節3: 46項目（A: 見出しの 46項目 を青く大きく、大きな青い数字、白い箱、A〜G群のカード） */
.items-h em{ font-style:normal; color:var(--accent); font-size:1.3em; letter-spacing:-0.04em; }
.items-attn{ background:var(--paper); border-color:var(--rule); display:flex; gap:12px; align-items:flex-start; }
.items-attn > svg{ flex:none; width:24px; height:24px; margin-top:3px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.items-attn p{ margin:0; }
.itemgroup-n{ min-width:0; height:auto; padding:0; border-radius:0; background:transparent; color:var(--accent); font-size:clamp(2.2rem, 9vw, 3rem); letter-spacing:-0.05em; line-height:1; }
.itembox{ background:var(--paper); border:1px solid var(--rule); border-radius:12px; padding:6px 18px; margin-top:14px; }
.itembox .itemlist{ margin-top:0; }
.itembox .itemlist li:first-child{ border-top:0; }
@media (min-width:1000px){ .itembox .itemlist li:nth-child(2){ border-top:0; } }
.igroups{ display:grid; gap:14px; margin-top:16px; }
.igroup{ background:var(--paper); border:1px solid var(--rule); border-radius:12px; overflow:hidden; }
.igroup .itemsub{ display:block; margin:0; padding:10px 18px; background:var(--accent-pale); border-bottom:0; font-size:14px; }
.igroup .itemlist{ margin:0; padding:4px 18px 8px; display:block; }
.igroup .itemlist li:first-child{ border-top:0; }
/* 節4: 含まれないこと（B: アイコンを上に置いた6項目。カードにせず薄い線で区切る） */
.exgrid{ list-style:none; margin:0; padding:0; display:grid; }
.exgrid li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; align-content:start; padding:18px 0; border-top:1px solid var(--rule); }
.exgrid li:first-child{ border-top:0; padding-top:0; }
.exgrid h3{ font-size:16px; margin:0 0 6px; }
.exgrid p{ font-size:14px; color:var(--ink-2); margin:0; }
/* 節5: 流れ（B案1: 番号の丸4つ＋④から線で薄い青の囲み。スマホは B案2 の縦積み） */
.flow-wrap{ counter-reset:f4; }
.flow4{ list-style:none; margin:0; padding:0; display:grid; }
.flow4 li{ position:relative; counter-increment:f4; display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; align-content:start; padding:0 0 28px; }
.flow4 li:last-child{ padding-bottom:20px; }
.f4-n{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%; background:var(--grad-diag); color:var(--ink);
  font-size:24px; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:0 8px 18px rgba(0,105,232,.22);
}
.f4-n::before{ content:counter(f4); }
.flow4 h3{ font-size:17px; margin:11px 0 6px; }
.flow4 p{ font-size:14px; color:var(--ink-2); margin:0; }
.flow4 li:not(:last-child)::before{ content:""; position:absolute; left:25px; top:56px; bottom:10px; width:2px; background:var(--accent); opacity:.4; }
.flow4 li:not(:last-child)::after{ content:""; position:absolute; left:21.5px; bottom:8px; width:8px; height:8px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); }
.after-box{ position:relative; background:var(--accent-pale); border-radius:14px; padding:20px 18px 18px; }
.after-box::before{ content:""; position:absolute; left:25px; top:-20px; width:2px; height:20px; background:var(--accent); opacity:.4; }
.after-box h3{ font-size:17px; margin:0 0 10px; }
.after-list{ list-style:none; margin:0; padding:0; display:grid; }
.after-list li{ padding:10px 0; border-top:1px solid rgba(15,31,61,.10); font-size:14.5px; line-height:1.6; }
.after-list li:first-child{ border-top:0; padding-top:0; }
.after-list b{ display:block; font-weight:900; }
.after-list span{ display:block; font-size:13px; color:var(--ink-2); }
.after-box .small{ margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(15,31,61,.10); }
/* 節6: 料金（A: 2枚のカード＋2行の表） */
.pcard-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.pcard-head .icon-ring{ width:48px; height:48px; }
.pcard-head .icon-ring svg{ width:22px; height:22px; }
.pcard-head .pcard-name{ margin:0; }
.pcard-desc{ margin-top:16px; font-size:14px; color:var(--ink-2); }
.price-terms{ margin-top:18px; }
@media (min-width:641px){
  .igroups{ grid-template-columns:1fr 1fr; gap:18px; }
  .exgrid{ grid-template-columns:1fr 1fr; column-gap:36px; }
  .exgrid li{ grid-template-columns:1fr; justify-items:start; padding:22px 0; }
  .exgrid li:nth-child(2){ border-top:0; padding-top:0; }
  .after-list{ grid-template-columns:1fr 1fr; column-gap:28px; }
  .after-list li:nth-child(2){ border-top:0; padding-top:0; }
  .after-box{ padding:24px 26px 22px; }
  .pgrid-2{ grid-template-columns:1fr 1fr; }
  .price-terms{ margin-top:22px; }
}
@media (min-width:1000px){
  .exgrid{ grid-template-columns:repeat(3, 1fr); column-gap:40px; }
  .exgrid li:nth-child(3){ border-top:0; padding-top:0; }
  .exgrid h3{ font-size:17px; }
  .exgrid p{ font-size:14.5px; }
  .flow-wrap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0 24px; }
  .flow4{ display:contents; }
  .flow4 li,.flow4 li:last-child{ grid-template-columns:1fr; gap:0; padding:0 0 6px; }
  .f4-n{ width:64px; height:64px; font-size:30px; }
  .flow4 h3{ margin-top:16px; font-size:17.5px; }
  .flow4 li:not(:last-child)::before{ display:none; }
  .flow4 li:not(:last-child)::after{ left:auto; right:-17px; top:28px; bottom:auto; width:9px; height:9px; transform:rotate(-45deg); }
  .after-box{ grid-column:3 / -1; margin-top:36px; }
  .after-box::before{ left:calc(50% + 44px); top:-36px; height:36px; }
  .pgrid-2{ grid-template-columns:1fr 1fr; }
}
/* ---- /改善 ---- */

/* ---- 会社概要（2026-09-09） ---- */
/* 節4 プライバシーポリシー: 条文を1000px以上で2列の読み物にする（左 1〜5、右 6〜10＋制定日）。それ未満は1列 */
.about-policy-cols{ margin-top:28px; }
.about-policy-col > h3:first-child{ margin-top:0; }
.about-policy-col + .about-policy-col > h3:first-child{ margin-top:34px; }
.about-policy-col p{ font-size:14.5px; }
.about-policy-col p.small{ font-size:13.5px; margin-top:22px; }
@media (min-width:1000px){
  .about-policy-cols{ display:grid; grid-template-columns:1fr 1fr; column-gap:48px; align-items:start; }
  .about-policy-col + .about-policy-col > h3:first-child{ margin-top:0; }
}
/* ---- /会社概要 ---- */

/* ---- お問い合わせ（2026-09-09） ---- */
/* 節1 3つの窓口（案A）: 上に薄い青の丸のアイコン、下に横いっぱいのボタン。ネイビーの上の太線はやめて細い枠だけにする */
.contact-grid .contact-a{ border-top:1px solid var(--rule); border-radius:12px; padding:24px 20px 22px; }
.contact-a .icon-ring{ margin:0 0 14px; }
.contact-a .card-foot .btn{ min-width:0; overflow-wrap:anywhere; }
@media (min-width:641px){
  .contact-grid .contact-a{ padding:28px 24px 26px; }
}
@media (max-width:359px){
  /* 320px でもボタンの文字（電話番号＋「に発信する」）が枠からはみ出さないように左右の余白を詰める */
  .contact-a .card-foot .btn{ padding-left:14px; padding-right:14px; }
}
/* ---- /お問い合わせ ---- */

/* ---- 本人指摘 2026-09-09 夕方（見本の幅・22項目の折りたたみ・追加費用の表） ---- */
/* (A) 見本ブロック: grid の子に margin:0 auto が付いているため、画像の読み込み前に幅が中身（約65px）まで縮む。画像に依存しない幅にする */
.sample-devices{ width:100%; }
.browser{ width:100%; }

/* (B) 22項目の折りたたみ: スマホ幅（640px以下）では先頭6項目だけ見せ、ボタンで残り16項目を開閉する。JS が動かない環境では22項目すべて表示のまま */
.q-toggle{
  display:block; width:100%; margin:12px 0 0; padding:12px 16px;
  border:1.5px solid var(--accent); border-radius:999px;
  background:var(--paper); color:var(--accent);
  font:inherit; font-size:14px; font-weight:700; cursor:pointer;
}
.q-toggle[hidden]{ display:none; }
.q-toggle:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:640px){
  .q-list.is-collapsed li.q-more{ display:none; }
}
@media (min-width:641px){
  .q-toggle{ display:none; }
  .q-list li.q-more{ display:flex; }
}

/* (C) 追加費用の表: 薄い青の地の上でも白い枠付きの表として見せる */
.sec-pale .table-wrap{ background:var(--paper); border:1px solid var(--rule); border-radius:12px; }
/* スマホ幅では 1行＝1枚のカードとして縦に積む（.data-stack を付けた表だけ。3プランの比較表は横スクロールのまま） */
@media (max-width:640px){
  table.data.data-stack{ min-width:0; display:block; }
  table.data.data-stack thead{ display:none; }
  table.data.data-stack tbody,table.data.data-stack tr{ display:block; }
  table.data.data-stack tr{ border-bottom:1px solid var(--rule); }
  table.data.data-stack tr:last-child{ border-bottom:0; }
  table.data.data-stack th[scope="row"]{ display:block; padding:10px 14px; white-space:normal; border-bottom:0; font-size:14px; }
  table.data.data-stack td{ border-bottom:0; }
  table.data.data-stack td.num{ display:inline-block; padding:10px 14px 2px; }
  table.data.data-stack td.num + td.num{ padding-left:0; }
  table.data.data-stack td.num::before{ content:attr(data-label) " "; font-size:12px; font-weight:700; color:var(--ink-2); margin-right:2px; }
  table.data.data-stack td:not(.num){ display:block; padding:2px 14px 12px; font-size:13px; line-height:1.6; color:var(--ink-2); }
}
/* ---- /本人指摘 2026-09-09 夕方 ---- */

/* ---- 改善ページ プラン構成の変更（2026-09-09 夕方。本人決定: 改善プラン 80,000円＋点検プラン 30,000円） ---- */
/* 「今回の料金に含まれないこと」の小見出し（両プラン共通／点検プランだけ）。項目の見出しは h4 に下げた */
.ex-sub{ margin:0 0 4px; padding-bottom:8px; border-bottom:2px solid var(--accent-pale); font-size:15px; font-weight:900; color:var(--accent); }
.exgrid + .ex-sub{ margin-top:36px; }
.exgrid h4{ font-size:16px; margin:0 0 6px; }
/* プラン2枚: 改善プランを先に・大きく。点検プランには「誰向けか」の1行 */
.pgrid-main{ margin-top:10px; }
.pcard-for{ margin:-4px 0 12px; font-size:13px; font-weight:700; color:var(--accent); }
.pcard-main .pcard-head .icon-ring{ background:var(--accent); color:#fff; }
#pricing .pcard .checks{ margin-top:14px; padding-top:14px; border-top:1px solid var(--rule); }   /* 改善ページの2枚だけ（制作ページの .pcard には効かせない） */
#pricing .pcard .checks li{ font-size:13.5px; margin-bottom:7px; }
.price-common{ margin-top:20px; background:var(--accent-pale); border-color:transparent; }
.price-common p{ margin:0; font-size:14.5px; font-weight:700; line-height:1.75; }
@media (min-width:641px){
  .pgrid-2.pgrid-main{ grid-template-columns:1.12fr 1fr; }   /* 高さは揃える（.pcard-foot が下に付く） */
  .pcard-main .pcard-amount{ font-size:2.9rem; }
  .exgrid h4{ font-size:17px; }
}
@media (min-width:1000px){
  .exgrid.exgrid-2{ grid-template-columns:1fr 1fr; }
}
@media (min-width:1200px){
  .pcard-main .pcard-amount{ font-size:3.6rem; }
}
/* ---- /改善ページ プラン構成の変更 ---- */

/* ---- 品質の節の囲みを短く（本人指摘④ 2026-09-09）: 1行の見出し＋短い3項目。トップ・制作ページ共通 ---- */
.statement-v3 .st-h{ margin:0 0 10px; font-size:16px; font-weight:900; color:var(--ink); line-height:1.5; }
.st-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.st-list li{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--accent-pale); font-size:13px; font-weight:700; color:var(--ink); line-height:1.4; }
.st-list svg{ width:15px; height:15px; color:var(--accent); flex:none; }
@media (min-width:641px){ .statement-v3 .st-h{ font-size:17px; } .st-list li{ font-size:13.5px; } }
/* ---- /品質の節の囲みを短く ---- */

/* ---- 改善ページ 並び替えと開閉（ChatGPT レビュー B3・2026-09-09 夜）: 料金を先に、42項目は後ろでグループごとに開閉 ---- */
.hero-sublink{ margin:12px 0 0; font-size:13.5px; font-weight:700; }
.hero-sublink a{ color:var(--accent); }
.itemgroup-h{ flex-wrap:wrap; }
.itemgroup-s{ font-size:13px; font-weight:700; color:var(--ink-2); margin-left:2px; white-space:nowrap; }
details.itembox{ padding:0; }
details.itembox > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:12px 18px; font-size:14px; font-weight:900; }
details.itembox[open] > summary{ border-bottom:1px solid var(--rule); }
details.itembox > .itemlist{ padding:0 18px 6px; }
details.igroup > summary.itemsub{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; }
details.itembox > summary::-webkit-details-marker, details.igroup > summary::-webkit-details-marker{ display:none; }
.ig-n{ margin-left:auto; font-size:12px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
details.itembox > summary::after, details.igroup > summary::after{ content:""; flex:none; width:8px; height:8px; margin:-3px 4px 0 0; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .15s; }
details.itembox[open] > summary::after, details.igroup[open] > summary::after{ transform:rotate(-135deg); margin-top:3px; }
details.itembox > summary:focus-visible, details.igroup > summary:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
#pricing.sec-pale .price-common{ background:var(--paper); border-color:var(--rule); }
/* ---- /改善ページ 並び替えと開閉 ---- */

/* ---- トップ・制作ページの選び分け（ChatGPT レビュー B1・B2・2026-09-09 夜） ---- */
.svc .pcard-for{ margin:8px 0 10px; }
.svc-undecided{ margin:22px 0 0; text-align:center; font-size:14.5px; font-weight:700; line-height:1.8; }
.svc-undecided a{ color:var(--accent); }
.table-hint{ margin:0 0 8px; font-size:13px; font-weight:700; color:var(--ink-2); }
@media (min-width:768px){ .table-hint{ display:none; } }
/* 比較表: 左の項目名の列を固定して、横にスクロールしても何の行か分かるように */
table.data.data-compare thead th:first-child, table.data.data-compare tbody th{ position:sticky; left:0; z-index:1; }
table.data.data-compare tbody th{ box-shadow:1px 0 0 var(--rule); }
/* ---- /トップ・制作ページの選び分け ---- */

/* ---- 小さな文字の底上げ（ChatGPT レビュー B7・2026-09-09 夜）: 契約条件や補足が 12〜12.5px だった箇所を 13px 以上に ---- */
.pcard-foot{ font-size:13.5px; line-height:1.7; }
.flow-cards p{ font-size:13.5px; }
.plan-mini span{ font-size:13px; }
.fact-k{ font-size:13px; }
.info-sub{ font-size:13px; }
.check-mini-col li{ font-size:12.5px; }
.check-mini-more{ font-size:12.5px; }
.ig-n{ font-size:12.5px; }
/* ---- /小さな文字の底上げ ---- */


/* ---- お問い合わせ v3（2026-09-09 夜） ---- */
/* 順番を「短い導入 → フォーム → 電話・メール → 連絡後の流れ → 補足」にした（ChatGPT レビュー B5「入力までの距離を短くする」） */
/* 最初の画面: ボタンの下の小さな注記（個人情報の扱い・送信は契約ではない） */
.hero-contact .hero-note{ margin:16px 0 0; max-width:34em; line-height:1.75; }
.hero-contact .hero-note a{ text-decoration:underline; text-underline-offset:2px; }
/* 節2と節3が続けて白地になるので、節3の上に細い線を1本引いて区切る */
.sec-after{ border-top:1px solid var(--rule); }
/* 節5「当方から連絡を受け取った方へ」: 小さな補助の節。見出しと本文を一段小さく、上下の余白も詰める。「連絡不要」の囲みは目立つまま */
section.sec-sub{ padding:48px 0 56px; }
.sec-sub h2{ font-size:clamp(1.15rem, 4.4vw, 1.4rem); line-height:1.5; margin:0 0 12px; }
.sec-sub .sec-sub-lead{ font-size:14px; line-height:1.8; color:var(--ink-2); margin:0; }
.sec-sub .info-box{ margin-top:22px; }
@media (min-width:641px){
  section.sec-sub{ padding:56px 0 64px; }
  .sec-sub .sec-sub-lead{ font-size:14.5px; }
}
@media (min-width:1000px){
  section.sec-sub{ padding:64px 0 72px; }
}
/* ---- /お問い合わせ v3 ---- */


/* ---- 会社概要 v3（2026-09-09 夜） ---- */
/* 最初の画面の目次: 横並びの小さなリンク。スマホでは折り返す */
.about-toc{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:13.5px; font-weight:700; }
.about-toc a{ color:var(--accent); text-decoration:none; padding:2px 0; border-bottom:2px solid transparent; }
.about-toc a:hover{ border-bottom-color:var(--accent); }
/* 代表と仕事の進め方: 左に表・右に「始めた経緯」の囲み。1000px 以上で2列（高さは揃えない） */
.rep-grid{ display:grid; gap:24px; margin-top:24px; }
.rep-grid .deflist.deflist-table{ margin:0; }
.rep-grid .info-box{ margin-top:0; }
.rep-grid .info-box p:last-child{ margin-bottom:0; }
.rep-links{ margin-top:14px; }
/* 取引条件: 見出しの括弧の部分はひとかたまりで折り返す（スマホで「特定商取／引法」と単語の途中で折れないように） */
#tokushoho h2 .h2-sub{ display:inline-block; }
/* 取引条件: 導入文のあとに表を置くときの間隔（見出し直後の場合は既存の h2 + .deflist-table が効く） */
.sec-lead + .deflist.deflist-table{ margin-top:24px; }
/* 点なしの箇条書き（販売価格・追加費用）。1項目1行 */
.tk-list{ list-style:none; margin:0; padding:0; }
.tk-list li{ padding:3px 0; }
.tk-note{ margin:8px 0 0; }
@media (min-width:1000px){
  .rep-grid{ grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
}
/* ---- /会社概要 v3 ---- */