/* PLATIN 下層ページ共通（site.css の上に重ねる） */
.crumb{font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.sub-hero{padding-block:clamp(24px,4vw,56px) clamp(48px,6vw,96px);position:relative;overflow:hidden}
.sub-hero .w{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:center}
.sub-hero .txt{grid-column:1/7;position:relative;z-index:2;container-type:inline-size}
.sub-hero .label{font-size:clamp(13px,1.1vw,15px);font-weight:700;letter-spacing:.08em;color:var(--gold);margin:0 0 14px}
/* h1 の各行は折り返さない（site.css の h1 .l）。列の幅 ÷ いちばん長い行の字幅(em) を上限にして、写真に重ねない・画面の端で切らない。
   長い行のあるページは h1 に style="--fit:行の字幅+3%" を書く（例: 事業内容 11.76em → 12.1） */
.sub-hero h1{font-size:clamp(30px,4.1vw,68px);font-size:min(clamp(30px,4.1vw,68px),100cqi / var(--fit,10.1));line-height:1.14;letter-spacing:-.02em;grid-column:auto;grid-row:auto}
.sub-hero .lead{margin:22px 0 28px;font-size:clamp(15.5px,1.25vw,18px);max-width:31em}
.sub-hero .vis{grid-column:7/13;position:relative;border-radius:32px;overflow:hidden;aspect-ratio:16/10;background:var(--plat-2)}
.sub-hero .vis img{width:100%;height:100%;object-fit:cover}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards > div,.cards > a{background:var(--white);border-radius:22px;padding:26px;text-decoration:none;display:block}
.cards h3{font-size:clamp(18px,1.6vw,22px);font-weight:900;margin-bottom:8px}
.cards p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.8}
.cards small{display:block;font-size:12px;font-weight:700;color:var(--gold);margin-bottom:6px}
.checks{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--graphite);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.checks li{display:grid;grid-template-columns:2em 1fr;padding:16px 0;border-bottom:1px solid var(--steel)}
.checks li::before{content:"";width:14px;height:14px;border:1.5px solid var(--graphite);border-radius:4px;margin-top:6px}
.checks b{display:block}
.checks span{color:var(--ink-2);font-size:14px}
.roles{width:100%;border-collapse:collapse;font-size:14.5px}
.roles th,.roles td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--steel)}
.roles thead th{font-size:12px;font-weight:500;color:var(--ink-2);border-bottom:1.5px solid var(--graphite);padding-top:0}
.roles tbody th{width:13em;font-weight:700}
.note-box{border-left:3px solid var(--gold);background:var(--white);padding:18px 22px;border-radius:0 16px 16px 0;font-size:14.5px}
.note-box b{display:block;margin-bottom:4px}
.note-box p{margin:0;color:var(--ink-2)}
.faq{border-top:1.5px solid var(--graphite)}
.faq details{border-bottom:1px solid var(--steel)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:2.4em 1fr 2em;align-items:center;padding:20px 0;font-weight:700;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--lat);color:var(--gold);font-weight:600}
.faq summary::after{content:"";width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);justify-self:end;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details p{margin:0 0 22px 2.4em;color:var(--ink-2);max-width:44em}
.endcta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;background:var(--graphite);color:var(--on-dark);border-radius:28px;padding:clamp(26px,3.4vw,48px)}
.endcta h2{grid-column:auto;color:var(--on-dark);font-size:clamp(24px,2.4vw,34px)}
.endcta p{margin:10px 0 0;color:var(--on-dark-2);font-size:14.5px}
.endcta .btn{background:var(--on-dark);color:var(--graphite);border-color:var(--on-dark)}
.endcta .btn i{background:var(--gold)}
.src{font-size:13px;color:var(--ink-2)}
.src a{color:var(--ink)}
@media (max-width:900px){
  .sub-hero .w{display:block}.sub-hero .vis{margin-top:32px}
  .cards.c4{grid-template-columns:1fr 1fr}
  .checks{grid-template-columns:1fr}
  .endcta{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cards,.cards.c4{grid-template-columns:1fr}
  .roles thead{display:none}
  .roles,.roles tbody,.roles tr,.roles th,.roles td{display:block;width:auto}
  .roles tr{border-bottom:1px solid var(--steel);padding:12px 0}
  .roles th,.roles td{border:0;padding:2px 0}
  .roles td::before{content:attr(data-h)"：";color:var(--ink-2);font-size:12.5px}
  .faq summary{font-size:15.5px}
}
/* 輸出: 画像の下に相談の進み方（3段） */
.steps3{grid-column:7/13;list-style:none;margin:-12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;counter-reset:s}
.steps3 li{counter-increment:s;font-size:14px;font-weight:700;line-height:1.5;padding:10px 12px;border-top:2px solid var(--gold);background:var(--white);border-radius:0 0 8px 8px}
.steps3 li::before{content:counter(s);display:block;font-family:var(--lat);font-size:12.5px;color:var(--gold);margin-bottom:2px}
@media (max-width:900px){.steps3{margin-top:12px}}
@media (max-width:700px){.steps3{grid-template-columns:1fr}}
.steps3 li{position:relative}
.steps3 li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-9px;width:10px;height:2px;background:var(--gold)}
@media (max-width:700px){.steps3 li:not(:last-child)::after{top:auto;bottom:-9px;right:auto;left:22px;width:2px;height:10px}}