:root{
    --bg:#FFFFFF; --beige:#F2F0EB; --dark2:#1B1E20;
    --ink:#14171A; --ink2:#5A6068; --ink3:#878D95;
    --line:rgba(20,23,26,.13);
    --tl:#0C7A75; --tl-lt:#4FD1C9;
    --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
    --mc:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
    --en:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
    --px:24px; --gap:64px; --max:1120px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--tl);color:#fff;
      padding:12px 20px;font-size:14px;font-weight:700}
  .skip-link:focus{left:0}
  @media (min-width:768px){:root{--px:36px;--gap:88px}}
  @media (min-width:1024px){:root{--px:56px;--gap:104px}}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:var(--jp);-webkit-font-smoothing:antialiased}
  a{text-decoration:none;color:inherit}
  button{font-family:inherit}
  :focus-visible{outline:3px solid var(--tl);outline-offset:3px}
  h1,h2,h3,h4{word-break:auto-phrase;font-feature-settings:"palt" 1;letter-spacing:.005em}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

  .sec{padding:var(--gap) var(--px);background:var(--bg)}
  .in{max-width:var(--max);margin:0 auto}
  .beige{background:var(--beige)}
  h2.st{font-size:26px;font-weight:900;line-height:1.55;margin-bottom:18px}
  @media (min-width:768px){h2.st{font-size:33px}}
  .lead{font-size:15px;line-height:2;color:var(--ink2);max-width:40em;margin-bottom:44px;text-wrap:pretty}
  .lead br{display:none}
  @media (min-width:768px){.lead br{display:inline}}
  .kick{font-family:var(--en);font-size:11px;letter-spacing:.16em;font-weight:700;
        color:var(--tl);margin-bottom:14px;display:block}

  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
       padding:14px 28px;border-radius:4px;font-size:14.5px;font-weight:700;transition:background .2s,border-color .2s,color .2s}
  .bt-f{background:var(--tl);color:#fff}
  .bt-f:hover{background:#0A6360}
  .bt-o{border:1.5px solid var(--line);color:var(--ink)}
  .bt-o:hover{border-color:var(--tl);color:var(--tl)}
  .arw{margin-left:8px;transition:transform .2s;display:inline-block}
  .btn:hover .arw{transform:translateX(4px)}
  .tl{font-size:14px;font-weight:700;color:var(--tl);display:inline-block}

  .ph{position:relative;overflow:hidden;background:#E7E9EB}
  .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .ph.err img{display:none}
  .ph .fb{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
      font-family:var(--en);font-size:9.5px;color:#8A909C;padding:8px;text-align:center;word-break:break-all}
  .ph.err .fb{display:flex}

  /* HEADER */
  .hd{position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:16px;height:64px;
      padding:0 var(--px);background:rgba(255,255,255,.95);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .lg b{display:block;font-family:var(--en);font-size:14px;font-weight:700;letter-spacing:.13em}
  .lg span{display:block;font-family:var(--en);font-size:8.5px;letter-spacing:.1em;color:var(--ink3);margin-top:3px}
  .nv{display:none;gap:20px;font-size:12.5px;font-weight:500;margin-left:auto}
  .nv a:hover{color:var(--tl)}
  .hd .btn{display:none;min-height:38px;padding:9px 17px;font-size:12px;margin-left:18px}
  /* 指で押せる大きさ（44px角）を確保する。線は中央の24px分だけ見せる */
  .bg{margin-left:auto;width:44px;height:44px;position:relative;background:none;border:0;
      cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
  .bg i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;
      transition:transform .25s ease,opacity .18s ease}
  .bg i:nth-child(1){top:14px}.bg i:nth-child(2){top:21px}.bg i:nth-child(3){top:28px}
  .bg:focus-visible{outline:2px solid var(--tl);outline-offset:2px}
  /* 開いている間は×印にする */
  .hd.nav-open .bg i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd.nav-open .bg i:nth-child(2){opacity:0}
  .hd.nav-open .bg i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 開いたメニュー（ヘッダーの下に降りてくる） */
  .hd.nav-open .nv{display:flex;flex-direction:column;gap:0;margin-left:0;
      position:absolute;left:0;right:0;top:100%;
      background:#fff;border-bottom:1px solid var(--line);
      box-shadow:0 12px 28px rgba(20,23,26,.12);
      padding:2px var(--px) 16px;font-size:14px;
      max-height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain}
  .hd.nav-open .nv a{padding:15px 2px;font-weight:600;border-top:1px solid var(--line)}
  .hd.nav-open .nv a:first-child{border-top:0}
  .nv .nv-cta{display:none}
  .hd.nav-open .nv .nv-cta{display:inline-flex;justify-content:center;width:100%;
      margin-top:14px;border-top:0;padding:13px 16px}

  @media (min-width:1024px){
    .nv{display:flex}.hd .btn{display:inline-flex}.bg{display:none}
    .nv .nv-cta{display:none!important}
  }

  /* HERO */
  .hero{position:relative;background:#E7E9EB}
  .hslides{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;background:#E7E9EB}
  @media (min-width:768px){.hslides{aspect-ratio:16/9}}
  @media (min-width:1024px){.hslides{aspect-ratio:auto;height:min(80vh,660px);min-height:520px}}
  .hsl{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
  .hsl.on{opacity:1}
  .hsl img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);display:block}
  .hsl.err img{display:none}
  .hsl .fb{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
      font-family:var(--en);font-size:10px;color:#8A909C}
  .hsl.err .fb{display:flex}

  /* 面での白がけはやめ、文字まわりの白グロー（ドロップシャドウ）で可読性を確保 */
  .hveil{display:none}

  .hero-over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column}
  .hero-copy{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
      padding:0 var(--px) 14px}
  @media (min-width:1024px){.hero-copy{justify-content:center;padding-bottom:0}}
  .hero-copy .in{width:100%}
  .hero-copy .fvk{font-size:12.5px;font-weight:700;color:var(--tl);margin-bottom:14px}
  /* 白グロー：小さいぼかしを重ねて文字のきわを強く抜く */
  .hero h1{font-family:var(--mc);font-size:30px;line-height:1.58;font-weight:700;
      letter-spacing:.02em;color:var(--ink);margin-bottom:20px;
      text-shadow:0 0 4px #fff,0 0 8px #fff,0 0 12px #fff,
                  0 0 20px rgba(255,255,255,.95),0 0 34px rgba(255,255,255,.85),
                  0 0 60px rgba(255,255,255,.65),0 0 96px rgba(255,255,255,.45)}
  .hero-copy .fvk{text-shadow:0 0 3px #fff,0 0 7px #fff,0 0 14px rgba(255,255,255,.95),
                  0 0 28px rgba(255,255,255,.75)}
  .hero-copy p{font-size:14.5px;line-height:2;color:var(--ink);font-weight:600;
      max-width:30em;margin-bottom:22px;
      text-shadow:0 0 2px #fff,0 0 4px #fff,0 0 6px #fff,0 0 9px #fff,0 0 13px #fff,
                  0 0 20px rgba(255,255,255,.95),0 0 32px rgba(255,255,255,.8),
                  0 0 52px rgba(255,255,255,.55)}
  .hcta{display:flex;gap:10px;flex-wrap:wrap}
  /* 写真の明暗にかかわらずボタンが沈まないように */
  .hcta .bt-o{background:rgba(255,255,255,.88);border-color:rgba(20,23,26,.3);
      backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .hcta .bt-o:hover{background:#fff;border-color:var(--tl)}
  @media (min-width:768px){.hero h1{font-size:39px}.hero-copy p{font-size:15.5px}}
  @media (min-width:1024px){.hero h1{font-size:46px;line-height:1.52}.hero-copy p{max-width:26em}}

  /* ヒーローの左右の矢印（手動で写真を送る）。
     PCは写真の縦中央。文字は左端 72px から始まるので重ならない。
     スマホは文字がヒーローの下側に寄るため、上の写真が見えている帯の中に置く。 */
  .harw{position:absolute;z-index:4;top:50%;transform:translateY(-50%);
      width:40px;height:40px;padding:0;border:0;background:none;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      color:var(--ink);-webkit-tap-highlight-color:transparent;
      /* 座布団を置かないぶん、明るい写真の上でも矢印が消えないように
         白のにじみを重ねる（見出しの text-shadow と同じ考え方） */
      filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px rgba(255,255,255,.95))
             drop-shadow(0 0 14px rgba(255,255,255,.7));
      transition:opacity .2s ease}
  .harw:hover{opacity:.6}
  .harw:focus-visible{outline:2px solid var(--tl);outline-offset:2px;border-radius:4px}
  .harw svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;
      stroke-linecap:round;stroke-linejoin:round}
  .harw.prev{left:10px}
  .harw.next{right:10px}
  @media (max-width:1023px){
    .harw{width:36px;height:36px}
    .harw svg{width:23px;height:23px}
    .harw.prev{left:6px}
    .harw.next{right:6px}
  }

  /* スマホでは文字とボタンが写真をほぼ覆っていたため、コピー以外を詰めて
     写真の見える面積を増やす。ボタンを縦積み（約114px）から横並び（約42px）に
     変えるのが一番効く。 */
  @media (max-width:767px){
    .hslides{aspect-ratio:3/4.3}
    .hero-copy{padding-bottom:14px}
    .hero-copy .fvk{font-size:11.5px;margin-bottom:8px}
    .hero h1{font-size:27px;line-height:1.45;margin-bottom:12px}
    .hero-copy p{font-size:12.5px;line-height:1.8;margin-bottom:14px}
    .hcta{gap:8px;flex-wrap:nowrap}
    .hcta .btn{flex:1 1 0;min-height:36px;padding:8px 6px;font-size:12px;
        justify-content:center;text-align:center;white-space:nowrap}
  }
  /* PRICE 下の2つのボタン。
     もとは HTML に margin-left:10px が直接書かれており画面幅で変えられなかったため、
     スマホで折り返したときに「上下がくっつく」「2つ目だけ右へずれる」状態になっていた。
     指定をCSSへ移し、横に並ぶときだけ左余白を付ける。 */
  .pnote + .btn + .btn{margin-left:10px}
  @media (max-width:767px){
    .pnote + .btn + .btn{margin-left:0;margin-top:10px}
  }

  /* 幅の狭い端末（iPhone SE など）は本文の行数が増えるのでもう一段詰める */
  @media (max-width:360px){
    .hero h1{font-size:24.5px;margin-bottom:10px}
    .hero-copy p{font-size:11.5px;line-height:1.75;margin-bottom:12px}
    .hcta .btn{font-size:11.5px;padding:10px 4px}
    /* この幅ではコピーが上まで伸びるため、写真の縦中央に置くと見出しに重なる。
       重ならない位置まで引き上げる（320pxで見出しまで約54pxの余裕）。 */
    .harw{top:30%;width:34px;height:34px}
    .harw svg{width:21px;height:21px}
  }

  /* MESSAGE */
  .msg{display:grid;gap:28px}
  @media (min-width:768px){.msg{grid-template-columns:.7fr 1.3fr;gap:50px;align-items:center}}
  .msg .ph{aspect-ratio:3/4}
  .msg .mc{font-family:var(--mc);font-size:23px;line-height:1.9;font-weight:500;margin-bottom:24px}
  @media (min-width:768px){.msg .mc{font-size:29px}}
  .msg p{font-size:14.5px;line-height:2.05;color:var(--ink2);margin-bottom:16px;
      max-width:34em;text-wrap:pretty}
  .msgn{font-size:12.5px;font-weight:700;margin-bottom:20px}
  .msgn span{color:var(--ink3);font-weight:400;margin:0 6px}

  /* FOR WHO */
  .fw{display:grid;gap:0;border-top:1px solid var(--line);margin-bottom:34px}
  @media (min-width:768px){.fw{grid-template-columns:1fr 1fr;gap:0 40px}}
  .fwi{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);
       font-size:15px;line-height:1.85;font-weight:500}
  .fwi::before{content:"";flex:0 0 8px;height:8px;margin-top:11px;border-radius:50%;background:var(--tl)}
  .fwc{font-size:16px;line-height:2;font-weight:700}

  /* MENU */
  .menus{display:grid;gap:34px}
  @media (min-width:768px){.menus{grid-template-columns:repeat(3,1fr);gap:24px}}
  .mcard .ph{aspect-ratio:4/3;border-radius:8px;margin-bottom:20px}
  .mcard h3{font-size:18px;font-weight:700;margin-bottom:9px}
  .mcard .tag{font-size:13.5px;font-weight:700;color:var(--tl);line-height:1.7;margin-bottom:16px}
  .mcard p{font-size:13.5px;line-height:1.95;color:var(--ink2);margin-bottom:12px}
  .mcard p:last-child{margin-bottom:0}
  /* VOICE 帯写真 */
  .vban{aspect-ratio:21/9;border-radius:8px;margin-bottom:36px}

  /* WORKS */
  .cases{display:grid;gap:34px}
  @media (min-width:768px){.cases{grid-template-columns:61fr 39fr;gap:34px 26px;align-items:start}}
  .cs{opacity:0;transform:translateX(-30px);
      transition:opacity .75s ease,transform .75s cubic-bezier(.22,.7,.3,1);
      transition-delay:var(--delay,0s)}
  .cs.from-right{transform:translateX(30px)}
  .cs.in-view{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.cs{opacity:1;transform:none;transition:none}}
  .cs .imgs{display:grid;gap:4px}
  .cs .imgs .ph{aspect-ratio:1/1}
  .cs .imgs.n1 .ph{aspect-ratio:3/2}
  .cs .imgs.n3{grid-template-columns:1.6fr 1fr}
  .cs .imgs.n3 .ph:nth-child(1){grid-row:1/3;aspect-ratio:auto;height:100%}
  .cs .imgs.n4{grid-template-columns:1fr 1fr}
  .cs .meta{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
  .cs .cat{font-family:var(--en);font-size:10px;letter-spacing:.13em;font-weight:700;
       color:var(--tl);display:block;margin-bottom:7px}
  .cs h3{font-size:14.5px;font-weight:700;line-height:1.6}
  .cs .go{margin-left:auto;color:var(--ink3);flex:0 0 auto;font-size:15px;transition:transform .2s}
  .cs:hover .go{transform:translateX(4px);color:var(--tl)}
  .wmore{display:inline-flex;align-items:center;gap:9px;margin-top:38px;font-size:13px;
       font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:7px}

  /* MERIT */
  .mrt{display:grid;gap:0;border-top:1px solid var(--line)}
  @media (min-width:1024px){.mrt{grid-template-columns:repeat(3,1fr);gap:0 40px}}
  .mi{padding:26px 0;border-bottom:1px solid var(--line)}
  .mi .n{font-family:var(--en);font-size:12px;font-weight:700;color:var(--tl);
      letter-spacing:.13em;margin-bottom:11px}
  .mi h3{font-size:16.5px;font-weight:700;line-height:1.7;margin-bottom:12px}
  .mi p{font-size:14px;line-height:2;color:var(--ink2)}
  .mi .so{color:var(--ink);font-weight:700}

  /* PRICE */
  .pl3{display:grid;gap:0;border-top:1px solid var(--line)}
  @media (min-width:768px){.pl3{grid-template-columns:repeat(3,1fr);gap:34px}}
  .pli{padding:26px 0;border-bottom:1px solid var(--line)}
  @media (min-width:768px){.pli{padding:26px 0 0;border-bottom:0}}
  .pli h3{font-size:15px;font-weight:700;margin-bottom:14px}
  .pv{font-family:var(--en);font-size:29px;font-weight:400;color:var(--ink);margin-bottom:18px}
  .pv em{font-family:var(--jp);font-style:normal;font-size:12px;color:var(--ink2);
      vertical-align:super;margin-left:2px}
  .pout{font-size:14px;font-weight:700;line-height:1.85;color:var(--ink);margin-bottom:18px}
  .spec{border-top:1px solid var(--line);font-size:12.5px;line-height:1.7}
  .spec div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:9px 0;
       border-bottom:1px solid var(--line)}
  .spec dt,.spec b{color:var(--ink3);font-weight:400;font-size:11.5px}
  .spec span{color:var(--ink)}
  .pinc{list-style:none;margin-top:14px}
  .pinc li{position:relative;padding:6px 0 6px 15px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
  .pinc li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;
      border-radius:50%;background:var(--tl)}
  .pnote{font-size:11.5px;color:var(--ink3);line-height:1.9;margin:26px 0 28px}

  /* VOICE */
  .rate{display:grid;gap:14px;padding:24px 0;border-top:1px solid var(--line);
        border-bottom:1px solid var(--line);margin-bottom:38px}
  @media (min-width:768px){.rate{grid-template-columns:auto 1fr;align-items:center;gap:26px}}
  .rnum{display:flex;align-items:baseline;gap:12px}
  .rnum b{font-family:var(--en);font-size:34px;font-weight:400;line-height:1}
  .stars{color:var(--tl);font-size:13px;letter-spacing:.14em}
  .rsrc{font-size:11px;color:var(--ink3);margin-top:5px}
  .rnote{font-size:11.5px;color:var(--ink3);line-height:1.8}
  @media (min-width:768px){.rnote{text-align:right}}
  .vs{display:grid;gap:0;border-top:1px solid var(--line)}
  @media (min-width:768px){.vs{grid-template-columns:repeat(3,1fr);gap:32px}}
  .v{padding:24px 0;border-bottom:1px solid var(--line)}
  @media (min-width:768px){.v{padding:24px 0 0;border-bottom:0}}
  .v p{font-size:14px;line-height:2;color:var(--ink)}
  .vmeta{font-size:11px;color:var(--ink3);margin-top:18px}
  .vfoot{font-size:10.5px;color:var(--ink3);line-height:1.8;margin-top:26px}

  /* FLOW */
  .fl5{display:grid;gap:0;border-top:1px solid var(--line)}
  @media (min-width:768px){.fl5{grid-template-columns:repeat(5,1fr);gap:24px}}
  .fli{padding:20px 0;border-bottom:1px solid var(--line)}
  @media (min-width:768px){.fli{padding:20px 0 0;border-bottom:0}}
  .fn{font-family:var(--en);font-size:12px;font-weight:700;color:var(--tl);margin-bottom:10px}
  .fli h4{font-size:15px;font-weight:700;margin-bottom:10px}
  .fli p{font-size:14px;line-height:1.95;color:var(--ink2)}

  /* FAQ */
  .faqwrap{display:grid;gap:24px}
  @media (min-width:768px){.faqwrap{grid-template-columns:.5fr 1.5fr;gap:44px;align-items:start}}
  .fi{border-bottom:1px solid var(--line)}
  .fi:first-child{border-top:1px solid var(--line)}
  .fq{width:100%;display:flex;align-items:flex-start;gap:14px;min-height:52px;padding:18px 0;
      background:none;border:0;text-align:left;color:var(--ink);font-size:13.5px;
      font-weight:700;line-height:1.7;cursor:pointer}
  .pm{margin-left:auto;flex:0 0 auto;position:relative;width:14px;height:14px;margin-top:4px}
  .pm::before,.pm::after{content:"";position:absolute;background:var(--tl);border-radius:2px;transition:transform .2s}
  .pm::before{left:0;right:0;top:6px;height:2px}
  .pm::after{top:0;bottom:0;left:6px;width:2px}
  .fi.open .pm::after{transform:scaleY(0)}
  .fa{max-height:0;overflow:hidden;transition:max-height .25s ease}
  .fi.open .fa{max-height:360px}
  .fa p{padding:0 0 20px;font-size:13px;line-height:2;color:var(--ink2)}

  /* PROFILE */
  .pf{display:grid;gap:28px}
  @media (min-width:768px){.pf{grid-template-columns:.7fr 1.3fr;gap:50px;align-items:start}}
  .pf .ph{aspect-ratio:3/4}
  .pfn{font-size:19px;font-weight:700;margin-bottom:22px}
  .pfn span{display:block;font-size:12px;font-weight:400;color:var(--ink3);margin-top:6px}
  .pf p{font-size:14px;line-height:2.05;color:var(--ink2);margin-bottom:16px;
      max-width:34em;text-wrap:pretty}

  /* CONTACT */
  .ctpre{background:var(--beige);border-left:3px solid var(--tl);padding:20px 22px;margin-bottom:34px}
  .ctpre p{font-size:14.5px;line-height:1.95;font-weight:500}
  .in.narrow{max-width:760px}
  .frm{background:#FFFFFF;border:1px solid rgba(20,23,26,.09);padding:30px 26px;border-radius:6px;
       box-shadow:0 1px 2px rgba(20,23,26,.04),0 12px 32px rgba(20,23,26,.06)}
  .fg{display:grid;gap:22px}
  @media (min-width:768px){.fg{grid-template-columns:1fr 1fr;gap:22px 20px}}
  .f1{grid-column:1/-1}
  .fld label{display:block;font-size:12px;font-weight:700;color:#3A4046;margin-bottom:9px}
  .fld label i{font-style:normal;background:#D0554F;color:#fff;font-size:10px;font-weight:700;
      padding:3px 8px;border-radius:3px;margin-left:8px;vertical-align:middle;letter-spacing:.06em}
  .fld input,.fld select,.fld textarea{width:100%;min-height:48px;background:#F7F6F3;
      border:1px solid #DCD9D2;border-radius:4px;color:var(--ink);font-family:var(--jp);
      font-size:14.5px;padding:12px 14px;transition:border-color .18s,box-shadow .18s,background .18s}
  .fld textarea{min-height:158px;resize:vertical;line-height:1.95}
  .fld select{appearance:none;padding-right:34px;cursor:pointer;
      background-image:linear-gradient(45deg,transparent 50%,var(--tl) 50%),
      linear-gradient(135deg,var(--tl) 50%,transparent 50%);
      background-position:right 16px center,right 11px center;background-size:6px 6px,6px 6px;
      background-repeat:no-repeat}
  .fld input::placeholder,.fld textarea::placeholder{color:#9B9A94}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;background:#fff;
      border-color:var(--tl);box-shadow:0 0 0 3px rgba(12,122,117,.14)}
  .fsub{grid-column:1/-1;display:flex;flex-direction:column;gap:14px;
       margin-top:6px;padding-top:24px;border-top:1px solid rgba(20,23,26,.09)}
  .fsub button{display:inline-flex;align-items:center;justify-content:center;width:100%;
      background:var(--tl);color:#fff;border:0;min-height:54px;padding:0 36px;
      font-size:15px;font-weight:700;border-radius:4px;cursor:pointer;transition:background .2s}
  .fsub button:hover{background:#0A6360}
  .fsub span{font-size:11.5px;color:var(--ink3);line-height:1.9}
  .fsub span b{color:var(--ink);font-size:12.5px}
  @media (min-width:768px){
    .fsub{flex-direction:row;align-items:center;gap:20px}
    .fsub button{width:auto;flex:0 0 auto}
    .fsub span{flex:1 1 auto}
  }

  /* FOOTER */
  .ft{background:var(--dark2);color:#fff;padding:38px var(--px) 42px}
  .ftin{max-width:var(--max);margin:0 auto;display:grid;gap:22px}
  @media (min-width:768px){.ftin{grid-template-columns:auto 1fr;gap:40px;align-items:start}}
  .ft .fn1{font-size:12.5px;font-weight:700;margin-bottom:9px}
  .ft .fd{font-size:10.5px;line-height:1.8;color:#8A9198}
  .ftl{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:10.5px;color:#C3C8CD}
  @media (min-width:768px){.ftl{justify-content:flex-end}}
  .ftl a:hover{color:var(--tl-lt)}
  .ftc{font-family:var(--en);font-size:9.5px;color:#6B7278;margin-top:22px}

/* ===================== 下層ページ ===================== */
.page-head{padding:calc(var(--gap) * .8) var(--px) calc(var(--gap) * .55);background:var(--beige)}
.page-head .in{max-width:var(--max);margin:0 auto}
.crumb{font-size:12px;color:var(--ink3);margin-bottom:18px}
.crumb a:hover{color:var(--tl)}
.crumb span{margin:0 8px;color:#B9BDC1}
.page-head h1{font-size:26px;font-weight:900;line-height:1.55;letter-spacing:.005em;
  margin-bottom:14px;font-family:var(--jp);color:var(--ink);text-shadow:none}
@media (min-width:768px){.page-head h1{font-size:34px}}
.page-head .desc{font-size:15px;line-height:2;color:var(--ink2);max-width:44em}
.spec-table{border-top:1px solid var(--line);margin-bottom:40px}
.spec-table div{display:grid;grid-template-columns:7.5em 1fr;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:14px;line-height:1.8}
.spec-table dt,.spec-table b{color:var(--ink3);font-weight:400;font-size:12.5px}
.todo{display:inline-block;font-size:10.5px;font-weight:700;color:#B4541F;
  background:rgba(180,84,31,.1);border-radius:3px;padding:2px 7px;margin-left:6px}
.blk{margin-bottom:44px}
.blk h2{font-size:19px;font-weight:800;margin-bottom:16px}
.blk p{font-size:15px;line-height:2.05;color:var(--ink2);margin-bottom:14px}
.todo-box{border:2px dashed var(--line);border-radius:10px;padding:20px 22px;
  font-size:14px;line-height:1.95;color:var(--ink2)}
.todo-box b{display:block;color:#B4541F;font-size:11px;letter-spacing:.1em;margin-bottom:9px}
.gal{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.gal{gap:40px}}
.gal .ph{aspect-ratio:auto;border-radius:8px}
.gal .ph img{width:100%;height:auto;object-fit:contain;display:block}
.backlink{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;
  border-bottom:1px solid var(--ink);padding-bottom:7px;margin-top:12px}
.cards{display:grid;gap:26px}
@media (min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
.cardlink{display:block}
.cardlink .ph{aspect-ratio:3/2;border-radius:10px;margin-bottom:16px}
.cardlink .k{font-family:var(--en);font-size:10px;letter-spacing:.13em;font-weight:700;
  color:var(--tl);display:block;margin-bottom:8px}
.cardlink h3{font-size:15.5px;font-weight:700;line-height:1.6}
.legal dl{border-top:1px solid var(--line)}
.legal dl>div{display:grid;gap:8px;padding:18px 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.legal dl>div{grid-template-columns:11em 1fr;gap:24px}}
.legal dt{font-size:13.5px;font-weight:700}
.legal dd{font-size:14.5px;line-height:1.95;color:var(--ink2)}
.legal h2,.doc h2{font-size:17px;font-weight:800;margin:34px 0 12px}
.doc p,.doc li{font-size:14.5px;line-height:2;color:var(--ink2)}
.doc ul{margin:0 0 14px 1.3em}
  .doc .mini-dl{border-top:1px solid var(--line);margin-top:14px}
  .doc .mini-dl>div{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
  @media (min-width:768px){.doc .mini-dl>div{grid-template-columns:11em 1fr;gap:20px}}
  .doc .mini-dl dt{font-size:13px;font-weight:700}
  .doc .mini-dl dd{font-size:14.5px;line-height:1.9;color:var(--ink2)}
  .doc a,.legal a{color:var(--tl);text-decoration:underline;text-underline-offset:3px}

.doc li{margin-bottom:6px}

  /* タップ領域の確保（スマホ） */
  @media (max-width:900px){
    .tl,.wmore,.backlink,.mlink,.wlink,.ftl a,.crumb a{
      min-height:44px;display:inline-flex;align-items:center}
    .cs .meta{min-height:44px}
    .fq{min-height:52px}
  }


/* ===================== 印刷 / PDF書き出し ===================== */
@media print{
  @page{size:A4 portrait;margin:10mm 8mm}
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  html,body{background:#fff}
  .skip-link{display:none!important}

  /* ヘッダーは追従をやめて先頭に一度だけ */
  .hd{position:static!important;backdrop-filter:none!important;background:#fff!important}
  .nv,.hd .btn,.bg{display:none!important}

  /* ヒーローは高さを固定（vh は紙では効かない） */
  .hero{height:150mm!important}
  .slides{height:150mm!important;min-height:0!important;aspect-ratio:auto!important}
  .harw{display:none!important}
  .hcopy h1{font-size:30pt!important}
  .hcopy p{font-size:10.5pt!important}

  /* スクロール出現アニメを解除（未発火だと真っ白になるため） */
  .cs{opacity:1!important;transform:none!important;transition:none!important}

  /* アコーディオンを全部開く */
  .fa{max-height:none!important;overflow:visible!important}
  .pm{display:none!important}

  /* 余白を紙向けに詰める */
  .sec{padding:14mm 10mm!important}
  .page-head{padding:12mm 10mm 8mm!important}

  /* 途中で割れると困る単位 */
  .cs,.mcard,.pli,.v,.fli,.mi,.fwi,.fi,.wk,.cardlink{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .hero,.ft{break-inside:avoid}


  /* 縦長画像は紙の高さに収める */
  .msg .ph,.pf .ph{max-height:110mm!important;aspect-ratio:auto!important}
  .mcard .ph{max-height:70mm!important}
  .vban{max-height:55mm!important}
  .cs .imgs .ph{max-height:80mm!important}

  /* 操作にしか使わないものは省く */
  .arw,.go{display:none!important}
  a{text-decoration:none;color:inherit}
}

/* Case previews: one landscape photograph without cropping. */
.cs .imgs.n1 .ph,.cardlink .ph{aspect-ratio:auto}
.cs .imgs.n1 .ph img,.cardlink .ph img{width:100%;height:auto;object-fit:contain}