@charset "UTF-8";
/* ==========================================================================
   ミベル探偵事務所 — style.css
   色を変えたいときは :root の変数だけを触れば全体に反映されます
   ========================================================================== */

/* ---------- 1. デザイントークン ---------- */
:root{
  /* 基調色（ネイビー） */
  --navy-900:#061428;
  --navy-800:#0A2242;
  --navy-700:#0F3059;
  --navy-600:#164272;
  --navy-500:#1E5691;

  /* アクセント（ブルー） */
  --blue-500:#2F7AD1;
  --blue-400:#4E96E4;
  --blue-100:#DCE9F8;
  --blue-050:#F1F6FC;

  /* 無彩色 */
  --paper:#FFFFFF;
  --paper-2:#F5F8FC;
  --ink:#16202E;
  --ink-2:#48586C;
  --ink-3:#7C8A9C;
  --line:#DFE6EF;
  --line-dark:rgba(255,255,255,.16);

  /* タイポグラフィ */
  --font-serif:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  /* レイアウト */
  --header-h:76px;
  --radius:4px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(6,20,40,.06), 0 4px 14px rgba(6,20,40,.05);
  --shadow-md:0 4px 10px rgba(6,20,40,.07), 0 18px 40px rgba(6,20,40,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. リセット / ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px)}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
  background:var(--paper);
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict;
}
img,svg,iframe{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0; font-family:var(--font-serif); font-weight:600; line-height:1.55; letter-spacing:.04em}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
button{font:inherit; color:inherit}

:focus-visible{outline:2px solid var(--blue-400); outline-offset:3px; border-radius:2px}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy-800); color:#fff; padding:12px 20px;
}
.skip-link:focus{left:12px; top:12px}

.container{width:min(1140px, 100% - 44px); margin-inline:auto}
.container-narrow{width:min(860px, 100% - 44px)}
@media (max-width:720px){ .pc-only{display:none} }

/* ---------- 3. スクロール表示アニメーション ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- 4. ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--radius);
  font-weight:700; font-size:.95rem; letter-spacing:.06em; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn svg{width:20px; height:20px; fill:currentColor; flex:none}
.btn-stack{display:flex; flex-direction:column; align-items:flex-start; line-height:1.35}
.btn-stack strong{font-size:1.12rem; letter-spacing:.04em}
.btn-stack small{font-size:.72rem; font-weight:500; opacity:.82; letter-spacing:.1em}

.btn-primary{background:var(--blue-500); color:#fff; box-shadow:0 6px 18px rgba(47,122,209,.28)}
.btn-primary:hover{background:var(--blue-400); transform:translateY(-2px); box-shadow:0 10px 26px rgba(47,122,209,.34)}
.btn-outline{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(6,20,40,.25)}
.btn-outline:hover{background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px)}
.btn-navy{background:var(--navy-800); color:#fff}
.btn-navy:hover{background:var(--navy-600); transform:translateY(-2px)}
.btn-ghost{color:var(--navy-800); font-size:.8rem; font-weight:500; letter-spacing:.04em; padding:10px 12px; opacity:.9}
.btn-ghost:hover{color:var(--blue-500); opacity:1}
.btn-lg{padding:18px 32px; min-width:264px}
/* 電話ボタン（控えめ表示） */
.btn-tel{padding:13px 22px}
.btn-tel .btn-stack strong{font-size:.95rem; letter-spacing:.04em}
.btn-tel .btn-stack small{font-size:.66rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.55; pointer-events:none}

/* ---------- 5. ヘッダー ---------- */
.site-header{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:24px}

.brand{display:flex; align-items:center; color:#fff; transition:color .4s var(--ease)}
.brand-text{display:flex; flex-direction:column; line-height:1.3; white-space:nowrap}
/* MYBELLEワードマーク（ロゴ画像の文字部分。明色=紺背景用／暗色=白背景用を切り替え） */
.brand-img{height:24px; width:auto; display:block}
.brand-img-dark{display:none}
.site-header.is-scrolled .brand-img-light{display:none}
.site-header.is-scrolled .brand-img-dark{display:block}
.brand-ja{font-size:.62rem; letter-spacing:.42em; opacity:.8; margin-top:5px}

.gnav{display:flex; align-items:center; gap:34px}
.gnav>ul{display:flex; gap:28px}
.gnav>ul a{
  position:relative; font-size:.88rem; font-weight:500; color:#fff; white-space:nowrap;
  letter-spacing:.06em; transition:color .3s var(--ease); padding-block:6px;
}
.gnav>ul a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.gnav>ul a:hover::after{transform:scaleX(1); transform-origin:left}
.gnav-cta{display:flex; align-items:center; gap:12px}
.gnav-cta .btn-ghost{color:#fff}
.gnav-cta .btn-ghost:hover{color:var(--blue-400)}
.gnav-cta .btn-primary{padding:12px 24px; font-size:.86rem}

/* スクロール後 */
.site-header.is-scrolled{background:rgba(255,255,255,.96); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line), 0 6px 24px rgba(6,20,40,.06)}
.site-header.is-scrolled .brand{color:var(--navy-800)}
.site-header.is-scrolled .gnav>ul a{color:var(--ink)}
.site-header.is-scrolled .gnav>ul a:hover{color:var(--blue-500)}
.site-header.is-scrolled .gnav-cta .btn-ghost{color:var(--navy-800)}
.site-header.is-scrolled .nav-toggle span{background:var(--navy-800)}

/* ハンバーガー */
.nav-toggle{
  display:none; width:44px; height:44px; border:0; background:none; padding:0;
  position:relative; cursor:pointer; z-index:120;
}
.nav-toggle span{
  position:absolute; left:10px; width:24px; height:1.5px; background:#fff;
  transition:transform .35s var(--ease), opacity .25s var(--ease), background-color .4s var(--ease);
}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:21.5px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle[aria-expanded="true"] span{background:#fff}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- 6. ヒーロー ---------- */
.hero{
  position:relative; min-height:min(92svh, 820px); display:flex; align-items:center;
  padding:calc(var(--header-h) + 56px) 0 88px; overflow:hidden; color:#fff;
  background:var(--navy-900);
}
.hero-bg{
  position:absolute; inset:0; pointer-events:none;
  background:url("../img/hero-sapporo-night.jpg") center 30%/cover no-repeat;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,20,40,.92) 0%, rgba(10,34,66,.82) 45%, rgba(10,34,66,.45) 75%, rgba(6,20,40,.55) 100%),
    linear-gradient(to top, rgba(6,20,40,.65), transparent 40%);
}
.hero-inner{position:relative; z-index:2; max-width:820px}

.hero-eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.2em; font-weight:500;
  color:var(--blue-100); padding-left:44px; position:relative; margin-bottom:24px;
}
.hero-eyebrow::before{
  content:""; position:absolute; left:0; top:.85em; width:32px; height:1px; background:var(--blue-400);
}
.hero-title{
  font-size:clamp(1.55rem, 4.2vw, 2.8rem); line-height:1.6; letter-spacing:.05em;
  font-weight:600; margin-bottom:26px; text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-title .accent{position:relative; display:inline-block; padding-bottom:.08em}
.hero-title .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--blue-400) 0%, rgba(78,150,228,.15) 100%);
}
.hero-lead{
  font-size:clamp(.94rem, 1.6vw, 1.04rem); line-height:2.15; color:rgba(255,255,255,.92);
  margin-bottom:40px; max-width:44em; text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:40px}

.hero-badges{display:flex; flex-wrap:wrap; gap:10px 26px}
.hero-badges li{
  position:relative; padding-left:24px; font-size:.85rem; letter-spacing:.08em; color:rgba(255,255,255,.92);
}
.hero-badges li::before{
  content:""; position:absolute; left:0; top:50%; width:13px; height:7px; margin-top:-4px;
  border-left:1.6px solid var(--blue-400); border-bottom:1.6px solid var(--blue-400);
  transform:rotate(-45deg);
}

/* ---------- 7. セクション共通 ---------- */
.section{padding:clamp(76px, 9vw, 120px) 0}
.sec-title{
  font-size:clamp(1.5rem, 3.2vw, 2rem); letter-spacing:.1em; margin-bottom:22px; text-align:center;
}
.sec-en{
  display:block; font-family:var(--font-serif); font-size:.74rem; font-weight:600;
  letter-spacing:.34em; color:var(--blue-500); margin-bottom:14px; text-transform:uppercase;
}
.sec-title::after{
  content:""; display:block; width:34px; height:1px; background:var(--blue-500);
  margin:22px auto 0; opacity:.7;
}
.sec-lead{text-align:center; color:var(--ink-2); font-size:.94rem; margin:0 auto 52px; max-width:46em}
.sec-title-light,.sec-lead-light{color:#fff}
.sec-title-light .sec-en{color:var(--blue-400)}
.sec-title-light::after{background:var(--blue-400)}
.sec-lead-light{color:rgba(255,255,255,.82)}
.sec-title-left{text-align:left}
.sec-title-left::after{margin-left:0}

/* ---------- 8. 調査内容 ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
@media (max-width:720px){ .cards{grid-template-columns:1fr} }
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 30px 32px; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--navy-700), var(--blue-400));
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue-100)}
.card:hover::before{transform:scaleX(1)}
.card-no{
  display:block; font-family:var(--font-serif); font-size:.78rem; letter-spacing:.24em;
  color:var(--blue-500); margin-bottom:14px;
}
.card h3{font-size:1.14rem; letter-spacing:.06em; margin-bottom:14px; color:var(--navy-800)}
.card p{font-size:.9rem; line-height:1.95; color:var(--ink-2); margin:0}

/* ---------- 9. 大切にしていること ---------- */
.section-promise{background:var(--paper-2)}
.promise-grid{display:grid; grid-template-columns:minmax(300px, 460px) 1fr; gap:clamp(32px,5vw,64px); align-items:center}
.promise-photo{margin:0; position:relative}
.promise-photo img{
  width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.promise-photo::after{
  content:""; position:absolute; left:-14px; bottom:-14px; width:45%; height:45%;
  border-left:2px solid var(--blue-400); border-bottom:2px solid var(--blue-400);
  border-radius:0 0 0 var(--radius-lg); opacity:.55; pointer-events:none;
}
.promise-body .sec-title{margin-bottom:34px}
.promise-list{display:grid; gap:22px}
.promise-item{display:flex; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px}
.promise-num{
  font-family:var(--font-serif); font-size:1.3rem; line-height:1.2; color:var(--blue-500);
  flex:none; padding-top:2px; letter-spacing:.04em;
}
.promise-item h3{font-size:1.08rem; margin-bottom:8px; color:var(--navy-800); letter-spacing:.08em}
.promise-item p{font-size:.9rem; line-height:1.95; color:var(--ink-2); margin:0}

/* ---------- 10. 料金 ---------- */
.section-pricing{background:#fff}
.price-block{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:28px;
}
.price-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  background:var(--navy-800); color:#fff; padding:16px 24px;
}
.price-head h3{font-size:1.05rem; letter-spacing:.08em}
.price-head p{margin:0; font-size:.78rem; color:rgba(255,255,255,.75); letter-spacing:.06em}

.table-scroll{overflow-x:auto}
.price-table{min-width:340px}
.price-table th,.price-table td{
  padding:16px 24px; border-bottom:1px solid var(--line); text-align:left;
  font-size:.94rem; line-height:1.7; vertical-align:middle;
}
.price-table thead th{
  background:var(--blue-050); color:var(--navy-800); font-size:.82rem;
  letter-spacing:.1em; font-weight:700; padding-block:12px; white-space:nowrap;
}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr:hover td{background:var(--blue-050)}
.ta-r{text-align:right !important; white-space:nowrap}
.price-table td strong{
  font-family:var(--font-serif); font-size:1.3rem; color:var(--navy-800); letter-spacing:.02em;
}
.price-table .yen{font-size:.8rem; color:var(--ink-2); margin-left:2px}
.td-note{display:block; font-size:.76rem; color:var(--ink-3); letter-spacing:.04em}
.price-table-simple td{font-size:.9rem}

.price-cols{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start}
.price-cols .price-block{margin-bottom:0}

.price-notes{
  margin:36px auto 0; max-width:760px; padding:24px 28px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  display:grid; gap:8px;
}
.price-notes li{
  position:relative; padding-left:20px; font-size:.86rem; color:var(--ink-2); line-height:1.85;
}
.price-notes li::before{
  content:"※"; position:absolute; left:0; top:0; color:var(--blue-500); font-size:.8rem;
}
.price-cta{margin:44px 0 0; text-align:center; font-size:.94rem; color:var(--ink-2); line-height:2.2}
.price-cta .btn{margin-top:14px}

/* ---------- 10b. お客様の声 ---------- */
.section-voice{background:var(--paper-2)}
.voice-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.voice-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:50px 28px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.voice-card::before{
  content:"\201C"; position:absolute; left:22px; top:8px;
  font-family:var(--font-serif); font-size:3.2rem; line-height:1; color:var(--blue-100);
}
.voice-text{font-size:.9rem; line-height:2; color:var(--ink-2); margin:0 0 18px; flex:1}
.voice-meta{
  margin:0; padding-top:14px; border-top:1px solid var(--line);
  font-size:.8rem; letter-spacing:.08em; color:var(--navy-800); font-weight:700;
}
.voice-note{margin:28px 0 0; text-align:center; font-size:.78rem; color:var(--ink-3)}
@media (max-width:1000px){ .voice-cards{grid-template-columns:1fr; max-width:640px; margin-inline:auto} }

/* ---------- 11. ご相談の流れ ---------- */
.section-flow{background:#fff}
.flow{position:relative; max-width:800px; margin-inline:auto}
.flow::before{content:""; position:absolute; left:27px; top:20px; bottom:40px; width:1px; background:var(--line)}
.flow-step{position:relative; display:flex; gap:26px; padding-bottom:38px}
.flow-step:last-child{padding-bottom:0}
.flow-mark{
  position:relative; z-index:1; flex:none; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1px solid var(--blue-100);
  color:var(--navy-800); font-family:var(--font-serif); font-size:.92rem; letter-spacing:.06em;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.flow-step.is-visible .flow-mark{background:var(--navy-800); color:#fff; border-color:var(--navy-800)}
.flow-body{padding-top:8px}
.flow-body h3{font-size:1.1rem; margin-bottom:10px; letter-spacing:.06em; color:var(--navy-800)}
.flow-body p{font-size:.92rem; line-height:1.95; color:var(--ink-2); margin:0}

/* ---------- 12. FAQ ---------- */
.section-faq{background:var(--paper-2)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); background:#fff}
.faq summary{
  position:relative; list-style:none; cursor:pointer; padding:24px 60px 24px 56px;
  font-size:1rem; font-weight:500; color:var(--navy-800); line-height:1.75;
  transition:background-color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--blue-050)}
.faq summary::before{
  content:"Q"; position:absolute; left:24px; top:24px;
  font-family:var(--font-serif); font-size:1rem; color:var(--blue-500);
}
.faq summary::after{
  content:""; position:absolute; right:26px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq-a{padding:0 30px 26px 56px; position:relative}
.faq-a::before{
  content:"A"; position:absolute; left:24px; top:0;
  font-family:var(--font-serif); font-size:1rem; color:var(--ink-3);
}
.faq-a p{font-size:.92rem; line-height:2; color:var(--ink-2); margin:0}
.faq details[open] .faq-a{animation:fadeDown .4s var(--ease)}
@keyframes fadeDown{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}

/* ---------- 13. 地域密着バンド ---------- */
.band{
  position:relative; padding:clamp(72px, 9vw, 110px) 0; color:#fff; overflow:hidden;
  background:var(--navy-800); text-align:center;
}
.band-bg{
  position:absolute; inset:0; pointer-events:none;
  background:url("../img/sapporo-odori.jpg") center 55%/cover no-repeat;
}
.band-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(8,26,50,.82), rgba(8,26,50,.82));
}
.band-inner{position:relative; z-index:2}
.band-title{
  font-size:clamp(1.3rem, 3vw, 1.85rem); letter-spacing:.1em; margin-bottom:20px;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.band-text{
  font-size:.96rem; line-height:2.1; color:rgba(255,255,255,.92); margin-bottom:34px;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}

/* ---------- 14. お問い合わせ ---------- */
.section-contact{
  background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color:#fff; position:relative; overflow:hidden;
}
.section-contact::before{
  content:""; position:absolute; left:-10%; bottom:-30%; width:60vw; aspect-ratio:1;
  background:radial-gradient(circle, rgba(47,122,209,.22), transparent 65%); pointer-events:none;
}
.contact-grid{
  position:relative; display:grid; grid-template-columns:minmax(300px, 390px) 1fr; gap:34px; align-items:start;
}
.contact-direct{display:grid; gap:16px}
.contact-tile{
  display:flex; gap:18px; align-items:center; padding:26px 24px;
  background:rgba(255,255,255,.05); border:1px solid var(--line-dark); border-radius:var(--radius);
  transition:background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.contact-tile:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4); transform:translateY(-2px)}
.tile-icon{
  flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue-500);
}
.tile-icon svg{width:22px; height:22px; fill:#fff}
.tile-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.tile-label{font-size:.74rem; letter-spacing:.16em; color:var(--blue-100)}
.tile-value{font-family:var(--font-serif); font-size:1.42rem; letter-spacing:.04em; line-height:1.4}
.tile-value-sm{font-size:1rem; letter-spacing:.01em}
.tile-sub{font-size:.76rem; color:rgba(255,255,255,.66)}
.contact-assure{
  padding:18px 22px; border:1px dashed var(--line-dark); border-radius:var(--radius);
}
.contact-assure p{font-size:.8rem; line-height:1.9; color:rgba(255,255,255,.7); margin:0}

/* フォーム */
.contact-form-wrap{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); color:var(--ink)}
.contact-form{padding:clamp(26px,4vw,44px)}
.form-intro{font-size:.88rem; color:var(--ink-2); margin-bottom:26px}
.req-note{display:inline-block; margin-left:.4em; color:var(--ink-3); font-size:.82rem}
.field{margin-bottom:22px; border:0; padding:0; min-width:0}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.field label,.field legend{
  display:block; font-size:.83rem; font-weight:700; letter-spacing:.08em;
  color:var(--navy-800); margin-bottom:9px; padding:0;
}
.req{color:#C0392B; margin-left:.25em; font-size:.9em}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea,.field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:.94rem; color:var(--ink); background:#fff;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{resize:vertical; line-height:1.85}
.field input::placeholder,.field textarea::placeholder{color:#AEB9C6}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(47,122,209,.14);
}
.select-wrap{position:relative}
.select-wrap::after{
  content:""; position:absolute; right:16px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); pointer-events:none;
}
.field select{appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer}

.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{margin:0 !important}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:inline-block; padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  font-size:.86rem; cursor:pointer; transition:all .3s var(--ease); color:var(--ink-2);
}
.chip input:checked + span{background:var(--navy-800); border-color:var(--navy-800); color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--blue-400); outline-offset:2px}

.field-consent{background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--radius); padding:16px 18px}
.consent{display:flex; align-items:flex-start; gap:11px; font-size:.88rem; font-weight:500 !important; margin:0 !important; cursor:pointer; letter-spacing:.02em !important; color:var(--ink) !important}
.consent input{width:19px; height:19px; margin-top:3px; flex:none; accent-color:var(--blue-500); cursor:pointer}
.consent a{color:var(--blue-500); text-decoration:underline; text-underline-offset:3px}

.err{margin:7px 0 0; font-size:.79rem; color:#C0392B; min-height:0}
.err:empty{display:none}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#C0392B}

#submitBtn{margin-top:8px}
.form-status{margin:18px 0 0; font-size:.88rem; line-height:1.85; text-align:center; padding:0}
.form-status.is-ok{color:#1B7A4B; background:#EAF7F0; border:1px solid #BFE6D1; padding:14px; border-radius:var(--radius)}
.form-status.is-ng{color:#C0392B; background:#FCEDEB; border:1px solid #F2C7C1; padding:14px; border-radius:var(--radius)}

/* ---------- 15. 事務所概要 ---------- */
.section-about{background:var(--paper-2)}
.about-table{border-top:1px solid var(--line); font-size:.94rem; background:#fff}
.about-table th,.about-table td{
  border-bottom:1px solid var(--line); padding:20px 16px; text-align:left; vertical-align:top; line-height:1.9;
}
.about-table th{width:220px; font-weight:700; color:var(--navy-800); background:var(--blue-050); letter-spacing:.06em}
.about-table td a{color:var(--blue-500); text-decoration:underline; text-underline-offset:3px}
.map-wrap{margin-top:44px; border:1px solid var(--line); line-height:0; background:#fff}
.map-wrap iframe{width:100%; height:380px; border:0; filter:grayscale(.28) contrast(1.02)}

/* ---------- 16. フッター ---------- */
.site-footer{background:var(--navy-900); color:rgba(255,255,255,.72); padding:60px 0 0; font-size:.86rem}
.footer-inner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; padding-bottom:44px}
.footer-brand{display:flex; gap:16px; align-items:flex-start}
.footer-logo-img{height:26px; width:auto; margin-bottom:10px}
.footer-name{font-family:var(--font-serif); font-size:.98rem; letter-spacing:.14em; color:#fff; margin-bottom:10px}
.footer-addr{margin:0 0 4px; line-height:1.9; font-size:.82rem}
.footer-nav ul{display:grid; gap:11px}
.footer-nav a{transition:color .3s var(--ease); font-size:.84rem}
.footer-nav a:hover{color:var(--blue-400)}
.copyright{
  margin:0; padding:20px 0; text-align:center; font-size:.74rem; letter-spacing:.12em;
  border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5);
}

/* ---------- 17. スマホ固定バー ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  transform:translateY(110%); transition:transform .4s var(--ease);
  box-shadow:0 -4px 20px rgba(6,20,40,.18); padding-bottom:env(safe-area-inset-bottom);
  background:var(--navy-800);
}
.mobile-bar.is-shown{transform:none}
/* お問い合わせフォーム表示中は隠す（送信ボタンへのタップを妨げないため） */
.mobile-bar.is-hidden{transform:translateY(110%)}
.mb-item{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 8px; font-size:.9rem; font-weight:700; letter-spacing:.06em; color:#fff;
}
.mb-item svg{width:18px; height:18px; fill:currentColor}
.mb-form{background:var(--blue-500)}

/* ---------- 18. 下層ページ（プライバシーポリシー等） ---------- */
.page-head{
  background:linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color:#fff; padding:calc(var(--header-h) + 72px) 0 68px; text-align:center;
}
.page-head h1{font-size:clamp(1.5rem,3.4vw,2.1rem); letter-spacing:.12em}
.page-head .sec-en{color:var(--blue-400)}
.legal{padding:clamp(60px,8vw,100px) 0}
.legal h2{
  font-size:1.14rem; letter-spacing:.08em; color:var(--navy-800);
  margin:48px 0 16px; padding-left:15px; border-left:3px solid var(--blue-500);
}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:.94rem; line-height:2.1; color:var(--ink-2)}
.legal ul{list-style:none; margin:0 0 1.2em; padding:0}
.legal ul li{position:relative; padding-left:20px; font-size:.94rem; line-height:2.1; color:var(--ink-2)}
.legal ul li::before{content:""; position:absolute; left:4px; top:.95em; width:5px; height:5px; border-radius:50%; background:var(--blue-500)}
.legal-date{margin-top:52px; padding-top:24px; border-top:1px solid var(--line); font-size:.84rem; color:var(--ink-3)}
.back-link{display:inline-flex; align-items:center; gap:8px; margin-top:40px; font-size:.9rem; color:var(--blue-500)}
.back-link:hover{text-decoration:underline; text-underline-offset:4px}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* 画面幅がやや狭いときはヘッダーの電話番号を省いてメニューの折り返しを防ぐ */
@media (min-width:1081px) and (max-width:1240px){
  .gnav{gap:22px}
  .gnav>ul{gap:22px}
  .gnav-cta .btn-ghost{display:none}
}

@media (max-width:1000px){
  .contact-grid{grid-template-columns:1fr}
  /* 縦積みではフォームを先に表示（フォーム相談メイン） */
  .contact-form-wrap{order:-1}
  .price-cols{grid-template-columns:1fr; gap:28px}
  .promise-grid{grid-template-columns:1fr; gap:44px}
  .promise-photo{max-width:560px; margin-inline:auto}
  .promise-body .sec-title{text-align:center}
  .promise-body .sec-title::after{margin-inline:auto}
}

@media (max-width:1080px){
  :root{--header-h:64px}
  .nav-toggle{display:block}
  .gnav{
    position:fixed; inset:0; z-index:110; flex-direction:column; justify-content:center; gap:44px;
    background:linear-gradient(160deg, var(--navy-900), var(--navy-700));
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
  }
  .gnav.is-open{opacity:1; visibility:visible; transform:none}
  .gnav>ul{flex-direction:column; gap:0; text-align:center; width:min(320px,80%)}
  .gnav>ul a{display:block; padding:16px 0; font-size:1rem; color:#fff !important; border-bottom:1px solid rgba(255,255,255,.12)}
  .gnav>ul a::after{display:none}
  .gnav-cta{flex-direction:column; width:min(320px,80%)}
  .gnav-cta .btn{width:100%; color:#fff !important}
  .gnav-cta .btn-ghost{border:1px solid rgba(255,255,255,.4); font-size:1.05rem}
  .site-header.is-scrolled .nav-toggle[aria-expanded="true"] span{background:#fff}
  body.nav-open{overflow:hidden}
  /* メニューを開いてもロゴは見えるようにする */
  .brand{position:relative; z-index:120}
  body.nav-open .site-header .brand{color:#fff}
  body.nav-open .site-header .brand-img-light{display:block !important}
  body.nav-open .site-header .brand-img-dark{display:none !important}

  .mobile-bar{display:flex}
  .site-footer{padding-bottom:72px}
}

@media (max-width:720px){
  body{font-size:15px}
  .container,.container-narrow{width:min(100% - 36px, 100%)}
  .sec-title{font-size:clamp(1.36rem, 5.6vw, 1.7rem); letter-spacing:.05em}
  .sec-title::after{margin-top:18px}
  .hero{min-height:auto; padding:calc(var(--header-h) + 52px) 0 80px}
  .hero-title{letter-spacing:.02em; font-size:clamp(1.26rem, 5.6vw, 1.6rem)}
  .hero-lead br{display:none}
  .hero-actions{flex-direction:column; gap:12px}
  .btn-lg{width:100%; min-width:0; padding:16px 22px}

  .promise-item{padding:20px}

  .price-head{padding:14px 18px}
  .price-table th,.price-table td{padding:14px 16px}
  .price-table td strong{font-size:1.16rem}
  .price-notes{padding:20px}
  .price-cta br{display:none}

  .flow::before{left:22px}
  .flow-mark{width:46px; height:46px; font-size:.84rem}
  .flow-step{gap:18px; padding-bottom:30px}

  .faq summary{padding:20px 46px 20px 46px; font-size:.94rem}
  .faq summary::before{left:18px; top:20px}
  .faq summary::after{right:18px}
  .faq-a{padding:0 20px 22px 46px}
  .faq-a::before{left:18px}

  .band-text br{display:none}
  .band .btn-lg{width:auto; min-width:240px}

  .field-row{grid-template-columns:1fr; gap:0}
  /* iPhoneで入力欄をタップしたときに画面が拡大しないよう16px以上にする */
  .field input,.field textarea,.field select{font-size:16px}

  .about-table th,.about-table td{display:block; width:auto}
  .about-table th{border-bottom:0; padding:16px 14px 8px}
  .about-table td{padding:0 14px 18px}
  .map-wrap iframe{height:300px}

  .footer-inner{flex-direction:column; gap:30px}
}

/* ---------- 印刷 ---------- */
@media print{
  .site-header,.mobile-bar,.map-wrap,.contact-form-wrap,.band{display:none !important}
  .hero,.section-contact,.site-footer{background:#fff !important; color:#000 !important}
  .hero-bg,.band-bg{display:none !important}
  .reveal{opacity:1 !important; transform:none !important}
}