/* ══════════════════════════════════════════════════════════
   職人WEBタキサワ — 職人向けホームページ制作
   ══════════════════════════════════════════════════════════ */

:root{
  --black:#080808; --black-2:#0d0d0d; --black-3:#141414; --black-4:#1c1c1c;
  --grey-1:#2a2a2a; --grey-2:#404040; --grey-3:#8c8c8c; --grey-4:#b0b0b0;
  --white:#fafafa; --white-2:#f5f5f5; --white-3:#e5e5e5; --white-4:#d4d4d4;
  --red:#d81b18; --red-d:#b31512; --red-bright:#e8231f; --line:#06c755; --line-d:#05a948; --line-ink:#042d14; --violet:#6d4aff; --amber:#ff8a3d; --blue:#2f7dff;
  --ease:cubic-bezier(.215,.61,.355,1);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
@media (min-width:768px){html{font-size:clamp(14px,1.03vw,19px)}}

body{
  font-family:var(--font); background:var(--black); color:var(--white);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; line-height:1.7; font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:0}

.container{width:100%;max-width:82rem;margin:0 auto;padding:0 2rem;position:relative}
.container.full{max-width:none;padding:0 2.5rem}
.section{position:relative;padding:8rem 0}
@media (max-width:767px){.section{padding:4.5rem 0}.container{padding:0 1.25rem}.container.full{padding:0 1.25rem}}

.max-29{max-width:29rem}.max-40{max-width:40rem}.max-55{max-width:55rem}.max-82{max-width:82rem}
.center{text-align:center}
.b1{font-size:1.05rem;line-height:1.8;color:var(--grey-4)}
.b1.center{margin-left:auto;margin-right:auto}
.b1.grey{color:var(--grey-4)}
.w{color:#fff;font-weight:700}
.muted{color:var(--grey-3)}

/* ── スクロールに直結する演出の土台 ── */
html.has-smooth{scroll-behavior:auto}
.char{display:inline-block;opacity:.1;transform:translateY(.16em);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.char.on{opacity:1;transform:none}

/* JSがスクロール位置から transform/opacity を毎フレーム流し込む */
.scrub{opacity:.08;will-change:transform,opacity;backface-visibility:hidden}
.para{will-change:transform;transform:scale(1.16)}

/* ── カードが交互に左右から飛んでくる入場演出（app.js の staggerIn） ──
   スクロール連動のscrubとは別物。画面に入った瞬間に1回だけ再生して止まる。
   バウンス感のあるイージング（少し行き過ぎてから収まる）で軽さを出す。
   社長の指摘（2026-08-04）：実績カード・「やること」カードに追加 */
.stagger-item{opacity:0;will-change:transform,opacity;
  transition:opacity .68s cubic-bezier(.19,1.28,.42,1),transform .68s cubic-bezier(.19,1.28,.42,1)}
.stagger-item.from-l{transform:translate3d(-3.4rem,1.4rem,0) rotate(-3.5deg)}
.stagger-item.from-r{transform:translate3d(3.4rem,1.4rem,0) rotate(3.5deg)}
/* 下から突き上げる「ドン」（社長の指摘 2026-08-04：対応業種カードに使う）。
   6.56,1.65 は from-l/from-r より強めに行き過ぎてから収まる値。小刻みに1つずつ来る太鼓の連打感を出す */
.stagger-item.from-u{transform:translate3d(0,2.8rem,0) scale(.92);
  transition:opacity .58s cubic-bezier(.22,1.65,.44,1),transform .58s cubic-bezier(.22,1.65,.44,1)}
.stagger-item.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .stagger-item{transition:none;opacity:1!important;transform:none!important}
}

/* rotateX を効かせるための奥行き */
.hero-cards,.service-grid,.job-grid,.price-grid,.awards-list,
.collection-news-wrap,.flow-list,.startup-list,.blog-more-list,
.faq-wrap,.proof-grid,.vslider-track,.cta-container{perspective:1400px}

/* 速度でしなる箱 */
.stats-section .hero-cards,.service-grid,.job-grid,.price-grid,
.awards-list,.collection-news-wrap,.flow-list,.startup-list{will-change:transform}

.hero-heading,.showreel{will-change:transform,opacity,width}

/* ══ GLOW ══ */
.glow{
  position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 120% at 20% 0%,rgba(109,74,255,.55) 0%,rgba(232,35,31,.35) 45%,rgba(8,8,8,0) 72%);
  filter:blur(28px);opacity:.55;
}


/* ══ NAV ══ */
.nav-wrap{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:center;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.nav-wrap.ready{opacity:1}
.header{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:1.1rem}
.nav{
  pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:min(46rem,calc(100% - 2.5rem));background:var(--black-3);border:1px solid rgba(255,255,255,.07);
  border-radius:999px;padding:.5rem .5rem .5rem 1.1rem;
  transition:width .7s var(--ease),background-color .45s ease,border-color .45s ease;
  box-shadow:0 1rem 3rem rgba(0,0,0,.35);
}
.nav.light{background:var(--white);border-color:rgba(0,0,0,.08);box-shadow:0 1rem 3rem rgba(0,0,0,.09)}
.logo-nav{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.logo-mark{width:1.7rem;height:1.7rem;object-fit:contain;border-radius:.4rem}
.logo-text{font-size:.9rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;transition:color .45s ease}
.nav.light .logo-text{color:var(--black)}
.nav-link-wrap{display:flex;align-items:center;gap:1.5rem;overflow:hidden;transition:transform .7s var(--ease),width .7s var(--ease),opacity .5s var(--ease)}
.footer-link{display:inline-block;overflow:hidden;font-size:.86rem;white-space:nowrap}
.flip{display:block;position:relative;overflow:hidden}
.flip .l1,.flip .l2{display:block;transition:transform .5s var(--ease),color .45s ease}
.flip .l2{position:absolute;left:0;top:100%;color:var(--red)}
.footer-link:hover .l1{transform:translateY(-100%)}
.footer-link:hover .l2{transform:translateY(-100%)}
.nav .footer-link .l1{color:var(--grey-4)}
.nav.light .footer-link .l1{color:var(--grey-2)}
.header-btn-wrap{display:flex;align-items:center;gap:.45rem;overflow:hidden;transition:width .7s var(--ease)}
.nav-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;padding:.62rem 1.1rem;border-radius:999px;font-size:.82rem;font-weight:500;white-space:nowrap;isolation:isolate;transition:transform .7s var(--ease),opacity .5s var(--ease)}
.nav-btn.grey{background:var(--grey-2)}
.nav.light .nav-btn.grey{background:var(--white-3)}
.nav-btn.dark{background:var(--red)}
.btn-text{position:relative;z-index:2;transition:color .35s ease}
.nav.light .nav-btn.grey .btn-text{color:var(--black)}
.nav-btn.dark .btn-text{color:#fff}
.explode{position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;background:var(--red);transform:scale(.1);transition:transform .55s var(--ease),opacity .3s;opacity:0;z-index:1;margin:-6px 0 0 -6px;pointer-events:none}
.nav-btn:hover .explode,.btn-pill:hover .explode{opacity:1}
.nav-btn.dark .explode{background:var(--black)}
.burger{display:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--grey-2);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:15px;height:1.6px;background:#fff;transition:transform .4s var(--ease),opacity .3s}
.nav.light .burger{background:var(--white-3)}
.nav.light .burger i{background:var(--black)}
.burger.open i:nth-child(1){transform:translateY(3.3px) rotate(45deg)}
.burger.open i:nth-child(2){transform:translateY(-3.3px) rotate(-45deg)}

.nav.shrink{width:min(21rem,calc(100% - 2.5rem))}
.nav.shrink .nav-link-wrap{width:0;opacity:0;transform:scale(.6);gap:0;visibility:hidden}
.nav.shrink #navBtnLine{width:0;padding:0;opacity:0;transform:scale(.6)}

.mob-menu{pointer-events:auto;display:none;visibility:hidden;flex-direction:column;justify-content:space-between;gap:2rem;width:calc(100% - 2.5rem);margin-top:.6rem;padding:1.6rem 1.4rem;background:var(--black-3);border:1px solid rgba(255,255,255,.08);border-radius:1.4rem;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s ease,padding .4s ease}
.mob-menu.open{max-height:36rem;opacity:1;visibility:visible}
.mob-nav-block{display:flex;flex-direction:column;gap:.15rem}
.mob-nav-link{font-size:1.5rem;font-weight:700;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.mob-social-block{display:flex;flex-direction:column;gap:.35rem}
.mail-link{color:var(--grey-4);font-size:.95rem}
.nav-btn.mob{width:100%;padding:1rem;font-size:1rem}

@media (max-width:1024px){
  .nav-link-wrap,.header-btn-wrap{display:none}
  .burger{display:flex}
  .mob-menu{display:flex}
  .nav{width:calc(100% - 2.5rem);padding:.55rem .55rem .55rem 1rem}
  .nav.shrink{width:calc(100% - 2.5rem)}
}

/* ══ BUTTONS ══ */
.btn-pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.9rem;border-radius:999px;font-size:.95rem;font-weight:500;isolation:isolate;transition:border-color .4s ease}
.btn-pill.red{background:var(--red);color:#fff}
.btn-pill.red .explode{background:var(--black)}
.btn-pill.ghost{border:1px solid rgba(255,255,255,.18);color:var(--white)}
.btn-pill.ghost .explode{background:var(--red)}
.btn-pill.full{width:100%}
.btn-pill.submit{padding:1.15rem;font-size:1rem;margin-top:.6rem}
.btn-secondary{display:inline-flex;align-items:center;gap:.7rem;font-size:.95rem;font-weight:500;padding:.9rem 0;position:relative}
.btn-text-wrap{position:relative;display:block;overflow:hidden}
.btn-text-wrap .t1,.btn-text-wrap .t2{display:block;transition:transform .5s var(--ease)}
.btn-text-wrap .t2{position:absolute;left:0;top:100%;color:var(--red)}
.btn-secondary:hover .t1,.btn-secondary:hover .t2{transform:translateY(-100%)}
.btn-icon-wrap{position:relative;display:block;overflow:hidden;width:1.2rem;height:1.2rem}
.btn-icon-wrap i{position:absolute;left:0;top:0;font-style:normal;transition:transform .5s var(--ease)}
.btn-icon-wrap .i2{transform:translate(-100%,100%)}
.btn-secondary:hover .i1{transform:translate(100%,-100%)}
.btn-secondary:hover .i2{transform:none;color:var(--red)}
.btn-secondary.news{margin:3rem auto 0;display:flex;width:max-content}

/* ══ 01 HERO ══ */
.hero-height{position:relative;background:var(--black)}
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:9rem 0 0;overflow:hidden}
.hero .container.full{display:flex;flex-direction:column;align-items:center;gap:3rem}
.hero-heading{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;position:relative;z-index:3}
.hero-tag-wrap{position:relative;display:inline-block}
.hero-tag{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.1rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(185% 106% at 66% 82%,#131111 0%,#262222 100%);font-size:.8rem;color:var(--grey-4)}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,35,31,.18);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(232,35,31,0)}}
.hero-tag-glow{filter:blur(22px);opacity:.35;inset:-6px}
.heading-hero{font-size:clamp(2.1rem,5.6vw,5.4rem);line-height:1.14;font-weight:900;letter-spacing:-.02em}
.hero-sub{font-size:clamp(.92rem,1.15vw,1.12rem);color:var(--grey-4);line-height:1.9;max-width:44rem}
.hero-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}

.show-wrap{width:100%;display:flex;justify-content:center;position:relative;z-index:2}
.showreel{position:relative;width:52%;border-radius:1.7rem;background:linear-gradient(180deg,#1a1a1a,#0c0c0c);padding:.5rem;border:1px solid rgba(255,255,255,.08);will-change:width,border-radius}
.showreel-frame{border-radius:1.25rem;overflow:hidden;aspect-ratio:1600/955;background:#111;position:relative}
/* 暗いエフェクト（社長の指摘 2026-08-05）。上を薄く・下を濃くして、将来ここに文字を置いても読める形にした */
.showreel-frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.4) 100%)}
.showreel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:0;transition:opacity 1.3s var(--ease)}
/* 「チャンチャンチャン」＝クロスフェードで切り替わる（app.js の showreelCycle）＋
   表示中はゆっくり拡大し続けるKen Burns風の動き。1枚だけでも止まって見えないようにする */
.showreel-img.is-on{opacity:1;position:relative;animation:showreelKen 8s ease-in-out infinite alternate}
@keyframes showreelKen{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){.showreel-img.is-on{animation:none}}
.hero-gradient{filter:blur(46px);opacity:.42;inset:-10px}
@media (max-width:767px){.showreel{width:100%!important;border-radius:1rem!important}.showreel-frame{border-radius:.75rem!important}}

.floaters{position:absolute;inset:0;pointer-events:none;z-index:1;perspective:1200px}
.floater{position:absolute;will-change:transform;transform-style:preserve-3d}
.fl-card{background:rgba(20,20,20,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:1rem;padding:.9rem 1.05rem;box-shadow:0 1.4rem 3rem rgba(0,0,0,.5)}
.fl-row{display:flex;align-items:center;gap:.4rem}
.fl-dot{width:7px;height:7px;border-radius:50%;background:var(--grey-3)}
.fl-dot.g{background:#34a853}
.fl-label{font-size:.68rem;color:var(--grey-3);letter-spacing:.02em}
.fl-big{font-size:2rem;font-weight:900;line-height:1.1;letter-spacing:-.03em}
.fl-big.red{color:var(--red)}
.fl-big sup{font-size:.42em;font-weight:700;margin-left:.12em;vertical-align:super}
.fl-mid{font-size:1.15rem;font-weight:900;letter-spacing:-.02em;line-height:1.3;margin-top:.15rem}
.fl-sub{font-size:.66rem;color:var(--grey-3);margin-top:.15rem}
.fl-chat{display:flex;flex-direction:column;gap:.35rem;max-width:14rem}
.fl-bubble{font-size:.68rem;padding:.42rem .7rem;border-radius:.8rem;background:var(--grey-1);color:var(--white-3)}
.fl-bubble.me{background:var(--red);color:#fff;align-self:flex-end}
.fl-mini{padding:.32rem;width:8.5rem}
.fl-mini img{border-radius:.7rem;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.f1{left:2.5%;top:19%}.f2{right:4%;top:15%}.f3{left:4.5%;top:50%}
.f4{right:3.5%;top:47%}.f5{left:11%;top:70%}.f6{right:10%;top:68%}
@media (max-width:1440px){.f5,.f6{display:none}}
@media (max-width:1200px){.f3,.f4{display:none}}
@media (max-width:900px){.floaters{display:none}}

.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.62rem;letter-spacing:.24em;color:var(--grey-3);z-index:3}
.scroll-hint i{display:block;width:1px;height:2.4rem;background:linear-gradient(180deg,var(--grey-2),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:40%;background:var(--red);animation:sd 1.9s var(--ease) infinite}
@keyframes sd{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
@media (max-width:767px){.scroll-hint{display:none}.hero{min-height:auto;padding:7.5rem 0 3rem}}

/* ══ 02 STATS ══ */
.stats-section{padding-top:5rem}
.anim-heading{font-size:clamp(1.35rem,2.55vw,2.5rem);line-height:1.55;font-weight:700;max-width:58rem;margin-bottom:4rem;letter-spacing:-.01em}
.anim-heading.mid{margin-bottom:3rem}
.hero-cards{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stats-card-wrapper{position:relative;border-radius:1.4rem;isolation:isolate}
/* ガラス化（社長の指摘 2026-08-04：CTAカードの見た目が良かったので実績カードにも展開） */
.stats-card{position:relative;height:100%;border-radius:1.4rem;
  background:linear-gradient(150deg,rgba(32,32,32,.6),rgba(9,9,9,.78));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
  padding:2rem 1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;min-height:15rem;transition:transform .6s var(--ease),border-color .5s ease}
.stats-card-wrapper:hover .stats-card{transform:translateY(-.5rem);border-color:rgba(255,255,255,.16)}
/* CTAカードに合わせて常時薄く光らせる（社長の指摘 2026-08-04）。ホバーで強まるのは変えない */
.stats-card-wrapper .glow{opacity:.22;transition:opacity .6s ease}
.stats-card-wrapper:hover .glow{opacity:.6}
.card-hero-heading{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:900;letter-spacing:-.045em;line-height:1}
.card-hero-heading small{font-size:.32em;font-weight:700;margin-left:.1em;letter-spacing:0}
.card-hero-desc{font-size:.85rem;color:var(--grey-4);line-height:1.75}
.edge-fade{display:none}
@media (max-width:1100px){.hero-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .hero-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1.25rem;padding:0 1.25rem 1rem;gap:.75rem}
  .stats-card-wrapper{flex:0 0 70%;scroll-snap-align:center}
  .stats-card{min-height:12rem;padding:1.5rem 1.25rem;gap:1.5rem}
  .edge-fade{display:block;position:absolute;top:0;bottom:0;width:2rem;pointer-events:none;z-index:2}
  .edge-fade.left{left:-1.25rem;background:linear-gradient(90deg,var(--black),transparent)}
  .edge-fade.right{right:-1.25rem;background:linear-gradient(270deg,var(--black),transparent)}
  /* 横スクロールのカルーセルなので、左右へのオフセットのままだと隣のカードに重なる。
     ここだけ下からの入場に変える（回転はそのまま残す） */
  .stats-card-wrapper.from-l,.stats-card-wrapper.from-r{transform:translate3d(0,1.6rem,0) rotate(0deg)}
}

/* ══ 03 STAGES ══ */
.stages-section{padding:0}
.stages-height{height:340vh;position:relative}
.stages-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:3rem;padding:6rem 2rem 3rem;max-width:82rem;margin:0 auto}
.stages-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.section-h2{font-size:clamp(1.7rem,3.4vw,3.1rem);font-weight:900;letter-spacing:-.025em;line-height:1.2}
.section-h2.center{margin:0 auto}
.stages-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.stages-left{position:relative;height:24rem;overflow:hidden}
.stages-left-wrap{display:flex;flex-direction:column;gap:2rem;transition:transform .9s var(--ease)}
.stage-item{opacity:.3;filter:blur(1px);min-height:22rem;will-change:transform,opacity,filter}
.stage-item.is-active{opacity:1;filter:none}
.stage-num{font-size:1rem;letter-spacing:.2em;color:var(--red);font-weight:700;margin-bottom:.9rem}
.stage-h{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1.3rem;line-height:1.2}
.stage-body{display:flex;flex-direction:column;gap:.9rem}
.stage-body p{font-size:1.15rem;color:var(--grey-4);line-height:1.85}
.top-fade{position:absolute;left:0;right:0;top:0;height:4rem;background:linear-gradient(180deg,var(--black),transparent);pointer-events:none;z-index:2}
.bot-fade{position:absolute;left:0;right:0;bottom:0;height:5rem;background:linear-gradient(0deg,var(--black),transparent);pointer-events:none;z-index:2}

.stages-right{display:flex;align-items:center;justify-content:center}
.rotate-flexbox{width:100%;height:26rem;display:flex;align-items:center;justify-content:center;perspective:1400px}
.rotate-ellipse{position:relative;width:20rem;height:14rem;transform-style:preserve-3d}
.rotate-card{position:absolute;left:50%;top:50%;width:20rem;height:13rem;margin:-6.5rem 0 0 -10rem;border-radius:1.2rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#111;box-shadow:0 2rem 4rem rgba(0,0,0,.6);will-change:transform,opacity}
/* JSが動く前でも輪に見えるよう初期配置を持たせる（JSが上書きする） */
.rotate-card.c1{transform:translate3d(0,0,0) scale(1);opacity:1;z-index:100}
.rotate-card.c2,.rotate-card.c3{transform:translate3d(0,62%,0) scale(.86) rotateX(-14deg);opacity:0;z-index:0}
.rotate-card img{width:100%;height:100%;object-fit:cover}
.stages-mob{display:none}
@media (max-width:1100px){
  .stages-height{display:none}
  .stages-mob{display:flex;flex-direction:column;gap:1rem;padding:4.5rem 1.25rem}
  .stage-mob{border-radius:1.3rem;overflow:hidden;background:var(--black-3);border:1px solid rgba(255,255,255,.07)}
  .stage-mob img{aspect-ratio:620/400;object-fit:cover;width:100%;height:auto}
  .stage-mob-body{padding:1.4rem}
  .stage-mob-body h3{font-size:1.25rem;font-weight:900;margin:.3rem 0 .6rem}
  .stage-mob-body p{font-size:.9rem;color:var(--grey-4)}
}

/* ══ FLOW（ピン留め＋スクラブ） ══
   社長の指摘（2026-08-05）：stages-section と同じ手法をもっと増やしたい。
   901px以上×620px以上でのみピン留め。境界の考え方は .yourjob-height と同じにしていたが、
   撤去済みなのでここが唯一の「幅×高さ」判定になる。app.js の mqFlow と文字列を揃える */
.flow-height{position:relative}
.flow-sticky{padding:6rem 0 3rem}
.flow-pin-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-top:2.5rem}
.flow-pin-left{position:relative;height:22rem;overflow:hidden}
.flow-pin-list{display:flex;flex-direction:column;gap:2rem;transition:transform .9s var(--ease)}
.flow-pin-item{opacity:.3;filter:blur(1px);min-height:20rem;will-change:transform,opacity,filter}
.flow-pin-item.is-active{opacity:1;filter:none}
.flow-pin-step{font-size:1rem;letter-spacing:.2em;color:var(--red);font-weight:700;margin-bottom:.9rem}
.flow-pin-h{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:900;letter-spacing:-.02em;margin-bottom:1rem;line-height:1.25}
.flow-pin-p{font-size:1.05rem;color:var(--grey-4);line-height:1.85;max-width:30rem}
.flow-pin-right{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;height:22rem}
.flow-pin-num{font-size:clamp(6rem,9vw,9rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:rgba(255,255,255,.9)}
.flow-pin-time{font-size:.95rem;color:var(--grey-3);letter-spacing:.04em}
.flow-pin-dots{display:flex;gap:.5rem}
.flow-pin-dots i{width:1.6rem;height:2px;background:rgba(255,255,255,.18);transition:background-color .35s var(--ease),width .35s var(--ease)}
.flow-pin-dots i.on{width:3.2rem;background:var(--red)}
.flow-mob{display:none}
@media (min-width:901px) and (min-height:620px){.flow-height{height:280vh}.flow-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}}
@media (max-width:900px),(max-height:619px){
  .flow-height{display:none}
  .flow-mob{display:block;padding-top:1rem}
}

/* ══ VOICES（ピン留め＋スクラブ） ══ */
.voices-height{position:relative}
.voices-pin-grid{display:grid;grid-template-columns:16rem 1fr;gap:3rem;align-items:center}
.voices-pin-left{display:flex;flex-direction:column;gap:1rem}
.voices-pin-q{font-size:3.4rem;font-weight:900;color:var(--red);line-height:1}
.voices-pin-cat{font-size:1.1rem;font-weight:700;color:#1a1a1a}
.voices-pin-dots{display:flex;flex-direction:column;gap:.6rem}
.voices-pin-dots i{width:2px;height:1.6rem;background:rgba(0,0,0,.14);transition:background-color .35s var(--ease),height .35s var(--ease)}
.voices-pin-dots i.on{height:3.2rem;background:var(--red)}
.voices-pin-right{position:relative;height:16rem;overflow:hidden}
.voices-pin-list{display:flex;flex-direction:column;gap:2rem;transition:transform .9s var(--ease)}
.voices-pin-item{opacity:.25;filter:blur(1px);min-height:14rem;will-change:transform,opacity,filter}
.voices-pin-item.is-active{opacity:1;filter:none}
.voices-pin-item .vs-h{color:#111}
.voices-pin-item .vs-a{color:#555}
.voices-mob{display:none}
@media (min-width:901px) and (min-height:620px){.voices-height{height:260vh}.voices-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center}}
@media (max-width:900px),(max-height:619px){
  .voices-height{display:none}
  .voices-mob{display:block;padding-top:2rem}
}

/* reduce時：JS(makePinScrub)がreduceを見て早期returnし、以後スタイルを一切書かなくなる。
   初期HTMLは1枚目だけ .is-active（=不透明）で残り4〜5枚が opacity:.3 のまま固定されてしまうため、
   全部くっきり見える縦積みに戻す。overflow:hidden の高さ制約も外して、はみ出さないようにする */
@media (prefers-reduced-motion:reduce){
  .flow-pin-left{height:auto;overflow:visible}
  .flow-pin-list{gap:3rem}
  .flow-pin-item{opacity:1!important;filter:none!important;transform:none!important;min-height:0}
  .voices-pin-right{height:auto;overflow:visible}
  .voices-pin-list{gap:3rem}
  .voices-pin-item{opacity:1!important;filter:none!important;transform:none!important;min-height:0}
}

/* ══ 04 SERVICES ══ */
.section-heading-wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:2rem;margin-bottom:2rem}
.section-name{font-size:.8rem;letter-spacing:.2em;color:var(--grey-3);font-weight:500;padding-top:.4rem;text-transform:uppercase}
.v-line{position:relative;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);height:6rem;justify-self:center}
.v-line.tall{height:100%;min-height:5rem}
.glow.line{filter:blur(14px);opacity:.5;inset:-4px}
.serv-sub-row{display:grid;grid-template-columns:auto 1fr;gap:2rem;max-width:52rem;margin:0 0 4rem 6rem;align-items:stretch}
.hero-tag-wrap.serv{align-self:center;margin-bottom:1.4rem}
@media (max-width:900px){
  .section-heading-wrap{grid-template-columns:1fr;gap:1rem}
  .v-line{display:none}
  .serv-sub-row{grid-template-columns:1fr;margin:0 0 3rem}
}

.pink-cursor{position:fixed;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,168,.6) 0%,rgba(255,138,168,.22) 45%,rgba(255,138,168,0) 72%);
  pointer-events:none;z-index:840;opacity:0;transition:opacity .45s ease;mix-blend-mode:screen;will-change:transform}
.pink-cursor.on{opacity:1}
@media (hover:none),(pointer:coarse){.pink-cursor{display:none}}

.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.card-glow{position:relative;border-radius:1.5rem;isolation:isolate}
.card-glow.s1{grid-column:span 2}.card-glow.s2{grid-column:span 4}
.card-glow.s3{grid-column:span 3}.card-glow.s4{grid-column:span 3}
.card-glow.s5{grid-column:span 4}.card-glow.s6{grid-column:span 2}
.card-glow .glow{opacity:0;transition:opacity .6s ease}
.card-glow:hover .glow{opacity:.5}
.service-card{
  position:relative;height:100%;min-height:19rem;border-radius:1.5rem;overflow:hidden;
  background:linear-gradient(160deg,#151515,#0a0a0a);border:1px solid rgba(255,255,255,.07);
  padding:2rem;display:flex;flex-direction:column;gap:.8rem;transition:border-color .5s ease;
}
.card-glow:hover .service-card{border-color:rgba(255,255,255,.15)}
.service-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .5s;z-index:1;pointer-events:none;background:radial-gradient(28rem circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 42%)}
#cards:hover .service-card::before{opacity:1}
.sc-num{font-size:.7rem;letter-spacing:.2em;color:var(--red);font-weight:700;position:relative;z-index:2}
.sc-title{font-size:clamp(1.2rem,1.85vw,1.65rem);font-weight:900;letter-spacing:-.02em;position:relative;z-index:2}
.sc-desc{font-size:.88rem;color:var(--grey-4);line-height:1.85;max-width:26rem;position:relative;z-index:2}
.sc-visual{margin-top:auto;position:relative;z-index:2;padding-top:1.5rem}

.sv-structure{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.sv-structure i{height:1.5rem;border-radius:.35rem;background:var(--grey-1);animation:svPulse 3.2s var(--ease) infinite}
.sv-structure i:nth-child(1){grid-column:span 3;background:var(--grey-2)}
.sv-structure i:nth-child(2){animation-delay:.2s}.sv-structure i:nth-child(3){animation-delay:.4s}
.sv-structure i:nth-child(4){animation-delay:.6s}.sv-structure i:nth-child(5){grid-column:span 2;animation-delay:.8s}
.sv-structure i:nth-child(6){animation-delay:1s;background:var(--red)}
@keyframes svPulse{0%,100%{opacity:.55}50%{opacity:1}}
.sv-text{display:flex;flex-direction:column;gap:.42rem;max-width:22rem}
.sv-text b{height:.6rem;border-radius:.3rem;background:var(--grey-1);display:block;animation:svW 3.6s var(--ease) infinite}
.sv-text b:nth-child(1){width:92%}.sv-text b:nth-child(2){width:78%;animation-delay:.25s}
.sv-text b:nth-child(3){width:86%;animation-delay:.5s}.sv-text b:nth-child(4){width:60%;animation-delay:.75s}
.sv-text b:nth-child(5){width:40%;background:var(--red);animation-delay:1s}
@keyframes svW{0%,100%{opacity:.4}50%{opacity:1}}
.sv-design{display:flex;gap:.5rem}
.sv-design span{width:2.6rem;height:2.6rem;border-radius:.7rem}
.sv-design span:nth-child(1){background:var(--red)}
.sv-design span:nth-child(2){background:var(--white-3)}
.sv-design span:nth-child(3){background:var(--grey-1);border:1px solid var(--grey-2)}
.sv-deploy{margin-top:1.5rem;border-radius:.8rem;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.sv-deploy img{aspect-ratio:16/6;object-fit:cover;object-position:top}
.sv-seo{display:flex;align-items:flex-end;gap:.45rem;height:5rem}
.sv-seo .bar{flex:1;border-radius:.3rem .3rem 0 0;background:var(--grey-1);transition:height .8s var(--ease)}
.sv-seo .b1{height:24%}.sv-seo .b2{height:46%}.sv-seo .b3{height:68%}.sv-seo .b4{height:100%;background:var(--red)}
.card-glow:hover .sv-seo .b1{height:34%}.card-glow:hover .sv-seo .b2{height:58%}
.card-glow:hover .sv-seo .b3{height:80%}.card-glow:hover .sv-seo .b4{height:100%}
.sv-care{display:flex;gap:.5rem}
.sv-care i{width:.55rem;height:.55rem;border-radius:50%;background:var(--grey-2);animation:svDot 1.6s infinite}
.sv-care i:nth-child(2){animation-delay:.2s}.sv-care i:nth-child(3){animation-delay:.4s}
@keyframes svDot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-.25rem);background:var(--red)}}
@media (max-width:900px){
  .service-grid{grid-template-columns:1fr}
  .card-glow.s1,.card-glow.s2,.card-glow.s3,.card-glow.s4,.card-glow.s5,.card-glow.s6{grid-column:span 1}
  .service-card{min-height:0;padding:1.6rem}
}

/* ══ 05 YOUR JOB ══ */
.job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
/* ガラス化（社長の指摘 2026-08-04） */
.job-card{position:relative;border-radius:1.5rem;overflow:hidden;
  background:linear-gradient(150deg,rgba(32,32,32,.6),rgba(9,9,9,.78));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
  padding:2rem 2rem 0;display:flex;flex-direction:column;gap:.7rem;transition:transform .6s var(--ease),border-color .5s}
.job-card:hover{transform:translateY(-.5rem);border-color:rgba(255,255,255,.16)}
.job-num{font-size:.7rem;letter-spacing:.2em;color:var(--red);font-weight:700}
.job-card h3{font-size:1.35rem;font-weight:900;letter-spacing:-.02em}
.job-card p{font-size:.88rem;color:var(--grey-4);line-height:1.85}
.job-img{margin:1.2rem -2rem 0;overflow:hidden}
.job-img img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}

@media (max-width:900px){.job-grid{grid-template-columns:1fr}}

/* ── job-grid.rich：もっと存在感のあるカード ── */
.job-grid.rich{gap:1.3rem}
.job-card-wrap{position:relative;border-radius:1.6rem;isolation:isolate}
/* CTAカードに合わせて常時薄く光らせる（社長の指摘 2026-08-04）。ホバーで強まるのは変えない */
.job-card-wrap .glow{opacity:.22;transition:opacity .6s ease}
.job-card-wrap:hover .glow{opacity:.6}
.job-grid.rich .job-card{height:100%;border-radius:1.6rem}
.job-grid.rich .job-card:hover{border-color:rgba(255,255,255,.22)}
.job-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem}
.job-grid.rich .job-num{
  width:2.7rem;height:2.7rem;border-radius:50%;font-size:1.05rem;letter-spacing:0;
  background:linear-gradient(155deg,var(--red-bright),var(--red-d));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 .7rem 1.6rem rgba(216,27,24,.35);flex-shrink:0;
}
.job-time{font-size:.72rem;color:var(--grey-4);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.32rem .8rem;white-space:nowrap}
.job-grid.rich .job-card h3{font-size:1.55rem;margin-top:.2rem}
.job-grid.rich .job-card p{font-size:.92rem;line-height:1.95}
.job-grid.rich .job-img{margin:1.4rem -2rem 0;border-top:1px solid rgba(255,255,255,.07)}
.job-grid.rich .job-img img{transition:transform .8s var(--ease)}
.job-card-wrap:hover .job-img img{transform:scale(1.05)}
@media (max-width:767px){
  .job-grid.rich .job-card{padding:1.6rem 1.6rem 0}
  .job-grid.rich .job-img{margin:1.2rem -1.6rem 0}
}

/* ══ 06 FLOW ══ */
.section-heading{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-bottom:4rem}
.shadow-v{width:1px;height:4rem;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent)}
.shadow-v.white{background:linear-gradient(180deg,rgba(0,0,0,.2),transparent)}
.flow-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.08)}
.flow-item{display:grid;grid-template-columns:8rem 1fr 8rem;gap:2rem;align-items:start;padding:2.2rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);position:relative;transition:background-color .5s ease}
.flow-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.flow-item:hover::before{transform:scaleY(1)}
.flow-item:hover{background:rgba(255,255,255,.02)}
.flow-step{font-size:.72rem;letter-spacing:.18em;color:var(--grey-3);font-weight:700;padding-top:.35rem}
.flow-body h3{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;margin-bottom:.6rem}
.flow-body p{font-size:.9rem;color:var(--grey-4);line-height:1.9;max-width:42rem}
.flow-time{font-size:.78rem;color:var(--grey-3);text-align:right;padding-top:.4rem;white-space:nowrap}
@media (max-width:767px){.flow-item{grid-template-columns:1fr;gap:.5rem;padding:1.6rem .8rem}.flow-time{text-align:left}}

/* ══ 07 PRICING ══ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:stretch}
/* ガラス化（社長の指摘 2026-08-04） */
.price-card{position:relative;border-radius:1.7rem;
  background:linear-gradient(150deg,rgba(32,32,32,.6),rgba(9,9,9,.78));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
  padding:2.4rem;display:flex;flex-direction:column;gap:0;isolation:isolate;transition:transform .5s var(--ease),border-color .5s,box-shadow .5s}
.price-card:hover{transform:translateY(-.6rem);border-color:rgba(255,255,255,.22);box-shadow:0 1.5rem 3rem rgba(0,0,0,.4)}
.price-card.featured{border-color:rgba(216,27,24,.55);background:linear-gradient(160deg,#211414,#0c0808)}
.price-card.featured:hover{box-shadow:0 1.5rem 3rem rgba(216,27,24,.2)}
.price-badge{position:absolute;top:-.8rem;left:2.4rem;background:var(--red-bright);color:#fff;font-size:.72rem;font-weight:800;padding:.35rem .9rem;border-radius:999px;letter-spacing:.02em;box-shadow:0 .4rem 1rem rgba(216,27,24,.4)}
.price-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.price-icon{width:2.3rem;height:2.3rem;border-radius:.7rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:var(--grey-4);flex-shrink:0}
.price-card.featured .price-icon{background:rgba(216,27,24,.18);border-color:rgba(216,27,24,.4);color:#ff8f8d}
.price-tag{font-size:.78rem;color:var(--grey-4);letter-spacing:.02em;line-height:1.5}
.price-name{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;margin-bottom:1.2rem}
.price-hero{display:flex;align-items:baseline;gap:.25rem}
.price-hero-num{font-size:clamp(2.1rem,3.4vw,2.7rem);font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.price-hero-unit{font-size:1.1rem;font-weight:800;color:var(--grey-4)}
.price-hero-sub{font-size:.75rem;color:var(--grey-3);margin-top:.4rem}
.price-initial{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--grey-4);margin-top:.8rem;line-height:1.4}
.price-val{font-size:1.1rem;font-weight:700;color:#fff}
.price-grow-note{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--grey-4);font-weight:600;
  margin:1.1rem 0 1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.09)}
.tag-optional{font-size:.66rem;font-weight:700;color:var(--grey-3);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.15rem .55rem}
.price-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;margin:0 0 1.7rem;flex:1}
.price-list li{font-size:.9rem;color:var(--grey-4);padding-left:1.6rem;position:relative;line-height:1.7}
.price-list li::before{content:"✓";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;
  background:rgba(216,27,24,.16);color:var(--red-bright);font-size:.62rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.price-glow{opacity:.4;filter:blur(34px)}
.price-foot{font-size:.78rem;color:var(--grey-3);margin-top:2rem;text-align:center;max-width:48rem;margin-left:auto;margin-right:auto;line-height:1.9}
@media (max-width:1100px){.price-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.price-grid{grid-template-columns:1fr}}

/* ══ 08 CLIENTS (white) ══ */
.clients-section{background:var(--white);color:var(--black);border-radius:2.5rem 2.5rem 0 0}
.voices-section{background:var(--white);color:var(--black)}
.clients-section .b1,.voices-section .b1{color:var(--grey-3)}
.proof-block{margin-bottom:7rem}
.section-heading.white{margin-bottom:3.5rem}
.brands-heading{font-size:clamp(1.35rem,2.5vw,2.3rem);font-weight:900;letter-spacing:-.02em;text-align:center;max-width:50rem;line-height:1.5}
.proof-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:3rem;align-items:center}
.proof-photo{position:relative;border-radius:1.6rem;overflow:hidden;background:var(--white-3)}
.proof-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.proof-caption{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-radius:.9rem;padding:.8rem 1rem;display:flex;flex-direction:column}
.proof-caption b{font-size:.9rem}
.proof-caption span{font-size:.75rem;color:var(--grey-3)}
.proof-text p{font-size:1rem;line-height:2;color:var(--grey-2);margin-bottom:1.1rem}
.proof-text .lead{font-size:1.35rem;font-weight:700;color:var(--black);line-height:1.7}
.proof-text b{color:var(--black)}
.proof-facts{display:flex;gap:2.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--white-3)}
.proof-facts div{display:flex;flex-direction:column}
.proof-facts b{font-size:1.5rem;font-weight:900;letter-spacing:-.03em}
.proof-facts span{font-size:.75rem;color:var(--grey-3)}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr;gap:2rem}.proof-facts{gap:1.5rem}}

.media-coverage{margin-top:2rem;padding:2rem 2.2rem;border-radius:1.3rem;
  background:linear-gradient(155deg,#1a1a1a,#0a0a0a);border:1px solid rgba(216,27,24,.3);
  position:relative;overflow:hidden}
.media-coverage::before{content:"";position:absolute;right:-4rem;top:-4rem;width:14rem;height:14rem;
  border-radius:50%;background:radial-gradient(circle,rgba(216,27,24,.25),transparent 70%);filter:blur(20px);pointer-events:none}
.media-kicker{font-size:.75rem;letter-spacing:.14em;color:#e08a8a;font-weight:700;margin-bottom:.7rem;position:relative}
.media-headline{font-size:clamp(1.35rem,2.2vw,1.9rem);font-weight:900;letter-spacing:-.01em;line-height:1.4;color:#fff;margin-bottom:.9rem;position:relative}
.media-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;position:relative}
.media-badge{font-size:.8rem;font-weight:700;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.4rem .95rem}
.media-badge.sub{color:#d4d4d4;background:transparent}
.media-desc{font-size:.9rem;color:#b8b8b8;line-height:1.85;margin-bottom:1.3rem;position:relative;max-width:34rem}
.media-yt-link{display:inline-flex;align-items:center;gap:.6rem;font-size:.92rem;font-weight:800;color:#fff;
  background:#ff0000;padding:.85rem 1.5rem;border-radius:999px;position:relative;transition:transform .3s var(--ease),box-shadow .3s}
.media-yt-link:hover{transform:translateY(-.15rem);box-shadow:0 .8rem 1.6rem rgba(255,0,0,.35)}
.yt-icon{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:#fff;color:#ff0000;font-size:.6rem}

.heading-3{font-size:clamp(1.35rem,2.6vw,2.5rem);font-weight:900;letter-spacing:-.02em;line-height:1.6;margin-bottom:3.5rem}
/* 社長の指摘（2026-08-04）：横1行いっぱいに広がるリストは幅が広すぎる。
   カード化して3列に分け、幅を狭くした。スクロールで1枚ずつ「ドン」と
   突き上げるように現れる演出を付ける（app.js の staggerIn、mode:'up'） */
.startup-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.startup-list-item{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start;
  padding:1.7rem 1.6rem;border:1px solid var(--white-4);border-radius:1.3rem;position:relative;
  transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.startup-list-item:hover{border-color:var(--grey-2);box-shadow:0 22px 44px -26px rgba(0,0,0,.2);transform:translateY(-.3rem)}
.startup-name{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;transition:transform .5s var(--ease)}
.startup-list-item:hover .startup-name{transform:translateX(.3rem)}
.line-startup{display:none}
.startup-desc{font-size:.85rem;color:var(--grey-3);line-height:1.85;max-width:none}
.item-tag{font-size:.68rem;border:1px solid var(--white-4);border-radius:999px;padding:.24rem .7rem;color:var(--grey-3);align-self:flex-start;white-space:nowrap;transition:background-color .4s,color .4s,border-color .4s;order:-1}
.startup-list-item:hover .item-tag{background:var(--red);color:#fff;border-color:var(--red)}
@media (max-width:900px){.startup-list{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.startup-list{grid-template-columns:1fr}}

/* ══ 09 VOICES slider ══ */
.voices-head{margin-bottom:3rem;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.voices-kicker{font-size:1.15rem;letter-spacing:.08em;color:var(--grey-2);font-weight:700}
.voices-heading{display:flex;flex-direction:column;align-items:center}
.heading-2{font-size:clamp(1.8rem,4.2vw,3.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.25}
.vh-line1,.vh-line2{overflow:hidden;transition:height .7s var(--ease),transform .7s var(--ease),opacity .5s}
.vh-line2{display:flex;gap:.4rem;align-items:baseline}
.voices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.vslide{background:var(--white-2);border:1px solid var(--white-3);border-radius:1.5rem;padding:2.2rem;display:flex;flex-direction:column;gap:1.1rem;
  transition:background-color .5s ease,color .4s ease,border-color .4s ease,transform .5s var(--ease);user-select:none}
.vslide:hover{background:var(--black);color:var(--white);border-color:var(--black);transform:translateY(-.4rem)}
.vs-top{display:flex;align-items:center;gap:.7rem}
.vs-q{width:2rem;height:2rem;border-radius:50%;background:var(--red-bright);color:#fff;display:grid;place-items:center;font-size:.9rem;font-weight:900;flex-shrink:0}
.vs-cat{font-size:.82rem;color:var(--grey-2);letter-spacing:.08em;font-weight:700}
.vslide:hover .vs-cat{color:var(--grey-4)}
.vs-h{font-size:1.35rem;font-weight:900;letter-spacing:-.015em;line-height:1.55}
.vs-a{font-size:1rem;color:var(--grey-2);line-height:1.95}
.vslide:hover .vs-a{color:var(--grey-4)}
@media (max-width:1100px){.voices-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.voices-grid{grid-template-columns:1fr}}

/* ══ 10 WORKS (awards) ══ */
.bg-style{background:var(--black);position:relative;border-radius:2.5rem 2.5rem 0 0;margin-top:-2.5rem;z-index:2}
.works-section{padding-top:9rem}
.blur-wrap{position:absolute;left:50%;top:8%;width:44rem;height:22rem;transform:translateX(-50%);background:radial-gradient(50% 50% at 50% 50%,rgba(109,74,255,.2),transparent 70%);filter:blur(60px);pointer-events:none}
.awards-list{border-top:1px solid rgba(255,255,255,.08)}
.awards-item{position:relative;display:grid;grid-template-columns:1.2fr 1fr 1fr .7fr;gap:1.5rem;align-items:center;padding:1.6rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08);isolation:isolate;overflow:hidden}
.awards-bg{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(90deg,var(--red),var(--red-d));z-index:-1;transition:height .5s var(--ease)}
.awards-item:hover .awards-bg{height:100%}
.aw-name{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;transition:color .4s}
.aw-d1{font-size:.85rem;color:var(--grey-4);transition:color .4s}
.aw-d2{font-size:.85rem;color:var(--grey-4);transition:color .4s}
.aw-date{font-size:.78rem;color:var(--grey-3);text-align:right;transition:color .4s}
.awards-item:hover .aw-d1,.awards-item:hover .aw-d2{color:rgba(255,255,255,.75)}
.awards-item:hover .aw-date{color:rgba(255,255,255,.7)}
#awPeek{position:fixed;left:0;top:0;width:15rem;height:10rem;border-radius:1rem;overflow:hidden;pointer-events:none;z-index:850;opacity:0;transition:opacity .4s var(--ease);box-shadow:0 2rem 4rem rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);will-change:transform}
#awPeek.on{opacity:1}
#awPeek img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .awards-item{grid-template-columns:1fr auto;gap:.4rem;padding:1.3rem .8rem}
  .aw-name{grid-column:1/-1}.aw-d2{display:none}.aw-date{text-align:right}
  #awPeek{display:none}
}

/* ══ 11 BLOG ══ */
.blog-section{padding-top:2rem}
.heading-2.white{color:var(--white)}

/* ── コラムcoverflow（社長の指摘 2026-08-04・v3§11差し替え）──
   右→中央→左へ流れ続ける自動ループ。中央が最大・鮮明、両端が小さく霞む。
   位置計算は app.js の cfRender（stagesRender と同じ「中心からの距離で補間する」考え方）。
   4枚は正方形(700×700)の図版で、絵の中に見出しが焼き込まれている。
   aspect-ratio:1 のまま使う（16:10等に切ると見出しが切れる。site/15-REVIEW参照） */
.blog-coverflow-wrap{position:relative;overflow:hidden;padding:2.2rem 0;perspective:1200px}
.blog-coverflow{position:relative;height:19rem}
.cf-card{position:absolute;top:50%;left:50%;width:15rem;margin-left:-7.5rem;
  border-radius:1.2rem;overflow:hidden;background:var(--black-3);
  border:1px solid rgba(255,255,255,.09);will-change:transform,opacity,filter;
  display:block;text-decoration:none}
.cf-img{aspect-ratio:1;overflow:hidden;background:#111}
.cf-img img{width:100%;height:100%;object-fit:cover;display:block}
.cf-info{padding:.9rem 1.05rem}
.cf-tag{display:block;font-size:.62rem;font-weight:700;color:var(--red-bright);letter-spacing:.05em;margin-bottom:.35rem}
.cf-title{display:block;font-size:.8rem;line-height:1.5;font-weight:600;color:#fff}

.blog-more-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.blog-more-item{border-radius:1.2rem;overflow:hidden;background:var(--black-3);border:1px solid rgba(255,255,255,.07);transition:border-color .5s,transform .5s var(--ease)}
.blog-more-item:hover{border-color:rgba(255,255,255,.18);transform:translateY(-.3rem)}
.blog-more-item span{display:block;padding:1.1rem 1.2rem;font-size:.85rem;line-height:1.65;font-weight:500}
.blog-more-item.plain{display:flex;align-items:center;min-height:6.5rem}
.bm-cat{display:inline-block;font-size:.66rem;font-weight:700;color:var(--red-bright);
  border:1px solid rgba(216,27,24,.42);border-radius:999px;padding:.15rem .55rem;margin-right:.55rem;vertical-align:middle}

/* reduce時：自動で回すと乗り物酔いの原因になるので、静止した4カラムグリッドに倒す */
@media (prefers-reduced-motion:reduce){
  .blog-coverflow{height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;perspective:none}
  .cf-card{position:static;margin-left:0;width:auto;transform:none!important;opacity:1!important;filter:none!important}
}
@media (max-width:900px){
  .blog-coverflow{height:16rem}
  .cf-card{width:12.5rem;margin-left:-6.25rem}
  .blog-more-list{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:767px){
  /* 自動で回すよりタップで送れる横スクロールの方が実用的。JS側もここでは動かさない
     （app.js の cfRender は S.vw<=767 で早期returnする） */
  .blog-coverflow{height:auto;display:flex;overflow-x:auto;gap:.9rem;padding:0 1.25rem;margin:0 -1.25rem;
    scroll-snap-type:x mandatory;perspective:none}
  .cf-card{position:static;margin-left:0;flex:0 0 11rem;scroll-snap-align:center;
    transform:none!important;opacity:1!important;filter:none!important}
  .blog-more-list{grid-template-columns:1fr}
}

/* ══ 12 FAQ ══ */
.heading-3.center{margin:0 auto;text-align:center}
.heading-3.white{color:var(--white)}
.faq-wrap{max-width:56rem;margin:0 auto;border-top:1px solid rgba(255,255,255,.08)}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.5rem .5rem;text-align:left}
.faq-q{font-size:1.02rem;font-weight:500;line-height:1.6;transition:color .4s}
.faq-item.open .faq-q,.faq-toggle:hover .faq-q{color:var(--red)}
.plus{position:relative;width:1.1rem;height:1.1rem;flex-shrink:0}
.plus i{position:absolute;left:0;top:50%;width:100%;height:1.5px;background:var(--grey-4);transition:transform .45s var(--ease),background-color .4s}
.plus i:nth-child(2){transform:rotate(90deg)}
.faq-item.open .plus i{background:var(--red)}
.faq-item.open .plus i:nth-child(2){transform:rotate(0)}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-panel p{font-size:.92rem;color:var(--grey-4);line-height:2;padding:0 .5rem 1.6rem;max-width:50rem}
.faq-list{list-style:none;padding:0 .5rem 1.6rem;max-width:50rem;display:flex;flex-direction:column;gap:.5rem}
.faq-list li{font-size:.92rem;color:var(--grey-4);line-height:1.8;padding-left:1.3rem;position:relative}
.faq-list li::before{content:"";position:absolute;left:0;top:.68em;width:.7rem;height:1px;background:var(--red-bright)}

/* ══ 13 CTA ══
   社長の指摘（2026-08-04）：送られた参考画像（ガラス効果のダッシュボードカード、
   多色のアクセント）に寄せる。「赤しか使わないとつまらない」。
   ただし参考画像の中身（$264.2K 等）は架空のダッシュボード数値なので真似ない
   （CLAUDE.md §3：実績・数字を創作しない）。真似るのは見た目（ガラス・浮遊カード・多色）だけで、
   中身は既存の確定済み文言（cta-meta の3項目）をそのまま使い回す */
.cta-container{display:flex;flex-direction:column;gap:2rem}
.cta-card-wrapper{position:relative;border-radius:2rem;isolation:isolate}
.cta-card{display:grid;grid-template-columns:1.5fr .6fr;gap:2rem;align-items:center;border-radius:2rem;
  background:linear-gradient(150deg,rgba(32,32,32,.6),rgba(9,9,9,.78));
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 80px -30px rgba(0,0,0,.65);
  padding:3.5rem;overflow:hidden}
/* ガラスの縁が上端だけ淡く光る。参考画像のパネルにあった上辺ハイライト */
.cta-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%)}
.cta-kicker{display:inline-block;font-size:.78rem;font-weight:700;color:var(--red-bright);letter-spacing:.06em;margin-bottom:.9rem}
.cta-heading{font-size:clamp(1.7rem,3.6vw,3rem);font-weight:900;letter-spacing:-.03em;line-height:1.25;margin-bottom:1rem}
.cta-proof{font-size:.86rem;color:var(--grey-3);line-height:1.85;margin-top:1rem;max-width:26rem}
.cta-btn-wrap{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}
.cta-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem}
.cta-meta span{font-size:.76rem;color:var(--grey-3);position:relative;padding-left:.9rem}
.cta-meta span::before{content:"";position:absolute;left:0;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--red)}

/* 右側：QRを1枚のガラスパネルに収め、まわりに浮遊バッジを3つ添える。
   文言は左の .cta-meta と同じ3つ（最短即日返信／相談は無料／全国対応）の使い回し。
   新しい主張は増やさない。色は緑=LINE・紫・青の3色（既存トークン + 今回追加した --blue） */
.cta-right{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem}
.cta-qr-panel{position:relative;padding:1.4rem;border-radius:1.4rem;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 24px 48px -22px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;gap:.6rem}
.cta-qr{width:9.5rem;height:auto;border-radius:.8rem;background:#fff;padding:.5rem}
.qr-cap{font-size:.72rem;color:var(--grey-3)}
.cta-float{position:absolute;display:flex;align-items:center;gap:.45rem;
  padding:.5rem .85rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(20,20,20,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  animation:ctaFloat 5.5s ease-in-out infinite}
.cta-float .dot{width:8px;height:8px;border-radius:50%;flex:none}
.cta-float.f1{top:-.6rem;left:-1.6rem;animation-delay:0s}
.cta-float.f1 .dot{background:var(--line);box-shadow:0 0 10px var(--line)}
.cta-float.f2{top:2.4rem;right:-1.9rem;animation-delay:1.1s}
.cta-float.f2 .dot{background:var(--violet);box-shadow:0 0 10px var(--violet)}
.cta-float.f3{bottom:-.7rem;left:-1rem;animation-delay:2.2s}
.cta-float.f3 .dot{background:var(--blue);box-shadow:0 0 10px var(--blue)}
@keyframes ctaFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-.5rem,0)}}
@media (prefers-reduced-motion:reduce){.cta-float{animation:none}}

/* グローも赤紫だけでなく青を足した3色にする（ベースの .glow は紫→赤の2色） */
.cta-glow{opacity:.55;filter:blur(46px);
  background:radial-gradient(120% 130% at 15% 10%,rgba(109,74,255,.5) 0%,rgba(47,125,255,.32) 38%,rgba(232,35,31,.3) 68%,rgba(8,8,8,0) 86%)}

@media (max-width:900px){
  .cta-card{grid-template-columns:1fr;padding:2.2rem}
  .cta-right{order:-1}
  /* 浮遊バッジはカードの外周にはみ出す前提の位置指定。幅が狭いモバイルでは
     横に切れて読めないので、ここだけ通常の流れに戻して縦に並べる */
  .cta-float{position:static;animation:none;align-self:center}
}

.form-wrap{border-radius:2rem;background:linear-gradient(160deg,#131313,#0a0a0a);border:1px solid rgba(255,255,255,.08);padding:3rem}
.form-h{font-size:1.4rem;font-weight:900;letter-spacing:-.02em;margin-bottom:1.8rem}
.form{display:flex;flex-direction:column;gap:1rem;max-width:44rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-field{display:flex;flex-direction:column;gap:.45rem}
.f-field>span{font-size:.8rem;color:var(--grey-4)}
.f-field>span i{color:var(--red);font-style:normal}
.f-field input,.f-field select,.f-field textarea{
  font-family:inherit;font-size:.92rem;color:var(--white);background:var(--black-4);
  border:1px solid rgba(255,255,255,.1);border-radius:.7rem;padding:.85rem 1rem;
  transition:border-color .35s,background-color .35s;resize:vertical;width:100%;
}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{outline:none;border-color:var(--red);background:#222}
.f-field input::placeholder,.f-field textarea::placeholder{color:#8a8a8a}
.f-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grey-4) 50%),linear-gradient(135deg,var(--grey-4) 50%,transparent 50%);background-position:calc(100% - 1.1rem) 1.25rem,calc(100% - .75rem) 1.25rem;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.form-note{font-size:.76rem;color:var(--grey-3);line-height:1.8}
@media (max-width:767px){.f-row{grid-template-columns:1fr}.form-wrap{padding:1.8rem 1.4rem}}

/* ══ FOOTER ══ */
.footer{background:var(--black);padding:6rem 0 2.5rem;border-top:1px solid rgba(255,255,255,.07)}
.footer-main{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;padding-bottom:4rem}
.nav-block{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.footer-secondary-link-list{display:flex;flex-direction:column;gap:.5rem}
.footer-link.main{margin-bottom:.4rem}
.footer .footer-link{font-size:.88rem}
.footer .flip .l1{color:var(--grey-3)}
.footer .flip .l1.w{color:var(--white);font-weight:700}
.links-block{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.email-link{position:relative;font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:700;letter-spacing:-.01em;padding-bottom:.2rem}
.email-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 100%;transition:transform .5s var(--ease)}
.email-link:hover::after{transform-origin:0 0;transform:scaleX(1)}
.email-link.tel{color:var(--grey-4);font-size:1.05rem}
.social-link-list{display:flex;gap:.5rem;margin-top:1.2rem}
.social-footer-wrap{will-change:transform;transition:transform .4s ease-out}
.social-footer{position:relative;overflow:hidden;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--grey-1);font-size:.7rem;font-weight:700;letter-spacing:.05em;isolation:isolate}
.explode.s{background:var(--red);width:8px;height:8px;margin:-4px 0 0 -4px}
.social-footer-wrap:hover .explode.s{opacity:1;transform:scale(14)}
.footer-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.07)}
.copy{font-size:.75rem;color:var(--grey-3);line-height:1.8}
@media (max-width:900px){.footer-main{grid-template-columns:1fr;gap:2.5rem}.nav-block{grid-template-columns:1fr 1fr}}

/* ══ FLOAT CTA ══ */
.float-cta{position:fixed;right:1.5rem;bottom:1.5rem;z-index:880;display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.5rem;border-radius:999px;background:var(--red);color:#fff;font-size:.88rem;font-weight:700;box-shadow:0 1rem 2.5rem rgba(232,35,31,.4);opacity:0;transform:translateY(1.5rem);transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .4s}
.float-cta.on{opacity:1;transform:none}
.float-cta:hover{background:var(--black)}
.float-cta i{font-style:normal;transition:transform .4s var(--ease)}
.float-cta:hover i{transform:translateX(.25rem)}
@media (max-width:767px){.float-cta{right:1rem;bottom:1rem;padding:.85rem 1.2rem;font-size:.82rem}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .char{opacity:1!important;transform:none!important}
  .scrub{opacity:1!important;transform:none!important}
  .para{transform:none!important}
}


/* ══ 検収（目利き 厳 2026-07-31）で入れた修正 ══ */
/* Y14 タップ領域を44px以上に */
.footer-link{position:relative;padding:.3rem 0}
.nav-btn{min-height:2.75rem}
.burger{width:2.75rem;height:2.75rem}
.vslider-nav button{width:3.2rem;height:3.2rem;min-width:44px;min-height:44px}
.mob-nav-link{min-height:44px;display:flex;align-items:center}

/* R3 初期費用と月額を同じ大きさで並べる（片方だけ大きくしない） */
.price-lines{display:flex;flex-direction:column;gap:.55rem;margin:.9rem 0 1rem;padding:.9rem 0;
  border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.price-lines>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.price-lines dt{font-size:.95rem;color:var(--grey-4)}
.price-lines dd{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;text-align:right}
.price-card.featured .price-lines dd{color:#fff}

/* Y9 「不安なところ、先につぶします」を1つの見出しに */
.voices-h2{display:flex;flex-direction:column;align-items:center}
.vh-line1{display:block;overflow:hidden;will-change:height,opacity,transform}
.vh-line2{display:flex;gap:.5rem;align-items:baseline;justify-content:center;flex-wrap:wrap}
.vh-part{display:block}

/* Y5 リンクしないコラム見出し */
.blog-more-item.static{cursor:default;opacity:.72}
.blog-more-item.static:hover{transform:none;border-color:rgba(255,255,255,.07)}

/* R2 本文中のリンク */
.inline-link{text-decoration:underline;text-underline-offset:.2em;color:var(--white)}
.inline-link:hover{color:var(--red-bright)}
.copy .inline-link{color:var(--grey-4)}

/* キーボード操作の可視化 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--red-bright);outline-offset:3px;border-radius:4px}

/* Y17 スクロールバーは消さず細くする */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#3a3a3a;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}


/* ══════════ 2026-07-31 社長指示ぶんの追加 ══════════ */

/* LINEブランドカラー（白文字だとコントラストが足りないので文字は濃緑） */
.nav-btn.line,.btn-pill.line{background:var(--line)}
.nav-btn.line .btn-text,.btn-pill.line .btn-text{color:var(--line-ink);font-weight:700}
.nav-btn.line .explode,.btn-pill.line .explode{background:var(--line-ink)}
.nav-btn.line:hover .btn-text,.btn-pill.line:hover .btn-text{color:#fff}
.nav.light .nav-btn.line{background:var(--line)}
.nav.light .nav-btn.line .btn-text{color:var(--line-ink)}

/* リード文を読める大きさに */
.lead-lg{font-size:clamp(1rem,1.35vw,1.28rem);line-height:2;color:#c4c4c4}
.lead-lg .w{color:#fff}

/* サービスカード：2列＋図版を下に敷く */
.service-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}
.service-card{padding:2.2rem 2.2rem 0;gap:0;min-height:0;justify-content:space-between}
.sc-head{display:flex;flex-direction:column;gap:.75rem;position:relative;z-index:2}
.sc-title{font-size:clamp(1.35rem,2.1vw,1.9rem)}
.sc-desc{font-size:.95rem;line-height:1.95;max-width:none;color:#b0b0b0}
.sc-shot{margin:1.8rem -2.2rem 0;overflow:hidden;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.07)}
.sc-shot img{width:100%;height:auto;aspect-ratio:620/320;object-fit:cover;object-position:left top}
@media (max-width:900px){
  .service-grid{grid-template-columns:1fr}
  .service-card{padding:1.7rem 1.7rem 0}
  .sc-shot{margin:1.4rem -1.7rem 0}
}

/* ══ 公開してからが本番 ══ */
.grow-section{padding-top:2rem}
.grow-lead{max-width:52rem;margin:0 auto 3.5rem;display:flex;flex-direction:column;gap:1.3rem}
.grow-p{font-size:clamp(1rem,1.35vw,1.22rem);line-height:2.05;color:#b0b0b0}
.grow-p .w{color:#fff}
.grow-statement{max-width:58rem;margin:1rem auto 3.8rem;text-align:center;position:relative;padding:3.5rem 1.5rem;
  border-radius:1.6rem;border:1px solid rgba(216,27,24,.22);
  background:linear-gradient(150deg,rgba(216,27,24,.07),rgba(0,0,0,0) 55%);
  isolation:isolate;will-change:transform,opacity}
.grow-statement::before{content:"";position:absolute;left:50%;top:50%;width:38rem;height:22rem;
  transform:translate(-50%,-50%) scale(var(--glow-s,.8));opacity:var(--glow-o,.35);
  background:radial-gradient(50% 50% at 50% 50%,rgba(216,27,24,.4),transparent 72%);
  filter:blur(55px);pointer-events:none;z-index:-1;transition:opacity .1s linear}
.grow-statement-text{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:900;letter-spacing:-.02em;line-height:1.5;color:#f0f0f0;position:relative}
.grow-statement-text .hl{color:var(--red-bright);position:relative;white-space:nowrap}
.grow-statement-text .hl::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.09em;
  background:currentColor;opacity:.35;border-radius:2px}
.grow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.grow-card{border-radius:1.4rem;background:linear-gradient(160deg,#151515,#0a0a0a);
  border:1px solid rgba(255,255,255,.07);padding:2rem;display:flex;flex-direction:column;gap:.7rem;
  transition:transform .6s var(--ease),border-color .5s}
.grow-card:hover{transform:translateY(-.4rem);border-color:rgba(255,255,255,.16)}
.grow-num{font-size:.72rem;letter-spacing:.18em;color:var(--red);font-weight:700}
.grow-card h3{font-size:1.3rem;font-weight:900;letter-spacing:-.02em}
.grow-card p{font-size:.9rem;color:#a8a8a8;line-height:1.9}
.grow-note{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;
  border-radius:1.4rem;border:1px solid rgba(216,27,24,.32);background:linear-gradient(150deg,#1a1212,#0b0808);
  padding:2rem 2.4rem;margin-top:1rem}
.grow-note-l{display:flex;flex-direction:column;gap:.2rem}
.grow-note-k{font-size:.82rem;color:#a8a8a8}
.grow-note-v{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.15}
.grow-note-s{font-size:.8rem;color:#a8a8a8}
.grow-note-r{font-size:.95rem;line-height:1.95;color:#b0b0b0}
.grow-note-r .w{color:#fff}
@media (max-width:900px){
  .grow-grid{grid-template-columns:1fr}
  .grow-note{grid-template-columns:1fr;gap:1.2rem;padding:1.6rem}
}

/* ══ 立て直し型カード用の price-lines（dl/dt/dd）══ */
.price-lines dd{display:flex;align-items:baseline;gap:.5rem;justify-content:flex-end}
.price-lines dd span{font-size:.68rem;font-weight:500;color:#a8a8a8;border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:.12rem .5rem;letter-spacing:.02em}


/* ══ 2026-07-31 追加分 その2（社長フィードバック） ══ */

/* サービスを1カラムに（横並びではなく1枚ずつ下からせり上がる） */
.service-grid.single{grid-template-columns:1fr;gap:1.4rem;max-width:52rem;margin:0 auto}
.service-grid.single .service-card{
  padding:2.4rem 2.4rem 0;min-height:0;overflow:hidden;
}
.service-grid.single .sc-head{gap:.9rem}
.service-grid.single .sc-shot{margin:1.8rem -2.4rem 0;border-top:1px solid rgba(255,255,255,.07)}
.service-grid.single .sc-shot img{width:100%;height:auto;aspect-ratio:620/320;object-fit:cover}
.service-grid.single .sc-title{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.service-grid.single .sc-desc{font-size:1rem;line-height:2}
@media (max-width:767px){
  .service-grid.single .service-card{padding:1.7rem 1.7rem 0}
  .service-grid.single .sc-shot{margin:1.4rem -1.7rem 0}
}
/* 1枚ずつ、下からより強くせり上がる（既存 .scrub を上書き） */
.service-grid.single .card-glow.scrub{transition:none}

/* 導入文：3つのフレーズが出ては消える */
.cycle-lead{position:relative;width:100%;max-width:64rem;min-height:13rem;margin:0 auto;display:flex;align-items:center;justify-content:center}
.cycle-line{position:absolute;left:0;right:0;text-align:center;font-size:clamp(1.9rem,4.4vw,3.2rem);font-weight:800;
  letter-spacing:-.015em;line-height:1.4;color:#d4d4d4;
  opacity:0;transform:translateY(.9rem) scale(.97);filter:blur(2px);will-change:opacity,transform,filter}
.cycle-line .w{color:#fff}
@media (max-width:640px){.cycle-lead{min-height:11rem}.cycle-line{font-size:1.5rem}}

/* 統計カードのカウントアップ数字 */
.cnt{font-variant-numeric:tabular-nums}

/* お支払いについて */
.pay-note{max-width:56rem;margin:2.2rem auto 0;border-radius:1.2rem;background:linear-gradient(150deg,#151515,#0a0a0a);
  border:1px solid rgba(255,255,255,.08);padding:1.6rem 2rem}
.pay-note-h{font-size:.85rem;font-weight:700;color:var(--red-bright);margin-bottom:.6rem;letter-spacing:.04em}
.pay-note-p{font-size:.9rem;color:#a8a8a8;line-height:1.9}
.pay-note-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0}
.pay-note-list li{font-size:.9rem;color:#a8a8a8;line-height:1.85;padding-left:1.3rem;position:relative}
.pay-note-list li::before{content:"";position:absolute;left:0;top:.68em;width:.7rem;height:1px;background:var(--red-bright)}
.pay-note-list .w{color:#fff}

/* 立て直し型：別受付カード */
.rebuild-card{margin-top:1.4rem;border-radius:1.5rem;border:1px dashed rgba(255,255,255,.18);
  background:linear-gradient(150deg,#131313,#0a0a0a);padding:2.2rem 2.4rem;display:grid;
  grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:center}
.rebuild-l h3{margin-top:.4rem}
.rebuild-p{font-size:.92rem;color:#a8a8a8;line-height:1.9;margin-top:.9rem}
.rebuild-r .price-lines{margin-top:0}
.rebuild-r .btn-pill{margin-top:1.2rem}
@media (max-width:900px){.rebuild-card{grid-template-columns:1fr;gap:1.4rem;padding:1.7rem}}

/* 6桁の金額は少し縮めて収める */
.fl-big.long{font-size:1.55rem}
.fl-big.long .unit{font-size:.6em;font-weight:700;margin-left:.1em}

/* ══ 締めくくり（一番下） ══
   社長の指摘（2026-08-04）：画像とコピーを刷新。写真は Unsplash（Vitaly Gariev、無料・商用可）。
   テキストは画像全体にグラデーションを敷く形から、CTAカードと同じガラスパネルへ変更した */
.closing-section{padding:0 0 3rem}
.closing-media{position:relative;max-width:82rem;margin:0 auto;border-radius:1.6rem;overflow:hidden;isolation:isolate}
.closing-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 40%;display:block;filter:brightness(.92)}
.closing-overlay{position:absolute;inset:auto;left:2.6rem;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;justify-content:center;max-width:26rem;
  background:linear-gradient(150deg,rgba(32,32,32,.62),rgba(9,9,9,.8));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);border-radius:1.4rem;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 30px 60px -22px rgba(0,0,0,.55);
  padding:2.4rem 2.6rem}
.closing-kicker{font-size:.78rem;letter-spacing:.14em;color:#e08a8a;font-weight:700;margin-bottom:1rem}
.closing-text{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:900;line-height:1.55;color:#fff;letter-spacing:-.01em;max-width:32rem}
.closing-text .hl{color:var(--red-bright)}
.closing-sub{font-size:.92rem;color:#d8d8d8;line-height:1.85;margin-top:1.1rem;max-width:28rem}
.closing-credit{max-width:82rem;margin:.7rem auto 0;text-align:right;font-size:.7rem;color:var(--grey-3)}
.closing-credit a{color:var(--grey-4);text-decoration:underline}
@media (max-width:900px){.closing-overlay{left:1.6rem;right:1.6rem;max-width:none}}
@media (max-width:767px){
  /* .closing-media が overflow:hidden なので、食い込ませる負マージンは使わない
     （切れて見えなくなる）。画像の下に素直に積む */
  .closing-media{display:flex;flex-direction:column}
  .closing-overlay{position:static;inset:auto;transform:none;left:auto;right:auto;max-width:none;
    padding:1.7rem 1.6rem}
  .closing-br{display:none}
}


/* ══════════════════════════════════════════════════════════
   2026-08-01 料金比較表 ＋ 料金シミュレーター
   仕様：10-DESIGN-price-sim.md（余白 みやび）
   ══════════════════════════════════════════════════════════ */

/* 既存リテラル #ff8f8d（.price-card.featured .price-icon）に名前を付けただけ。見た目は変えていない */
:root{--red-ink:#ff8f8d}

/* 上の #pricing が padding-bottom 8rem を持っているので、こちらは詰める */
.pricedetail-section{padding-top:1rem}
@media (max-width:767px){.pricedetail-section{padding-top:0}}

.price-jump{display:flex;align-items:center;justify-content:center;min-height:44px;
  margin:1.4rem auto 0;padding:.5rem 1.2rem;font-size:.88rem;font-weight:700;color:var(--red-ink);
  border:1px solid rgba(216,27,24,.35);border-radius:999px;width:max-content;max-width:100%;
  text-align:center;line-height:1.5;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.price-jump:hover{background:rgba(216,27,24,.12);border-color:rgba(216,27,24,.6)}

/* 読み上げ専用 */
.ptab-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ══ B 料金シミュレーター ══ */
.psim{margin-top:4rem}
.psim-kicker{font-size:.78rem;font-weight:700;color:var(--red-ink);letter-spacing:.06em;text-align:center;margin-bottom:.6rem}
.psim-h{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1.35;text-align:center;margin-bottom:.9rem}
.psim-lead{margin-bottom:2.6rem}

.psim-card{border-radius:1.7rem;background:linear-gradient(160deg,#181818,#0a0a0a);
  border:1px solid rgba(255,255,255,.09);padding:2.4rem;max-width:64rem;margin:0 auto;
  display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:start}

.psim-controls{display:flex;flex-direction:column;gap:1.9rem;min-width:0}
.psim-row{min-width:0}
.psim-rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.psim-label{font-size:.95rem;color:var(--grey-4);line-height:1.5}
.psim-value{font-size:1.1rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.psim-value em{font-style:normal;font-size:.8rem;font-weight:500;color:var(--grey-3);margin-left:.25em}

/* ── スライダー本体。触る部品なので寸法は px で固定する（rem は画面幅で伸縮するため） ── */
.psim-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;padding:0;
  background:transparent;cursor:pointer;display:block}
.psim-range:active{cursor:grabbing}

.psim-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--red) 0 calc(var(--p,0) * 1%),var(--grey-1) 0);
  box-shadow:inset 0 0 0 1px var(--grey-3)}
.psim-range::-moz-range-track{height:10px;border-radius:999px;border:0;
  background:linear-gradient(90deg,var(--red) 0 calc(var(--p,0) * 1%),var(--grey-1) 0);
  box-shadow:inset 0 0 0 1px var(--grey-3)}

.psim-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;background:var(--white);border:0;margin-top:-8px;
  box-shadow:0 .3rem .8rem rgba(0,0,0,.5);
  transition:box-shadow .18s var(--ease),background-color .18s var(--ease)}
.psim-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--white);border:0;
  box-shadow:0 .3rem .8rem rgba(0,0,0,.5);
  transition:box-shadow .18s var(--ease),background-color .18s var(--ease)}

.psim-range:hover::-webkit-slider-thumb{box-shadow:0 .3rem .8rem rgba(0,0,0,.5),0 0 0 8px rgba(216,27,24,.18)}
.psim-range:hover::-moz-range-thumb{box-shadow:0 .3rem .8rem rgba(0,0,0,.5),0 0 0 8px rgba(216,27,24,.18)}
.psim-range:active::-webkit-slider-thumb{background:#fff;box-shadow:0 .3rem .8rem rgba(0,0,0,.5),0 0 0 12px rgba(216,27,24,.26)}
.psim-range:active::-moz-range-thumb{background:#fff;box-shadow:0 .3rem .8rem rgba(0,0,0,.5),0 0 0 12px rgba(216,27,24,.26)}

/* 既存グローバルの input:focus-visible は 44px×全幅の枠を光らせる。つまみに移す */
.psim-range:focus{outline:none}
.psim-range:focus-visible{outline:none}
.psim-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #080808,0 0 0 6px var(--red-bright),0 .3rem .8rem rgba(0,0,0,.5)}
.psim-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #080808,0 0 0 6px var(--red-bright),0 .3rem .8rem rgba(0,0,0,.5)}

.psim-ticks{display:flex;justify-content:space-between;margin-top:.5rem}
.psim-tick{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.psim-tick:first-child{align-items:flex-start}
.psim-tick:last-child{align-items:flex-end}
.psim-tick i{display:block;width:1px;height:.4rem;background:rgba(255,255,255,.28)}
.psim-tick span{font-size:.72rem;color:var(--grey-3);letter-spacing:.02em;line-height:1}
.psim-note-s{font-size:.78rem;color:var(--grey-3);line-height:1.9;margin-top:.7rem}

/* ── トグル（チップ） ── */
.psim-chips{display:flex;flex-wrap:wrap;gap:.6rem;position:relative}
.psim-chip-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.psim-chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  padding:.7rem 1.2rem;border-radius:999px;font-size:.88rem;cursor:pointer;line-height:1.5;
  border:1px solid rgba(255,255,255,.18);color:var(--grey-4);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.psim-chip:hover{border-color:rgba(255,255,255,.34);color:#fff}
.psim-chip-mark{width:1.15rem;height:1.15rem;flex-shrink:0;visibility:hidden}
.psim-chip-input:checked + .psim-chip{background:rgba(216,27,24,.16);border-color:rgba(216,27,24,.55);color:#fff;font-weight:700}
.psim-chip-input:checked + .psim-chip .psim-chip-mark{visibility:visible;color:#fff}
.psim-chip-input:focus-visible + .psim-chip{outline:2px solid var(--red-bright);outline-offset:3px}
.psim-chip-input:disabled + .psim-chip{opacity:.42;cursor:not-allowed;border-color:rgba(255,255,255,.1)}
.psim-chip-input:disabled + .psim-chip:hover{border-color:rgba(255,255,255,.1);color:var(--grey-4)}

/* ── 結果エリア ── */
.psim-result{border-radius:1.4rem;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);padding:1.8rem 1.6rem;min-width:0}
.psim-intro{font-size:.88rem;color:var(--grey-4);line-height:1.7;margin-bottom:1.1rem}
.psim-readout{display:flex;flex-direction:column;gap:1.1rem}
.psim-out + .psim-out{padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.09)}
.psim-out-label{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--grey-4);margin-bottom:.35rem}

/* 桁が変わっても高さが動かないよう、2行ぶんを min-height で確保しておく。
   幅つき表示は最長23文字になるので、折り返せるのは「〜」の直後と単位の前だけにする */
/* min-height は em ではなく元のサイズから calc する。
   .long で font-size が下がっても確保する高さは変わらない＝高さが動かない */
.psim-out-figure{font-size:clamp(2.3rem,3.8vw,3.0rem);line-height:1.12;
  min-height:calc(2.24 * clamp(2.3rem,3.8vw,3.0rem))}
/* 月額は最長でも「60,000円〜」。1行で足りるので1行ぶんだけ確保する */
.psim-out-figure.single{min-height:calc(1.12 * clamp(2.3rem,3.8vw,3.0rem))}
.psim-out-figure.long{font-size:clamp(1.9rem,3vw,2.4rem)}
/* 単位は必ず直前の数字と同じ行に置く（「円くらい」だけ次行に落とさない） */
.psim-out-tail{display:inline-block;white-space:nowrap}
.psim-out-num{display:inline-block;font-size:1em;font-weight:900;letter-spacing:-.03em;
  line-height:1.12;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:transform .26s var(--ease),color .26s var(--ease);transform-origin:left center}
.psim-out-num:empty{display:none}
.psim-out-num.is-bump{transform:translateY(-.05em) scale(1.035);color:var(--red-ink);transition-duration:.09s}
.psim-out-unit{font-size:1.1rem;font-weight:800;color:var(--grey-4);white-space:nowrap;margin-left:.1em}
.psim-out-sub{font-size:.78rem;color:var(--grey-3);line-height:1.9;margin-top:.25rem}

.psim-varnote{font-size:.78rem;color:var(--grey-3);line-height:1.9;min-height:1.48rem}
.psim-varnote:empty{display:none}
.psim-plan{font-size:.88rem;color:var(--grey-4);line-height:1.9}
.psim-plan-link{color:var(--red-ink);text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.psim-plan-up{display:block;font-size:.78rem;color:var(--grey-3)}
.psim-plan-up:empty{display:none}
.psim-breakdown{font-size:.82rem;color:var(--grey-4);line-height:1.9;margin-top:1.1rem;
  font-variant-numeric:tabular-nums}
.psim-note{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;gap:.4rem}
.psim-note p{font-size:.78rem;color:var(--grey-3);line-height:1.9}
.psim-cta{margin-top:1.4rem}
.psim-rebuild{font-size:.82rem;color:var(--grey-3);line-height:1.9;text-align:center;
  max-width:64rem;margin:1.2rem auto 0}

@media (max-width:900px){
  .psim-card{grid-template-columns:1fr;gap:1.8rem}
  /* スマホは指がスライダーに乗るので、結果を上に出す */
  .psim-result{order:-1}
}
@media (max-width:767px){
  .psim{margin-top:2.5rem}
  .psim-card{padding:1.7rem 1.4rem;border-radius:1.4rem}
  .psim-result{padding:1.4rem 1.2rem}
  .psim-out-figure{font-size:clamp(1.9rem,8vw,2.3rem);min-height:calc(2.24 * clamp(1.9rem,8vw,2.3rem))}
  .psim-out-figure.single{min-height:calc(1.12 * clamp(1.9rem,8vw,2.3rem))}
  .psim-out-figure.long{font-size:clamp(1.55rem,7.4vw,2.1rem)}
  .psim-out-unit{font-size:1rem}
}

/* ══ A-1 詳しい料金表 ══ */
.ptab-wrap{position:relative;margin-top:5rem}
.ptab-h{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1.35;text-align:center;margin-bottom:.9rem}
.ptab-lead{margin-bottom:2.6rem}
/* フェードはスクロール箱の外に出す。中に入れると一緒に流れていく */
.ptab-scrollwrap{position:relative}

.ptab{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;
  border-top:1px solid rgba(255,255,255,.08)}
.ptab th,.ptab td{padding:.95rem 1.1rem;text-align:left;vertical-align:top;
  font-size:.88rem;line-height:1.7;font-weight:400;color:var(--grey-4);
  border-bottom:1px solid rgba(255,255,255,.08)}
.ptab thead th{font-size:.95rem;font-weight:800;color:var(--white);vertical-align:bottom;
  border-bottom:1px solid rgba(255,255,255,.16)}
.ptab tbody th[scope="row"]{font-weight:600;color:var(--grey-4)}
.ptab thead th{width:18.75%}
.ptab thead th:first-child{width:25%}
.ptab-sub{display:block;font-size:.72rem;font-weight:400;color:var(--grey-3);margin-top:.25rem}
.ptab-plan-name{display:block}
.ptab-price{font-size:.98rem;font-weight:700;color:var(--white);font-variant-numeric:tabular-nums}
.ptab-cell-note{display:block;font-size:.74rem;color:var(--grey-3)}
.ptab tbody tr:hover td{background:rgba(255,255,255,.02)}
.ptab-mark{width:1.15rem;height:1.15rem;vertical-align:-.2em;margin-right:.3rem}
.ptab-mark.ok{color:var(--white)}
.ptab-mark.part{color:var(--red-ink)}

/* 強調列は「列まるごと」。縦罫を引くのはこの列だけ */
.ptab-feat{background:linear-gradient(180deg,rgba(216,27,24,.10) 0%,rgba(216,27,24,.03) 100%);
  border-left:1px solid rgba(216,27,24,.35);border-right:1px solid rgba(216,27,24,.35)}
.ptab thead .ptab-feat{background:#1d0a0a;border-top:1px solid rgba(216,27,24,.35);
  border-radius:1rem 1rem 0 0}
.ptab tbody tr:last-child .ptab-feat{border-bottom:1px solid rgba(216,27,24,.35)}
.ptab tbody tr:hover td.ptab-feat{background:linear-gradient(180deg,rgba(216,27,24,.14) 0%,rgba(216,27,24,.07) 100%)}
.ptab-badge{display:inline-block;font-size:.78rem;font-weight:800;color:#fff;background:var(--red-d);
  padding:.3rem .8rem;border-radius:999px;letter-spacing:.02em;
  box-shadow:0 .4rem 1rem rgba(216,27,24,.4);margin-bottom:.5rem}

.ptab-fade{position:absolute;top:0;bottom:1rem;width:2.5rem;pointer-events:none;z-index:4;display:none}
.ptab-fade.r{right:-2rem;background:linear-gradient(270deg,var(--black),transparent)}

.ptab-after{font-size:.82rem;color:var(--grey-3);line-height:1.9;margin-top:1.4rem}
.ptab-extras{display:grid;grid-template-columns:1fr 1.3fr;gap:1.4rem;margin-top:2.4rem;align-items:start}
.ptab-box{border-radius:1.3rem;background:linear-gradient(160deg,#141414,#0a0a0a);
  border:1px solid rgba(255,255,255,.07);padding:1.7rem 1.9rem}
.ptab-box-h{font-size:1rem;font-weight:800;color:var(--white);margin-bottom:.9rem;letter-spacing:-.01em}
.ptab-common,.ptab-extra{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:0}
.ptab-common li,.ptab-extra li{font-size:.85rem;color:var(--grey-4);line-height:1.8;
  padding-left:1.3rem;position:relative}
.ptab-common li::before,.ptab-extra li::before{content:"";position:absolute;left:0;top:.72em;
  width:.7rem;height:1px;background:var(--red-bright)}
.ptab-extra-foot{font-size:.78rem;color:var(--grey-3);line-height:1.9;margin-top:1rem;
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.08)}

/* 本文13行なので、PCではヘッダー行を固定する（固定ナビの下端 約4.85rem ＋ 余白） */
@media (min-width:1025px){
  .ptab thead th{position:sticky;top:5.5rem;z-index:3;background:var(--black)}
  .ptab thead th.ptab-feat{background:#1d0a0a}
}

/* 1024px以下は横スクロール。項目列を左に固定して、何の行かを見失わせない */
@media (max-width:1024px){
  /* 全幅に食い出すのと、はみ出しを止めるのは外側の箱でやる。
     内側（スクロール箱）に負マージンを付けると、中の表の幅が
     ページ全体の scrollWidth に漏れて横スクロールが出る */
  .ptab-scrollwrap{margin:0 -2rem;overflow:hidden}
  .ptab-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:0 2rem 1rem;scrollbar-width:thin}
  .ptab{table-layout:auto;min-width:42rem}
  .ptab th,.ptab td{padding:.85rem .9rem;font-size:.85rem}
  .ptab-price{font-size:.92rem}
  .ptab th[scope="row"],.ptab thead th:first-child{position:sticky;left:0;z-index:2;
    background:var(--black);box-shadow:1px 0 0 rgba(255,255,255,.08);width:auto;min-width:9rem}
  .ptab thead th:not(:first-child){min-width:11rem}
  .ptab-fade{display:block}
  .ptab-fade.r{right:0}
  .ptab-extras{grid-template-columns:1fr}
}
@media (max-width:767px){
  .ptab-wrap{margin-top:3rem}
  .ptab-scrollwrap{margin:0 -1.25rem}
  .ptab-scroll{padding:0 1.25rem 1rem}
  .ptab{min-width:36rem}
  .ptab th,.ptab td{padding:.8rem .75rem;font-size:.82rem}
  .ptab-price{font-size:.9rem}
  .ptab th[scope="row"],.ptab thead th:first-child{min-width:7.5rem}
  .ptab thead th:not(:first-child){min-width:9.5rem}
  .ptab-box{padding:1.4rem 1.4rem}
}

/* ══ A-2 月額サポート「育てる」 ══ */
.monthly-card{margin-top:4rem;border-radius:1.7rem;
  border:1px solid rgba(216,27,24,.32);background:linear-gradient(150deg,#1a1212,#0b0808);
  padding:2.4rem}
.monthly-h{font-size:1.7rem;font-weight:900;letter-spacing:-.02em;line-height:1.35;margin-bottom:.9rem}
.monthly-lead{margin-bottom:2rem}
.monthly-body{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:start;
  padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09)}
.monthly-hero{flex-shrink:0}
.monthly-figure{display:flex;align-items:baseline;gap:.25rem}
.monthly-num{font-size:clamp(2.3rem,3.8vw,3.0rem);font-weight:900;letter-spacing:-.03em;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.monthly-unit{font-size:1.1rem;font-weight:800;color:var(--grey-4)}
.monthly-sub{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--grey-3);margin-top:.5rem}
.monthly-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;min-width:0}
.monthly-lh{font-size:.95rem;font-weight:800;color:var(--white);margin-bottom:.8rem}
.monthly-list,.monthly-terms{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin:0}
.monthly-list li,.monthly-terms li{font-size:.85rem;color:var(--grey-4);line-height:1.8;
  padding-left:1.3rem;position:relative}
.monthly-list li::before,.monthly-terms li::before{content:"";position:absolute;left:0;top:.72em;
  width:.7rem;height:1px;background:var(--red-bright)}
.monthly-foot{font-size:.9rem;font-weight:700;color:#fff;line-height:1.9;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.09)}
@media (max-width:900px){
  .monthly-body{grid-template-columns:1fr;gap:1.6rem}
  .monthly-cols{grid-template-columns:1fr;gap:1.4rem}
}
@media (max-width:767px){
  .monthly-card{margin-top:2.5rem;padding:1.7rem 1.4rem;border-radius:1.4rem}
}

/* ══ セクション末尾のCTA ══ */
.pd-cta{display:flex;flex-direction:column;align-items:center;gap:1.2rem;margin-top:3.5rem}
.pd-cta-note{font-size:.95rem;color:var(--grey-4);line-height:1.9;text-align:center}


/* ══════════════════════════════════════════════════════════
   2026-08-01 /works（制作実績）追加分 — 実装 鉄平
   既存セレクタは書き換えず、末尾に追記のみ
   ══════════════════════════════════════════════════════════ */

/* ▼ この1行は /works 専用ではない。全ページに効く不具合の是正なので、
   上の /works 用ブロックを整理するときも消さないこと。
   プリローダーを廃止した時点で app.js の bootDone() が途中で return するようになり、
   .nav-wrap に .ready が付かない＝JSが動いている環境でナビが opacity:0 のまま出ない。
   bootDone() 側も直したが（12-REVIEW Y10）、こちらは二重の保険として残す。
   既定を可視にしておくと、.ready を待つフェードイン自体が起きない（L72 の opacity:0 を打ち消す） */
.nav-wrap{opacity:1}

/* 現在地のナビ項目 */
.nav .footer-link.is-current .l1{color:#fff;font-weight:700}
.nav.light .footer-link.is-current .l1{color:var(--black)}
.footer-link.is-current{position:relative}
.footer-link.is-current::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:2px;background:var(--red-bright)}
.mob-nav-link[aria-current="page"]{color:#fff}
.mob-nav-link[aria-current="page"]::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--red-bright);margin-right:.55rem;flex-shrink:0}

/* 統計カードを3枚・2枚で並べるとき（1100px以下は既存の2列→横スクロールに任せる） */
@media (min-width:1101px){
  .hero-cards.trio{grid-template-columns:repeat(3,1fr)}
  .hero-cards.duo{grid-template-columns:repeat(2,1fr)}
}

/* ── 3Dカードリングの中身：サイトの数字カード ──
   3社のうち2社はサイトの画面写真が未撮影。実物でない画像を当てると
   実績の裏が取れなくなるため、画像ではなく数字そのものをカードにする */
.rc-mock{width:100%;height:100%;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#181818,#0a0a0a)}
.rc-bar{display:flex;align-items:center;gap:.35rem;padding:.55rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.rc-bar i{width:.42rem;height:.42rem;border-radius:50%;background:var(--grey-2);flex-shrink:0}
.rc-bar i:first-child{background:#3f3f3f}
.rc-bar span{margin-left:.5rem;font-size:.62rem;color:var(--grey-4);letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.15rem;padding:1.1rem 1.2rem}
.rc-name{font-size:1.05rem;font-weight:900;letter-spacing:-.02em;color:#fff}
.rc-meta{font-size:.72rem;color:var(--grey-4)}
.rc-num{margin-top:.5rem;font-size:2rem;font-weight:900;letter-spacing:-.04em;line-height:1.05;
  color:var(--red-bright);font-variant-numeric:tabular-nums}
.rc-num em{display:block;font-style:normal;font-size:.34em;font-weight:700;letter-spacing:0;
  color:var(--grey-4);margin-top:.3rem}
.rc-foot{margin-top:.6rem;font-size:.72rem;color:#c4c4c4;line-height:1.5}
.stage-mob .rc-mock{height:auto;border-bottom:1px solid rgba(255,255,255,.07)}
.stage-mob .rc-body{padding:1.4rem}
.stage-mob .rc-num{font-size:2.4rem}

/* ── 3社サマリーカード（#cards のカーソル追従グローを流用） ── */
.wk-cards .service-card{padding-bottom:2.4rem}
.wk-dl{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:.9rem;position:relative;z-index:2}
.wk-dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.wk-dl dt{font-size:.85rem;color:var(--grey-4);flex-shrink:0}
.wk-dl dd{font-size:1.5rem;font-weight:900;letter-spacing:-.03em;color:#fff;text-align:right;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.wk-dl dd span{font-size:.72rem;font-weight:500;letter-spacing:0;color:var(--grey-4);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.14rem .55rem;white-space:nowrap}
.wk-dl dd.txt{font-size:.95rem;font-weight:700;letter-spacing:0;line-height:1.6;text-align:right}
.wk-site-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;min-height:2.75rem;
  font-size:.9rem;font-weight:700;color:#fff;position:relative;z-index:2}
.wk-site-link i{font-style:normal;color:var(--red-bright);transition:transform .4s var(--ease)}
.wk-site-link:hover{color:var(--red-bright)}
.wk-site-link:hover i{transform:translateX(.3rem)}
@media (max-width:767px){
  .wk-cards .service-card{padding-bottom:1.7rem}
  .wk-dl>div{flex-direction:column;align-items:flex-start;gap:.25rem}
  .wk-dl dd,.wk-dl dd.txt{text-align:left;justify-content:flex-start}
}

/* ── ケースの見出し ── */
.wk-case-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2.5rem}
.wk-case-kicker{font-size:.78rem;font-weight:800;letter-spacing:.2em;color:var(--red-bright)}
.wk-case-meta{font-size:.85rem;color:var(--grey-3);line-height:1.7}
.wk-sub-h{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;margin:3.5rem 0 .6rem}
.wk-sub-lead{margin-bottom:1.8rem}

/* ── 注記（出典・広告分・確認日を正直に書く場所） ── */
.wk-note{max-width:56rem;margin:2rem auto 0;font-size:.9rem;line-height:1.95;color:var(--grey-4);
  padding-left:1.1rem;border-left:2px solid rgba(255,255,255,.14)}
.wk-note .w{color:#fff}

/* ── 言い切っておきたい塊 ── */
.wk-callout{margin-top:2.5rem;border-radius:1.4rem;padding:2rem 2.2rem;
  border:1px solid rgba(216,27,24,.3);background:linear-gradient(150deg,#1a1212,#0b0808)}
.wk-callout-h{font-size:1.2rem;font-weight:900;letter-spacing:-.02em;line-height:1.5;
  color:#fff;margin-bottom:.8rem}
.wk-callout p{font-size:.95rem;line-height:1.95;color:#b0b0b0}
.wk-callout .w{color:#fff}

/* ── お客様の声 ── */
.voice-quote{margin-top:1.4rem;border-radius:1.4rem;padding:2.2rem 2.4rem;
  background:linear-gradient(160deg,#161616,#0a0a0a);border:1px solid rgba(255,255,255,.09);
  position:relative;transition:border-color .5s ease,transform .6s var(--ease)}
.voice-quote:hover{border-color:rgba(255,255,255,.2);transform:translateY(-.35rem)}
.voice-quote::before{content:"”";position:absolute;right:1.6rem;top:.4rem;font-size:5rem;line-height:1;
  color:rgba(216,27,24,.32);pointer-events:none}
.voice-quote blockquote p{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:2;color:#e5e5e5;
  font-weight:500;position:relative}
.voice-quote figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.8rem;margin-top:1.4rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.09);font-size:.95rem;font-weight:700;color:#fff}
.voice-quote figcaption span{font-size:.8rem;font-weight:400;color:var(--grey-4)}
@media (max-width:767px){
  .wk-callout{padding:1.6rem 1.4rem}
  .voice-quote{padding:1.7rem 1.5rem}
  .voice-quote::before{font-size:3.4rem;right:1rem}
}

/* ── 白セクションの締め ── */
.wk-white-foot{margin-top:3rem;font-size:1.05rem}
.clients-section .wk-white-foot b{color:var(--black);font-weight:700}

/* ── そのほか（建設業以外）。3社のケースと同格に見せないため .rebuild-card を流用 ── */
.wk-extra-section{padding-top:2rem}
.wk-extra{margin-top:0}
.wk-extra-name{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;line-height:1.4}
.wk-extra-meta{font-size:.8rem;color:var(--grey-4);margin-top:.4rem}
.wk-extra-desc{font-size:.9rem;color:#b0b0b0;line-height:1.9;margin-top:1rem}
.wk-extra-note{font-size:.8rem;color:var(--grey-3);line-height:1.8;margin-top:.8rem}
.wk-extra .wk-site-link{margin-top:1rem}

/* ══════════ 2026-08-01 検収（12-REVIEW-price-sim.md）の是正 ══════════ */

/* R4 320px。「作って終わりの買い物」は nowrap で約298pxあり、
   .grow-statement の内寸232px（container 280px − padding 1.5rem×2）を超えて
   カードの枠の外まで張り出す。340px以下では折り返しを許す。
   下線（::after）は絶対配置なので、折り返すと2行ぶんの箱にまとめて1本引かれる。
   この幅だけ、行ごとに引き直される text-decoration に付け替える
   （color-mix 非対応環境では currentColor の実線に落ちる。下線自体は残る）
   ── 2026-08-03（黄-08）ガードの breakpoint を 359px → 389px に変更。中身は1文字も変えていない。
   .hl の nowrap 幅は 295.8px 固定（font-size は320〜430pxで30.4px一定）に対し、
   .grow-statement の内寸は 320px幅で232.0 / 360で272.0 / 375で287.0 / 390で302.0。
   375px までは足りず、360pxではカードの赤枠を0.8px越えていた。390px からは 302.0>295.8 で収まる。
   実測（是正後）：@320 206.4×80.6px ／ @360 266.0×80.6px ／ @375 266.0×80.6px ／
   @430 295.8×35.0px（nowrap のまま）。全幅で枠内。 */
@media (max-width:389px){
  .grow-statement-text .hl{white-space:normal;
    text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.18em;
    text-decoration-color:color-mix(in srgb, currentColor 35%, transparent)}
  .grow-statement-text .hl::after{content:none}
}

/* Y1 グローバルの :focus-visible は要素セレクタ（a,button,input,select,textarea）なので
   div を拾わない。outline-offset は内向きにする。外向きだと 1024px以下で
   .ptab-scrollwrap{overflow:hidden} に左右を切られて見えない */
.ptab-scroll:focus-visible{outline:2px solid var(--red-bright);outline-offset:-3px;border-radius:.4rem}

/* Y7 コラム0本でトグルを無効にしたとき、checked は外れないので
   赤い「選択中」の塗りが薄く残り、押せるように見える */
.psim-chip-input:disabled:checked + .psim-chip{background:none;border-color:rgba(255,255,255,.1);
  color:var(--grey-4);font-weight:400}

/* Y2 みやび §3-2 の「767px以下はつまみ28px」が実装に入っていなかった。
   webkit はトラック（10px）の上端が基準なので margin-top は (10-28)/2 */
@media (max-width:767px){
  .psim-range::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px}
  .psim-range::-moz-range-thumb{width:28px;height:28px}
}

/* ══ 2026-08-01 第2回検収の是正 ══ */

/* Y9 みやび §3-5-1。選択中かどうかを色だけで伝えていた。
   丸の輪郭は常に出し、中のチェックの線を checked のときだけ出す＝形で区別する。
   923〜935行は書き換えず、同じ詳細度の後勝ちで上書きする */
.psim-chip-mark{visibility:visible}
.psim-chip-check{opacity:0;transition:opacity .25s var(--ease)}
.psim-chip-input:checked + .psim-chip .psim-chip-check{opacity:1}
/* 無効なのにONに見える状態を残さない（上の Y7 の続き） */
.psim-chip-input:disabled:checked + .psim-chip .psim-chip-check{opacity:0}

/* ══ 2026-08-01 みやび：デスクトップ .nav が最後の1字を隠す不具合の是正 ══
   詳細は 10-DESIGN-price-sim.md 末尾「§追補：ヘッダーnav幅」。
   75〜81行の .nav は書き換えず、1025px以上だけ後勝ちで幅を上書きする
   （@media(max-width:1024px) の .nav 幅指定＝130行より後にあるので、
   ここを @media(min-width:1025px) で必ずガードしないとモバイル側を壊す）。
   51rem の根拠：鉄平実測の要求幅675.1px（root=14px時）＝48.221rem に、
   Windows等フォント差分の余裕として約+5.8%を足した値。
   .nav-link-wrap / .header-btn-wrap の overflow:hidden・flex-shrink・gap・
   font-size は一切変えない（既存の型・余白リズムを保つため、コンテナだけ広げる）。 */
@media (min-width:1025px){
  .nav{width:min(51rem,calc(100% - 2.5rem))}
}

/* ══ 2026-08-01 実績ページ：数字の根拠画像（アクセス解析／検索結果の画面） ══
   黒い面の上に白い画面写真が直接乗ると、ページの一部なのか画面写真なのか判別がつかない。
   薄い枠と余白（マット）を回して「貼った画面写真」だと分かる形にする。
   横並びは1024px以上だけ。それ未満で2列にすると1枚あたり350px前後まで縮み、
   画面内の数字が読めなくなるため縦積みにする。
   app.js のパララックス（.para）対象セレクタには入れていない。
   画面写真は拡大して端が切れると証拠にならないため、実寸比のまま置く */
.wk-proof{margin-top:2.6rem}
.wk-proof-h{font-size:1.15rem;font-weight:900;letter-spacing:-.02em;line-height:1.5;color:#fff}
.wk-proof-lead{margin-top:.5rem;max-width:46rem;font-size:.9rem;line-height:1.9;color:var(--grey-4)}
.wk-proof-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:1.4rem}
.wk-proof-frame{padding:.5rem;border-radius:1rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.13);transition:border-color .5s ease}
.wk-proof-item:hover .wk-proof-frame{border-color:rgba(255,255,255,.26)}
.wk-proof-frame img{width:100%;height:auto;border-radius:.6rem}
.wk-proof-cap{margin-top:.85rem;font-size:.85rem;line-height:1.85;color:var(--grey-4)}
@media (min-width:1024px){
  .wk-proof-grid{grid-template-columns:repeat(2,1fr);gap:1.4rem;align-items:start}
}

/* 2枚横並びだと1枚あたり約500pxまで縮み、解析画面の数字が読めない。
   原寸（幅1400px）を別タブで開く逃げ道を必ず用意する。
   .wk-site-link の 1.6rem マージンはここでは効きすぎるので詰める（min-height 2.75rem は残す） */
.wk-proof-open{margin-top:.3rem;font-size:.82rem;font-weight:500;color:var(--grey-4)}
.wk-proof-open:hover{color:#fff}

/* .rotate-card は高さ13rem固定（overflow:hidden）。.rc-mock の既定値をそのまま入れると
   実測で内容が約8px はみ出し、上下が切れる。リング内だけ詰める。
   .stage-mob 側は height:auto なので触らない（切れないし、詰める必要もない） */
.rotate-card .rc-body{padding:.85rem 1.1rem}
.rotate-card .rc-num{margin-top:.4rem;font-size:1.75rem}
.rotate-card .rc-num em{margin-top:.25rem}
.rotate-card .rc-foot{margin-top:.5rem}

/* ══════════════════════════════════════════════════════════
   2026-08-01 /works ヒーロー刷新 ＋ ケースの厚み — 実装 鉄平
   既存セレクタは書き換えず、末尾に追記のみ。

   なぜ作り直したか：
   トップの .hero（タグ＋特大見出し＋開いていくショーリール＋抽象ウィジェット6枚）を
   そのまま流用していたので、トップと実績ページの見分けがつかなかった。
   演出の語彙（1文字ずつ出る見出し／マウス追従の3D／赤いグロー／スクロールで散る／
   浮遊ピルナビ／追従CTA／専用カーソル）は共有したまま、
   ヒーローに置くものだけ入れ替える。
   ここでの主役は「3サイト合計のセッション数」と「実物のスクリーンショット」。
   ══════════════════════════════════════════════════════════ */

/* 読み上げ専用（既存の .ptab-sr と同じ働き。用途が料金表に限らないので別名で置く） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── ヒーローの器 ──
   overflow:hidden は必須。浮かせたスクリーンショットが右にはみ出しても
   ページ全体に横スクロールを出さないため */
.wk-hero-height{position:relative;background:var(--black)}
.wk-hero{min-height:100svh;display:flex;align-items:center;padding:8rem 0 5rem;overflow:hidden}
.wk-hero-inner{display:flex;flex-direction:column;align-items:center}
.wk-hero-copy{position:relative;z-index:3;width:100%;max-width:46rem;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.15rem}
.wk-hero-h1{font-size:clamp(1.85rem,4.2vw,3.7rem);line-height:1.18;font-weight:900;letter-spacing:-.025em}
.wk-hero-sub{font-size:clamp(.9rem,1.1vw,1.06rem);color:var(--grey-4);line-height:1.9;max-width:38rem}

/* ── 主役の数字 ── */
.wk-hero-fig{position:relative;isolation:isolate;margin-top:.5rem;padding:1.1rem 1.5rem;border-radius:1.6rem;
  display:flex;flex-direction:column;align-items:center;gap:.35rem}
.wk-hero-fig-glow{inset:-14px;border-radius:2rem;filter:blur(40px);opacity:.42;
  background:radial-gradient(120% 120% at 50% 10%,rgba(232,35,31,.6) 0%,rgba(216,27,24,.3) 45%,rgba(8,8,8,0) 74%)}
.wk-hero-fig-label{font-size:.75rem;letter-spacing:.16em;color:var(--grey-3);font-weight:700}
.wk-hero-numrow{display:flex;align-items:flex-end;justify-content:center;gap:.65rem;flex-wrap:wrap}
.wk-hero-num{font-size:clamp(3.5rem,10vw,8.6rem);font-weight:900;letter-spacing:-.055em;line-height:.94;
  color:#fff;font-variant-numeric:tabular-nums}
.wk-hero-unit{display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding-bottom:.55rem}
.wk-hero-unit b{font-size:1rem;font-weight:800;color:#fff;line-height:1.35}
.wk-hero-unit i{font-style:normal;font-size:.74rem;color:var(--grey-3);line-height:1.55}
.wk-hero-serp{display:flex;flex-direction:column;align-items:center;gap:.12rem;
  border:1px solid rgba(255,255,255,.15);border-radius:1.1rem;padding:.7rem 1.3rem;
  background:rgba(255,255,255,.03)}
.wk-hero-serp b{font-size:.92rem;font-weight:800;color:#fff;line-height:1.5}
.wk-hero-serp span{font-size:.74rem;color:var(--grey-3);line-height:1.6}
.wk-hero-btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}

/* ── 証拠のスクリーンショット ──
   1200px未満では縦に積む。浮かせるのは横に余白がある画面だけ */
.wk-shots{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:1.4rem;
  width:100%;max-width:46rem;margin:2.8rem auto 0;perspective:1300px}
.wk-shot{position:relative;margin:0;isolation:isolate}
.wk-shot-frame{position:relative;z-index:1;border-radius:1.1rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.13);background:linear-gradient(170deg,#161616,#0a0a0a);
  box-shadow:0 1.6rem 3.4rem rgba(0,0,0,.62)}
.wk-shot-glow{inset:-12px;border-radius:1.5rem;filter:blur(30px);opacity:.42;
  background:radial-gradient(120% 120% at 30% 0%,rgba(232,35,31,.55) 0%,rgba(216,27,24,.26) 48%,rgba(8,8,8,0) 74%)}
/* 縮小して置くと画面内の文字が読めない。見せたい一点（--op）を中心に拡大して切り出す */
.wk-shot-crop{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0e0e0e}
.wk-shot-crop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--op,50% 50%);transform:scale(var(--z,1));transform-origin:var(--op,50% 50%)}
.wk-shot-cap{display:flex;flex-direction:column;gap:.12rem;margin-top:.6rem;
  font-size:.72rem;line-height:1.6;color:var(--grey-3)}
.wk-shot-cap b{font-size:.78rem;font-weight:700;color:var(--white-3)}

@media (min-width:640px) and (max-width:1199px){
  .wk-shots{grid-template-columns:1fr 1fr;max-width:none}
}
@media (max-width:1199px){
  /* 縦積みでヒーローが伸びすぎるので、下2枚は各社ケースの証拠ブロックに任せる */
  .wk-shot.k3,.wk-shot.k4{display:none}
}
@media (min-width:1200px){
  .wk-shots{position:absolute;inset:0;display:block;width:auto;max-width:none;margin:0;pointer-events:none}
  .wk-shot{position:absolute;width:clamp(15rem,17vw,21rem);will-change:transform,opacity,filter;
    transform-style:preserve-3d}
  /* 絶対配置の基準は .container.full の「パディングボックス」＝左右2.5remのパディングの外側。
     left:0 だと画面の端に貼り付いて切れて見えるので、ここで内側に寄せる */
  .wk-shot.k1{left:1.6rem;top:12%}
  .wk-shot.k2{right:1.6rem;top:8%}
  .wk-shot.k3{left:4rem;bottom:7%}
  .wk-shot.k4{right:4rem;bottom:9%}
}
@media (max-width:767px){
  .wk-hero{min-height:auto;padding:7.5rem 0 3.5rem}
  .wk-hero-numrow{gap:.5rem}
  .wk-hero-unit{padding-bottom:.35rem}
}

/* ── 合計の帯 ── */
.wk-band-section{padding:3.5rem 0 0}
.wk-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid rgba(255,255,255,.09);border-radius:1.4rem;overflow:hidden;
  background:rgba(255,255,255,.09)}
.wk-band-item{display:flex;flex-direction:column;gap:.25rem;padding:2rem 1.6rem;
  background:linear-gradient(160deg,#141414,#0a0a0a);transition:background-color .5s ease}
.wk-band-item:hover{background:linear-gradient(160deg,#1c1313,#0d0909)}
.wk-band-item b{font-size:clamp(2rem,3.4vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:1.05;
  color:#fff;font-variant-numeric:tabular-nums}
.wk-band-item b.red{color:var(--red-bright)}
.wk-band-item span{font-size:.85rem;font-weight:700;color:#fff}
.wk-band-item em{font-style:normal;font-size:.78rem;color:var(--grey-3);line-height:1.75;margin-top:.3rem}
@media (max-width:767px){.wk-band{grid-template-columns:1fr}.wk-band-item{padding:1.5rem 1.25rem}}

/* ── 各社ケースのキービジュアル ＋ 狙い／やったこと／結果 ──
   大翔興業と盛岡菜園刺繍はサイトの画面写真が未撮影。
   代わりに屋根の写真を当てると業種が違う写真を実績のように見せることになるので、
   画像ではなく「住所と数字のプレート」を置く（1148行のリングと同じ判断） */
.wk-kv{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;margin-bottom:3.5rem}
.wk-kv-media{position:relative;isolation:isolate}
.wk-kv-frame{position:relative;z-index:1;border-radius:1.3rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(170deg,#161616,#0a0a0a);
  box-shadow:0 1.6rem 3.4rem rgba(0,0,0,.55)}
.wk-kv-frame img{width:100%;height:auto}
.wk-kv-frame .rc-mock{height:auto}
.wk-kv-frame .rc-body{padding:2rem 2.2rem}
.wk-kv-frame .rc-name{font-size:1.5rem}
.wk-kv-frame .rc-meta{font-size:.8rem}
.wk-kv-frame .rc-num{font-size:clamp(2.4rem,4vw,3.4rem)}
.wk-kv-frame .rc-foot{font-size:.8rem;margin-top:.8rem}
.wk-kv-glow{inset:-12px;border-radius:1.7rem;filter:blur(34px);opacity:.36;
  background:radial-gradient(120% 120% at 25% 0%,rgba(232,35,31,.5) 0%,rgba(216,27,24,.24) 46%,rgba(8,8,8,0) 74%)}
.wk-kv-cap{margin-top:.75rem;font-size:.78rem;color:var(--grey-3);line-height:1.75}
.wk-spec{display:flex;flex-direction:column;gap:1.5rem}
.wk-spec-item{display:flex;flex-direction:column;gap:.4rem;padding-left:1.1rem;
  border-left:2px solid rgba(216,27,24,.55)}
.wk-spec-t{font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--red-bright)}
.wk-spec-item p{font-size:.95rem;line-height:1.9;color:#b0b0b0}
.wk-spec-item p .w{color:#fff}
@media (max-width:900px){
  .wk-kv{grid-template-columns:1fr;gap:1.8rem;margin-bottom:2.5rem}
  .wk-kv-frame .rc-body{padding:1.5rem 1.4rem}
}

/* ケースの一番下に置く「サイトを見る」。直前の要素と近すぎるので離す */
.stats-section > .container > .wk-site-link{margin-top:2.2rem}

/* ── 動きを減らす設定のとき ──
   JS側でも transform を書かないようにしているが、
   途中でメディアクエリが切り替わった場合の保険としてCSSでも止める */
@media (prefers-reduced-motion:reduce){
  .wk-shot{transform:none!important;filter:none!important;opacity:1!important}
}

/* ══════════════════════════════════════════════════════════
   2026-08-02 /works 再検収の赤4件ぶん — 実装 鉄平
   既存セレクタは書き換えず、ここから下に追記のみ
   ══════════════════════════════════════════════════════════ */

/* R2：44rem 固定のぼかしが文書幅をビューポートより広げていた（375pxで540px）。
   それを切る overflow 親が無いため position:fixed のナビが 540px に引きずられ、
   右端のハンバーガーが画面の外に出て押せなかった。
   .blur-wrap は背景の装飾なので、ビューポートより広げない。
   ※ この要素を使っているのは works.html だけ（index.html には無い） */
.blur-wrap{width:min(44rem,100%)}

/* ── CASE 02／03 のキービジュアルを実写真にした ──
   これまでは他社サイトの画面写真が未撮影だったのでプレート表示にしていた。
   写真が用意できたので、CASE 01 と同じ .wk-kv-frame に載せる。
   ※ 1438行あたりの「プレートを置く」というコメントはこの時点で古い（既存行は触らない指示のため残置） */
.wk-kv-frame.light{background:#fff}          /* ロゴの余白が白なので枠も白でそろえる */
.wk-kv-logo{position:relative;isolation:isolate}
.wk-kv-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.wk-kv-thumb{display:flex;flex-direction:column;gap:.45rem;margin:0}
.wk-kv-thumb img{width:100%;height:auto;border-radius:1rem;
  border:1px solid rgba(255,255,255,.1);background:#111}
.wk-kv-thumb figcaption{font-size:.74rem;line-height:1.6;color:var(--grey-3)}
@media (max-width:400px){
  .wk-kv-thumbs{gap:.7rem}
  .wk-kv-thumb figcaption{font-size:.7rem}
}

/* ハンバーガーを画面内に戻したので、開いたメニューも最後まで届くようにする。
   中身は790px あるのに max-height:36rem（576px）で切っていたため、
   メールアドレス・電話番号・「無料で相談する」が出ないまま触れなかった。
   画面の高さまで開き、足りない分はメニューの中でスクロールさせる。
   ※ index.html にも同じ切れ方（157px）が残るが、あちらは触らない指示なので別チケット */
@media (max-width:900px){
  .wk-mob-menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .wk-mob-menu.open{max-height:calc(100vh - 6.5rem)}
}
@supports (height:100dvh){
  @media (max-width:900px){
    .wk-mob-menu.open{max-height:calc(100dvh - 6.5rem)}
  }
}

/* 320px では、フッターのリンクを2列に並べると1列ぶんの最小幅が足りず、
   文書幅が20pxはみ出す（＝ハンバーガーを画面内に戻したのと同じ種類の傷）。
   400px以下は1列にして、文書幅をビューポートちょうどに戻す。
   ※ index.html にも同じフッターがあり同じはみ出しが残るが、あちらは触らない指示なので
     .wk-footer を付けた works.html だけに効かせている（別チケット） */
@media (max-width:400px){
  .wk-footer .nav-block{grid-template-columns:1fr;gap:1.5rem}
}

/* スマホの一覧から年間セッション数（.aw-d2）が消えていた。
   実績ページでは数字が主役なので、行を1本増やして必ず見せる */
@media (max-width:767px){
  .wk-awards .aw-name{grid-column:1/-1;grid-row:1}
  .wk-awards .aw-d1{grid-column:1;grid-row:2}
  .wk-awards .aw-date{grid-column:2;grid-row:2}
  .wk-awards .aw-d2{display:block;grid-column:1/-1;grid-row:3;
    color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
}

/* ══════════ 2026-08-03 index.html の同型不具合の是正 ══════════
   works.html で直した3件と同じ型が index.html にも残っていたので、
   ページ限定の .wk- 接頭辞ではなく共有セレクタ側で1本化する。
   works.html の .wk-footer / .wk-mob-menu は同じ値を指定しているため、
   ここを共有にしても works.html の計算値は変わらない（実測で確認済み）。 */

/* ① フッターのリンクを2列に並べると、1列ぶんの最小幅が足りずに文書幅がはみ出す。
   .footer-link は white-space:nowrap なので列は最長リンクより細くできない。
   320pxでは 1列320px中の実効280pxに対し「IWATE CLUB CRAWLERS」等が入らない。
   400px以下は1列にして、文書幅をビューポートちょうどに戻す。 */
@media (max-width:400px){
  .nav-block{grid-template-columns:1fr;gap:1.5rem}
}
/* index.html だけ折り返しを430pxまで引き上げる。
   実績列に「IWATE CLUB CRAWLERS」（19文字の欧文＝161px）が入り、
   401pxでの列幅164.5pxに対して余裕が3.5pxしかない。
   欧文の字幅は端末のフォントで1割前後ぶれるので、その差で溢れる。
   430pxまで1列にすれば列幅179.5pxとなり、余裕は18.5px（約11%）確保できる。 */
@media (max-width:430px){
  .idx-footer .nav-block{grid-template-columns:1fr;gap:1.5rem}
}

/* ② 開いたモバイルメニューが max-height:36rem で切られ、
   メール・電話・「無料で相談する」に指が届かなかった。
   メニューを出す条件は max-width:1024px なので、直す側も 1024px にそろえる
   （works.html 側の .wk-mob-menu は 900px までしか効いておらず、
     901〜1024px では同じ切れ方が残っていた。ここで一緒に塞がる）。
   画面の高さまで開き、入りきらない分はメニューの中でスクロールさせる。 */
@media (max-width:1024px){
  .mob-menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .mob-menu.open{max-height:calc(100vh - 6.5rem)}
}
@supports (height:100dvh){
  @media (max-width:1024px){
    .mob-menu.open{max-height:calc(100dvh - 6.5rem)}
  }
}

/* ③ .blur-wrap と同じ型。38rem 固定の赤いにじみが、
   320pxでは文書幅を403pxまで広げていた（＝実機では縮小表示になる）。
   背景の装飾なので、親より広げない。
   幅だけでは足りない。この要素は scale(var(--glow-s)) で拡大され、
   --glow-s はスクロールで 0.7→1.2 まで育つ（app.js）。
   等倍で親ぴったりだと、下までスクロールした時点で左右に1割ずつはみ出す
   （430pxで+18px）。拡大後にちょうど親に収まる幅にしておく。 */
.grow-statement::before{width:min(38rem,calc(100% / 1.2))}


/* ══════════════════════════════════════════════════════════
   2026-08-03 モバイル最適化 v2 — 実装 鉄平
   仕様：04-DESIGN-mobile-v2.md（余白 みやび）
   検収：13-REVIEW-mobile-v2.md（目利き 厳／赤6・黄13・緑3）

   既存セレクタは書き換えず、ここから下に追記のみ。
   追記位置がファイル末尾なので、同じ詳細度なら後勝ちで上の指定（984行の
   @media(max-width:767px) .psim-* 等）を上書きできる。差し込む位置を変えると効かない。

   §9 の6項目以外はすべて @media の中に入れてある（PC を1pxも動かさないため）。
   コメントの数値は「是正前 → 是正後」の実測値。
   ══════════════════════════════════════════════════════════ */

/* ── 赤-05：アンカーの着地位置。全 [id] の scroll-margin-top が 0px だった。
   メディアクエリの外に置く（PC も同じ不具合を持っていたので同時に直る・§9-1）。
   6rem は rem なので root と一緒に伸縮し、固定ヘッダーの高さと同じ比率で追従する。
   実測 @375  index.html#price-sim の見出し top=30.5px（ヘッダーの下に完全に隠れる）
              → セクション上端 96.0px 着地（固定ヘッダー下端 81.2px／クリアランス +14.8px）
   ※ app.js のアンカー補正 -88px と二重管理になっている。
      どちらかを変えるときは必ず両方変えること（app.js の「アンカー」節にも同じ注記あり）。 */
#top,#services,#grow,#pricing,#price-detail,#price-sim,#price-table,
#flow,#blog,#about,#faq,#contact,#summary,#case01,#case02,#case03{scroll-margin-top:6rem}

/* ── 赤-03 の下ごしらえ（メディアクエリの外・§9-2）。
   .psim-varnote / .psim-plan を .psim-readout の外（直後）へ出したので、
   .psim-readout の flex gap:1.1rem で取れていた縦の余白を margin で戻す。
   移動先は同じ .psim-result の中・同じ順番なので、PC の見た目は1pxも変わらない。 */
.psim-varnote{margin-top:1.1rem}
.psim-plan{margin-top:1.1rem}

/* ── 黄-11：白い面のグレーが WCAG AA 未達（メディアクエリの外・§9-3。
   色だけの変更なので寸法は1pxも動かない）。
   #8c8c8c on #fafafa 3.22:1 → #6a6a6a なら 5.18:1 ／ on #ffffff 5.41:1 ／
   on #f0f0f0（.proof-caption が写真の上に敷く rgba(255,255,255,.94) の最悪合成）4.75:1。
   黒い面の --grey-3 は 5.96:1 で合格しているので触らない。 */
.clients-section .startup-desc,.voices-section .startup-desc,
.clients-section .b1,.voices-section .b1,
.proof-caption span,.proof-facts span,.item-tag{color:#6a6a6a}
/* #fff on #ff0000 = 4.00:1（.92rem＝14.7px の小さい文字なので不合格）→ #d40000 で 5.53:1 */
.media-yt-link{background:#d40000}

/* ── 黄-07／緑-3：統計カルーセルの位置指標。PCでは出さない（横並び4枚で指標が要らない） */
.hero-dots{display:none}


/* ══════════════════════════════════════════════════════════
   赤-03 料金シミュレーター：金額だけを画面上部に貼り付ける（§5）
   是正前：.psim-result まるごとを order:-1 で上に出していたが、その箱が
           1021.6px@320 / 900.8px@375 あり、1本目のスライダーに指を置いた時点で
           金額は 778px@320 / 658px@375 下＝画面外だった。
   是正後：貼るのは金額2つ（.psim-readout）だけ。203.3px@320 / 184.3px@375（−80.1%）。
           320×454（iPhone SE 1st 相当）でもスティッキーの下に 154.7px の帯が残り、
           スライダー1本ぶん（44+5.6+44+20＝113.6px）がまるごと入る。
   方式　：.psim-result は display:contents で「箱だけ」消し、中身を .psim-card の
           グリッド項目に昇格させる。PC の2カラムを壊さず、DOM も動かさないため。
   ※ display:contents と .psim-varnote/.psim-plan のHTML移動（§5-3）は必ずセット。
      片方だけだと金額パネルが326pxに膨らみ、iPhone SE でスライダーが1本も入らない。
   ══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .psim-card{gap:1.1rem}
  .psim-result{display:contents}
  .psim-intro{order:-2;margin-bottom:0}
  .psim-readout{order:-1;position:sticky;top:6rem;z-index:6;
    background:var(--black-4);                        /* 半透明だと下を流れる文字が透ける。既存変数で不透明にする */
    border:1px solid rgba(255,255,255,.09);
    border-radius:1rem;padding:.85rem 1rem;gap:.6rem;
    box-shadow:0 .6rem 1.4rem rgba(0,0,0,.55)}
  .psim-controls{order:0}
  .psim-varnote{order:1;margin-top:0}
  .psim-plan{order:2;margin-top:0}
  .psim-breakdown{order:3;margin-top:0}
  .psim-note{order:4;margin-top:0}
  .psim-cta{order:5;margin-top:0}

  /* 「作るときの費用」と「（税別・一括）」を同じ行に置いて、貼り付く板を45px縮める。
     DOM順は変えず flex の order だけで組み替える */
  .psim-out{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5rem}
  .psim-out-label{order:0;margin-bottom:0}
  .psim-out-sub{order:1;margin-top:0;margin-left:auto}
  .psim-out-figure{order:2;flex:0 0 100%;
    /* 2行ぶんを min-height で確保しているので、桁が変わっても高さは動かない。
       24.80px@320 / 25.50px@375 / 29.24px@430（.long は 21.60 / 22.50 / 25.80px）。
       是正前より最大5.2px小さいが、「大きいが見えない数字」より「小さくても常に見える数字」を採る */
    font-size:clamp(1.55rem,6.8vw,2rem);
    min-height:calc(2.24 * clamp(1.55rem,6.8vw,2rem))}
  .psim-out-figure.single{min-height:calc(1.12 * clamp(1.55rem,6.8vw,2rem))}
  .psim-out-figure.long{font-size:clamp(1.35rem,6vw,1.75rem)}
  .psim-out-unit{font-size:.95rem}
  .psim-out+.psim-out{padding-top:.6rem}
}


/* ══════════════════════════════════════════════════════════
   767px以下（スマホ）
   ══════════════════════════════════════════════════════════ */
@media (max-width:767px){

  /* ── 黄-04 本文（副）：14.4〜14.72px → 16.00px（320/360/375/390/430 の5幅で同値）
     root を 17px に上げる案は採らない。rem がモバイルの全寸法に使われているため、
     レイアウトが同時に6.25%膨らんで黄-08 が確実に破綻する（§2-3）。名指しで上げる。 */
  .hero-sub,.startup-desc,.faq-panel p,.faq-list li,.job-grid.rich .job-card p,
  .stage-mob-body p,.flow-body p,.price-list li,.grow-card p,
  .card-hero-desc,.rebuild-p,.pay-note-p,.pay-note-list li,
  .psim-intro,.psim-plan,.sc-desc,.wk-proof-cap,.wk-extra-desc,.desc-blog{
    font-size:1rem;line-height:1.8}

  /* ── 黄-04 注記・キャプション：11.2〜12.5px → 13.00px（.8125rem） */
  .price-foot,.psim-note-s,.psim-note p,.psim-out-sub,.psim-breakdown,
  .form-note,.copy,.closing-credit,.psim-varnote,.psim-rebuild,
  .wk-proof-open,.wk-extra-note,.proof-caption span,.proof-facts span,
  .item-tag,.fl-sub,.psim-plan-up,.wk-shot-cap{
    font-size:.8125rem;line-height:1.75}

  /* ── 赤-01：iOS Safari は focus した入力欄が16px未満だと画面を自動拡大する。
     14.72px → 16.00px。rem ではなく px で書く。html{font-size} を将来だれかが
     触った瞬間に focus ズームが黙って復活し、その因果は誰も覚えていないため（§2-5）。
     maximum-scale=1 / user-scalable=no で塞ぐのは禁止（拡大できなくなる）。 */
  .f-field input,.f-field select,.f-field textarea{font-size:16px}

  .f-field>span{font-size:.875rem}      /* 黄-05  12.8 → 14.00px（入力欄16pxとの関係を保つ） */
  .ptab th,.ptab td{font-size:.875rem}  /*        13.12 → 14.00px */
  .psim-label{font-size:1rem}           /*        15.2 → 16.00px */
  .psim-out-label{font-size:.9rem}      /*        13.12 → 14.40px */
  .btn-pill{font-size:1rem}             /*        15.2 → 16.00px */
  .psim-h,.ptab-h,.wk-proof-h{font-size:1.45rem}  /* h2 と同寸(27.2px)で階層が消えていた → 23.20px */
  .heading-hero{line-height:1.22}       /* 33.6×1.14＝38.3px は詰まりすぎ → 41.0px（PCは1.14のまま） */

  /* ── 黄-02 型A：padding で稼ぐ。33.5px → 44.7px（320/375/430 で実測）。
     隣接ピッチは 44.7＋8＝52.7px（.footer-secondary-link-list の gap:.5rem は据え置き） */
  .footer .footer-link{padding:.65rem 0}

  /* ── 黄-02/03、黄-01 型B：min-height。見た目の文字位置は変えずに行ごと押させる。
     .email-link 31.7 → 44.0px ／ .mail-link 25.8 → 44.0px ／ .logo-nav 27.2 → 44.0px */
  .email-link{min-height:44px;display:inline-flex;align-items:center}
  .mail-link{min-height:44px;display:flex;align-items:center}
  .logo-nav{min-height:44px}
  .mob-social-block{gap:.5rem}          /* 黄-01 隣接間隔 5.5px → 8.0px */

  /* ── 型B：スライダーのラベル行。22.8 → 44.0px。
     rowhead を44pxにした分、下マージンを .7rem → .35rem に詰めて相殺する */
  .psim-rowhead{min-height:44px;align-items:center;margin-bottom:.35rem}
  .psim-label{display:flex;align-items:center;align-self:stretch}

  /* ── 黄-02 型C：::after で当たり判定だけ44pxにする。描画は1pxも動かない。
     文中リンクに縦paddingを足すと、その行だけ行送りが 22.8 → 45.2px になり段落が壊れる。
     15.0 → 44.0px ／ 17.0 → 44.0px ／ 13.0 → 44.0px
     ※ .wk-proof-open だけは display を変えない。.wk-site-link の inline-flex ＋
        min-height:2.75rem（44px）で既に高さが出ており、inline-block にすると
        矢印の縦位置が動くため（当たり判定の ::after だけ足す） */
  .copy .inline-link,.form-note .inline-link,.psim-plan-link,
  .closing-credit a{position:relative;display:inline-block}
  .wk-proof-open{position:relative}
  .copy .inline-link::after,.form-note .inline-link::after,.psim-plan-link::after,
  .closing-credit a::after,.wk-proof-open::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

  /* ── 赤-02：写真の上にテキストを重ねるのをやめ、縦に積む。
     是正前 @320 画像159.1px に対しオーバーレイの必要高183px → 24pxはみ出し
     （justify-content:center なので上下に等分され、「最後に」と補足の最終行が両方切れる）。
     position:static にした時点で、はみ出しは構造的に起きなくなる（要素が中身の高さを取る）。
     実測 @320/360/375/430 すべて はみ出し 0px。
     object-position は 30% → 38%（2.011 の原画を 16/9 で切ると上下が11.6%詰まるため）。
     PC は 1400/696・center 30% のまま据え置き。 */
  .closing-media{display:flex;flex-direction:column;
    background:linear-gradient(165deg,#151515,#0a0a0a);
    border:1px solid rgba(255,255,255,.08)}
  .closing-img{aspect-ratio:16/9;object-position:center 38%}
  .closing-overlay{position:static;inset:auto;padding:1.5rem 1.25rem 1.7rem;background:none}
  .closing-br{display:none}

  /* ── 赤-06：dd 側が最小幅182.7pxを譲らず、dt が min-content（1文字＝15.2px）まで潰れて
     「改／修／費」と縦に積まれていた。dt/dd を縦に積んで押し合いそのものを無くす。
     実測 @320  dt 26.5×77.5px（3行）→ 45.6×25.8px（1行）／ 行全体 83.5 → 94.5px
     .price-card 側の .price-lines は厳の実測で問題が出ていないので巻き添えにしない */
  .rebuild-r .price-lines>div{flex-direction:column;align-items:flex-start;gap:.15rem}
  .rebuild-r .price-lines dd{text-align:left;justify-content:flex-start;flex-wrap:wrap}

  /* 黄-06（コラムのサムネイル縦横比）は2026-08-04にcoverflow化で構造ごと差し替えたため、
     このブロックの旧ルールは撤去した。coverflowは元々1:1のまま使う設計なので同じ問題は起きない */

  /* ── 赤-04：追従CTAが操作要素22件（index 11・works 11）を覆っていた。
     右下のピル（152×50px）をやめ、下部フルワイドのバーにする。
     幅 calc(100% - 2rem)＝288.0@320 / 343.0@375 / 398.0@430、高さ54.6px。
     占有帯 54.6＋12.0＝66.6px に対し body 下端を76.0px 空ける（余裕 +9.4px）。
     どのゾーンで消えるかは app.js の [data-cta-off] 判定（§4-3）。
     env() は .float-cta の margin-bottom と body の padding-bottom の2箇所だけに書く。
     いまは viewport-fit=cover を入れていないので常に 0px を返す＝無害。
     cover を入れる判断をしたとき、追従CTAだけは対応済みという状態にしておくため。 */
  .float-cta{left:1rem;right:1rem;bottom:0;justify-content:center;
    min-height:52px;padding:.9rem 1.2rem;font-size:.95rem;
    margin-bottom:calc(.75rem + env(safe-area-inset-bottom,0px))}
  .float-cta:active{transform:scale(.985)}
  body{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}

  /* ── 黄-10：.wk-proof-frame の表示幅317px（@375）に原寸1400pxを入れると22.6%縮小＝
     文字が読めない。見せたい一点を中心に拡大して切り出す。
     ヒーローの .wk-shot-crop（1392-1394行）とまったく同じ仕掛け。新しい描画方式を増やさない。
     実効文字サイズ：SERPのタイトル 4.5 → 10.9px ／ GAの数字 6.8 → 15.6px（@375）。
     padding:.5rem のマットはモバイルでは捨てる。理由は2つ：
       ① overflow は padding box で切るので、padding があると拡大した画像がマットの上に
          8pxはみ出してから切られ、「貼った画面写真」に見えなくなる
       ② 16px ぶんが画像に回り、表示幅が 317 → 333px になって文字が5%大きくなる
     aspect-ratio は親ではなく <img> 自身に付ける。親に付けると box-sizing:border-box
     のせいで比率が border box 基準になり、切り出し位置がずれる。 */
  .wk-proof-frame{padding:0;overflow:hidden;border-radius:.8rem;background:#0e0e0e}
  .wk-proof-frame img{aspect-ratio:var(--ar,2.3);width:100%;height:auto;border-radius:0;
    object-fit:cover;object-position:var(--op,50% 50%);
    transform:scale(var(--z,1));transform-origin:var(--op,50% 50%)}

  /* ── 黄-07／緑-3：4枚あることが伝わっていなかった。色だけでなく形（6→18px）で現在地を示す。
     選択中 #e8231f on #080808 = 4.47:1（UI部品の基準3:1を満たす） */
  .hero-dots{display:flex;justify-content:center;gap:.4rem;margin-top:.9rem}
  .hero-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
    transition:background-color .3s var(--ease),width .3s var(--ease)}
  .hero-dots i.on{width:18px;border-radius:999px;background:var(--red-bright)}
}

/* 320px では「作るときの費用」のラベル行が0.6px足りずに2行へ折り返す。
   13.6px に落として1行に収める。実測 .psim-readout 227.4 → 203.3px */
@media (max-width:359px){
  .psim-out-label{font-size:.85rem}
  .psim-out{column-gap:.4rem}

  /* 黄-C（2026-08-03 再検収）：320pxでは「毎月の費用＋任意」の行が 201.1px 必要なのに
     内寸が 199.0px しかなく、2.1px 足りずに「／月（税別）」だけが単独行へ落ちていた。
     文字サイズは1pxも下げない（黄-04 と正面から矛盾するため）。
     「任意」バッジの左右パディングとラベル内の gap だけを詰めて 8.8px ぶんの席を作る。
     実測 @320  201.1px（不足2.1px・2行）→ 192.3px（余り6.7px・1行）。
     .tag-optional は料金カードでも使う共有部品なので、.psim-out-label の中だけに限定する。
     360px以上は元から 32.3px 余っていて、この指定は届かない（359px以下限定）。 */
  .psim-out-label{gap:.35rem}
  .psim-out-label .tag-optional{padding-left:.35rem;padding-right:.35rem}
}


/* ══ §17 モーション v3 ══ */
:root{--rise:30px}
@media (max-width:767px){:root{--rise:18px}}

/* 下の .1 と .08 を 0 にしない。実測LCP要素 IMG.showreel-img が計上されず LCP が +1,168ms 後退する */
.hero .heading-hero .char{opacity:.1;transform:translate3d(0,var(--rise,30px),0);
  transition:opacity .52s var(--ease) var(--d,0ms),transform .52s var(--ease) var(--d,0ms)}
html.hero-in .hero .heading-hero .char{opacity:1;transform:none}

/* heroRender() が毎フレーム上書きする .hero-heading / .floater個々 / .showreel / .scroll-hint には掛けない */
.hero-tag-wrap,.hero-sub,.hero-btns,.show-wrap,#floaters{
  opacity:0;transition:opacity .56s var(--ease) var(--hd,0ms),
                       transform .56s var(--ease) var(--hd,0ms)}
.hero-tag-wrap{--hd:0ms;   transform:translate3d(0,14px,0)}
.show-wrap   {--hd:260ms;opacity:.08;transform:translate3d(0,40px,0) scale(.985);transition-duration:.9s}
#floaters    {--hd:520ms;  transition-property:opacity}   /* 子の transform は毎フレーム潰されるので親の opacity だけ */
.hero-sub    {--hd:700ms;  transform:translate3d(0,22px,0)}
.hero-btns   {--hd:820ms;  transform:translate3d(0,18px,0)}
html.hero-in .hero-tag-wrap,html.hero-in .hero-sub,html.hero-in .hero-btns,
html.hero-in .show-wrap,html.hero-in #floaters{opacity:1;transform:none}
.hero .glow.hero-gradient{opacity:0;transition:opacity .9s var(--ease) .2s}
html.hero-in .hero .glow.hero-gradient{opacity:.42}

/* これが無いと reduce の人にヒーローが空白で出る */
@media (prefers-reduced-motion:reduce){
  .hero-tag-wrap,.hero-sub,.hero-btns,.show-wrap,#floaters,.hero .glow.hero-gradient{
    opacity:1!important;transform:none!important}
}

.pcurtain{position:fixed;left:0;right:0;top:0;height:100%;z-index:990;pointer-events:none;
  background:#050505;border-top:2px solid var(--red-bright);
  border-bottom:2px solid var(--red-bright);transform:translate3d(0,-100%,0)}
.pcurtain.is-down{transform:translate3d(0,0,0);transition:transform .38s cubic-bezier(.6,.04,.24,1)}
/* 到着側はCSSアニメ。JSが死んでも必ず開く */
.pcurtain.is-enter{transform:translate3d(0,0,0);animation:pcurtainOut .44s var(--ease) .04s both}
@keyframes pcurtainOut{to{transform:translate3d(0,100%,0)}}
@media (prefers-reduced-motion:reduce){.pcurtain{display:none}}

.nav-btn.dark.is-mag{transition:opacity .5s var(--ease)}

/* v3ではここでPCのみピン留め+不透明度切り替え（901px以上×620px以上）にしていたが、
   社長の指摘（2026-08-04）で撤去した。「エフェクトが掛かりすぎて、カードがほぼ見えない」。
   reduce時の静的レイアウト（3カラムグリッド・常時 opacity:1）を、幅・高さを問わず基本形にした。
   ドット（.job-step）はピン専用のUIだったので、常時非表示にする（HTML側は残すが表示しない） */
.job-step{display:none}