/* 特設サイト（2026-11-06、一から作り直し）
   FV：website-hero-builder business/tax-advisory（深い紺 #0B1A3A・紺 #14284F・ゴールド #B38E58・白）
   段取り：slide-builder website-renewal-08（シェブロン5段＋担当レーン2本＋結論のバー）
   料金とサービス：slide-builder website-renewal-10（項目列＋列の比較表、主数字の列だけ強調、前提の注記表）
   入口：website-hero-builder combine-hp-lp（TOPは概要と複数の入口） */
:root{
  --navy-d:#0B1A3A;--navy:#14284F;--gold:#B38E58;--gold-d:#9a7642;--gold-l:#F3ECE0;
  --ink:#1F1F1F;--sub:#555;--line:#DDDAD6;--paper:#FAF9F7;--mist:#EAEEF4;
  --serif:"Shippori Mincho",serif;--sans:"Noto Sans JP",system-ui,sans-serif;
  --max:1240px;--g:clamp(20px,4vw,56px);--sec:clamp(72px,9vw,128px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;word-break:auto-phrase;line-break:strict}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2{font-feature-settings:"palt";word-break:auto-phrase}
.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:760px){.br-pc{display:none}}
@media (min-width:761px){.br-sp{display:none}}
ol.steps-sp{padding:0;list-style:none;margin-top:0}

/* ボタン：tax-advisory の金の塗り／金の細枠 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 28px;border:1px solid transparent;font-weight:700;letter-spacing:.04em;text-decoration:none;transition:background .2s,color .2s}
.btn::after{content:"→"}
.btn--gold{background:var(--gold);color:#fff}
.btn--frame{border-color:var(--gold);color:#fff}
.btn--ink{background:var(--navy-d);color:#fff}
.btn--sm{min-height:40px;padding:6px 18px;font-size:13px}
.btn--sm::after{content:none}
@media (hover:hover){.btn--gold:hover{background:var(--gold-d)}.btn--frame:hover{background:rgba(179,142,88,.16)}.btn--ink:hover{background:var(--navy)}}

/* ヘッダー：FVの紺に重ねる */
.hd{position:absolute;inset:0 0 auto;z-index:20}
.hd__in{max-width:1440px;margin:0 auto;padding:18px var(--g);display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:#fff}
.brand img{filter:invert(1);width:34px;height:auto}
.brand span{font-weight:700;font-size:15px;line-height:1.3}
.brand small{display:block;font-weight:400;font-size:11px;opacity:.75}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;color:#fff}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{color:var(--gold)}
.nav .btn{background:var(--gold);color:#fff}

/* ===== FV ===== */
.fv{position:relative;background:var(--navy-d);color:#fff;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto;min-height:max(100svh,720px)}
.fv__text{grid-column:1;grid-row:1;position:relative;z-index:1;padding:clamp(120px,14vh,160px) 0 clamp(32px,4vh,48px) max(var(--g),calc((100vw - 1440px)/2 + var(--g)));display:flex;flex-direction:column;justify-content:center;gap:22px}
.fv__pre{font-size:15px;letter-spacing:.24em;color:var(--gold)}
.fv__h{font-family:var(--serif);font-weight:600;font-size:clamp(36px,3.3vw + 6px,62px);line-height:1.42;letter-spacing:.03em}
.fv__rule{width:56px;height:1px;background:var(--gold)}
.fv__lead{font-size:15px;line-height:1.95;color:#dfe4ee}
.fv__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
/* 金線アイコン4列（例：ビル／芽／電卓／人と吹き出し → 法人／オンライン／料金／段取り） */
.fv__icons{grid-column:1/-1;grid-row:2;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);max-width:1440px;width:100%;margin:0 auto;padding:0 var(--g) clamp(28px,4vh,44px)}
.fv__icons li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:0 clamp(12px,1.6vw,28px);border-left:1px solid rgba(179,142,88,.55)}
.fv__icons li:first-child{border-left:0;padding-left:0}
.fv__icons svg{grid-row:1/3;width:38px;height:38px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fv__icons b{font-weight:700;font-size:15px}
.fv__icons small{font-size:12px;color:#b9c2d3}
/* 最下段：金の上下罫線の行（例のNEWS行 → 代理店への入口） */
.fv__row{grid-column:1/-1;grid-row:3;position:relative;z-index:1;display:flex;align-items:center;gap:20px;max-width:calc(1440px - var(--g)*2);width:calc(100% - var(--g)*2);margin:0 auto clamp(20px,3vh,32px);padding:14px 4px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);text-decoration:none;font-size:14px}
.fv__row span:first-child{color:var(--gold);font-weight:700;letter-spacing:.06em}
.fv__row i{margin-left:auto;font-style:normal;color:var(--gold);transition:transform .2s}
@media (hover:hover){.fv__row:hover i{transform:translateX(6px)}}
/* 入場：文字は静かに、写真はゆっくり寄る（一度だけ） */
.js .fv__text>*{opacity:0;transform:translateY(14px);animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
.js .fv__text>*:nth-child(2){animation-delay:.12s}.js .fv__text>*:nth-child(3){animation-delay:.3s}.js .fv__text>*:nth-child(4){animation-delay:.38s}.js .fv__text>*:nth-child(5){animation-delay:.46s}
.js .fv__photo{animation:zoom 2.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes up{to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.06)}to{transform:none}}

/* ===== 見出し共通 ===== */
.kicker{font-size:14px;letter-spacing:.24em;color:var(--gold-d);font-weight:700}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,1.8vw + 14px,42px);line-height:1.5;color:var(--navy-d);margin-top:10px}

/* ===== 段取り：シェブロン＋担当レーン ===== */
.flow{padding:var(--sec) var(--g)}
.flow__head,.price__head{max-width:var(--max);margin:0 auto clamp(32px,4vw,56px)}
.lane{max-width:var(--max);margin:0 auto;display:grid;gap:10px}
.lane__row{display:grid;grid-template-columns:110px repeat(6,minmax(0,1fr));gap:0;align-items:stretch}
.lane__label{display:flex;align-items:center;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--navy-d)}
.chev{position:relative;display:grid;justify-items:center;align-content:center;gap:6px;min-height:104px;padding:14px 26px 14px 34px;background:var(--navy);color:#fff;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%);margin-right:-14px;text-align:center}
.lane__steps .chev:nth-child(2){clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);padding-left:22px}
.chev i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);font-style:normal;font-weight:700;font-size:14px}
.chev b{font-family:var(--serif);font-size:clamp(15px,.5vw + 11px,18px);line-height:1.4}
.chev--due{background:var(--gold);margin-right:0}
.chev--due i{background:var(--navy-d)}
.lane--you,.lane--us{padding:14px 0;border-radius:2px}
.lane--you{background:var(--gold-l)}
.lane--us{background:var(--mist)}
.lane--you .lane__label,.lane--us .lane__label{padding-left:18px}
.box{position:relative;margin:0 8px;padding:14px 12px;background:#fff;border:1px solid var(--line);font-size:14px;line-height:1.6;font-weight:500;display:flex;align-items:center}
.box+.box::before{content:"";position:absolute;left:-14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;border:2px solid var(--gold);background:#fff}
.lane--us .box+.box::before{border-color:var(--navy)}
.flow__bar{max-width:var(--max);margin:18px auto 0;padding:18px 24px;background:#fff;border:1px solid var(--line);font-family:var(--serif);font-weight:700;font-size:clamp(16px,.6vw + 12px,20px);text-align:center;color:var(--navy-d)}
.js .lane .box,.js .lane .chev{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease}
.js .lane.in .box,.js .lane.in .chev{opacity:1;transform:none}

/* ===== 料金とサービス：比較表 ===== */
.price{padding:0 var(--g) var(--sec)}
.ptable{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr repeat(4,1.3fr);gap:10px}
.ptable__col{display:grid;grid-template-rows:auto 112px auto auto;background:#fff;border:1px solid var(--line)}
.ptable__col--label{background:#F2F0ED}
.ph{padding:18px 14px;font-family:var(--serif);font-weight:700;font-size:clamp(16px,.5vw + 12px,20px);text-align:center;color:var(--navy-d);border-bottom:1px solid var(--line)}
.ptable__col--label .ph{text-align:left}
.pc{display:flex;align-items:center;justify-content:center;padding:16px 14px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65;text-align:center}
.pc:last-child{border-bottom:0}
.ptable__col--label .pc{justify-content:flex-start;font-weight:700;text-align:left}
.pc--num{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--navy-d);gap:2px;align-items:baseline}
.pc--num b{font-size:clamp(44px,2.4vw + 18px,64px);line-height:1}
.pc--est{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--sub)}
.pc a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}
.ptable__col--main{border:2px solid var(--gold);background:#FFFCF6;position:relative}
.ptable__col--main .ph{background:var(--gold);color:#fff;border-bottom-color:var(--gold)}
.ptable__col--main .pc--num{color:var(--gold-d)}
.pnote{max-width:var(--max);margin:14px auto 0;display:grid;border:1px solid var(--line);background:#fff}
.pnote div{display:grid;grid-template-columns:110px 1fr;border-top:1px solid var(--line)}
.pnote div:first-child{border-top:0}
.pnote dt{padding:12px 16px;background:#F2F0ED;font-weight:700;font-size:14px}
.pnote dd{padding:12px 16px;font-size:14px}

/* ===== 入口：左右2枚 ===== */
.entry{display:grid;grid-template-columns:1fr 1fr}
.door{display:grid;align-content:center;gap:14px;min-height:clamp(320px,34vw,460px);padding:clamp(40px,6vw,96px);text-decoration:none;transition:background .25s}
.door small{font-size:14px;letter-spacing:.14em;font-weight:700}
.door strong{font-family:var(--serif);font-weight:700;font-size:clamp(30px,2.4vw + 12px,52px);line-height:1.4}
.door span{font-size:15px}
.door em{font-style:normal;font-weight:700;display:inline-flex;align-items:center;gap:12px;margin-top:8px}
.door em::after{content:"→";transition:transform .2s}
.door--you{background:var(--gold-l);color:var(--navy-d)}
.door--you small,.door--you em{color:var(--gold-d)}
.door--partner{background:var(--navy);color:#fff}
.door--partner small,.door--partner em{color:var(--gold)}
@media (hover:hover){.door--you:hover{background:#EDE3D1}.door--partner:hover{background:var(--navy-d)}.door:hover em::after{transform:translateX(6px)}}

/* ===== 最後の相談：金の全幅の帯 ===== */
.close{background:var(--gold);color:var(--navy-d);padding:clamp(64px,8vw,112px) var(--g);display:grid;justify-items:center;gap:18px;text-align:center}
.close__h{font-family:var(--serif);font-weight:700;font-size:clamp(28px,2.6vw + 12px,54px);line-height:1.4}

/* ===== フッター ===== */
.ft{background:var(--navy-d);color:#c9d0dc;font-size:14px}
.ft__in{max-width:var(--max);margin:0 auto;padding:40px var(--g);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ft__brand{display:flex;gap:14px;align-items:flex-start}
.ft__brand img{filter:invert(1);width:40px;height:auto;flex:none}
.ft__brand b{color:#fff}
.ft__c{font-size:12px}
.sticky{display:none}

/* ===== 幅ごと ===== */
@media (max-width:1100px){
  .nav a:not(.btn){display:none}
  .lane__row{grid-template-columns:84px repeat(6,minmax(0,1fr))}
  .chev{padding-left:28px;padding-right:20px}
  .ptable{grid-template-columns:repeat(2,1fr)}
  .ptable__col--label{display:none}
  .ptable__col{grid-template-rows:auto 100px auto auto}
}
@media (max-width:900px){
  .fv{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;min-height:0}
  .fv__photo{grid-column:1;grid-row:2;margin:0;height:clamp(220px,52vw,380px)}
  .fv__photo::before{background:linear-gradient(180deg,var(--navy-d) 0%,rgba(11,26,58,0) 35%,rgba(11,26,58,0) 70%,var(--navy-d) 100%)}
  .fv__text{grid-row:1;padding:104px var(--g) 28px}
  .fv__icons{grid-row:3;grid-template-columns:1fr 1fr;row-gap:18px;padding-top:22px}
  .fv__icons li:nth-child(3){border-left:0;padding-left:0}
  .fv__row{grid-row:4}
  /* SPのレーン：工程ごとに担当をまとめる（slide-web-adapter の変換ガイド） */
  .lane{gap:0}
  .lane__row{display:none}
  .lane__steps{display:none}
}
@media (max-width:760px){
  body{font-size:15px}
  .hd__in{padding:14px 18px}
  .nav .btn{display:none}
  .fv__text{padding:92px 20px 24px;gap:16px}
  .fv__h{font-size:clamp(28px,7.6vw,36px);line-height:1.5}
  .fv__lead{font-size:14px}
  .fv__cta .btn{flex:1 1 100%}
  .fv__icons{padding:18px 20px 22px;column-gap:0}
  .fv__icons li{padding:0 0 0 12px;column-gap:10px}
  .fv__icons svg{width:30px;height:30px}
  .fv__icons b{font-size:13px}
  .fv__icons small{font-size:11px;line-height:1.5}
  .fv__row{width:calc(100% - 40px);font-size:13px;gap:12px;flex-wrap:wrap}
  .fv__row span:nth-child(2){order:3;flex-basis:100%}
  .ptable{grid-template-columns:1fr}
  .ptable__col{grid-template-rows:auto auto auto auto}
  .pc--num{padding:18px 14px}
  .pnote div{grid-template-columns:72px 1fr}
  .entry{grid-template-columns:1fr}
  .door{min-height:0;padding:48px 22px}
  .sticky{display:flex;position:fixed;left:12px;right:12px;bottom:10px;z-index:40;justify-content:center;align-items:center;min-height:54px;background:var(--gold);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(11,26,58,.3);transition:transform .3s}
  .sticky.is-hidden{transform:translateY(160%)}
}
/* SP用の段取り（工程ごとのまとまり） */
.steps-sp{display:none}
@media (max-width:900px){
  .steps-sp{display:grid;gap:12px;max-width:620px;margin:0 auto}
  .stp{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:18px 16px;background:#fff;border:1px solid var(--line)}
  .stp i{grid-row:1/4;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:700}
  .stp--due i{background:var(--gold)}
  .stp b{font-family:var(--serif);font-size:19px;color:var(--navy-d)}
  .stp p{font-size:14px;line-height:1.65}
  .stp p span{display:inline-block;min-width:4.5em;font-weight:700;font-size:12px;color:var(--gold-d)}
  .stp p+p span{color:var(--navy)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .fv__text>*,.js .lane .box,.js .lane .chev{opacity:1;transform:none}html{scroll-behavior:auto}}
/* ===== 2026-11-06 追記：資料に合わせたセクションと下層ページ（site.css の後に読む） ===== */
.sec{padding:var(--sec) var(--g)}
.sec__head{max-width:var(--max);margin:0 auto clamp(32px,4vw,56px)}
.sec__lead{margin-top:14px;color:var(--sub)}
.flow.sec{padding-top:0}

/* 急ぎの状況（参考サイト「こんなお急ぎの状況」）：引用の一覧 */
.urgent__list{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:14px}
.urgent__list li{display:grid;gap:10px;align-content:start;padding:clamp(20px,2vw,28px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy)}
.urgent__list q{font-family:var(--serif);font-weight:700;font-size:clamp(18px,.6vw + 13px,22px);line-height:1.6;color:var(--navy-d)}
.urgent__list q::before{content:"「"}.urgent__list q::after{content:"」"}
.tag{justify-self:start;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gold-d);border:1px solid var(--gold);padding:2px 10px}
.callout{max-width:var(--max);margin:18px auto 0;padding:18px 22px;background:var(--gold-l);border-left:4px solid var(--gold);font-weight:500}
.callout a{display:inline-block;margin-left:8px;color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}

/* 制作例の予告と、制作例の画像（生成待ちの間は案の名前を出す） */
.wteaser{background:var(--mist)}
.wteaser__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.wteaser__grid a{display:grid;gap:10px;text-decoration:none;font-size:15px;font-weight:500}
.wteaser__grid b,.ours__grid b{color:var(--gold-d);margin-right:10px;font-family:var(--serif)}
.shot{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--navy) center/cover no-repeat;border:1px solid var(--line);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.shot.is-pending{background:repeating-linear-gradient(135deg,#1b2f58 0 14px,#17294d 14px 28px)}
.shot.is-pending::after{content:attr(data-pending);position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:#d9c6a5;font-size:13px;font-weight:700;letter-spacing:.06em;text-align:center}
.shot--btn{padding:0;cursor:zoom-in}
@media (hover:hover){.wteaser__grid a:hover .shot,.shot--btn:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(11,26,58,.18)}}
.more{max-width:var(--max);margin:24px auto 0;text-align:right}
.more a{font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

/* 段取りの「AI」と「人」の箱 */
.box--wait{visibility:hidden}
.box--ai{border-color:var(--navy);color:var(--navy-d)}
.box--human{border:2px solid var(--gold);font-weight:700}

/* FAQ */
.faq{background:#fff}
.faq__list{max-width:900px;margin:0 auto;display:grid;gap:10px}
.faq details{border:1px solid var(--line);background:var(--paper)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 20px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font-family:var(--serif);color:var(--gold-d);font-size:20px}
.faq summary::after{content:"+";font-size:22px;color:var(--navy);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 20px 52px;color:var(--sub)}
.faq details p a{color:var(--navy);font-weight:700}

/* 運営会社 */
.company__in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.company__dl{display:grid;border-top:1px solid var(--line)}
.company__dl div{display:grid;grid-template-columns:120px 1fr;padding:14px 0;border-bottom:1px solid var(--line)}
.company__dl dt{font-weight:700;color:var(--navy-d)}
.company__dl a{color:var(--navy);font-weight:700}

/* フッターのメニュー */
.ft__nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px}
.ft__nav a{text-decoration:none;color:#e3e8f1}

/* 下層ページのFV（combine-hp-lp：下層はページ固有のFV） */
.sfv{background:var(--navy-d);color:#fff;position:relative;overflow:hidden}
.sfv::after{content:"";position:absolute;right:-12vw;top:-30%;width:58vw;height:160%;border-radius:50%;border:1px solid rgba(179,142,88,.35);pointer-events:none}
.sfv__in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:clamp(130px,16vh,170px) var(--g) clamp(64px,8vh,96px);display:grid;gap:18px;justify-items:start}
.sfv__h{font-family:var(--serif);font-weight:600;font-size:clamp(32px,2.8vw + 10px,56px);line-height:1.42;letter-spacing:.03em}
.sfv__lead{color:#dfe4ee}
.js .sfv__in>*{opacity:0;transform:translateY(14px);animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
.js .sfv__in>*:nth-child(2){animation-delay:.12s}.js .sfv__in>*:nth-child(3){animation-delay:.26s}.js .sfv__in>*:nth-child(4){animation-delay:.36s}

/* 制作例ページ（参考サイトの見せ方） */
.works{max-width:calc(var(--max) + var(--g)*2);margin:0 auto}
.chip{display:inline-flex;justify-self:start;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;font-weight:700;font-size:15px}
.chip span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px}
.chip--ng{background:#E6E2DC;color:#555}.chip--ng span{background:#8b857c;color:#fff}
.chip--ok{background:var(--gold);color:#fff}.chip--ok span{background:#fff;color:var(--gold-d)}
.tpl{padding:clamp(22px,3vw,40px);background:#F2F0ED;border:1px solid var(--line);display:grid;gap:18px}
.tpl__h{font-family:var(--serif);font-size:clamp(18px,.7vw + 13px,24px);color:#444}
.tpl__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tpl__grid .shot{filter:saturate(.5)}
.tpl__grid figcaption{margin-top:8px;font-size:14px;color:#666}
.tpl__ng{display:flex;gap:10px;align-items:center;color:#555;font-weight:500}
.tpl__ng span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#8b857c;color:#fff;font-size:13px;flex:none}
.divider{position:relative;text-align:center;margin:clamp(40px,5vw,60px) 0 clamp(28px,4vw,40px)}
.divider::before{content:"";position:absolute;left:50%;top:-32px;height:32px;border-left:1px solid #b9b3a9}
.divider span{display:inline-flex;align-items:center;gap:10px;background:var(--navy-d);color:#fff;font-weight:700;padding:12px 26px;border-radius:999px}
.divider span::after{content:"▼";font-size:11px;color:var(--gold)}
.js .divider.in span{animation:nudge 1.4s ease .4s 2}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(5px)}}
.ours{padding:clamp(22px,3vw,40px);border:2px solid var(--gold);background:#FFFCF6;display:grid;gap:22px}
.ours__lead{max-width:62em}
.ours__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px)}
.ours__grid li{display:grid;gap:8px;align-content:start;scroll-margin-top:90px}
.ours__grid p{font-weight:700;color:var(--navy-d)}
.ours__grid small{font-size:13px;color:var(--sub);line-height:1.7}
.ours__check{display:grid;gap:8px}
.ours__check li{position:relative;padding-left:32px;font-weight:500}
.ours__check li::before{content:"✓";position:absolute;left:0;top:2px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#fff;font-size:12px}
.works__note{margin-top:16px;font-size:13px;color:var(--sub)}

/* 拡大表示（slide-web-adapter：精読できる拡大の導線、Escapeで閉じる） */
.lightbox{width:min(1200px,94vw);max-height:92vh;padding:0;border:0;background:transparent;overflow:visible}
.lightbox::backdrop{background:rgba(11,26,58,.85)}
.lightbox figure{display:grid;gap:10px;margin:0}
.lightbox__img{width:100%;aspect-ratio:16/9;background:var(--navy) center/contain no-repeat}
.lightbox__img.is-pending{background:repeating-linear-gradient(135deg,#1b2f58 0 14px,#17294d 14px 28px)}
.lightbox figcaption{color:#fff;font-weight:700}
.lightbox__close{position:absolute;top:-46px;right:0;width:40px;height:40px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:22px;cursor:pointer}

/* 制作会社の方へ */
.scope__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.scope__col{background:#fff;border:1px solid var(--line);padding:clamp(22px,2.4vw,34px);display:grid;gap:10px;align-content:start}
.scope__col h3{font-family:var(--serif);font-size:clamp(20px,.8vw + 14px,26px);color:var(--navy-d)}
.scope__n{font-family:var(--serif);font-weight:700;color:var(--gold-d);font-size:22px}
.scope__col--main{border:2px solid var(--gold);background:#FFFCF6}

/* お問い合わせ */
.cform{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:#fff;border:1px solid var(--line);padding:clamp(22px,4vw,48px)}
.cform>*{grid-column:1/-1}
.cform .f--half{grid-column:auto}
.cform__type{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.cform__type legend{font-weight:700;margin-bottom:10px}
.cform__type label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s}
.cform__type label:has(input:checked){border:2px solid var(--gold);background:#FFFCF6}
.cform__type input{accent-color:var(--gold);width:18px;height:18px}
.cform__type b{display:block;color:var(--navy-d)}
.cform__type small{color:var(--sub);font-size:13px}
.f{display:grid;gap:6px;min-width:0}
.f label{font-weight:700;font-size:15px}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:10px 14px;border:1px solid #c9c5bf;background:#fff;font:inherit;font-size:16px;border-radius:2px}
.f textarea{min-height:130px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}
.req,.opt{margin-left:8px;font-size:11px;font-weight:700;padding:1px 7px;vertical-align:2px}
.req{background:var(--navy);color:#fff}.opt{background:#ECEAE6;color:#666}
.hint{font-size:13px;color:var(--sub)}
.err{display:none;color:#b3261e;font-size:13px;font-weight:700}
.is-error .err{display:block}
.is-error input{border-color:#b3261e}
.consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;justify-self:center}
.consent input{width:20px;height:20px;accent-color:var(--gold)}
.consent .err{grid-column:1/-1;text-align:center}
.consent a{color:var(--navy);font-weight:700}
.cform__submit{justify-self:center;min-width:min(100%,320px)}
.cform__note{text-align:center;font-size:12px;color:var(--sub)}
.hp{position:absolute;left:-9999px}

/* スクロールでの出現（一度だけ、時間差は少し） */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--dl,0s)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:900px){
  .wteaser__grid{grid-template-columns:1fr}
  .company__in{grid-template-columns:1fr}
  .tpl__grid,.ours__grid{grid-template-columns:1fr}
  .scope__grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cform{grid-template-columns:1fr}
  .cform .f--half{grid-column:1/-1}
  .company__dl div{grid-template-columns:96px 1fr}
  .ft__in{align-items:flex-start;flex-direction:column}
  .faq details p{padding-left:20px}
}
@media (prefers-reduced-motion:reduce){.js .rv,.js .sfv__in>*{opacity:1;transform:none}}
/* ===== 動きの付け替え（interactive-web-motion-designer Type 2・レシピA／site-motion-finisher／web-motion-adapter） =====
   主な動き＝段取りのレーン（説明の動き）。補助＝見出しの1px罫線の伸長、制作例のカーテン出現。
   静止＝急ぎの状況・料金・FAQ・選ばれる理由（読む場所・価格を待たせない）。一律のfade-upはやめる。 */
.js .rv{opacity:1;transform:none;transition:none}

/* 見出しの下の1px罫線（レシピA：ヘアラインの左→右ドロー） */
.sec__head::after{content:"";display:block;width:72px;height:1px;margin-top:22px;background:var(--gold)}
.js .sec__head::after{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,1,.36,1) .15s}
.js .sec__head.in::after{transform:scaleX(1)}

/* 制作例の画像：カーテン出現＋ゆっくり縮小（レシピA） */
.js .shot{clip-path:inset(0 0 100% 0);transform:scale(1.05);transition:clip-path 1.1s cubic-bezier(.19,1,.22,1),transform 1.4s cubic-bezier(.19,1,.22,1),box-shadow .35s}
.js .shot.in{clip-path:inset(0 0 0 0);transform:none}
@media (hover:hover){.js .shot.in:hover,.js .wteaser__grid a:hover .shot.in{transform:translateY(-4px)}}

/* 段取り：矢羽根と箱が順に出たあと、金の線が公開日まで伸びる（関係線） */
.lane__steps{position:relative}
.lane__steps::after{content:"";position:absolute;left:110px;right:0;bottom:-6px;height:2px;background:var(--gold)}
.js .lane__steps::after{transform:scaleX(0);transform-origin:left center;transition:transform 1.6s cubic-bezier(.22,1,.36,1) .5s}
.js .lane.in .lane__steps::after{transform:scaleX(1)}
@media (max-width:1100px){.lane__steps::after{left:84px}}

/* 「一方、MCが制作すると」：縦の罫線が下へ伸びる（弾む矢印は使わない） */
.js .divider span{animation:none!important}
.js .divider::before{transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.js .divider.in::before{transform:scaleY(1)}

/* ボタン：矢印だけ細くスライド（操作できることを示す） */
.btn::after{transition:transform .25s}
@media (hover:hover){.btn:hover::after{transform:translateX(4px)}}

/* ===== 追加した節 ===== */
/* 選ばれる理由：番号つきの縦の一覧（静止） */
.why{background:#fff}
.why__list{max-width:var(--max);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.why__list li{display:grid;gap:10px;align-content:start;padding:clamp(20px,2vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.why__n{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--gold-d);line-height:1}
.why__list b{font-family:var(--serif);font-size:clamp(17px,.5vw + 13px,20px);color:var(--navy-d);line-height:1.5}
.why__list p{font-size:14px;color:var(--sub);line-height:1.75}
.why__list a{color:var(--navy);font-weight:700;margin-left:4px}

/* 制作会社の方へ：取り決めの一覧 */
.rules{max-width:var(--max);margin:14px auto 0;background:#fff;border:1px solid var(--line);padding:clamp(20px,2.4vw,32px);display:grid;gap:14px}
.rules__h{font-family:var(--serif);font-size:20px;color:var(--navy-d)}
.rules__list{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}
.rules__list li{border:1px solid var(--gold);padding:6px 14px;font-size:14px;font-weight:500}
.scope .pnote{margin-top:14px}

@media (prefers-reduced-motion:reduce){.js .sec__head::after,.js .lane__steps::after{transform:none}.js .shot{clip-path:none;transform:none}.js .divider::before{transform:none}}
/* 狭い幅での1文字の改行を防ぐ */
.more a,.callout a,.why__list p{text-wrap:pretty}
.why__list a,.callout a{display:inline-block}
/* 制作例の見出しとキャプション（表現の技法：画像ごとに狙いを1行） */
.ours__h{font-family:var(--serif);font-size:clamp(20px,.8vw + 14px,26px);color:var(--navy-d)}
.ours__grid p{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ours__grid small b{color:var(--gold-d);margin-right:6px}
.wteaser__grid a{grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
.wteaser__grid a .shot{grid-column:1/-1}
.flow.sec{padding-top:var(--sec)}
/* FVの主役：自主制作デモ（Type 2：ゆっくり切り替え＋1.05→1のスロースケール。5秒超の自動なので一時停止ボタン） */
.fv__demos{grid-column:2;grid-row:1/3;position:relative;z-index:1;align-self:center;margin:110px max(var(--g),calc((100vw - 1440px)/2 + var(--g))) 0 clamp(8px,2vw,32px);aspect-ratio:16/10.4}
.demo{position:absolute;inset:0;margin:0;display:grid;grid-template-rows:auto auto;align-content:start;gap:12px;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
.demo.is-on{opacity:1;visibility:visible;transition:opacity 1.2s ease}
.js .shot--fv{clip-path:none;transform:scale(1.05);transition:transform 6s cubic-bezier(.2,.8,.2,1)}
.demo.is-on .shot--fv{transform:none}
.shot--fv{border:1px solid rgba(179,142,88,.6);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.demo figcaption{font-size:14px;color:#dfe4ee}
.demo figcaption span{display:inline-block;margin-right:10px;padding:1px 10px;border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:700}
.demo__pause{position:absolute;right:0;bottom:-4px;z-index:2;min-height:32px;padding:4px 14px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:inherit;font-size:12px;cursor:pointer}
.demo__pause:hover{border-color:var(--gold);color:var(--gold)}
@media (max-width:900px){
  .fv__demos{grid-column:1;grid-row:2;margin:4px var(--g) 18px}
}
@media (prefers-reduced-motion:reduce){.demo{transition:none}.js .shot--fv{transform:none}}
/* 料金ページ：サービス4つ、確定待ちの印、ご用意いただくもの */
.scope__grid--4{grid-template-columns:repeat(4,1fr)}
.scope__col a{color:var(--navy);font-weight:700}
.pend{display:inline-block;margin-right:10px;padding:1px 8px;background:#F6E7C8;color:#7a5a1e;font-size:12px;font-weight:700}
.pnote--pending dd{color:var(--sub)}
.cond{padding-top:0}
.prep__list{max-width:var(--max);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.prep__list li{position:relative;padding:14px 16px 14px 44px;background:#fff;border:1px solid var(--line);font-weight:500}
.prep__list li::before{content:"";position:absolute;left:16px;top:50%;width:14px;height:14px;margin-top:-7px;border:1.5px solid var(--gold);border-radius:2px}
.svc{background:#fff}
@media (max-width:1100px){.scope__grid--4{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.scope__grid--4{grid-template-columns:1fr}}
/* 一時停止ボタンはデモ画面の外、キャプションの行の右端（画像が届いたあと、右上だとデモのヘッダーのボタンを隠したため。2026-11-06） */
/* 枠の高さ＝画像（幅の56.25%）＋説明文2行分。比率で決めると、説明文が2行の幅で画像が縮んで重なったため */
.fv__demos{container-type:inline-size;aspect-ratio:auto;height:0;padding-bottom:calc(56.25% + 72px)}
.demo{grid-template-rows:56.25cqw auto}
.demo__pause{top:calc(56.25cqw + 12px);right:0;bottom:auto;background:transparent}
.demo figcaption{padding-right:104px}
@media (max-width:760px){
  .is-top .fv .fv__demos{aspect-ratio:auto;height:0;padding-bottom:calc(56.25% + 72px)}
  .is-top .demo__pause{right:var(--g)}
  .is-top .fv__demos .demo figcaption{padding-right:calc(var(--g) + 70px)}
}
/* 16:10で作ったデモ（realestate-b）は、16:9の枠で上下が切れないよう全体を収める。左右の余白は画像の地と同じ白 */
.shot[data-src$="realestate-b.jpg"]{background-size:contain;background-color:#fff}

/* ===== 制作例 A案／B案（2026-11-06） =====
   見せ方の技法（参考サイト）：同じ架空の会社をトーン違いで作り分け、2列で大きく、案ごとに狙いを1行。注記は1回。
   動き：interactive-web-motion-designer レシピA（カーテン出現＋1.05→1）、animation-web-adapter V2（枠→主題→ラベルの順）。
   画像が届くまでは、その案の色・書体・見出しで組んだ下見（.pv）を出す。届いた画像はその上に重ねて表示。 */
.shot{container-type:inline-size}
.shot.is-pending{background:none}
.shot.is-pending::after{content:none}
.pv{position:absolute;inset:0;display:grid;background:var(--bg);color:var(--fg);font-family:var(--sans);text-align:left;overflow:hidden}
.pv__top{position:absolute;left:4cqw;right:4cqw;top:3.2cqw;display:flex;align-items:center;justify-content:space-between;font-size:2.2cqw;font-weight:700;letter-spacing:.12em;z-index:2}
.pv__top i{display:block;width:16cqw;height:.9cqw;background:currentColor;opacity:.28;border-radius:2px}
.pv__ph{position:absolute;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 55%,var(--bg)),color-mix(in srgb,var(--ac) 80%,#000));z-index:0}
.pv__ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 1.6cqw)}
.pv__ph::after{content:"写真";position:absolute;right:2cqw;bottom:1.6cqw;font-size:1.6cqw;letter-spacing:.2em;color:rgba(255,255,255,.75)}
.pv__txt{position:relative;z-index:1;align-self:center;display:grid;gap:2.2cqw;padding:0 4.5cqw;max-width:48cqw}
.pv__h{font-size:5.4cqw;line-height:1.35;font-weight:700;white-space:pre-line;word-break:keep-all}
.pv__btn{justify-self:start;font-style:normal;font-size:1.9cqw;font-weight:700;padding:1.3cqw 2.6cqw;background:var(--ac);color:var(--bt,#fff)}
.pv--serif .pv__h{font-family:var(--serif);font-weight:600}
.pv--heavy .pv__h{font-weight:900;font-size:6.4cqw;line-height:1.2}
.pv--round .pv__h{font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;font-weight:700}
/* 構図：split＝左文字・右写真／full＝全面写真に文字／panel＝色面＋右の写真が円弧で溶ける／center＝左文字・中央人物・右縦写真 */
.pv--split .pv__ph{left:46%;right:0;top:0;bottom:0}
.pv--full .pv__ph{inset:0}
.pv--full .pv__ph{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0 38%,transparent 80%),linear-gradient(135deg,color-mix(in srgb,var(--ac) 45%,#333),#111)}
.pv--panel .pv__ph{left:44%;right:0;top:0;bottom:0;-webkit-mask:radial-gradient(120% 140% at 100% 50%,#000 62%,transparent 63.5%);mask:radial-gradient(120% 140% at 100% 50%,#000 62%,transparent 63.5%)}
.pv--center .pv__ph{left:36%;right:24%;top:10%;bottom:0}
.pv--center .pv__txt{max-width:36cqw}
.pv--center .pv__h{font-size:4.4cqw}
.pv--center .pv__side{position:absolute;right:0;top:10%;bottom:0;width:23%;display:grid;grid-template-rows:repeat(3,1fr);gap:.6cqw;z-index:0}
.pv__side i{background:color-mix(in srgb,var(--ac) 35%,var(--bg))}
.pv__state{position:absolute;left:4cqw;bottom:2.6cqw;z-index:2;font-size:1.5cqw;letter-spacing:.1em;opacity:.6}
/* 画像が届いたら、下見の上に重ねる */
.shot[data-ok="1"] .pv{display:none}

/* 動き：枠（カーテン）→ 写真の面 → 見出し・ボタン → 案のラベル（V2の順） */
.js .shot .pv__ph{transform:scaleX(.001);transform-origin:right center;transition:transform 1s cubic-bezier(.19,1,.22,1) .35s}
.js .pv--full .pv__ph,.js .pv--center .pv__ph{transform:scaleY(.001);transform-origin:center bottom}
.js .shot .pv__txt>*{opacity:0;transform:translateY(1.4cqw);transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.js .shot .pv__h{transition-delay:.75s}.js .shot .pv__btn{transition-delay:.95s}
.js .shot.in .pv__ph{transform:none}
.js .shot.in .pv__txt>*{opacity:1;transform:none}
.js .plan figcaption{opacity:0;transform:translateX(-14px);transition:opacity .5s ease 1.1s,transform .6s cubic-bezier(.16,1,.3,1) 1.1s}
.js .plan.in figcaption{opacity:1;transform:none}
.js .plan + .plan .shot,.js .plan + .plan .shot .pv__ph{transition-delay:.18s}
.js .plan + .plan figcaption{transition-delay:1.28s}

/* 制作例ページ：業種ごとのA案・B案 */
.cases{max-width:calc(var(--max) + var(--g)*2);margin:0 auto}
.cases__nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,4vw,48px)}
.cases__nav a{position:relative;padding:8px 16px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:700;color:var(--navy-d);text-decoration:none}
.cases__nav a::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.cases__nav a:hover::after{transform:scaleX(1)}}
.cases__nav a[aria-current="true"]::after{transform:scaleX(1)}
.case{display:grid;grid-template-columns:minmax(200px,.32fr) 1fr;gap:clamp(20px,3vw,48px);padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line);scroll-margin-top:80px}
.case__head{align-self:start;position:sticky;top:96px;display:grid;gap:10px}
.case__no{font-family:var(--serif);font-size:clamp(44px,4vw,64px);line-height:1;color:var(--gold)}
.case__h{font-family:var(--serif);font-size:clamp(22px,1vw + 14px,30px);color:var(--navy-d);line-height:1.4}
.case__co{font-size:13px;color:var(--sub)}
/* 会社名とページの種類の境目で折り返す（「会社の／ホームページ」のような語の途中で切らない） */
.case__co span{display:inline-block}
.case__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.plan{margin:0;display:grid;gap:12px;align-content:start}
.plan figcaption{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;font-size:15px;line-height:1.6}
.plan figcaption b{font-family:var(--serif);font-size:20px;color:var(--gold-d)}
.plan figcaption span{font-weight:700;color:var(--navy-d)}
.plan figcaption small{grid-column:2;font-size:13px;color:var(--sub)}
.plan .shot--btn{border-color:var(--line)}
@media (hover:hover){.plan .shot--btn:hover{box-shadow:0 18px 40px rgba(11,26,58,.2)}}
.cases__more{padding:clamp(20px,2.4vw,28px) 0 0;border-top:1px solid var(--line);font-size:15px;font-weight:700;color:var(--navy-d);text-wrap:pretty}
.cases__note{margin-top:8px;font-size:13px;color:var(--sub)}
/* 業種ボタンはヘッダー（スクロール後64px）の下に固定。制作例の区切りの中だけで、終わると一緒に消える（2026-11-06 本人指定A案）。
   背景は影で全幅に広げる（横のはみ出しを出さない） */
.cases__nav{position:sticky;top:64px;z-index:30;padding:10px 0;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper),0 1px 0 100vmax var(--line);clip-path:inset(0 -100vmax -1px)}
.case{scroll-margin-top:136px}
.case__head{top:152px}
/* スマホ：横スワイプでは端のボタンが見切れたため、3つ＋2つの2段に（並び順はそのまま。2026-11-06 本人指定） */
@media (max-width:760px){
  .cases__nav{gap:6px;padding:8px 0}
  .cases__nav::before{content:"";order:1;flex-basis:100%;height:0;margin-bottom:-6px}
  .cases__nav a{order:0;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px 10px;font-size:13px}
  .cases__nav a:nth-child(n+4){order:2;flex:1 1 0}
  .cases__nav a::after{left:10px;right:10px}
  .case{scroll-margin-top:184px}
}
@media (max-width:900px){
  .case{grid-template-columns:1fr}
  /* 1段目：番号＋業種名を同じ高さの1組に。2段目：会社名を全幅で（2026-11-07 本人の見本。「期日が決まるとき」は同日に削除）。
     番号の大きさはJSで業種名の字面の高さから決める。JSが無いときの大きさがこの値 */
  .case__head{position:static;grid-template-columns:auto 1fr;column-gap:clamp(14px,4vw,28px);row-gap:12px;align-items:center}
  .case__no{font-size:clamp(36px,11vw,54px);line-height:1}
  .case__h{font-size:clamp(28px,8.6vw,44px);line-height:1.3;white-space:normal}
  .case__co{grid-column:1/-1}
}
@media (max-width:640px){.case__pair{grid-template-columns:1fr}}

/* トップの予告：1業種のA案・B案を大きく、ほかの業種へ */
.wteaser .case__pair{max-width:var(--max);margin:0 auto}
.wteaser__more{max-width:var(--max);margin:clamp(20px,3vw,32px) auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14px}
.wteaser__more span{font-weight:700;color:var(--navy-d);margin-right:6px}
.wteaser__more a{padding:6px 14px;background:#fff;border:1px solid var(--line);font-weight:700;color:var(--navy-d);text-decoration:none;transition:border-color .25s,color .25s}
@media (hover:hover){.wteaser__more a:hover{border-color:var(--gold);color:var(--gold-d)}}
.lightbox__img{position:relative;container-type:inline-size}
.lightbox__img.is-pending{background:none}

@media (prefers-reduced-motion:reduce){.js .shot .pv__ph,.js .shot .pv__txt>*,.js .plan figcaption{transform:none;opacity:1;transition:none}}
/* 下見の調整：見出しを写真の面に重ねない／構図を案ごとに変える（prompts/works.md の構図に合わせる） */
.pv__txt{max-width:40cqw;padding:0 4cqw}
.pv__h{font-size:4.7cqw}
.pv--heavy .pv__h{font-size:5.4cqw}
.pv--full .pv__ph{background:linear-gradient(90deg,var(--bg) 0 34%,color-mix(in srgb,var(--bg) 40%,transparent) 52%,transparent 74%),linear-gradient(135deg,color-mix(in srgb,var(--ac) 35%,var(--bg)),color-mix(in srgb,var(--ac) 70%,#000))}
.pv--diag .pv__ph{left:38%;right:0;top:0;bottom:0;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.pv--diag .pv__ph::after{content:"写真（斜めの区切り）"}
.pv__cards{position:absolute;left:5%;right:5%;bottom:5%;height:20%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;z-index:2}
.pv__cards i{background:#fff;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.12);border-left:1cqw solid color-mix(in srgb,var(--ac) 70%,#fff)}
.pv--cards .pv__txt{align-self:start;margin-top:12cqw}
.pv--cards .pv__state{display:none}
.js .shot .pv__cards i{opacity:0;transform:translateY(2cqw);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.js .shot .pv__cards i:nth-child(1){transition-delay:1.05s}.js .shot .pv__cards i:nth-child(2){transition-delay:1.15s}.js .shot .pv__cards i:nth-child(3){transition-delay:1.25s}
.js .shot.in .pv__cards i{opacity:1;transform:none}
.pv--center .pv__txt{max-width:33cqw}
.pv--center .pv__h{font-size:3.6cqw}
@media (prefers-reduced-motion:reduce){.js .shot .pv__cards i{opacity:1;transform:none;transition:none}}
.pv--diag .pv__txt{max-width:34cqw}.pv--diag.pv--heavy .pv__h{font-size:4.8cqw}

/* ===== 下層ページの写真の枠（2026-11-06）：prompts/pages.md で外部生成した写真が入る。届くまでは何の写真かを表示 =====
   combine-hp-lp「一貫性」：全ページ同じ比率の規則・同じ枠。動きはレシピA（カーテン出現＋1.05→1）を写真の枠にだけ使う */
.ph-img{position:relative;display:block;width:100%;aspect-ratio:4/3;background:#E9E4DA center/cover no-repeat;overflow:hidden}
.ph-img::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(179,142,88,.18),rgba(11,26,58,.18))}
.ph-img::after{content:attr(data-n);position:absolute;left:14px;right:14px;bottom:12px;font-size:12px;line-height:1.5;letter-spacing:.04em;color:#5b5346}
.ph-img[data-ok="1"]::before,.ph-img[data-ok="1"]::after{content:none}
.ph-img--sq{aspect-ratio:1/1;margin-bottom:6px}
.ph-img--small{max-width:360px}
.js .ph-img{clip-path:inset(0 0 100% 0);transform:scale(1.05);transition:clip-path 1.1s cubic-bezier(.19,1,.22,1),transform 1.4s cubic-bezier(.19,1,.22,1)}
.js .ph-img.in{clip-path:inset(0 0 0 0);transform:none}

/* 下層の冒頭：左に見出し、右に写真（PC）。スマホは見出しの下に写真 */
.sfv--img .sfv__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,4vw,64px);align-items:center;justify-items:start}
.sfv--img .sfv__in>*{grid-column:1}
.sfv--img .sfv__fig{grid-column:2;grid-row:1/span 6;margin:0;width:100%;align-self:center}
.sfv--img .sfv__fig .ph-img{border:1px solid rgba(179,142,88,.45)}
.sfv--img .sfv__fig .ph-img::after{color:#e6dccb}
.sfv--img .sfv__fig .ph-img::before{background:linear-gradient(135deg,#1b2d55,#0f1f42)}
@media (max-width:900px){
  .sfv--img .sfv__in{grid-template-columns:1fr}
  .sfv--img .sfv__fig{grid-column:1;grid-row:auto;margin-top:8px}
}

/* 制作の流れ：ご用意いただくもの＝写真＋一覧 */
.prep__wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,3vw,40px);align-items:start}
.prep__fig{margin:0}
.prep__fig .ph-img{aspect-ratio:3/2}
.prep__wrap .prep__list{max-width:none;margin:0}
@media (max-width:900px){.prep__wrap{grid-template-columns:1fr}}

/* よくある質問：最後に写真つきの問い合わせ */
.faq__more{max-width:var(--max);margin:clamp(36px,5vw,64px) auto 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:center;background:#fff;border:1px solid var(--line);padding:clamp(16px,2vw,24px)}
.faq__more figure{margin:0}
.faq__more .ph-img{aspect-ratio:3/2}
.faq__more>div{display:grid;gap:12px;justify-items:start}
.faq__more-h{font-family:var(--serif);font-weight:700;font-size:clamp(20px,.8vw + 14px,26px);color:var(--navy-d);line-height:1.5}
@media (max-width:760px){.faq__more{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.js .ph-img{clip-path:none;transform:none;transition:none}}

/* ===== ヘッダーの追従とメニュー／モバイル独自の設計（2026-11-06） =====
   出典：mobile-native-web-design 手順1〜7、narrow-column-impact-system §1（本人指定の技法4つ）・§3.5・§3.6、
   high-conversion §5・§8、visual-integrity §5、site-motion-finisher のPCとモバイルの表、animation-web-adapter V2。 */

/* ヘッダー：全幅で追従。スクロールしたら紺の面にして高さを詰める */
.hd{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s ease,box-shadow .3s ease}
.hd__in{transition:padding .3s ease}
.hd.is-scrolled{background:rgba(11,26,58,.96);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.hd.is-scrolled .hd__in{padding-top:10px;padding-bottom:10px}
.hd.is-scrolled .nav .btn{min-height:44px}

/* ハンバーガー（1100px以下）。タップ領域は44px以上（手順5） */
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:6px 4px 6px 10px;border:0;background:none;color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;cursor:pointer}
.menu-btn__bars{position:relative;display:block;width:26px;height:16px}
.menu-btn__bars i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.menu-btn__bars i:nth-child(1){top:0}.menu-btn__bars i:nth-child(2){top:7px}.menu-btn__bars i:nth-child(3){top:14px}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 全画面のメニュー：枠（面）→ 項目 → ボタン の順に出る（V2の順番） */
.sp-menu{position:fixed;inset:0;z-index:-1;background:var(--navy-d);color:#fff;display:grid;align-content:start;gap:28px;padding:96px 28px 40px;overflow-y:auto;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.19,1,.22,1)}
.sp-menu[hidden]{display:none}
.sp-menu.is-open{clip-path:inset(0 0 0 0)}
.sp-menu__nav{display:grid;border-top:1px solid rgba(179,142,88,.4)}
.sp-menu__nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:6px 2px;border-bottom:1px solid rgba(179,142,88,.4);font-family:var(--serif);font-weight:700;font-size:22px;text-decoration:none;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.sp-menu__nav a::after{content:"→";font-family:var(--sans);font-size:16px;color:var(--gold)}
.sp-menu__nav a[aria-current="page"]{color:var(--gold)}
.sp-menu__cta{display:grid;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .4s ease .5s,transform .5s cubic-bezier(.16,1,.3,1) .5s}
.sp-menu__cta .btn{width:100%}
.sp-menu__sub{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid rgba(179,142,88,.6);color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.sp-menu.is-open .sp-menu__nav a,.sp-menu.is-open .sp-menu__cta{opacity:1;transform:none}
.is-menu-open{overflow:hidden}
.is-menu-open .sticky{transform:translateY(160%)}
@media (max-width:1100px){.menu-btn{display:inline-flex}}
@media (min-width:1101px){.sp-menu{display:none!important}}

/* ===== SP（760px以下）：PCの縦積みにしない ===== */
@media (max-width:760px){
  /* 文字と余白（narrow §1②③）：本文15px、見出しは本文の2倍前後。上下の余白を左右より大きく */
  .sec{padding:76px 20px}
  .sec__head{margin-bottom:32px}
  .h2{font-size:clamp(26px,7.6vw,32px);line-height:1.45;word-break:auto-phrase}
  .kicker{font-size:13px}
  .sec__lead{font-size:15px}

  /* TOPのFV（手順1・combine-hp-lp）：前置き→大きな主見出し→主役のデモ→主ボタン1つ。説明・4つの印はFVの下へ */
  .is-top .fv{display:flex;flex-direction:column;min-height:0;padding-bottom:28px}
  .is-top .fv__text{display:contents}
  .is-top .fv__pre{order:1;padding:92px 20px 0;font-size:13px}
  .is-top .fv__h{order:2;padding:10px 20px 0;font-size:clamp(28px,8.6vw,36px);line-height:1.42;letter-spacing:.02em}
  .is-top .fv__rule{display:none}
  .is-top .fv__demos{order:3;margin:22px 0 0;padding:0}
  .is-top .fv__demos .shot--fv{border-left:0;border-right:0}
  .is-top .demo figcaption{padding:0 20px}
  .is-top .fv__cta{order:4;padding:0 20px;margin-top:52px}
  .is-top .fv__cta .btn--frame{display:none}
  .is-top .fv__lead{order:5;padding:18px 20px 0;font-size:15px}
  .is-top .fv__lead br{display:none}
  .is-top .fv__icons{order:6;margin-top:22px}
  .is-top .fv__row{order:7}

  /* TOPの順番（ヒアリングWeb追加6：SPは料金・納期・問い合わせを優先） */
  .is-top main{display:flex;flex-direction:column}
  .is-top main>.fv{order:1}
  .is-top main>.price{order:2;padding-top:76px}
  .is-top main>.flow{order:3;padding-top:76px}
  .is-top main>.urgent{order:4}
  .is-top main>.wteaser{order:5}
  .is-top main>.why{order:6}
  .is-top main>.guide--top{order:7}
  .is-top main>.entry{order:8}
  .is-top main>.faq{order:9}
  .is-top main>.company{order:10}
  .is-top main>.close{order:11}

  /* 料金（high-conversion §6：価格は格納しない）：LPを主役に大きく、ほかは名前と料金の行 */
  .ptable{gap:8px}
  .ptable__col{display:grid;grid-template-columns:1fr auto;grid-template-rows:none;align-items:center}
  .ptable__col .ph{grid-column:1;text-align:left;border:0;padding:16px 16px 4px;font-size:18px}
  .ptable__col .pc{border:0;padding:0 16px 14px;justify-content:flex-start;text-align:left}
  .ptable__col .pc:nth-child(2){grid-column:2;grid-row:1;padding:16px 16px 4px;justify-content:flex-end}
  .ptable__col .pc:nth-child(3){grid-column:1/-1;font-size:14px;color:var(--sub)}
  .ptable__col .pc:nth-child(4){grid-column:1/-1}
  .ptable__col--main{grid-template-columns:1fr}
  .ptable__col--main .ph{text-align:center;padding:12px}
  .ptable__col--main .pc:nth-child(2){grid-column:1;grid-row:auto;justify-content:center;padding:22px 16px 10px}
  .ptable__col--main .pc--num b{font-size:76px}
  .ptable__col--main .pc:nth-child(3){text-align:center;justify-content:center}
  .ptable__col--main .pc:nth-child(4){justify-content:center;padding-bottom:20px}
  .ptable__col--main .pc:nth-child(4) a{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;background:var(--gold);color:#fff;border:0}
  .pc--num b{font-size:34px}
  .pc--est{font-size:17px}

  /* 選ばれる理由：枠の表をやめ、本文の3倍の番号と短い文の縦の流れ（narrow §1③） */
  .why__list{border:0;gap:28px}
  .why__list li{grid-template-columns:auto 1fr;column-gap:16px;padding:0;border:0}
  .why__n{grid-row:1/3;font-size:48px;line-height:.9}
  .why__list b{font-size:19px}

  /* 制作の流れ：枠のカードをやめ、縦のレール（narrow §3.6）。最後の「公開」だけ金 */
  .steps-sp{position:relative;gap:0;padding-left:0}
  .steps-sp::before,.steps-sp::after{content:"";position:absolute;left:21px;top:20px;bottom:20px;width:2px}
  .steps-sp::before{background:var(--line)}
  .steps-sp::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--p,1))}
  .stp{position:relative;z-index:1;background:none;border:0;padding:0 0 30px;grid-template-columns:44px 1fr}
  .stp i{box-shadow:0 0 0 6px var(--paper)}
  .stp b{font-size:21px}
  .flow__bar{margin-top:6px;font-size:16px}

  /* 急ぎの状況・A案B案・サービス・範囲：横スワイプ（narrow §3.5：中央に吸着、両隣を覗かせる） */
  .is-swipe{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 8px;margin:0 -20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .is-swipe::-webkit-scrollbar{display:none}
  .is-swipe>*{flex:0 0 84%;scroll-snap-align:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
  .is-swipe>.is-away{transform:scale(.92);opacity:.55}
  .swipe-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
  .swipe-ctl button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:#fff;color:var(--navy-d);font-size:18px;cursor:pointer}
  .swipe-ctl button:disabled{opacity:.35}
  .swipe-dots{display:flex;gap:8px}
  .swipe-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .25s,transform .25s}
  .swipe-dots i.is-on{background:var(--gold);transform:scale(1.3)}
  .urgent__list.is-swipe li{min-height:200px;align-content:center}
  .urgent__list.is-swipe q{font-size:21px}
  .callout{margin-top:22px}

  /* 入口：2枚の面を詰めすぎない */
  .door{padding:56px 24px}
  .door strong{font-size:30px}

  /* 固定CTA（手順6）：FV通過後に出し、最後の相談・フォーム・フッターが見えたら隠す */
  .sticky.is-hidden-end{transform:translateY(160%)}
}
@media (prefers-reduced-motion:reduce){.sp-menu,.sp-menu__nav a,.sp-menu__cta,.hd,.menu-btn__bars i,.is-swipe>*{transition:none}.steps-sp::after{transform:none}}
@media (max-width:760px){
  .is-top .fv__demos{width:100%;align-self:stretch;aspect-ratio:16/11.6}
  .ptable__col.ptable__col--label{display:none}
}
@media (max-width:760px){
  .h2,.sfv__h,.close__h{text-wrap:balance}
  .is-top .fv__cta{margin-top:30px}
}
.brand small{white-space:nowrap}
.faq details p a{display:inline-block}
@media (max-width:360px){.brand span{font-size:14px}.brand small{font-size:10px}.menu-btn{gap:6px;font-size:11px}.hd__in{gap:12px}}

/* ===== 書体の役割・色の役割・画像の差し込み・明暗の交互・FLOWの状態（2026-11-06）
   narrow-column-impact-system §1①〜⑥・§2・§3.2・§3.6。書体の役割はPCにも適用（本人の判断 a）。
   声の種類：主張＝和文ゴシック900／宣言＝明朝（ページに2か所だけ）／番号・英字＝Fraunces／本文＝ゴシック */
:root{--d-font:"Noto Sans JP",system-ui,sans-serif;--num:"Fraunces","Shippori Mincho",serif}
/* 主張の見出し：和文ゴシック極太。字面が詰まるので palt＋字間少し（§5） */
.h2,.lane__label,.chev b,.flow__bar,.ph,.door strong,.stp b,.scope__col h3,.why__list b,.rules__h,.case__h,.faq__more-h,.sp-menu__nav a,.art__body h2,.tpl__h,.ours__h{font-family:var(--d-font);font-weight:900;font-feature-settings:"palt";letter-spacing:.02em}
.h2{line-height:1.45}
.urgent__list q{font-family:var(--d-font);font-weight:700;letter-spacing:.01em}
.pc--est{font-family:var(--d-font);font-weight:700}
/* 宣言（少なく使う声）：FVの主見出し・下層の冒頭・最後の相談・記事の題だけ明朝 */
.fv__h,.sfv__h,.close__h,.art__h{font-family:var(--serif)}
/* 番号・英字：Fraunces */
.pc--num,.why__n,.scope__n,.case__no,.plan figcaption b,.wteaser__grid b,.faq summary::before,.gnum,.gtoc a::before{font-family:var(--num);font-weight:700}

/* 色の役割（§1④）：紺＝土台、金＝行動と強調。補助色＝「期日の理由」の印（札・下線だけ、小さな面積）。制作ガイドのカテゴリ色と重ならない色 */
:root{--r-expo:#7A8B3A;--r-recruit:#3E7C8C;--r-open:#C2703D;--r-client:#8C6A9E;--r-ad:#B5485D}
.tag--expo{--rc:var(--r-expo)}.tag--recruit{--rc:var(--r-recruit)}.tag--open{--rc:var(--r-open)}.tag--client{--rc:var(--r-client)}.tag--ad{--rc:var(--r-ad)}
.urgent__list .tag[class*="tag--"]{color:#fff;background:var(--rc);border-color:var(--rc)}
.urgent__list li:has(.tag--expo){border-top-color:var(--r-expo)}
.urgent__list li:has(.tag--recruit){border-top-color:var(--r-recruit)}
.urgent__list li:has(.tag--open){border-top-color:var(--r-open)}
.urgent__list li:has(.tag--client){border-top-color:var(--r-client)}
.urgent__list li:has(.tag--ad){border-top-color:var(--r-ad)}

/* 画像の差し込み（§1⑤）：セクションの冒頭・カードの上に、同じ作風の写真の枠 */
.sec__fig{max-width:var(--max);margin:0 auto clamp(28px,4vw,48px)}
.sec__fig .ph-img{aspect-ratio:21/8}
.sec__fig--narrow{max-width:900px}
.sec__fig--narrow .ph-img{aspect-ratio:3/1}
.sec__fig--in{margin:22px 0 0;max-width:none}
.sec__fig--in .ph-img{aspect-ratio:3/2}
.ph-img--card{aspect-ratio:3/2;margin:-1px -1px 6px;width:calc(100% + 2px)}
.urgent__list li{padding:0;overflow:hidden}
.urgent__list li>.tag:first-child{margin-top:clamp(20px,2vw,28px)}
.urgent__list li>.tag,.urgent__list li>q{margin-left:clamp(20px,2vw,28px);margin-right:clamp(20px,2vw,28px)}
.urgent__list li>q{margin-bottom:clamp(20px,2vw,28px)}
/* 見せ場の文字（§1③）：急ぎの状況は大きな引用符だけを主色で */
.urgent__list q::before{content:"「";display:block;font-family:var(--serif);font-size:56px;line-height:.6;color:var(--gold);margin:6px 0 4px -6px}
.urgent__list q::after{content:"」"}

@media (max-width:760px){
  /* 明暗の交互（§2）：急ぎの状況と選ばれる理由を紺の面に。FV紺→料金・流れ明→急ぎ紺→制作例明→理由紺→ガイド明… */
  .is-top .urgent,.is-top .why{background:var(--navy-d);color:#fff}
  .is-top .urgent .h2,.is-top .why .h2,.is-top .why__list b{color:#fff}
  .is-top .urgent .kicker,.is-top .why .kicker{color:var(--gold)}
  .is-top .why__list p{color:#c9d0dc}
  .is-top .why__list a{color:var(--gold)}
  .is-top .urgent__list li{background:#fff;color:var(--ink)}
  .is-top .urgent .swipe-ctl button{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
  .is-top .urgent .swipe-dots i{background:rgba(255,255,255,.3)}
  .is-top .urgent .swipe-dots i.is-on{background:var(--gold)}
  .is-top .urgent .callout{background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--gold)}
  .is-top .urgent .callout a{color:var(--gold)}
  .sec__fig .ph-img{aspect-ratio:16/10}
  .sec__fig--narrow .ph-img{aspect-ratio:16/9}
  .is-top .sec__fig{margin-left:-20px;margin-right:-20px}
  .is-top .sec__fig .ph-img{border-left:0;border-right:0}
  .h2{font-size:clamp(26px,7.4vw,31px)}

  /* FLOW（§3.6）：済んだ工程は線が金・番号が紺の塗り、まだの工程は線が灰・番号が白抜き。最後は金に反転 */
  .stp i{background:#fff;color:var(--navy);border:2px solid var(--navy);transition:background .35s,color .35s}
  .stp.is-done i{background:var(--navy);color:#fff}
  .stp--due i{border-color:var(--gold);color:var(--gold-d)}
  .stp--due.is-done i{background:var(--gold);color:#fff}
  .stp--due.is-done b{color:var(--gold-d)}
}
@media (min-width:761px){.sec__fig .ph-img{aspect-ratio:16/5}}
.sec__fig,.sfv__fig,.prep__fig,.faq__more figure{overflow:hidden}.case__co{text-wrap:pretty}

/* 人物が写る写真の枠（visual-integrity §2「人物写真の切り取り」）：16:5では頭が切れたため、PCは2:1にして上端から切る。
   16:9の素材なら上から約89%が残り、頭の上の余白から手元まで入る（2026-11-06 本人指摘） */
@media (min-width:761px){
  .ph-img[data-src$="top-why.jpg"],.ph-img[data-src$="top-flow.jpg"],.ph-img[data-src$="top-faq.jpg"]{aspect-ratio:2/1;background-position:center top}
}
/* top-flow：スマホの16:10では画面の中の人物が右端で切れたため、右寄せ */
@media (max-width:760px){.ph-img[data-src$="top-flow.jpg"]{background-position:right center}}

/* ===== トップのFV（2026-11-07 本人の案）：最初は完成したMCロゴと見出し。スクロールで分かれて、画面の外へ消えていく =====
   技法：kott.studio（極大の文字と立体の重なり・スクロール量で形が変わる）。動きの質は interactive-web-motion-designer Type 2（静かで精密、跳ねない）。
   --e＝分かれ具合（0＝完成形 → 1＝画面の外）。JSが動かない・動きを減らす設定では --e:0 の完成形で静止する。
   本人指摘（同日）：表示した瞬間に崩れたロゴと薄い2語目が出て見た目が悪い → 完成形から始めて、分かれていく向きに変更。
   止めて見せる長さは PC 約0.8画面・SP 約0.6画面（主ボタンは最初から押せる。animation-web-adapter「長い3D導入は持ち込まない」） */
.fv.mv{display:block;min-height:0;padding:0;grid-template-columns:none;overflow:visible;--e:0}
.mv__stage{position:relative;height:140svh}
.mv__pin{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
/* 背景：制作例を画面いっぱいに。紺86%を重ねる（本人指定 80〜90%） */
.mv__bg{position:absolute;inset:0;z-index:-2;background:var(--navy-d)}
.mv__bg i{position:absolute;inset:-2%;background:center top/cover no-repeat;opacity:0;transform:scale(1.06);transition:opacity 1.6s ease,transform 7s linear}
.mv__bg i.is-on{opacity:1;transform:scale(1)}
.mv__bg::after{content:"";position:absolute;inset:0;background:rgba(11,26,58,.9)}
/* 立方体：正式ロゴの3面（形はそのまま・白に反転）。最後は正式ロゴと同じ等角の向き */
.mv__cube{position:absolute;left:50%;top:clamp(128px,18svh,180px);width:var(--s);height:calc(var(--s)*1.7);margin-left:calc(var(--s)/-2);--s:min(22svh,14vw);perspective:calc(32000px - var(--e)*29600px);display:grid;place-items:center}
/* 分かれていく：各面が自分の外側（面の向き）へ飛び、回りながら画面の外へ。立方体は少し回って手前に寄る */
.cube{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(calc(-35.264deg + var(--e)*10deg)) rotateY(calc(-45deg + var(--e)*-22deg)) scale(calc(1 + var(--e)*.25))}
.cube__f{position:absolute;left:0;top:0;width:var(--s);height:var(--s);background:0 0/100% 100% no-repeat;backface-visibility:hidden;opacity:calc(1 - var(--e)*var(--e)*.9)}
.cube .cube__m{background-image:url(../img/fv/cube-m.png);transform:translateZ(calc(var(--s)/2 + var(--e)*var(--s)*3.2)) translateX(calc(var(--e)*var(--s)*-1.6)) rotateZ(calc(var(--e)*-38deg))}
.cube .cube__h{height:calc(var(--s)*1.14);background-size:100% 100%;background-image:url(../img/fv/cube-h.png);transform:rotateY(90deg) translateZ(calc(var(--s)/2 + var(--e)*var(--s)*3.4)) translateY(calc(var(--e)*var(--s)*.8)) rotateZ(calc(var(--e)*34deg))}
.cube .cube__c{background-image:url(../img/fv/cube-c.png);transform:rotateX(90deg) translateZ(calc(var(--s)/2 + var(--e)*var(--s)*3)) rotateZ(calc(180deg + var(--e)*60deg))}
/* 文字：最初は完成した1行。スクロールで2語が左右に分かれ、字間が開きながら画面の外へ */
.mv__copy{position:absolute;left:0;right:0;bottom:clamp(56px,9svh,96px);display:grid;justify-items:center;gap:clamp(14px,2.2svh,24px);padding:0 var(--g);text-align:center}
.mv__pre{font-size:14px;letter-spacing:.22em;color:var(--gold)}
.mv__h{font-family:var(--serif);font-weight:700;font-size:clamp(48px,8.2vw,124px);line-height:1.12;letter-spacing:.04em;white-space:nowrap}
.mv__h span{display:inline-block}
.mv__h span{--dx:58vw;letter-spacing:calc(.04em + var(--e)*.3em);opacity:calc(1 - var(--e)*var(--e))}
.mv__w1{transform:translateX(calc(var(--e)*var(--dx)*-1))}
.mv__w2{transform:translateX(calc(var(--e)*var(--dx)))}
.mv__pre,.mv__cta{opacity:calc(1 - var(--e)*1.6);transform:translateY(calc(var(--e)*-24px))}
.mv.is-out .mv__cta,.mv.is-out .mv__pre{pointer-events:none;visibility:hidden}
/* 読み込み直後：明朝の文字が届く前の代わりの書体で見出しを出さない（崩れた見た目を防ぐ）。届いたら一度だけ静かに出す */
.js .mv__copy{opacity:0;transition:opacity .7s ease}
.js .mv.is-ready .mv__copy{opacity:1}
.js .mv .mv__cube{opacity:0;transition:opacity .9s ease}
.js .mv.is-ready .mv__cube{opacity:1}
.mv__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px}
.mv__hint{position:absolute;left:var(--g);bottom:28px;font-size:11px;letter-spacing:.3em;color:#b9c2d3;writing-mode:vertical-rl;opacity:calc(1 - var(--e)*3)}
.mv__hint::after{content:"";display:block;width:1px;height:56px;margin:10px auto 0;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:hint 2.4s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* 「制作例を見る」：右下に固定。スクロールで見出しが消えても、FVのあいだは消さずに出しておく（本人指定 2026-11-07） */
.mv__works{position:absolute;right:var(--g);bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 20px;border:1px solid var(--gold);background:rgba(11,26,58,.6);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s}
.mv__works span{color:var(--gold);transition:transform .2s}
@media (hover:hover){.mv__works:hover{background:rgba(179,142,88,.18)}.mv__works:hover span{transform:translateX(5px)}}
.mv__after{background:var(--navy-d);color:#fff;padding-top:clamp(40px,6vh,72px)}
.mv__state{max-width:1440px;margin:0 auto clamp(32px,5vh,56px);padding:0 var(--g);font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,36px);line-height:1.5;letter-spacing:.04em;text-align:center}
.mv__state::after{content:"";display:block;width:56px;height:1px;margin:22px auto 0;background:var(--gold)}
@media (max-width:1100px){.mv__stage{height:140svh}}
/* SP：上に立方体、2行の見出し（文節で改行）、主ボタン1つ。止めて見せる長さは短く */
@media (max-width:760px){
  .mv__stage{height:150svh}
  .mv__pin{min-height:560px}
  .mv__cube{--s:min(34vw,18svh);top:clamp(84px,13svh,124px)}
  .mv__copy{bottom:clamp(76px,10svh,96px);gap:14px;padding:0 20px}
  .mv__pre{font-size:12px;letter-spacing:.16em}
  .mv__h{font-size:clamp(44px,15.4vw,72px);line-height:1.18;white-space:normal}
  .mv__h span{display:block}
  .mv__cta{flex-direction:column;gap:14px;width:100%}
  .mv__cta .btn{width:100%}
  .mv__hint{display:none}
  .mv__works{right:12px;bottom:12px;min-height:44px;padding:6px 14px;font-size:14px}
  .is-top .fv.mv{display:block;padding-bottom:0}
  .mv__after{padding:8px 0 4px}
}
@media (prefers-reduced-motion:reduce){
  .fv.mv,.js .fv.mv{--e:0!important}
  .mv__stage{height:auto}.mv__pin{position:relative;height:100svh}
  .mv__bg i{transition:none;transform:none}
  .mv__hint{display:none}
  .js .mv__copy,.js .mv .mv__cube{opacity:1;transition:none}
}
/* 高さの低いスマホ（320×568など）：立方体を小さくして、見出しと重ねない */
@media (max-width:760px) and (max-height:620px){.mv__cube{--s:min(30vw,14svh);top:72px}.mv__copy{gap:10px;bottom:70px}}

/* ===== セクションの見出し：見せ場は1セクションに1つ、セクションごとに違う型（2026-11-07 本人指摘「同じ型で単調」） =====
   出典：narrow-column §1③（見せ場の文字は1つ）、bold-typography B 思考①③（枠に頼らず極大と極小で区切る）・C 思考④（左に見出し・右に本文）。
   急ぎ＝写真が見せ場なので見出しは標準／制作例・制作ガイド＝見出し左・説明右／理由＝数字「05」／流れ＝工程へ伸びる線／料金＝紺の帯の金額／FAQ＝大きな「Q」／運営＝大きな一文と事実の索引 */
.sec__head--split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(24px,4vw,72px);align-items:end}
.sec__head--split>*{grid-column:1}
.sec__head--split>.sec__lead:last-child{grid-column:2;grid-row:1/span 3;align-self:end;margin:0;max-width:32em}
.sec__head--split::after{grid-column:1/-1}
.sec__more{display:inline-block;margin-top:10px;color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.sec__more span{color:var(--gold-d)}
.sec__head--num{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(18px,2.6vw,40px);align-items:end}
.sec__head--num>*{grid-column:2}
.sec__num{grid-column:1!important;grid-row:1/span 2;font-family:var(--num);font-weight:700;font-size:clamp(88px,10vw,168px);line-height:.78;color:var(--gold);letter-spacing:-.03em}
.sec__head--num::after{display:none}
.sec__head--line{display:grid;grid-template-columns:auto minmax(48px,1fr);column-gap:clamp(20px,3vw,40px);align-items:end}
.sec__head--line>*{grid-column:1}
.sec__head--line::after{grid-column:2;grid-row:2;align-self:center;width:auto;margin:0;background:linear-gradient(90deg,var(--gold),rgba(179,142,88,.15))}
.sec__head--quiet::after{display:none}
.sec__head--quiet{margin-bottom:clamp(20px,2.6vw,32px)}

/* 料金：紺の帯に主役の金額（flyer-web-adapter「高級な価格」＝紺と金・静かな数字の強調、slide-web-adapter「主数字・推奨項目の階層」）。お見積りの2つは枠なしの一覧 */
.ptable.ptable--band{display:grid;grid-template-columns:none;gap:0}
.pband{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);background:var(--navy-d);color:#fff}
.pband>div{padding:clamp(28px,3.6vw,56px);display:grid;gap:10px;align-content:start;justify-items:start}
.pband__sub{border-left:1px solid rgba(179,142,88,.45)}
.pband__en{font-size:14px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.pband__num{display:flex;align-items:baseline;gap:8px;line-height:.9}
.pband__num b{font-family:var(--num);font-weight:700;font-size:clamp(96px,10vw,168px);letter-spacing:-.03em}
.pband__num span{font-size:clamp(20px,1.6vw,28px);font-weight:700}
.pband__num--s b{font-size:clamp(64px,6vw,104px)}
.pband__for{color:#dfe4ee;font-size:15px;line-height:1.7}
.pband__link{margin-top:8px;color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px}
.pband__link span,.plist a span{color:var(--gold);display:inline-block;transition:transform .2s}
@media (hover:hover){.pband__link:hover span,.plist a:hover span{transform:translateX(5px)}}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(110px,.6fr) minmax(0,2fr) auto;gap:8px 20px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line)}
.plist b{font-family:var(--d-font);font-weight:900;font-size:19px;color:var(--navy-d)}
.plist__p{font-weight:700;color:var(--gold-d)}
.plist__for{color:var(--sub);font-size:14px}
.plist a{color:var(--navy);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}

/* FAQ：左に大きな「Q」と見出し・写真（追従）、右に番号つきの質問を枠なしで（bold-typography C 思考④、trust-authority 思考③「よくある質問への深い回答」） */
.faq__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,88px);align-items:start}
.faq__side{position:sticky;top:110px;display:grid;gap:12px;justify-items:start}
.faq__q{font-family:var(--num);font-weight:700;font-size:clamp(120px,12vw,208px);line-height:.72;color:var(--gold);margin-bottom:.2em}
.faq__side .h2{margin-top:0;text-wrap:balance}
.faq .faq__fig{margin:10px 0 0;width:100%}
.faq .faq__fig .ph-img{aspect-ratio:4/3;background-position:center top}
.faq__ask{font-size:14px;color:var(--sub)}
.faq__ask a{color:var(--navy);font-weight:700;margin-left:6px;text-decoration:none;border-bottom:1px solid var(--gold)}
.faq .faq__list{max-width:none;margin:0;gap:0;border-top:1px solid var(--navy-d)}
.faq .faq__list details{border:0;border-bottom:1px solid var(--line);background:transparent}
.faq .faq__list summary{padding:24px 4px;grid-template-columns:2.6em 1fr auto}
.faq .faq__list summary::before{content:none}
.faq .faq__list summary i{font-family:var(--num);font-style:normal;font-weight:700;font-size:18px;color:var(--gold-d)}
.faq .faq__list details p{padding:0 4px 24px 2.6em}

/* 運営会社：大きな一文（言葉の休符）＋ 事実を横一列の索引に（trust-authority 思考④ Fact Sheet、bold-typography B 思考④⑤） */
.company .company__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"k f" "h f" "d d" "m m";column-gap:clamp(24px,4vw,72px);row-gap:14px;align-items:end}
.company__in>.kicker{grid-area:k}
.company__h{grid-area:h;font-family:var(--d-font);font-weight:900;font-feature-settings:"palt";font-size:clamp(32px,3.4vw,58px);line-height:1.3;letter-spacing:.02em;color:var(--navy-d)}
.company__fig{grid-area:f;margin:0}
.company__fig .ph-img{aspect-ratio:4/3}
.company__facts{grid-area:d;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(28px,3.4vw,48px) 0 0;border-top:1px solid var(--navy-d)}
.company__facts div{display:grid;gap:6px;padding:18px 16px 0 0}
.company__facts dt{font-size:12px;letter-spacing:.18em;color:var(--gold-d);font-weight:700}
.company__facts dd{font-family:var(--d-font);font-weight:900;font-size:clamp(17px,1.3vw,22px);color:var(--navy-d)}
.company__facts a{color:inherit}
.company__more{grid-area:m;margin-top:10px}
.company__more a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}

@media (max-width:900px){
  .sec__head--split{grid-template-columns:1fr}
  .sec__head--split>.sec__lead:last-child{grid-column:1;grid-row:auto;margin-top:14px}
  .faq__grid{grid-template-columns:1fr}
  .faq__side{position:static}
  .company .company__in{grid-template-columns:1fr;grid-template-areas:"k" "h" "f" "d" "m"}
  .company__facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
}
@media (max-width:760px){
  /* スマホの「選ばれる理由」は、各項目の番号（01〜05）が見せ場なので、見出しの「05」は出さない（見せ場は1つ） */
  .why .sec__num{display:none}
  .why .sec__head--num{display:block}
  .why .sec__head--num::after{display:block}
  /* スマホの「制作の流れ」は、横に伸びる線をやめて標準の短い線にする */
  .sec__head--line{display:block}
  .sec__head--line::after{width:72px;margin-top:22px;background:var(--gold)}
  .pband{grid-template-columns:1fr}
  .pband__sub{border-left:0;border-top:1px solid rgba(179,142,88,.45)}
  .pband__num b{font-size:clamp(80px,26vw,120px)}
  .pband__num--s b{font-size:clamp(56px,17vw,80px)}
  .plist li{grid-template-columns:1fr auto;padding:18px 2px}
  .plist__for,.plist a{grid-column:1/-1}
  .faq__q{font-size:clamp(96px,30vw,140px)}
  .faq .faq__fig .ph-img{aspect-ratio:16/10}
  .faq .faq__list summary{padding:20px 2px}
  .faq .faq__list details p{padding:0 2px 20px 2.6em}
  .company__h{font-size:clamp(28px,8.4vw,40px)}
}