/* クラファニア 共通CSS（第1回A：変数） */

:root{
  --ink-black:#0B0B0D;
  --deep-charcoal:#1B1B1E;
  --panel-charcoal:#242427;
  --off-white:#F4F3EF;
  --light-gray:#A9A9AD;
  --hairline:rgba(255,255,255,.12);
  --champagne-gold:#D9C9A3;
  --metallic-gold:#B3924F;
  --bronze:#8A6A48;
  --shadow-1:0 4px 24px rgba(0,0,0,.35);
  --wrap-max:1280px;
  --side-pad:max(24px, calc((100vw - 1280px) / 2));
  --section-gap:112px;
  --gutter:24px;
  --hdh:76px;
}

@media (max-width:1024px){
  :root{
    --side-pad:40px;
    --section-gap:84px;
    --gutter:20px;
  }
}

@media (max-width:767px){
  :root{
    --side-pad:22px;
    --section-gap:64px;
    --gutter:16px;
    --hdh:64px;
  }
}

/* 第1回B：基本リセット */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--ink-black);
  color:var(--off-white);
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  font-weight:400;
  line-height:1.85;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

p{
  margin:0 0 1em;
}

ul,
ol{
  margin:0;
  padding:0;
  list-style:none;
}

button{
  font:inherit;
  cursor:pointer;
}

/* 第1回C：文字設定 */

h1,
h2,
h3,
h4{
  margin:0 0 .5em;
  font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  color:var(--off-white);
  line-height:1.4;
}

.h1,
h1{
  font-weight:900;
  font-size:clamp(30px,5.2vw,58px);
  letter-spacing:.01em;
}

.h2,
h2{
  font-weight:900;
  font-size:clamp(24px,3.4vw,38px);
}

.h3,
h3{
  font-weight:700;
  font-size:clamp(18px,2.2vw,22px);
}

.lead{
  font-size:clamp(16px,1.6vw,18px);
  color:var(--light-gray);
  font-weight:500;
}

.mono{
  font-family:"Archivo Black","Anton",sans-serif;
  letter-spacing:.02em;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--metallic-gold);
}

.eyebrow::before{
  content:"";
  width:24px;
  height:1px;
  background:var(--metallic-gold);
}

/* 第1回C：基本レイアウト */

.wrap{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding:0 var(--side-pad);
}

.section{
  padding:var(--section-gap) 0;
}

.section--ink{
  background:var(--ink-black);
}

.section--charcoal{
  background:var(--deep-charcoal);
}

.section--panel{
  background:var(--panel-charcoal);
}

.section-head{
  max-width:760px;
  margin:0 0 40px;
}

.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.hr{
  border:0;
  border-top:1px solid var(--hairline);
  margin:40px 0;
}

.grid{
  display:grid;
  gap:var(--gutter);
}

.grid-2{
  grid-template-columns:1fr 1fr;
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.grid-4{
  grid-template-columns:repeat(4,1fr);
}

@media (max-width:1024px){
  .grid-3,
  .grid-4{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:767px){
  .grid-2,
  .grid-3,
  .grid-4{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   第2回：ボタン・カード・ヘッダー・メニュー・フッター
   ============================================================ */

/* ---------- ボタン（6章） ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:14px 28px;
  border-radius:4px;
  border:1px solid transparent;
  font-weight:700;
  font-size:15px;
  transition:background .25s, color .25s, border-color .25s;
}

.btn--gold{
  background:var(--metallic-gold);
  color:var(--ink-black);
}

.btn--gold:hover{
  background:var(--champagne-gold);
}

.btn--dark{
  background:var(--ink-black);
  color:var(--off-white);
  border-color:var(--hairline);
}

.btn--dark:hover{
  background:var(--panel-charcoal);
}

.btn--outline{
  background:transparent;
  color:var(--metallic-gold);
  border-color:var(--metallic-gold);
}

.btn--outline:hover{
  background:var(--metallic-gold);
  color:var(--ink-black);
}

.btn--block{
  width:100%;
  justify-content:center;
}

.btn-row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

@media (max-width:480px){
  .btn{
    width:100%;
    justify-content:center;
  }
}

/* ---------- カード ---------- */
.card{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:32px;
}

.card h3{
  margin-bottom:12px;
}

/* ---------- 状態ラベル ---------- */
.status{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:4px;
  letter-spacing:.05em;
  border:1px solid var(--hairline);
}

.status--live{
  color:var(--ink-black);
  background:var(--metallic-gold);
  border-color:var(--metallic-gold);
}

.status--soon{
  color:var(--champagne-gold);
  border-color:var(--bronze);
  background:transparent;
}

.status--concept{
  color:var(--light-gray);
  border-color:var(--hairline);
  background:transparent;
}

/* ---------- 画像プレースホルダー ---------- */
.img-slot{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:repeating-linear-gradient(135deg, var(--panel-charcoal) 0 12px, var(--deep-charcoal) 12px 24px);
  border:1px dashed var(--bronze);
  border-radius:8px;
  color:var(--light-gray);
  font-size:13px;
  line-height:1.6;
  padding:20px;
  aspect-ratio:16/10;
  overflow:hidden;
}

.img-slot--portrait{
  aspect-ratio:3/4;
}

.img-slot--wide{
  aspect-ratio:21/9;
}

.img-slot--square{
  aspect-ratio:1/1;
}

.img-slot__label{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--champagne-gold);
  letter-spacing:.06em;
  display:block;
  margin-bottom:8px;
  font-size:12px;
}

/* ---------- ヘッダー（9章） ---------- */
.c-hd{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(11,11,13,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}

.c-hd__in{
  max-width:1440px;
  margin:0 auto;
  padding:0 22px;
  height:var(--hdh);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.c-hd__logo{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:23px;
  letter-spacing:.02em;
  color:var(--off-white);
}

.c-hd__logo span{
  color:var(--metallic-gold);
}

.c-hd__logo-img{
  display:block;
  height:32px;
  width:auto;
}

@media (max-width:767px){
  .c-hd__logo-img{
    height:26px;
  }
}

.c-hd__right{
  display:flex;
  align-items:center;
  gap:18px;
}

.c-hd__cta{
  font-size:14.5px;
  padding:13px 26px;
  min-height:auto;
}

@media (max-width:640px){
  .c-hd__cta{
    display:none;
  }
}

.c-hd__burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:44px;
  height:44px;
  background:none;
  border:0;
  flex:none;
}

.c-hd__burger i{
  display:block;
  width:26px;
  height:2px;
  background:var(--off-white);
  transition:.3s;
  border-radius:2px;
}

.is-menu-open .c-hd__burger i:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}

.is-menu-open .c-hd__burger i:nth-child(2){
  opacity:0;
}

.is-menu-open .c-hd__burger i:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

/* ---------- フルスクリーンメニュー ---------- */
body.is-locked{
  overflow:hidden;
}

.c-menu{
  position:fixed;
  inset:0;
  z-index:70;
  background:var(--ink-black);
  visibility:hidden;
  opacity:0;
  transition:opacity .35s ease, visibility 0s linear .35s;
}

.c-menu.is-open{
  visibility:visible;
  opacity:1;
  transition:opacity .35s ease;
}

.c-menu__in{
  max-width:900px;
  margin:0 auto;
  height:100%;
  padding:calc(var(--hdh) + 40px) 24px 40px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.c-menu__list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.c-menu__item{
  border-bottom:1px solid var(--hairline);
}

.c-menu__link{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:18px 4px;
  font-weight:900;
  font-size:clamp(22px,4.4vw,36px);
  color:var(--off-white);
  transition:color .2s;
}

.c-menu__link:hover,
.c-menu__link:focus-visible{
  color:var(--metallic-gold);
}

.c-menu__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:14px;
  color:var(--metallic-gold);
}

.c-menu__sub{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 0 14px 40px;
}

.c-menu__sub a{
  padding:8px 4px;
  font-size:15px;
  color:var(--light-gray);
  font-weight:500;
  display:block;
}

.c-menu__sub a:hover{
  color:var(--champagne-gold);
}

.c-menu__foot{
  margin-top:32px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.c-menu__foot .btn{
  min-height:44px;
}

/* ---------- フッター（13章） ---------- */
.c-ft{
  background:var(--ink-black);
  border-top:1px solid var(--hairline);
}

.c-ft__top{
  padding:80px 0 56px;
}

.c-ft__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:40px;
}

.c-ft__brand .c-hd__logo{
  display:block;
  margin-bottom:14px;
}

.c-ft__brand p{
  color:var(--light-gray);
  font-size:15.5px;
  max-width:300px;
}

.c-ft__col h4{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--metallic-gold);
  margin-bottom:18px;
  text-transform:uppercase;
}

.c-ft__col ul{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.c-ft__col a{
  color:var(--light-gray);
  font-size:15.5px;
  transition:color .2s;
}

.c-ft__col a:hover{
  color:var(--off-white);
}

.c-ft__bottom{
  border-top:1px solid var(--hairline);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.c-ft__legal{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.c-ft__legal a{
  color:var(--light-gray);
  font-size:13.5px;
}

.c-ft__legal a:hover{
  color:var(--off-white);
}

.c-ft__cp{
  color:var(--light-gray);
  font-size:12px;
  font-family:"Archivo Black","Anton",sans-serif;
  letter-spacing:.05em;
}

@media (max-width:1024px){
  .c-ft__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .c-ft__grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .c-ft__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ============================================================
   第3回：FV・トップページ各セクション・下層ページ部品
   ============================================================ */

/* ---------- ファーストビュー（10章） ---------- */
.c-fv{
  min-height:88vh;
  display:flex;
  align-items:center;
  background:var(--ink-black);
  position:relative;
  padding:calc(var(--hdh) + 40px) 0 60px;
  overflow:hidden;
}

.c-fv__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}

.c-fv h1{
  color:var(--off-white);
  font-weight:900;
}

.c-fv__sub{
  color:var(--off-white);
  opacity:.86;
  max-width:520px;
  margin:20px 0 30px;
}

@media (max-width:900px){
  .c-fv__grid{
    grid-template-columns:1fr;
  }
  .c-fv{
    min-height:auto;
    padding-bottom:40px;
  }
}

/* ---------- 短い信頼帯 ---------- */
.c-trust{
  padding:40px 0;
  background:var(--deep-charcoal);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.c-trust__row{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  justify-content:space-between;
}

.c-trust__num{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(28px,4vw,44px);
  color:var(--metallic-gold);
  line-height:1;
}

.c-trust__num small{
  font-size:14px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:var(--off-white);
  margin-left:8px;
}

.c-trust__text{
  color:var(--off-white);
  font-size:15px;
  max-width:560px;
}

/* ---------- 三本柱／サービスリンク ---------- */
.pillar{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:36px 30px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}

.pillar__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:44px;
  color:var(--metallic-gold);
  line-height:1;
}

.pillar__body{
  color:var(--light-gray);
  font-size:14.5px;
  flex:1;
}

/* ---------- 四つの負担 ---------- */
.burden{
  border-top:1px solid var(--hairline);
  padding:26px 0;
}

.burden__no{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--bronze);
  font-size:14px;
  margin-bottom:8px;
}

.burden__body{
  color:var(--light-gray);
  font-size:14.5px;
}

/* ---------- 費用と時間（レイヤー比較） ---------- */
.layer-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.layer{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:28px;
}

.layer--ai{
  border-left:3px solid var(--bronze);
}

.layer--human{
  border-left:3px solid var(--metallic-gold);
}

.layer h4{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--metallic-gold);
  text-transform:uppercase;
  margin-bottom:10px;
}

.layer p{
  color:var(--light-gray);
  font-size:14.5px;
  margin:0;
}

.fact-box{
  margin-top:28px;
  padding:22px;
  border:1px solid var(--hairline);
  border-radius:8px;
  background:var(--ink-black);
}

.fact-box small{
  color:var(--light-gray);
  display:block;
  margin-top:6px;
}

@media (max-width:700px){
  .layer-compare{
    grid-template-columns:1fr;
  }
}

/* ---------- 実績証拠 ---------- */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gutter);
}

.stat-card{
  background:var(--ink-black);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:26px;
  text-align:center;
}

.stat-card .num{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(30px,4.6vw,46px);
  color:var(--metallic-gold);
  line-height:1;
}

.stat-card .cap{
  color:var(--light-gray);
  font-size:13px;
  margin-top:10px;
}

.stat-hero{
  text-align:center;
  margin-bottom:36px;
}

.stat-hero .num{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(40px,8vw,88px);
  color:var(--metallic-gold);
  line-height:1;
}

.disclaimer{
  margin-top:30px;
  padding:20px 24px;
  border-left:3px solid var(--bronze);
  background:var(--panel-charcoal);
  color:var(--light-gray);
  font-size:14.5px;
  border-radius:0 8px 8px 0;
}

@media (max-width:700px){
  .stat-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- 代表者 ---------- */
.rep-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:center;
}

.rep-notes{
  display:grid;
  gap:16px;
  margin-top:20px;
}

.rep-note{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:20px 22px;
}

.rep-note h4{
  font-weight:700;
  font-size:15px;
  margin-bottom:6px;
  color:var(--metallic-gold);
}

.rep-note p{
  color:var(--light-gray);
  font-size:14px;
  margin:0;
}

@media (max-width:840px){
  .rep-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- ページヒーロー（下層ページ用） ---------- */
.page-hero{
  background:var(--deep-charcoal);
  padding:calc(var(--hdh) + 56px) 0 56px;
  border-bottom:1px solid var(--hairline);
}

.page-hero .status{
  margin-bottom:16px;
}

.page-hero h1{
  font-weight:900;
  font-size:clamp(26px,4vw,42px);
}

.page-hero .lead{
  margin-top:14px;
  max-width:640px;
}

/* ---------- 罫線インデックス（料金・比較） ---------- */
.idx{
  border-top:2px solid var(--hairline);
}

.idx-row{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--hairline);
}

.idx-row dt{
  font-weight:700;
  color:var(--off-white);
  margin:0;
}

.idx-row dd{
  margin:0;
  color:var(--light-gray);
  font-size:14.5px;
}

.idx-row .pr{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:18px;
}

@media (max-width:640px){
  .idx-row{
    grid-template-columns:1fr;
  }
}

/* ---------- 分岐カード（漫画LP等） ---------- */
.branch-card{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}

.branch-card.gold{
  border-color:var(--metallic-gold);
}

/* ---------- 場面リスト（漫画パート初稿） ---------- */
.scene{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--hairline);
}

.scene__no{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:22px;
}

.scene__body{
  color:var(--light-gray);
  font-size:14.5px;
}

@media (max-width:560px){
  .scene{
    grid-template-columns:1fr;
  }
  .scene__no{
    margin-bottom:4px;
  }
}

/* ---------- 未確定バッジ ---------- */
.tbd{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border:1px dashed var(--light-gray);
  border-radius:4px;
  color:var(--light-gray);
  font-size:11.5px;
}

/* ============================================================
   第4回：フォーム・FAQ・レスポンシブ・モーション・ユーティリティ
   ============================================================ */

/* ---------- フォーム ---------- */
.form-panel{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:36px;
}

.form-row{
  margin-bottom:20px;
}

.form-row label{
  display:block;
  font-weight:700;
  font-size:14px;
  margin-bottom:8px;
  color:var(--off-white);
}

.form-row .req{
  color:var(--metallic-gold);
  font-size:12px;
  margin-left:6px;
}

.form-row .opt{
  color:var(--light-gray);
  font-size:12px;
  margin-left:6px;
  font-weight:500;
}

.form-row input,
.form-row textarea,
.form-row select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background:var(--ink-black);
  border:1px solid var(--hairline);
  border-radius:4px;
  color:var(--off-white);
  font:inherit;
  font-size:15px;
}

.form-row textarea{
  min-height:140px;
  resize:vertical;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus{
  outline:2px solid var(--metallic-gold);
  outline-offset:1px;
  border-color:var(--metallic-gold);
}

.form-note{
  font-size:12.5px;
  color:var(--light-gray);
  margin-top:18px;
}

.form-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:20px 0;
  font-size:13.5px;
  color:var(--light-gray);
  line-height:1.6;
}

.form-consent input[type="checkbox"]{
  width:18px;
  height:18px;
  min-height:0;
  margin-top:2px;
  accent-color:var(--metallic-gold);
  flex-shrink:0;
}

.form-consent a{
  color:var(--champagne-gold);
}

.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.demo-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  padding:8px 14px;
  border:1px dashed var(--bronze);
  border-radius:4px;
  color:var(--champagne-gold);
  font-size:12.5px;
}

/* ---------- FAQ（details/summary） ---------- */
.faq-list{
  border-top:1px solid var(--hairline);
}

.faq-item{
  border-bottom:1px solid var(--hairline);
}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:22px 4px;
  display:flex;
  align-items:center;
  gap:16px;
  font-weight:700;
  font-size:15.5px;
  color:var(--off-white);
}

.faq-item summary::-webkit-details-marker{
  display:none;
}

.faq-item summary .q-no{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:13px;
  flex:none;
}

.faq-item summary .ic{
  margin-left:auto;
  position:relative;
  width:16px;
  height:16px;
  flex:none;
}

.faq-item summary .ic::before,
.faq-item summary .ic::after{
  content:"";
  position:absolute;
  background:var(--metallic-gold);
  transition:.25s;
}

.faq-item summary .ic::before{
  top:7px;
  left:0;
  width:16px;
  height:2px;
}

.faq-item summary .ic::after{
  top:0;
  left:7px;
  width:2px;
  height:16px;
}

.faq-item[open] summary .ic::after{
  transform:rotate(90deg);
  opacity:0;
}

.faq-item .a{
  padding:0 4px 24px 40px;
  color:var(--light-gray);
  font-size:14.5px;
}

@media (max-width:600px){
  .faq-item .a{
    padding-left:4px;
  }
}

/* ---------- スクロール出現（8章 モーション） ---------- */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}

.reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

html:not(.js) .reveal{
  opacity:1;
  transform:none;
}

/* ---------- フォーカス表示（15章） ---------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--metallic-gold);
  outline-offset:2px;
}

/* ---------- ユーティリティ ---------- */
.mt-0{
  margin-top:0;
}

.mb-0{
  margin-bottom:0;
}

.center{
  text-align:center;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.skip-link{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:100;
  background:var(--metallic-gold);
  color:var(--ink-black);
  padding:10px 18px;
  border-radius:4px;
  font-weight:700;
  font-size:14px;
  transition:top .2s;
}

.skip-link:focus{
  top:12px;
}

/* ============================================================
   第5回：WordPress移行前の視認性調整
   （文章・サービス条件は変更しない。CSSのみ）
   ============================================================ */

/* ---------- 6. 金色の使用量を絞る（小さな要素は白/ライトグレーへ） ---------- */
.eyebrow{
  color:var(--light-gray);
}

.eyebrow::before{
  background:var(--light-gray);
}

.c-ft__col h4{
  color:var(--off-white);
}

.c-menu__no{
  color:var(--light-gray);
}

.scene__no{
  color:var(--light-gray);
}

.rep-note h4{
  color:var(--off-white);
}

.layer h4{
  color:var(--off-white);
}

.img-slot__label{
  color:var(--light-gray);
}

.demo-badge{
  color:var(--light-gray);
}

.form-row .req{
  color:var(--light-gray);
}

/* ---------- 5. PC：黒／チャコールの帯にリズムをつける ---------- */
.section--charcoal{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.c-trust{
  border-top:2px solid var(--hairline);
  border-bottom:2px solid var(--hairline);
}

/* ---------- 7. PC：カード本文・説明文の文字サイズと行間 ---------- */
.pillar__body,
.layer p,
.rep-note p,
.burden__body,
.card p{
  font-size:15px;
  line-height:1.8;
}

/* ---------- 7. PC：本文が広がりすぎないよう最大幅を確保 ---------- */
p{
  max-width:70ch;
}

/* ---------- 1. スマートフォン：実績カードを読みやすく ---------- */
@media (max-width:767px){
  .stat-grid{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .stat-card{
    padding:20px 16px;
  }
  .stat-card .num{
    font-size:clamp(24px,7vw,32px);
  }
}

@media (max-width:420px){
  .stat-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- 3. スマートフォン：画像プレースホルダーの高さを制限 ---------- */
@media (max-width:767px){
  .img-slot{
    aspect-ratio:auto;
    height:220px;
  }
  .img-slot--portrait{
    aspect-ratio:auto;
    height:260px;
  }
  .img-slot--wide{
    aspect-ratio:auto;
    height:160px;
  }
  .img-slot--square{
    aspect-ratio:auto;
    height:220px;
  }
}

/* ---------- 2. スマートフォン：文字サイズと行間を確保 ---------- */
@media (max-width:767px){
  body{
    line-height:1.9;
  }
  .lead{
    font-size:16px;
    line-height:1.8;
  }
  .eyebrow{
    font-size:12.5px;
    letter-spacing:.18em;
  }
  .stat-card .cap{
    font-size:14px;
  }
  .disclaimer{
    font-size:14.5px;
    line-height:1.8;
  }
  .form-note{
    font-size:13.5px;
    line-height:1.7;
  }
  .tbd{
    font-size:12.5px;
  }
  .c-trust__num small{
    font-size:14px;
  }
  .pillar__no{
    font-size:36px;
  }
  h2,
  .h2{
    font-size:clamp(22px,6.4vw,30px);
  }
}

/* ---------- 4. スマートフォン：フッターを縦方向に整理し、タップ領域を確保 ---------- */
@media (max-width:767px){
  .c-ft__col ul{
    gap:14px;
  }
  .c-ft__col a{
    display:inline-block;
    padding:7px 0;
    font-size:15px;
  }
  .c-ft__brand p{
    font-size:14.5px;
    line-height:1.8;
  }
  .c-ft__legal{
    flex-direction:column;
    gap:4px;
  }
  .c-ft__legal a{
    display:inline-block;
    padding:8px 0;
    font-size:13.5px;
  }
  .c-ft__bottom{
    padding:18px 0 26px;
  }
}

/* ---------- 横スクロール防止の再確認 ---------- */
@media (max-width:400px){
  .c-fv h1{
    word-break:keep-all;
  }
}

/* ====================================
   第6回：トップページCV改修の追加コンポーネント
   ==================================== */

.compare-list{
  display:grid;
  gap:12px;
  font-size:16px;
  margin-top:14px;
  color:var(--light-gray);
}

.compare-list--gold{
  color:var(--off-white);
}

.card--gold{
  border-color:var(--metallic-gold);
}

.card--gold h3{
  color:var(--metallic-gold);
}

.price-huge{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(30px,5vw,44px);
  color:var(--metallic-gold);
  margin-top:14px;
}

.narrative{
  max-width:700px;
}

.narrative p{
  margin-bottom:1.1em;
}

.section-hr{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
}

.service-badge{
  max-width:420px;
  margin:22px 0;
  padding:20px 22px;
}

.service-badge h3{
  margin:8px 0 4px;
}

/* ====================================
   第7回：About Usページ用の追加コンポーネント
   ==================================== */

.story-chapter{
  padding:40px 0;
  border-bottom:1px solid var(--hairline);
}

.story-chapter:last-child{
  border-bottom:none;
}

.story-chapter__no{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:15px;
  letter-spacing:.08em;
  margin-bottom:10px;
}

.pull-quote{
  margin:24px 0;
  padding:16px 22px;
  border-left:3px solid var(--metallic-gold);
  color:var(--off-white);
  font-size:16.5px;
  line-height:1.9;
}

.identity-lead{
  color:var(--metallic-gold);
  font-weight:700;
  font-size:15.5px;
  line-height:1.7;
  max-width:560px;
  margin-bottom:18px;
}

@media (max-width:560px){
  .story-chapter{
    padding:28px 0;
  }

  .pull-quote{
    padding:14px 18px;
    font-size:15.5px;
  }

  .identity-lead{
    font-size:14.5px;
  }
}

/* ====================================
   第8回：トップページ ビジュアル強化
   （fv-33 Chrome / process-06 / vs-09 / numbers-12 / cta-04 を参考に再実装）
   ==================================== */

@keyframes chromeSweep{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

.c-fv{
  position:relative;
}


.c-fv__grid{
  position:relative;
  z-index:1;
}

.c-fv h1{
  font-size:clamp(34px,6vw,66px);
}

/* ---------- 起案者の負担（process-06） ---------- */
.burden-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:40px;
  align-items:start;
  margin-top:36px;
}

.burden-side{
  position:sticky;
  top:calc(var(--hdh) + 24px);
}

.burden-bignum{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:clamp(72px,9vw,128px);
  line-height:.85;
}

.burden-bignum .of{
  font-size:.24em;
  color:var(--light-gray);
}

.burden-cards{
  display:flex;
  flex-direction:column;
}

.burden-card{
  border-top:1px solid var(--hairline);
  padding:28px 0;
}

.burden-card:last-child{
  border-bottom:1px solid var(--hairline);
}

.burden-card__no{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--bronze);
  font-size:13px;
  letter-spacing:.1em;
}

.burden-card h3{
  margin:10px 0 6px;
}

.burden-card p{
  color:var(--light-gray);
  font-size:14.5px;
  margin:0;
}

@media (max-width:820px){
  .burden-layout{
    grid-template-columns:1fr;
    gap:20px;
  }
  .burden-side{
    position:static;
  }
  .burden-bignum{
    font-size:56px;
  }
}

/* ---------- 他との違い（vs-09 透明レイヤー） ---------- */
.compare-layers{
  display:grid;
  gap:22px;
}

.compare-layers .card{
  background:rgba(244,243,239,.045);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.compare-layers .card:nth-child(2){
  transform:translateY(16px);
}

.compare-layers .card:nth-child(3){
  transform:translateY(32px);
}

@media (max-width:900px){
  .compare-layers .card{
    transform:none;
  }
}

/* ---------- ブラウザモック（画像差し替え用の枠） ---------- */
.browser-mock{
  border:1px solid var(--hairline);
  border-radius:10px;
  overflow:hidden;
  background:var(--panel-charcoal);
}

.browser-mock__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:var(--deep-charcoal);
  border-bottom:1px solid var(--hairline);
}

.browser-mock__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hairline);
  display:inline-block;
}

.browser-mock__url{
  flex:1;
  margin-left:8px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.03em;
  color:var(--light-gray);
  background:var(--ink-black);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:4px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.browser-mock__body{
  position:relative;
  aspect-ratio:16/10;
}

.browser-mock__body img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.browser-mock__label{
  position:absolute;
  left:10px;
  bottom:10px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.03em;
  color:var(--champagne-gold);
  background:rgba(11,11,13,.78);
  padding:5px 9px;
  border-radius:4px;
  max-width:calc(100% - 20px);
}

.result-thumb{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:8px;
  overflow:hidden;
  aspect-ratio:16/10;
}

.result-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.result-thumb__label{
  position:absolute;
  left:8px;
  bottom:8px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:9.5px;
  letter-spacing:.03em;
  color:var(--champagne-gold);
  background:rgba(11,11,13,.78);
  padding:4px 8px;
  border-radius:4px;
  max-width:calc(100% - 16px);
}

/* ---------- AIと人による制作体制（工程図） ---------- */
.flow-diagram{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}

.flow-step{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:14px 16px;
  text-align:center;
  min-width:96px;
}

.flow-step__no{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:11px;
  letter-spacing:.08em;
  margin-bottom:4px;
}

.flow-step__label{
  font-size:13px;
  color:var(--off-white);
  font-weight:700;
}

.flow-arrow{
  color:var(--bronze);
  font-size:18px;
}

@media (max-width:700px){
  .flow-diagram{
    flex-direction:column;
  }
  .flow-arrow{
    transform:rotate(90deg);
  }
}

/* ---------- 実績数字（numbers-12 メタリック強調） ---------- */
.stat-hero .num{
  color:var(--metallic-gold);
}

/* ---------- 最終CTA（cta-04 パネル） ---------- */
.cta-panel{
  position:relative;
  background:var(--panel-charcoal);
  border:1px solid var(--metallic-gold);
  border-radius:16px;
  padding:56px 40px;
  overflow:hidden;
}

.cta-panel::after{
  content:"";
  position:absolute;
  right:-30px;
  bottom:-30px;
  width:180px;
  height:180px;
  background-image:radial-gradient(var(--metallic-gold) 1.6px, transparent 1.6px);
  background-size:18px 18px;
  opacity:.16;
  pointer-events:none;
}

.cta-panel > *{
  position:relative;
  z-index:1;
}

@media (max-width:640px){
  .cta-panel{
    padding:40px 24px;
  }
}

@media (prefers-reduced-motion: reduce){
  .js .c-fv h1,
  .js .stat-hero .num{
    animation:none;
  }
}

/* ============================================================
   第9回：トップページ アートディレクション再設計
   （教材コンポーネントの寄せ集めではなく、ページ全体を統合したデザインへ）
   ============================================================ */

.wrap--wide{
  max-width:1440px;
}

.top-section{
  padding:calc(var(--section-gap) + 40px) 0;
}

@media (max-width:767px){
  .top-section{
    padding:calc(var(--section-gap) + 16px) 0;
  }
}

.section-head--display h2{
  font-size:clamp(36px,4.6vw,56px);
  max-width:16ch;
}

.top-msg{
  font-size:clamp(26px,3.2vw,42px) !important;
  font-weight:700;
  max-width:20ch;
}

.btn--lg{
  min-height:60px;
  padding:20px 42px;
  font-size:17px;
}

.accent-chrome{
  background-image:linear-gradient(100deg,
    var(--bronze) 0%,
    var(--metallic-gold) 45%,
    var(--champagne-gold) 100%);
  background-size:160% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.js .accent-chrome{
  animation:chromeSweep 1.8s cubic-bezier(.2,.7,.3,1) 1 both;
}

/* ---------- ファーストビュー：非対称レイアウト ---------- */
.c-fv{
  min-height:92vh;
  padding-top:calc(var(--hdh) + 56px);
  padding-bottom:72px;
}

.c-fv__grid{
  grid-template-columns:1.05fr .95fr;
  gap:64px;
}

.c-fv h1{
  font-size:clamp(42px,7vw,88px);
  line-height:1.08;
}

.c-fv__sub{
  font-size:clamp(15px,1.4vw,18px);
  max-width:520px;
}

.fv-badge{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin:28px 0 34px;
  padding:14px 20px;
  border:1px solid var(--hairline);
  border-left:3px solid var(--metallic-gold);
  border-radius:6px;
  background:rgba(244,243,239,.03);
  font-size:13.5px;
}

.fv-badge__tag{
  color:var(--light-gray);
}

.fv-badge__price{
  color:var(--metallic-gold);
  font-weight:900;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:16px;
}

.fv-badge__dot{
  color:var(--light-gray);
}

.fv-badge__time{
  color:var(--off-white);
}

@media (max-width:900px){
  .c-fv{
    min-height:auto;
  }
  .c-fv__grid{
    grid-template-columns:1fr;
    gap:44px;
  }
}

/* ---------- FVの高品質モック（レイヤー表現） ---------- */
.fv-mock{
  position:relative;
  padding:14% 8% 0 0;
}

.fv-mock__ad{
  position:absolute;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:linear-gradient(160deg, var(--deep-charcoal), var(--panel-charcoal));
  box-shadow:0 30px 60px -30px rgba(0,0,0,.65);
}

.fv-mock__ad--a{
  top:0;
  right:0;
  width:60%;
  aspect-ratio:4/5;
  transform:rotate(6deg);
  opacity:.65;
}

.fv-mock__ad--b{
  bottom:-4%;
  left:-2%;
  width:42%;
  aspect-ratio:1/1;
  transform:rotate(-6deg);
  opacity:.5;
}

.fv-mock__browser{
  position:relative;
  z-index:2;
}

@media (max-width:900px){
  .fv-mock{
    padding:10% 4% 0 0;
  }
  .fv-mock__ad{
    display:none;
  }
}

/* ---------- 高品質LPモック（共通・fv/主力サービスで使用） ---------- */
.lp-mock{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:14px;
  overflow:hidden;
  background:linear-gradient(165deg, var(--panel-charcoal), var(--deep-charcoal));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
}

.lp-mock__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  background:var(--deep-charcoal);
  border-bottom:1px solid var(--hairline);
}

.lp-mock__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--hairline);
  display:inline-block;
}

.lp-mock__url{
  flex:1;
  margin-left:10px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--light-gray);
  background:var(--ink-black);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:5px 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.lp-mock__page{
  padding:7%;
}

.lp-mock__hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:5%;
  align-items:center;
  margin-bottom:7%;
}

.lp-mock__img{
  position:relative;
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(140deg, rgba(179,146,79,.18), rgba(138,106,72,.12));
}

.lp-mock__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.5;
  mix-blend-mode:luminosity;
  display:block;
}

.lp-mock__lines{
  display:grid;
  gap:12px;
}

.lp-mock__line{
  display:block;
  height:11px;
  border-radius:3px;
  background:var(--hairline);
}

.lp-mock__line--lg{
  width:92%;
  height:18px;
  background:linear-gradient(90deg, var(--champagne-gold), var(--metallic-gold));
  opacity:.85;
}

.lp-mock__line--md{
  width:76%;
}

.lp-mock__line--sm{
  width:52%;
}

.lp-mock__stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:7%;
}

.lp-mock__stat{
  background:var(--ink-black);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:14px;
}

.lp-mock__stat-bar{
  display:block;
  height:6px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--metallic-gold), var(--champagne-gold));
  margin-bottom:10px;
}

.lp-mock__stat-label{
  font-size:11px;
  color:var(--light-gray);
  letter-spacing:.05em;
}

.lp-mock__cta{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:8px;
  background:var(--metallic-gold);
  color:var(--ink-black);
  font-weight:900;
  font-size:13.5px;
  letter-spacing:.04em;
}

.lp-mock--lg .lp-mock__page{
  padding:6%;
}

@media (max-width:600px){
  .lp-mock__hero{
    grid-template-columns:1fr;
  }
}

/* ---------- 起案者の負担：画面幅いっぱいの4行リスト ---------- */
.burden-rows{
  margin-top:56px;
  border-top:1px solid var(--hairline);
}

.burden-row{
  display:grid;
  grid-template-columns:.7fr 1.6fr 2.4fr;
  align-items:baseline;
  gap:28px;
  padding:44px 0;
  border-bottom:1px solid var(--hairline);
}

.burden-row__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(40px,4.6vw,68px);
  color:var(--bronze);
  line-height:1;
}

.burden-row__title{
  font-size:clamp(24px,2.8vw,36px);
  margin:0;
}

.burden-row__desc{
  color:var(--light-gray);
  font-size:16px;
  margin:0;
  max-width:46ch;
}

@media (max-width:820px){
  .burden-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:30px 0;
  }
  .burden-row__no{
    font-size:38px;
  }
}

/* ---------- 考え方と比較：非対称レイヤー ---------- */
.vs-layout{
  display:grid;
  grid-template-columns:.85fr 1.3fr .85fr;
  gap:0 28px;
  align-items:center;
  margin-top:24px;
}

.vs-side{
  padding:28px 8px;
  opacity:.72;
}

.vs-side h3{
  color:var(--light-gray);
  font-size:19px;
}

.vs-center{
  position:relative;
  background:var(--panel-charcoal);
  border:1px solid var(--metallic-gold);
  border-radius:14px;
  padding:44px 38px;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.65);
  transform:scale(1.06);
  z-index:2;
}

.vs-center__badge{
  display:inline-block;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--metallic-gold);
  border:1px solid var(--metallic-gold);
  padding:5px 10px;
  border-radius:4px;
  margin-bottom:16px;
}

.vs-center h3{
  font-size:26px;
}

@media (max-width:900px){
  .vs-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  .vs-center{
    transform:none;
    order:-1;
  }
  .vs-side{
    opacity:.9;
    padding:0;
  }
}

/* ---------- 主力サービス：2カラム訴求 ---------- */
.service-feature{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:6%;
  align-items:center;
  margin-top:24px;
}

.service-feature__illust{
  margin-top:28px;
  aspect-ratio:16/9;
}

.service-feature__price{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin:24px 0;
  flex-wrap:wrap;
}

.service-feature__price-main{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.service-feature__price-tax{
  font-size:13px;
  color:var(--light-gray);
  font-weight:400;
}

.service-feature__price-num{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(34px,4vw,50px);
  color:var(--metallic-gold);
}

.service-feature__price-sub{
  color:var(--light-gray);
  font-size:14.5px;
}

@media (max-width:980px){
  .service-feature{
    grid-template-columns:1fr;
    gap:36px;
  }
}

/* ---------- AIと人による制作体制：連結システム図 ---------- */
.process-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  margin-top:56px;
  padding-top:22px;
}

.process-track__line{
  position:absolute;
  top:34px;
  left:6%;
  right:6%;
  height:2px;
  background:linear-gradient(90deg, var(--bronze), var(--metallic-gold), var(--champagne-gold), var(--metallic-gold), var(--bronze));
}

.process-track__node{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 8px;
}

.process-track__dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--metallic-gold);
  border:3px solid var(--deep-charcoal);
  box-shadow:0 0 0 1px var(--hairline);
  margin-bottom:16px;
}

.process-track__node--designer .process-track__dot{
  background:var(--champagne-gold);
}

.process-track__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:11px;
  color:var(--light-gray);
  letter-spacing:.06em;
}

.process-track__label{
  font-size:14.5px;
  font-weight:700;
  color:var(--off-white);
  margin:6px 0 4px;
}

.process-track__who{
  font-size:11px;
  color:var(--bronze);
  letter-spacing:.05em;
}

.process-track__node--designer .process-track__who{
  color:var(--champagne-gold);
}

.process-legend{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:40px;
  font-size:12.5px;
  color:var(--light-gray);
}

.process-legend__dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  background:var(--bronze);
}

.process-legend__dot--human{
  background:var(--metallic-gold);
}

.process-legend__dot--designer{
  background:var(--champagne-gold);
}

@media (max-width:820px){
  .process-track{
    grid-template-columns:1fr;
    gap:30px;
  }
  .process-track__line{
    top:0;
    bottom:0;
    left:22px;
    right:auto;
    width:2px;
    height:auto;
    background:linear-gradient(180deg, var(--bronze), var(--metallic-gold), var(--champagne-gold), var(--metallic-gold), var(--bronze));
  }
  .process-track__node{
    flex-direction:row;
    text-align:left;
    padding-left:48px;
    align-items:flex-start;
  }
  .process-track__dot{
    position:absolute;
    left:16px;
    top:4px;
    margin-bottom:0;
  }
}

/* ---------- 実績：非対称グリッド ---------- */
.stat-hero .num{
  font-size:clamp(56px,10vw,120px);
}

.results-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:22px;
  margin-top:52px;
}

.result-card--lg{
  grid-row:1 / 3;
}

.result-card__visual{
  position:relative;
  aspect-ratio:16/10;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--hairline);
  background:linear-gradient(150deg, var(--panel-charcoal), var(--deep-charcoal));
}

.result-card--lg .result-card__visual{
  aspect-ratio:4/3;
}

.result-card__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.4;
  mix-blend-mode:luminosity;
  display:block;
}

.result-card__dev{
  position:absolute;
  top:8px;
  right:8px;
  font-size:9px;
  letter-spacing:.04em;
  color:var(--light-gray);
  background:rgba(11,11,13,.72);
  padding:3px 6px;
  border-radius:3px;
}

.result-card__meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-top:12px;
}

.result-card__amount{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:clamp(20px,2.2vw,28px);
}

.result-card--lg .result-card__amount{
  font-size:clamp(30px,3.4vw,42px);
}

.result-card__platform{
  font-size:12px;
  color:var(--light-gray);
  letter-spacing:.04em;
}

@media (max-width:900px){
  .results-grid{
    grid-template-columns:1fr;
  }
  .result-card--lg{
    grid-row:auto;
  }
}

/* ---------- NEXT／一般販売：静かなティーザー ---------- */
.teaser-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline);
  margin-top:48px;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}

.teaser-block{
  background:var(--deep-charcoal);
  padding:48px 44px;
}

.teaser-block h3{
  font-size:clamp(22px,2.6vw,30px);
  margin:16px 0 12px;
}

.teaser-block p{
  color:var(--light-gray);
  font-size:15px;
  max-width:40ch;
}

.teaser-block__link{
  display:inline-block;
  margin-top:18px;
  color:var(--metallic-gold);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
}

.teaser-block__link:hover{
  text-decoration:underline;
}

@media (max-width:820px){
  .teaser-grid{
    grid-template-columns:1fr;
  }
  .teaser-block{
    padding:36px 28px;
  }
}

/* ---------- 最終CTA：画面幅を使った結論 ---------- */
.final-cta{
  text-align:center;
}

.final-cta__inner{
  max-width:820px;
}

.final-cta__headline{
  font-size:clamp(34px,5vw,58px);
}

.final-cta__weak{
  display:inline-block;
  margin-top:30px;
  font-size:13.5px;
  color:var(--light-gray);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ============================================================
   第10回：トップページ 再修正
   （FVを中央1カラム＋粒子背景へ、セクションごとにレイアウトを変え、
   AI×人ブロックを3要素の掛け合わせへ、実績を非対称化）
   ============================================================ */

/* ---------- ファーストビュー：中央1カラム＋粒子背景 ---------- */
.c-fv{
  min-height:88vh;
  padding-top:calc(var(--hdh) + 40px);
  padding-bottom:60px;
  display:flex;
  align-items:center;
}

.c-fv__grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:920px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.c-fv__canvas-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}

.c-fv__canvas-wrap canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.c-fv h1{
  font-size:clamp(46px,9vw,96px);
  line-height:1.06;
}

.c-fv__sub{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(15.5px,1.5vw,18px);
}

.fv-badge{
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

@media (max-width:640px){
  .c-fv{
    min-height:auto;
  }
}

/* ---------- 2カラム：左ラベル・右メッセージ ---------- */
.split-message{
  display:grid;
  grid-template-columns:.6fr 1.4fr;
  gap:48px;
  align-items:start;
}

.split-message__body .top-msg{
  margin:0 0 .5em;
}

.split-message__body .top-msg:last-child{
  margin-bottom:0;
}

@media (max-width:820px){
  .split-message{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* ---------- 4つの負担：中心となる大きなグリッド ---------- */
.burden-lead{
  max-width:640px;
  margin:18px 0 0;
  color:var(--light-gray);
}

.burden-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
  margin-top:48px;
}

.burden-cell{
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:48px 44px;
}

.burden-cell__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(44px,4.6vw,64px);
  color:var(--bronze);
  line-height:1;
  display:block;
  margin-bottom:14px;
}

.burden-cell h3{
  font-size:clamp(22px,2.4vw,28px);
  margin:0 0 10px;
}

.burden-cell p{
  color:var(--light-gray);
  font-size:15.5px;
  margin:0;
  max-width:38ch;
}

@media (max-width:820px){
  .burden-grid{
    grid-template-columns:1fr;
  }
  .burden-cell{
    padding:32px 6px;
  }
}

/* ---------- 比較セクション：カード見出し強化 ---------- */
.vs-side h3,
.vs-center h3{
  font-size:clamp(22px,2.4vw,28px);
}

/* ---------- 3要素の掛け合わせ（セールスライター×デザイナー×AI） ---------- */
.trio{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:0 18px;
  margin-top:52px;
}

.trio__card{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:32px 28px;
}

.trio__card--ai{
  border-color:var(--metallic-gold);
}

.trio__card h3{
  font-size:clamp(20px,2.2vw,25px);
  margin:0 0 16px;
}

.trio__card ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:var(--light-gray);
  font-size:14.5px;
}

.trio__times{
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:28px;
  color:var(--metallic-gold);
}

.trio-outcomes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:44px;
  padding-top:44px;
  border-top:1px solid var(--hairline);
  text-align:center;
}

.trio-outcomes__tag{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--bronze);
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:10px;
}

.trio-outcomes__label{
  font-size:clamp(24px,2.8vw,34px);
  font-weight:900;
  color:var(--off-white);
}

@media (max-width:900px){
  .trio{
    grid-template-columns:1fr;
    gap:18px;
  }
  .trio__times{
    transform:rotate(90deg);
    padding:4px 0;
  }
  .trio-outcomes{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* ---------- 実績：導入文・リンク ---------- */
.results-intro{
  max-width:640px;
  margin:14px auto 0;
  color:var(--light-gray);
  text-align:center;
}

.result-card__link{
  display:inline-block;
  margin-top:8px;
  font-size:12px;
  color:var(--metallic-gold);
  letter-spacing:.02em;
}

/* ---------- カード見出しの全体強化 ---------- */
.teaser-block h3{
  font-size:clamp(24px,2.8vw,32px);
}

/* ============================================================
   第11回：主力サービス／実績／最終CTA／4つの負担 の再修正
   ============================================================ */

/* ---------- 主力サービス：納品物レイヤースタック ---------- */
.deliverable-stack{
  position:relative;
  min-height:600px;
}

.deliverable-card{
  position:absolute;
  border-radius:12px;
  border:1px solid var(--hairline);
  background:var(--panel-charcoal);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
  overflow:hidden;
}

.deliverable-card__tag{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--champagne-gold);
  background:rgba(11,11,13,.7);
  padding:6px 12px;
  border-bottom:1px solid var(--hairline);
}

.deliverable-card__body{
  padding:18px;
}

.deliverable-card--wf{
  top:0;
  left:0;
  width:52%;
  aspect-ratio:4/3;
  z-index:1;
  transform:rotate(-4deg);
  background:var(--ink-black);
  opacity:.92;
}

.deliverable-card--wf .deliverable-card__body{
  display:grid;
  gap:10px;
  height:100%;
}

.wf-block{
  display:block;
  border:1px dashed var(--light-gray);
  border-radius:3px;
  opacity:.55;
}

.wf-block--a{ height:22%; }
.wf-block--b{ height:14%; width:60%; }
.wf-block--c{ height:32%; }
.wf-block--d{ height:14%; width:80%; }

.deliverable-card--page{
  top:12%;
  right:0;
  width:66%;
  aspect-ratio:4/3;
  z-index:3;
  background:linear-gradient(165deg, var(--panel-charcoal), var(--deep-charcoal));
  border-color:var(--hairline);
}

.deliverable-card--page .deliverable-card__body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.deliverable-card--page .dc-img{
  aspect-ratio:1/1;
  border-radius:6px;
  background:linear-gradient(140deg, rgba(179,146,79,.16), rgba(138,106,72,.1));
}

.deliverable-card--page .dc-lines{
  display:grid;
  gap:10px;
  align-content:center;
}

.deliverable-card--page .dc-line{
  display:block;
  height:10px;
  border-radius:3px;
  background:var(--hairline);
}

.deliverable-card--page .dc-line--lg{
  height:16px;
  width:88%;
  background:linear-gradient(90deg, var(--champagne-gold), var(--metallic-gold));
}

.deliverable-card--page .dc-line--md{ width:70%; }
.deliverable-card--page .dc-line--sm{ width:48%; }

.deliverable-card--kv{
  bottom:2%;
  left:2%;
  width:44%;
  aspect-ratio:3/4;
  z-index:2;
  transform:rotate(5deg);
  background:linear-gradient(160deg, rgba(179,146,79,.14), var(--deep-charcoal) 55%);
  border-color:var(--hairline);
}

.deliverable-card--kv .deliverable-card__body{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.deliverable-card--kv .kv-bar{
  display:block;
  height:14px;
  border-radius:3px;
  background:var(--champagne-gold);
  width:70%;
  margin-bottom:8px;
}

.deliverable-card--return{
  bottom:-2%;
  right:4%;
  width:40%;
  aspect-ratio:5/4;
  z-index:4;
  transform:rotate(-3deg);
}

.deliverable-card--return .deliverable-card__body{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}

.rt-swatch{
  aspect-ratio:1/1;
  border-radius:4px;
  background:var(--deep-charcoal);
  border:1px solid var(--hairline);
}

.rt-price{
  grid-column:1 / -1;
  height:12px;
  border-radius:3px;
  background:var(--bronze);
  margin-top:2px;
}

@media (max-width:980px){
  .deliverable-stack{
    min-height:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .deliverable-card{
    position:static;
    width:auto;
    transform:none;
  }
}

@media (max-width:600px){
  .deliverable-stack{
    grid-template-columns:1fr;
  }
}

/* ---------- 実績：タイポグラフィ中心（画像なし） ---------- */
.result-card{
  border-top:2px solid var(--hairline);
  padding-top:22px;
}

.result-card--lg{
  border-top-color:var(--metallic-gold);
}

.result-card__figure{
  display:flex;
  align-items:baseline;
  gap:6px;
}

.result-card__amount{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:clamp(30px,3.2vw,42px);
  line-height:1;
}

.result-card--lg .result-card__amount{
  font-size:clamp(56px,7vw,96px);
}

.result-card__unit{
  font-size:.42em;
  color:var(--light-gray);
}

.result-card__cap{
  margin:10px 0 0;
  font-size:12.5px;
  color:var(--light-gray);
  letter-spacing:.04em;
}

/* ---------- 最終CTA：光の演出（FVとは異なる表現） ---------- */
.final-cta{
  position:relative;
  overflow:hidden;
  padding-top:calc(var(--section-gap) + 60px);
  padding-bottom:calc(var(--section-gap) + 60px);
}

.final-cta::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10%;
  width:70%;
  height:60%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(217,201,163,.12), transparent 75%);
  pointer-events:none;
}

.final-cta__inner{
  position:relative;
  z-index:1;
  max-width:900px;
}

.final-cta__headline{
  font-size:clamp(38px,6vw,68px);
}

@media (max-width:640px){
  .final-cta::before,
  .final-cta::after{
    display:none;
  }
}

/* ---------- 4つの負担：非対称リスト（罫線主体） ---------- */
.burden-list{
  border-top:1px solid var(--hairline);
  margin-top:48px;
}

.burden-item{
  display:grid;
  grid-template-columns:.5fr 1.3fr 2fr;
  align-items:baseline;
  gap:24px;
  padding:40px 0;
  border-bottom:1px solid var(--hairline);
}

.burden-item__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(48px,5vw,72px);
  color:var(--bronze);
  line-height:1;
}

.burden-item__title{
  font-size:clamp(22px,2.2vw,28px);
  margin:0;
  white-space:nowrap;
}

@media (max-width:980px){
  .burden-item__title{
    white-space:normal;
  }
}

.burden-item__desc{
  color:var(--light-gray);
  font-size:16px;
  margin:0;
  max-width:42ch;
}

@media (max-width:820px){
  .burden-item{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:14px;
    row-gap:6px;
    padding:24px 0;
  }
  .burden-item:nth-child(even){
    padding-left:0;
  }
  .burden-item__no{
    grid-column:1;
    grid-row:1;
    font-size:32px;
  }
  .burden-item__title{
    grid-column:2;
    grid-row:1;
    align-self:center;
    font-size:20px;
  }
  .burden-item__desc{
    grid-column:1 / -1;
    grid-row:2;
    font-size:15.5px;
  }
}

/* ============================================================
   第13回：色設計の見直し（金は差し色に限定）＋残りの構造修正
   ============================================================ */


.c-fv__sub{
  font-size:clamp(16px,1.6vw,19px);
}

.fv-break-mobile{
  display:none;
}

/* 見出しの不自然な折り返し防止：文節単位でのみ改行させる */
.u-seg{
  display:inline-block;
}

@media (max-width:640px){
  .fv-break-mobile{
    display:inline;
  }
}

@media (max-width:640px){
  .final-cta .btn-row{
    flex-direction:column;
  }
  .final-cta .btn{
    width:100%;
  }
}

/* ---------- 4つの負担：左に見出し、右にリスト ---------- */
.burden-layout2{
  display:grid;
  grid-template-columns:.8fr 1.6fr;
  gap:56px;
  align-items:start;
}

.burden-layout2 .section-head{
  margin:0;
}

.burden-item__no{
  font-size:clamp(56px,5.6vw,84px);
}

@media (max-width:980px){
  .burden-layout2{
    grid-template-columns:1fr;
    gap:28px;
  }
}

/* ---------- もっと軽くあるべきだ：太い縦線＋3段落 ---------- */
.belief-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:56px;
  align-items:start;
}

.belief-layout__body{
  border-left:3px solid var(--metallic-gold);
  padding-left:32px;
  display:grid;
  gap:22px;
}

.belief-layout__body p{
  color:var(--light-gray);
  font-size:16.5px;
  margin:0;
}

.belief-layout__msg{
  border-left:none;
  padding-left:0;
  margin-top:4px;
}

@media (max-width:820px){
  .belief-layout{
    grid-template-columns:1fr;
    gap:24px;
  }
  .belief-layout__body{
    padding-left:20px;
  }
}

/* ---------- 比較：負荷メーター＋モバイル並び順 ---------- */
.vs-meter{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.vs-meter__label{
  font-size:12px;
  color:var(--light-gray);
}

.vs-meter__track{
  height:6px;
  border-radius:3px;
  background:var(--hairline);
  overflow:hidden;
}

.vs-meter__fill{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--light-gray);
}

.vs-center .vs-meter__fill{
  background:var(--metallic-gold);
}

@media (max-width:900px){
  .vs-side{
    order:1;
    opacity:.9;
    padding:22px;
    background:var(--panel-charcoal);
    border-radius:10px;
  }
  .vs-center{
    order:3;
  }
}

/* ---------- 主力サービス：サービス名・価格を強化 ---------- */
.service-feature__name{
  font-size:clamp(17px,1.8vw,20px);
  color:var(--light-gray);
  margin:0 0 14px;
  font-weight:700;
}

.service-feature__price-num{
  font-size:clamp(42px,4.6vw,60px);
}

/* ---------- 納品物モック：内容強化 ---------- */
.dc-features{
  display:flex;
  gap:8px;
  margin-top:12px;
}

.dc-feature{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid var(--metallic-gold);
  background:transparent;
}

.dc-cta{
  display:block;
  margin-top:14px;
  padding:9px;
  text-align:center;
  border:1px solid var(--metallic-gold);
  color:var(--metallic-gold);
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.06em;
  border-radius:4px;
}

.deliverable-card--kv .deliverable-card__body{
  display:flex;
  flex-direction:column;
  height:100%;
}

.kv-copy{
  display:block;
  height:20px;
  width:80%;
  border-radius:4px;
  background:var(--champagne-gold);
  margin-bottom:14px;
}

.kv-product{
  display:block;
  flex:1;
  border-radius:8px;
  background:linear-gradient(160deg, rgba(179,146,79,.22), var(--deep-charcoal) 70%);
}

.rt-qty{
  grid-column:1 / -1;
  height:8px;
  border-radius:3px;
  background:var(--hairline);
  margin-top:2px;
}

@media (max-width:980px){
  .deliverable-stack{
    position:static;
    min-height:0;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
  }
  .deliverable-card{
    position:static;
    transform:none;
  }
  .deliverable-card--wf{
    width:calc(50% - 8px);
    aspect-ratio:1/1;
    order:3;
  }
  .deliverable-card--page{
    width:100%;
    aspect-ratio:16/11;
    order:1;
  }
  .deliverable-card--kv{
    width:100%;
    aspect-ratio:16/9;
    order:2;
  }
  .deliverable-card--return{
    width:calc(50% - 8px);
    aspect-ratio:1/1;
    order:4;
  }
}

@media (max-width:600px){
  .deliverable-card--wf,
  .deliverable-card--return{
    width:100%;
  }
}

/* ---------- AIと人：中央収束レイアウト（カードではなく線と交点） ---------- */
.convergence-illust{
  margin-top:32px;
}

.convergence{
  margin-top:52px;
}

.convergence__inputs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  padding-top:24px;
  border-top:1px solid var(--hairline);
}

.convergence__input{
  text-align:center;
}

.convergence__input-label{
  display:block;
  font-size:clamp(18px,2vw,22px);
  font-weight:900;
  color:var(--off-white);
  margin-bottom:14px;
}

.convergence__input--ai .convergence__input-label{
  color:var(--metallic-gold);
}

.convergence__input ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  color:var(--light-gray);
  font-size:15px;
}

.convergence__node{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:44px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  border:1px solid var(--metallic-gold);
  background:radial-gradient(circle, rgba(179,146,79,.12), transparent 72%);
  text-align:center;
}

.convergence__node-label{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--champagne-gold);
  line-height:1.5;
}

.convergence__outputs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding-top:32px;
  border-top:1px solid var(--hairline);
  text-align:center;
}

.convergence__output-tag{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--bronze);
  font-size:12px;
  letter-spacing:.1em;
  margin-bottom:10px;
}

.convergence__output-label{
  font-size:clamp(24px,2.8vw,34px);
  font-weight:900;
  color:var(--off-white);
}

@media (max-width:820px){
  .convergence__inputs{
    grid-template-columns:1fr;
    gap:26px;
  }
  .convergence__outputs{
    grid-template-columns:1fr;
    gap:22px;
  }
  .convergence__node{
    width:150px;
    height:150px;
    margin:36px auto;
  }
}

/* ---------- 実績：画像枠・強弱・要確認バッジ ---------- */
.result-card__img{
  margin-bottom:16px;
}

.result-card__amount{
  font-size:clamp(36px,3.8vw,50px);
}

.result-card--lg .result-card__amount{
  font-size:clamp(56px,7vw,96px);
}

.result-card__cap{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ---------- NEXT／一般販売：非対称の大きな2分割 ---------- */
.next-layout{
  display:grid;
  grid-template-columns:1.15fr auto .85fr;
  gap:0 48px;
  align-items:start;
  margin-top:52px;
}

.next-layout__divider{
  width:1px;
  background:var(--hairline);
  align-self:stretch;
}

.next-block__no{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:clamp(48px,5vw,72px);
  color:var(--bronze);
  margin-bottom:14px;
  line-height:1;
}

.next-block h3{
  font-size:clamp(26px,3vw,36px);
  margin:14px 0 12px;
}

.next-block p{
  color:var(--light-gray);
  font-size:16px;
  max-width:38ch;
}

@media (max-width:820px){
  .next-layout{
    grid-template-columns:1fr;
    gap:32px;
  }
  .next-layout__divider{
    width:100%;
    height:1px;
  }
}

/* ---------- 最終CTA：放射線を廃止し、金属光の帯へ ---------- */
.final-cta::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-10%;
  width:60%;
  height:140%;
  background:linear-gradient(75deg,
    transparent 40%,
    rgba(217,201,163,.08) 48%,
    rgba(179,146,79,.14) 50%,
    rgba(217,201,163,.08) 52%,
    transparent 60%);
  transform:rotate(8deg);
  pointer-events:none;
}

.final-cta__headline{
  font-size:clamp(42px,6.4vw,72px);
}

/* ============================================================
   第14回：FVをsample36「fv-76 OpeningTitle」の構造で再構築
   （_references/sample36/index.html 561〜577行目のDOM・アニメーションを移植。
   実写・色・フォント・文章はsample36から一切流用しない）
   主力サービスは sec-services-04.html「空港フリップボード」の
   パネル＋ヘッダー帯＋番号行の構造を、納品物4点の一覧へ転用。
   ============================================================ */

.c-fv{
  position:relative;
  width:100%;
  height:calc(100svh - var(--hdh));
  min-height:560px;
  max-height:1040px;
  background:var(--ink-black);
  color:var(--off-white);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:0;
}

.c-fv__grain{
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  animation:c-fv-flick .42s steps(2) infinite;
}

@keyframes c-fv-flick{
  50%{ opacity:.18; }
}

.c-fv__bar{
  position:absolute;
  left:0;
  width:100%;
  height:16%;
  background:#000;
  z-index:5;
}

.c-fv__bar.t{
  top:0;
  animation:c-fv-openT .9s cubic-bezier(.7,0,.2,1) .2s forwards;
}

.c-fv__bar.b{
  bottom:0;
  animation:c-fv-openB .9s cubic-bezier(.7,0,.2,1) .2s forwards;
}

@keyframes c-fv-openT{
  to{ transform:translateY(-100%); }
}

@keyframes c-fv-openB{
  to{ transform:translateY(100%); }
}

.c-fv__canvas-wrap{
  z-index:0;
}

.c-fv__scrim{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(11,11,13,.7) 0%, rgba(11,11,13,.42) 45%, rgba(11,11,13,.78) 100%);
  pointer-events:none;
}

.c-fv__leak{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  background:radial-gradient(58% 46% at 50% 52%, rgba(179,146,79,.12) 0%, transparent 68%);
  animation:c-fv-leakIn 1.6s ease .3s forwards;
  pointer-events:none;
}

@keyframes c-fv-leakIn{
  to{ opacity:1; }
}

.c-fv__center{
  text-align:center;
  position:relative;
  z-index:6;
  padding:0 6vw;
  max-width:920px;
  margin:0 auto;
}

.c-fv__pres{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:11px;
  letter-spacing:.5em;
  color:rgba(244,243,239,.5);
  margin:0 0 22px;
  text-transform:uppercase;
  opacity:0;
  animation:c-fv-rise .8s ease .15s forwards;
}

.c-fv h1{
  opacity:0;
  animation:c-fv-track 1.3s cubic-bezier(.16,1,.3,1) .3s forwards;
}

@keyframes c-fv-track{
  0%{ opacity:0; letter-spacing:.3em; filter:blur(4px); }
  40%{ opacity:1; }
  100%{ opacity:1; letter-spacing:normal; filter:blur(0); }
}

.c-fv__sub{
  opacity:0;
  animation:c-fv-rise .8s ease .6s forwards;
}

.c-fv .fv-badge{
  opacity:0;
  animation:c-fv-rise .8s ease .8s forwards;
}

.c-fv .btn-row{
  opacity:0;
  animation:c-fv-rise .8s ease .95s forwards;
}

@keyframes c-fv-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.js .accent-chrome{
  animation-delay:1.6s;
}

.c-fv__credits{
  position:absolute;
  left:50%;
  bottom:4vh;
  transform:translateX(-50%);
  z-index:6;
  width:min(720px,90vw);
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  color:rgba(169,169,173,.7);
  text-transform:uppercase;
  opacity:0;
  animation:c-fv-rise .8s ease 1.1s forwards;
}

@media (max-width:640px){
  .c-fv__credits{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .c-fv__bar.t{ animation:none; transform:translateY(-100%); }
  .c-fv__bar.b{ animation:none; transform:translateY(100%); }
  .c-fv__pres,
  .c-fv__sub,
  .c-fv h1,
  .c-fv .fv-badge,
  .c-fv .btn-row,
  .c-fv__leak,
  .c-fv__credits{
    animation:none;
    opacity:1;
    letter-spacing:normal;
    filter:none;
    transform:none;
  }
  .c-fv__grain{
    animation:none;
  }
}

/* ---------- 主力サービス：サービス便フリップボード風パネル（services-04移植） ---------- */
.deliverable-board{
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:clamp(18px,2.4vw,30px);
  box-shadow:0 36px 70px -36px rgba(0,0,0,.7);
}

.deliverable-board__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--hairline);
  padding-bottom:14px;
  margin-bottom:6px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10.5px;
  letter-spacing:.24em;
  color:var(--light-gray);
  text-transform:uppercase;
}

.deliverable-board__head .dot{
  color:var(--metallic-gold);
}

.deliverable-row{
  display:grid;
  grid-template-columns:2.6em auto 1fr auto;
  align-items:center;
  gap:clamp(10px,2vw,20px);
  padding:clamp(14px,1.8vw,20px) 0;
  border-bottom:1px dashed var(--hairline);
}

.deliverable-row:last-child{
  border-bottom:none;
}

.deliverable-row__no{
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--metallic-gold);
}

.deliverable-row__swatch{
  width:44px;
  height:44px;
  border-radius:6px;
  flex:none;
}

.deliverable-row__swatch--wf{
  background:transparent;
  border:1px dashed var(--light-gray);
}

.deliverable-row__swatch--page{
  background:linear-gradient(150deg, var(--deep-charcoal), var(--panel-charcoal));
  border:1px solid var(--hairline);
  position:relative;
  overflow:hidden;
}

.deliverable-row__swatch--page::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  top:28%;
  height:16%;
  background:var(--champagne-gold);
  border-radius:2px;
}

.deliverable-row__swatch--kv{
  background:linear-gradient(150deg, rgba(179,146,79,.28), var(--deep-charcoal) 75%);
  border:1px solid var(--hairline);
}

.deliverable-row__swatch--return{
  background:var(--ink-black);
  border:1px solid var(--hairline);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  padding:6px;
}

.deliverable-row__swatch--return span{
  background:var(--panel-charcoal);
  border-radius:2px;
}

.deliverable-row__body{
  min-width:0;
}

.deliverable-row__name{
  display:block;
  font-weight:700;
  font-size:15.5px;
  color:var(--off-white);
}

.deliverable-row__desc{
  display:block;
  font-size:13px;
  color:var(--light-gray);
  margin-top:3px;
}

.deliverable-row__status{
  flex:none;
  text-align:right;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:10px;
  letter-spacing:.14em;
  color:var(--light-gray);
  white-space:nowrap;
}

.deliverable-board__foot{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--hairline);
  font-size:12.5px;
  color:var(--light-gray);
}

@media (max-width:560px){
  .deliverable-row{
    grid-template-columns:2em auto 1fr;
    row-gap:6px;
  }
  .deliverable-row__status{
    grid-column:1 / -1;
    text-align:left;
    padding-left:calc(2em + 44px + 10px);
  }
}

/* ============================================================
   第15回：3セクションの文字組み・カラム幅・改行・余白の是正
   ＋FVラベル中心・比較セクション再構成・実績／その次へ実画像化
   ============================================================ */

/* ---------- 共通：見出しmax-widthを広げ2行に収まりやすくする ---------- */
.section-head--display h2{
  max-width:26ch;
}

.wrap--wide .section-head{
  max-width:920px;
}

/* ---------- FV：英字ラベルの中心をh1と揃える（letter-spacing末尾分を補正） ---------- */
.c-fv__center{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.c-fv__pres{
  display:inline-block;
  margin-right:-.5em;
}

/* ---------- 1．負担セクション：カラム比・基準線 ---------- */
.burden-layout2{
  grid-template-columns:.85fr 1.05fr;
}

.burden-layout2 .section-head h2{
  font-size:clamp(28px,3.2vw,44px);
  max-width:none;
}

.burden-layout2 .burden-lead{
  margin-top:20px;
}

.burden-item{
  align-items:center;
}

.burden-item__no{
  font-size:clamp(44px,4.4vw,64px);
}

@media (max-width:980px){
  .burden-layout2{
    grid-template-columns:1fr;
  }
}

/* ---------- 2．「もっと軽くあるべきだ」：カラム比・4段落・細線 ---------- */
.belief-layout{
  grid-template-columns:.82fr 1.08fr;
}

.belief-layout .split-message__label h2{
  font-size:clamp(28px,3.4vw,46px);
  max-width:none;
}

.belief-layout__lined{
  border-left:2px solid var(--metallic-gold);
  padding-left:28px;
  display:grid;
  gap:20px;
}

.belief-layout__lined p{
  color:var(--light-gray);
  font-size:16.5px;
  line-height:1.8;
  margin:0;
}

.belief-layout__msg{
  border:none;
  padding-left:0;
  margin-top:24px;
  font-weight:700;
  color:var(--off-white);
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.45;
}

@media (max-width:820px){
  .belief-layout{
    grid-template-columns:1fr;
  }
  .belief-layout__lined{
    padding-left:20px;
  }
}

/* ---------- 3．比較セクション：全面再構成 ---------- */
.compare-note{
  text-align:center;
  color:var(--light-gray);
  font-size:13px;
  margin:14px 0 0;
}

.vs-layout{
  grid-template-columns:1fr 1.15fr 1fr;
  margin-top:64px;
}

.vs-side{
  padding:32px 26px;
  background:rgba(244,243,239,.03);
  border:1px solid var(--hairline);
  border-radius:10px;
  opacity:1;
}

.vs-side h3{
  color:var(--off-white);
  font-size:clamp(19px,1.9vw,23px);
}

.vs-center{
  transform:scale(1.03);
  padding:40px 34px;
}

.vs-center h3{
  font-size:clamp(23px,2.3vw,27px);
}

.vs-meter__fill{
  background:var(--light-gray);
}

.vs-center .vs-meter__fill{
  background:var(--champagne-gold);
}

@media (max-width:900px){
  .vs-layout{
    grid-template-columns:1fr;
  }
  .vs-side{
    padding:24px 22px;
  }
  .vs-center{
    transform:none;
    padding:36px 28px;
  }
}

/* ---------- 実績：見出し中央固定・横長実績画像2件 ---------- */
.results-head{
  text-align:center;
}

.jisseki-cases{
  display:grid;
  gap:56px;
  margin-top:48px;
}

.jisseki-case{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
}

.jisseki-case--rev{
  grid-template-columns:1fr 1.3fr;
}

.jisseki-case--rev .jisseki-case__figure{
  order:2;
}

.jisseki-case__figure{
  border:1px solid var(--hairline);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-black);
}

.jisseki-case__figure img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:var(--ink-black);
}

.jisseki-case__amount{
  font-family:"Archivo Black","Anton",sans-serif;
  color:var(--metallic-gold);
  font-size:clamp(38px,4.4vw,56px);
  line-height:1;
}

.jisseki-case__platform{
  display:inline-block;
  margin:14px 0 0;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--light-gray);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:4px 10px;
}

.jisseki-case__desc{
  margin-top:16px;
  color:var(--light-gray);
  font-size:15.5px;
  max-width:36ch;
}

@media (max-width:860px){
  .jisseki-case,
  .jisseki-case--rev{
    grid-template-columns:1fr;
  }
  .jisseki-case--rev .jisseki-case__figure{
    order:0;
  }
}

/* ---------- その次へ：実績展開2事例 ---------- */
.next-cases{
  display:grid;
  gap:72px;
  margin-top:52px;
}

.next-case{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:44px;
  align-items:center;
}

.next-case--rev{
  grid-template-columns:1fr 1.2fr;
}

.next-case--rev .next-case__figure{
  order:2;
}

.next-case__figure{
  border:1px solid var(--hairline);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-black);
}

.next-case__figure--pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline);
}

.next-case__figure--pair img{
  height:100%;
  object-fit:cover;
}

.next-case__figure img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:var(--ink-black);
}

.next-case__tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.next-case__tag{
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--light-gray);
  border:1px solid var(--hairline);
  border-radius:4px;
  padding:4px 10px;
}

.next-case__tag--gold{
  color:var(--metallic-gold);
  border-color:var(--metallic-gold);
}

.next-case h3{
  font-size:clamp(24px,2.8vw,34px);
  margin:0 0 14px;
  line-height:1.4;
}

.next-case p{
  color:var(--light-gray);
  font-size:16px;
  max-width:42ch;
  margin:0 0 22px;
}

@media (max-width:900px){
  .next-case,
  .next-case--rev{
    grid-template-columns:1fr;
  }
  .next-case--rev .next-case__figure{
    order:0;
  }
}

/* ---------- 最終CTA：見出し2行のための余白調整 ---------- */
.final-cta__inner{
  max-width:1040px;
}

.final-cta__headline{
  font-size:clamp(34px,5vw,60px);
}

/* ============================================================
   第16回：4つの負担の一行化／比較補足文削除／主力サービス見出し・価格・
   利用の流れ／sec-features-05による価値訴求／実績・その次へ画像差し替え
   ============================================================ */

/* ---------- 価値訴求：sec-features-05（ジグザグ・オーバーラップ）移植 ---------- */
.strengths-zig{
  display:grid;
  gap:96px;
  margin-top:60px;
}

.strengths-blk{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
}

.strengths-blk:nth-child(even){
  grid-template-columns:.85fr 1.15fr;
}

.strengths-blk__img{
  position:relative;
  aspect-ratio:16/11;
  border-radius:12px;
  overflow:hidden;
  background:var(--ink-black);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);
}

.strengths-blk:nth-child(even) .strengths-blk__img{
  order:2;
}

.strengths-blk__img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:var(--ink-black);
}

.strengths-blk__card{
  position:relative;
  z-index:3;
  background:var(--panel-charcoal);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:34px 32px;
  margin-left:-70px;
  box-shadow:0 24px 48px -30px rgba(0,0,0,.6);
}

.strengths-blk:nth-child(even) .strengths-blk__card{
  order:1;
  margin-left:0;
  margin-right:-70px;
}

.strengths-blk__n{
  position:absolute;
  font-family:"Archivo Black","Anton",sans-serif;
  font-weight:800;
  font-size:clamp(80px,12vw,160px);
  color:transparent;
  -webkit-text-stroke:1.5px var(--bronze);
  line-height:.8;
  opacity:.45;
  z-index:1;
  top:-60px;
  pointer-events:none;
}

.strengths-blk:nth-child(odd) .strengths-blk__n{
  right:6%;
}

.strengths-blk:nth-child(even) .strengths-blk__n{
  left:6%;
}

.strengths-blk__card h3{
  font-size:clamp(21px,2.6vw,28px);
  font-weight:700;
  margin:0 0 12px;
  color:var(--off-white);
}

.strengths-blk__card p{
  color:var(--light-gray);
  font-size:15px;
  margin:0;
}

.strengths-blk__tag{
  display:inline-block;
  margin-top:16px;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--metallic-gold);
  border:1px solid var(--metallic-gold);
  border-radius:99px;
  padding:4px 12px;
}

@media (max-width:820px){
  .strengths-zig{
    gap:56px;
  }
  .strengths-blk,
  .strengths-blk:nth-child(even){
    grid-template-columns:1fr;
  }
  .strengths-blk__img,
  .strengths-blk:nth-child(even) .strengths-blk__img{
    order:0;
  }
  .strengths-blk__card,
  .strengths-blk:nth-child(even) .strengths-blk__card{
    order:0;
    margin:-40px 16px 0;
  }
  .strengths-blk__n{
    top:-44px;
  }
}

/* ============================================================
   第17回：見出し二行の強制固定／AI×人見出しの4段構成／セクション並び替え
   ============================================================ */

/* ---------- 見出しを指定位置で必ず二行にする（span+display:block、chではなくpx指定） ---------- */
h2.h2-lines,
h1.h2-lines,
.final-cta__headline.h2-lines{
  max-width:1100px;
  font-size:clamp(26px,2.9vw,44px);
  line-height:1.4;
}

.h2-lines__row{
  display:block;
}

@media (min-width:1024px){
  .h2-lines__row{
    white-space:nowrap;
  }
}

/* ---------- AIとプロ人材の見出し：4段構成 ---------- */
.ai-human-heading{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ai-human-heading__a{
  display:block;
  font-size:clamp(26px,3.4vw,42px);
  font-weight:900;
  color:var(--off-white);
  line-height:1.3;
}

.ai-human-heading__x{
  display:block;
  font-family:"Archivo Black","Anton",sans-serif;
  font-size:18px;
  color:var(--champagne-gold);
  margin:8px 0;
  line-height:1;
}

.ai-human-heading__concl{
  display:block;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:700;
  color:var(--off-white);
  margin-top:18px;
  line-height:1.4;
}

@media (min-width:640px){
  .ai-human-heading__a,
  .ai-human-heading__concl{
    white-space:nowrap;
  }
}

/* ============================================================
   第18回：About Us（クラファニアについて）ページの物語型再構成
   ============================================================ */

.about-illust{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--hairline);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.7);
}

/* ---------- ファーストビュー：左右2カラム／モバイルは見出い→イラスト→導入文 ---------- */
.about-fv{
  padding-top:calc(var(--hdh) + 56px);
}

.about-fv__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"head visual" "lead visual";
  column-gap:64px;
  row-gap:24px;
  align-items:center;
}

.about-fv__head{
  grid-area:head;
}

.about-fv__lead{
  grid-area:lead;
}

.about-fv__visual{
  grid-area:visual;
}

.about-fv h1{
  font-weight:900;
}

@media (max-width:900px){
  .about-fv__grid{
    grid-template-columns:1fr;
    grid-template-areas:"head" "visual" "lead";
    row-gap:28px;
  }
}

/* ---------- 誕生のきっかけ／AIと人の役割：文章とイラストの2カラム（左右交互） ---------- */
.about-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.about-split--imgleft .about-split__visual{
  order:1;
}

.about-split--imgleft .about-split__text{
  order:2;
}

@media (max-width:900px){
  .about-split{
    grid-template-columns:1fr;
    gap:28px;
  }
  .about-split--imgleft .about-split__visual,
  .about-split--imgleft .about-split__text{
    order:0;
  }
}

/* ---------- 課題を感じた場面：画面幅を使った大きなメッセージ ---------- */
.about-bigmsg{
  text-align:center;
}

.about-bigmsg__quote{
  font-size:clamp(28px,3.6vw,44px);
  font-weight:900;
  color:var(--off-white);
  max-width:20ch;
  margin:20px auto 36px;
  line-height:1.45;
}

.about-bigmsg .narrative{
  max-width:640px;
  margin:0 auto;
  text-align:left;
}

/* ---------- 今後目指すこと：横幅いっぱいの結論ブロック ---------- */
.about-conclusion{
  text-align:center;
}

.about-conclusion .narrative{
  max-width:680px;
  margin:0 auto;
  text-align:left;
}

.about-conclusion .pull-quote{
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}

.about-conclusion__visual{
  max-width:640px;
  margin:36px auto 0;
}

/* ---------- 最終CTA：横幅を使った大きな結論 ---------- */
.about-cta{
  text-align:center;
}

.about-cta__inner{
  max-width:820px;
  margin:0 auto;
}

.about-cta__inner .btn--lg{
  min-height:56px;
}

/* ---------- FVの高さ固定によるPC/モバイル縦オーバーフロー切れを解消 ----------
   固定height + align-items:center + overflow:hiddenの組み合わせにより、
   画面の高さが足りない場合に見出しや下部要素が上下均等に切れていた問題の修正。
   heightをautoにしてセクション自体が内容に応じて縦へ伸びる構造へ変更する。 */
.c-fv{
  height:auto;
  min-height:calc(100dvh - var(--hdh));
  max-height:none;
  padding-top:clamp(88px,10vh,132px);
  padding-bottom:clamp(72px,8vh,112px);
  display:flex;
  align-items:center;
  overflow:hidden;
}

.c-fv__center{
  width:min(920px,calc(100% - 40px));
  max-width:none;
  padding-left:0;
  padding-right:0;
}

@media (max-height:800px) and (min-width:641px){
  .c-fv{
    align-items:flex-start;
    padding-top:72px;
    padding-bottom:64px;
  }
  .c-fv__credits{
    display:none;
  }
}

@media (max-width:640px){
  .c-fv{
    height:auto;
    min-height:calc(100dvh - var(--hdh));
    max-height:none;
    align-items:flex-start;
    padding-top:88px;
    padding-bottom:56px;
  }
  .c-fv__center{
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }
  .c-fv__credits{
    display:none;
  }
}