@charset "utf-8";
/* ==========================================================================
   株式会社Play Value  main.css
   フレームワーク不使用 / ビルド不要
   01 tokens  02 base  03 layout  04 type  05 header  06 hero
   07 blocks  08 forms  09 footer  10 motion  11 print
   ========================================================================== */

/* ==========================================================================
   01. tokens
   --------------------------------------------------------------------------
   紙のような白を地にして、墨と藍だけで組む。差し色は増やさない。
   面の明度差でセクションを分ける。
   ========================================================================== */
:root{
  --paper  :#F7F5F0;   /* 地。純白は使わない */
  --paper-2:#EFECE4;   /* 一段沈めた面 */
  --paper-3:#E5E1D6;   /* さらに沈めた面 */

  --ink    :#23262B;   /* 見出し・本文。純黒は使わない */
  --ink-2  :#4B5058;   /* 補助 */
  --ink-3  :#5E636D;   /* さらに弱い。小さい文字にも使うのでAAを満たす値にする */

  --rule   :#CCC5B1;   /* 罫線 */
  --rule-2 :#9A9280;   /* 濃い罫線。枠線は3:1以上が要る */

  --ai     :#1B2A4A;   /* ネイビー。リンク、ボタン、強調 */
  --ai-2   :#0F1B33;   /* 濃いネイビー */
  --ai-3   :#4A5B7E;   /* 薄いネイビー */
  --ai-pale:#E8EBF1;   /* ネイビーの淡い面 */
  --on-ai  :#F7F5F0;
  --brass  :#7A5D24;   /* 真鍮。数字と記号だけに点で使う */

  --wrap   :1160px;
  --gut    :clamp(21px,6vw,64px);
  --radius :2px;       /* 角丸はほぼ使わない */

  --mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif CJK JP","Noto Serif JP","Source Han Serif JP","Songti SC",serif;
  --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic Medium","Yu Gothic","Noto Sans CJK JP","Noto Sans JP",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   02. base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.015em;
  font-feature-settings:"palt" 1;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.5em;padding-left:1.4em}
li{margin-bottom:.55em}
h1,h2,h3,h4{margin:0;line-height:1.5;font-weight:600}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px}
::selection{background:var(--ai);color:var(--on-ai)}
[hidden]{display:none!important}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ai);color:var(--on-ai);padding:12px 20px;font-weight:700}
.skip:focus{left:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   03. layout
   --------------------------------------------------------------------------
   セクションごとに型を変える。カードを並べる型は使わない。
   ========================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
main{display:block}

.s{padding-block:clamp(48px,6vw,82px)}       /* 標準 */
.s--lg{padding-block:clamp(60px,8vw,104px)} /* 密度を落とす場所だけ */
.s--sm{padding-block:clamp(38px,5vw,62px)}   /* 詰める */
.s--flush{padding-block:0}

.tone-2{background:var(--paper-2)}
.tone-3{background:var(--paper-3)}
.tone-pale{background:var(--ai-pale)}

/* ネイビーのベタ面。
   このブロック内で --ai を上書きするため、背景には変数を使わず実値を書く。
   （var(--ai) にすると上書き後の値を拾って背景が反転しない） */
.invert{
  background:#1B2A4A;color:#F7F5F0;
  --ink:#F7F5F0;--ink-2:#C3D2DD;--ink-3:#A7BAC8;
  --rule:rgba(247,245,240,.26);--rule-2:rgba(247,245,240,.45);
  --ai:#F7F5F0;--brass:#C9A961;--paper:var(--ai-2);--paper-2:var(--ai-2);
}

/* 読み物の1カラム。中央寄せせず、左の余白を大きくとる */
.read{max-width:38em}
.read--wide{max-width:44em}
@media (min-width:900px){
  .indent{margin-left:8.5%}
}

/* 左右分割。左右の比率と順序を場所ごとに変える */
.split{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;align-items:center}
  .split--7-5{grid-template-columns:7fr 5fr}
  .split--5-7{grid-template-columns:5fr 7fr}
  .split--4-6{grid-template-columns:4fr 6fr;gap:clamp(40px,7vw,110px)}
  .split--top{align-items:start}
  .split__flip{order:-1}
}

/* ==========================================================================
   04. type
   ========================================================================== */
.mincho{font-family:var(--mincho);font-weight:600}
/* 文節で折る。未対応ブラウザでは無視される */
.h-hero,.h-1,.h-2,.h-3,.row__t,.pillar__t,.faq__q>span,.axis__t,.steps__t{word-break:auto-phrase}

/* 見出しは明朝。日本語の並びに落ち着きを出す */
/* 明朝はヒーローの一文とページ見出し、そして引用だけに使う。
   全見出しを明朝にすると、業種と合わない硬さが出る。 */
.h-hero{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(28px,4vw,40px);
  line-height:1.5;letter-spacing:.012em;
}
.h-1{font-family:var(--mincho);font-weight:600;font-size:clamp(28px,3.7vw,38px);line-height:1.55;letter-spacing:.015em}
.h-2{font-family:var(--gothic);font-weight:700;font-size:clamp(21px,2.5vw,28px);line-height:1.6;letter-spacing:.01em}
.h-3{font-family:var(--gothic);font-weight:700;font-size:clamp(16.5px,1.7vw,18.5px);line-height:1.7;letter-spacing:.01em}
.h-4{font-family:var(--gothic);font-weight:700;font-size:16px;line-height:1.7}

.lead{font-size:clamp(15px,1.4vw,16.5px);line-height:1.95;color:var(--ink-2)}
.small{font-size:14px;line-height:1.9;color:var(--ink-2)}
.xs{font-size:12.5px;line-height:1.8;color:var(--ink-3);letter-spacing:.04em}

/* セクションの頭。英字ラベルは使わず、短い縦線と日本語だけ */
.tag{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;
  color:var(--ai);margin-bottom:clamp(14px,1.8vw,20px);
}
.tag::before{content:"";width:22px;height:1px;background:currentColor;flex:none}

.head{margin-bottom:clamp(24px,3.2vw,38px)}
.head .lead{margin-top:clamp(13px,1.6vw,18px);max-width:38em}

.em{color:var(--ai)}
.nb{display:inline-block}
/* 狭い画面では塊のまま次行へ落ちて不格好になるので、通常の折り返しに戻す */
@media (max-width:640px){.nb{display:inline}}

/* 縦組み。ヒーローの脇に添える */
/* 明朝が1つも入っていない環境でジェネリックserifに落ちると縦組みが崩れるため、
   Linux/Android の実インストール名も並べておく */
.tate{
  writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;
  font-family:var(--mincho);letter-spacing:.24em;
  font-size:12.5px;color:var(--ink-2);margin:0;
}

/* ==========================================================================
   05. header
   ========================================================================== */
/* backdrop-filter は position:fixed の子孫の包含ブロックを作ってしまい、
   中のナビ（モバイル時 position:fixed）が潰れる。使わずに不透明の地色を敷く。 */
.hd{
  position:sticky;top:0;z-index:100;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .4s;
}
.hd.is-stuck{border-bottom-color:var(--rule)}
.hd__in{
  display:flex;align-items:center;gap:18px;height:68px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
@media (min-width:1000px){.hd__in{height:84px}}

.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo__m{width:26px;height:26px;flex:none}
.logo__t{font-family:var(--mincho);font-weight:600;font-size:19px;letter-spacing:.04em;white-space:nowrap}
.logo__s{font-size:10px;letter-spacing:.22em;color:var(--ink-3);margin-left:2px}
@media (max-width:430px){.logo__s{display:none}.logo__t{font-size:18px}}
@media (max-width:359px){
  .logo__t{font-size:17px}
  .logo__m{width:22px;height:22px}
  .hd-cta{padding-inline:12px;font-size:12px;height:36px}
  .burger{width:38px;height:38px;margin-left:6px}
}

.gnav{margin-left:auto}
.gnav__l{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);list-style:none;margin:0;padding:0}
.gnav__l li{margin:0}
.gnav__a{position:relative;display:block;font-size:14px;font-weight:600;padding-block:8px;transition:color .3s}
.gnav__a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--ai);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out);
}
.gnav__a:hover{color:var(--ai)}
.gnav__a:hover::after,.gnav__a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.gnav__a[aria-current]{color:var(--ai)}

.hd-cta{
  flex:none;display:inline-flex;align-items:center;gap:9px;height:42px;padding-inline:20px;
  background:var(--ai);color:var(--on-ai);font-size:13.5px;font-weight:700;letter-spacing:.04em;
  transition:background .3s;
}
.hd-cta:hover{background:var(--ai-2)}

.burger{
  display:none;flex:none;width:44px;height:44px;margin-left:10px;order:3;
  border:1px solid var(--rule-2);background:transparent;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.burger span{position:relative;display:block;width:18px;height:1px;background:var(--ink);transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1px;background:var(--ink);transition:transform .4s var(--ease-out),top .3s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:999px){
  .burger{display:flex}
  .hd-cta{order:2;margin-left:auto;height:38px;padding-inline:15px;font-size:12.5px}
  .gnav{
    position:fixed;inset:68px 0 0 0;background:var(--paper);
    padding:14px var(--gut) 48px;overflow-y:auto;margin-left:0;
  }
  .gnav__l li:last-child{border-bottom:0}
  .gnav__l{flex-direction:column;align-items:stretch;gap:0}
  .gnav__l li{border-bottom:1px solid var(--rule)}
  .gnav__a{font-family:var(--mincho);font-size:19px;padding-block:22px}
  .gnav__a::after{display:none}
}
.js .gnav[data-open="false"]{display:none}
@media (min-width:1000px){.js .gnav[data-open="false"]{display:block}}
html:not(.js) .hd{position:static}
html:not(.js) .burger{display:none}
@media (max-width:999px){
  html:not(.js) .gnav{position:static;inset:auto;padding:0 0 14px;width:100%;order:4}
  html:not(.js) .hd__in{flex-wrap:wrap;height:auto;padding-block:14px}
}
body.is-locked{overflow:hidden}

/* ==========================================================================
   06. hero
   ========================================================================== */
.hero{position:relative;background:var(--paper)}
.hero__media{position:relative;overflow:hidden}
.hero__media img{width:100%;height:min(58vh,420px);object-fit:cover;object-position:center 46%}
@media (min-width:700px){.hero__media img{height:clamp(360px,46vw,560px)}}
/* 文字は写真に乗せず、紙のパネルを重ねる。
   スマホではパネルを画面幅いっぱいにして、写真にしっかり食い込ませる */
.hero__body{
  position:relative;z-index:1;background:var(--paper);
  margin-inline:calc(var(--gut) * -1);
  padding:clamp(30px,7vw,44px) var(--gut) 0;
  margin-top:-64px;
}
/* パネルの肩に短い線を置いて、重なっていることを示す */
.hero__body::before{
  content:"";position:absolute;top:0;left:var(--gut);
  width:38px;height:2px;background:var(--brass);
}
@media (min-width:900px){
  .hero__body{
    margin-inline:0;margin-left:auto;width:min(100%,68%);
    padding:clamp(32px,3.6vw,44px) 0 0 clamp(32px,3.6vw,44px);
    margin-top:clamp(-96px,-8vw,-56px);
  }
  .hero__body::before{left:clamp(32px,3.6vw,44px)}
}
.hero__body .h-hero{max-width:17em}
.hero__lead{margin-top:clamp(20px,2.6vw,28px);max-width:32em}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,4vw,42px)}
.hero__tate{
  position:absolute;top:clamp(20px,3.4vw,40px);right:var(--gut);z-index:2;
  background:rgba(247,245,240,.78);padding:10px 4px;
}
@media (min-width:1000px){.hero__tate{right:auto;left:var(--gut);padding:12px 6px}}

/* 下層のページ見出し。地色を敷いて、ヘッダーと本文のあいだに面をつくる */
.phd{
  background:var(--paper-2);
  padding-block:clamp(42px,6vw,80px) clamp(36px,5vw,60px);
}
.phd .lead{margin-top:clamp(18px,2.4vw,26px);max-width:40em}

/* ==========================================================================
   07. blocks
   ========================================================================== */
/* -- ボタン -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 30px;border:1px solid transparent;
  font-size:15px;font-weight:700;letter-spacing:.04em;cursor:pointer;text-align:center;
  transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease-out);
}
.btn--fill{background:var(--ai);color:var(--on-ai)}
.btn--fill:hover{background:var(--ai-2);transform:translateY(-2px)}
.btn--line{border-color:var(--rule-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ai);color:var(--ai);transform:translateY(-2px)}
.invert .btn--fill{background:var(--on-ai);color:var(--ai-2)}
.invert .btn--fill:hover{background:#fff}
.invert .btn--line{border-color:rgba(251,250,247,.45);color:var(--on-ai)}
.invert .btn--line:hover{border-color:var(--on-ai);color:var(--on-ai)}
.arw{width:17px;height:9px;flex:none;transition:transform .4s var(--ease-out)}
.btn:hover .arw,.tl:hover .arw{transform:translateX(5px)}
@media (max-width:479px){.hero__act .btn,.cta__act .btn{width:100%}}

/* -- テキストリンク -- */
.tl{display:inline-flex;align-items:center;gap:11px;font-size:14.5px;font-weight:700;color:var(--ai);padding-bottom:3px;border-bottom:1px solid currentColor;transition:gap .3s}
.tl:hover{gap:16px}

/* -- 罫線リスト。カードグリッドの代わりに使う主役の型 -- */
.rows{border-top:1px solid var(--rule)}
.row{
  position:relative;display:grid;gap:6px 26px;
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--rule);
  transition:background .35s;
}
@media (min-width:760px){
  .row{grid-template-columns:6em minmax(0,16em) minmax(0,1fr) auto;align-items:baseline;gap:22px}
  .rows--nonum .row{grid-template-columns:minmax(0,17em) minmax(0,1fr) auto}
}
.row__n{font-family:var(--mincho);font-size:13.5px;color:var(--brass);letter-spacing:.04em;white-space:nowrap}
.row__t{font-size:clamp(17px,1.9vw,19.5px);font-weight:700;line-height:1.6;transition:color .3s}
.row__d{font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.row__m{font-size:13px;color:var(--ink-3);white-space:nowrap;letter-spacing:.04em}
.row__m--p{color:var(--ai);font-weight:700}
a.row::after{
  content:"";position:absolute;right:0;top:50%;width:16px;height:9px;margin-top:-4px;
  background:currentColor;opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0 4.5h15M11 1l4 3.5L11 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0 4.5h15M11 1l4 3.5L11 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:opacity .35s,transform .4s var(--ease-out);
}
@media (min-width:760px){
  a.row{padding-right:46px}
  a.row:hover{background:linear-gradient(to right,transparent,var(--paper-2) 12%,var(--paper-2) 88%,transparent)}
  a.row:hover::after{opacity:1;transform:translateX(4px);color:var(--ai)}
}
a.row:hover .row__t{color:var(--ai)}
@media (max-width:759px){
  .row{grid-template-columns:minmax(0,1fr) 18px;gap:7px 14px;padding-right:0}
  .row__n{grid-column:1 / -1;grid-row:1;margin-bottom:-3px}
  .row__t{grid-column:1;grid-row:2;align-self:center}
  .row__d{grid-column:1 / -1;grid-row:3}
  /* 料金は左に揃えて、細い線で本文と分ける */
  .row__m{
    grid-column:1 / -1;grid-row:4;font-size:12.5px;
    margin-top:5px;padding-top:9px;border-top:1px solid var(--rule);
  }
  /* 矢印は擬似要素のままグリッドに載せる */
  a.row::after{
    position:static;grid-column:2;grid-row:2;align-self:center;
    opacity:.55;color:var(--ai);width:16px;height:9px;margin:0;transform:none;
  }
}

/* -- 5人 → 10人 → 30人 の時間軸 -- */
.axis{display:grid;gap:0;border-top:1px solid var(--rule)}
@media (min-width:760px){.axis{grid-template-columns:repeat(3,1fr)}}
.axis__c{padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--rule)}
/* スマホでは数字を大きく取り、説明を右に並べる */
@media (max-width:759px){
  .axis__c{display:grid;grid-template-columns:80px minmax(0,1fr);gap:2px 18px;align-items:baseline}
  .axis__n{grid-row:1 / span 3;align-self:start;font-size:42px;padding-top:3px}
  .axis__t{margin:0 0 7px}
}
@media (min-width:760px){
  .axis__c{border-bottom:0;padding-right:clamp(20px,3vw,40px);border-right:1px solid var(--rule)}
  .axis__c:last-child{border-right:0;padding-right:0}
  .axis__c+.axis__c{padding-left:clamp(20px,3vw,40px)}
}
.axis__n{margin:0;font-family:var(--mincho);font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--brass);letter-spacing:.02em}
.axis__n small{font-size:.42em;margin-left:.25em;letter-spacing:.1em}
.axis__t{margin:14px 0 9px;font-weight:700;font-size:16px}
.axis__d{font-size:14px;line-height:1.9;color:var(--ink-2);margin:0}

/* -- 定義リスト（会社概要など） -- */
.dl{border-top:1px solid var(--rule)}
.dl__r{display:grid;gap:4px;padding:clamp(16px,2.2vw,22px) 0;border-bottom:1px solid var(--rule)}
@media (min-width:640px){.dl__r{grid-template-columns:12em 1fr;gap:28px;align-items:baseline}}
.dl__k{font-size:13.5px;font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.dl__v{font-size:15.5px;line-height:1.9}

/* -- 番号つきの手順 -- */
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{position:relative;counter-increment:st;padding:0 0 clamp(26px,3.4vw,36px) 0}
@media (min-width:640px){.steps li{padding-left:74px}}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  font-family:var(--mincho);font-size:15px;color:var(--ai);letter-spacing:.06em;
  display:block;margin-bottom:8px;
}
@media (min-width:640px){
  .steps li::before{position:absolute;left:0;top:2px;margin:0}
  .steps li::after{content:"";position:absolute;left:8px;top:30px;bottom:6px;width:1px;background:var(--rule)}
  .steps li:last-child::after{display:none}
}
.steps__t{display:block;font-weight:700;font-size:17px;margin-bottom:7px}
.steps__d{display:block;font-size:14.5px;line-height:1.95;color:var(--ink-2)}

/* -- 状態のリスト（該当するかを読ませる） -- */
.checks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.checks li{
  position:relative;margin:0;padding:clamp(17px,2.2vw,21px) 0 clamp(17px,2.2vw,21px) 34px;
  border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.85;
}
.checks li::before{
  content:"";position:absolute;left:2px;top:calc(clamp(17px,2.2vw,21px) + .62em);
  width:11px;height:11px;border:1px solid var(--ai);
}
.checks li::after{
  content:"";position:absolute;left:5px;top:calc(clamp(17px,2.2vw,21px) + .78em);
  width:9px;height:5px;border-left:1.4px solid var(--ai);border-bottom:1.4px solid var(--ai);
  transform:rotate(-45deg) scale(1);transform-origin:left center;
}

/* -- 引用（代表の言葉など） -- */
.quote{position:relative;margin:0;font-family:var(--mincho);font-size:clamp(21px,2.1vw,24px);line-height:1.95;letter-spacing:.02em}
.quote::before{content:"";display:block;width:34px;height:1px;background:var(--brass);margin-bottom:clamp(20px,2.6vw,28px)}
.invert .quote::before{background:#C9A961}
.quote__by{display:block;margin-top:clamp(20px,2.6vw,28px);font-family:var(--gothic);font-size:13.5px;color:var(--ink-2);letter-spacing:.06em}

/* -- 表 -- */
.tw{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  /* 右端に影を出して、横に続いていることを示す */
  background:
    linear-gradient(to right,var(--paper) 30%,rgba(247,245,240,0)) left/28px 100% no-repeat,
    linear-gradient(to left,var(--paper) 30%,rgba(247,245,240,0)) right/28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(35,38,43,.13),transparent) left/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(35,38,43,.13),transparent) right/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.tone-2 .tw{
  background:
    linear-gradient(to right,var(--paper-2) 30%,rgba(239,236,228,0)) left/28px 100% no-repeat,
    linear-gradient(to left,var(--paper-2) 30%,rgba(239,236,228,0)) right/28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(35,38,43,.13),transparent) left/12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(35,38,43,.13),transparent) right/12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.tw:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.tb{min-width:520px;font-size:14.5px}
.tb th,.tb td{padding:17px 22px 17px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);line-height:1.85}
.tb thead th{font-size:12.5px;letter-spacing:.1em;color:var(--ink-3);font-weight:700;border-bottom-color:var(--rule-2)}
.tb th[scope="row"]{font-weight:700;white-space:nowrap;padding-right:32px}
.tb td{color:var(--ink-2)}

/* -- 対応範囲の箇条書き -- */
.spec{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--rule)}
@media (min-width:700px){.spec{grid-template-columns:repeat(2,1fr);column-gap:48px}}
.spec li{position:relative;margin:0;padding:13px 0 13px 20px;font-size:14.5px;line-height:1.8;border-bottom:1px solid var(--rule)}
.spec li::before{content:"";position:absolute;left:0;top:1.42em;width:8px;height:1px;background:var(--ai)}

/* -- 補足 -- */
.note{padding:clamp(20px,2.6vw,26px);background:var(--paper-2);border-left:2px solid var(--ai);font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.note strong{color:var(--ink);display:block;margin-bottom:8px;font-size:15px}
.invert .note{background:rgba(251,250,247,.08);border-left-color:var(--on-ai);color:var(--ink-2)}

/* -- 図版 -- */
.fig{margin:0;overflow:hidden;background:var(--paper-2)}
.fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--band img{aspect-ratio:4/3}
@media (min-width:600px){.fig--band img{aspect-ratio:16/9}}
@media (min-width:820px){.fig--band img{aspect-ratio:24/9}}
.fig--tall img{aspect-ratio:3/4}
.fig--portrait{max-width:420px}
.fig--portrait img{aspect-ratio:3/4;object-position:center 22%}
/* 代表の名前と肩書 */
.who{display:grid;gap:6px;margin-bottom:clamp(20px,2.6vw,28px)}
.who__r{font-size:12.5px;letter-spacing:.09em;color:var(--brass);font-weight:700}
.who__n{font-family:var(--mincho);font-weight:600;font-size:clamp(21px,2.4vw,26px);letter-spacing:.06em}
.who__n small{font-family:var(--gothic);font-size:12px;letter-spacing:.1em;color:var(--ink-3);margin-left:12px;font-weight:400}
.fig figcaption{margin-top:12px;font-size:12.5px;color:var(--ink-3)}

/* -- 横長の帯。3本柱を縦に積み、写真を左右交互に置く -- */
.pillar{border-top:1px solid var(--rule)}
.pillar__i{display:grid;gap:0;border-bottom:1px solid var(--rule)}
@media (min-width:820px){
  .pillar__i{grid-template-columns:5fr 7fr;align-items:stretch}
  /* 写真を右に送るときは列幅も入れ替える（写真だけ大きくならないように） */
  .pillar__i:nth-child(even){grid-template-columns:7fr 5fr}
  .pillar__i:nth-child(even) .pillar__ph{order:2}
}
.pillar__ph{overflow:hidden;background:var(--paper-2)}
.pillar__ph img{width:100%;height:100%;min-height:200px;object-fit:cover}
@media (min-width:820px){.pillar__ph img{min-height:270px}}
.pillar__b{padding:clamp(26px,3.4vw,44px) 0}
@media (max-width:819px){
  /* 写真は画面幅いっぱいに出し、文章だけ内側に置く */
  .pillar{margin-inline:calc(var(--gut) * -1)}
  .pillar__b{padding-inline:var(--gut)}
  .pillar__i{position:relative}
  .pillar__ph{position:relative}
  .pillar__ph img{min-height:220px}
  /* 写真の下端を暗く落として、その上に見出しを置く */
  .pillar__ph::after{
    content:"";position:absolute;inset:auto 0 0 0;height:72%;
    background:linear-gradient(to bottom,rgba(15,27,51,0) 0%,rgba(15,27,51,.42) 42%,rgba(15,27,51,.84) 100%);
  }
  .pillar__cap{
    position:absolute;left:var(--gut);right:var(--gut);
    bottom:clamp(16px,4vw,22px);z-index:2;color:#F7F5F0;
  }
  .pillar__cap .pillar__n{color:#DCC28A;margin-bottom:6px}
  .pillar__cap .pillar__t{margin:0;color:#F7F5F0}
  .pillar__b>.pillar__n,.pillar__b>.pillar__t{display:none}
  .pillar__b{padding-top:clamp(20px,4vw,26px)}
}
@media (min-width:820px){.pillar__cap{display:none}}
@media (min-width:820px){
  /* 写真が左のときは左に、写真が右のときは右に余白を寄せる */
  .pillar__b{padding:clamp(30px,3.4vw,44px) 0}
  .pillar__i:nth-child(odd) .pillar__b{padding-left:clamp(28px,3.6vw,56px)}
  .pillar__i:nth-child(even) .pillar__b{padding-right:clamp(28px,3.6vw,56px)}
}
.pillar__n{font-family:var(--mincho);font-size:14px;color:var(--brass);letter-spacing:.06em;display:block;margin-bottom:10px}
.pillar__t{margin-bottom:12px}
.pillar__d{font-size:14.5px;line-height:1.95;color:var(--ink-2);margin-bottom:16px;max-width:34em}

/* -- 基準と、できないこと -- */
.stand{display:grid;gap:0;border-top:1px solid var(--rule)}
.stand li{margin:0;padding:clamp(18px,2.2vw,22px) 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.85}
.stand{list-style:none;padding-left:0}
.stand li::before{content:"—";color:var(--brass);margin-right:14px}
.invert .stand li::before{color:#C9A961}

/* -- CTA -- */
.cta{position:relative}
.cta__in{max-width:40em}
.cta__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.4vw,36px)}

/* -- パンくず -- */
.crumb{border-top:1px solid var(--rule);padding-block:18px}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font-size:12px;color:var(--ink-3)}
.crumb li{margin:0;display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:"／";opacity:.55}
.crumb a:hover{color:var(--ai)}

/* -- 記事本文 -- */
.prose{max-width:38em}
.prose h2{font-family:var(--mincho);font-weight:600;font-size:clamp(20px,2.6vw,27px);line-height:1.6;margin:2.6em 0 1em;padding-top:.9em;border-top:1px solid var(--rule)}
.prose h3{font-weight:700;font-size:clamp(16.5px,1.9vw,18.5px);margin:2.2em 0 .8em}
.prose h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose p,.prose li{font-size:16px;line-height:2.05}
.prose a{color:var(--ai);border-bottom:1px solid currentColor}

/* -- よくある質問 -- */
.faq{border-top:1px solid var(--rule)}
.faq__i{border-bottom:1px solid var(--rule)}
.faq__q{
  display:flex;align-items:flex-start;gap:18px;width:100%;
  padding:clamp(21px,2.6vw,26px) 0;background:none;border:0;cursor:pointer;
  font-family:var(--gothic);font-size:16px;font-weight:700;line-height:1.75;color:var(--ink);
  text-align:left;letter-spacing:.02em;
}
.faq__q::before{content:"Q";flex:none;font-family:var(--mincho);font-size:14px;color:var(--ai);padding-top:5px}
.faq__ic{margin-left:auto;flex:none;position:relative;width:13px;height:13px;margin-top:8px}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:0;top:6px;width:13px;height:1px;background:var(--ai);transition:transform .4s var(--ease-out)}
.faq__ic::after{transform:rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__ic::after{transform:rotate(0)}
.faq__a{padding:0 0 clamp(22px,2.8vw,28px) 32px}
.faq__a p{font-size:15px;line-height:2;color:var(--ink-2)}
.js .faq__a{display:none}
.js .faq__a.is-open{display:block}
/* JSが動かないときは全部開いて見せる（HTML側には hidden を付けていない） */
html:not(.js) .faq__ic{display:none}
html:not(.js) .faq__q{cursor:default}

/* ==========================================================================
   08. forms
   ========================================================================== */
.form{display:grid;gap:clamp(24px,3vw,32px);max-width:42em}
.f{display:grid;gap:9px}
.f__l{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700}
.req{font-size:10.5px;letter-spacing:.1em;padding:3px 8px;background:var(--ai);color:var(--on-ai)}
.req--o{background:transparent;border:1px solid var(--rule-2);color:var(--ink-3)}
.f__h{font-size:13px;color:var(--ink-3);line-height:1.8}
.inp,.ta,.sel{
  width:100%;font-family:inherit;font-size:16px;line-height:1.7;color:var(--ink);
  background:#fff;border:1px solid var(--rule-2);padding:15px 16px;
  transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none;border-radius:0;
}
.ta{min-height:190px;resize:vertical}
.sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23565C64' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.inp:focus,.ta:focus,.sel:focus{outline:none;border-color:var(--ai);box-shadow:0 0 0 3px var(--ai-pale)}
.inp[aria-invalid="true"],.ta[aria-invalid="true"],.sel[aria-invalid="true"]{border-color:#B3261E}
.f__e{font-size:13px;color:#B3261E;line-height:1.7}
.f__e:empty{display:none}
.radios{display:grid;gap:10px}
@media (min-width:640px){.radios{grid-template-columns:repeat(2,1fr)}}
.radio{display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--rule-2);background:#fff;cursor:pointer;font-size:15px;transition:border-color .3s,background .3s}
.radio input{-webkit-appearance:none;appearance:none;margin:0;flex:none;width:17px;height:17px;border:1px solid var(--rule-2);border-radius:50%;transition:box-shadow .3s,border-color .3s}
.radio input:checked{border-color:var(--ai);box-shadow:inset 0 0 0 4px var(--ai)}
.radio:has(input:checked){border-color:var(--ai);background:var(--ai-pale)}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.85;cursor:pointer}
.check input{-webkit-appearance:none;appearance:none;margin:3px 0 0;flex:none;width:19px;height:19px;border:1px solid var(--rule-2);background:#fff;position:relative;transition:background .25s,border-color .25s}
.check input:checked{background:var(--ai);border-color:var(--ai)}
.check input:checked::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border-right:2px solid var(--on-ai);border-bottom:2px solid var(--on-ai);transform:rotate(42deg)}
.check a{color:var(--ai);border-bottom:1px solid currentColor}
.form__f{display:grid;gap:16px;justify-items:start}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formmsg{padding:16px 20px;font-size:14.5px;line-height:1.85;background:#FBEFEE;border:1px solid #E4B5B1;color:#8C1D18;margin:0}

/* ==========================================================================
   09. footer
   ========================================================================== */
.ft{border-top:1px solid var(--rule);background:var(--paper-2);padding-block:clamp(48px,7vw,76px) 26px}
.ft__t{display:grid;gap:clamp(34px,5vw,56px)}
@media (min-width:880px){.ft__t{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}}
.ft__nav{display:grid;gap:30px}
@media (min-width:560px){.ft__nav{grid-template-columns:repeat(3,1fr)}}
.ft__h{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink-3);margin-bottom:14px}
.ft__l{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ft__l li{margin:0}
.ft__l a{font-size:14px;color:var(--ink-2);transition:color .3s}
.ft__l a:hover{color:var(--ai)}
.ft__b{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-top:clamp(38px,5vw,54px);padding-top:22px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3)}
.ft__b a:hover{color:var(--ai)}
.ft__c{margin-left:auto;letter-spacing:.06em}
@media (max-width:640px){.ft__c{margin-left:0}}

/* ==========================================================================
   10. motion
   --------------------------------------------------------------------------
   既定は「演出なしで最終状態」。JSが動いたときだけ足す。
   落ち着いた動きに寄せる。派手な動きは使わない。
   ========================================================================== */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}

.js .rvs>*{opacity:0;transform:translateY(13px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rvs.in>*{opacity:1;transform:none}
.js .rvs.in>*:nth-child(2){transition-delay:90ms}
.js .rvs.in>*:nth-child(3){transition-delay:180ms}
.js .rvs.in>*:nth-child(4){transition-delay:270ms}
.js .rvs.in>*:nth-child(5){transition-delay:360ms}

/* 罫線が引かれる */
.js .rule-in{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-out)}
.js .rule-in.in{transform:scaleX(1)}

/* 写真は下から現れる。拡大しすぎない */
.js .fig-in{clip-path:inset(14% 0 0 0);transition:clip-path 1.2s var(--ease-out)}
.js .fig-in.in{clip-path:inset(0 0 0 0)}
.js .fig-in img{transform:scale(1.06);transition:transform 1.6s var(--ease-out)}
.js .fig-in.in img{transform:scale(1)}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vo .2s ease both}
::view-transition-new(root){animation:vi .3s var(--ease-out) both}
@keyframes vo{to{opacity:0}}
@keyframes vi{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv,.js .rvs>*{opacity:1!important;transform:none!important}
  .js .rule-in{transform:none!important}
  .js .fig-in{clip-path:none!important}
  .js .fig-in img{transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ==========================================================================
   11. print
   ========================================================================== */
@media print{
  html,body{background:#fff!important;color:#000!important}
  .hd,.burger,.gnav,.cta,.skip,.hero__media{display:none!important}
  .invert{background:#fff!important;color:#000!important}
  a{color:#000!important;text-decoration:underline}
  .s,.s--lg{padding-block:14px!important}
  .faq__a{display:block!important}
}

/* ==========================================================================
   12. スマートフォン向けの追補
   --------------------------------------------------------------------------
   1カラムで単調になりやすいので、見出しと余白のリズム、
   写真の見せ方、常時の相談導線でメリハリをつける。
   ========================================================================== */

/* -- 画面下に出る相談導線。ヒーローを過ぎてから、フッターの手前まで -- */
.fixcta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--ai);color:var(--on-ai);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);
  transition:transform .45s var(--ease-out);
  box-shadow:0 -6px 24px -14px rgba(15,27,51,.5);
}
.fixcta[data-show="true"]{transform:translateY(0)}
.fixcta__a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:44px}
.fixcta__t{font-size:12.5px;letter-spacing:.02em;color:#C3D2DD}
.fixcta__b{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  font-size:14.5px;font-weight:700;letter-spacing:.03em;
}
@media (min-width:900px){.fixcta{display:none}}
@media (prefers-reduced-motion:reduce){.fixcta{transition:none}}

@media (max-width:899px){
  /* 固定バーの分だけ、最後のセクションに余白を足す */
  .ft{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* セクションの頭。ラベルの線を長くして、区切りをはっきりさせる */
  .tag{font-size:12px;letter-spacing:.1em;gap:10px}
  .tag::before{width:26px}

  /* 読み物の1カラムは左の余白を取らない */
  .indent{margin-left:0}

  /* 引用は明朝が効くので、少し大きく */
  .quote{line-height:1.9}
  .quote::before{width:30px;margin-bottom:18px}

  /* 手順。番号を左に置いたまま、行間を締める */
  .steps li{padding-bottom:26px}
  .steps li::before{font-size:14px;margin-bottom:6px}

  /* 対応範囲の箇条書き。2列にならないぶん行間で見せる */
  .spec li{padding-block:12px}

  /* 定義リスト。項目名を小さく上に置く */
  .dl__r{gap:3px}
  .dl__k{font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
  .dl__v{font-size:15px}

  /* 表。1画面に収まらないので、行の高さを詰める */
  .tb th,.tb td{padding:14px 18px 14px 0}

  /* フッター。3列だと窮屈なので2列に */
  .ft__nav{grid-template-columns:repeat(2,1fr);gap:26px}
  .ft__t{gap:32px}
}

@media (max-width:600px){
  /* ボタンは横並びにせず、押しやすい幅で縦に積む */
  .hero__act,.cta__act{display:grid;grid-template-columns:1fr;gap:11px}
  .hero__act .btn,.cta__act .btn,.fm__submit .btn,button.btn[type="submit"]{width:100%}
  .btn{min-height:54px;font-size:14.5px}

  /* 引用の署名を1行に */
  .quote__by{margin-top:18px}

  /* フッターの3列は縦積みに */
  .ft__nav{grid-template-columns:1fr;gap:24px}
}

@media (max-width:359px){
  .fixcta__t{display:none}
  .fixcta__a{justify-content:center}
}

/* ==========================================================================
   13. 「よろずや」改訂で追加した部品
   ========================================================================== */

/* なぜそれが言えるのか。実績数値の代わりに経験で裏づける枠 */
.why{
  border-left:3px solid var(--brass);
  padding:clamp(20px,3vw,28px) 0 clamp(20px,3vw,28px) clamp(18px,3vw,28px);
  margin-top:clamp(26px,3.4vw,38px);
}
.why__h{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--brass);margin-bottom:14px}
.why__l{list-style:none;display:grid;gap:11px}
.why__l li{
  position:relative;padding-left:1.15em;font-size:14.5px;line-height:1.9;color:var(--ink-2);
}
.why__l li::before{
  content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--rule-2);
}
.why__n{margin-top:15px;font-size:12.5px;line-height:1.8;color:var(--ink-3)}

/* 通ってきた場面の一覧 */
.exp{list-style:none;counter-reset:none;border-top:1px solid var(--rule)}
.exp__i{
  display:grid;grid-template-columns:clamp(52px,7vw,84px) minmax(0,1fr);
  gap:0 clamp(12px,2vw,24px);align-items:start;
  padding:clamp(24px,3.4vw,36px) 0;border-bottom:1px solid var(--rule);
}
.exp__n{
  font-family:var(--mincho);font-size:clamp(24px,4.4vw,34px);line-height:1;
  color:var(--brass);letter-spacing:.02em;padding-top:.12em;
}
.exp__t{font-size:clamp(16px,2.1vw,19px);font-weight:700;line-height:1.6;margin-bottom:9px}
.exp__d{font-size:14.5px;line-height:1.95;color:var(--ink-2);max-width:40em}

/* ページ冒頭の自己完結した要約 */
.lede{max-width:44em}

/* 対応できる媒体・モールの並び */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;list-style:none}
.chips li{
  font-size:13px;line-height:1;padding:9px 13px;border:1px solid var(--rule-2);
  color:var(--ink-2);background:var(--paper);
}
.invert .chips li{border-color:rgba(247,245,240,.4);color:#E3E8EF;background:transparent}

/* 「できる／できない」を対にして見せる */
.able{display:grid;gap:clamp(24px,3vw,40px)}
@media (min-width:820px){.able{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}}
.able__c>h3{font-size:clamp(17px,2.2vw,20px);font-weight:700;margin-bottom:16px;padding-bottom:12px;
  border-bottom:2px solid var(--ink)}
.able__c--no>h3{border-bottom-color:var(--rule-2);color:var(--ink-2)}
.able__c ul{list-style:none;display:grid;gap:12px}
.able__c li{font-size:14.5px;line-height:1.9;color:var(--ink-2);padding-left:1.1em;position:relative}
.able__c li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--rule-2)}

/* 根拠の枠。形はページごとに変える（同じ枠が並ぶとスペック表に見えるため） */
.why p{font-size:14.5px;line-height:1.95;color:var(--ink-2);max-width:40em}
.why p + p{margin-top:.9em}
.why--bare{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:clamp(20px,3vw,26px)}
.why--lead{border-left:none;padding-left:0}
.why--lead p.lead{color:var(--ink);max-width:36em}

/* reCAPTCHA：右下のバッジは隠し、代わりにフォーム内へ規定の文言を出す */
.grecaptcha-badge{visibility:hidden}
.rc-note{margin-top:10px;color:var(--ink-3)}
.rc-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
button[aria-busy="true"]{opacity:.7;cursor:progress}

/* ページ冒頭の見出しと導入文は、JSを待たずに見せる（LCPを遅らせないため）。
   ずらしながら出る動きだけ残し、透明にはしない */
.js .phd .rvs>*,.js .hero .rvs>*{opacity:1}