/* =========================================================
   AmazonプレミアムA+クリエイト LP
   palette: 温かい紙色 × 墨 × 琥珀(アンバー)
   type:    Shippori Mincho B1(見出し) × Zen Kaku Gothic New(本文)
   ========================================================= */

:root{
  --paper:   #FBF9F4;
  --paper2:  #F3EDE1;
  --white:   #FFFFFF;
  --ink:     #211C16;
  --ink2:    #48413A;
  --ink3:    #6E6355;
  --line:    rgba(33,28,22,.12);
  --amber:   #F09C12;
  --amber-deep: #E89008;
  --amber-text: #F09C12;
  --amber-hi:   #F5B42A;
  --dark:    #241D15;
  --dark2:   #2A2118;
  --dark3:   #1A140E;
  --cream:   #F4EFE6;
  --cream-mut: #CFC4B0;
  --brand-navy: #01142F;
  --brand-cream: #FAF3E7;
  --brand-orange: #EC7604;
  --yellow: #FFD84D;
  --tintc:  #FBF0DA;
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --num:   "Oswald", "Zen Kaku Gothic New", sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.8;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:normal}
i{font-style:normal}
button{font-family:inherit}
::selection{background:rgba(240,156,18,.3)}
section[id],footer[id]{scroll-margin-top:86px}
#pricing,#flow,#faq,#features,#samples,#about,#contact{scroll-margin-top:86px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

svg.ic{width:1.1em;height:1.1em;flex:none}

/* 見出しの詰め */
h1,h2,h3,.hero__title{font-feature-settings:"palt"}

/* セクションラベル(角丸チップ・参考サイト共通パーツ) */
.seclabel{display:inline-block;background:#FFF;border:1.5px solid #F0C97E;color:var(--amber-text);border-radius:999px;padding:6px 18px;font-size:12px;font-weight:900;letter-spacing:.05em;line-height:1.5}

/* 黄色マーカー(強調の共通言語) */
.hero__title em,.feat__body h3 em{background:linear-gradient(transparent 55%,var(--yellow) 55%);color:inherit;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- 汎用:リビール(コンテンツは常に可視・JS発火時のみ動く) ----------
   v29: opacity を経由しない(transform のみ)。kvf/about/cvr/flw が個別に
   行っていた「発火しきらなくても文字が消えない」保証を基底に統一。 */
@media (prefers-reduced-motion: no-preference){
  body.js .rv.in{animation:rise .65s cubic-bezier(.22,.7,.3,1) both}
  @keyframes rise{from{transform:translateY(18px)}to{transform:none}}
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--amber);color:var(--ink);
  font-weight:900;font-size:15px;line-height:1;
  padding:17px 32px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:0 8px 18px -12px rgba(201,116,4,.65);
  transition:background .25s,box-shadow .25s;
}
.btn .ic{transition:transform .25s}
.btn:hover{background:var(--amber-deep)}
.btn:hover .ic{transform:translate(2px,-2px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn--lg{padding:20px 42px;font-size:16px}
.btn--nav{padding:11px 20px;font-size:13px;box-shadow:none}

.telblock{display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.telblock>.ic{width:22px;height:22px;color:var(--amber-text)}
.telblock__body b{display:block;font-family:var(--num);font-size:26px;font-weight:600;letter-spacing:.03em;line-height:1.15}
.telblock__body small{display:block;font-size:11px;color:var(--ink3);font-weight:500}

/* =========================================================
   ヘッダー
   ========================================================= */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(251,249,244,.92);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
  border-bottom:1px solid rgba(33,28,22,.08);
}
.nav__in{max-width:none;width:100%;margin:auto;display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding:11px calc(70 / 1440 * 100vw)}
.brand{display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap}
.brand__mark{display:block;width:50px;height:auto;flex:none}
.brand__name{display:grid;gap:2px;color:var(--brand-navy);line-height:1;letter-spacing:0}
.brand__name-top{font-size:10px;font-weight:700;letter-spacing:-.01em}
.brand__name-main{display:block;font-size:17px;font-weight:900;line-height:1;letter-spacing:-.035em}
.nav__links{display:flex;gap:clamp(12px,1.6vw,22px);margin-left:auto;font-size:13.5px;font-weight:700}
.nav__links a{color:var(--ink2);transition:color .2s}
.nav__links a:hover{color:var(--amber-text)}
.nav__act{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav__links + .nav__act{margin-left:0}
.nav__tel{display:flex;gap:8px;align-items:center}
.nav__tel .ic{width:18px;height:18px;color:var(--amber-text)}
.nav__telno{font-family:var(--num);font-weight:600;font-size:17px;letter-spacing:.03em;line-height:1.1}
.nav__telno small{display:block;font-size:10px;color:var(--ink3);font-weight:500;margin-top:2px}

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(112px,15vw,168px) clamp(20px,4vw,40px) clamp(44px,6vw,72px);
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(255,196,58,.22), transparent 65%),
    radial-gradient(760px 480px at -8% 34%, rgba(255,196,58,.09), transparent 60%),
    var(--paper);
}
.hero::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none}
.hero__in{position:relative;max-width:1200px;margin:auto;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center}
.hero__service{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.hero__jewel svg{width:28px;height:28px}
.hero__sep{color:var(--ink3);font-weight:400;margin:0 -2px}
.hero__title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(38px,5.2vw,66px);
  line-height:1.32;letter-spacing:.01em;
  margin-top:clamp(18px,2.5vw,26px);
}
.hero__lead{margin-top:clamp(18px,2.5vw,26px);font-size:clamp(14px,1.6vw,16px);line-height:2.15;color:var(--ink2);text-wrap:pretty}
.hero__cta{display:flex;align-items:center;gap:clamp(18px,2.5vw,30px);margin-top:clamp(26px,3.5vw,38px);flex-wrap:wrap}

/* ヒーロー右:PC+スマホの重ね */
.hero__visual{position:relative;padding:0 0 56px 34px}
.hero__visual .pc{margin-left:auto}
.hero__visual .ph--hero{position:absolute;left:0;bottom:0;transform:rotate(-2deg)}

/* 実績サマリー */
.hero__stats{
  position:relative;max-width:1200px;
  margin:clamp(48px,7vw,88px) auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.stat dt{font-size:12px;font-weight:700;color:var(--ink3)}
.stat dd{margin-top:6px}
.stat dd b{font-family:var(--num);font-weight:700;font-size:clamp(32px,3.8vw,48px);letter-spacing:.02em;line-height:1}
.stat dd span{font-size:13px;font-weight:900;color:var(--amber-text);margin-left:6px}


/* =========================================================
   スマホ・モックアップ(共通)
   ========================================================= */
.ph{
  width:var(--phw,190px);
  container-type:inline-size;
}
.ph__screen{
  background:#fff;border:8px solid #26201A;border-radius:30px;overflow:hidden;
  box-shadow:0 22px 40px -26px rgba(60,38,8,.5);
  aspect-ratio:9/18;display:flex;flex-direction:column;
}
.ph__head{display:flex;align-items:center;gap:6px;background:#131A22;padding:5cqi 5cqi}
.ph__srch{flex:1;background:#fff;border-radius:99px;font-size:4.4cqi;color:var(--ink3);padding:1.6cqi 4cqi;white-space:nowrap;overflow:hidden}
.ph__photo{display:grid;place-items:center;background:#EFECE5;height:38%;flex:none}
.ph__photo .pd{height:86%;width:auto}
.ph__info{padding:3.5cqi 5cqi 2cqi}
.ph__name{font-size:4.9cqi;font-weight:700;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph__price{font-size:7cqi;font-weight:900;margin-top:1cqi}
.ph__price em{font-size:3.8cqi;font-weight:700;color:#3E7E9E;margin-left:2cqi}
.ph__aplus{margin-top:auto;border-top:1px solid #ECE7DD;padding:2.5cqi 5cqi 4cqi;display:flex;flex-direction:column;gap:2.5cqi}
.ph__ah{font-size:3.9cqi;color:var(--ink3);font-weight:700}
.ph__mod{border-radius:2.6cqi;overflow:hidden}
.ph__mod--video{aspect-ratio:16/8.2;background:linear-gradient(135deg,#453A2C,#211C16);display:grid;place-items:center}
.ph__mod--video svg{width:9cqi;height:9cqi;color:#F4EFE6;background:rgba(20,14,8,.55);border-radius:50%;padding:2.4cqi;box-sizing:content-box}
.ph__mod--copy{background:var(--tint,#F4E9D8);text-align:center;padding:3cqi 2cqi}
.ph__mod--copy b{font-size:4.6cqi;font-weight:900;line-height:1.5}
.ph__cap{font-size:11.5px;color:var(--ink3);margin-top:10px;text-align:center;font-weight:700}

/* 評価(星) */
.rate{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2);margin-top:3px}
.rate b{font-weight:900}
.rate__n{color:#3E7E9E}
.rate--s{font-size:4.2cqi;gap:1.6cqi;margin-top:1.4cqi}
.stars--lg{font-size:clamp(18px,3vw,26px)}

/* テーマ別(商品写真の下地) */
.ph[data-theme="beauty"]  .ph__photo{background:#F3E4D6}
.ph[data-theme="kitchen"] .ph__photo{background:#E8EBED}
.ph[data-theme="gadget"]  .ph__photo{background:#ECEEF0}
.ph[data-theme="pet"]     .ph__photo{background:#F2E5D4}
.ph[data-theme="outdoor"] .ph__photo{background:#E6EAE2}
.ph[data-theme="baby"]    .ph__photo{background:#E7F0EC}
.ph[data-theme="food"]    .ph__photo{background:#EFE6D8}
.ph[data-theme="beauty"]{--tint:#F6EADF}
.ph[data-theme="kitchen"]{--tint:#EAEDEF}
.ph[data-theme="gadget"]{--tint:#EEF0F2}
.ph[data-theme="pet"]{--tint:#F5EADB}
.ph[data-theme="outdoor"]{--tint:#EAEEE7}
.ph[data-theme="baby"]{--tint:#EAF2EF}
.ph[data-theme="food"]{--tint:#F2EADD}

.ph--hero{--phw:206px}
.ph--mini{--phw:158px}

/* amazonロゴ(モック内) */
.azlogo{position:relative;color:#fff;font-weight:900;font-size:13px;letter-spacing:.01em;line-height:1;padding-bottom:4px}
.azlogo i{position:absolute;left:6%;bottom:0;width:62%;height:6px;border-bottom:2px solid #F09C12;border-radius:0 0 70% 70%/0 0 100% 100%}
.azlogo--s{font-size:4.6cqi;padding-bottom:1.6cqi}
.azbtn{display:block;text-align:center;border-radius:99px;padding:7px 10px;font-size:10.5px;font-weight:700;margin-top:7px;color:#1B1509}
.azbtn--y{background:#FFD814}
.azbtn--o{background:#FFA41C}

/* =========================================================
   PCモックアップ
   ========================================================= */
.pc{
  width:min(620px,100%);
  background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid rgba(33,28,22,.08);
  box-shadow:0 26px 48px -30px rgba(60,38,8,.45);
  font-feature-settings:normal;
}
.pc__head{display:flex;align-items:center;gap:12px;background:#131A22;padding:10px 16px}
.pc__search{flex:1;background:#fff;border-radius:7px;font-size:11px;color:var(--ink3);padding:6px 12px}
.pc__cart{color:#fff;opacity:.85;font-size:10.5px;font-weight:700}
.pc__body{display:grid;grid-template-columns:36px 1fr 200px;gap:16px;padding:16px 18px}
.pc__thumbs i{display:block;width:36px;height:42px;border-radius:7px;background:#F0EDE6;margin-bottom:8px;border:1.5px solid transparent;position:relative}
.pc__thumbs i::after{content:"";position:absolute;inset:22% 26%;border-radius:4px;background:#D9D3C7}
.pc__thumbs i.on{border-color:#F09C12;background:#F9EDD8}
.pc__thumbs i.on::after{background:#E4C79A}
.pc__main{background:#E8EBED;display:grid;place-items:center;border-radius:12px;min-height:230px}
.pc__main .pd{height:200px;width:auto}
.pc__name{font-size:11.5px;font-weight:700;line-height:1.5}
.pc__price{margin-top:6px;line-height:1.3}
.pc__price small{font-size:9.5px;color:var(--ink3);font-weight:500}
.pc__price b{font-size:17px;font-weight:900;margin:0 4px}
.pc__price span{display:block;font-size:9.5px;color:#3E7E9E;font-weight:700}
.pc__stock{font-size:10px;color:#007600;font-weight:700;margin-top:5px}
.pc__aplus{padding:14px 18px 18px;border-top:1px solid #ECE7DD}
.pc__ah{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:700}
.pc__ah b{font-size:10px;color:var(--amber-text);letter-spacing:.02em}
.pc__mods{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px;margin-top:10px}
.mod{border-radius:9px;min-height:78px;overflow:hidden;position:relative}
.mod--video{background:linear-gradient(135deg,#453A2C,#211C16);display:grid;place-items:center}
.mod__play{width:22px;height:22px;color:#F4EFE6;background:rgba(20,14,8,.55);border-radius:50%;padding:7px;box-sizing:content-box}
.mod__tag{position:absolute;left:8px;bottom:6px;font-size:8.5px;color:rgba(244,239,230,.85);font-weight:700}
.mod--copy{background:#F4E9D8;display:grid;place-content:center;text-align:center;gap:3px;padding:6px}
.mod--copy b{font-size:11.5px;font-weight:900;line-height:1.4}
.mod--copy span{font-size:8.5px;color:var(--ink3);font-weight:700}
.mod--specs{background:#F7F4EE;display:grid;place-content:center;gap:4px;padding:8px}
.mod--specs i{background:#fff;border-radius:5px;padding:2.5px 9px;font-size:8.5px;font-weight:700;color:var(--ink2)}

/* =========================================================
   サンプル・マーキー
   ========================================================= */
.strip{padding:0 0 clamp(64px,9vw,110px);overflow:hidden}
.strip__track{display:flex;gap:22px;width:max-content;padding:6px 22px}
/* v29: marquee(.strip__track)は参照先の要素が index.html に無いため撤去 */
.strip__set{display:flex;gap:22px}
.strip__set li:nth-child(even) .ph{transform:translateY(10px)}
.strip__note{max-width:1200px;margin:16px auto 0;padding:0 24px;font-size:11px;color:var(--ink3)}

/* A+とは(.about)は v19 レイヤーで組み直している。
   この層に .about / .pagemock の規則は残っていない。 */

/* =========================================================
   CVR試算
   ========================================================= */
.cvr{padding:0 clamp(20px,4vw,40px) clamp(70px,9vw,120px)}
.cvr__in{max-width:1080px;margin:auto}
.cvr__advice{display:inline-block;background:#FFF;border:1.5px solid #F0C97E;color:var(--amber-text);font-size:12px;font-weight:900;letter-spacing:.05em;padding:6px 18px;border-radius:999px}
.cvr__headline{display:flex;gap:clamp(20px,4vw,48px);align-items:center;margin-top:24px;flex-wrap:wrap}
.cvr__headline h2{font-family:var(--sans);font-weight:900;font-size:clamp(20px,3vw,32px);line-height:1.7}

.cvr__compare{position:relative;margin:clamp(40px,6vw,64px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,48px);max-width:660px;align-items:end}
.cvr__col{text-align:center}
.cvr__colhead{font-size:13px;font-weight:700;color:var(--ink3)}
.cvr__colhead b{display:block;font-size:16.5px;color:var(--ink);margin-top:3px}
.cvr__col--b .cvr__colhead b{color:var(--amber-text)}
.cvr__barwrap{height:230px;display:flex;align-items:flex-end;justify-content:center;margin-top:44px}
.cvr__bar{position:relative;width:clamp(86px,11vw,120px);height:var(--h);border-radius:12px 12px 0 0}
.cvr__bar span{position:absolute;top:-32px;left:50%;transform:translateX(-50%);font-family:var(--num);font-weight:600;font-size:16px;white-space:nowrap;letter-spacing:.02em}
.cvr__bar--a{background:#DCD4C4}
.cvr__bar--b{background:linear-gradient(180deg,var(--amber-hi),var(--amber))}
.cvr__bar--b span{font-size:18px;color:var(--amber-text)}
/* v29: grow(.cvr__compare/.cvr__bar)は参照先の要素が index.html に無いため撤去 */
.cvr__collabel{font-size:12px;color:var(--ink3);margin-top:12px}
.cvr__x3{position:absolute;left:50%;top:16%;transform:translateX(-50%);text-align:center;line-height:1.1}
.cvr__x3 b{font-family:var(--num);font-weight:700;font-size:clamp(32px,5vw,48px);color:var(--ink);letter-spacing:.02em}
.cvr__x3 span{display:block;font-size:12px;color:var(--ink3);font-weight:700;margin-top:4px}

.cvr__tablewrap{margin-top:clamp(44px,6vw,64px);overflow-x:auto}
.cvr__table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;overflow:hidden;font-size:14px;box-shadow:0 14px 30px -22px rgba(80,55,20,.35);min-width:560px}
.cvr__table caption{caption-side:top;text-align:left;font-weight:900;font-size:15.5px;margin-bottom:14px}
.cvr__table th,.cvr__table td{padding:13px 20px;text-align:right;font-variant-numeric:tabular-nums}
.cvr__table thead th{background:#F1EADC;font-size:13px;font-weight:700}
.cvr__table thead th:first-child{text-align:left}
.cvr__table tbody th{text-align:left;font-weight:700;font-size:13px;color:var(--ink2)}
.cvr__table tbody tr+tr th,.cvr__table tbody tr+tr td{border-top:1px solid #F0EAE0}
.cvr__table .hl{background:#FBF2DF}
.cvr__table thead .hl{background:#F7E7C6;color:var(--amber-text)}
.cvr__table .strong th,.cvr__table .strong td{font-weight:900;font-size:15px}
.cvr__table .strong td.hl{color:var(--amber-text)}
.cvr__note{font-size:12.5px;color:var(--ink3);margin-top:14px;line-height:1.95}

.cvr__punch{margin-top:clamp(40px,6vw,56px);text-align:center;font-family:var(--sans);font-weight:900;font-size:clamp(19px,3.2vw,30px);line-height:1.75}
.cvr__punch b{color:var(--ink);background:linear-gradient(transparent 55%,var(--yellow) 55%);padding:0 2px;letter-spacing:.02em}
.cvr__sub{text-align:center;font-size:13.5px;color:var(--ink3);margin-top:14px}

/* =========================================================
   お悩み
   ========================================================= */
.worry{background:var(--paper2);padding:clamp(40px,5.2vw,72px) clamp(20px,4vw,40px);position:relative}
.worry::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none}
.worry__in{position:relative;max-width:1000px;margin:auto}
.worry__title{text-align:center;font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.8vw,40px)}
.worry__list{margin-top:clamp(32px,5vw,52px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.worry__list li{background:#fff;border-radius:16px;padding:24px 28px;box-shadow:0 12px 24px -18px rgba(80,55,20,.3)}
.worry__tag{display:inline-block;font-size:11.5px;font-weight:700;color:var(--amber-text);border-bottom:2px solid rgba(240,156,18,.4);padding-bottom:2px;margin-bottom:12px}
.worry__list p{font-size:15px;line-height:1.95}
.worry__list b{background:linear-gradient(transparent 66%,rgba(240,156,18,.22) 66%)}
.worry__punch{text-align:center;margin-top:clamp(34px,5vw,48px);font-family:var(--serif);font-weight:700;font-size:clamp(20px,3vw,30px);color:var(--ink2)}

.worry__answer{
  position:relative;margin-top:clamp(36px,5vw,56px);
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(240,156,18,.14), transparent 70%),
    linear-gradient(180deg,#2A2118,#221B13);
  border-radius:24px;color:var(--cream);text-align:center;
  padding:clamp(38px,6vw,66px) 24px;
  overflow:hidden;
}
.worry__answer::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.06;pointer-events:none;border-radius:inherit}
.worry__answer>*{position:relative}
.worry__so{font-size:14px;color:var(--cream-mut)}
.worry__big{font-family:var(--serif);font-weight:700;font-size:clamp(23px,4vw,40px);line-height:1.6;margin:16px 0 24px}
.worry__big em{color:var(--amber-hi)}
.worry__points{display:flex;gap:clamp(16px,3vw,28px);justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.worry__points li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
.worry__points .ic{width:17px;height:17px;color:var(--amber-hi)}

/* =========================================================
   特徴
   ========================================================= */
.feat{padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px) clamp(50px,7vw,90px)}
.feat__in{max-width:1100px;margin:auto}
.feat__title{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.8vw,40px);margin-bottom:clamp(20px,3vw,32px)}
.feat__item{display:grid;grid-template-columns:auto 1fr minmax(280px,340px);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(34px,5vw,52px) 0}
.feat__item+.feat__item{border-top:1px solid var(--line)}
.feat__no{font-family:var(--serif);font-weight:700;font-size:clamp(40px,6vw,64px);color:rgba(33,28,22,.16);line-height:1;letter-spacing:.04em}
.feat__k{font-size:13px;font-weight:700;color:var(--amber-text)}
.feat__body h3{font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.9vw,29px);line-height:1.65;margin-top:10px}
.feat__body h3 em{color:var(--amber-text)}
.feat__body>p{font-size:14.5px;line-height:2.05;color:var(--ink2);margin-top:14px}
.feat__fig{justify-self:center;width:100%}

.sellermock{background:#fff;border-radius:16px;padding:20px;box-shadow:0 16px 32px -24px rgba(80,55,20,.4)}
.sellermock__t{font-weight:900;font-size:12.5px;color:#131A22;margin-bottom:12px}
.sellermock__row{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:11px 14px;border-radius:9px;color:var(--ink3)}
.sellermock__row.on{background:#FBF2DF;color:var(--ink);font-weight:700}
.sellermock__row .ic{width:16px;height:16px;color:var(--amber-text)}
.sellermock__dot{width:8px;height:8px;border-radius:50%;background:#DCD4C4;flex:none;margin:0 4px}

.feat__badges{display:grid;gap:12px}
.feat__badges li{background:#fff;border-radius:14px;padding:16px 24px;box-shadow:0 12px 26px -20px rgba(80,55,20,.35);display:flex;align-items:baseline;gap:14px}
.feat__badges b{font-family:var(--serif);font-weight:700;font-size:29px;letter-spacing:.04em;font-feature-settings:"palt"}
.feat__badges b i{font-size:.5em;margin-left:2px;color:var(--amber-text)}
.feat__badges span{font-size:12.5px;color:var(--ink3);font-weight:700}

.taskflow{display:flex;flex-direction:column;gap:9px;counter-reset:task}
.taskflow li{counter-increment:task;position:relative;background:#fff;border-radius:11px;padding:12px 18px 12px 46px;font-size:13.5px;font-weight:700;box-shadow:0 10px 22px -18px rgba(80,55,20,.35)}
.taskflow li::before{content:counter(task,decimal-leading-zero);position:absolute;left:15px;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:13px;color:var(--amber-text);letter-spacing:.05em}

/* =========================================================
   ステートメント
   ========================================================= */

/* =========================================================
   制作サンプル(ダーク・アイランド)
   ========================================================= */

.zoom{background:none;border:0;padding:0;cursor:zoom-in;display:block;width:100%;color:inherit;text-align:inherit;position:relative;font-family:inherit}
.zoom:focus-visible{outline:2px solid var(--amber-hi);outline-offset:4px;border-radius:24px}
.zoom__hint{position:absolute;top:12px;right:12px;display:inline-flex;gap:5px;align-items:center;font-size:10.5px;font-weight:700;background:rgba(20,14,8,.72);color:var(--cream);padding:5px 9px;border-radius:7px;transition:background .2s}
.zoom:hover .zoom__hint{background:rgba(201,116,4,.85)}
.zoom__hint .ic{width:12px;height:12px}

.ph--sample{--phw:100%;width:100%}
.ph--sample .ph__screen{aspect-ratio:9/15.5}
.aplus{display:flex;flex-direction:column;height:100%}
.ap{flex:1 1 0;display:grid;place-content:center;text-align:center;padding:4cqi;min-height:0}
.ap--hero{background:var(--tint,#F4E9D8);grid-template-columns:auto auto;gap:4cqi;align-items:center}
.ap--hero .pd{height:26cqi;width:auto}
.ap--hero b{font-family:var(--serif);font-weight:700;font-size:6cqi;line-height:1.6;text-align:left;color:var(--ink)}
.ap--ticks{background:#fff;gap:2.4cqi}
.ap--ticks i{font-size:4.2cqi;font-weight:700;color:var(--ink2);background:#F5F0E6;border-radius:2cqi;padding:1.6cqi 4cqi;display:flex;align-items:center;gap:2cqi;white-space:nowrap}
.ap--ticks i::before{content:"✓";color:var(--amber-text);font-weight:900}
.ap--steps{background:#F5F0E6;gap:2cqi}
.ap--steps b{font-size:4.4cqi;color:var(--ink);margin-bottom:1cqi}
.ap--steps span{display:flex;align-items:center;gap:3cqi;font-size:4cqi;color:var(--ink2);font-weight:700}
.ap--steps em{font-family:var(--serif);color:var(--amber-text);min-width:7cqi;text-align:right;font-size:4.2cqi}
.ap--bars{background:#fff;gap:2.4cqi}
.ap--bars b{font-size:4.4cqi;color:var(--ink);margin-bottom:1cqi}
.ap--bars span{position:relative;display:block;width:56cqi;background:#F0EAE0;border-radius:99px;font-size:3.9cqi;font-weight:700;color:var(--ink2);padding:1.2cqi 4cqi;text-align:left;overflow:hidden}
.ap--bars span i{position:absolute;inset:0 auto 0 0;width:var(--w,60%);background:rgba(240,156,18,.32);border-radius:99px}
.ph--sample .ph__cap{color:var(--cream-mut)}




/* =========================================================
   伝わる20秒
   ========================================================= */




/* =========================================================
   料金
   ========================================================= */
.price{background:var(--paper2);padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px);position:relative}
.price::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.04;pointer-events:none}
.price__in{position:relative;max-width:1100px;margin:auto}
.price__head h2{font-size:14px;font-weight:700;color:var(--amber-text)}
.price__head h2 span{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(27px,4.2vw,46px);color:var(--ink);margin-top:10px;line-height:1.4}
.price__head p{margin-top:14px;font-size:14.5px;color:var(--ink2)}

.plans{
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,auto);
  gap:0 20px;margin-top:clamp(36px,5vw,52px);
}
.plan{
  display:grid;grid-template-rows:subgrid;grid-row:1/-1;row-gap:0;
  background:#fff;border-radius:22px;border:2px solid transparent;
  padding:0 clamp(20px,2.4vw,28px) clamp(22px,2.6vw,28px);
  box-shadow:0 18px 36px -26px rgba(80,55,20,.35);
}
.plan--pop{border-color:var(--amber)}
.plan--best{border-color:var(--ink)}
.plan__badge{height:54px;display:flex;align-items:flex-start}
.plan__badge b{background:var(--amber);color:var(--ink);font-size:12px;font-weight:900;padding:7px 16px 6px;border-radius:0 0 10px 10px}
.plan__badge--ink b{background:var(--ink);color:var(--cream)}
.plan__head .ic{width:26px;height:26px;color:var(--amber-text);display:inline-block}
.plan__head .ic--pair{margin-left:6px}
.plan__head h3{font-family:var(--serif);font-weight:700;font-size:21.5px;margin-top:12px;letter-spacing:.02em}
.plan__head p{font-size:13px;color:var(--ink3);margin-top:6px;font-weight:700}
.plan__price{padding:18px 0 4px}
.plan__price b{font-family:var(--serif);font-weight:700;font-size:clamp(36px,3.4vw,46px);letter-spacing:.04em;font-feature-settings:"palt"}
.plan__price span{font-size:14px;font-weight:700;margin-left:5px}
.plan__config{background:#F7F1E4;border-radius:11px;padding:13px 16px;font-size:13px;font-weight:700;margin:12px 0 18px;line-height:1.7}
.plan__config b{color:var(--amber-text);margin-left:4px}
.plan__config i{margin:0 7px;color:var(--ink3)}
.plan__list{display:grid;gap:11px;align-content:start;padding-bottom:22px}
.plan__list li{display:flex;gap:9px;font-size:13.5px;font-weight:700;line-height:1.6}
.plan__list .ic{width:16px;height:16px;color:var(--amber-text);margin-top:4px}
.plan__list small{display:block;font-size:11px;color:var(--ink3);font-weight:500}
.plan__cta{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  border-radius:11px;padding:14px 16px;background:var(--ink);color:var(--cream);
  font-weight:700;font-size:13.5px;align-self:end;transition:background .2s;
}
.plan__cta:hover{background:#3B3227}
.plan__cta .ic{width:15px;height:15px;color:var(--amber-hi)}

.price__discount{margin-top:30px;text-align:center;font-size:14.5px}
.price__discount b{background:linear-gradient(transparent 66%,rgba(240,156,18,.22) 66%);font-weight:900}
.price__agency{margin-top:clamp(30px,4vw,44px);background:#fff;border-radius:20px;padding:clamp(24px,4vw,38px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:start;box-shadow:0 14px 30px -24px rgba(80,55,20,.35)}
.price__agencyk{font-family:var(--serif);font-weight:700;font-size:19px;white-space:nowrap}
.price__agencybody p{font-size:14px;line-height:2}
.price__agencybody b{color:var(--amber-text);font-weight:900}
.price__agencynote{margin-top:10px;font-size:12px;color:var(--ink3);line-height:1.95}

/* =========================================================
   制作の流れ
   ========================================================= */
.flow{padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px)}
.flow__in{max-width:1080px;margin:auto}
.flow__title{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.8vw,40px);margin-bottom:clamp(32px,5vw,48px)}
.flow__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.flow__steps>li{position:relative;background:#fff;border-radius:20px;padding:clamp(24px,2.6vw,32px);box-shadow:0 16px 32px -26px rgba(80,55,20,.4)}
.flow__steps>li:not(:last-child)::after{content:"›";position:absolute;right:-18px;top:44%;font-family:var(--serif);font-size:26px;color:var(--ink3);z-index:1}
.flow__no{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--amber-text);letter-spacing:.05em;line-height:1}
.flow__steps h3{font-family:var(--serif);font-weight:700;font-size:18.5px;margin-top:14px;line-height:1.6}
.flow__steps p{font-size:13.5px;line-height:2;color:var(--ink2);margin-top:12px}
.flow__sub{font-size:12px!important;color:var(--ink3)!important;line-height:1.95!important}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:0 clamp(20px,4vw,40px) clamp(70px,9vw,120px)}
.faq__in{max-width:820px;margin:auto}
.faq__title{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.8vw,40px);margin-bottom:clamp(28px,4vw,40px)}
.qa{background:#fff;border-radius:16px;box-shadow:0 12px 26px -20px rgba(80,55,20,.35);margin-bottom:14px;overflow:hidden}
.qa summary{display:flex;align-items:center;gap:15px;padding:21px 24px;cursor:pointer;font-weight:700;font-size:15px;line-height:1.7;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa__q{font-family:var(--serif);color:var(--amber-text);font-size:21px;font-weight:700;line-height:1;flex:none}
.qa__toggle{margin-left:auto;width:18px;height:18px;color:var(--ink3);transition:transform .3s;flex:none}
.qa[open] .qa__toggle{transform:rotate(45deg)}
.qa__a{display:flex;gap:15px;padding:2px 24px 24px}
.qa__a>span{font-family:var(--serif);color:var(--ink3);font-size:21px;font-weight:700;line-height:1.5;flex:none}
.qa__a p{font-size:14px;line-height:2.05;color:var(--ink2)}
/* v29: qaopen(.qa)は参照先の要素が index.html に無いため撤去(実クラスは .fq) */

/* =========================================================
   お問合せ(ダーク・フロア開始)
   ========================================================= */
.contact{
  position:relative;color:var(--cream);
  background:
    radial-gradient(720px 400px at 12% 0%, rgba(240,156,18,.1), transparent 70%),
    linear-gradient(180deg,#241D15,#201912);
  padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px) clamp(60px,8vw,90px);
}
.contact::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none}
.contact__in{position:relative;max-width:1140px;margin:auto;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,76px);align-items:start}
.contact__info h2{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.5vw,33px);line-height:1.7}
.contact__info h2 em{color:var(--amber-hi)}
.contact__lead{margin-top:18px;color:var(--cream-mut);font-size:14.5px;line-height:2.05}
.contact__tel{display:block;margin-top:30px;background:rgba(255,255,255,.05);border:1px solid rgba(244,239,230,.14);border-radius:18px;padding:24px 28px;transition:border-color .25s}
.contact__tel:hover{border-color:rgba(240,166,60,.5)}
.contact__telk{display:flex;gap:9px;align-items:center;font-size:12.5px;color:var(--cream-mut);font-weight:700}
.contact__telk .ic{width:16px;height:16px;color:var(--amber-hi)}
.contact__tel b{display:block;font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:.03em;margin-top:8px;font-variant-numeric:tabular-nums;line-height:1.2}
.contact__tel small{display:block;font-size:12px;color:var(--cream-mut);margin-top:5px}
.contact__points{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}
.contact__points li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.contact__points .ic{width:16px;height:16px;color:var(--amber-hi)}

/* フォーム */
.form{background:#fff;border-radius:24px;padding:clamp(26px,4vw,42px);color:var(--ink);box-shadow:0 34px 64px -44px rgba(0,0,0,.6)}
.form__t{display:flex;gap:10px;align-items:center;font-weight:900;font-size:16.5px;margin-bottom:24px}
.form__t .ic{width:20px;height:20px;color:var(--amber-text)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field--wide{grid-column:1/-1}
.field__label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:8px}
.req,.opt{font-size:10px;font-weight:900;padding:2.5px 8px;border-radius:5px;line-height:1.4}
.req{background:var(--amber);color:var(--ink)}
.opt{background:#EFE9DD;color:var(--ink3)}
.field input,.field textarea{
  width:100%;border:1.5px solid #E3DCCC;background:#FDFCF8;border-radius:11px;
  padding:12px 15px;font-size:14px;font-family:inherit;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,156,18,.16)}
.field ::placeholder{color:#B8AE9D}
.form.tried input:invalid,.form.tried textarea:invalid{border-color:#C4442A;background:#FDF4F1}
.form__agree{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:13.5px;font-weight:700}
.form__agree input{width:18px;height:18px;accent-color:var(--amber);flex:none}
.form__agree a{color:var(--amber-text);text-decoration:underline;text-underline-offset:3px}
.form__agree .req{margin-left:2px}
.btn--submit{width:100%;margin-top:22px;font-size:16px;padding:18px}
.form__err{color:#C4442A;font-size:13px;margin-top:12px;font-weight:700}
.form__done{text-align:center;padding:44px 8px}
.form__done .ic{width:44px;height:44px;color:var(--amber-text);margin:0 auto 18px}
.form__done h3{font-family:var(--serif);font-size:22px;font-weight:700}
.form__done p{margin-top:12px;font-size:14px;color:var(--ink2);line-height:2}
.form__done small{display:block;margin-top:16px;font-size:11.5px;color:var(--ink3)}

/* =========================================================
   プレフッター(ダーク継続)
   ========================================================= */
.pre{background:#201912;color:var(--cream);text-align:center;padding:clamp(40px,6vw,70px) 24px clamp(70px,9vw,110px);position:relative}
.pre::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none}
.pre__in{position:relative;max-width:760px;margin:auto}
.pre__t{font-family:var(--serif);font-weight:700;font-size:clamp(23px,3.8vw,40px);line-height:1.7}
.pre__t em{color:var(--amber-hi)}
.pre__s{margin:18px 0 30px;color:var(--cream-mut);font-size:14px}

/* =========================================================
   フッター
   ========================================================= */
.foot{background:var(--dark3);color:var(--cream-mut);position:relative;overflow:hidden;padding:clamp(56px,7vw,84px) clamp(20px,4vw,40px) 0}
.foot__in{max-width:1140px;margin:auto;display:grid;grid-template-columns:1.1fr 2fr;gap:clamp(32px,6vw,90px);position:relative;z-index:1;padding-bottom:clamp(40px,5vw,60px)}
.brand--foot{gap:9px}
.brand--foot .brand__mark{width:66px}
.brand--foot .brand__name{color:var(--brand-cream);gap:3px}
.brand--foot .brand__name-top{font-size:12px}
.brand--foot .brand__name-main{font-size:20px}
.foot__desc{font-size:13px;line-height:2.05;margin-top:16px;max-width:320px}
.foot__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot__k{font-size:13.5px;font-weight:900;color:var(--cream);margin-bottom:14px}
.foot__col li{margin-bottom:10px;font-size:13px}
.foot__col a{transition:color .2s}
.foot__col a:hover{color:var(--cream)}
.foot__legal{max-width:1140px;margin:auto;border-top:1px solid rgba(244,239,230,.1);padding:22px 0 26px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font-size:11px;line-height:1.95;color:#8F8371;position:relative;z-index:1;flex-wrap:wrap}
.foot__copy{white-space:nowrap}
.foot__wordmark{
  position:relative;z-index:0;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(64px,13.5vw,196px);
  letter-spacing:.06em;line-height:1;
  color:#251D14;
  text-align:center;white-space:nowrap;
  transform:translateY(24%);
  user-select:none;pointer-events:none;
  font-feature-settings:"palt";
}

/* =========================================================
   モバイル固定CTA
   ========================================================= */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1.7fr;gap:10px;
  background:rgba(26,20,14,.97);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 28px -20px rgba(0,0,0,.6);
}
.mcta a{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:900;font-size:14px;padding:14px 8px}
.mcta__tel{background:#2E251B;color:var(--cream)}
.mcta__tel .ic{width:17px;height:17px;color:var(--amber-hi)}
.mcta__form{background:var(--amber);color:var(--ink)}
.mcta__form .ic{width:16px;height:16px}

/* =========================================================
   拡大表示ダイアログ
   ========================================================= */
.lb{border:0;background:transparent;padding:0;max-width:min(400px,90vw);width:100%;overflow:visible;margin:auto;inset:0}
.lb::backdrop{background:rgba(16,11,6,.78)}
.lb .ph{width:100%;--phw:100%}
.lb .ph__cap{color:var(--cream)}
.lb__close{
  position:absolute;top:-14px;right:-14px;z-index:2;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cream);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6);
}
.lb__close .ic{width:18px;height:18px;transform:rotate(45deg)}
@media (prefers-reduced-motion: no-preference){
  .lb[open]{animation:lbin .3s cubic-bezier(.2,.8,.3,1)}
  @keyframes lbin{from{opacity:0;transform:scale(.94)}}
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1080px){
  .nav__links{display:none}
  /* A1(F08): .nav__act 単体(0-1-0)では上の `.nav__links + .nav__act{margin-left:0}`
     (0-2-0)に負けて右寄せが効かなかった。display:none でも隣接兄弟は成立するので
     同じ形のセレクタで打ち消す。 */
  .nav__links + .nav__act{margin-left:auto}
  .feat__item{grid-template-columns:auto 1fr;gap:20px}
  .feat__fig{grid-column:2;max-width:420px;justify-self:start;margin-top:8px}
  .ph--sample .ph__screen{aspect-ratio:9/14}
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:52px}
  .hero__visual{max-width:640px;margin:0 auto;width:100%}
  .contact__in{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr;grid-template-rows:none;gap:22px;max-width:480px;margin-left:auto;margin-right:auto}
  .plan{grid-template-rows:none;grid-row:auto}
  .plan__badge{height:auto;min-height:0;margin-bottom:4px}
  .plan__badge:empty{display:none}
  .plan__list{padding-bottom:18px}
  .flow__steps{grid-template-columns:1fr;max-width:560px;margin:auto}
  .flow__steps>li:not(:last-child)::after{content:"";right:auto;left:50%;top:auto;bottom:-20px;width:2px;height:16px;background:var(--ink3);border-radius:99px;transform:translateX(-50%)}
  .price__agency{grid-template-columns:1fr;gap:12px}
  .price__agencyk{white-space:normal}
}

@media (max-width:860px){
  .mcta{display:grid}
  .nav__tel{display:none}
  .foot__legal{padding-bottom:90px}
}

@media (max-width:640px){
  body{font-size:14px}
  .hero{padding-top:96px}
  .hero__title{font-size:clamp(42px,12vw,56px)}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:22px 14px}
  .hero__visual{padding:0 0 48px 0}
  .hero__visual .ph--hero{left:-6px;--phw:172px}
  .hero__cta{gap:16px}
  .worry__list{grid-template-columns:1fr}
  .ph--sample .ph__screen{aspect-ratio:9/15}
  .form__grid{grid-template-columns:1fr}
  .cvr__table{min-width:480px}
  .cvr__x3{top:10%}
  .foot__in{grid-template-columns:1fr;gap:36px}
  .foot__nav{grid-template-columns:1fr 1fr;gap:26px 18px}
  .pc__body{grid-template-columns:30px 1fr 150px;gap:10px;padding:12px}
  .pc__main{min-height:170px}
  .pc__main .pd{height:150px}
  .pc__mods{grid-template-columns:1.2fr 1fr}
  .mod--specs{display:none}
}

@media (max-width:400px){
  .btn--lg{padding:16px 26px;font-size:15px}
  .telblock__body b{font-size:21px}
}

/* =========================================================
   参考サイト寄せレイヤー
   フォントの役割: 見出し=Zen Kaku 900 / 本文=Zen Kaku 400
   数字=Oswald / 手書きアクセント=Yusei Magic / 特別=Shippori
   ========================================================= */
.hand{font-family:"Yusei Magic",var(--sans);font-weight:400}

/* --- 手書きアクセント --- */
.cvr__advice{background:var(--ink);border:0;color:#FFF;font-family:"Yusei Magic",var(--sans);font-weight:400;font-size:14px;letter-spacing:.12em;padding:10px 26px}
.worry__punch{font-family:"Yusei Magic",var(--sans);font-weight:400;font-size:clamp(20px,3vw,30px);color:var(--ink2)}
.hero__note{position:absolute;bottom:-62px;left:2px;width:150px;font-family:"Yusei Magic",var(--sans);font-size:15px;line-height:1.55;color:var(--amber-deep);transform:rotate(-3deg);display:flex;flex-direction:column}
.hero__note svg{width:40px;height:29px;margin:0 0 2px 104px;order:-1;transform:scaleY(-1)}
@media (max-width:900px){.hero__note{display:none}}

/* --- CVR:比較モック --- */
.mky{background:linear-gradient(transparent 55%,var(--yellow) 55%);font-style:normal;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cvr__pages{display:flex;justify-content:center;align-items:stretch;gap:clamp(14px,3vw,34px);margin-top:clamp(36px,5vw,56px);flex-wrap:wrap}
.pagecard{width:min(248px,100%);display:flex;flex-direction:column}
.pagecard__yeah{font-family:"Yusei Magic",var(--sans);font-size:15px;color:var(--amber-deep);text-align:center;margin-bottom:6px}
.pagecard--a{justify-content:flex-end}
.pagecard__cap{text-align:center;font-weight:700;font-size:12.5px;color:var(--ink3);margin-bottom:10px}
.pagecard__cap b{display:block;font-family:var(--num);font-weight:700;font-size:26px;color:#6E6355;letter-spacing:.02em;line-height:1.25}
.pagecard--b .pagecard__cap b{font-size:31px;color:var(--amber-deep)}
.pagecard__scr{background:#FFF;border:1.5px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 12px 26px -18px rgba(80,55,20,.3);display:grid;gap:8px;flex:1;align-content:start}
.pagecard--b .pagecard__scr{border:2.5px solid var(--amber)}
.pgl{display:block;height:9px;border-radius:3px;background:#EBE4D6}
.pgl.t{width:70%}
.pgl.s{width:45%}
.pagecard__img{aspect-ratio:16/8;border-radius:8px;background:#EFEAE0;display:grid;place-items:center;color:#A79C89;font-size:10.5px;font-weight:700}
.pagecard__vid{aspect-ratio:16/8;border-radius:8px;background:linear-gradient(140deg,#F3B053,#F09C12);display:grid;place-items:center}
.pagecard__play{width:34px;height:34px;border-radius:50%;background:rgba(20,14,8,.62);display:grid;place-items:center}
.pagecard__play svg{width:15px;height:15px;color:var(--cream)}
.pgtick{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--ink2);background:#FBF4E6;border-radius:7px;padding:6px 10px}
.pgtick::before{content:"✓";color:var(--amber-text);font-weight:900}
.pagecard__tag{display:table;margin:12px auto 0;font-size:11px;font-weight:900;background:#8F8371;color:#FFF;border-radius:999px;padding:5px 15px}
.pagecard__tag--b{background:var(--ink);color:var(--yellow)}
.cvr__vs{align-self:center;font-family:var(--num);font-weight:700;font-size:clamp(20px,3vw,26px);color:var(--ink3);letter-spacing:.04em}

/* --- CVR:表のラベル列と注目行 --- */
.cvr__table tbody th{background:#FBEDBB;color:var(--ink);width:34%}
.cvr__table thead th:first-child{background:#F6DF96}
.cvr__table .focus th{box-shadow:inset 2.5px 2.5px 0 -0.5px #E2634B,inset 0 -2.5px 0 -0.5px #E2634B}
.cvr__table .focus td{box-shadow:inset 0 2.5px 0 -0.5px #E2634B,inset 0 -2.5px 0 -0.5px #E2634B}
.cvr__table .focus td:last-child{box-shadow:inset -2.5px 2.5px 0 -0.5px #E2634B,inset 0 -2.5px 0 -0.5px #E2634B}

/* --- CVR:累積利益チャート --- */
.cvrchart{margin-top:clamp(44px,6vw,68px)}
.cvrchart__chip{display:table;margin:0 auto 24px;background:var(--ink);color:#FFF;font-family:"Yusei Magic",var(--sans);font-size:clamp(14px,1.9vw,17px);letter-spacing:.08em;padding:11px 30px;border-radius:999px}
.chartwrap{overflow-x:auto;background:#FFF;border:1px solid var(--line);border-radius:18px;padding:clamp(12px,2vw,26px);box-shadow:0 16px 34px -26px rgba(80,55,20,.4)}
.chartwrap svg{min-width:640px;width:100%;height:auto;display:block}
.cvrchart__note{font-size:11.5px;color:var(--ink3);margin-top:12px;text-align:center}

/* --- お悩み --- */
.worry__title{font-family:var(--sans);font-weight:900}
.worry__tag{background:#FBF0DA;border:0;border-radius:999px;padding:5px 14px;font-size:11px}
.worry__list b{background:linear-gradient(transparent 55%,var(--yellow) 55%)}
.worry__big{font-family:var(--sans);font-weight:900}

/* --- 特徴 --- */
.feat__title{font-family:var(--sans);font-weight:900}
.feat__no{font-family:var(--num);font-weight:700;color:#F0DDB4;letter-spacing:.02em}
.feat__body h3{font-family:var(--sans);font-weight:900;line-height:1.7}
.feat__body h3 em{color:inherit}
.feat__badges b{font-family:var(--num);font-weight:700;letter-spacing:.02em;font-size:30px}
.taskflow li::before{font-family:var(--num);font-weight:600;letter-spacing:.06em}

/* --- ステートメント(明朝はここだけの特別書体) --- */

.ph--sample .ph__cap{color:var(--ink3)}
.lb .ph__cap{color:var(--cream)}

/* --- 伝わる20秒 --- */

/* --- 料金 --- */
.price__head h2{font-family:var(--sans);font-weight:900;font-size:clamp(26px,4vw,42px);color:var(--ink);margin-top:16px;line-height:1.5}
.plan{position:relative}
.plan__badge{height:36px}
.plan__badge b{position:absolute;top:-17px;left:50%;transform:translateX(-50%);border-radius:999px;padding:8px 20px;font-size:12.5px;white-space:nowrap;box-shadow:0 8px 16px -8px rgba(60,40,10,.45)}
.plan__head h3{font-family:var(--sans);font-weight:900;font-size:19.5px}
.plan__price b{font-family:var(--num);font-weight:700;letter-spacing:.01em;font-size:clamp(38px,3.6vw,50px)}
.plan__cta{border-radius:999px}
.price__discount b{background:linear-gradient(transparent 55%,var(--yellow) 55%)}
.price__agencyk{font-family:var(--sans);font-weight:900;font-size:18px}

/* --- 制作の流れ --- */
.flow__title{font-family:var(--sans);font-weight:900}
.flow__no{font-family:var(--num);font-weight:700;font-size:36px;letter-spacing:.02em}
.flow__steps h3{font-family:var(--sans);font-weight:900;font-size:17.5px}

/* --- FAQ --- */
.faq__title{font-family:var(--sans);font-weight:900}
.qa summary{font-weight:900}
.qa__q{font-family:var(--sans);font-weight:900;font-size:15px;width:36px;height:36px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;line-height:1}
.qa__a>span{font-family:var(--sans);font-weight:900;font-size:15px;width:36px;height:36px;border-radius:50%;background:#F0EADD;color:#7A6E5A;display:grid;place-items:center;line-height:1.4;flex:none}

/* --- お問合せ・プレフッター --- */
.contact__info h2{font-family:var(--sans);font-weight:900}
.contact__tel b{font-family:var(--num);font-weight:600;letter-spacing:.04em}
.pre__t{font-family:var(--sans);font-weight:900}

/* --- モバイルCTA --- */
.mcta a{border-radius:999px}

@media (max-width:640px){
  .cvr__vs{width:100%;text-align:center;padding:2px 0}
  .pagecard{width:min(280px,100%)}
}

/* =========================================================
   v3: 実素材への置き換え+力強い見出し(Dela Gothic One)+可読性
   ========================================================= */
:root{
  --disp:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 32' preserveAspectRatio='none'%3E%3Cpath fill='%23F6B428' fill-rule='evenodd' d='M6 20 C 28 10 55 6 92 5.8 C 135 5.6 178 11 214 18 L 213.5 21.5 C 176 17 136 15.2 94 16 C 58 16.8 30 21 4 30 Z M52 11 C 70 9.2 90 8.8 108 9.4 C 90 10.6 70 11.1 52 11 Z M122 12 C 142 11.4 160 12 174 13.2 C 158 13.9 140 13.5 122 12 Z M7 30.2 c 4 .2 8 -.5 11 -1.8 c -3 1.9 -7 2.5 -11 1.8 Z M205 22.6 c 3 -.2 5 .2 7 1.1 c -2 .7 -5 .5 -7 -1.1 Z'/%3E%3C/svg%3E");
  /* 濃紺の上に置く筆線。生成りの上の --brush より赤く、地に負けない */
  --brush-o:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 32' preserveAspectRatio='none'%3E%3Cpath fill='%23EE7008' fill-rule='evenodd' d='M6 20 C 28 10 55 6 92 5.8 C 135 5.6 178 11 214 18 L 213.5 21.5 C 176 17 136 15.2 94 16 C 58 16.8 30 21 4 30 Z M52 11 C 70 9.2 90 8.8 108 9.4 C 90 10.6 70 11.1 52 11 Z M122 12 C 142 11.4 160 12 174 13.2 C 158 13.9 140 13.5 122 12 Z M7 30.2 c 4 .2 8 -.5 11 -1.8 c -3 1.9 -7 2.5 -11 1.8 Z M205 22.6 c 3 -.2 5 .2 7 1.1 c -2 .7 -5 .5 -7 -1.1 Z'/%3E%3C/svg%3E");
}

/* --- 見出し: Dela Gothic One(タイトルは力強く) --- */
.hero__title{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5.6vw,72px);line-height:1.32}
.cvr__headline h2{font-family:var(--disp);font-weight:800;font-size:clamp(21px,3vw,33px);line-height:1.7}
.worry__title{font-family:var(--disp);font-weight:800;font-size:clamp(23px,3.4vw,37px)}
.worry__big{font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.6vw,36px);line-height:1.75}
.feat__title{font-family:var(--disp);font-weight:800;font-size:clamp(23px,3.4vw,37px)}
.price__head h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.6vw,40px)}
.flow__title,.faq__title{font-family:var(--disp);font-weight:800;font-size:clamp(23px,3.4vw,37px)}
.contact__info h2{font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.6vw,31px);line-height:1.75}
.pre__t{font-family:var(--disp);font-weight:800;font-size:clamp(21px,3.2vw,34px);line-height:1.8}
.cvr__punch{font-family:var(--disp);font-weight:800;font-size:clamp(18px,2.8vw,28px)}
.foot__wordmark{font-family:var(--disp);font-weight:800;letter-spacing:.02em}
.flow__steps>li:not(:last-child)::after{font-family:var(--num);font-weight:600}

/* --- 筆ストローク下線(かすれ入り)— ベタ塗りマーカーの置き換え --- */
.hero__title em,.feat__body h3 em,
.mky,.cvr__punch b,.worry__list b,.price__discount b{
  background:var(--brush) no-repeat 0 100%/100% .38em;
  padding-bottom:.2em;
  color:inherit;
}
.worry__big em,.pre__t em,.contact__info h2 em{
  color:var(--cream);
}
.worry__big em,.pre__t em,.contact__info h2 em{
  background:var(--brush) no-repeat 0 100%/100% .38em;
  padding-bottom:.2em;
}

/* --- 本文: 読みやすく --- */
body{font-size:15.5px}
.contact__lead{font-size:15.5px;line-height:2.1;text-wrap:pretty}
.feat__body>p{font-size:15px;line-height:2.1;text-wrap:pretty}
.flow__steps p{font-size:14.5px}
.flow__sub{font-size:12.5px!important}
.qa__a p{font-size:15px;line-height:2.1;text-wrap:pretty}
.price__agencybody p{font-size:14.5px;text-wrap:pretty}
.worry__list p{text-wrap:pretty}

/* --- ヒーローモック: 実写化 --- */
.pc__main--img{position:relative;overflow:hidden;padding:0}
.pc__main--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mod--video{position:relative;overflow:hidden}
.mod--video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mod__play{position:relative;z-index:1}
.mod__tag{z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.55);color:#FFF}
.mod--img{position:relative;overflow:hidden;background:#EDEAE4}
.mod--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__photo--img{position:relative;overflow:hidden;padding:0}
.ph__photo--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__mod--video{position:relative;overflow:hidden}
.ph__mod--video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__mod--video svg{position:relative;z-index:1}
.ph__mod--banner{border-radius:2.6cqi;overflow:hidden}
.ph__mod--banner img{display:block;width:100%;height:auto}
.pagecard__vid{position:relative;overflow:hidden}
.pagecard__vid>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagecard__play{position:relative;z-index:1}

/* --- 制作サンプル: 実バナー --- */

/* --- 20秒デモ: 実写シーン --- */

/* --- カット静止画: 実写 --- */

/* --- ライトボックス: バナー一括表示 --- */
.lb{max-width:min(720px,94vw)}
/* サンプルは縦に長い。切って中でスクロールさせるより、
   高さに合わせて全体を一度に見せるほうが「拡大して見る」の答えになる。 */
.lb{max-width:min(94vw,760px)}
.lb__body .zoombox{
  display:grid;gap:8px;background:#FFF;border-radius:14px;padding:10px;
  width:fit-content;max-width:100%;margin:0 auto;
}
.lb__body .zoombox img{
  display:block;border-radius:6px;
  width:auto;max-width:100%;max-height:82vh;margin:0 auto;
}
.lb__close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}


/* =========================================================
   v5: セクション背景のリズム強化+Amazonブランド色
   (スミ紺 #232F3E / フッター紺黒 #131A22 / クールグレー / オレンジ帯)
   ========================================================= */

/* --- ヒーロー: Amazon専門チップ+ウォッシュ強化 --- */
.azchip{display:inline-block;background:#232F3E;color:#FFF;font-size:11px;font-weight:900;letter-spacing:.04em;padding:4px 12px;border-radius:6px;margin-left:12px;font-style:normal;vertical-align:2px}
.hero{
  background:
    radial-gradient(1000px 560px at 88% -12%, rgba(255,169,32,.28), transparent 64%),
    radial-gradient(760px 480px at -8% 36%, rgba(255,169,32,.12), transparent 60%),
    linear-gradient(180deg,#FFFDF8,#FBF7EE);
}

/* --- CTA帯: オレンジのフルバンド --- */

/* --- A+とは: Amazonのクールグレー(画面の世界) --- */


/* --- Amazonモック内の動画面: スミ紺 --- */
.mod--video{background:linear-gradient(135deg,#37475A,#232F3E)}
.ph__mod--video{background:linear-gradient(135deg,#37475A,#232F3E)}

/* --- FAQ: 帯化 --- */
.faq{background:var(--paper2);padding:clamp(70px,9vw,120px) clamp(20px,4vw,40px)}

/* --- お悩みの回答パネル/お問合せ/プレフッター/フッター: Amazonスミ紺 --- */
.worry__answer{
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(255,153,0,.18), transparent 70%),
    linear-gradient(180deg,#2C3846,#232F3E);
}
.contact{
  background:
    radial-gradient(720px 400px at 12% 0%, rgba(255,153,0,.12), transparent 70%),
    linear-gradient(180deg,#28323F,#232F3E);
}
.pre{background:#232F3E}
.foot{background:#131A22}
.foot__wordmark{color:rgba(233,238,244,.06)}
.foot__wordmark{-webkit-text-stroke:0}
.mcta{background:rgba(19,26,34,.97)}

/* --- 各種タグ/チップもスミ紺で統一 --- */
.cvr__advice{background:#232F3E}
.cvrchart__chip{background:#232F3E}
.pagecard__tag--b{background:#232F3E;color:#FFC24D}
.plan__badge--ink b{background:#232F3E;color:#FFC24D}
.plan--best{border-color:#232F3E}

/* =========================================================
   v6: 筆線を太く+「制作の流れ」= FULL COVERAGE タイムライン
   ========================================================= */
.hero__title em,.feat__body h3 em,
.mky,.cvr__punch b,.worry__list b,.price__discount b,
.worry__big em,.pre__t em,.contact__info h2 em,.flow__title em{
  background-size:100% .46em;
  padding-bottom:.24em;
}

/* --- セクション頭(中央揃え・画像準拠) --- */
.flow__head{text-align:center;margin-bottom:clamp(38px,5vw,56px)}
.flow__eyebrow{font-family:var(--num);font-weight:600;font-size:12.5px;letter-spacing:.3em;color:#CE7A00;text-indent:.3em}
.flow__title{margin:14px 0 0;font-size:clamp(24px,3.6vw,40px)}
.flow__title em{color:#CE7A00;background-image:var(--brush);background-repeat:no-repeat;background-position:0 100%}
.flow__lead{margin-top:16px;font-size:15px;color:var(--ink2);line-height:2.05}
.flow__lead b{color:#CE7A00;font-weight:900}
.pc-only{display:inline}
.sp-only{display:none}

/* --- 5工程タイムライン --- */
.steps5{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1040px;margin:0 auto;padding-top:4px}
.steps5::before{content:"";position:absolute;top:47px;left:7%;right:14px;height:1.5px;background:#EAC494}
.steps5::after{content:"";position:absolute;top:42.5px;right:4px;border-left:9px solid #E2B276;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.st__no{font-family:var(--disp);font-weight:800;font-size:26px;color:#CE7A00;text-align:center;line-height:1;height:30px;letter-spacing:.06em}
.st__dot{display:block;width:9px;height:9px;border-radius:50%;background:#F09C12;margin:8px auto 0;position:relative;z-index:1;box-shadow:0 0 0 4px var(--paper)}
.st__name{text-align:center;font-weight:900;font-size:14px;margin-top:14px}
.st__vis{margin-top:14px;height:150px;display:flex;justify-content:center}
.st__vis>*{width:100%}
.st__doc{background:#FFF;border:1px solid var(--line);border-radius:9px;padding:13px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 10px 22px -16px rgba(60,40,10,.35)}
.st__doc b{font-size:10.5px;font-weight:900;border-bottom:1.5px solid #EEE5D2;padding-bottom:7px}
.st__doc i{height:7px;border-radius:3px;background:#EFE8DA;display:block}
.st__doc i.s{width:60%}
.st__wire{background:#FFF;border:1px solid var(--line);border-radius:9px;padding:12px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.4fr 1fr 1fr;gap:8px;box-shadow:0 10px 22px -16px rgba(60,40,10,.35)}
.st__wire i{background:#EDE6D8;border-radius:4px;display:block}
.st__wire .w1{grid-column:1/-1}
.st__img{height:100%;object-fit:contain;background:#FFF;border:1px solid var(--line);padding:6px;border-radius:9px;box-shadow:0 10px 22px -16px rgba(60,40,10,.35)}
.st__movie{position:relative;border-radius:9px;overflow:hidden;box-shadow:0 10px 22px -14px rgba(60,40,10,.45)}
.st__movie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st__play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(19,26,34,.72);display:grid;place-items:center}
.st__play svg{width:15px;height:15px;color:#F4EFE6}
.st__bar{position:absolute;left:0;right:0;bottom:0;height:17px;background:rgba(19,26,34,.85);display:flex;align-items:center;padding:0 9px}
.st__bar i{height:3px;flex:1;background:rgba(255,255,255,.32);border-radius:2px;position:relative;display:block}
.st__bar i::before{content:"";position:absolute;left:0;top:0;bottom:0;width:34%;background:var(--amber);border-radius:2px}
.st__pc{position:relative;display:flex;flex-direction:column;justify-content:center}
.st__scr{display:block;background:#FFF;border:2px solid #2B3542;border-bottom-width:4px;border-radius:9px 9px 3px 3px;overflow:hidden}
.st__scr::before{content:"";display:block;height:10px;background:#232F3E}
.st__scr img{display:block;width:100%;height:100px;object-fit:contain;background:#FFF;padding:4px}
.st__base{display:block;height:9px;background:linear-gradient(180deg,#465364,#333F4E);border-radius:0 0 11px 11px;margin:0 -9px}
.st__check{position:absolute;right:-7px;bottom:-4px;width:32px;height:32px;border-radius:50%;background:#232F3E;border:3px solid #FFF;display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(19,26,34,.6)}
.st__check svg{width:15px;height:15px;color:#FFC24D}

/* --- 窓口はひとつ --- */
.flow__one{max-width:720px;margin:clamp(38px,5vw,52px) auto 0;padding:18px 12px;border-top:2px dashed #E4CFA6;border-bottom:2px dashed #E4CFA6;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.flow__one .ic{width:22px;height:22px;color:#CE7A00;flex:none}
.flow__one span{font-size:13.5px;color:var(--ink2);font-weight:500}
.flow__one b{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--ink);margin-right:6px}

.flow__subttl{text-align:center;font-size:17px;font-weight:900;margin:clamp(44px,6vw,64px) 0 26px}

@media (max-width:900px){
  .pc-only{display:none}
  .sp-only{display:inline}
  .steps5{grid-template-columns:repeat(2,1fr);gap:26px 18px;max-width:520px}
  .steps5::before,.steps5::after{display:none}
  .st__dot{box-shadow:none}
}
@media (max-width:480px){
  .steps5{grid-template-columns:1fr;max-width:300px}
}

/* =========================================================
   v7: スクエア基調(角丸を締める)+細罫線+セクション強弱
   (gpt/design-sections のエディトリアル言語を移植)
   ========================================================= */

/* --- ボタン/チップ: スクエアへ --- */
.btn,.btn--nav,.plan__cta{border-radius:4px}
.mcta a{border-radius:6px}
.azchip{border-radius:3px}
.zoom__hint{border-radius:3px}

/* --- セクションラベル: ピル→アイブロー(短い黄ルール) --- */
.seclabel{background:none;border:0;border-radius:0;padding:0 2px 8px;color:#CE7A00;font-family:var(--num);font-weight:600;font-size:13px;letter-spacing:.2em;border-bottom:3px solid var(--yellow)}

/* --- 角丸の最小化(カード/パネル) --- */
.cvr__table,.chartwrap{border-radius:4px}
.pagecard__scr{border-radius:4px}
.pagecard__img,.pagecard__vid,.pagecard__tag,.pagecard__tag--b,.pgtick{border-radius:3px}
.worry__answer{border-radius:12px}
.fv,.feat__badges li,.sellermock,.sellermock__row,.taskflow li{border-radius:3px}
.plan,.plan__badge b{border-radius:3px}
.plan__config{border-radius:2px}
.price__agency{border-radius:4px}
.flow__steps>li,.st__doc,.st__wire,.st__img{border-radius:3px}
.st__movie{border-radius:4px}
.qa,.qa__q,.qa__a>span{border-radius:3px}
.form{border-radius:4px}
.field input,.field textarea{border-radius:3px}
.contact__tel{border-radius:6px}
.lb__body .zoombox{border-radius:4px}
.lb__body .zoombox img{border-radius:2px}
.mod{border-radius:4px}
.pc{border-radius:10px}
.pc__main,.pc__main--img{border-radius:6px}
.ph__mod--banner,.ph__mod--video{border-radius:1.6cqi}
.worry__tag{border-radius:0}

/* --- ヒーロー実績: カードなしのルール区切りストリップ --- */
.hero__stats{border-top:1.5px solid rgba(33,28,22,.24);margin-top:clamp(42px,6vw,72px);gap:0}
.hero__stats .stat{padding:20px 10px 0 24px;border-left:1px solid rgba(33,28,22,.14)}
.hero__stats .stat:first-child{border-left:0;padding-left:2px}

/* --- お悩み: 番号+罫線のエディトリアルリスト --- */
.worry__list{display:block;max-width:780px;margin:clamp(32px,5vw,52px) auto 0;counter-reset:wr}
.worry__list li{counter-increment:wr;position:relative;background:none;border-radius:0;box-shadow:none;padding:22px 4px 22px 78px;border-top:1px solid rgba(33,28,22,.16)}
.worry__list li:last-child{border-bottom:1px solid rgba(33,28,22,.16)}
.worry__list li::before{content:counter(wr,decimal-leading-zero);position:absolute;left:6px;top:24px;font-family:var(--num);font-weight:600;font-size:26px;color:#CE7A00;letter-spacing:.04em;line-height:1}
.worry__tag{display:block;background:none;padding:0;color:var(--ink);font-size:15.5px;font-weight:900;margin-bottom:6px}
.worry__list p{font-size:13.5px;color:var(--ink3)}

/* --- 料金: ベストプラクティス=フラットなイエロー面(gpt) --- */
.plan--best{background:#FBF2CE;border-color:#E2C25F}
.plan--best .plan__config{background:#F5E5A8}

/* --- フォーム: 必須/任意はテキスト表記 --- */
.req{background:none;color:#D9480F;padding:0;border-radius:0;font-size:11.5px;letter-spacing:.04em}
.opt{background:none;color:var(--ink3);padding:0;border-radius:0;font-size:11.5px;letter-spacing:.04em}

/* --- お問合せ: ライト地へ反転(直後のプレフッター紺との強弱) --- */
.contact{
  background:
    radial-gradient(720px 400px at 12% 0%, rgba(255,153,0,.10), transparent 70%),
    #F8EFE6;
  color:var(--ink);
}
.contact__info h2{color:var(--ink)}
.contact__info h2 em{color:inherit}
.contact__lead{color:var(--ink2)}
.contact__points li{color:var(--ink)}
.contact__points .ic{color:var(--amber-text)}
.contact__tel{background:#232F3E;border-color:#232F3E;color:#F4EFE6}
.contact__tel:hover{border-color:var(--amber)}
.form{border:1px solid var(--line);box-shadow:0 18px 38px -30px rgba(60,40,10,.4)}

/* --- チャート注記: ルール行 --- */
.cvrchart__note{border-top:1px solid var(--line);padding-top:12px;max-width:760px;margin-left:auto;margin-right:auto}

@media (max-width:640px){
  .worry__list li{padding-left:56px}
  .worry__list li::before{font-size:20px;top:26px}
  .hero__stats .stat{padding:16px 6px 0 14px}
  .hero__stats .stat:nth-child(2n+1){border-left:0;padding-left:2px}
}

/* =========================================================
   v8: メリハリ強化 — スケールの跳躍・面の強弱・余白の緩急
   ========================================================= */

/* --- ヒーロー: ファーストビューの圧を上げる --- */
.hero__title{font-size:clamp(44px,6vw,80px);line-height:1.28}
.hero__lead{font-size:clamp(15px,1.6vw,16.5px)}
.btn--lg{padding:22px 48px;font-size:17px}
.stat dd b{font-size:clamp(36px,4.2vw,56px)}
.stat dt{font-size:13px}
.hero__stats{border-top-width:2px}

/* --- セクション見出し: 一段大きく --- */
.price__head h2{font-size:clamp(26px,4vw,48px)}
.worry__title,.feat__title,.flow__title,.faq__title{font-size:clamp(25px,3.8vw,44px)}
.cvr__headline h2{font-size:clamp(22px,3.2vw,38px);line-height:1.65}
.contact__info h2{font-size:clamp(22px,2.8vw,35px)}
.pre__t{font-size:clamp(22px,3.4vw,40px)}
.flow__title{font-size:clamp(25px,3.8vw,44px)}

/* --- 数字の見せ場をさらに巨大に --- */
.plan__price b{font-size:clamp(40px,3.8vw,56px)}
.feat__no{font-size:clamp(62px,8vw,110px);color:#EFD9A8}

/* --- パンチライン --- */
.worry__punch{font-size:clamp(24px,3.6vw,38px)}
.cvr__punch{font-size:clamp(19px,3vw,33px)}
.worry__big{font-size:clamp(24px,3.8vw,40px)}


/* --- 帯の存在感 --- */
.strip{background:linear-gradient(180deg,#F5EEDF,#FBF9F4);padding-top:clamp(40px,5vw,64px)}
.pre{padding:clamp(70px,9vw,110px) 24px clamp(84px,10vw,130px)}

/* --- フッターの締め: ワードマークを効かせる --- */
.foot__wordmark{color:rgba(233,238,244,.12);font-size:clamp(64px,14vw,220px)}

/* --- CTAの圧 --- */
.btn--submit{font-size:17px;padding:20px}

/* --- 紺ステートメント帯と紺アイランドの間に呼吸を --- */

/* =========================================================
   v11: ヒーローを X BUZZ 級に強く
   ========================================================= */
.hero__title{font-size:clamp(48px,6.6vw,96px);line-height:1.18;width:max-content;max-width:none;position:relative;z-index:2}
.hero__lead{font-size:clamp(15px,1.65vw,17px);font-weight:500}
.hero__cta .btn--lg{padding:24px 54px;font-size:18px}
.telblock__body b{font-size:28px}

/* 背景の巨大ゴースト英字 */
.hero__visual{position:relative}
.hero__ghost{
  position:absolute;top:-44px;right:-24px;z-index:0;
  font-family:var(--num);font-weight:300;
  font-size:clamp(88px,9.6vw,148px);line-height:1;letter-spacing:.03em;
  color:rgba(217,126,0,.12);white-space:nowrap;user-select:none;
}
.hero__visual .pc{position:relative;z-index:1}
.hero__visual .ph--hero{z-index:2}

/* 実績スタンプ */
.hero__stamp{
  position:absolute;z-index:4;
  border-radius:6px;padding:10px 16px 9px;
  font-size:13px;font-weight:900;line-height:1.3;
  box-shadow:0 10px 22px -12px rgba(60,40,10,.5);
  text-align:center;
}
.hero__stamp b{font-family:var(--num);font-weight:700;font-size:24px;letter-spacing:.02em;margin:0 2px}
.hero__stamp small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.02em;margin-top:2px}
.hero__stamp--a{top:-30px;right:-10px;background:var(--amber);color:var(--ink);transform:rotate(4deg)}
.hero__stamp--a small{color:rgba(27,21,9,.7)}
.hero__stamp--b{right:-16px;bottom:120px;background:#232F3E;color:#F4EFE6;transform:rotate(-4deg)}
.hero__stamp--b b{color:#FFC24D}

/* 実績ストリップの強化 */
.hero__stats{border-top:2.5px solid rgba(33,28,22,.82)}
.stat dd b{font-size:clamp(38px,4.4vw,60px)}

@media (max-width:900px){
  .hero__title{width:auto}
  .hero__ghost{top:-46px;right:0;font-size:clamp(64px,10vw,110px)}
  .hero__stamp--a{top:-18px;right:0}
  .hero__stamp--b{bottom:auto;top:36px;right:0}
}
@media (max-width:640px){
  .hero__title{font-size:clamp(44px,11.6vw,54px)}
  .hero__stamp{padding:8px 12px 7px;font-size:11.5px}
  .hero__stamp b{font-size:19px}
}

/* =========================================================
   v12: ヒーロー = 斜め紺ブロック × 扇形モック
   ========================================================= */
.hero{overflow:hidden}
.hero__slant{
  position:absolute;top:0;bottom:234px;left:50%;right:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 76% 16%, rgba(255,153,0,.18), transparent 70%),
    linear-gradient(165deg,#2C3846,#212B37 58%,#1B232D);
  clip-path:polygon(16% 0,100% 0,100% 92%,0 100%);
}
.hero__slant::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(16% + 20px);width:10px;
  background:linear-gradient(180deg,#FFB84D,#F08804);
  transform:skewX(-11deg);transform-origin:top left;
}
.hero__in{position:relative;z-index:1}
.hero__stats{position:relative;z-index:1}

/* 扇形モック */
.hero__visual .pc{transform:rotate(-2.5deg)}
.hero__visual .ph--hero{transform:rotate(6deg);bottom:-4px}
.hero__card{
  position:absolute;top:-36px;left:22px;width:min(300px,46%);z-index:0;
  background:#FFF;padding:8px;border-radius:6px;
  box-shadow:0 20px 40px -24px rgba(8,13,20,.6);
  transform:rotate(-8deg);
}
.hero__card img{display:block;width:100%;border-radius:3px}

/* 紺面の上での色調整 */
.hero__ghost{color:rgba(255,178,64,.10);top:-38px;right:-8px}
.hero__note{color:var(--amber-deep)}
.hero__stamp--b{background:#FFF;color:#232F3E;box-shadow:0 12px 26px -14px rgba(8,13,20,.65)}
.hero__stamp--b b{color:#C96A00}

@media (max-width:900px){
  .hero__slant,.hero__card{display:none}
  .hero__note{color:var(--amber-deep)}
  .hero__ghost{color:rgba(217,126,0,.12)}
  .hero__stamp--b{background:#232F3E;color:#F4EFE6}
  .hero__stamp--b b{color:#FFC24D}
  .hero__visual .pc{transform:none}
}

/* =========================================================
   v13: ヒーロー = 生成キービジュアル(1枚絵)へ全面置換
   ========================================================= */
.hero{
  background:url("assets/hero/hero-bg.webp") center/cover no-repeat, var(--paper);
}
.hero__visual{padding:0}
.hero__kv{display:block;width:182%;max-width:none;height:auto;margin:clamp(-120px,-7.5vw,-48px) 0 -10px -60%}
@media (max-width:900px){
  .hero__kv{width:min(104%,560px);margin:0 auto}
}

/* =========================================================
   v14: 「圧」のレイヤー — ゴシック900見出し/ハード影/紺帯CVR/
        カウントアップ/太罫/巨大アウトライン番号/グレイン増強
   ========================================================= */

/* --- 1,2,3: 見出しをZen Kaku 900へ(明朝はステートメントとワードマークのみ) --- */
.hero__title,.cvr__headline h2,.worry__title,.worry__big,
.price__head h2,.flow__title,.faq__title,
.contact__info h2,.pre__t,.cvr__punch,.flow__one b{
  font-family:var(--sans);font-weight:900;letter-spacing:0;
}
.hero__title{letter-spacing:-.01em;font-size:clamp(46px,6.2vw,92px);line-height:1.2}
.price__head h2{font-size:clamp(30px,4.4vw,58px);line-height:1.42}
.worry__title,.flow__title,.faq__title{font-size:clamp(28px,4vw,54px)}
.cvr__headline h2{font-size:clamp(24px,3.6vw,46px);line-height:1.5}
.contact__info h2{font-size:clamp(23px,3vw,40px);line-height:1.55}
.pre__t{font-size:clamp(24px,3.4vw,44px);line-height:1.55}
.cvr__punch{font-size:clamp(20px,3vw,36px)}
.worry__big{font-size:clamp(24px,4vw,44px);line-height:1.6}
.flow__one b{font-size:18px}
.st__no{font-family:var(--num);font-weight:600;letter-spacing:.08em}

/* --- 9: 数字のスケール拡大 --- */
.stat dd b{font-size:clamp(44px,5.2vw,80px)}

/* --- 4: CVR試算 = フルブリードの紺帯 --- */
.cvr{
  position:relative;color:#F4EFE2;
  background:
    radial-gradient(820px 420px at 82% 0%, rgba(255,153,0,.14), transparent 70%),
    linear-gradient(180deg,#28323F,#1E2732);
  padding-top:clamp(70px,9vw,120px);
}
.cvr::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.08;pointer-events:none}
.cvr__in{position:relative}
.cvr__headline h2{color:#F4EFE2}
.cvr .mky{color:#FFF}
.cvr__advice{background:var(--amber);color:#1B1509}
.pagecard__cap{color:#B9C2CC}
.pagecard__cap b{color:#D5DAE1}
.pagecard--b .pagecard__cap b{color:var(--amber-hi)}
.cvr__vs{color:#8E99A6}
.cvr__table caption{color:#F4EFE2}
.cvr__table{color:var(--ink)}
.cvr .pagecard__scr{color:var(--ink)}
.cvr__note{color:#A8B0BA}
.cvrchart__chip{background:var(--amber);color:#1B1509}
.cvrchart__note{color:#A8B0BA;border-top-color:rgba(255,255,255,.16)}
.cvr__punch{color:#F4EFE2}
.cvr__punch b{color:#FFF}

/* --- 5,10: ハードオフセット影(ボタン+主要カード) --- */
.btn{border:2px solid #211C16;box-shadow:5px 5px 0 #211C16;transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{background:var(--amber);transform:translate(2px,2px);box-shadow:3px 3px 0 #211C16}
.btn:hover .ic{transform:none}
.btn--nav{box-shadow:3px 3px 0 #211C16}
.btn--nav:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 #211C16}
.mcta a{box-shadow:3px 3px 0 rgba(27,21,9,.85);border:2px solid #211C16}
.plan,.chartwrap,.cvr__table,.pagecard__scr,.flow__steps>li,.form,.telcard{
  border:2px solid #211C16;
  box-shadow:7px 7px 0 rgba(33,28,22,.9);
}
.cvr .cvr__table,.cvr .chartwrap,.cvr .pagecard__scr{box-shadow:7px 7px 0 rgba(9,13,18,.85);border-color:#141B24}
.qa,.st__doc,.st__wire,.st__movie{
  border:2px solid #211C16;
  box-shadow:4px 4px 0 rgba(33,28,22,.85);
}
.plan--pop{border-color:var(--amber)}
.plan--best{border-color:#211C16}
.telcard{border-color:#141B24;box-shadow:7px 7px 0 rgba(33,28,22,.35)}

/* --- 6: 太罫の言語化 --- */
.worry__list li{border-top-width:2px;border-top-color:rgba(33,28,22,.5)}
.worry__list li:last-child{border-bottom-width:2px;border-bottom-color:rgba(33,28,22,.5)}
/* A9(F35): .faq はマークアップに存在しない死にセレクタ(実クラスは .fq)。
   .fq へ付け替えると罫が1本増えて見た目が変わるため、削除だけ行う。 */
.worry{border-top:4px solid #211C16}

/* --- 13: セクション端の巨大アウトライン番号 --- */
.worry,.price{position:relative}
.cvr::after,.worry::after,.price::after{
  position:absolute;z-index:0;pointer-events:none;line-height:1;
  font-family:var(--num);font-weight:700;font-size:clamp(90px,11vw,160px);
  color:transparent;-webkit-text-stroke:2px rgba(33,28,22,.15);
}
.cvr::after{content:"01";top:26px;right:34px;-webkit-text-stroke-color:rgba(255,255,255,.16)}
.worry::after{content:"02";top:20px;right:30px}
.price::after{content:"05";top:22px;right:30px}
.worry__in,.price__in{position:relative;z-index:1}

/* --- 13b: 小ラベルは静かに(番号が主役) --- */
.seclabel{border-bottom:0;padding-bottom:0;color:var(--ink3);letter-spacing:.22em}

/* --- 8: チャート描画アニメーション --- */
@media (prefers-reduced-motion: no-preference){
  body.js .cvrchart.in .ln-b{stroke-dasharray:960;stroke-dashoffset:960;animation:drawln 1.3s cubic-bezier(.4,0,.2,1) .25s forwards}
  body.js .cvrchart.in .ln-a,
  body.js .cvrchart.in .ln-aw{stroke-dasharray:920;stroke-dashoffset:920;animation:drawln 1.3s cubic-bezier(.4,0,.2,1) .45s forwards}
  @keyframes drawln{to{stroke-dashoffset:0}}
  body.js .cvrchart.in .area-b{animation:fadeArea .9s ease 1.2s both}
  body.js .cvrchart.in .area-a{animation:fadeArea .9s ease 1.35s both}
  @keyframes fadeArea{from{opacity:0}to{opacity:1}}
}

/* --- 11/12: v29 で撤去。kvin(.hero__kv)と .strip__track は
       参照先の要素・アニメーション定義が既に存在しない --- */

/* --- 14: グレイン増強+ワードマークをアウトライン化 --- */
.hero::before,.worry::before,.price::before,
.contact::before,.pre::before,
.worry__answer::before,.cvr::before{opacity:.08}
.foot__wordmark{color:transparent;-webkit-text-stroke:1.6px rgba(233,238,244,.26)}

@media (max-width:900px){
  .cvr::after,.worry::after,.price::after{display:none}
  .btn:hover{transform:none;box-shadow:5px 5px 0 #211C16}
}

/* =========================================================
   v15: ヒーロー = 支給KV(全面背景+タイポ画像)のコーディング
   ========================================================= */
.hero{padding:0;background:var(--paper);overflow:visible}
.hero::before{content:none}
.hero__in{
  position:relative;display:block;max-width:none;padding:0;
  aspect-ratio:1440/900;height:auto;min-height:0;max-height:none;
  background:url("assets/hero/parts/kv-impact-2-background-with-devices.webp") center/cover no-repeat;
  background-image:image-set(
    url("assets/hero/parts/kv-impact-2-background-with-devices.webp") 1x,
    url("assets/hero/parts/kv-impact-2-background-with-devices@2x.webp") 2x);
}
.hero__mbg{display:none}
/* KVの見た目を固定: オーバーレイは全てvw比例(背景と同率でスケール) */
.hero__copy{
  position:absolute;left:2.3vw;top:4vw;
  max-width:none;transform:none;
}
.hero__service{display:block;color:#F09C12;font-weight:900;font-size:1.05vw;letter-spacing:.05em;margin:0 0 1.7vw .3vw}
.hero__title-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero__copyimg{display:block;width:40vw;height:auto}
.hero__lead{
  margin-top:2.4vw;
  /* 1.16vw: 2行目の実測幅が、KV内のスマホ左端(画像座標 x=639 / 44.4%)まで
     30px前後の余白を残して収まる上限。これ以上大きいと文字が端末に接する。 */
  font-size:1.16vw;line-height:2.05;font-weight:700;color:#211C16;
  /* 白フチ: 16方向+8方向のシャドウリング(KVの白フチと揃える) */
  text-shadow:
    .28vw 0 0 #fff,.259vw .107vw 0 #fff,.198vw .198vw 0 #fff,.107vw .259vw 0 #fff,
    0 .28vw 0 #fff,-.107vw .259vw 0 #fff,-.198vw .198vw 0 #fff,-.259vw .107vw 0 #fff,
    -.28vw 0 0 #fff,-.259vw -.107vw 0 #fff,-.198vw -.198vw 0 #fff,-.107vw -.259vw 0 #fff,
    0 -.28vw 0 #fff,.107vw -.259vw 0 #fff,.198vw -.198vw 0 #fff,.259vw -.107vw 0 #fff,
    .14vw 0 0 #fff,.099vw .099vw 0 #fff,0 .14vw 0 #fff,-.099vw .099vw 0 #fff,
    -.14vw 0 0 #fff,-.099vw -.099vw 0 #fff,0 -.14vw 0 #fff,.099vw -.099vw 0 #fff;
}
.hero__cta{margin-top:2.6vw}
.hero__cta .btn--lg{
  padding:1.45vw 3.2vw;font-size:1.25vw;
  border-width:.14vw;box-shadow:.36vw .36vw 0 #211C16;border-radius:.3vw;
}
.hero__cta .btn--lg:hover{transform:translate(.15vw,.15vw);box-shadow:.21vw .21vw 0 #211C16}
.hero__cta .btn--lg .ic{width:1.2vw;height:1.2vw}

/* 実績ストリップ: KV直下の紙面へ */
.hero__stats{
  max-width:1280px;margin:0 auto;
  padding:clamp(30px,4.5vw,52px) clamp(20px,4vw,40px) clamp(44px,5.5vw,68px);
  border-top:0;position:relative;
}
.hero__stats::before{content:"";position:absolute;top:0;left:clamp(20px,4vw,40px);right:clamp(20px,4vw,40px);height:2.5px;background:rgba(33,28,22,.82)}

/* =========================================================
   v16: sticky ヘッダー+KVトーンへの全体調整(強いが見やすい)
   ========================================================= */
/* ヘッダー: fixed→sticky。紙ベタ+墨の太罫でKVと接続 */
.nav{position:sticky;inset:auto;top:0;background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:2px solid #211C16}

/* ページの紙色をKVの生成りに寄せる */
:root{
  --paper:#F8F3EA;
  --paper2:#EFE6D5;
}

/* CTA帯: グラデ→KVと同じフラットなオレンジ面+墨罫+判子影 */

/* ステートメント帯: 紺の「A」を受ける巨大アウトラインA+ */
/* position:relative が要る。無いと ::after の包含ブロックが初期包含ブロックに
   なり、巨大な「A+」がページ最上部(KV〜実績帯)へ飛び出して overflow:hidden も
   効かなくなる。紙面では薄すぎて見えないが、紺の面に重なると露見する。 */

/* ヒーロー直下の実績帯: KV紙色の上で罫を強く */
.hero__stats::before{background:rgba(33,28,22,.9)}

@media (max-width:900px){
  /* 縦組みでもPCと同じ組み立て: 縦位置KV(750x1450)を「背景」として全幅に敷き、
     その上にコピーを重ねる。ただしKV内のPC/スマホには絶対に文字を乗せない。

     下の padding が、その「乗せない」を保証している数値。
       ・KVは下端そろえ(bottom:0)。画像内の端末群の頭は上から 765/1450。
       ・つまり端末の頭は、KVの下端から 685/1450 = 47.24% 上。
       ・KVの高さは 幅 x 1450/750 なので、端末の頭はKV下端から 幅 x 0.9133。
       ・よって padding-bottom = 幅 x 0.9133 + 余白 とすれば、
         コピーの下端は必ず端末の頭より上に来る(余白ぶん空く)。
     100% は .hero__in の包含ブロック幅 = KVの幅と同じなので、この式でよい。 */
  .hero__in{
    position:relative;height:auto;min-height:0;max-height:none;aspect-ratio:auto;
    background:none;padding:40px 20px calc(91.33% + 30px);
  }
  /* inset:auto を忘れないこと。PC側の left/top(vw指定)が生きたまま relative になると、
     コピーがそのぶんずれて、下の余白計算も合わなくなる。 */
  .hero__copy{position:relative;z-index:1;inset:auto;transform:none;max-width:none}
  .hero__service{font-size:13px;margin:0 0 14px 2px;
    text-shadow:1.4px 0 0 var(--paper),-1.4px 0 0 var(--paper),0 1.4px 0 var(--paper),0 -1.4px 0 var(--paper),
                1px 1px 0 var(--paper),-1px 1px 0 var(--paper),1px -1px 0 var(--paper),-1px -1px 0 var(--paper)}
  .hero__copyimg{width:min(86%,520px)}
  /* 「A」の紺に重なるので、PCと同じ白フチを px で持たせる */
  .hero__lead{
    font-size:14.5px;margin-top:20px;
    text-shadow:
      2px 0 0 #fff,1.85px .77px 0 #fff,1.41px 1.41px 0 #fff,.77px 1.85px 0 #fff,
      0 2px 0 #fff,-.77px 1.85px 0 #fff,-1.41px 1.41px 0 #fff,-1.85px .77px 0 #fff,
      -2px 0 0 #fff,-1.85px -.77px 0 #fff,-1.41px -1.41px 0 #fff,-.77px -1.85px 0 #fff,
      0 -2px 0 #fff,.77px -1.85px 0 #fff,1.41px -1.41px 0 #fff,1.85px -.77px 0 #fff,
      1px 0 0 #fff,.71px .71px 0 #fff,0 1px 0 #fff,-.71px .71px 0 #fff,
      -1px 0 0 #fff,-.71px -.71px 0 #fff,0 -1px 0 #fff,.71px -.71px 0 #fff;
  }
  .hero__cta{margin-top:24px}
  .hero__cta .btn--lg{padding:18px 38px;font-size:16px;border-width:2px;border-radius:4px;box-shadow:5px 5px 0 #211C16}
  .hero__cta .btn--lg .ic{width:17px;height:17px}
  /* KV本体。下端そろえ・全幅。max-height があるので、画面が広くて原寸比では
     入りきらないときは cover で上が切れるだけ(ヘッダーへはみ出すことはない)。
     上端は「A」が切れた状態で始まるので、長いマスクで紙へ溶かす。
     紙色(#F8F3EA)と画像の生成り(247,239,230)がほぼ同値なので継ぎ目は出ない。
     下端も93.5%(=画像y1356。ここから下は端末も影も無い無地)から溶かす。
     画像の生成りと紙色の差は G/B で4/255あり、これを消さないと細い帯が見える。 */
  .hero__mbg{
    /* 幅は width で確定させること。left/right の両指定だと、max-height で頭打ちに
       なったときブラウザが比率を優先して幅を縮め、右に隙間ができる。 */
    display:block;position:absolute;z-index:0;left:0;bottom:0;width:100%;
    aspect-ratio:750/1450;max-height:100%;
    background:url("assets/hero/parts/kv-impact-2-mobile-background.webp") no-repeat 50% 100%/cover;
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 1.5%,rgba(0,0,0,.07) 3%,rgba(0,0,0,.15) 4.5%,
      rgba(0,0,0,.26) 6%,rgba(0,0,0,.39) 7.5%,rgba(0,0,0,.53) 9%,rgba(0,0,0,.67) 10.5%,
      rgba(0,0,0,.8) 12%,rgba(0,0,0,.9) 13.5%,rgba(0,0,0,.97) 15%,#000 16.5%,
      #000 93.5%,rgba(0,0,0,.9) 95%,rgba(0,0,0,.72) 96.4%,rgba(0,0,0,.48) 97.6%,
      rgba(0,0,0,.24) 98.8%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.02) 1.5%,rgba(0,0,0,.07) 3%,rgba(0,0,0,.15) 4.5%,
      rgba(0,0,0,.26) 6%,rgba(0,0,0,.39) 7.5%,rgba(0,0,0,.53) 9%,rgba(0,0,0,.67) 10.5%,
      rgba(0,0,0,.8) 12%,rgba(0,0,0,.9) 13.5%,rgba(0,0,0,.97) 15%,#000 16.5%,
      #000 93.5%,rgba(0,0,0,.9) 95%,rgba(0,0,0,.72) 96.4%,rgba(0,0,0,.48) 97.6%,
      rgba(0,0,0,.24) 98.8%,rgba(0,0,0,0) 100%);
  }
  .hero__stats::before{left:20px;right:20px}
}

/* =========================================================
   v17: KV直下の一枚面(実績 → 相談 → 制作サンプル)
   ---------------------------------------------------------
   紺の「A」がここで立ち上がる、という一つの構図。
   (v33 でヒーローの A は素材から外れたので、この面が初出になった。)
   実績4本目の数字と、5枚目のスマホが、その紺の面の上に立つ。

   構図は全てコンテナ幅Wに比例させる(1単位 = W/1200px = --u)。
   これにより「A」の稜線は、どの画面幅でも
     ・「39,800円〜」と「最短納品」のあいだ
     ・「美容・コスメ」と「キッチン用品」のあいだ
   を必ず通る。白ヌキの文字が紙の上へ落ちることはない。
   数値を触るときは、この2箇所の余白(各20単位以上)を必ず確認する。

   この層で .hero__stats / .strip は使わなくなった(マークアップごと .kvf に置き換え)。
   ========================================================= */
.kvf{
  --u:min(1px, calc((100vw - 80px) / 1200));
  --navy:#102437;
  --navy-ink:#F4EFE6;
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:calc(44 * var(--u)) 40px calc(28 * var(--u));
  background:var(--paper);
}
/* cqw は .kvf の「コンテントボックス」基準 = .kvf__in が使える実寸。
   スクロールバー幅を含まないので、vw 版より正確(vw版は非対応環境の保険)。 */
.kvf__in{--u:min(1px, calc(100cqw / 1200))}
.kvf::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);opacity:.05;
}
.kvf__in{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;
}
.kvf__in > *{position:relative;z-index:1}

/* --- 紺の「A」: ページ内で最初に立つA(v33 でヒーローからは外れた) --- */
.kvf__mark{
  position:absolute;z-index:0;top:0;left:0;
  width:135%;                      /* viewBox幅1620 ÷ コンテナ1200 */
  max-width:none;height:auto;
  margin-top:-18.3333%;            /* viewBox上端 -220 ÷ 1200 */
  pointer-events:none;
}

/* --- 実績4本 --- */
.kvf__stats{
  display:grid;
  grid-template-columns:294fr 370fr 408fr 128fr;
  align-items:start;
}
.kstat{padding-bottom:calc(34 * var(--u))}      /* 罫が筆線の下まで届く高さ */
.kstat + .kstat{
  border-left:1px solid rgba(33,28,22,.20);
  padding-left:calc(20 * var(--u));
}
.kstat dt{
  font-size:max(12px, calc(15 * var(--u)));font-weight:700;line-height:1.5;
  letter-spacing:.02em;color:var(--ink2);white-space:nowrap;
}
.kstat dd{
  position:relative;
  width:max-content;
  margin-top:calc(8 * var(--u));
  display:flex;align-items:baseline;
}
.kstat dd b{
  font-family:var(--num);font-weight:700;font-feature-settings:normal;
  font-size:calc(80 * var(--u));line-height:1;letter-spacing:0;
  color:var(--ink);
}
.kstat dd span{
  font-family:var(--sans);font-weight:900;
  font-size:calc(16 * var(--u));line-height:1;letter-spacing:.02em;
  color:var(--amber-text);
  margin-left:calc(7 * var(--u));
}
/* 筆線: KVの「選ばれる、」に引かれているのと同じ一筆 */
.kstat dd::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(-6 * var(--u));right:calc(-6 * var(--u));
  bottom:calc(-30 * var(--u));height:calc(26 * var(--u));
  background:url("assets/kvf/brush.webp") no-repeat center/100% 100%;
}
/* 紺の面の上に立つ4本目(罫は .kstat + .kstat と同じ詳細度が要る) */
.kstat + .kstat--onmark{border-left-color:rgba(244,239,230,.34)}
.kstat--onmark dt{color:rgba(244,239,230,.90)}
.kstat--onmark dd b{color:var(--navy-ink)}
.kstat--onmark dd span{color:var(--amber)}

/* --- 相談ブロック --- */
.kvf__cta{
  margin-top:0;
  /* FV コピーの左端 70u(1440基準) と同じ縦ラインへ揃える */
  margin-left:calc(70 / 1440 * 100vw - 40px - (50cqw - 50%));
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:calc(16 * var(--u));
  width:max-content;max-width:none;
}
.kvf__copy{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;flex:none;
}
.kvf__t{
  font-weight:900;font-feature-settings:"palt";
  font-size:calc(32 * var(--u));line-height:1.35;letter-spacing:.01em;
  color:var(--ink);white-space:nowrap;
}
.kvf__lead{
  margin-top:calc(6 * var(--u));
  font-size:calc(16 * var(--u));line-height:1.45;font-weight:500;color:var(--ink2);
  white-space:nowrap;
}
.kvf__act{
  margin-top:0;
  display:flex;align-items:center;gap:calc(28 * var(--u));flex-wrap:nowrap;
}
.btn--kvf{
  min-width:calc(350 * var(--u));height:calc(66 * var(--u));
  padding:0 calc(30 * var(--u));gap:calc(14 * var(--u));
  font-size:calc(19 * var(--u));font-weight:900;letter-spacing:.05em;
  border-radius:calc(3 * var(--u));box-shadow:none;
}
.btn--kvf .ic{width:calc(19 * var(--u));height:calc(19 * var(--u))}
.telblock--kvf{gap:calc(14 * var(--u))}
.telblock--kvf > .ic{width:calc(33 * var(--u));height:calc(33 * var(--u));color:var(--amber)}
.telblock--kvf .telblock__body b{font-size:calc(37 * var(--u));letter-spacing:.01em;line-height:1.05}
.telblock--kvf .telblock__body small{
  font-size:max(11px, calc(15 * var(--u)));margin-top:calc(3 * var(--u));color:var(--ink2);
}

/* --- 制作サンプル: 流れる棚 ------------------------------------------
   紙面の端から端へ流し続ける。1セット(7枚)を2つ並べ、
   トラックを -50% 動かすので継ぎ目が出ない。
   スマホは動くので、キャプションが紺の上に乗ることはあり得ない。
   だから「A」の裾は、スマホの接地線でぴたりと切ってある。 */
.kvf__rail{
  /* コンテナから画面いっぱいへ引き出す(50cqw = .kvf のコンテントボックス半分) */
  margin-top:calc(36 * var(--u));
  margin-inline:calc(-1 * (50cqw - 50%) - 40px);
  /* 既定は「指で送れる棚」。JSが動いてはじめて流れ出す。 */
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:none;
  padding-inline:calc(50cqw - 50% + 40px);
}
.kvf__rail::-webkit-scrollbar{display:none}
.kvf__set li{scroll-snap-align:start}
.kvf__track{display:flex;width:max-content}
.kvf__set{display:flex}
.kvf__set li{
  width:calc(215 * var(--u));
  margin-right:calc(28 * var(--u));
  display:flex;flex-direction:column;align-items:center;
}
.kvf__set img{display:block;width:100%;height:auto}
.kvf__cap{
  margin-top:calc(14 * var(--u));
  font-size:calc(16 * var(--u));line-height:1.4;font-weight:700;letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;
}
/* 流す量はきっかり1セット分。セット数 --kvf-n はJSが画面幅から決める
   (画面幅 + 1セット を満たすまで複製する)ので、折り返しで隙間が出ない。 */
@media (prefers-reduced-motion: no-preference){
  body.js .kvf__rail{overflow:hidden;scroll-snap-type:none;padding-inline:0}
  body.js .kvf__track{animation:kvfMarquee 28s linear infinite}
  body.js .kvf__rail:hover .kvf__track,
  body.js .kvf__rail:focus-within .kvf__track{animation-play-state:paused}
  @keyframes kvfMarquee{to{transform:translateX(calc(-100% / var(--kvf-n, 2)))}}
}

/* リビールは y だけ動かす(opacity:0 を経由しない)。
   万一アニメーションが走らなくても、文字が消えることが構造上ありえない。 */
@media (prefers-reduced-motion: no-preference){
  body.js .kvf .rv.in{animation-name:kvfRise}
  @keyframes kvfRise{from{transform:translateY(16px)}to{transform:none}}
}

/* 筆線は「引かれる」: 数字は常に見えているので、動かないぶんには何も欠けない。
   fill-mode は backwards のみ。発火しなければ通常状態(=筆線あり)のまま。 */
@media (prefers-reduced-motion: no-preference){
  body.js .kvf__stats.rv.in .kstat dd::after{
    animation:kvfBrush .62s cubic-bezier(.22,.72,.3,1) backwards;
  }
  body.js .kvf__stats.rv.in .kstat:nth-child(2) dd::after{animation-delay:.09s}
  body.js .kvf__stats.rv.in .kstat:nth-child(3) dd::after{animation-delay:.18s}
  body.js .kvf__stats.rv.in .kstat:nth-child(4) dd::after{animation-delay:.27s}
  @keyframes kvfBrush{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

.kvf__note{
  /* 「A」の裾がスマホの接地線で止まるので、註記は支給案どおり中央に置ける */
  margin-top:calc(32 * var(--u));text-align:center;
  font-size:max(11px, calc(12 * var(--u)));line-height:1.5;color:var(--ink3);
}

/* --- 幅が足りない場面(タブレット以下): 構図を組み替える ---
   紺の「A」は稜線の位置で白ヌキ文字を支えている。列が畳まれると
   その保証が崩れるので、Aは desktop 構図でだけ立ち上げ、
   ここでは文字を全て紙の上へ戻す。上の面にAが残るのでモチーフは切れない。 */
@media (max-width:1023px){
  .kvf{padding:clamp(28px,4.5vw,48px) 20px clamp(44px,6.5vw,60px)}
  .kvf__mark{display:none}

  /* v34: 同じ .kstat を FV でも使うようになったので、この畳み込みは
     .kvf の中だけに効かせる(FV は FV 側の指定で組む)。 */
  .kvf .kvf__stats{grid-template-columns:1fr 1fr;row-gap:clamp(30px,5vw,44px)}
  .kvf .kstat{padding-bottom:clamp(26px,3.4vw,34px)}
  .kvf .kstat + .kstat{padding-left:clamp(16px,2.4vw,24px)}
  .kvf .kstat:nth-child(odd){border-left:0;padding-left:0}
  .kvf .kstat dt{font-size:clamp(12px,1.6vw,14px)}
  .kvf .kstat dd b{font-size:clamp(38px,6.6vw,72px)}
  .kvf .kstat dd span{font-size:clamp(13px,1.5vw,15px);margin-left:6px}
  .kvf .kstat dd::after{left:-5px;right:-5px;bottom:-25px;height:22px}
  /* 紙の上に戻す */
  .kvf .kstat + .kstat--onmark{border-left-color:rgba(33,28,22,.20)}
  .kvf .kstat--onmark dt{color:var(--ink2)}
  .kvf .kstat--onmark dd b{color:var(--ink)}
  .kvf .kstat--onmark dd span{color:var(--amber-text)}

  .kvf__cta{margin-top:0;margin-left:0;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.4vw,22px);width:auto;max-width:100%}
  .kvf__copy{flex-direction:column;align-items:flex-start;gap:0}
  .kvf__t{font-size:clamp(22px,3.6vw,36px);white-space:normal}
  .kvf__lead{margin-top:8px;font-size:clamp(14px,1.6vw,17px);white-space:normal}
  .kvf__act{margin-top:0;gap:clamp(16px,2.8vw,28px);flex-wrap:wrap}
  .btn--kvf{min-width:0;height:58px;padding:0 26px;gap:12px;font-size:16px;border-radius:4px}
  .btn--kvf .ic{width:16px;height:16px}
  .telblock--kvf{gap:12px}
  .telblock--kvf > .ic{width:26px;height:26px}
  .telblock--kvf .telblock__body b{font-size:clamp(24px,3vw,32px)}
  .telblock--kvf .telblock__body small{font-size:12px;margin-top:2px}

  /* 流れる棚はそのまま。1枚あたりの幅だけ画面に合わせる */
  .kvf__rail{
    margin-top:clamp(24px,4vw,36px);
    margin-inline:calc(-1 * (50cqw - 50%) - 20px);
  }
  .kvf__set li{width:clamp(160px,38vw,215px);margin-right:clamp(16px,2.8vw,24px)}
  .kvf__cap{margin-top:12px;font-size:clamp(12px,1.5vw,15px)}
  .kvf__note{margin-top:clamp(22px,3vw,32px);font-size:11.5px}
}

@media (max-width:600px){
  .kvf__act{flex-direction:column;align-items:flex-start}
  .btn--kvf{width:100%;justify-content:center}
}

/* ヘッダー(既存の不具合): 狭い幅でボタンの文言とブランド名が折れていた。 */
.btn--nav{white-space:nowrap}
@media (max-width:520px){
  .brand{gap:6px}
  .brand__mark{width:46px}
  .brand__name{gap:1px}
  .brand__name-top{font-size:9.5px}
  .brand__name-main{font-size:16px}
}
@media (max-width:400px){
  .brand__mark{width:44px}
  .brand__name-top{font-size:9px}
  .brand__name-main{font-size:15px}
}

/* =========================================================
   v19: A+とは = 通常フロー + 端末画像
   ---------------------------------------------------------
   v18 は合成画像(941x1672)そのものを版とみなし、セクション高さが
   「版幅 x 画像のアスペクト比」に固定されていた。ここではその依存を切る。

   ・画像は「端末＋影の外接矩形」だけ(PC 748x1064 / SP 852x1340)
   ・見出し・数値は通常のフロー。ページ共通の 1200px グリッドに乗る
   ・オレンジ帯もフローの1ブロック。高さは中身で決まる
   ・引き出し線だけは端末画像の箱を基準に置く(そこは対応が要るため)

   座標の約束: --u = 端末画像の表示幅 / 748 = 画像1px。
   注釈の座標(--acx/--acy)はすべて「切り出し後の画像座標」で書く。
   画像を差し替えたら、外接矩形と注釈の着弾点を測り直すこと。
   ========================================================= */
.about{
  --about-paper:#F3EDE7;          /* 支給デザインの紙の色(実測) */
  --about-orange:#E98502;         /* 支給デザインのオレンジ(実測) */
  --about-pt:clamp(4px,.6vw,12px);

  --cw:min(1200px, calc(100cqw - 80px));   /* 本文幅。上の .kvf__in と同じ式 */
  --gl:calc(var(--cw) / 6);                /* 左の注釈が入る余白 */
  --fw:calc(var(--cw) - var(--gl));        /* 端末画像の幅 */
  --u:calc(var(--fw) / 748);               /* 画像1px */
  --fl:calc((100cqw - var(--cw)) / 2 + var(--gl));  /* 画像左端(セクション左端から) */
  --a-scale:1.36;
  --au:calc(var(--u) * var(--a-scale));

  container-type:inline-size;
  position:relative;
  padding:var(--about-pt) 0 0;
  /* 紙は面。支給デザインの生成り部分から取った継ぎ目なしタイルを全面に敷く。
     上のセクション(--paper)からの渡しは、本文が始まる前に終える。 */
  background:
    linear-gradient(180deg,var(--paper) 0,rgba(243,237,231,0) calc(var(--about-pt) * .8)),
    url("assets/about/paper-cream.webp") repeat;
  /* この background-size だけは .about 自身の宣言。要素は自分のコンテナに
     なれないので 100cqw が使えない。紙目は固定寸法にして依存を切る。 */
  background-size:auto, 600px 414px;
  background-color:var(--about-paper);
}

/* --- 「A」の透かし: すべての背面。中心は端末画像の x=593 に合わせる --- */
.about::before{
  content:"";position:absolute;z-index:0;pointer-events:none;inset:0;
  background:url("assets/about/a-mark.svg") no-repeat;
  background-size:calc(900 * var(--au)) auto;
  background-position:
    calc(var(--fl) + 593 * var(--u) - 453 * var(--au))
    calc(26px - 17.8 * var(--au));
}

/* --- 見出し --- */
.about__head{position:relative;z-index:2;width:var(--cw);margin-inline:auto}
.about__label{
  font-weight:700;letter-spacing:0;line-height:1.5;
  font-size:clamp(13px,1.2vw,17px);color:var(--amber-text);
}
.about__title{
  margin-top:clamp(12px,1.4vw,18px);
  font-family:var(--sans);font-weight:900;font-feature-settings:"palt";
  font-size:clamp(30px,4.05vw,58px);line-height:1.36;letter-spacing:0;color:var(--ink);
}
.about__brk{display:none}   /* 狭い幅でだけ、意図した位置で改行する */
/* リード文は版の左ガターへ移したので(下記)、PC用の強制改行はどの幅でも使わない */
.about__pcbr{display:none}
.about__brush{
  display:block;width:min(63%,640px);height:clamp(12px,1.35vw,20px);
  margin-top:clamp(-6px,-.4vw,-3px);
  background:var(--brush) no-repeat 0 0/100% 100%;
}
/* リード文は見出しの下には置かず、版の左ガター下段(「最大7モジュール」注釈の下)へ。
   間伸び対策: 見出し〜版の帯状の空白と左下の空洞を同時に潰し、版も約100px上がる。
   「…CVRに大きな影響をもたらします」の直後にオレンジ帯の数値が来るので文脈は接続する。
   字寸・幅・位置をすべて u(画像スケール)で取るので注釈と同じく版に貼り付く。
   高さは常に 5行×11u×1.9 = 104.5u で、帯の斜線(879+.231x、画像座標)との
   クリアランスも幅によらず約 70u 一定(1180px/1440px の両端で検算済み)。 */
.about__lead{
  position:absolute;z-index:2;margin:0;
  left:calc(var(--gl) - 165 * var(--u));
  top:calc(665 * var(--u));
  width:calc(185 * var(--u));
  font-size:max(13px, calc(11 * var(--u)));line-height:1.9;color:var(--ink2);text-wrap:pretty;
}

/* --- 版(端末画像 + 注釈) --- */
.about__plate{
  position:relative;z-index:1;
  width:var(--cw);margin:clamp(8px,1.2vw,16px) auto 0;
}
.about__fig{margin-left:var(--gl);width:var(--fw)}
.about__fig picture{display:block}
.about__scene{display:block;width:100%;height:auto}
/* 四隅のレジストレーションマーク(星)。箱の外へも出るので overflow:visible。 */
.about__marks{
  position:absolute;left:var(--gl);top:0;
  width:calc(748 * var(--u));height:calc(1064 * var(--u));
  overflow:visible;pointer-events:none;
}

/* --- 注釈(annotation callout) --- */
.about__calls{position:static}
.ac{
  position:absolute;z-index:2;
  left:calc(var(--gl) + var(--acx) * var(--u));
  top:calc(var(--acy) * var(--u));
  width:calc(var(--acw) * var(--u));
  color:var(--ink);
}
/* --acx/--acy は切り出し後の画像座標(748x1064)。
   間伸び対策: 左右の寂しさを減らすため注釈を一回り大きく(--acw 拡大)し、
   左注釈はガターの外側へ 25u 張り出す。--lx は線の着弾点を動かさないよう
   acx の移動分(+25)を相殺済み。 */
.ac--video{--acx:-165;--acy:148;--acw:185;--lx:15;--ly:45;--lw:230;--lh:43}
.ac--mods {--acx:-165;--acy:466;--acw:198;--lx:15;--ly:67;--lw:206;--lh:41}
.ac--image{--acx:529;--acy:386;--acw:205;--lx:-85;--ly:19;--lw:282;--lh:58}
.ac--sp   {--acx:511;--acy:813;--acw:210;--lx:-66;--ly:58;--lw:256;--lh:46}
/* この注釈だけはPC画面の右列(出品元/販売元/リストに追加)の上に乗る。
   下地の文字が行間から透けるので、縁のない白のかすみを敷いて可読性を確保する。
   箱ではなく、四方へ溶ける減衰だけ。 */
.ac--image::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:calc(-26 * var(--u));right:calc(-22 * var(--u));
  top:calc(-16 * var(--u));bottom:calc(-14 * var(--u));
  background:radial-gradient(112% 100% at 47% 50%,
    rgba(245,244,243,.70) 32%, rgba(245,244,243,.42) 62%, rgba(245,244,243,0) 100%);
}
.ac--video .ac__d{width:calc(165 * var(--u))}
.ac--mods  .ac__d{width:calc(178 * var(--u))}

.ac__reg{
  position:absolute;left:calc(-9 * var(--u));top:calc(-36 * var(--u));
  width:calc(24 * var(--u));height:calc(24 * var(--u));max-width:none;
  overflow:visible;
}
.ac__t{
  font-weight:900;font-feature-settings:"palt";
  font-size:calc(18 * var(--u));line-height:1.62;letter-spacing:.01em;
}
.ac__lead{
  position:absolute;overflow:visible;
  left:calc(var(--lx) * var(--u));top:calc(var(--ly) * var(--u));
  width:calc(var(--lw) * var(--u));height:calc(var(--lh) * var(--u));
  /* base の img,svg{max-width:100%} が親幅で切ってしまうため解除 */
  max-width:none;
}
/* 引き出し線は1本の連続した図形。筆の太い側から着弾点の細い側へ
   なめらかにテーパーさせるため、stroke ではなく塗りの輪郭で描いている。
   (2本の stroke を継ぐと折れ点で線幅が段差になる) */
.ac__line{fill:#F2900F}
.ac__dot{fill:#F2900F}
.ac__d{
  margin-top:calc(30 * var(--u));
  font-size:max(13px, calc(12.8 * var(--u)));line-height:1.88;color:var(--ink2);text-wrap:pretty;
}

/* --- オレンジ帯: フローの1ブロック。上辺だけ斜めに切る ---------------
   端末画像に焼き込まれていた対角線(傾き0.231)をそのまま引き継ぐ。
   margin-top で版に食い込ませ、スマホの足元が帯の上に立つようにしている。
   -185 = 画像下端(1064) から対角線の始点(879) までの距離。
   間伸び対策で元の -170(始点894) から 15u 深く食い込ませ、
   左ガター下段の空洞を帯が早めに埋める。スマホは 15u 深く帯に沈む。 */
.about__band{
  position:relative;z-index:0;
  margin-top:calc(-185 * var(--u) - .231 * var(--fl));
  background:var(--about-orange) url("assets/about/band-paper.webp") repeat;
  background-size:calc(590 * var(--u)) calc(170 * var(--u));
  /* 2点目の y は箱の高さで頭打ちにする(超広幅でポリゴンが自己交差するのを防ぐ) */
  clip-path:polygon(0 0, 100% min(calc(.231 * 100cqw), calc(100% - 2px)), 100% 100%, 0 100%);
  /* 上パディングは「画面中央での斜線位置 + 逃げ」を必ず上回らせる。
     これを下回ると、数値ブロックの上端が clip-path に食われる。 */
  padding:max(clamp(150px, calc(.155 * 100cqw), 300px), calc(.1155 * 100cqw + 60px))
          24px clamp(56px,7vw,110px);
}

/* --- 数字の見せ場 --- */
.about__stat{position:relative;z-index:1;text-align:center}
.about__statlead{
  font-weight:700;font-size:max(12px, calc(15.5 * var(--u)));line-height:1.5;color:var(--ink);
}
.about__statnum{
  margin-top:calc(2 * var(--u));
  display:flex;align-items:baseline;justify-content:center;
  font-family:var(--sans);font-weight:900;font-feature-settings:"palt";
}
/* アキは光学で取る: 「+」の左サイドベアリングが広く、「%」の右が狭い。
   ベタで同じ gap を入れると、目には左が15px広く見える。 */
.about__statk{font-size:calc(39 * var(--u));line-height:1;color:var(--ink)}
.about__statnum>:first-child{margin-right:calc(15 * var(--u))}
.about__statnum>:last-child{margin-left:calc(28 * var(--u))}
.about__statnum b{
  font-weight:900;font-size:calc(168 * var(--u));line-height:.78;
  letter-spacing:-.01em;color:#FBF6EE;
}
.about__statnum b em{font-size:.45em;font-style:normal;margin-left:.06em}
.about__statnote{
  margin-top:calc(16 * var(--u));
  font-size:max(11px, calc(13 * var(--u)));line-height:1.5;color:rgba(33,28,22,.86);
}

/* --- 動き: 出ていなくても中身は必ず見えている --- */
@media (prefers-reduced-motion: no-preference){
  body.js .about .rv.in{animation-name:aboutRise}
  @keyframes aboutRise{from{transform:translateY(14px)}to{transform:none}}

  /* 引き出し線は「指先が伸びる」。fill-mode は backwards のみ。 */
  body.js .ac.in .ac__lead{animation:acDraw .72s cubic-bezier(.25,.75,.3,1) .12s backwards}
  body.js .ac--image.in .ac__lead,
  body.js .ac--sp.in .ac__lead{animation-name:acDrawR}
  body.js .ac--mods.in  .ac__lead{animation-delay:.20s}
  body.js .ac--image.in .ac__lead{animation-delay:.16s}
  body.js .ac--sp.in    .ac__lead{animation-delay:.26s}
  @keyframes acDraw {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
  @keyframes acDrawR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}

  body.js .ac.in .ac__reg{animation:acReg .5s cubic-bezier(.3,1.35,.5,1) backwards}
  body.js .ac--mods.in  .ac__reg{animation-delay:.08s}
  body.js .ac--image.in .ac__reg{animation-delay:.04s}
  body.js .ac--sp.in    .ac__reg{animation-delay:.14s}
  @keyframes acReg{from{transform:rotate(-90deg) scale(.35)}to{transform:none}}
}

/* =========================================================
   v19b: 版が小さくなりすぎる幅では、構図を解いて縦に組み替える
   (注釈は引き出し線を失うので、筆線と星マークで同じ言語を保つ)
   ========================================================= */
@media (max-width:767px){
  .about{
    --about-pt:clamp(8px,1.6vw,20px);
    --sw:min(560px, calc(100cqw - 40px));    /* SP用画像の表示幅 */
    --su:calc(var(--sw) / 852);              /* SP画像の1px */
    --sfl:calc((100cqw - var(--sw)) / 2);
    padding:var(--about-pt) 0 0;
    background:
      linear-gradient(180deg,var(--paper) 0,rgba(243,237,231,0) calc(var(--about-pt) * .8)),
      url("assets/about/paper-cream.webp") repeat;
    background-size:auto, 300px 207px;
    background-color:var(--about-paper);   /* ショートハンドで消えるので再宣言 */
  }
  /* SPでは「A」を端末画像の背景に置く。画像に貼り付いたまま流れ、
     帯(後続の兄弟)が上から重なるので、重なり順も自然に正しくなる。 */
  .about::before{display:none}
  .about__marks{display:none}

  .about__head{width:auto;max-width:760px;margin-inline:auto;padding-inline:20px}
  .about__title{margin-top:14px;font-size:clamp(24px,4.2vw,36px);line-height:1.5}
  .about__brush{width:min(62%,340px);height:13px;margin-top:-2px}
  /* リード文はDOM上は版の先頭にある(ガター配置はPCのみ)。
     order:-2 で従来通り「見出し → リード → 注釈」の並びに戻す。 */
  .about__lead{
    order:-2;position:static;width:auto;max-width:760px;
    margin:18px auto 0;padding-inline:20px;
    font-size:15px;line-height:2.05;
  }

  /* 縦組みでの並び: 見出し → 注釈 → 端末画像 → 帯 */
  .about__plate{width:auto;margin-top:0;display:flex;flex-direction:column}
  .about__calls{order:-1}
  .about__fig{margin-left:0;width:auto;position:relative}
  /* 「A」は図版の箱から上へ突き抜けさせる(注釈の裏へ抜ける)。
     背景ではなく擬似要素なので、箱の外へ出ても切られない。
     後続の兄弟であるオレンジ帯は上に重なるので、重なり順も正しい。 */
  .about__fig::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    width:calc(var(--sw) * .86);
    height:calc(var(--sw) * .86 * 1840 / 900);
    left:calc(50% - var(--sw) * .33);
    top:calc(var(--sw) * -.17);
    background:url("assets/about/a-mark.svg") no-repeat 0 0/100% 100%;
  }
  .about__scene{width:var(--sw);margin-inline:auto}

  .about__calls{
    display:grid;grid-template-columns:1fr 1fr;
    gap:clamp(26px,4vw,38px) clamp(24px,4vw,44px);
    max-width:760px;margin:clamp(30px,4.4vw,44px) auto clamp(20px,3.2vw,34px);padding-inline:20px;
  }
  .ac{position:static;width:auto}
  .ac--image::before{display:none}   /* 縦組みでは下地のUIに乗らないので不要 */
  .ac--video .ac__d,.ac--mods .ac__d{width:auto}
  .ac__reg{position:static;width:21px;height:21px;margin-bottom:9px}
  .ac__t{font-size:16.5px;line-height:1.65}
  .ac__lead{display:none}
  /* 引き出し線の代わりに、同じ筆の一本線を見出しの下へ */
  .ac__t::after{
    content:"";display:block;width:112px;height:10px;margin-top:11px;
    background:var(--brush) no-repeat 0 0/100% 100%;
  }
  .ac__d{margin-top:12px;font-size:13.5px;line-height:1.95}

  /* 帯: SP画像に焼き込まれていた対角線(傾き0.2149)を引き継ぐ。
     -217 = 画像下端(1340) から対角線の始点(1122.5) までの距離。 */
  .about__band{
    margin-top:calc(-217 * var(--su) - .2149 * var(--sfl));
    background-size:calc(590 * var(--su)) calc(170 * var(--su));
    clip-path:polygon(0 0, 100% calc(.2149 * 100cqw), 100% 100%, 0 100%);
    /* 帯を版へ食い込ませたぶん(= margin-top の絶対値)を必ず取り返す。
       これを下回ると、スマホの足元が数値の上に乗る。 */
    padding:calc(217 * var(--su) + .2149 * var(--sfl) + 40px) 20px clamp(46px,8vw,68px);
  }
  .about__statlead{font-size:clamp(13px,3.2vw,16px);line-height:1.5}
  .about__statnum{margin-top:2px}
  .about__statk{font-size:clamp(21px,5.2vw,38px)}
  .about__statnum>:first-child{margin-right:clamp(8px,2vw,16px)}
  .about__statnum>:last-child{margin-left:clamp(12px,3vw,26px)}
  .about__statnum b{font-size:clamp(88px,22vw,164px)}
  .about__statnote{margin-top:clamp(12px,2.6vw,18px);font-size:clamp(11px,2.6vw,13px)}
}

@media (max-width:719px){
  /* 3行に折り返るのは避けられないので、意図した位置で切る */
  .about__brk{display:block}
  /* v41: 筆線グラフィックは出さない(キーフレーズの文中マーカーへ一本化) */
  .about__brush{display:none}
}
/* v41: 大見出しのキーフレーズは筆ストローク下線ではなくベタ塗りマーカーで。
   サイト共通の .mky は筆線に置き換え済みのため、ここだけ黄色マーカーに戻す。
   下寄せ・細めだと罫線に見えるので、文字の胴まで掛かる厚みにする。 */
.about__title .mky{
  background:linear-gradient(transparent 38%,var(--yellow) 38%);
  padding:0 .06em .02em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

@media (max-width:599px){
  /* 2列のまま。列が細くなるぶん、字送りと筆線を幅に連れて縮める。
     どの値も 599px でひとつ上の指定と同値になるので、境界で跳ねない。 */
  .about__calls{gap:26px clamp(14px,4vw,24px)}
  .ac__reg{width:clamp(18px,5.4vw,21px);height:clamp(18px,5.4vw,21px);margin-bottom:8px}
  .ac__t{font-size:clamp(12.5px,3.95vw,16.5px);line-height:1.62}
  .ac__t::after{width:clamp(64px,22vw,112px);height:clamp(5.8px,2vw,10px);margin-top:10px}
  .ac__d{margin-top:11px;font-size:clamp(11.5px,3.25vw,13.5px);line-height:1.92}
  .about__title{font-size:clamp(24px,6.6vw,32px)}
}

/* =========================================================
   v20: ワンポイントアドバイス = 支給デザインの紙面へ
   ・濃紺の帯をやめ、上のオレンジ帯がそのまま斜めに抜けて紙へ着地する
   ・表と、残したグラフは「同じ一枚の白紙」に載せる(材質を揃える)
   ・書体は角ゴ一本。手書き体(Yusei Magic)はこのセクションから外す
   寸法は支給デザイン(1374px幅・本文1201px)の実測値。本文幅を 1200px に
   固定してあるので、広い画面では 1px = 支給1px で一致する。

   このレイヤーで使わなくなった旧ルール(現在どの要素にも当たらない):
   .cvr__pages / .pagecard* / .pgl / .pgtick / .cvr__vs(比較モック)、
   .cvrchart__chip、.cvr__punch、および以前から死んでいた
   .cvr__compare / .cvr__col* / .cvr__bar* / .cvr__x3 / .cvr__sub。
   消す場合はグループセレクタ(1628行/1632行など)の巻き添えに注意。
   ========================================================= */
:root{
  --cvr-paper:#F7EFE4;      /* 支給デザインの紙(実測) */
  --cvr-sheet:#FBF9F7;      /* 白紙。純白より一段あたたかい */
  --cvr-tint:#FBEDDA;       /* 利益行の帯 */
  --cvr-flag:#E37601;       /* 右下の札。白文字で 3.07:1 を満たす */
  --cvr-orange:#F09C12;     /* オレンジの「文字」。ページ共通の明るい黄オレンジ */
  --cvr-ink:#231F1C;
  --cvr-rule:#C9C4BF;       /* 行罫(細) */
  --cvr-rule-h:#B6AFAB;     /* 見出し罫(太) */
  --cvr-slope:.0816;        /* 帯の下辺の傾き(幅に対する比・実測) */
}

/* --- オレンジ帯の着地: 下辺を斜めに抜く ------------------------------
   帯そのものは切らず、紙色の三角をかぶせる。帯の紙目が途切れないので
   継ぎ目が出ない。三角の色は .cvr の地色と同じ = 水平の境界も消える。
   z-index は 0。万一余白が足りなくても、文字が三角の下に隠れることはない
   (.about__stat は z-index:1)。 */
.about__band::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;bottom:0;height:calc(var(--cvr-slope) * 100cqw);
  background:var(--cvr-paper);
  clip-path:polygon(0 0, 0 100%, 100% 100%);
}
/* 斜線に食われないだけの下余白を必ず持たせる(clear the cut)。
   いちばん外側の文字(+20% の左端 ≒ 0.24w)の位置で計算している。 */
.about__band{
  padding-bottom:max(clamp(56px,7vw,110px), calc(.062 * 100cqw + 14px));
}

/* --- セクションの地 --- */
.cvr{
  color:var(--cvr-ink);
  background:var(--cvr-paper);
  /* 上のアキは帯の斜線が作る紙の三角そのもの。ここは詰めておく */
  padding:clamp(2px,.3vw,4px) clamp(20px,4vw,40px) clamp(56px,7vw,96px);
  /* 賑やかしの小道具は画面端で見切れる。はみ出しはここで断つ(縦は素通し) */
  overflow-x:clip;
}
.cvr::before{opacity:.05}          /* 紙の粒。支給デザインも地にだけ乗っている */
/* セクション番号の透かしは出さない。右上はオレンジの斜線と 0.5% の定位置で、
   数字を置ける余白がない(支給デザインにも無い)。 */
.cvr::after{content:none}
.cvr__in{max-width:1200px}

/* リビールは y だけ。発火しなくても文字が消えない */
@media (prefers-reduced-motion: no-preference){
  body.js .cvr .rv.in{animation-name:cvrRise}
  @keyframes cvrRise{from{transform:translateY(14px)}to{transform:none}}
}

/* --- 見出し ------------------------------------------------------------
   本文 1200px のとき、支給デザインと同寸になるよう vw を割り出してある。
   (例: 52 / 1374 = 3.785vw) */
.cvr__head{display:block}
.cvr__advice{
  display:block;background:none;border:0;border-radius:0;padding:0;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(13px,1.53vw,21px);letter-spacing:0;line-height:1.5;
  color:var(--cvr-orange);
}
.cvr__headline{display:block;min-width:0;margin-top:0;gap:0}
.cvr__headline h2{
  margin-top:clamp(8px,.95vw,13px);
  font-family:var(--sans);font-weight:900;color:var(--cvr-ink);
  font-size:clamp(22px,3.64vw,50px);line-height:1.44;letter-spacing:-.01em;
}
/* 筆線は文字の下に置く。字形に重ねない(支給デザインの位置) */
.cvr .mky{color:var(--cvr-ink);padding-bottom:.46em;background-size:100% .5em}

/* --- 見出し直下の比較図 ---------------------------------------------------
   通常A+とプレミアムA+の見え方の差(獲得率1.0%→1.5%)。表・棒グラフと同じ
   白カードの額装で置き、下の試算(1.0%/1.5%)の根拠を先に見せる。 */
.cvr__compare{
  /* display:block は必須。291行の旧 .cvr__compare(死にgrid)が同名で当たるため、
     ここで grid を殺して旧宣言(columns/gap/align-items)を不活性化している */
  display:block;
  /* 幅は直下のペイン(表+棒グラフ)と同じ = .cvr__in いっぱい。端を揃える。
     max-width:none も必須(旧ルールの 660px を打ち消す) */
  margin:clamp(22px,2.6vw,36px) auto 0;
  max-width:none;
  background:var(--cvr-sheet);
  border-radius:12px;
  overflow:hidden;
  box-shadow:1px 2px 8px rgba(74,63,51,.12);
}
.cvr__compare img{display:block;width:100%;height:auto}

/* 表カード | 棒カード。札は独立した帯 */
.cvr__pane{
  /* 棒グラフカードは比較図 .cvr__compare に置換して撤去。表は単独でセンターに置く */
  display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(22px,2.6vw,36px);
}
.cvr__card{
  background:var(--cvr-sheet);
  border-radius:12px;
  box-shadow:1px 2px 8px rgba(74,63,51,.12);
  min-width:0;
}
.cvr__card--table{
  width:min(100%,880px);
  padding:clamp(14px,1.7vw,22px) clamp(12px,1.5vw,20px) clamp(10px,1.2vw,16px);
}
/* 以下の棒グラフ系(.cvr__card--viz/.cvr__eq/.cvr__bars/.cvr__grow/.cvr__col*/.cvr__bar*)は
   比較図 .cvr__compare への置換で HTML から撤去済み = 現在どの要素にも当たらない。
   同名クラスを再導入する際は復活に注意(291行の旧 .cvr__compare で実際に起きた)。 */
.cvr__card--viz{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(16px,1.8vw,24px) clamp(14px,1.6vw,22px) clamp(14px,1.5vw,20px);
}
.cvr .cvr__eq{
  position:static;margin:0 0 clamp(10px,1.2vw,16px);padding:0;
  display:block;text-align:center;
  font-size:clamp(12px,1.3vw,16px);line-height:1.65;font-weight:700;
  color:var(--cvr-ink);
}
.cvr .cvr__eq::before{content:none}
.cvr .cvr__eq i{color:var(--cvr-orange);font-weight:800}
/* 棒はカードの空き高をすべて使う。表カードと背が揃い、上に空白が残らない */
.cvr .cvr__bars{
  position:relative;flex:1;min-height:clamp(190px,22vw,270px);
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(28px,4vw,56px);
  padding:0 8px;
  border-bottom:0;
}
.cvr .cvr__bars::after{
  content:"";position:absolute;left:2%;right:2%;
  bottom:calc(1.4em + 10px);height:2.5px;background:var(--cvr-ink);border-radius:1px;
}
.cvr .cvr__col{
  text-align:center;flex:none;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.cvr .cvr__colhead{
  font-size:clamp(11.5px,1.2vw,14.5px);font-weight:700;color:var(--cvr-ink);
  line-height:1.4;margin-top:10px;
}
.cvr .cvr__col--b .cvr__colhead{color:var(--cvr-orange)}
.cvr .cvr__barwrap{
  flex:1;margin-top:0;
  display:flex;align-items:flex-end;justify-content:center;
  padding-top:2.1em;box-sizing:border-box;
}
.cvr .cvr__bar{
  position:relative;width:clamp(52px,6.6vw,78px);height:var(--h);
  border-radius:6px 6px 0 0;
}
.cvr .cvr__bar span{
  position:absolute;left:50%;top:-1.7em;transform:translateX(-50%);
  font-family:var(--num);font-weight:700;font-size:clamp(13px,1.4vw,18px);
  letter-spacing:.02em;white-space:nowrap;color:var(--cvr-ink);
}
.cvr .cvr__bar--a{background:#D5CFC4}
.cvr .cvr__bar--b{background:var(--cvr-orange)}
.cvr .cvr__bar--b span{color:var(--cvr-orange);font-size:clamp(15px,1.7vw,22px)}
/* 灰の棒の頭からオレンジの棒の頭まで、伸びをひと筆で結ぶ。
   高さは棒の差に追従させたいので % 指定。線幅は非等比でも一定にする */
/* 棒は position:relative。矢は後から描かれる 1.5% の棒に隠れるので z-index を持たせる */
.cvr__grow{
  position:absolute;z-index:2;left:50%;bottom:41%;
  width:clamp(76px,10vw,124px);height:54%;
  transform:translateX(-46%);
  color:var(--cvr-flag);pointer-events:none;overflow:visible;
}
.cvr .cvr__flag{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(16px,2vw,24px);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,28px);
  border-radius:12px;
  font-size:clamp(14px,1.9vw,24px);line-height:1.45;font-weight:800;
  text-align:center;
}
.cvr .cvr__flag svg{width:clamp(28px,3vw,36px);height:auto;flex:none}
.cvr__stack > .cvr__note{
  display:block;margin:clamp(10px,1.2vw,14px) 4px 0;padding:0;
  font-size:clamp(11px,1.05vw,13px);line-height:1.7;color:#5C554C;
  font-weight:400;text-align:left;
}

/* --- 表 --- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.cvr__tablewrap{
  margin-top:0;overflow-x:auto;
  padding:clamp(16px,1.9vw,26px) clamp(14px,1.71vw,23px) clamp(14px,1.6vw,22px);
}
.cvr .cvr__table{
  width:100%;min-width:0;border-collapse:separate;border-spacing:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--cvr-ink);font-size:clamp(11px,1.53vw,21px);line-height:1.5;
  font-feature-settings:"palt";
}
.cvr__table th,.cvr__table td{
  padding:clamp(7px,.80vw,11px) clamp(4px,.8vw,11px);
  text-align:center;font-variant-numeric:tabular-nums;background:none;border:0;
  font-weight:400;
}
.cvr__table tbody th,
.cvr__table thead th{font-weight:700}
.cvr__table thead th{
  background:none;color:var(--cvr-ink);
  font-size:clamp(12px,1.67vw,23px);
  padding-top:0;padding-bottom:clamp(8px,.96vw,13px);
}
.cvr .cvr__table thead th:first-child{background:none;text-align:left;padding-left:0}
.cvr__table thead .hl,.cvr__table .hl{background:none;color:inherit}
.cvr__table thead th.hl{color:var(--cvr-orange)}
.cvr__table .nw{white-space:nowrap}   /* 折り返す幅でも括弧の途中で切らない */
.cvr__table tbody th{
  width:36.4%;text-align:left;background:none;color:var(--cvr-ink);
  font-size:clamp(11px,1.53vw,21px);
  padding-left:clamp(8px,1.53vw,21px);
}
.cvr__table tbody td{width:31.8%}
/* 罫: 見出しだけ太く、行はその半分 */
.cvr__table thead th{border-bottom:2px solid var(--cvr-rule-h)}
.cvr__table tbody tr>*{border-top:1.3px solid var(--cvr-rule)}
.cvr__table tbody tr:first-child>*{border-top:0}

.cvr__chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--cvr-flag);color:#FFF;border-radius:8px;
  padding:clamp(7px,.8vw,10px) clamp(11px,1.3vw,18px);
  font-weight:800;letter-spacing:0;line-height:1;
  font-size:clamp(13px,1.5vw,18px);
}
.cvr__chip svg{width:1.15em;height:1.15em;flex:none}

/* 営業利益: 帯は行の下端より手前で止め、白のアキをつくる */
.cvr__table .row-op>*{
  padding-top:clamp(5px,.51vw,7px);
  padding-bottom:clamp(13px,1.53vw,21px);
  background:linear-gradient(var(--cvr-tint),var(--cvr-tint)) no-repeat
             0 0/100% calc(100% - clamp(10px,1.16vw,16px));
}
.cvr__table .row-op th{color:var(--cvr-orange)}
.cvr__table .row-op td{font-weight:700;font-size:clamp(19px,1.9vw,26px);color:var(--cvr-orange);letter-spacing:.005em}

/* 期間利益: 上に点線をひとつ、帯はそのさらに下から */
.cvr__table .row-half>*{
  border-top:2px dotted #A3A2A0;
  padding-top:clamp(16px,1.82vw,25px);
  padding-bottom:clamp(5px,.51vw,7px);
  background:linear-gradient(var(--cvr-tint),var(--cvr-tint)) no-repeat
             0 clamp(10px,1.16vw,16px)/100% calc(100% - clamp(10px,1.16vw,16px));
}
.cvr__table .row-year>*{
  border-top:1.5px solid #E3DBCE;
  padding-top:clamp(4px,.36vw,5px);
  padding-bottom:clamp(5px,.51vw,7px);
  background:linear-gradient(var(--cvr-tint),var(--cvr-tint)) no-repeat 0 0/100% 100%;
}
.cvr__table .row-year td{font-weight:700;font-size:clamp(19px,1.9vw,26px);color:var(--cvr-orange);letter-spacing:.005em}
/* A+側(1.5%)だけをさらに大きく。1.0%は一段落として主従をつける */
.cvr__table .row-op td.hl,
.cvr__table .row-year td.hl{font-size:clamp(21px,2.55vw,35px)}

/* --- 紙の足元: 注釈 / 定義 / オレンジの札 --------------------------------
   罫は紙の端から端まで(表の罫より外側)。札は右下の角に食い込ませる。 */
.cvr__foot{
  display:grid;align-items:stretch;
  grid-template-columns:39% 27.4% 33.6%;
  border-top:2px solid #C8C3BD;
}
.cvr__note{
  margin:0;display:grid;align-content:center;
  padding:clamp(16px,1.8vw,25px) clamp(14px,1.7vw,24px) clamp(16px,1.8vw,25px) clamp(16px,2.5vw,34px);
  font-size:clamp(11.5px,1.46vw,20px);line-height:1.65;color:var(--cvr-ink);
  font-weight:400;text-wrap:pretty;
}
.cvr__eq{
  position:relative;margin:0;display:grid;align-content:center;
  padding:clamp(16px,1.8vw,25px) clamp(12px,1.6vw,22px) clamp(16px,1.8vw,25px) clamp(14px,2.07vw,28.5px);
  font-weight:700;line-height:1.65;color:var(--cvr-ink);
  font-size:clamp(12px,1.67vw,23px);
}
.cvr__eq::before{
  content:"";position:absolute;left:0;top:clamp(8px,1.05vw,14.5px);bottom:clamp(8px,1.05vw,14.5px);
  width:1.3px;border-radius:1px;background:#C1BDBB;
}
.cvr__flag{
  margin:0;display:grid;align-content:center;justify-items:center;text-align:center;
  padding:clamp(16px,1.8vw,25px) clamp(10px,1.4vw,20px);
  background:var(--cvr-flag);color:#FFF;
  font-weight:700;line-height:1.5;letter-spacing:0;
  font-size:clamp(12.5px,1.93vw,26.5px);
}

/* --- グラフ: 同じ紙に載せ替える --- */
.cvrchart{
  margin-top:clamp(12px,1.4vw,19px);
  background:var(--cvr-sheet);border:0;border-radius:5px;
  box-shadow:1px 2px 6px rgba(74,63,51,.13);
  padding:clamp(8px,1vw,14px) clamp(14px,1.71vw,23px) clamp(6px,.8vw,12px);
}
.cvrchart__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px clamp(14px,2vw,26px);
  padding-bottom:clamp(6px,.7vw,10px);margin-bottom:clamp(4px,.5vw,8px);
  border-bottom:2px solid var(--cvr-rule-h);
}
.cvrchart__key{display:flex;flex-wrap:wrap;gap:6px clamp(14px,1.6vw,22px)}
.cvrchart__key li{
  display:flex;align-items:center;gap:8px;
  font-size:clamp(11px,1.09vw,15px);font-weight:700;color:var(--cvr-ink);
}
.cvrchart__key li span{font-weight:400;color:#5C554C}
.cvrchart__key li::before{content:"";width:22px;height:4px;border-radius:2px;flex:none}
.cvrchart__key .is-b::before{background:#E37601}
.cvrchart__key .is-a::before{background:#8D8574}
.cvr .chartwrap{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow-x:auto;
}
.chartwrap svg{min-width:600px;width:100%;height:auto}
.cvrchart__note{
  margin:clamp(4px,.5vw,8px) 0 0;padding-top:clamp(6px,.6vw,10px);
  border-top:1.3px solid var(--cvr-rule);
  font-size:clamp(10.5px,.95vw,13px);color:#5C554C;text-align:center;max-width:none;
}

/* --- 余白の賑やかし(1400px以上・左右) ----------------------------------
   参考サイト(X BUZZ)の手法をこのページの言語で。切り抜きの小道具を画面端で
   見切れさせ、手書き(Yusei Magic)の短いつぶやきを添える。小道具はページ既存の
   「商品ページのスマホ」= 内容と地続きのモチーフ。画面が広いほど多く見える。
   別案として、上のオレンジ帯と同じ紙帯を <body data-deco="bar"> で使える。 */
.cvr__stack{position:relative}
.cvr__prop,.cvr__mumble{display:none}
.cvr__stack::before,.cvr__stack::after{display:none}

@media (min-width:1400px){
  /* 見出し横にブラウザ比較を置いたので、左右のスマホ小道具は出さない */
  body:not([data-deco]) .cvr__prop,
  body:not([data-deco]) .cvr__mumble{display:none}

  /* 別案: オレンジの紙帯(上の帯と同じ紙目・同じ色。端だけ斜めに落とす) */
  body[data-deco="bar"] .cvr__stack::before,
  body[data-deco="bar"] .cvr__stack::after{
    content:"";display:block;position:absolute;pointer-events:none;z-index:0;
    background:#E98502 url("assets/about/band-paper.webp") repeat;
    background-size:clamp(200px,20vw,340px) auto;
  }
  body[data-deco="bar"] .cvr__stack::before{
    left:calc(-1 * clamp(56px,4.6vw,92px));top:8px;
    width:clamp(20px,1.9vw,30px);height:clamp(300px,30vw,480px);
    clip-path:polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  }
  body[data-deco="bar"] .cvr__stack::after{
    left:calc(100% + clamp(34px,2.9vw,58px));top:clamp(600px,47vw,760px);
    width:clamp(16px,1.5vw,24px);height:clamp(180px,18vw,290px);
    clip-path:polygon(0 0, 100% 6%, 100% 100%, 0 94%);
  }
}

/* ---------------- タブレット ---------------- */
@media (max-width:900px){
  .cvr__head{grid-template-columns:1fr}
  /* 棒が短くなるぶん、矢が「180万」に突き上がらないよう丈を詰める */
  .cvr__grow{bottom:36%;height:44%}
  .cvr__pane{grid-template-columns:1fr;gap:14px}
  .cvr__card--viz{padding:18px 16px 16px}
  .cvr__foot{grid-template-columns:1fr 1fr}
  .cvr__flag{grid-column:1 / -1;padding:18px 20px}
  .cvr__note{padding-left:0}
}
/* ---------------- スマホ: 表は横スクロールさせず、幅に収める ---------------- */
@media (max-width:640px){
  .cvr__tablewrap{padding:16px 12px 14px}
  .cvr .cvr__table{font-size:11.5px}
  .cvr__table th,.cvr__table td{padding:9px 3px}
  .cvr__table tbody th{width:33%;font-size:11.5px;padding-left:8px}
  .cvr__table tbody td{width:33.5%}
  .cvr__table thead th{font-size:11.5px}
  .cvr__chip{font-size:12px;padding:6px 10px;border-radius:7px}
  .cvr__table .row-op td,.cvr__table .row-year td{font-size:19px}
  .cvr__table .row-op td.hl,.cvr__table .row-year td.hl{font-size:21px}
  .cvr__foot{grid-template-columns:1fr}
  .cvr__eq{padding-left:18px;padding-top:18px}
  .cvr__eq::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1.3px}
  .cvrchart{padding:10px 12px 8px}
  /* 横スクロールで縮むぶん、グラフ内の文字はユーザー単位で大きくして
     実寸の読みやすさを保つ(小さすぎる目盛りを作らない) */
  .chartwrap svg{min-width:560px}
  .cvr .cx-ax{font-size:19px}
  .cvr .cx-mo{font-size:20px}
  .cvr .cx-val{font-size:21px}
}
/* ごく細い端末だけ、数字を一段落とす(360px以上は上の指定で収まる) */
@media (max-width:359px){
  .cvr .cvr__table{font-size:10.5px}
  .cvr__table tbody th{font-size:10.5px}
  .cvr__table .row-op td,.cvr__table .row-year td{font-size:17px}
  .cvr__table .row-op td.hl,.cvr__table .row-year td.hl{font-size:19px}
}

/* =========================================================
   v22: お悩み = 本人を囲む「頭の中の声」(支給デザイン準拠)
   ・中央に本人(透過PNG)。その左右に2枚ずつ、計4枚の心の声を置く。
     声は吹き出し、しっぽは丸い泡で、本人の頭の方向へ下りていく。
   ・舞台(.worry__stage)は3カラムのグリッド。真ん中の --core は
     「頭が通るための空き」。人物画像(--img)はそれより大きく、中央カラムから
     左右へはみ出して置く。はみ出すのは画像の透明な余白なので、カードの下に
     潜るだけで絵は欠けない(可視部は幅の 20.4%〜78.1%)。
   ・左右は不揃い、傾きはわずか。整列した一覧ではなく、頭の中の
     ざわつきとして読ませるための不揃いなので、規則的に直さないこと。
   ・材質は上の v20(ワンポイントアドバイス)と同じ紙 #FBF9F7。
     影は box-shadow ではなく filter:drop-shadow。泡・しっぽ・ラベルまで
     ひとつの輪郭として影が落ちる(box-shadow だと四角い箱だけに出る)。
   ・見出しラベルは紙のインデックス。右辺だけを斜めに落とす
     (v20 のオレンジ帯が斜めに着地するのと同じ言語)。斜めに食われる
     ぶんは右padding に足してあるので、文字は切れない。
   ・傾きは transform。リビールも回転を保ったまま動かす。JSが動かなくても
     傾いたまま普通に見える(opacity で消さない)。
   ========================================================= */

.worry{padding-bottom:clamp(36px,4.4vw,60px)}
/* 巨大アウトライン番号はこのセクションでは出さない */
.worry::after{content:none}

/* --- 左右の余白に敷く紙のテクスチャ -------------------------------------
   斜めの帯。地の色(#F3EDE1)とほぼ同値(平均 #F2ECE1・明度差4.7%)なので、
   模様としてではなく紙の起伏として読める。内側へ向けて完全に消えるアルファは
   画像側に焼いてあるため、CSSでマスクを重ねる必要がない。
   上端はフェードさせず、セクションの4px罫線に突き当てる。ここをフェードさせると
   罫線とテクスチャのあいだに模様のない帯ができ、隙間として見えてしまう。
   下端だけ12%で消してあるので、模様が途中で断ち切られた継ぎ目は出ない。
   右側は左側の反転画像。帯が中央へ向かって合わさり、版面が左右対称になる。
   高さは 100% ではなく auto。セクションの高さは中身で変わるので、100% にすると
   帯が縦に潰れて「斜めの紙」ではなく「縦縞」になる。auto なら比率が保たれ、
   足りないぶんは下端のフェードがそのまま消えて終わるので継ぎ目が出ない。
   左右に余白が生まれない 960px 未満では敷かない(下に潜るだけで意味がない)。 */
.worry{
  --side:clamp(280px,34vw,560px);
  background-color:var(--paper2);
  background-image:
    image-set(url("assets/worry/worry-side-left.webp") 1x,
              url("assets/worry/worry-side-left@2x.webp") 2x),
    image-set(url("assets/worry/worry-side-right.webp") 1x,
              url("assets/worry/worry-side-right@2x.webp") 2x);
  background-position:left top,right top;
  background-size:var(--side) auto;
  background-repeat:no-repeat;
}
@media (max-width:959px){
  .worry{background-image:none}
}

/* 声の群れは版面より広く取る(支給デザインの比率 = 声の幅:回答パネル = 1225:990)。
   回答パネル側で 1000px に締め直すので、下半分の見え方は変わらない。 */
.worry__in{max-width:1240px}
/* 狭い画面で「か?」だけが行に残らないよう、行の分け方を任せる */
.worry__title{text-wrap:balance}

/* --- 余白のつぶやき ------------------------------------------------------
   CVR試算セクションの「ふむふむ」「これは…!」と同じ言語。手書き(Yusei Magic)の
   短い独り言を、読み手のうなずきとして余白に置く。左は悩みへの相づち、右は
   回答パネルの脇に置いて、読み終わりの一言にする。
   装飾なので aria-hidden、当たり判定も切る。余白が生まれない幅では出さない。
   ・左は .worry__stage の左下(声の下・本人の左)。
   ・右は .worry__in 基準。回答パネルは 1000px 中央寄せなので、右端は
     50% + 500px。パネル自身は overflow:hidden なので中には入れられない。 */
.worry__mumble{display:none}
@media (min-width:1400px){
  body:not([data-deco]) .worry__mumble{
    display:block;position:absolute;z-index:2;white-space:nowrap;
    pointer-events:none;user-select:none;
    font-family:"Yusei Magic",var(--sans);font-weight:400;
    font-size:clamp(13px,1.15vw,18px);color:var(--amber-deep);
  }
  .worry__mumble--l{
    left:calc(-1 * clamp(4px,.8vw,14px));
    top:calc(100% + clamp(10px,1.4vw,24px));transform:rotate(-4deg);
  }
  .worry__mumble--r{
    left:calc(50% + 520px);
    bottom:clamp(56px,7vw,110px);transform:rotate(5deg);
  }
}

/* --- 舞台 --- */
.worry__stage{
  --core:clamp(132px,13.5vw,180px);      /* 上段2枚のあいだ = 頭が通る幅 */
  --img:clamp(300px,34vw,500px);         /* 人物画像の実寸(可視部は幅の58%) */
  --hang:clamp(26px,5.2vw,78px);         /* 声の下へ出る椅子・机のぶん */
  position:relative;
  max-width:1240px;
  margin:clamp(20px,2.6vw,36px) auto 0;
  padding-inline:4px;                    /* 傾きで角がはみ出すぶん */
  /* 声(li)と人物(picture)を同じ格子に載せるため、ul は display:contents。
     リストの意味は HTML 側の role="list" で保つ。 */
  display:grid;align-items:start;
  grid-template-columns:minmax(0,1fr) var(--core) minmax(0,1fr);
  column-gap:clamp(10px,1.3vw,20px);
  row-gap:clamp(34px,4.2vw,58px);
}
.worry__visual{
  grid-area:1/2/3/3;justify-self:center;align-self:end;
  width:var(--img);max-width:none;
  margin-bottom:calc(-1*var(--hang));
  z-index:0;pointer-events:none;
}
.worry__visual img{width:100%;height:auto;aspect-ratio:1536/1024}

/* --- 心の声(吹き出し) --- */
.worry__list{display:contents;counter-reset:none}
.worry__list li{
  counter-increment:none;
  /* 幅は声の長さで決まる */
  position:relative;z-index:1;width:fit-content;
  /* 短い一言でも吹き出しとして成立する下限。ただし版面が狭いときは
     下限も下げる(下げないと下段の2枚がノートPCと右腕に被る) */
  min-width:min(100%,clamp(270px,29vw,360px));max-width:100%;
  background:var(--cvr-sheet);
  border:0;border-radius:14px;box-shadow:none;
  filter:drop-shadow(4px 4px 0 rgba(33,28,22,.13));
  padding:clamp(24px,2.7vw,33px) clamp(24px,2.8vw,34px) clamp(22px,2.5vw,30px);
  transform:rotate(var(--rot,0deg));
}
.worry__list li:last-child{border:0}
/* 本人の左に2枚、右に2枚 */
.worry__list li:nth-child(1){grid-area:1/1;justify-self:start}
.worry__list li:nth-child(2){grid-area:1/3;justify-self:end}
.worry__list li:nth-child(3){grid-area:2/1;justify-self:start}
.worry__list li:nth-child(4){grid-area:2/3;justify-self:end}

/* 泡: 大小ふたつ。どの声からも本人の頭の方向へ下りていく。
   left/right・top/bottom は前段の指定(番号カウンタ)が残るので、
   ここで必ず両方 auto に戻してから片側だけ与える。 */
.worry__list li::before,
.worry__list li::after{
  content:"";position:absolute;background:var(--cvr-sheet);border-radius:50%;
  left:auto;right:auto;top:auto;bottom:auto;
  width:19px;height:19px;
}
.worry__list li::after{width:12px;height:12px}
/* 上段は斜め下へ、下段は真横へ */
.worry__list li:nth-child(1)::before{right:-30px;bottom:-13px}
.worry__list li:nth-child(1)::after {right:-58px;bottom:-36px}
.worry__list li:nth-child(2)::before{left:-30px;bottom:-13px}
.worry__list li:nth-child(2)::after {left:-58px;bottom:-36px}
.worry__list li:nth-child(3)::before{right:-29px;top:46%;width:17px;height:17px}
.worry__list li:nth-child(3)::after {right:-54px;top:58%;width:11px;height:11px}
.worry__list li:nth-child(4)::before{left:-29px;top:46%;width:17px;height:17px}
.worry__list li:nth-child(4)::after {left:-54px;top:58%;width:11px;height:11px}

/* --- 紙のインデックス(右辺を斜めに落とす) --- */
.worry__tag{
  /* left は吹き出しの padding-left と同値。ラベルと本文の左端を必ず揃える */
  position:absolute;top:-12px;left:clamp(24px,2.8vw,34px);
  display:block;background:var(--amber);color:var(--ink);
  border-radius:0;
  /* 右の斜めに文字が触れないよう、右padding は左+9px */
  padding:5px 23px 5px 14px;
  font-size:13px;font-weight:700;letter-spacing:.03em;line-height:1.65;
  margin:0;white-space:nowrap;
  clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* --- 声そのもの --- */
.worry__list p{
  margin:0;font-size:clamp(15.5px,1.7vw,19px);line-height:1.9;
  color:var(--ink);font-weight:500;
  /* 狭い吹き出しで「ハードルが高そ/うに感じる。」のような割れ方をさせない */
  word-break:auto-phrase;
}
/* 採用デザインの行の割れ方をそのまま固定する(成り行きで割らせない) */
.worry__list p span{display:block}
.worry__list b{font-weight:900}

/* --- ざわつき: 傾き --- */
.worry__list li:nth-child(1){--rot:-1.5deg}
.worry__list li:nth-child(2){--rot:1.2deg}
.worry__list li:nth-child(3){--rot:-.8deg}
.worry__list li:nth-child(4){--rot:1.6deg}

@media (prefers-reduced-motion: no-preference){
  body.js .worry__list li.rv.in{animation:worryIn .62s cubic-bezier(.22,.7,.3,1) both}
  /* 4つの声は一斉ではなく、順に浮かぶ */
  body.js .worry__list li:nth-child(2).rv.in{animation-delay:.09s}
  body.js .worry__list li:nth-child(3).rv.in{animation-delay:.18s}
  body.js .worry__list li:nth-child(4).rv.in{animation-delay:.27s}
  /* v29: opacity を経由しない(共通 rise と同じ保証) */
  @keyframes worryIn{
    from{transform:translateY(18px) rotate(var(--rot,0deg))}
    to{transform:rotate(var(--rot,0deg))}
  }
}

/* --- 声に出た一言: 濃紺の吹き出し --- */
.worry__punch{
  position:relative;width:fit-content;max-width:100%;
  margin:clamp(28px,3.4vw,46px) auto 0;
  background:#232F3E;color:#F4EFE6;border-radius:12px;
  padding:clamp(20px,2.3vw,30px) clamp(28px,4.4vw,62px);
  font-family:var(--sans);font-weight:900;letter-spacing:.01em;
  font-size:clamp(22px,3.6vw,48px);line-height:1.45;text-align:center;
  /* しっぽまで含めて一体の判子影にする。box-shadow では四角にしか出ない */
  filter:drop-shadow(6px 6px 0 rgba(33,28,22,.8));
}
/* 狭い画面では「な…。」だけが行に残る。意味のかたまりで折る */
.worry__punch span{display:inline-block}
.worry__punch::after{
  content:"";position:absolute;top:100%;left:50%;
  margin-left:-15px;width:30px;height:15px;background:#232F3E;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}

/* --- 転換: ＼そんな時は／ --- */
.worry__so{
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,18px);
  margin:clamp(20px,2.4vw,32px) 0 0;
  font-size:clamp(14px,1.5vw,17px);font-weight:700;color:var(--ink2);
  letter-spacing:.04em;
}
.worry__so::before,.worry__so::after{
  content:"";width:2px;height:clamp(20px,2.2vw,26px);
  border-radius:2px;background:rgba(33,28,22,.5);
}
.worry__so::before{transform:rotate(-24deg)}
.worry__so::after{transform:rotate(24deg)}
.worry__ask{
  margin-top:clamp(8px,1vw,12px);text-align:center;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(21px,2.9vw,35px);line-height:1.5;color:var(--ink);
}

/* --- 回答パネル: 発光グラデをやめ、フラットな紺の一面へ --- */
.worry__answer{
  max-width:1000px;margin:clamp(16px,2vw,26px) auto 0;
  background:#232F3E;border-radius:6px;
  padding:clamp(18px,2.2vw,28px) clamp(20px,3vw,36px) clamp(16px,2vw,26px);
  box-shadow:6px 6px 0 rgba(33,28,22,.3);
}
.worry__big{
  /* 幅を絞って、2行の割れ方を確定させる(成り行きだと 928px の版面幅と
     文字幅がちょうど同値で、1行/2行の境目に乗ってしまう) */
  max-width:min(100%,700px);margin:0 auto clamp(20px,2.4vw,28px);
  font-size:clamp(22px,3.4vw,40px);line-height:1.55;
}
/* 二つの意味のかたまりを inline-block に。広い画面では1行に収まり、
   狭くなったときだけ「制作は、/ まるっとお任せ。」の境目で折れる。
   (放っておくと「LPの / 制作は」で割れて読みが崩れる) */
.worry__big span,
.worry__big em{display:inline-block}
/* 3つの約束。仕切りは細い罫だが、両端は丸めて置く */
.worry__points{
  --gap:clamp(18px,3.4vw,34px);
  align-items:center;margin-bottom:clamp(24px,3vw,32px);gap:var(--gap);
}
.worry__points li{position:relative;font-size:clamp(14px,1.3vw,17px);color:var(--cream)}
.worry__points li+li::before{
  content:"";position:absolute;left:calc(var(--gap)/-2);top:50%;
  width:2px;height:15px;margin-top:-7.5px;border-radius:2px;
  background:rgba(244,239,230,.24);
}
.worry__answer .btn{padding:20px 44px;font-size:16.5px}

/* --- 960px 未満: 4枚を 2行2列に並べ、本人はその下へ ---------------
   PC の3カラム(左右の声 + 頭の空き)をやめ、カードを等幅の格子にする。
   min-width の下限(270px)は2列を壊すので外す。泡は隣のカードに被るので消す。
   段の高さは中身で決める(1fr にすると短い声のカードに隙間ができる)。 */
@media (max-width:959px){
  .worry__stage{
    --core:0;
    --hang:clamp(8px,3vw,18px);
    max-width:640px;
    padding-top:14px;                    /* ラベルが上にはみ出すぶん */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;
    column-gap:clamp(8px,2.2vw,14px);
    row-gap:clamp(20px,4.4vw,28px);
    align-items:stretch;
  }
  .worry__list li{
    width:100%;min-width:0;max-width:none;
    justify-self:stretch;margin-top:0;
    padding:clamp(16px,3.2vw,24px) clamp(12px,3.2vw,18px) clamp(14px,3vw,20px);
  }
  .worry__list li:nth-child(1){grid-area:1/1}
  .worry__list li:nth-child(2){grid-area:1/2}
  .worry__list li:nth-child(3){grid-area:2/1}
  .worry__list li:nth-child(4){grid-area:2/2}
  .worry__list p{font-size:clamp(12px,3.2vw,14.5px);line-height:1.7}
  /* PC用の固定改行は2列では幅が足りず、途中でさらに割れるので流す */
  .worry__list p span{display:inline}
  .worry__tag{
    left:clamp(10px,2.8vw,16px);
    font-size:clamp(10px,2.6vw,12px);
    padding:4px 16px 4px 9px;letter-spacing:.01em;
  }
  /* 人物は2×2の下。画像下の透明余白が「変な隙間」になるので、
     寸を小さめにして下の余白はほぼ残さない */
  .worry__visual{
    grid-area:3/1/4/3;justify-self:center;align-self:start;
    width:min(40%,168px);position:relative;left:-4%;
    margin-bottom:calc(-1*var(--hang));
  }
  .worry__visual img{aspect-ratio:1/1}
  /* 2列では隣のカードに泡が乗るので出さない */
  .worry__list li::before,
  .worry__list li::after{display:none}
}
@media (max-width:640px){
  /* 支給デザインどおり、狭い画面では意味のかたまりで2行に割る */
  .worry__title span{display:block}
  /* 2列では傾けると隣のカードに角が当たる。角度を浅く */
  .worry__list li:nth-child(1){--rot:-.7deg}
  .worry__list li:nth-child(2){--rot:.6deg}
  .worry__list li:nth-child(3){--rot:-1.1deg}
  .worry__list li:nth-child(4){--rot:1.3deg}
  .worry__punch{padding:18px 22px;width:100%}
  .worry__ask{font-size:clamp(19px,5.4vw,24px)}
  /* 「動画・商品ページ・LPの制作は、」が1行に収まる上限。
     これより大きいと「は、」だけが行に取り残される。 */
  .worry__big{font-size:clamp(18px,5vw,21px)}
  /* 3つの約束は縦のチェックリストへ。横並びのまま折り返すと
     1個+2個の不揃いな2段になる。仕切りも横罫へ。 */
  /* stretch にして、仕切りの横罫が3つとも同じ長さで通るようにする */
  .worry__points{
    flex-direction:column;align-items:stretch;
    width:fit-content;margin-inline:auto;--gap:13px;
  }
  .worry__points li+li::before{
    left:0;right:0;top:calc(var(--gap)/-2);width:auto;height:0;
    margin-top:0;border-radius:0;background:none;
    border-top:1px dashed rgba(244,239,230,.3);
  }
  .worry__answer .btn{padding:18px 34px;font-size:15.5px}
}

/* 実機のスマホ幅。2列のすき間とラベルが切れない下限まで詰める。 */
@media (max-width:480px){
  .worry__stage{column-gap:8px;row-gap:18px}
  .worry__tag{letter-spacing:0}
}

/* =========================================================
   v22: 特徴(STRENGTH) — 採用デザインのコーディング
   design-proposals/strength/strength-web-09-icon-process-hybrid-b-adjusted.png
   design-proposals/strength/strength-web-09-sp-750.png

   ■ 寸法の作り方
   採用デザインの版面(濃紺パネルの幅=738px)を 100 とし、級数・図版幅・間隔を
   すべてその比率で指定している。単位は cqw(コンテナ幅の%)。
   .strength__in が幅の基準コンテナなので、版面が何pxになっても
   採用デザインと同じ比率が保たれる。
   例: 見出しH2は採用デザインで 版面比 4.62% → 4.62cqw。
   狭い画面では比率のままだと小さくなりすぎるので max() で下限を置き、
   1カラムへ組み替える 899px 以下は別途 px で上書きしている。

   ■ 色
   ・地はデザインどおりの生成り(#F9F4EC)。前後のセクションとは既存の言語である
     4pxの黒罫で受ける。
   ・オレンジはページ共通の黄オレンジ(#F09C12)。図版・大きな文字は --str-or、
     生成りの上の文字も同じトーンの --str-or-t。
   ・5工程アイコンは 01/03/05 がオレンジ、02/04 が墨(採用デザインの実測どおり)。
   ========================================================= */

.strength{
  --str-bg:#F9F4EC;
  --str-or:#F09C12;        /* 図版・大きな文字・濃紺の上 */
  --str-or-t:#F09C12;      /* 生成りの上に乗る文字 */
  --str-navy:#0A1C32;
  --str-card:#FCF9F3;      /* 5工程カードの地。アイコンのヌキにも使う */
  --str-rule:rgba(33,28,22,.38);     /* 「制作実績」下の細罫 */
  --str-cardline:rgba(33,28,22,.72); /* 5工程カードの枠 */
  position:relative;
  background:var(--str-bg);
  border-top:4px solid #211C16;
  padding:clamp(30px,4.1vw,59px) clamp(20px,4vw,40px) clamp(30px,3.05vw,44px);
  overflow:hidden;
}
.strength::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.08;pointer-events:none;
}
.strength__in{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;
  container-type:inline-size;   /* 以下の cqw はすべてこの幅が基準 */
}

/* ---------- 見出し ---------- */
.strength__head{text-align:center}
.strength__eyebrow{
  display:inline-block;
  font-size:max(12px,1.32cqw);font-weight:900;letter-spacing:.22em;line-height:1.4;
  color:var(--str-or-t);
  /* ラベルの下に短い筆線。ページ共通の --brush をそのまま使う */
  background:var(--brush) no-repeat 50% 100%/86% .34em;
  padding:0 .1em .5em;
}
.strength__title{
  margin-top:3.9cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(25px,4.62cqw);line-height:1.4;letter-spacing:-.015em;
  text-wrap:balance;
}
.strength__lead{
  margin-top:1cqw;font-size:max(14px,1.98cqw);line-height:1.85;
  color:var(--ink2);text-wrap:balance;word-break:auto-phrase;
}

/* ---------- 01 / 02 の共通(本文 ↔ 画像のジグザグ) ---------- */
.sblk{display:grid;align-items:start}
/* 画像列と本文列の比、列間はすべて採用デザインの実測比 */
.sblk--01{
  grid-template-columns:54.5cqw minmax(0,1fr);
  column-gap:4.1cqw;
  margin-top:2.5cqw;
}
.sblk--02{
  grid-template-columns:minmax(0,1fr) 58.2cqw;
  column-gap:5.6cqw;
  margin-top:7.1cqw;
}

/* 番号は左、ラベルはその右で番号の足元に揃う。見出しと本文は下へ通す */
.sblk__body{
  margin-top:.6cqw;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:2.8cqw;align-items:end;
}
/* 章番号は採用デザインどおり極太コンデンスの欧文(ページ既存の Oswald)。
   Zen Kaku の数字は丸く広いので字形が合わない。
   サイズはコンプのcap高(版面比 10.64%)に合わせて 10.64 / 0.84 = 12.67cqw。 */
.sblk__no{
  grid-column:1;
  font-family:var(--num);font-weight:700;
  font-size:max(40px,12.67cqw);line-height:.86;letter-spacing:-.005em;
  color:var(--ink);
}
.sblk__tag{
  grid-column:2;align-self:end;justify-self:start;
  font-size:max(13px,1.93cqw);font-weight:900;letter-spacing:.02em;
  line-height:1.5;color:var(--str-or-t);
  background:var(--brush) no-repeat 0 100%/100% .4em;
  padding-bottom:.42em;margin-bottom:.3em;
}
.sblk__h{
  grid-column:1/-1;margin-top:2.4cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(21px,3.63cqw);line-height:1.36;letter-spacing:-.015em;
}
.sblk__h span{display:block}
.sblk__p{
  grid-column:1/-1;margin-top:1.9cqw;
  font-size:max(13.5px,1.51cqw);line-height:1.83;color:var(--ink2);
}
/* 採用デザインの行の割れ方をそのまま固定する(成り行きで割らせない) */
@media (min-width:900px){.sblk__p span{display:block}}

/* ---------- 01 デバイス ----------
   支給素材(640×480)は透明余白込みで、機器が写っているのは中央の 558×370 だけ。
   素のまま置くと「見えている機器」が採用デザインより小さく、余白ぶん行も高くなる。
   そこで素材を 64.7cqw(= 採用デザインの機器幅 56.4cqw ÷ 可視幅率 0.8719)で置き、
   透明余白と同じだけネガティブマージンで削り、レイアウト上の箱を
   「機器そのもの」に一致させている。左マージンには、採用デザインで機器が版面より
   1.9cqw 外へ出るぶんを足してある(右はそのぶん戻す)。
   ※素材差し替え時はこの4つを測り直すこと(現素材の値)
     可視幅率 558/640=0.8719  余白 上下 11.46%  左右 6.41% */
.sblk__media img{width:100%;height:auto}
.sblk__media--devices img{
  width:64.7cqw;max-width:none;
  margin:-5.56cqw -2.25cqw -5.56cqw -6.05cqw;
}

/* ---------- 02 写真コラージュ ----------
   3枚は焼き込まず独立ファイル。位置・大きさ・重なりは採用デザインの実測比。
   枠は白いマットではなく、細い濃色の線＋小さめの角丸(採用デザインの拡大で確認)。

   採用デザインを基準に再生成した16:10素材を、枠(div)で切り抜いている。
   採用デザインは3枚とも寄りのカットなので、素材のどの範囲を見せるかを
   1枚ずつ指定する(下の各コメントの座標は 800x500 の等倍素材上の値)。 */
.sblk__collage{position:relative;aspect-ratio:429.5/315}
.sblk__ph{
  position:absolute;overflow:hidden;
  border:1.5px solid rgba(33,28,22,.72);border-radius:4px;
  background:#FFF;
  box-shadow:3px 4px 9px -6px rgba(26,20,12,.5);
}
/* 共通の img{max-width:100%} が効くと、下の拡大指定が無効になる */
.sblk__ph img{
  position:absolute;left:0;top:0;
  display:block;width:100%;max-width:none;height:100%;object-fit:cover;
}
.sblk__ph--meet  {left:22.7%;top:0;      width:59.7%;height:40.6%}
.sblk__ph--shoot {left:0;    top:30.2%;  width:40.9%;height:60.5%}
.sblk__ph--design{left:42.9%;top:40.8%;  width:57.2%;height:59.2%}
/* 打ち合わせ・デザイン制作は枠と素材の縦横比が近いので object-position で足りる */
.sblk__ph--meet img{object-position:50% 42%}
.sblk__ph--design img{object-position:80% 50%}
/* 商品撮影だけ縦長の枠に横位置の全景が入るため、そのままだと
   採用デザインより大きく引いた画になる。カメラ・ヘルメット・左右2灯の内側
   (x200-560 / y30-420)だけを見せて、採用デザインと同じ寄りに揃える。
   枠内寸をIWとすると 表示幅 = IW x 800/360 = 222.22% */
.sblk__ph--shoot img{width:222.22%;height:auto;left:-55.56%;top:-7.68%}
.sblk__collage-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 01 と 02 をつなぐ斜めのオレンジ線(採用デザインの細部)。
   長さ98px相当・正確に45度・オレンジの6割の濃さ。余白が生まれる幅でだけ出す */
.sblk--02{position:relative}
.sblk--02::before{
  content:"";position:absolute;z-index:1;
  /* 採用デザイン実測: 版面の 43.4%〜52.8%、ブロック上端の -3.4cqw〜+6.0cqw を
     結ぶ長さ98px相当の45度線。中心を置いてから回す */
  left:48.1cqw;top:1.32cqw;
  width:13.28cqw;height:2px;
  margin-left:-6.64cqw;margin-top:-1px;
  background:var(--str-or);opacity:.6;
  transform:rotate(-45deg);
  border-radius:2px;
}

/* =========================================================
   すべてのタスクに対応(5工程)
   カード・番号・接続線・アイコンはすべてHTML/CSS+SVG
   ========================================================= */
.ptasks{margin-top:4.5cqw}
.ptasks__title{
  text-align:center;font-family:var(--sans);font-weight:900;
  font-size:max(19px,3.07cqw);line-height:1.5;letter-spacing:-.01em;
}
.ptasks__title::after{
  content:"";display:block;width:18.8cqw;height:.42em;
  margin:.12em auto 0;
  background:var(--brush) no-repeat 50% 100%/100% 100%;
}
.ptasks__list{
  margin-top:2.1cqw;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3.13cqw;
}
.ptask{
  position:relative;
  background:var(--str-card);
  border:1px solid var(--str-cardline);
  /* カード高は版面比 23.1%。中身の積み上げで自然にこの高さになる */
  padding:3.5cqw 1cqw 2.4cqw;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* 番号は濃紺の札。カードの上辺にまたがって載る(58%が外・42%が内) */
.ptask__no{
  position:absolute;top:0;left:50%;
  transform:translate(-50%,-58%);
  background:var(--str-navy);color:#FBF7F0;
  font-family:var(--sans);font-weight:900;font-size:max(13px,2.45cqw);
  letter-spacing:.02em;line-height:1;
  padding:.9cqw 1cqw;min-width:4.81cqw;
}
.ptask__ic{
  width:7.08cqw;height:7.08cqw;min-width:44px;min-height:44px;
  /* 線は color、手前の形のヌキは fill(どちらも <use> の中へ継承される) */
  fill:var(--str-card);
}
/* 線色はシンボル側の url(#g-ubtn)。ここは万一グラデが効かないときの保険 */
.ptask--o .ptask__ic{color:#FF5700}
.ptask--i .ptask__ic{color:var(--ink)}
.ptask__t{
  margin-top:1.96cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(14px,1.75cqw);line-height:1.45;letter-spacing:-.02em;
}
.ptask__d{
  margin-top:1.15cqw;
  font-size:max(11.5px,1.25cqw);line-height:1.75;color:var(--ink2);
}
.ptask__d span{display:block}
/* 工程をつなぐオレンジ線。カード間の隙間をちょうど埋め、アイコンの高さに通る */
.ptask+.ptask::before{
  content:"";position:absolute;top:32.4%;
  left:calc(-3.13cqw - 1px);
  width:calc(3.13cqw + 2px);height:4px;border-radius:2px;
  background:var(--str-or);
}

/* =========================================================
   03 Amazon専門だからできる、最適な仕上がり
   ========================================================= */
/* 03 は行によって列の切れ目が違う(番号/導入 と 実績数/実績ボード)。
   採用デザインの実測位置を4本の列で作り、行ごとに使う列を変える。
   0 ─ 12 ── 21.68 ── 28.05 ───────────── 100 (cqw)
      番号    導入・キッカー   実績ボード */
.sblk--03{
  display:grid;
  grid-template-columns:12cqw 9.68cqw 6.37cqw minmax(0,1fr);
  column-gap:0;row-gap:0;
  align-items:end;
  margin-top:6.8cqw;
}
.sblk--03 .sblk__no{grid-column:1;grid-row:1}
.sblk__intro{
  grid-column:3/-1;grid-row:1;align-self:end;margin-bottom:.45em;
  font-size:max(13.5px,2.22cqw);line-height:1.5;font-weight:500;
}
.sblk__intro span{display:block}
/* キッカーは採用デザインより上へ詰めて、03の下端(ベースライン)の高さに寄せる。
   これ以上は上の導入文に当たるので、導入文との間隔を20px相当(1.67cqw)残す位置が上限。
   下の見出しを動かさないよう、詰めた分(1.58cqw)は見出しのmargin-topへ振り替える */
.sblk__kicker{
  grid-column:3/-1;grid-row:2;margin-top:-.68cqw;
  font-size:max(12.5px,1.51cqw);font-weight:900;letter-spacing:.02em;
  color:var(--str-or-t);
}
.sblk__h--lead{
  grid-column:1/-1;grid-row:3;margin-top:1.78cqw;
  font-size:max(22px,4.76cqw);line-height:1.2;letter-spacing:-.02em;
  text-wrap:balance;
}
/* 「Amazon専門」だけ一段大きく、下に太めの筆線 */
.sblk__h--lead em{
  font-size:1.12em;
  background:var(--brush) no-repeat 0 100%/100% .36em;
  padding-bottom:.2em;
}

/* 実績数と実績ボード。左カラム+列間で版面の29%、ボードが71% */
.sblk__proof{
  grid-column:1/4;grid-row:4;align-self:start;
  margin-top:7.1cqw;
  width:24.1cqw;
}
.proof__label{
  font-size:max(12px,1.84cqw);font-weight:900;letter-spacing:.04em;
  padding-bottom:.55em;border-bottom:1.5px solid var(--str-rule);
}
.proof__num{
  display:flex;align-items:baseline;flex-wrap:nowrap;white-space:nowrap;
  margin-top:1.5cqw;
  font-family:var(--sans);font-weight:900;color:var(--ink);
  font-size:max(40px,6.5cqw);line-height:1;letter-spacing:-.04em;
}
.proof__num b{
  font-family:var(--num);font-weight:700;letter-spacing:.01em;
  background-image:linear-gradient(90deg,#FF6E00 0%,#FF5700 48%,#FF3B6B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.proof__num span{font-size:.62em;margin-left:.1em}
.proof__num i{
  font-style:normal;font-size:1.1em;margin-left:.06em;vertical-align:.06em;
  background-image:linear-gradient(90deg,#FF6E00 0%,#FF5700 48%,#FF3B6B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.proof__cap{
  margin-top:1.5cqw;
  font-size:max(11.5px,1.42cqw);line-height:1.77;color:var(--ink2);
}
.sblk__board{grid-column:4;grid-row:4;align-self:start}
/* 支給素材(760×500)は背景透過で、A+実績ボードの可視領域は 750×500。
   枠と角丸は素材側に入っているので CSS では付けない
   (透過画像に box-shadow を掛けると、何も無い矩形の影が出てしまう)。
   左右5pxの透明余白ぶんだけネガティブマージンで削り、
   箱を「ボードそのもの」に合わせる。
   上の margin 1.6cqw は、採用デザインでボードの上端が大見出しより
   8.0cqw 下がる関係を保つためのもの(素材の余白ではない)。
   ※素材差し替え時はこの値を測り直すこと
     可視幅率 750/760=0.9868  余白 上下 0%  左右 0.66% */
.sblk__board img{
  display:block;width:72.91cqw;max-width:none;height:auto;
  margin:1.6cqw -.48cqw 0;
}

/* =========================================================
   結論(濃紺パネル)
   旧 .stmt「売れる × 伝える」を吸収したもの
   ========================================================= */
.sconc{
  margin-top:4.1cqw;
  background:var(--str-navy);border-radius:4px;
  padding:2.1cqw 2.5cqw 3.6cqw;
  text-align:center;color:#F7F2E9;
}
.sconc__lead{
  font-family:var(--sans);font-weight:900;color:var(--str-or);
  font-size:max(14px,3.16cqw);line-height:1.5;letter-spacing:.01em;
}
.sconc__mid{
  margin-top:1.2cqw;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1.2cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(20px,5.28cqw);line-height:1.25;letter-spacing:-.01em;
}
.sconc__chip{
  display:inline-flex;align-items:center;gap:.29em;
  background:#FBF7EF;
  padding:.1em .5em .14em .42em;
}
.sconc__chip span{
  background-image:linear-gradient(90deg,#FF6E00 0%,#FF5700 48%,#FF3B6B 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.sconc__ck{width:.62em;height:.62em;flex:none}
/* 「ことに」「した」は本文級数、「特化」だけ大きい(採用デザインの実測) */
.sconc__j{font-weight:900;font-size:.6em}
.sconc__ring{position:relative;display:inline-block;margin:0 .34em;font-size:1.75em;color:#FFF}
.sconc__ringline{
  position:absolute;left:-.52em;top:-.46em;
  /* img,svg の共通 max-width:100% が効くと丸が1文字ぶんに縮む */
  width:calc(100% + 1.04em);max-width:none;height:calc(100% + .92em);
  color:var(--str-or);pointer-events:none;
}
.sconc__big{
  position:relative;display:inline-block;
  margin-top:1.5cqw;
  font-family:var(--sans);font-weight:900;color:#F7F2E9;
  font-size:max(24px,6.42cqw);line-height:1.25;letter-spacing:-.03em;
  text-wrap:balance;
}
/* 大文字の下に引く筆線。採用デザインでは行の左半分だけを走る */
.sconc__big::after{
  content:"";position:absolute;left:-1cqw;bottom:-1.5cqw;
  width:53%;height:1.85cqw;min-height:9px;
  background:var(--brush-o) no-repeat 0 0/100% 100%;
}

/* ---------- タブレット(1カラムへ) ---------- */
@media (max-width:899px){
  .strength{padding-top:clamp(40px,6vw,56px);padding-bottom:clamp(38px,5vw,48px)}
  .strength__title{font-size:clamp(25px,4.6vw,38px)}
  .strength__lead{font-size:clamp(14px,2vw,17px);margin-top:14px}
  .strength__eyebrow{font-size:13px}

  .sblk--01,.sblk--02{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,34px);margin-top:clamp(34px,5vw,48px)}
  /* SPは「文章 → 画像」の順(README のSP構成) */
  .sblk--01 .sblk__media{order:2}
  .sblk--01 .sblk__body{order:1}
  /* 1カラムでもSP素材(670×500・可視 550×394)の透明余白を削り、
     機器が版面いっぱいに出るようにする。余白 上下10.60% / 左右8.96% */
  .sblk__media--devices img{width:121.8%;margin:-9.64% -10.91%}
  .sblk--02::before{display:none}
  .sblk__no{font-size:clamp(45px,7.8vw,68px)}
  .sblk__tag{font-size:clamp(14px,2.1vw,18px)}
  .sblk__h{font-size:clamp(21px,3.6vw,30px);margin-top:16px}
  .sblk__p{font-size:clamp(13.5px,1.9vw,16px);margin-top:14px;line-height:1.95}
  .sblk__body{column-gap:16px}

  /* コラージュはデザイン(SP)どおり、右上に大・左下と右下に2枚 */
  .sblk__collage{aspect-ratio:670/430}
  .sblk__ph--design{left:38%;top:0;   width:62%;height:66%}
  .sblk__ph--shoot {left:0;   top:36%; width:54%;height:64%}
  .sblk__ph--meet  {left:50%; top:52%; width:50%;height:48%}
  .sblk__ph--design img{object-position:80% 50%}
  .sblk__ph--meet img{object-position:50% 45%}
  /* SPでは枠が横長になるので、PCの寄り(x200-560)のままだと机とヘルメットの
     下が切れる。左右2灯からテーブルまでが収まる x86-683 / y46-500 に切り替える */
  .sblk__ph--shoot img{width:134%;height:auto;left:-14.4%;top:-10.13%}

  .ptasks{margin-top:clamp(34px,5vw,48px)}
  .ptasks__title{font-size:clamp(19px,3.2vw,26px)}
  .ptasks__title::after{width:clamp(120px,16vw,170px)}
  /* 5工程は横長の5行へ。番号・アイコン・見出し・説明を一列に並べる
     アイコン列は 40px 固定。auto だと SVG の見た目幅で見出しがガタつく */
  .ptasks__list{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
  .ptask{
    display:grid;
    grid-template-columns:auto 40px 7.6em minmax(0,1fr);
    align-items:center;column-gap:clamp(10px,2.4vw,20px);
    text-align:left;padding:12px 16px 12px 0;
  }
  .ptask__no{
    position:static;transform:none;min-width:0;
    align-self:stretch;display:flex;align-items:center;
    padding:0 clamp(10px,2.6vw,16px);font-size:15px;
  }
  .ptask__ic{width:40px;height:40px;min-width:40px;min-height:0;max-width:none}
  .ptask__t{margin-top:0;font-size:clamp(15px,3.6vw,19px);min-width:7.6em}
  .ptask__d{margin-top:0;font-size:clamp(11.5px,2.9vw,14px);line-height:1.65}
  .ptask__d span{display:inline}
  .ptask+.ptask::before{display:none}

  /* 03 は1カラム。実績数とボードを縦に積む */
  .sblk--03{grid-template-columns:auto minmax(0,1fr);margin-top:clamp(34px,5vw,48px);column-gap:16px}
  .sblk__intro{grid-column:2}
  .sblk__kicker{grid-column:1/-1;grid-row:auto}
  .sblk__h--lead{grid-row:auto}
  .sblk__intro{font-size:clamp(13.5px,2vw,17px)}
  .sblk__kicker{font-size:clamp(12.5px,1.7vw,15px);margin-top:18px}
  .sblk__h--lead{font-size:clamp(22px,4.2vw,34px);margin-top:12px}
  .sblk__proof{grid-column:1/-1;grid-row:auto;width:100%;margin-top:24px}
  .proof__label{font-size:clamp(13px,2vw,17px);max-width:min(100%,320px)}
  .proof__num{font-size:clamp(44px,12vw,72px);margin-top:10px}
  .proof__cap{font-size:clamp(12px,1.9vw,15px);margin-top:12px;word-break:auto-phrase}
  .sblk__board{grid-column:1/-1;grid-row:auto;margin-top:clamp(18px,3vw,26px)}
  /* SP素材(670×720・可視 660×660)。余白 上下30px / 左右5px */
  .sblk__board img{width:101.52%;margin:-4.55% -.76%}

  .sconc{margin-top:clamp(34px,5vw,48px);padding:clamp(24px,3.4vw,34px) clamp(18px,3vw,30px) clamp(28px,4vw,38px)}
  .sconc__lead{font-size:clamp(14px,2.4vw,21px)}
  /* SPは1行に収める。狭い幅(375px前後)で「ことに特化した」が落ちないよう、
     20px床は外し、チップと語の間隔も詰める */
  .sconc__mid{font-size:clamp(18px,4.6vw,34px);gap:clamp(6px,1vw,10px);margin-top:12px}
  .sconc__chip{padding:.14em .5em .18em .42em}
  .sconc__big{font-size:clamp(20px,5.4vw,40px);margin-top:18px;line-height:1.3;text-wrap:initial}
  /* 筆線は大文字の直下に入るよう、位置と高さをSP向けに掛け直す */
  .sconc__big::after{bottom:-12px;left:0;height:10px;min-height:10px;width:52%}
}

/* ---------- スマートフォン ---------- */
@media (max-width:640px){
  .strength{padding-left:16px;padding-right:16px}
  .sblk__body{column-gap:12px}
  .sblk__no{font-size:clamp(40px,11.3vw,54px)}
  .sblk__h{font-size:clamp(19px,5.2vw,25px);line-height:1.6}
  .ptask{
    grid-template-columns:40px 40px minmax(0,1fr);
    column-gap:10px;row-gap:2px;padding:11px 14px 11px 3px;
  }
  .ptask__ic{grid-row:1 / span 2;justify-self:center}
  .ptask__t{grid-column:3;min-width:0}
  .ptask__d{grid-column:3;font-size:12px}
  .sblk__intro{font-size:13px;line-height:1.75;word-break:auto-phrase}
  .sblk__h--lead{font-size:clamp(20px,5.4vw,26px);word-break:auto-phrase}
}

/* =========================================================
   制作サンプル(案5)+ 伝わる20秒(濃紺の床)
   採用デザイン:
     PC docs/html/claude/design-proposals/samples/final-05/
        samples-web-05-cinema-20sec-pc-selected.png
     SP samples-web-05-cinema-20sec-sp.png(750px幅)
   ・地は 01/02 と同じ生成り。境目をつくらず一枚の面として続ける。
   ・影は使わない。奥行きは面の明度と自前の色の枠だけで出す。
   ・角丸は 2〜4px まで。丸ピルは作らない(円は再生ボタンだけ)。
   ・アイコンは素のまま。タイルもチップも敷かない。
   ・寸法はすべて .smp__in / .sec20__in 幅基準の cqw。
   ========================================================= */

.smp{
  --gut:clamp(20px,4vw,40px);   /* 直上の .strength と同じ左右余白 */
  --smp-or:#F09C12;
  --smp-or-t:#F09C12;          /* 生成りの上に乗る文字 */
  --smp-navy:#0A1C32;
  --smp-rule:rgba(33,28,22,.20);
  --smp-line:rgba(33,28,22,.30);
  --smp-edge:rgba(33,28,22,.16);
  position:relative;
  background:#F9F4EC;
  /* 下は問い合わせ帯へ渡すだけなので詰める(索引と帯が離れて見えないように) */
  padding:clamp(16px,2.2vw,32px) var(--gut) clamp(24px,2.8vw,42px);
  overflow:hidden;
}
.smp::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.08;pointer-events:none}
.smp__in{position:relative;z-index:1;max-width:1200px;margin:0 auto;container-type:inline-size}

/* 日本語は語の途中で折らない。狭い幅ほど効く(.strength と同じ扱い) */
.smp__head h2,.smp__count,.arch__hint,.arch__name,
.vp__capitem b,.vp__capitem span,.vp__pickbtn span,
.sec20__l1,.sec20__l2,.sec20__lead,.cuts__hint,
.sec20__specs b,.sec20__specs p{word-break:auto-phrase}

/* ---------- 見出し ---------- */
.smp__head{text-align:center}
.smp__head h2{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(24px,3.35cqw,41px);line-height:1.42;letter-spacing:-.025em;
  text-wrap:balance;
}
.smp__count{margin-top:clamp(12px,1.4cqw,18px);font-size:clamp(13px,1.32cqw,16px);color:var(--ink2)}
.smp__count b{font-weight:900;font-size:1.14em;color:var(--smp-or-t)}
.smp__count i{color:rgba(33,28,22,.32);margin:0 .1em}

/* ---------- 小見出し(ラベル+版面いっぱいの罫) ---------- */
.smp__k{
  display:flex;align-items:center;gap:clamp(10px,1.2cqw,16px);
  margin:clamp(36px,4.4cqw,62px) 0 clamp(16px,1.9cqw,26px);
  font-family:var(--sans);font-weight:900;
  font-size:clamp(14px,1.42cqw,17px);letter-spacing:.01em;color:var(--ink2);
}
.smp__k::after{content:"";flex:1;height:2px;border-radius:1px;background:var(--smp-rule)}

/* =========================================================
   完全画像モジュール(4点のアーカイブ)
   PC: 4点を並べ、選択中の1点だけ背を高くする
   SP: 指で送る棚。次のカードが半分見えることで送れると分かる
   ========================================================= */
/* 背の高さが違っても、名前は一本の線に揃える(棚に立てて並べる) */
.arch__rail{display:flex;align-items:flex-end;justify-content:center;gap:2.4cqw}
.arch__item{
  /* 4点+3つの間隔で 20.8*3 + 29.4 + 2.4*3 = 99cqw。
     選択中カードの2pxの枠が版面から出ないよう、1cqw残してある。
     大型スロットは常に左端(order=選択からの循環距離。JSが与える)。
     幅の変化は FLIP(script.js)が transform で受けるので transition は持たない。 */
  flex:0 0 20.8cqw;min-width:0;
}
.arch__item.is-on{flex-basis:29.4cqw}
/* FLIP の飛行中。回り込む1枚(.is-back)は他のカードの下をくぐり、
   一度だけ薄くなって戻る(スライド+クロスフェード)。 */
.arch__item.is-flip{position:relative;z-index:1}
.arch__item.is-back{z-index:0;animation:archTuck .46s cubic-bezier(.22,.7,.3,1)}
@keyframes archTuck{0%,100%{opacity:1}45%{opacity:.35}}
.arch__card{
  display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:zoom-in;
}
.arch__card .zoombox{
  display:block;position:relative;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px var(--smp-edge) inset;
  transition:box-shadow .35s;
}
.arch__card img{display:block;width:100%;height:auto}
.arch__item.is-on .arch__card .zoombox{box-shadow:0 0 0 2px var(--smp-or)}
.arch__card:focus-visible{outline:2px solid var(--smp-navy);outline-offset:4px;border-radius:5px}
.arch__name{
  margin-top:clamp(9px,1cqw,14px);text-align:center;
  font-size:clamp(11.5px,1.15cqw,13.5px);font-weight:700;color:var(--ink3);
  transition:color .35s;
}
.arch__item.is-on .arch__name{color:var(--ink);font-weight:900}
.arch__hint{display:none}

/* ---- 操作行 ---- */
.arch__foot{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(12px,1.6cqw,22px);
  margin-top:clamp(20px,2.4cqw,32px);
}
.arch__zoom{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  background:var(--smp-navy);color:#F9F4EC;border:0;border-radius:3px;
  padding:0 clamp(20px,2.4cqw,34px);height:clamp(44px,4.4cqw,54px);
  font-family:inherit;font-weight:900;font-size:clamp(13.5px,1.32cqw,15.5px);
  cursor:pointer;transition:background .25s;
}
.arch__zoom .ic{width:1.25em;height:1.25em}
.arch__zoom:hover{background:#14355d}
.arch__zoom:focus-visible{outline:2px solid var(--smp-navy);outline-offset:3px}
.arch__pager{display:flex;gap:clamp(8px,1cqw,14px)}
.arch__pg{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:none;border:1px solid var(--smp-line);border-radius:3px;
  padding:0 clamp(16px,1.9cqw,26px);height:clamp(44px,4.4cqw,54px);
  font-family:inherit;font-weight:700;font-size:clamp(13px,1.28cqw,15px);color:var(--ink);
  cursor:pointer;transition:border-color .25s,background .25s,opacity .25s;
}
.arch__pg .ic{width:1.05em;height:1.05em;transition:transform .25s}
.arch__pg--prev .ic{transform:scaleX(-1)}
.arch__pg:hover:not(:disabled){border-color:var(--smp-navy);background:rgba(255,255,255,.6)}
.arch__pg:hover:not(:disabled) .ic{transform:translateX(3px)}
.arch__pg--prev:hover:not(:disabled) .ic{transform:scaleX(-1) translateX(3px)}
.arch__pg:disabled{opacity:.45;cursor:default}
.arch__pg:focus-visible{outline:2px solid var(--smp-navy);outline-offset:3px}

/* ---- 何点目か ---- */
.arch__prog{margin-top:clamp(18px,2.1cqw,28px)}
.arch__bar{height:2px;border-radius:1px;background:var(--smp-rule);overflow:hidden}
.arch__bar i{
  display:block;height:100%;width:25%;border-radius:1px;background:var(--smp-or);
  transition:width .5s cubic-bezier(.22,.7,.3,1);
}
.arch__count{
  margin-top:10px;font-size:clamp(11px,1.1cqw,13px);color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.arch__count b{font-weight:900;color:var(--ink)}

/* =========================================================
   完全動画モジュール
   ========================================================= */
.vp__stage{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:4px;background:#E9E1D4;
  box-shadow:0 0 0 1px rgba(33,28,22,.24) inset;
}
.vp__set{display:none;position:absolute;inset:0}
.vp[data-set="helmet"] .vp__set[data-s="helmet"],
.vp[data-set="nui"] .vp__set[data-s="nui"]{display:block}
.vp__frame{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease;
}
.vp__frame.is-on{opacity:1}

/* 再生ボタンは、絵柄に関係なく常にステージの幾何学的中心 */
.vp__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:3;display:grid;place-items:center;
  width:clamp(54px,8.4cqw,104px);aspect-ratio:1;
  border:0;border-radius:50%;background:var(--smp-navy);color:#fff;
  cursor:pointer;transition:background .25s;
}
/* 三角形は #i-tri の字形そのものが右寄りに描かれている(bbox中心が
   ビューボックス中心より 2.2/24 右)。それが視覚的な右寄せぶんなので、
   ここでは箱を素直に中央へ置くだけでよい。足すと寄りすぎる。 */
.vp__play .ic{width:40%;height:40%}
.vp__ic--pause{display:none}
.vp__play:hover{background:#14355d}
.vp__play:focus-visible{outline:3px solid var(--smp-or);outline-offset:3px}
.vp__playtx{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 再生中は絵の邪魔をしないよう消すが、消えたまま操作不能にはしない。
   ステージに触れる・キーボードで来る、のどちらでも一時停止として戻ってくる。 */
.vp.is-playing .vp__play{opacity:0;transition:opacity .3s}
.vp.is-playing .vp__stage:hover .vp__play,
.vp.is-playing .vp__play:focus-visible,
.vp.is-paused .vp__play{opacity:1}
.vp.is-playing .vp__ic--play{display:none}
.vp.is-playing .vp__ic--pause{display:block}
.vp.is-paused .vp__ic--play{display:block}
.vp.is-paused .vp__ic--pause{display:none}

.vp__hud{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:12px;
  padding:26px clamp(12px,1.4cqw,18px) clamp(10px,1.1cqw,14px);
  background:linear-gradient(180deg,rgba(10,28,50,0),rgba(10,28,50,.28) 42%,rgba(10,28,50,.74));
  opacity:0;transition:opacity .3s;
}
.vp.is-playing .vp__hud,.vp.is-paused .vp__hud{opacity:1}
.vp__hudbar{flex:1;height:3px;border-radius:2px;background:rgba(249,244,236,.34);overflow:hidden}
.vp__hudbar i{display:block;height:100%;width:0;background:var(--smp-or);border-radius:2px}
/* 明るい絵の上でも数字が読めるよう、地の暗さと影の両方で支える */
.vp__hudtime{
  font-size:clamp(10px,1cqw,12px);font-weight:700;color:#F9F4EC;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(10,28,50,.8);
}

/* ---- 場面のことば(生成りの面に置く。絵柄の上には重ねない) ---- */
.vp__cap{
  display:flex;align-items:flex-start;gap:clamp(14px,1.8cqw,26px);
  margin-top:clamp(12px,1.4cqw,18px);
  background:#fff;border:1px solid var(--smp-edge);border-radius:4px;
  padding:clamp(14px,1.7cqw,22px) clamp(16px,1.9cqw,26px);
}
.vp__capset{display:none;flex:1;min-width:0}
.vp[data-set="helmet"] .vp__capset[data-s="helmet"],
.vp[data-set="nui"] .vp__capset[data-s="nui"]{display:block}
.vp__capitem{display:none}
.vp__capitem.is-on{display:block}
.vp__capitem b{
  display:block;font-weight:900;line-height:1.55;letter-spacing:-.01em;
  font-size:clamp(15px,1.62cqw,20px);
}
.vp__capitem span{
  display:block;margin-top:7px;line-height:1.85;color:var(--ink3);
  font-size:clamp(12px,1.2cqw,14px);
}
.vp__no{
  flex:none;white-space:nowrap;letter-spacing:.05em;
  font-size:clamp(12px,1.2cqw,14.5px);color:var(--ink3);
  font-variant-numeric:tabular-nums;line-height:1.9;
}
.vp__no b{font-weight:900;font-size:1.32em;color:var(--smp-or-t)}

/* ---- 5区間の時間軸 ---- */
.vp__tl{position:relative;margin-top:clamp(22px,2.6cqw,34px)}
.vp__track{
  position:absolute;left:0;right:0;top:4px;height:2px;
  border-radius:1px;background:rgba(10,28,50,.22);
}
.vp__track i{
  display:block;height:100%;width:var(--p,0%);border-radius:1px;
  background:var(--smp-or);transition:width .18s linear;
}
/* 5つの目盛りは軸上で等間隔(0/25/50/75/100%)。
   5等分のグリッドだと列の中心は 10/30/50/70/90% になってしまうので、
   各項目を (25i-50)% ずらして中心を軸の位置へ合わせる。
   両端だけはずらさず、文字を内側へ寄せて版面から出さない。 */
.vp__beats{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.vp__beats li{
  position:relative;text-align:center;padding-top:22px;min-width:0;
  transform:translateX(calc(var(--i,2) * 25% - 50%));
}
.vp__beats li:first-child{transform:none;text-align:left}
.vp__beats li:last-child{transform:none;text-align:right}
.vp__dot{
  position:absolute;top:0;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:var(--smp-navy);
  transition:background .3s;
}
/* 両端の点は軸の端に「中心を」合わせる(半径ぶん外へ出る) */
.vp__beats li:first-child .vp__dot{left:0}
.vp__beats li:last-child .vp__dot{left:auto;right:0;margin-left:0;margin-right:-5px}
.vp__beats li.is-on .vp__dot{background:var(--smp-or)}
.vp__beats b{
  display:block;font-weight:500;color:var(--ink3);
  font-size:clamp(10.5px,1.06cqw,12.5px);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;transition:color .3s;
}
.vp__beats i{
  display:block;margin-top:3px;font-weight:900;color:var(--ink);
  font-size:clamp(11px,1.16cqw,14px);line-height:1.5;transition:color .3s;
}
.vp__beats li.is-on b,.vp__beats li.is-on i{color:var(--smp-or-t)}

/* ---- 2案件の切り替え ---- */
.vp__pick{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2cqw,16px);margin-top:clamp(22px,2.6cqw,34px)}
.vp__pickbtn{
  display:flex;align-items:center;gap:clamp(11px,1.3cqw,18px);
  background:#fff;border:1px solid var(--smp-line);border-radius:4px;
  padding:clamp(7px,.85cqw,11px);padding-right:clamp(14px,1.6cqw,22px);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.vp__pickbtn img{
  flex:none;width:clamp(72px,8cqw,104px);height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:2px;
}
.vp__pickbtn span{font-weight:900;font-size:clamp(13.5px,1.4cqw,17px);letter-spacing:-.01em}
.vp__pickbtn .ic{margin-left:auto;width:1.05em;height:1.05em;color:var(--ink2);transition:transform .25s}
.vp__pickbtn:hover{border-color:var(--smp-navy)}
.vp__pickbtn:hover .ic{transform:translateX(3px)}
.vp__pickbtn.is-on{border-color:var(--smp-or);background:#FDF5EB}
.vp__pickbtn:focus-visible{outline:2px solid var(--smp-navy);outline-offset:3px}

/* =========================================================
   制作実績カテゴリー(5段の索引。段の間は罫で仕切る)
   ========================================================= */
.smp__cats{
  columns:5;column-gap:clamp(18px,2.6cqw,40px);
  column-rule:1px solid var(--smp-rule);
}
.smp__cats li{
  break-inside:avoid;
  font-size:clamp(12.5px,1.24cqw,15px);color:var(--ink2);line-height:2.2;
}

/* =========================================================
   「A+とは」のオレンジ帯を、ここでもう一度
   ・使うのは「帯」だけ。数字は A+とは のほうに置いたままにして、
     ここは濃紺の床から制作実績カテゴリーへ渡すひとことを載せる。
   ・紙目と色は FV の斜め帯と同じ band-paper-bright.webp / #FA9609。
     以前は問い合わせ帯(#E06300)へ寄せた deep 版だったが、FV と同じ明るさに揃えた。
   ・傾きは浅く。斜めに切るぶん上下に生成りの三角が残るので、角度を立てると
     「帯を入れたのに余白が増える」ことになる。ここは版面を横切る一本の線として
     読ませたいので、A+とは の帯(.231)の1/4以下まで寝かせている。
   ・上辺だけ斜めに切る。上は濃紺へ食い込ませて足元を削ぎ、下は水平に着地させる
     (A+とは の帯と同じ作り)。下も斜めにすると生成りの三角が残り、
     そのぶんカテゴリー索引が下がってしまう。
   ========================================================= */
.smpstat-wrap{
  position:relative;z-index:1;
  /* 濃紺の締めのことばを引き受けたので、間を空けずに置く。
     さらに斜線1本ぶん(--rise)だけ上へ食い込ませて、上辺の切り口の向こう側を
     生成りではなく濃紺にする。三角の生成りが残らず、帯が濃紺を削ぐ形になる。
     ※ margin は下の .smpstat 側に置く(--rise が cqw = .smpstat-wrap 幅基準のため) */
  margin:0 calc(-1 * var(--gut)) 0;
  container-type:inline-size;
}
.smpstat{
  --s:.05;
  --rise:calc(var(--s) * 100cqw);
  position:relative;
  margin-top:calc(-1 * var(--rise));
  background:#FA9609 url("assets/hero/band/band-paper-bright.webp") repeat;
  background-size:590px 170px;
  clip-path:polygon(0 0, 100% var(--rise), 100% 100%, 0 100%);
  /* 上は斜めの切り口に文字が食われないよう逃がす。下は水平なので詰めてよい */
  padding:calc(var(--rise) * .82 + clamp(18px,2vw,32px)) clamp(20px,4vw,40px)
          clamp(26px,2.8vw,46px);
  text-align:center;
}
.smpstat>*{position:relative;z-index:1}
/* 二色は A+とは の帯と同じ組み方。地に沈む墨と、抜けてくる生成り。
   1行目に工程、2行目に約束。約束のほうを抜いて前へ出す。 */
.smpstat__big{
  font-family:var(--sans);font-weight:900;font-feature-settings:"palt";
  font-size:clamp(17px,2.35cqw,34px);line-height:1.55;letter-spacing:-.02em;
  color:var(--ink);word-break:auto-phrase;
}
.smpstat__big em{
  display:block;margin-top:.2em;font-style:normal;color:#FBF6EE;
  font-size:.94em;
}
/* 帯の下辺は水平。索引はそのすぐ下から始める */
.smp__in--tail{margin-top:0}
.smp__in--tail .smp__k:first-child{margin-top:clamp(20px,2.4cqw,34px)}

/* =========================================================
   問い合わせ(オレンジの帯)
   ・地はアクセントの「ベタ塗り版」。文字はすべて白。
   ・3つの区画を細い縦罫で仕切る。罫は帯の高さいっぱいには引かない。
   ・アイコンは素の線。丸はフォームの矢印だけ(これは飾りではなく操作の印)。
   ========================================================= */
/* 濃紺の床のあと、生成りの面に置く。cqw の基準は .askband-in。 */
.askband-wrap{
  --gut:clamp(20px,4vw,40px);
  padding:clamp(24px,2.8vw,42px) var(--gut) clamp(24px,3vw,40px);
}
.askband-in{max-width:1200px;margin:0 auto;container-type:inline-size}
.askband{
  --ask-bg:#FA9609;
  background:var(--ask-bg);color:#FFF;border-radius:3px;
  display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  padding:clamp(20px,2.5cqw,32px) clamp(14px,1.8cqw,26px);
}
.askband__lead{
  text-align:center;letter-spacing:-.01em;
  font-weight:900;font-size:clamp(14.5px,1.75cqw,22px);line-height:1.6;
}
.askband__item{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(11px,1.85cqw,26px);color:inherit;
  padding:2px 0;border-radius:3px;
}
/* 仕切り */
.askband>*+*::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:clamp(56px,7.6cqw,96px);border-radius:.5px;
  background:rgba(255,255,255,.28);
}
.askband__lead+.askband__item::before,
.askband__item+.askband__item::before{left:calc(-1 * clamp(7px,.9cqw,13px))}

.askband__ic{
  flex:none;width:clamp(32px,4.6cqw,58px);height:clamp(32px,4.6cqw,58px);
  color:#FFF;
}
/* #i-mail は箱の中で封筒が7割ほどなので、見た目を揃えるぶん箱を大きく取る */
.askband__ic--mail{width:clamp(37px,5.4cqw,68px);height:clamp(37px,5.4cqw,68px)}

.askband__body{display:block}
.askband__body small{
  display:block;font-weight:700;line-height:1.6;letter-spacing:.01em;
  font-size:clamp(12px,1.15cqw,14.5px);
}
.askband__tel{
  display:block;margin-top:2px;
  font-family:var(--num);font-weight:600;line-height:1.15;letter-spacing:.005em;
  font-size:clamp(23px,3.05cqw,39px);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.askband__body i{
  display:block;margin-top:4px;font-weight:500;line-height:1.55;
  font-size:clamp(11px,1.05cqw,13.5px);
}
.askband__go{
  display:flex;align-items:center;gap:clamp(8px,1.05cqw,15px);
  margin-top:3px;font-weight:900;letter-spacing:-.01em;line-height:1.45;
  font-size:clamp(14px,1.8cqw,23px);
  /* 矢印だけが次の行に落ちると操作の印に見えなくなるので、ここは折らない */
  white-space:nowrap;
}
.askband__arrow{
  flex:none;display:grid;place-items:center;
  width:clamp(21px,2.05cqw,27px);aspect-ratio:1;border-radius:50%;
  background:#FFF;color:var(--ask-bg);
}
.askband__arrow .ic{width:60%;height:60%;transition:transform .25s}
.askband__item:hover .askband__arrow .ic{transform:translateX(2px)}
.askband__item:focus-visible{outline:2px solid #FFF;outline-offset:4px}

/* =========================================================
   伝わる20秒(濃紺の床)
   生成りの面から硬い一本の境目で濃紺へ落とす。ここだけは意図した段差。
   ========================================================= */
.sec20{
  --gut:clamp(20px,4vw,40px);
  --s20-cream:#F4EFE6;
  --s20-body:#C3CDD8;
  --s20-or:#F09C12;
  background:#0A1C32;color:var(--s20-cream);
  padding:clamp(46px,5.6vw,84px) var(--gut) clamp(44px,5vw,72px);
}
.sec20__in{max-width:1200px;margin:0 auto;container-type:inline-size}

/* 制作サンプルの中に落とす版。完全動画モジュールのすぐ下に置きたいので、
   セクションの左右余白ぶんだけ外へ出して版面いっぱいの床にする。
   (.smp は overflow:hidden なので、はみ出しはそこで止まる) */
.sec20--in{
  position:relative;z-index:1;
  margin:clamp(30px,3.4vw,56px) calc(-1 * var(--gut)) 0;
  padding-top:clamp(40px,4.8vw,72px);
  /* 下辺はオレンジ帯が食い込んでくる。仕様3点が削られないよう、そのぶん空ける */
  padding-bottom:calc(clamp(38px,4.4vw,64px) + clamp(16px,1.9vw,30px));
}

/* ---- 20sec と見出し ---- */
.sec20__head{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(16px,2.6cqw,40px);align-items:center;
}
.sec20__mark{grid-row:1/3;align-self:center}
.sec20__h,.sec20__lead{grid-column:2}
.sec20__mark{
  display:flex;align-items:flex-end;
  font-family:var(--num);font-weight:700;line-height:.8;
  font-size:clamp(76px,12.6cqw,164px);letter-spacing:-.03em;
  color:var(--s20-cream);
}
.sec20__mark b{position:relative;font-weight:700}
/* 数字の中に、生成りの面と同じ紙の粒子を通す */
.sec20__mark b::after{
  content:"20";position:absolute;inset:0;
  background-image:var(--grain);background-size:110px;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.6;mix-blend-mode:multiply;pointer-events:none;
}
.sec20__mark i{
  font-size:.215em;font-weight:600;letter-spacing:.01em;
  margin-left:.06em;margin-bottom:.1em;
}
.sec20__h{font-family:var(--sans);font-weight:900;letter-spacing:-.025em}
.sec20__l1{display:block;font-size:clamp(17px,2.05cqw,27px);line-height:1.5}
.sec20__l2{display:block;margin-top:.24em;font-size:clamp(19px,2.35cqw,31px);line-height:1.45}
.sec20__l2 em{font-size:1.36em;color:var(--s20-or);letter-spacing:-.03em}
.sec20__lead{
  margin-top:clamp(12px,1.4cqw,18px);color:var(--s20-body);line-height:1.9;
  font-size:clamp(12.5px,1.24cqw,15px);
}

/* ---- 5つのカット ---- */
.cuts{margin-top:clamp(32px,4.2cqw,58px)}
.cuts__rail{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,.85cqw,12px)}
.cuts__rail figcaption{
  margin-bottom:clamp(7px,.85cqw,11px);text-align:center;
  font-size:clamp(10px,1cqw,12px);font-weight:700;color:rgba(244,239,230,.74);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cuts__rail figcaption i{
  display:inline-block;width:1px;height:.95em;vertical-align:-.13em;
  margin:0 .55em;background:currentColor;opacity:.42;
}
.cuts__ph{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;
  box-shadow:0 0 0 1px rgba(244,239,230,.32) inset;
}
.cuts__ph img{width:100%;height:100%;object-fit:cover}
.cuts__hint{display:none}

.cuts__axis{position:relative;margin-top:clamp(18px,2.2cqw,30px)}
.cuts__track{position:absolute;left:0;right:0;top:4px;height:2px;border-radius:1px;background:rgba(244,239,236,.28)}
.cuts__track i{display:block;height:100%;width:100%;border-radius:1px;background:var(--s20-or)}
.cuts__ticks{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.cuts__ticks li{
  position:relative;text-align:center;padding-top:22px;
  font-size:clamp(10.5px,1.06cqw,12.5px);font-weight:700;color:var(--s20-body);
  font-variant-numeric:tabular-nums;
  transform:translateX(calc(var(--i,2) * 25% - 50%));
}
.cuts__ticks li:first-child{transform:none;text-align:left}
.cuts__ticks li:last-child{transform:none;text-align:right}
.cuts__dot{
  position:absolute;top:0;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:var(--s20-or);
}
.cuts__ticks li:first-child .cuts__dot{left:0}
.cuts__ticks li:last-child .cuts__dot{left:auto;right:0;margin-left:0;margin-right:-5px}
.cuts__dot--end{background:var(--s20-cream)}

/* ---- 3つの仕様 ---- */
.sec20__specs{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3.2cqw,52px);margin-top:clamp(36px,4.4cqw,64px);
}
.sec20__specs li{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,1.5cqw,20px);align-items:center;
}
.sec20__specs li+li::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(-1 * clamp(10px,1.6cqw,26px));
  width:1px;background:rgba(244,239,230,.22);
}
.sec20__specs .ic{
  grid-row:1/3;align-self:center;color:var(--s20-cream);
  width:clamp(28px,3cqw,40px);height:clamp(28px,3cqw,40px);
}
.sec20__specs b{font-weight:900;font-size:clamp(14.5px,1.6cqw,19px);letter-spacing:-.01em}
.sec20__specs p{margin-top:5px;color:var(--s20-body);line-height:1.75;font-size:clamp(11.5px,1.18cqw,14px)}

/* ---- 締め ---- */

/* =========================================================
   タブレット以下
   ========================================================= */
@media (max-width:899px){
  .smp__head{text-align:left}
  .smp__head h2{font-size:clamp(23px,4.6vw,32px);line-height:1.36}
  .smp__head h2 span{display:block}
  .smp__count{font-size:clamp(12.5px,2.6vw,15px)}
  .smp__k{font-size:clamp(13.5px,2.9vw,16px);margin-top:clamp(34px,6vw,48px)}

  /* アーカイブは指で送る棚へ。次のカードが半分見える */
  .arch{margin-inline:calc(-1 * var(--gut))}
  .arch__rail{
    justify-content:flex-start;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);padding-block:2px;
    scroll-padding-left:var(--gut);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .arch__rail::-webkit-scrollbar{display:none}
  .arch__item,.arch__item.is-on{flex:0 0 min(57vw,260px);transition:none;scroll-snap-align:start}
  .arch__hint{
    display:block;margin:12px var(--gut) 0;
    font-size:12px;color:var(--ink3);
  }
  .arch__foot{justify-content:flex-start;margin-top:16px}
  .arch__zoom{flex:1 1 auto;min-width:180px}

  .vp__cap{flex-direction:column;gap:8px;padding:14px 16px}
  .vp__no{align-self:flex-start;line-height:1.4}
  .vp__beats li{padding-top:20px}
  .vp__beats b{font-size:10.5px}
  .vp__beats i{font-size:11px}
  .vp__pick{grid-template-columns:1fr;gap:9px}

  /* 段の高さが揃わないと罫が下へ余るので、900px 未満は間隔だけで分ける */
  .smp__cats{columns:3;column-gap:clamp(20px,3.4vw,34px);column-rule:none}
  .smp__cats li{font-size:13px;line-height:2.1}

  /* 帯は縦積み。仕切りは横罫へ */
  .askband{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(15px,3.2vw,22px);
    padding:clamp(20px,4vw,30px) clamp(18px,4vw,28px);
  }
  .askband__lead{text-align:left;font-size:clamp(15px,3.5vw,19px)}
  .askband__item{justify-content:flex-start;gap:clamp(12px,3.2vw,18px)}
  .askband>*+*::before,
  .askband__lead+.askband__item::before,
  .askband__item+.askband__item::before{
    left:0;right:0;top:calc(-1 * clamp(7px,1.6vw,11px));
    transform:none;width:auto;height:1px;
  }
  .askband__ic{width:34px;height:34px}
  .askband__ic--mail{width:32px;height:32px}
  .askband__body small{font-size:12.5px}
  .askband__tel{font-size:clamp(26px,7vw,34px)}
  .askband__body i{font-size:11.5px}
  .askband__go{font-size:clamp(15.5px,4.3vw,20px)}
  .askband__arrow{width:22px}

  /* --- 濃紺の床 --- */
  .sec20__head{column-gap:clamp(12px,3vw,24px);align-items:end}
  .sec20__mark{grid-row:1;font-size:clamp(74px,17vw,120px)}
  .sec20__lead{grid-column:1/-1;margin-top:clamp(14px,3.4vw,20px)}
  .sec20__l1{font-size:clamp(16px,3.4vw,22px)}
  .sec20__l2{font-size:clamp(18px,3.9vw,25px)}

  .cuts{margin-inline:calc(-1 * var(--gut))}
  .cuts__rail{
    display:flex;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gut);
    scroll-padding-left:var(--gut);
    scrollbar-width:none;
  }
  .cuts__rail::-webkit-scrollbar{display:none}
  .cuts__rail li{flex:0 0 min(34vw,150px);scroll-snap-align:start}
  .cuts__rail figcaption{font-size:10px;text-align:left}
  .cuts__hint{display:block;margin:12px var(--gut) 0;font-size:11.5px;color:var(--s20-body)}
  .cuts__axis{margin-inline:var(--gut)}

  .sec20__specs{grid-template-columns:1fr;gap:0;margin-top:clamp(30px,6vw,44px)}
  .sec20__specs li{
    position:relative;
    padding:clamp(15px,3.4vw,20px) 0;column-gap:16px;
  }
  .sec20__specs li::after{
    content:"";position:absolute;left:0;right:0;top:0;
    height:1px;border-radius:.5px;background:rgba(244,239,230,.22);
  }
  .sec20__specs li+li::before{display:none}
  .sec20__specs li{align-items:start}
  .sec20__specs .ic{width:30px;height:30px;align-self:start;margin-top:1px}
  .sec20__specs b{font-size:15px}
  .sec20__specs p{font-size:12.5px}
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media (max-width:640px){
  .smp,.sec20,.askband-wrap{--gut:16px}   /* .strength のSP余白に合わせる */
  /* 黒文字と白文字をそれぞれ1行に収める。 */
  .smpstat__big{font-size:clamp(10px,3vw,17px);white-space:nowrap}
  .smpstat__big>span,.smpstat__big em>span{display:inline}
  .arch__item,.arch__item.is-on{flex-basis:min(60vw,235px)}
  .arch__foot{gap:10px}
  .arch__zoom{min-width:0;height:46px;font-size:13.5px}
  .arch__pg{height:46px;padding:0 16px;font-size:12.5px}
  .arch__pg span{font-size:12.5px}

  .vp__capitem b{font-size:15px}
  .vp__capitem span{font-size:12px}
  .vp__beats b,.cuts__ticks li{font-size:10px}
  .vp__beats i{font-size:10.5px;line-height:1.4}

  .smp__cats{columns:2}

  .sec20__head{column-gap:10px}
  .sec20__mark{font-size:clamp(64px,19vw,96px)}
  /* 狭い幅では読点で行を分ける(成り行きに任せると「不要。」だけが残る) */
  .sec20__l1{font-size:clamp(15px,4.2vw,19px)}
  .sec20__l1>span{display:block}
  .sec20__l2{font-size:clamp(16.5px,4.8vw,22px)}
  .sec20__lead{font-size:12px}
}

/* 幅の狭い端末では、5つの区間名が隣とぶつかる。
   採用デザイン(SP)と同じところまで文字を落として間をつくる。 */
@media (max-width:430px){
  .vp__beats b{font-size:9px}
  .vp__beats i{font-size:10px;letter-spacing:-.03em}
}

@media (max-width:400px){
  .arch__foot{gap:8px;flex-wrap:nowrap}
  .arch__zoom{flex:1 1 auto;min-width:0;padding:0 12px;gap:8px}
  .arch__pg{padding:0 12px;gap:6px}
}

/* 動きを減らす設定では、送りと切り替えだけを残す */
@media (prefers-reduced-motion: reduce){
  .arch__item,.arch__card .zoombox,.vp__frame,.vp__track i,.arch__bar i{transition:none}
}

/* =========================================================
   v23: 料金表(PRICING) — 採用デザインのコーディング
   design-proposals/pricing/refined-from-03/pricing-web-03-refined-01.png

   ■ 採用デザインから直した4点(元の版のままだと崩れて見えるところ)
   1. 見出し行と表の列が別のグリッドに乗っていた。
      採用デザインではプラン名の列が x=88/590/1010、表の列が x=280/588/993 で、
      1列目だけ表の「行見出し」の上に来てしまっている。ここでは
      [行見出し][プラン1][プラン2][プラン3] のひとつのグリッドに全部を乗せ、
      アイコン・ドット・バッジ・プラン名・価格・表のセル・CTAが同じ軸で揃うようにした。
   2. 3プランの列幅が 308/405/417px とばらばらだった。等幅(それぞれ 28.533%)に。
   3. オレンジの線は1つ目のドットから表の右辺まで。採用デザインどおりで、
      表の枠に突き当たって終わる(画面の右端まで抜けているわけではない)。
   4. 3つ目のバッジが線の上に重なって、3つ目のドットを隠していた。
      バッジは2つとも線の下・プランの面の上端に統一して置き、ドットは3つ見える。
      あわせて、ブランドのAが線とバッジを斜めに切っていた重なりも解消し、
      Aは版面に入らない右上だけで完結させて右端から外へ抜くようにした。

   ■ 寸法の作り方
   採用デザインの版面(表の外枠の幅=1320px)を 100 とし、級数・間隔をその比率で
   cqw 指定している。基準コンテナは .prc__in(最大1200px)。
   例: 表のセル左右の余白は採用デザインで 29px → 29/13.2 = 2.2cqw。
   狭い画面で小さくなりすぎないよう max() で下限を置き、
   1カラムのカードへ組み替える 899px 以下は px で上書きしている。
   見出しH2だけは採用デザイン比(69px)だと前のセクション(.strength の55px)から
   浮くので、ページの見出しスケールに寄せて 5.15cqw(=62px)に落としている。

   ■ 色
   ・地は採用デザインどおり #FBF5EE。body(#F8F3EA)より半段明るいので、
     罫を引かなくても手前の面として立つ。
   ・オレンジは .strength と同じ2つだけ。面・図版・濃紺の上には明るい方、
     生成りの上に乗る小さな文字には濃い方。
   ・塗りCTAの文字は白ではなく墨。採用デザインは白だが白/オレンジは 3.2:1 しかなく、
     ボタンの文字としては読めない。墨なら 5.1:1 で、
     ページの主ボタン(ヘッダーの「無料で相談」)と同じ言語にもなる。

   ■ DOM
   プラン単位(列方向)に並べ、PCでは subgrid で3プランの行を突き合わせている。
   SP では article がそのままカードになるので、同じ内容を2度書かなくて済む。
   表の行見出しは左端の列(装飾・aria-hidden)と各プランの dt(PCでは視覚的に隠す)の
   二重持ちで、読み上げは常に dt 側が担当する。
   ========================================================= */

.prc{
  --prc-bg:#FBF5EE;
  --prc-tint:#FCF2DE;              /* おすすめプランの面 */
  --prc-panel:#FBEED6;             /* 登録代行パネル */
  --prc-card:#FFFDF8;              /* SPカードの面 */
  --prc-navy:#0A1C32;
  --prc-or:#F09C12;                /* 面・図版・濃紺の上の文字 */
  --prc-or-t:#F09C12;              /* 生成りの上に乗る文字 */
  --prc-or-d:#E08A00;              /* 同・小さい文字用の一段深いステップ */
  --prc-line:rgba(10,28,50,.62);   /* 表の罫 */
  --gut:clamp(20px,4vw,40px);
  position:relative;
  background:var(--prc-bg);
  /* 上の余白はAの置き場も兼ねる。極端に詰めるとAが見出しに被る */
  padding:clamp(28px,3.6vw,52px) var(--gut) clamp(24px,3vw,44px);
  overflow:hidden;                 /* Aを右端で切る。本文は版面の中なので触れない */
}
.prc::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.08;pointer-events:none;
}
.prc__in{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;
  container-type:inline-size;      /* 以下の cqw はすべてこの幅が基準 */
}

/* ---------- 右上の装飾 ----------
   Aはヒーローのキービジュアルと同じブランドの字形。表の高さの半分まで下ろし、
   おすすめプランの面(不透明)の裏へ潜らせている。面から右にはみ出した分だけが
   右の余白に見え、上半分は何もない場所なので全部見える、という重なり方。

   置き方の決めごと:
   ・字形はヒーローのAの実測比(幅:高さ = 236:300)。ここを絞ると縦長すぎて字が歪む。
   ・頂点はセクション右端のさらに 45px 外に置く(--wm-h から right を逆算)。
     外へ出しているのは、オレンジの目盛りが表の右辺で終わるところに
     Aの左辺が掛かってしまうため。45px ずらすと終端が生成りの上に乗る。
     高さを変えても頂点の位置と切り取られ方の比率は変わらない。
   ・上端の 90px は固定。ここを詰めると、左辺が下がりきる前にバッジへ届く。
   ・大きさは 760px 固定。幅を変えても見えが変わらないようにするため、
     vw で追従させていない(以前は追従させていて、狭めると縮んで見えた)。
     成立する下限は、外側の余白がいちばん狭くなる 1440px:
       目盛りの終端まで 17px / バッジまで 86px / 面の裏の帯は連続。
     これより狭い幅では、縮めずに出さない(下の 1439px 以下のブロック)。 */
.prc{--wm-h:760px}
.prc__wm{
  position:absolute;z-index:0;pointer-events:none;
  top:90px;
  right:calc(-1 * (var(--wm-h) * .3933 + 45px));
  height:var(--wm-h);width:auto;
  color:var(--prc-navy);
}

/* ---------- 対になる2つ目のA(左下) ----------
   右上のAが左辺を見せているのに対して、こちらは右脚を見せる。
   左端から外へ抜き、版面(最大1200px)の左に空いている余白だけに出す。

   置き方の決めごと:
   ・頂点をセクション左端の 45px 外に置く。右上のAが右端に対してやっている
     ことの左右反転で、字の右半分だけが余白に出る。
     ここを版面基準(右辺を版面の左に固定)にすると、画面が広くなるほど字全体が
     余白の中へ出てきてしまい、「端で切れている」見えが崩れる。
   ・大きさは右上とそろえて 760px 固定。幅には追従させない。
   ・下端(脚の底)は本文の下端(登録代行パネルの底)に合わせる。
     セクションの下パディングと同じ式なので、幅が変わっても揃う。
   ・右上のAは「おすすめプランの不透明な面の裏へ潜る」ことで、余白に出る帯を
     760px分の高さまで伸ばしている。左には隠せる面がないので、代わりに
     版面の 14px 手前で clip して同じことをしている。これをやらずに
     「右辺が版面に届かない大きさ」に縮めると、帯の高さが 300px しか取れず、
     右と比べて極端に小さく見えてしまう(これが直前の状態)。
     clip の位置は「セクション幅 - 版面1200px」の半分 = 外側の余白から逆算し、
     版面の左端にちょうど合わせている(右Aが面の左端で切れているのと同じ)。
     50vw はスクロールバー15px前提。バーが細い環境では数px内側で切れるだけ。 */
.prc{--wm2-h:760px}
.prc__wm2{
  position:absolute;z-index:0;pointer-events:none;
  bottom:clamp(24px,3vw,44px);
  left:calc(-1 * (var(--wm2-h) * .3933 + 45px));
  height:var(--wm2-h);width:auto;
  clip-path:inset(0 calc(var(--wm2-h) * .3933 + 562.5px - 50vw) 0 0);
  color:var(--prc-navy);
}

/* 1440px 未満は外側の余白が足りず、この大きさのままでは本文に掛かる。
   縮めると幅を変えるたびに見えが変わってしまうので、出さない。 */
@media (max-width:1439px){
  .prc__wm,.prc__wm2{display:none}
}

/* ---------- 見出し ---------- */
.prc__eyebrow{
  font-size:max(13px,1.45cqw);font-weight:900;letter-spacing:.08em;
  line-height:1.5;color:var(--ink);
}
.prc__title{
  margin-top:.7cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(27px,5.15cqw);line-height:1.32;letter-spacing:-.02em;
}
.prc__lead{
  margin-top:1.1cqw;
  font-size:max(13.5px,1.45cqw);font-weight:500;line-height:1.75;color:var(--ink2);
}

/* =========================================================
   料金マトリクス
   1行目 アイコン / 2 目盛り / 3 バッジ / 4 プラン名 / 5 ひとこと /
   6 価格 / 7 含まれるモジュール / 8 詳細内容 / 9 CTA
   ========================================================= */
.prc__matrix{
  --pl:14.4%;          /* 行見出しの列。採用デザイン実測 190/1320 */
  --pad:2.2cqw;        /* セルの左右余白。採用デザイン実測 29px */
  margin-top:3.2cqw;
  display:grid;
  grid-template-columns:var(--pl) repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(9,auto);
}
.prc__labels,
.prc__plan{grid-row:1/-1;display:grid;grid-template-rows:subgrid}

/* ---------- 左端の行見出し(7〜9行目だけを使う) ---------- */
/* 余白を詰めているのは、狭い幅で「含まれるモジュール」が
   「含まれるモジュ/ール」と語中で折れるのを避けるため */
.prc__lab{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1.95cqw .7cqw;
  border-top:1.5px solid var(--prc-line);
  border-left:1.5px solid var(--prc-line);
  font-size:max(11px,1.2cqw);font-weight:700;line-height:1.5;color:var(--ink2);
}
.prc__lab--mod{grid-row:7}
.prc__lab--det{grid-row:8}
.prc__lab--cta{grid-row:9;border-bottom:1.5px solid var(--prc-line)}

/* ---------- 1行目: モジュールのアイコン ---------- */
.prc__ico{
  display:flex;align-items:center;gap:.7cqw;
  padding:0 var(--pad) 1.55cqw;
  overflow:visible;
}
.prc__gv{height:max(42px,4.15cqw);width:auto;aspect-ratio:56/42;flex:none}
.prc__gi{height:max(42px,4.15cqw);width:auto;aspect-ratio:48/42;flex:none}
.prc__gp{height:max(16px,1.55cqw);width:auto;aspect-ratio:1;flex:none}
.prc__gs{height:max(38px,4.33cqw);width:auto;aspect-ratio:23/29;flex:none} /* セラー */

/* ---------- 2行目: 目盛り ----------
   線はセルの背景で描く。ドットの内側が地の色なので、線の端は自然にドットの下に隠れ、
   角の処理が見えるところに出てこない。 */
.prc__dot{height:26px;padding-left:var(--pad);background-repeat:no-repeat}
.prc__dot i{
  display:block;width:26px;height:26px;border-radius:50%;
  border:5px solid var(--prc-or);background:var(--prc-bg);
}
.prc__plan>.prc__dot{background-image:linear-gradient(var(--prc-or),var(--prc-or))}
/* 1つ目のドットの中心から右端まで */
.prc__plan--a>.prc__dot{
  background-size:calc(100% - var(--pad) - 13px) 5px;
  background-position:calc(var(--pad) + 13px) 50%;
}
/* 2列目・3列目は列いっぱい。3列目の右端＝表の右辺なので、
   線はそこで表の枠に突き当たって終わる(採用デザインどおり) */
.prc__plan--b>.prc__dot,
.prc__plan--c>.prc__dot{background-size:100% 5px;background-position:0 50%}

/* ---------- 3行目: バッジ ----------
   高さを固定してあるので、下の面(--prc-tint)の上端をちょうどバッジの中心に
   合わせられる。採用デザインの「タグが面の上端に留められている」見えを、
   線と喧嘩させずに再現するための作り。 */
.prc__badgecell{
  margin-top:1.2cqw;
  height:max(30px,2.85cqw);
  display:flex;align-items:center;
  padding-left:var(--pad);
}
.prc__badge{
  /* 右下だけを45°で落とす。ヒーローの斜めのブロックと同じ言語の小さな細工。
     切り落とす量(--ch)を右の余白にそのまま足しているので、文字は絶対に欠けない */
  --ch:10px;
  display:inline-flex;align-items:center;height:100%;
  padding:0 calc(1.75cqw + var(--ch)) 0 1.75cqw;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,0 100%);
  background:var(--prc-or);color:var(--ink);
  font-size:max(11.5px,1.2cqw);font-weight:900;letter-spacing:.01em;
  line-height:1.2;white-space:nowrap;
}
.prc__badge--ink{background:var(--prc-navy);color:var(--prc-or)}

/* ---------- 4〜6行目: プラン名・ひとこと・価格 ---------- */
.prc__name{
  padding:1.35cqw var(--pad) 0;
  font-family:var(--sans);font-weight:900;
  font-size:max(18px,2.2cqw);line-height:1.35;letter-spacing:-.02em;
}
.prc__sub{
  padding:.7cqw var(--pad) 0;
  font-size:max(12px,1.35cqw);font-weight:700;line-height:1.6;color:var(--ink2);
  /* 2行になる幅で「…したい方/へ」と1文字だけ落ちないように、文節で折る */
  word-break:auto-phrase;
}
.prc__price{
  padding:.4cqw var(--pad) 1.3cqw;
  display:flex;align-items:baseline;align-self:end;gap:.5cqw;
}
.prc__price b{
  font-family:var(--sans);font-weight:900;
  font-size:max(36px,5.3cqw);line-height:1;letter-spacing:.005em;
  font-variant-numeric:lining-nums tabular-nums;
}
.prc__price span{font-size:max(12px,1.35cqw);font-weight:900}
.prc__plan--best>.prc__price b{
  font-size:max(48px,7cqw);letter-spacing:-.02em;color:#E84A0C;
}
.prc__plan--best>.prc__price span{
  font-size:max(16px,1.85cqw);color:#E84A0C;
}

/* ---------- 7〜8行目: 仕様 ---------- */
/* 左の余白から罫の1.5pxを引いて、表の文字もアイコン〜プラン名〜価格と
   同じ縦の軸(セル内 2.2cqw)にぴったり乗せる */
.prc__spec{
  padding:1.95cqw var(--pad) 1.95cqw calc(var(--pad) - 1.5px);
  border-top:1.5px solid var(--prc-line);
  border-left:1.5px solid var(--prc-line);
}
/* PCでは左端の列が行見出しを見せるので、dt は読み上げ用に残して視覚的に隠す */
.prc__spec dt{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.prc__spec dd{font-size:max(12.5px,1.28cqw);line-height:1.9}
/* 寸法の注記。行に収まらない幅では次の行へ落ちるが、括弧の中では折らない */
.prc__spec dd span{margin-left:.45em;font-size:.92em;color:var(--ink3);white-space:nowrap}

/* ---------- 9行目: CTA ---------- */
.prc__ctacell{
  padding:1.44cqw 1.52cqw;
  border-top:1.5px solid var(--prc-line);
  border-left:1.5px solid var(--prc-line);
  border-bottom:1.5px solid var(--prc-line);
}
.prc__plan--c>.prc__spec,
.prc__plan--c>.prc__ctacell{border-right:1.5px solid var(--prc-line)}

.prc__cta{
  display:flex;align-items:center;justify-content:center;
  height:max(42px,3.5cqw);border-radius:2px;
  border:1.5px solid var(--prc-navy);color:var(--prc-navy);
  font-size:max(12.5px,1.3cqw);font-weight:900;letter-spacing:.01em;line-height:1;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}
.prc__cta:hover{background:var(--prc-navy);color:var(--prc-bg)}
.prc__cta--fill{background:var(--prc-or);border-color:var(--prc-or);color:var(--ink)}
/* ホバーで濃くするが、落としすぎると墨の文字が沈む。#D07104 で 4.87:1 を保つ */
.prc__cta--fill:hover{background:#D07104;border-color:#D07104;color:var(--ink)}
.prc__cta:focus-visible{outline:2px solid var(--prc-navy);outline-offset:3px}

/* ---------- おすすめプランの面。バッジの中心から表の下端まで一枚で通す ---------- */
.prc__plan--best>.prc__badgecell{
  background:linear-gradient(to bottom,transparent 50%,var(--prc-tint) 50%);
}
.prc__plan--best>.prc__name,
.prc__plan--best>.prc__sub,
.prc__plan--best>.prc__price,
.prc__plan--best>.prc__spec,
.prc__plan--best>.prc__ctacell{background:var(--prc-tint)}

/* ---------- ボリュームディスカウント ---------- */
.prc__disc{
  margin-top:1.9cqw;text-align:center;
  font-size:max(14px,1.6cqw);font-weight:700;line-height:1.7;
  word-break:auto-phrase;
}
/* 色は一段暗いステップ。SPではこの行が14pxまで下がるので、
   --prc-or-t(3.97:1)ではAAに足りない。--prc-or-d なら大きさに関係なく 5.6:1。
   折り返す幅で「ボリュームディス/カウント」と語中で割れないように nowrap */
.prc__disc b{font-weight:900;color:var(--prc-or-d);white-space:nowrap}

/* ---------- セラーセントラル登録代行 ---------- */
.prc__agency{
  margin-top:2.5cqw;
  background:var(--prc-panel);
  border:1px solid rgba(188,98,10,.22);
  border-radius:4px;
  padding:2.4cqw 2.5cqw;
  display:grid;grid-template-columns:auto 1px minmax(0,1fr);
  align-items:center;column-gap:2.4cqw;
}
.prc__agencyk{
  display:flex;align-items:center;gap:1.8cqw;
  font-family:var(--sans);font-weight:900;
  font-size:max(16px,1.9cqw);line-height:1.4;letter-spacing:-.01em;
  color:var(--prc-navy);white-space:nowrap;
}
.prc__agencyrule{
  align-self:stretch;margin-block:.4cqw;
  background:rgba(10,28,50,.26);border-radius:1px;
}
.prc__agencybody p{font-size:max(12.5px,1.2cqw);line-height:2.15}
.prc__note{color:var(--ink2)}

/* =========================================================
   タブレット以下 — 表を1プラン1枚のカードへ組み替える
   DOMがプラン単位なので、並べ替えずにそのままカードになる
   ========================================================= */
@media (max-width:899px){
  .prc{padding-top:clamp(24px,4.5vw,36px);padding-bottom:clamp(22px,4vw,32px)}
  .prc__wm{display:none}   /* 版面が全幅になるので、装飾の置き場がなくなる */

  .prc__title{font-size:clamp(25px,5.4vw,40px);line-height:1.38}
  .prc__eyebrow{font-size:clamp(12.5px,3.2vw,15px)}
  .prc__lead{font-size:clamp(13px,3.4vw,15.5px);margin-top:10px}

  .prc__matrix{display:block;margin-top:clamp(22px,4.4vw,34px)}
  .prc__labels{display:none}

  .prc__plan{
    display:grid;grid-row:auto;
    grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto;
    align-items:center;
    background:var(--prc-card);
    border:1.5px solid var(--prc-line);border-radius:3px;
    padding:16px 18px 20px;
  }
  .prc__plan+.prc__plan{margin-top:16px}
  .prc__plan--best{background:var(--prc-tint)}
  .prc__plan>*{grid-column:1/-1}

  .prc__dot{display:none}
  .prc__ico{grid-column:1;grid-row:1;padding:0}
  /* バッジはアイコンの右へ続けて置く。カードの右端へ飛ばすと
     左右に離れた2点になってしまうので、PCと同じ「左の軸に寄せる」に揃える */
  .prc__badgecell{
    grid-column:2;grid-row:1;justify-self:start;
    margin:0 0 0 14px;height:auto;padding:0;background:none;
  }
  .prc__plan--best>.prc__badgecell{background:none}
  /* バッジのないプランで、空のセルがアイコンと見出しの間に隙間を作らないように */
  .prc__badgecell:empty{display:none}
  .prc__badge{height:auto;padding:6px calc(13px + var(--ch)) 6px 13px;font-size:12px}

  /* カード自体が面を持つので、行ごとの塗りは不要 */
  .prc__plan--best>.prc__name,
  .prc__plan--best>.prc__sub,
  .prc__plan--best>.prc__price{background:none}

  .prc__name{padding:14px 0 0;font-size:clamp(19px,5.2vw,25px)}
  .prc__sub{padding:5px 0 0;font-size:clamp(12.5px,3.4vw,14.5px)}
  .prc__price{padding:8px 0 4px;gap:5px}
  .prc__price b{font-size:clamp(36px,10.4vw,50px)}
  .prc__price span{font-size:clamp(12.5px,3.4vw,15px)}
  .prc__plan--best>.prc__price b{font-size:clamp(46px,13.2vw,64px)}
  .prc__plan--best>.prc__price span{font-size:clamp(15px,4.2vw,18px)}

  .prc__spec{
    padding:13px 0 14px;
    border:0;border-top:1.5px solid rgba(10,28,50,.2);
    background:none;
  }
  .prc__plan--best>.prc__spec{background:none}
  /* カードでは行見出しがカードの中に必要になるので、dt を見せる */
  .prc__spec dt{
    position:static;width:auto;height:auto;margin:0 0 6px;
    overflow:visible;clip:auto;white-space:normal;
    font-size:11.5px;font-weight:900;letter-spacing:.02em;color:var(--ink2);
  }
  .prc__spec dd{font-size:clamp(13px,3.6vw,15px);line-height:1.85}
  .prc__spec dd+dd{margin-top:2px}
  .prc__spec dd span{display:inline-block;margin-left:0}

  .prc__ctacell{padding:16px 0 0;border:0;background:none}
  .prc__plan--best>.prc__ctacell{background:none}
  /* A4(F18): 表組み用の右罫(.prc__plan--c>… = 0-2-0)が、カード縦積み時の
     打ち消し(.prc__spec / .prc__ctacell = 0-1-0)に勝って3枚目にだけ
     孤立した縦線が残っていた。同じ詳細度で明示的に消す。 */
  .prc__plan--c>.prc__spec,
  .prc__plan--c>.prc__ctacell{border-right:0}
  .prc__cta{height:52px;font-size:clamp(14px,3.9vw,15.5px)}

  .prc__disc{margin-top:20px;font-size:clamp(13.5px,3.6vw,16px);text-align:left}
  .prc__agency{
    margin-top:22px;padding:20px 18px;
    grid-template-columns:minmax(0,1fr);row-gap:14px;column-gap:0;
  }
  .prc__agencyk{white-space:normal;font-size:clamp(16.5px,4.4vw,21px);gap:12px}
  .prc__gs{height:clamp(34px,8.6vw,42px)}
  .prc__agencyrule{
    height:1px;width:100%;align-self:auto;margin:0;
    background:rgba(10,28,50,.2);
  }
  .prc__agencybody p{font-size:clamp(12.5px,3.4vw,14.5px);line-height:2}
  .prc__agencybody p+p{margin-top:6px}
}

@media (max-width:640px){
  .prc{--gut:16px}
  .prc__plan{padding:14px 15px 18px}
  .prc__badge{--ch:8px;font-size:11px;padding:5px calc(11px + var(--ch)) 5px 11px}
  .prc__gv{height:34px}
  .prc__gi{height:34px}
  .prc__gp{height:14px}
}

/* 「Amazonベストプラクティス」は長い。アイコンと横並びで競る幅では
   バッジを次の行へ落として、どちらも欠けないようにする */
@media (max-width:430px){
  .prc__plan{grid-template-columns:minmax(0,1fr)}
  .prc__ico{grid-column:1/-1;grid-row:auto}
  .prc__badgecell{grid-column:1/-1;grid-row:auto;justify-self:start;margin:11px 0 0}
}

/* =========================================================
   v24: 制作の流れ — 3カード横並び
   4特徴カード列と同じ読み順(ラベル → 見出し → 白い図版枠 → 本文)。
   このLPは3ステップなので3列。文面・写真は既存のまま。影・罫は付けない。
   SPは同じカードを縦積み。斜め切り欠きと交互配置は使わない。
   ========================================================= */

.flw{
  --flw-or-t:#F09C12;    /* 生成りの上の太字 */
  --flw-or-d:#E08A00;    /* 生成りの上の小さい文字 */
  --flw-wm:#E4D9C6;      /* カード地の一段下。読ませない背番号 */
  --flw-card:#EDE6D8;    /* 紙(#FBF5EE)より一段落ちる灰ベージュ */
  position:relative;
  background:#FBF5EE;    /* 料金表と同色。セクションの境目に段差を作らない */
  padding:clamp(8px,1.4vw,20px) 0 clamp(16px,2.2vw,32px);
  overflow:hidden;
}
.flw::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.08;pointer-events:none;
}
/* 全幅で組むが 1440px で止める。見出しの左端は直前の料金表の見出しと同じ軸。 */
.flw__in{
  position:relative;z-index:1;
  max-width:1440px;margin-inline:auto;
  container-type:inline-size;
}
.flw__in>*{
  --gut:max(clamp(20px,4vw,40px), calc((100cqw - 1200px) / 2));
}

/* ---------- 見出し ---------- */
.flw__head{padding-inline:var(--gut)}
.flw__title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(27px,5.15vw,62px);   /* 料金表のH2と同じ級数 */
  line-height:1.3;letter-spacing:-.02em;
}
.flw__lead{
  margin-top:clamp(8px,1.1vw,15px);
  font-size:clamp(14px,1.85vw,23px);font-weight:500;
  line-height:1.7;color:var(--ink2);
}

/* ---------- 3カード横並び ---------- */
.flw__steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(14px,1.7cqw,24px);
  margin-top:clamp(4px,.6vw,8px);
  padding-inline:var(--gut);
}
.flw__step{
  position:relative;
  display:flex;flex-direction:column;align-items:stretch;
  min-height:0;
  padding:clamp(12px,1.15cqw,16px) clamp(16px,1.5cqw,22px);
  background:var(--flw-card);
  border-radius:10px;
  overflow:hidden;
  container-type:inline-size;   /* 英字の級数はカード幅基準 */
}

/* 背番号。カード右上の装飾。数字はページ既存の Oswald */
.flw__wm{
  position:absolute;top:12px;right:14px;z-index:0;
  font-family:var(--num);font-weight:700;
  font-size:clamp(52px,18cqw,78px);
  line-height:.76;letter-spacing:-.012em;
  color:var(--flw-wm);pointer-events:none;
}
.flw__tag{
  position:relative;z-index:1;
  font-size:clamp(12.5px,1.15cqw,15px);font-weight:900;letter-spacing:.02em;
  line-height:1.5;color:var(--flw-or-d);
}
.flw__h{
  position:relative;z-index:1;
  margin-top:4px;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(17px,1.7cqw,23px);line-height:1.4;letter-spacing:-.015em;
}
.flw__p{
  position:relative;z-index:1;
  font-size:clamp(13px,1.2cqw,15.5px);line-height:1.8;color:var(--ink2);
  word-break:auto-phrase;
}
.flw__punch{
  position:relative;z-index:1;
  margin-top:auto;padding-top:8px;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(16px,1.55cqw,22px);line-height:1.45;letter-spacing:-.02em;
  font-feature-settings:"palt";text-wrap:balance;
}
.flw__punch em{color:var(--flw-or-t)}

/* ---------- 写真(白い図版枠) ----------
   カード地の上に白矩形。斜め切り欠きは3列では欠けになるので外す。 */
.flw__media{
  position:relative;
  margin:8px 0 10px;
  padding:8px;
  background:#fff;
  border-radius:8px;
}
.flw__img{
  display:block;width:100%;height:auto;max-width:none;
  aspect-ratio:16/10;object-fit:cover;border-radius:4px;
}
.flw__step:nth-child(1) .flw__img{object-position:57% 50%}
.flw__step:nth-child(2) .flw__img{object-position:63% 50%}
.flw__step:nth-child(3) .flw__img{object-position:45% 50%}
.flw__en{
  position:absolute;z-index:1;right:18px;bottom:16px;
  font-family:var(--num);font-weight:500;
  font-size:clamp(13px,7.4cqw,22px);line-height:1;letter-spacing:.07em;
  color:#FFF;opacity:.9;
  text-shadow:0 1px 2px rgba(10,20,34,.42), 0 6px 20px rgba(10,20,34,.34);
  white-space:nowrap;pointer-events:none;
}

/* ---------- 締めの一行 ---------- */
.flw__one{
  margin-top:clamp(4px,.6vw,8px);
  padding-inline:var(--gut);
  text-align:center;
  font-size:clamp(14px,1.75vw,22px);font-weight:500;
  line-height:1.8;color:var(--ink2);word-break:auto-phrase;
}

/* ---------- 動き ----------
   リビールは y だけ。共通の rise は opacity 0 から始まるので、
   タブが背面にある・アニメーションが止められた等で発火しきらないと
   文字が消えたままになる。ページ既存の .cvr / .about / .kvf と同じ扱いにする。 */
@media (prefers-reduced-motion:no-preference){
  body.js .flw .rv.in{animation-name:flwRise}
  @keyframes flwRise{from{transform:translateY(16px)}to{transform:none}}
}

/* ---------- SP(767px以下) ----------
   同じカードを縦積み。交互配置・切り欠きには戻さない。 */
@media (max-width:767px){
  .flw__in>*{--gut:clamp(20px,5.6vw,24px)}
  .flw{padding:clamp(12px,3.2vw,20px) 0 clamp(16px,4vw,28px)}
  .flw__steps{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(14px,4vw,18px);
    margin-top:clamp(6px,1.6vw,10px);
  }
  .flw__step{padding:14px 16px}
  .flw__h{font-size:clamp(18px,5vw,22px)}
  .flw__p{font-size:clamp(13px,3.5vw,15px)}
  .flw__punch{font-size:clamp(18px,5vw,22px)}
  .flw__en{font-size:clamp(16px,6.4vw,22px);right:16px;bottom:14px}
  .flw__one{margin-top:clamp(6px,1.6vw,10px);font-size:clamp(14px,3.7vw,16.5px)}
}


/* =========================================================
   v25: よくある質問 + お問合せ(採用デザイン faq-contact-web-03.png 準拠)
   ---------------------------------------------------------
   ■ 採寸の基準
   採用デザインは 945x1665。版面は x51-891(840px)、左右余白 52。
   ・レイアウト比 = 実測値 / 840 を cqw に読み替え(.fq__in / .cnt__in が基準)。
   ・文字の級数は実測とほぼ 1:1。カンプは版面が 840 と狭いだけで、
     文字そのものは実寸で描かれている(本文の行送り 25px / 級数 15.6px など)。
     そのため級数は px 側の clamp 上限で押さえ、比率では持たせない。

   ■ カンプからの意図的な変更(崩れの修正・ページ内の整合)
   1. 見出しの級数。カンプは版面比 6.9% (=1200版面なら96px)。直上の制作の流れ・
      料金表の H2 は clamp(27px,5.15vw,62px)。隣り合う節で級数が1.5倍違うと
      別サイトに見えるので、同じ clamp に合わせた。
   2. フォームの2列が 223px / 252px と不等幅だった(担当者名がメールアドレスより
      狭い)。役割の同じ列は同じ幅で揃える。1fr 1fr に修正。
   3. フォーム右端 886 と FAQ の罫の右端 891 が 5px ずれていた。同じ版面の
      右端に揃えた。左列も版面左端(カンプは 82 = 版面より30px内側)に揃えている。
   4. 開閉アイコンの右端がカンプでは版面右端から30px内側。数字は左端ほぼ揃えなので
      片側だけ空くのを避け、版面右端に揃えた。
   5. 紺色は #051E3A(カンプ実測)ではなくページ共通の #0A1C32。
      制作サンプルの紺セクションと同じ色にしないと床が2系統になる。
      あわせて直後のプレフッター .pre も同色にし、紺の床を1枚に繋いだ。
   6. 数字 01-04 はカンプより幅の広い書体になる(ページの数字は Oswald)。
      カンプの超コンデンス体はページ内に存在しないため、Oswald を採用。
   7. 本文の行送りはカンプ実測 1.6 に対し 1.75。日本語の可読性を確保する下限。
   8. カンプに無かった要素は落とした:元の .contact__lead(相談段階でも大丈夫…)と
      .contact__points(最短当日ご連絡 / しつこい営業はいたしません)。
      前者と同じ内容は直後の .pre、電話と受付時間は中盤の .askband が持っている。

   ■ 言語
   最新レイヤー(.strength / .smp / .sec20)と同じ。影は使わず面の明度差で段差を作る。
   角丸は 2-3px。アイコンに下敷きは置かない。罫は版面いっぱいか、意味のある位置だけ。

   ■ 旧レイヤーについて
   クラス名を総取り替えしたので、515-533(.faq/.qa)・535-588(.contact/.form/.field)と
   それを上書きしていた 811-819 / 847-875 / 944-956 / 1067-1114 / 1140-1165 /
   1282-1354 の該当セレクタは、どこにも当たらない死んだ規則になっている。
   共有セレクタ(.btn / .plan,.chartwrap,…,.form,.telcard など)に混ざっているため
   機械的に消すと他節に波及するので、今回は残置。触るときはここを見てから。
   ========================================================= */

.fq{
  --fq-or:#F09C12;                    /* 縦バー・A・開いている行の「−」 */
  --fq-rule:rgba(33,28,22,.86);       /* 行を仕切る罫。カンプ実測で純インク約1.1px相当 */
  --fq-dot:rgba(33,28,22,.30);        /* 回答内の点線 */
  --fq-panel:#FEFAF6;                 /* 回答の面。地より (3,5,8) 明るいだけの段差 */
  position:relative;
  /* 直上 .flw と完全に同色。カンプ実測は #F5F1EA だが、5値だけ落とすと
     境目が「意図した段差」ではなく「事故の帯」に見える。
     .smp / .flw の「隣の節と同色にして1枚の面として続ける」運用に合わせた */
  background:#FBF5EE;
  padding:clamp(8px,1.2vw,16px) clamp(20px,4vw,40px) clamp(12px,1.6vw,24px);
  overflow:hidden;
}
.fq::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.08;pointer-events:none}
.fq__in{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;
  container-type:inline-size;         /* 以下の cqw はこの版面幅が基準 */

  /* 数字の列と縦バーの位置。summary と回答で同じ値を使い、
     オレンジの縦バーと点線を必ず同じ軸に乗せる */
  --fq-c1:max(64px, 9.6cqw);
  --fq-gap:max(16px, 2.1cqw);
}

/* ---------- 見出し ---------- */
.fq__title{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(27px,5.15vw,62px);  /* 制作の流れ・料金表の H2 と同じ級数 */
  line-height:1.24;letter-spacing:-.02em;
}
.fq__lead{
  margin-top:max(8px,.7cqw);
  font-size:clamp(13px,1.25cqw,15px);line-height:1.8;color:var(--ink2);
  word-break:auto-phrase;
}

/* ---------- 一覧 ---------- */
.fq__list{margin-top:clamp(18px,2cqw,24px);border-bottom:1px solid var(--fq-rule)}
.fq__item{border-top:1px solid var(--fq-rule)}

.fq__q{
  display:grid;
  grid-template-columns:var(--fq-c1) minmax(0,1fr) auto;
  align-items:center;
  min-height:max(58px,7.5cqw);
  padding:max(10px,1cqw) 0;
  cursor:pointer;list-style:none;
}
.fq__q::-webkit-details-marker{display:none}

.fq__no{
  font-family:var(--num);font-weight:700;
  font-size:clamp(34px,5.3cqw,64px);line-height:.82;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  color:var(--ink);
  /* 行ボックスは行の中央に乗っているが、Oswald の数字の墨はその中で
     0.0525em 下に寄っている(実測: 63.6px で +3.34px)。
     罫で挟まれた行の中で、真ん中に揃っている + と並ぶと下がって見えるので、
     墨の位置で中央を取り直す。em なので clamp のどの段でも効く */
  transform:translateY(-.053em);
}
/* 質問文。左の境界そのものがオレンジの縦バー。
   高さは行ボックス分だけなので、行の中央に短い線として立つ */
.fq__t{
  border-left:2px solid var(--fq-or);
  padding-left:var(--fq-gap);
  /* 質問が折り返して開閉アイコンまで届く幅(SP)で、文字とアイコンがぶつからないよう逃げを取る。
     列間ではなく内側の padding で取ること。gap にすると縦バーが1列目からずれ、
     回答の点線(left:var(--fq-c1))と軸が合わなくなる */
  padding-right:max(14px,1.6cqw);
  font-family:var(--sans);font-weight:900;
  font-size:clamp(15px,2cqw,24px);line-height:1.5;letter-spacing:-.01em;
  word-break:auto-phrase;
}

/* 開閉。+ と − を角丸なしの2本の棒で描く。開くと縦棒だけが消えてオレンジになる。
   棒の端が角丸だと scaleX の途中で端の形が変わって安っぽく見えるので、角丸は付けない */
.fq__ic{
  position:relative;justify-self:end;
  width:max(18px,1.75cqw);height:max(18px,1.75cqw);
  color:var(--ink);
}
.fq__ic::before,.fq__ic::after{
  content:"";position:absolute;left:0;top:50%;
  width:100%;height:2.5px;margin-top:-1.25px;background:currentColor;
  transition:transform .28s cubic-bezier(.22,.7,.3,1),background-color .28s;
}
.fq__ic::after{transform:rotate(90deg)}
.fq__item[open] .fq__ic{color:var(--fq-or)}
.fq__item[open] .fq__ic::after{transform:rotate(90deg) scaleX(0)}

/* ---------- 回答 ---------- */
.fq__a{
  position:relative;
  display:grid;grid-template-columns:var(--fq-c1) minmax(0,1fr);
  border-top:1px solid var(--fq-rule);
  background:var(--fq-panel);
  padding:max(10px,1.1cqw) var(--fq-gap) max(12px,1.3cqw) 0;
}
/* 点線はテキストより上下に伸びるので、面の内側に絶対配置で立てる。
   left は summary の1列目と同じ値。オレンジの縦バーと同じ軸になる */
.fq__a::before{
  content:"";position:absolute;left:var(--fq-c1);
  top:max(6px,.7cqw);bottom:max(8px,.9cqw);
  border-left:2px dotted var(--fq-dot);
}
.fq__amark{
  justify-self:end;align-self:start;padding-right:max(20px,2.5cqw);
  font-family:var(--num);font-weight:700;
  font-size:clamp(20px,2.6cqw,31px);line-height:1;
  color:var(--fq-or);
}
/* padding に +2px しているのは縦バー/点線の太さぶん。
   質問文は border-left:2px の外側から padding が始まるので、これを足さないと
   回答本文の頭が質問文より 2px 左にずれる。
   max-width は、版面が広いと1行が60字を超えて読みにくいため。
   カンプの1行(約42字)に合わせて字詰めを止めている */
.fq__body{padding-left:calc(var(--fq-gap) + 2px);max-width:46em}
.fq__body p{
  font-size:clamp(13.5px,1.3cqw,15.6px);line-height:1.75;color:var(--ink2);
  word-break:auto-phrase;
}
.fq__body p+p{margin-top:1.75em}   /* カンプは段落間に1行分の空き */
.fq__body b{
  display:block;margin-bottom:.15em;
  font-weight:900;font-size:1.28em;line-height:1.5;color:var(--ink);
}

@media (prefers-reduced-motion: no-preference){
  .fq__item[open] .fq__a{animation:fqOpen .34s cubic-bezier(.22,.7,.3,1) both}
  @keyframes fqOpen{from{opacity:.4;transform:translateY(-5px)}}
}
.fq__q:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){
  .fq__q:hover .fq__t{color:#8A4A05}
  .fq__item:not([open]) .fq__q:hover .fq__ic{color:var(--fq-or)}
}


/* =========================================================
   お問合せ
   ========================================================= */
.cnt{
  --cnt-navy:#0A1C32;      /* 制作サンプルの紺セクションと同色 */
  --cnt-or:#F09C12;
  --cnt-cream:#F4EFE6;
  --cnt-wm:rgba(244,239,230,.075);  /* 背文字。カンプ実測(地との差 約 +19)相当 */
  position:relative;
  background:var(--cnt-navy);color:var(--cnt-cream);
  padding:clamp(28px,3.6vw,52px) clamp(20px,4vw,40px) clamp(48px,6vw,88px);
  overflow:hidden;         /* 背文字を版面の左端で止める */
}
.cnt::before{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.05;pointer-events:none}
/* 背文字。ページ左端から食い込ませる。装飾なので aria-hidden 済み。
   ・書体は Oswald。カンプの背文字は字幅/字高が 0.229 の細長い書体で、
     Zen Kaku(0.152)では同じ丈にすると細く見える。Oswald は 0.228 でほぼ一致し、
     しかもこの節の 01-04・電話番号と同じ書体なので声が増えない。
   ・丈は top:50% + translateY(-50%) で自分の高さから中央合わせ。
     7文字ぶんの長さがセクション高(デスクトップ約1050px)に収まる級数に抑える。
     欠けた単語は事故に見えるので、上下は切らずに左端だけ食い込ませる。
   ・上限 225px は「7文字ぶんの長さ(級数x3.655=822px)が
     デスクトップのセクション高 875px に上下26px 残して収まる」値。
     これ以上大きくすると最初のC と最後のT が版面の上下で切れる。
     係数 16.5vw も同じ理由。18.8vw だと 1024px 幅で残りが13px しかなかった
     (実測: 1024→残り99px / 1200→76px / 1440→52px)。
   ・left:-.1em は墨の左端をページ端の外へ約14px 出す位置。
     writing-mode:vertical-rl の回転グリフは行ボックスの外に出るため、
     em box ではなく実測した墨の位置(級数x0.037 が墨の左端)で合わせている。 */
.cnt__wm{
  position:absolute;top:50%;left:-.1em;
  margin:0;transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--num);font-weight:700;
  /* .cnt 自身にコンテナは張っていないので cqw ではなく vw。
     どのみちページ端に食い込ませる要素なので画面幅基準が素直 */
  font-size:clamp(112px,16.5vw,225px);line-height:1;letter-spacing:0;
  color:var(--cnt-wm);
  pointer-events:none;user-select:none;
}
/* 列比はカンプ実測(左 35.6% / 間 5.3% / 右 59.1%)。
   ここは自分自身が container なので、列幅に cqw は使えない
   (コンテナクエリは自分を参照できず、祖先か小ビューポートに落ちる)。
   版面幅と同義になる % で書く。子孫側の cqw はこの版面幅で正しく効く */
.cnt__in{
  position:relative;z-index:1;max-width:1200px;margin:0 auto;
  container-type:inline-size;
  display:grid;
  grid-template-columns:minmax(0,35.6%) minmax(0,1fr);
  column-gap:5.3%;
  align-items:center;      /* 左の見出しはフォームに対して縦中央(カンプの位置関係) */
}

/* ---------- 左:見出しと電話 ---------- */
.cnt__h{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(21px,2.6cqw,31px);line-height:1.3;letter-spacing:-.02em;
  color:var(--cnt-cream);word-break:auto-phrase;
}
.cnt__sub{
  margin-top:max(9px,1cqw);
  font-size:clamp(15px,1.75cqw,21px);font-weight:700;line-height:1.5;
  letter-spacing:-.01em;color:var(--cnt-cream);word-break:auto-phrase;
}
.cnt__rule{
  display:block;width:max(40px,4cqw);height:3px;border-radius:1.5px;
  margin:max(22px,3.1cqw) 0 0;background:var(--cnt-or);
}
.cnt__tel{
  display:flex;align-items:center;gap:max(10px,1.1cqw);
  margin-top:max(16px,2.2cqw);color:var(--cnt-cream);
  width:max-content;
}
.cnt__telic{
  flex:none;width:max(20px,2.2cqw);height:max(20px,2.2cqw);
  color:var(--cnt-or);
}
.cnt__tel b{
  font-family:var(--num);font-weight:600;
  font-size:clamp(28px,3.5cqw,41px);line-height:1.1;letter-spacing:.005em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transform:translateY(-.048em);   /* 01-04 と同じ理由。受話器の中心と数字の墨の中心を合わせる */
}
.cnt__hours{
  display:inline-block;margin-top:max(13px,1.6cqw);
  border:1px solid rgba(244,239,230,.72);border-radius:2px;
  padding:max(7px,.75cqw) max(16px,1.9cqw);
  font-size:clamp(13px,1.35cqw,16px);line-height:1.4;
  color:var(--cnt-cream);white-space:nowrap;
}
@media (hover:hover){.cnt__tel:hover b{color:#F6B15E}}
.cnt__tel:focus-visible{outline:2px solid var(--cnt-cream);outline-offset:4px}

/* ---------- 右:フォーム ---------- */
.cf{display:block}
.cf__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(14px,1.6cqw,20px);row-gap:clamp(20px,2.9cqw,35px);align-items:start}
.cf__field{display:block}
.cf__field--wide{grid-column:1/-1}

.cf__label{
  /* 極狭幅でラベルが長くてもバッジが枠から出ないよう折り返しを許す */
  display:flex;flex-wrap:wrap;align-items:center;gap:max(8px,.9cqw);
  margin-bottom:max(8px,.85cqw);
  font-size:clamp(13px,1.28cqw,15px);font-weight:900;line-height:1.4;
  letter-spacing:-.01em;color:var(--cnt-cream);
}
.cf__req,.cf__opt{
  flex:none;border-radius:2px;
  padding:.25em .55em;
  font-size:clamp(10px,1cqw,11.5px);font-weight:900;line-height:1.35;
  letter-spacing:.02em;font-style:normal;
}
/* 地はページ共通の黄オレンジ(--cnt-or)。文字だけ白 → 紺にしている。
   白抜きだと読めず、地を暗くして白を保つと節の中にオレンジが
   2系統できてしまう(送信ボタン・縦バー・A は --cnt-or)。
   紺文字なら送信ボタンの「オレンジ地＋紺文字」と同じ扱いになる */
.cf__req{background:var(--cnt-or);color:#0A1C32}
.cf__opt{background:#454545;color:#EDEDED}

/* 枠は input ではなく .cf__control に置く。
   ネイティブ input は overflow:clip と appearance の内側ハイライトで
   下辺だけ細く見えるため。 */
.cf__control{
  display:flex;align-items:stretch;
  box-sizing:border-box;
  min-height:clamp(44px,4.1cqw,50px);
  border:2px solid transparent;border-radius:2px;background:#FCFCFB;
  transition:border-color .2s;
}
.cf__control--area{min-height:clamp(108px,11cqw,132px);height:auto}
.cf__field input,.cf__field textarea{
  display:block;width:100%;min-height:0;height:auto;
  -webkit-appearance:none;appearance:none;
  border:0;border-radius:0;background:transparent;color:var(--ink);
  padding:0 clamp(14px,1.9cqw,23px);
  font-family:inherit;font-size:clamp(14px,1.3cqw,15.5px);
  box-shadow:none;outline:none;
}
.cf__field textarea{
  min-height:calc(clamp(108px,11cqw,132px) - 4px);
  padding-top:clamp(12px,1.3cqw,16px);padding-bottom:clamp(12px,1.3cqw,16px);
  line-height:1.8;resize:vertical;
}
.cf__field ::placeholder{color:#7A746D}   /* 4.5:1。入力例を兼ねているので薄くしすぎない */
.cf__field:focus-within .cf__control{border-color:var(--cnt-or)}
.cf.tried .cf__field:has(:invalid) .cf__control,
.cf__field.is-invalid .cf__control{
  border-color:#E4593A;
}
.cf__field-err{
  display:block;
  margin-top:max(6px,.65cqw);
  font-size:clamp(12px,1.15cqw,13px);font-weight:700;line-height:1.45;color:#FFB4A0;
}
.cf__agreewrap{margin-top:clamp(22px,3cqw,34px)}
.cf__agreewrap .cf__agree{margin-top:0}

.cf__agree{
  display:flex;align-items:center;gap:max(10px,1.1cqw);
  margin-top:clamp(22px,3cqw,34px);
  font-size:clamp(13px,1.28cqw,15px);line-height:1.5;color:var(--cnt-cream);
  cursor:pointer;
}
.cf__agree input{
  flex:none;width:max(18px,1.75cqw);height:max(18px,1.75cqw);
  margin:0;border-radius:2px;accent-color:#FCFCFB;
}
.cf__agree a{color:var(--cnt-cream);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){.cf__agree a:hover{color:#F6B15E}}

/* ラベルはボタンの「全幅」の中央。矢羽は絶対配置で右端に置く。
   grid の 1fr + margin で寄せると光学中央が数px ずれるので、
   ラベル側は text-align:center のまま版面いっぱいに取って数学的に中央を出す。
   左右 padding は、ラベルがどれだけ伸びても矢羽に当たらない幅を確保するため */
.cf__submit{
  position:relative;display:block;width:100%;
  margin-top:clamp(20px,2.6cqw,30px);
  border:0;border-radius:2px;background:var(--cnt-or);
  padding:clamp(17px,2cqw,24px) clamp(48px,5cqw,60px);
  font-family:var(--sans);font-weight:900;
  font-size:clamp(15px,1.65cqw,19px);line-height:1.4;letter-spacing:.01em;
  text-align:center;color:#0A1C32;cursor:pointer;
  transition:background-color .2s;
}
.cf__submit>span{display:block}
.cf__submitic{
  position:absolute;top:50%;right:clamp(20px,2.9cqw,35px);
  transform:translateY(-50%);
  width:max(15px,1.5cqw);height:max(15px,1.5cqw);
  transition:transform .22s cubic-bezier(.22,.7,.3,1);
}
@media (hover:hover){
  .cf__submit:hover{background:#CE6A08}
  .cf__submit:hover .cf__submitic{transform:translateY(-50%) translateX(3px)}
}
.cf__submit:focus-visible{outline:2px solid var(--cnt-cream);outline-offset:3px}
.cf__err{
  margin-top:max(12px,1.3cqw);
  font-size:clamp(12.5px,1.25cqw,14px);font-weight:700;color:#FFB4A0;
  overflow-wrap:anywhere;
}
.cf__done{text-align:center;padding:clamp(40px,5.4cqw,76px) 0}
.cf__done .ic{width:max(34px,3.4cqw);height:max(34px,3.4cqw);color:var(--cnt-or);margin:0 auto max(14px,1.5cqw)}
.cf__done h3{font-family:var(--sans);font-weight:900;font-size:clamp(18px,2cqw,24px);line-height:1.5;color:var(--cnt-cream)}
.cf__done p{margin-top:max(10px,1.1cqw);font-size:clamp(13px,1.3cqw,15px);line-height:1.9;color:#C3CDD8}
.cf__done small{display:block;margin-top:max(12px,1.4cqw);font-size:clamp(11px,1.1cqw,12.5px);color:#8FA0B2}
/* 送信完了後(script.js が付与)。節が約500pxまで縮むので背文字も縮めて、
   単語が上下で切れないようにする(実測: 級数x3.655 = 単語の丈) */
.cnt--sent .cnt__wm{font-size:clamp(76px,8.3vw,120px)}

/* 紺の床を1枚に繋ぐ。お問合せ #0A1C32 とプレフッター #232F3E が
   隣り合うと段差が帯に見えるので、プレフッターも同色にする。
   フッターは「一段暗い床へ降りる」意図的な段差なので残すが、
   #131A22 は青みが抜けて色相が変わり、境目が帯に見えていた。
   同じ紺の系統をそのまま暗くした値に寄せ、グレインも継がせる */
.pre{background:#0A1C32}
.foot{background:#071527}
.foot::after{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.05;pointer-events:none;
}


/* ---------- タブレット:1カラム ---------- */
@media (max-width:899px){
  .fq__in{--fq-c1:max(56px,8.6cqw)}

  .cnt__in{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4.4vw,44px);align-items:start}
  /* 1カラムでは入力欄が版面いっぱいの白い面になり、背文字は
     その隙間から断片しか見えない。単語として読めない背文字は
     テクスチャではなく汚れに見えるので、この幅から下では出さない */
  .cnt__wm{display:none}
  .cf__grid{row-gap:clamp(18px,2.6vw,26px)}
}

/* ---------- SP ---------- */
@media (max-width:640px){
  .fq{padding-left:16px;padding-right:16px}
  .fq__in{--fq-c1:44px;--fq-gap:13px}
  .fq__title{line-height:1.28}
  .fq__q{min-height:0;padding:15px 0;align-items:center}
  .fq__no{font-size:29px}
  .fq__t{font-size:15px;line-height:1.55;padding-left:13px;padding-right:12px}
  .fq__ic{width:16px;height:16px}
  .fq__ic::before,.fq__ic::after{height:2px;margin-top:-1px}
  .fq__a{padding:10px 13px 12px 0}   /* 右は --fq-gap 相当。0 にすると本文が版面の右端に貼りつく */
  .fq__a::before{top:6px;bottom:8px}
  .fq__amark{font-size:19px;padding-right:14px}
  .fq__body{padding-left:15px;padding-right:0}   /* 15 = 13 + 点線の2px */
  .fq__body p{font-size:13.5px;line-height:1.85}
  .fq__body b{font-size:1.2em}

  .cnt{padding-left:16px;padding-right:16px}
  .cf__grid{grid-template-columns:1fr;row-gap:17px}
  .cf__submit{padding:17px 40px}
  .cf__submitic{right:16px}
}


/* =========================================================
   v26: CTA + フッター(採用デザイン cta-footer-v2/selected-02 準拠)
   ---------------------------------------------------------
   ■ 採寸の基準
   PCカンプ 1487x1058。版面は x82-1405(1323px)、左右余白 82。
   82:1323 は「余白80 / 版面1280」の比とほぼ一致するので、
   このカンプは 1440 幅の想定と読み、実寸への換算係数 k = 1323/1280 = 1.034 とした。
   ・レイアウト比 = カンプ実測 / 1323 を % または cqw に読み替え(.pre__in / .foot__in が基準)。
   ・斜めの落差はカンプ実測 158/1487 = 10.6% ≒ 11vw。SPカンプ(828x1899、版面703)も
     78/828 = 9.4% で同じ帯に乗るため、clamp(42px,11vw,160px) 一本で PC/SP を通す。
     390 幅で 42px(申し送りの指定値)、1440 幅で 158px(PCカンプ実測)。

   ■ カンプからの意図的な変更(可読性・ページ内の整合)
   1. ボタンの文字色。カンプは白だが #EC7604 に白は 2.94:1 で AA(大文字 3:1)に届かない。
      申し送りの第一候補どおり濃紺 #0A1C32 にした(5.82:1)。直上のお問合せの
      .cf__submit も同じ「オレンジ地 + 濃紺文字」なので、ページの言語とも揃う。
   2. 補足コピーのオレンジ。カンプ実測 #F67400 は生成りの上で 2.8:1 しかない。
      同系で 4.64:1 になる #AB5E00 に落とした(級数を問わず AA)。
   3. カンプの級数は日本語が横に詰まった書体で描かれており、字面の高さから逆算すると
      advance と ink の高さがほぼ同値になる(実在しない詰め)。ページの Zen Kaku で
      同じ行長に収まる値を採り、フッターの級数はページ本文(最大15px)を超えない範囲に置いた。
   4. 端末画像はカンプでは版面右端より 33px 外に出ているが、フッターの版面右端と
      揃わないため版面内に収めた(差は 4.6%、見た目には出ない)。
   5. 端末素材は元 PNG(1536x1024)に透明の余白が入っており、そのままでは
      絵柄の右端を版面右端に合わせられない。絵柄の境界で切り出した 1337x848 を
      assets/cta/ に置いて使う(元 PNG は design-proposals 側にマスターとして残置)。
   6. 紙のテクスチャは用意された paper-cream.webp ではなく既存の var(--grain) を使う。
      直上の .fq(#FBF5EE + grain .08)と同じ材質で続けないと、この節だけ
      別のテクスチャ体系になる。
   7. カンプに無い要素は落とした: .foot__desc(サービス説明文)と .foot__wordmark(背文字)。
      → 811-819 / 856-858 / 1166-1169 / 1402 の .foot__wordmark 各規則は
        当たる要素が無くなったため死んだ規則。共有セレクタに混ざるため残置。
   8. 矢印はカンプの水平 → ではなくページ共通の #i-arrow(右上向き)。
      同じ「無料で相談」ボタンがヘッダ・ヒーローにもあり、そこだけ字形が変わるのを避けた。

   ■ 斜めの境界
   紺の面は .foot--gate の疑似要素だけを clip-path で切る。フッター本体・リンク・
   フォーカスリングは切らない。footer を --slant だけ上に引き、疑似要素の多角形も
   同じ --slant で降ろすので、斜めの最下点 = .pre の下端で必ず一致する。
   そのため .pre 側の下余白を「--slant + 逃げ」にすれば、版面左端(斜めが最も高い位置)
   でも本文が紺に飲まれない。フッター側の上余白も同じ理由で「--slant + 逃げ」。
   ========================================================= */

.pre--gate,
.foot--gate{
  --slant:clamp(24px,5.5vw,72px);
  --gate-paper:#FBF9F4;
  --gate-navy:#071527;
  --gate-cream:#FAF3E7;
  --gate-link:#DCE5EE;          /* 紺 #071527 上で 14.4:1 */
  --gate-legal:#C3CDD8;         /* 同 11.4:1。リンクより一段落とす */
  --gate-rule:rgba(211,222,232,.45);
  --gate-amber:#EC7604;
  /* カンプ実測の #F67400 は生成り上で 2.8:1 しかない。同系のまま
     4.5:1 を超える一番明るい値が #B25C00(4.51:1) */
  --gate-amber-text:#B25C00;
  --gate-on-amber:#0A1C32;      /* #EC7604 上で 5.82:1 */
}

/* =========================================================
   CTA(生成りの面)
   ========================================================= */
.pre--gate{
  background:var(--gate-paper);
  color:var(--ink);
  text-align:left;
  padding:clamp(52px,6.1vw,88px) clamp(24px,5vw,80px)
          calc(var(--slant) + clamp(20px,2vw,28px));
  overflow:visible;
}
/* 紙の面なので直上の .fq と同じ濃さ(.pre の元の .05 は紺地用の値) */
.pre--gate::before{opacity:.08}

.pre--gate .pre__in{
  max-width:1280px;margin:0 auto;
  container-type:inline-size;   /* 以下の cqw はこの版面幅が基準 */
  /* 列比の下敷きはカンプ実測(コピー 587 / 端末 749 / canvas 1323 = 44.4% : 56.6%)。
     ただしカンプの日本語は横に詰まった書体で描かれており、実在の Zen Kaku で
     同じ2行組(19字)を入れると 44.4% では収まらず3行に折れる。
     見出しが2行で収まる 46% までコピー列を広げ、その分を端末側で吸収した。
     自分の列幅と溝は cqw では取れないので % で持つ。
     右列の右端 = 版面右端にするため 46 + 1.6 + 52.4 = 100 */
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,52.4%);
  column-gap:1.6%;
  align-items:center;
}

/* ---------- 見出しと補足 ---------- */
.pre--gate .pre__t{
  font-family:var(--sans);font-weight:900;
  /* 2.38cqw = 30.5/1280。コピー列 46% に対し 19字 x 級数 x 0.98 = 44.3% なので、
     この比のままなら版面がどれだけ縮んでも2行目「商品ページの伝わり方を
     見直しませんか？」(19字)は必ず1行に収まる。
     下限20pxは切り替え幅(1023px以下は1カラム)より下でしか効かない保険。
     ここを22pxにすると 1024 付近だけ余裕が8pxになり、字送りが少し違う
     フォールバック書体で「んか？」が3行目に落ちる余地が残る */
  font-size:clamp(20px,2.38cqw,30.5px);
  line-height:1.68;letter-spacing:-.02em;
  color:var(--ink);
}
.pre--gate .pre__s{
  margin:clamp(14px,1.72cqw,22px) 0 0;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(14px,1.41cqw,18px);
  line-height:1.85;letter-spacing:0;
  color:var(--gate-amber-text);
}
/* 改行位置はカンプ2枚に合わせる。PC/SPで本文は重複させず、
   使う改行だけを出す(PC: 2行 / SP: 3行) */
.pre__br--sp{display:none}

/* ---------- ボタン ---------- */
.pre--gate .pre__cta{
  position:relative;display:block;box-sizing:border-box;
  width:min(100%,30.3cqw);          /* 388/1280 */
  margin-top:clamp(28px,3.44cqw,44px);
  border:0;border-radius:3px;
  background:var(--gate-amber);
  color:var(--gate-on-amber);
  font-family:var(--sans);font-weight:900;
  /* 級数21px・字送り.03em はカンプ実測(9字の字面 222px)に合わせた値。
     上下 padding 28 + 行box 29.4 = 高さ86px(カンプ実測 86px) */
  font-size:clamp(16px,1.64cqw,21px);line-height:1.4;letter-spacing:.03em;
  text-align:center;
  padding:clamp(18px,2.19cqw,28px) clamp(46px,4.7cqw,60px);
  transition:background-color .2s;
}
.pre--gate .pre__cta>span{display:block}
.pre--gate .pre__ctaic{
  position:absolute;top:50%;right:clamp(18px,2.34cqw,30px);
  transform:translateY(-50%);
  width:max(16px,1.72cqw);height:max(16px,1.72cqw);
  transition:transform .22s cubic-bezier(.22,.7,.3,1);
}
@media (hover:hover){
  .pre--gate .pre__cta:hover{background:#CE6A08}
  .pre--gate .pre__cta:hover .pre__ctaic{transform:translateY(-50%) translate(2px,-2px)}
}
/* 動きを減らす設定では色だけ変える。矢印は動かさない */
@media (prefers-reduced-motion:reduce){
  .pre--gate .pre__ctaic{transition:none}
  .pre--gate .pre__cta:hover .pre__ctaic{transform:translateY(-50%)}
}
.pre--gate .pre__cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- 端末 ---------- */
.pre--gate .pre__visual{margin:0}
.pre--gate .pre__visual img{
  width:100%;height:auto;
  /* 素材に端末の陰影が焼き込まれているので CSS の影は足さない */
}

/* =========================================================
   フッター(紺の床へ斜めで降りる)
   ========================================================= */
.foot--gate{
  position:relative;isolation:isolate;
  background:transparent;
  color:var(--gate-link);
  overflow:hidden;
  margin-top:calc(-1 * var(--slant));
  padding:calc(var(--slant) + clamp(20px,2vw,28px)) clamp(24px,5vw,80px) 0;
}
.foot--gate::before,
.foot--gate::after{
  content:"";position:absolute;inset:0;
  clip-path:polygon(0 0,100% var(--slant),100% 100%,0 100%);
  pointer-events:none;
}
.foot--gate::before{z-index:0;background:var(--gate-navy)}
.foot--gate::after{z-index:1;background-image:var(--grain);opacity:.05}
.foot--gate>*{position:relative;z-index:2}

/* clip-path が使えない環境では水平の境界に落とす。
   斜めが無くなる分、上に引くのも余分な上余白もやめる */
@supports not (clip-path:polygon(0 0,100% 0,100% 100%,0 100%)){
  .pre--gate{padding-bottom:clamp(48px,6vw,84px)}
  .foot--gate{
    margin-top:0;
    padding-top:clamp(56px,7vw,84px);
    background:var(--gate-navy);
  }
  .foot--gate::before{display:none}
  .foot--gate::after{clip-path:none}
}

.foot--gate .foot__in{
  max-width:1280px;margin:0 auto;
  container-type:inline-size;
  /* 43.9% : 56.1% はカンプ実測(ブランド列 581 / ナビ 742 / 版面 1323)。
     ナビ3列はその中で等分。溝はナビ側の列幅が持つ */
  display:grid;
  grid-template-columns:minmax(0,43.9%) minmax(0,56.1%);
  gap:0;
  align-items:start;
  padding-bottom:clamp(34px,4.2vw,58px);
}

/* ---------- ブランド ---------- */
/* ロックアップはフッターの見せ場なので、カンプ実測(マーク幅155 / 上段28 /
   下段45 / 溝32)をほぼそのまま採る。ナビと法務は本文の級数体系に合わせて
   小さく置くので、カンプよりロックアップが際立つ比になる */
.foot--gate .brand--foot{
  gap:clamp(14px,2.5cqw,32px);
  align-items:center;
  white-space:normal;
}
.foot--gate .brand--foot .brand__mark{width:clamp(96px,11.72cqw,150px)}
.foot--gate .brand--foot .brand__name{
  gap:2px;line-height:1.08;
  color:var(--gate-cream);
}
.foot--gate .brand--foot .brand__name-top{
  font-size:clamp(17px,2.19cqw,28px);font-weight:700;letter-spacing:-.01em;
}
.foot--gate .brand--foot .brand__name-main{
  font-size:clamp(26px,3.52cqw,45px);font-weight:900;letter-spacing:-.015em;
}
.foot--gate .brand--foot:focus-visible{outline:2px solid var(--gate-cream);outline-offset:4px}

/* ---------- ナビ ---------- */
.foot--gate .foot__nav{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
}
.foot--gate .foot__k{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(15px,1.41cqw,18px);line-height:1.5;
  color:var(--gate-cream);
  margin-bottom:clamp(13px,1.4cqw,18px);
}
.foot--gate .foot__col li{
  font-size:clamp(13.5px,1.14cqw,14.5px);line-height:1.7;
  margin-bottom:clamp(9px,1cqw,13px);
}
.foot--gate .foot__col li:last-child{margin-bottom:0}
.foot--gate .foot__col a,
.foot--gate .foot__col span{color:var(--gate-link)}
.foot--gate .foot__col a{
  display:inline-block;
  /* 44px の当たり判定を版面に効かせつつ、行間は詰めたままにする */
  padding:6px 0;margin:-6px 0;
  transition:color .2s;
}
@media (hover:hover){
  .foot--gate .foot__col a:hover{color:var(--gate-cream)}
}
.foot--gate .foot__col a:focus-visible{outline:2px solid var(--gate-cream);outline-offset:3px}

/* ---------- 法務・コピーライト ---------- */
.foot--gate .foot__legal{
  max-width:1280px;margin:0 auto;
  border-top:1px solid var(--gate-rule);
  padding:clamp(20px,2.3vw,28px) 0 clamp(26px,3vw,34px);
  display:flex;justify-content:space-between;align-items:center;
  gap:clamp(14px,2vw,32px);flex-wrap:wrap;
  font-size:clamp(11.5px,.98vw,13px);line-height:1.95;
  color:var(--gate-legal);
}
.foot--gate .foot__copy{white-space:nowrap;color:var(--gate-legal)}

/* 固定モバイルCTA(860px以下で出る)にコピーライトが隠れない高さを確保 */
@media (max-width:860px){
  .foot--gate .foot__legal{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* =========================================================
   1023px 以下: CTA を1カラムに
   ページの他の節は 899px で1カラムに落ちるが、この節は「長い日本語2行 +
   横に広い端末画像」なので 1024 より狭いと2カラムが破綻する(見出しが
   3行に折れて「んか？」が孤立する)。ここだけ切り替え幅を上げた。
   HTMLはPC/SPで二重化しない。.pre__copy を display:contents で
   ばらして「見出し → 補足 → 端末 → ボタン」の順に並べ替える
   ========================================================= */
@media (max-width:1023px){
  .pre--gate .pre__in{
    display:flex;flex-direction:column;align-items:stretch;
    max-width:660px;
  }
  .pre--gate .pre__copy{display:contents}
  /* 1カラムでは版面が 660 で止まるので cqw では級数が伸びない。
     ここだけ vw で持ち、640(SPの上限23px)から 1023(31px)まで連続させる */
  .pre--gate .pre__t{font-size:clamp(23px,2.9vw,31px)}
  .pre--gate .pre__t{order:1}
  .pre--gate .pre__s{order:2}
  .pre--gate .pre__visual{order:3;margin-top:clamp(22px,4vw,34px)}
  .pre--gate .pre__cta{order:4;width:100%}

  .foot--gate .foot__in{
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(30px,4.4vw,44px);
  }
}

/* =========================================================
   SP
   ========================================================= */
@media (max-width:640px){
  .pre--gate{
    padding-left:16px;padding-right:16px;
    padding-top:clamp(44px,14vw,56px);
  }
  .pre--gate .pre__in{max-width:none}
  /* 390 幅で 23px。320 幅でも「コンテンツで、商品ページの」(13字)が
     1行に収まる級数まで落とす */
  .pre--gate .pre__t{font-size:clamp(18.5px,5.9vw,23px);line-height:1.5}
  .pre--gate .pre__s{
    margin-top:clamp(10px,3.1vw,13px);
    font-size:clamp(12.5px,3.6vw,14px);line-height:1.62;
  }
  .pre--gate .pre__cta{
    margin-top:clamp(22px,5.6vw,26px);
    font-size:clamp(15px,4.1vw,16px);
    padding:clamp(16px,4.6vw,18px) 46px;
  }
  .pre--gate .pre__ctaic{right:16px;width:16px;height:16px}
  .pre__br--sp{display:inline}
  .pre__br--pc{display:none}

  .foot--gate{padding-left:16px;padding-right:16px}
  .foot--gate .brand--foot{gap:14px}
  .foot--gate .brand--foot .brand__mark{width:clamp(58px,20vw,78px)}
  .foot--gate .brand--foot .brand__name-top{font-size:clamp(12px,3.6vw,14px)}
  .foot--gate .brand--foot .brand__name-main{font-size:clamp(18px,5.4vw,21px)}

  /* 「お問合せ」「サービス内容」を2列、「会社概要」はその下に全幅
     (列比 57:43 はSPカンプ実測 396:307) */
  .foot--gate .foot__in{row-gap:24px}
  .foot--gate .foot__nav{
    grid-template-columns:minmax(0,57%) minmax(0,43%);
    row-gap:26px;
  }
  .foot--gate .foot__col--last{grid-column:1 / -1}
  .foot--gate .foot__k{font-size:clamp(13.5px,4vw,15px);margin-bottom:10px}
  /* カンプのSPは行の送りが21pxだが、それではリンクの当たり判定が
     21px しか取れない。行送り1.6 + 余白12 = 送り33.6 とし、上下7pxの
     padding をはみ出させて 35px 強を確保する(隣の当たり判定との重なりは2px)。
     44px にすると送りを44まで広げる必要があり、フッターが更に70px以上伸びる */
  .foot--gate .foot__col li{
    font-size:clamp(12.5px,3.6vw,13.5px);line-height:1.6;margin-bottom:12px;
  }
  .foot--gate .foot__col a{padding:7px 0;margin:-7px 0}

  .foot--gate .foot__legal{
    flex-direction:column;align-items:flex-start;
    gap:12px;
    padding-top:18px;
    font-size:clamp(10.5px,3vw,11.5px);line-height:1.9;
  }
  .foot--gate .foot__copy{white-space:normal}
}


/* =========================================================
   v27: CTA ボタン統一レイヤー  (.ubtn)
   ---------------------------------------------------------
   これまでセクションごとに 6 種類のボタンが別々に実装されていた
   (ヒーロー=角丸4px+ハード影 / KV下=影なし / 料金表=紺の線ボタン+
    オレンジのベタ / お問合せ=影も枠もないベタ+シェブロン /
    プレフッター=別のオレンジ #EC7604 / 固定バー=角丸12px)。
   承認済みのヒーローボタン「無料で相談する」を唯一の基準にして
   全部を 1 つのレシピへ寄せる。

   ■ 基準(ヒーロー実測 @1440: font-size 18px / 高さ64px)
       padding      1.16em 2.56em   (20.88 / 46.08)
       border       2px  #211C16     ← 角が甘くならないよう px 固定
       border-radius .24em          (4.32)
       box-shadow   .29em .29em 0    (5.18)
       アイコン      .96em / gap .56em  → 矢羽の見た目の間隔 15px
       letter-spacing 0              (カンプ実測: 7字の字面124px = 送り1em)
       hover        .12em 押し込んで影を .17em に縮める(色は変えない)

   幾何をすべて em で持つので、font-size を変えるだけで
   どのサイズでも「同じ形のボタン」になる。各セクションの派生
   クラスは font-size と配置(幅・余白)だけを受け持つ。
   ========================================================= */
/* v34: 角丸のグラデーションボタンへ。参考ボタンの実測は
   左 #FF6E00 → 右 #FF3B6B の横グラデ(文字の無い行で採寸)。
   面の色は変数で持たせてあるので、.ubtn--quiet のような派生が
   これまでどおり面だけ差し替えられる。
   枠と段差の影はやめ、面の色に寄せた短い影ひとつに置き換えた。 */
.ubtn{
  --ubtn-g1:#FF6E00;     /* 面 左 */
  --ubtn-g2:#FF5700;     /* 面 中 */
  --ubtn-g3:#FF3B6B;     /* 面 右 */
  --ubtn-label:#FFFFFF;  /* 文字 */
  --ubtn-edge:#211C16;   /* focus リング用に残す */
  --ubtn-shade:rgba(150,40,10,.34);

  display:inline-flex;align-items:center;justify-content:center;
  gap:.56em;
  box-sizing:border-box;
  font-family:var(--sans);font-weight:900;font-size:16px;
  line-height:1;letter-spacing:0;text-align:center;white-space:nowrap;
  padding:1.16em 2.56em;
  color:var(--ubtn-label);
  /* グラデは2倍幅の反転コピー(橙→桃→橙)。通常時は左半分が見えて
     従来どおりの配色、hover で background-position を右へ流すと
     面全体が滑らかに入れ替わる(使う色は変えない) */
  background-image:linear-gradient(90deg,
    var(--ubtn-g1) 0%, var(--ubtn-g2) 24%, var(--ubtn-g3) 50%,
    var(--ubtn-g2) 76%, var(--ubtn-g1) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  border:0;border-radius:999px;   /* 完全角丸 */
  box-shadow:0 .10em .22em -.06em var(--ubtn-shade);
  cursor:pointer;
  transition:background-position .5s ease, filter .2s, box-shadow .2s;
}
.ubtn .ic{width:.96em;height:.96em;flex:none;transition:transform .25s ease}
@media (hover:hover){
  .ubtn:hover{
    background-position:100% 50%;
    box-shadow:0 .16em .34em -.06em var(--ubtn-shade);
  }
  .ubtn:hover .ic{transform:translateX(.14em)}
}
.ubtn:active{filter:brightness(.96);box-shadow:0 .05em .12em -.04em var(--ubtn-shade)}
.ubtn:focus-visible{outline:2px solid var(--ubtn-edge);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .ubtn,.ubtn .ic{transition:none}
}

/* --- ヘッダー(常時表示) --- */
.ubtn--sm{font-size:13px}

/* --- ヒーロー: 基準。版面に対して伸縮させる --- */
.ubtn--hero{font-size:1.25vw}

/* --- KVフッター「フォームで相談する」 --- */
.ubtn--kvf{min-width:calc(280 * var(--u));font-size:calc(17 * var(--u))}

/* --- お悩みブロック「まずは相談してみる」 --- */
.ubtn--wide{font-size:clamp(17px,1.45vw,21px)}

/* --- 料金表: 3プランとも同じボタン。
       横幅をセルいっぱいに揃えて 3 本を同じ基準線に乗せる --- */
.ubtn--plan{width:100%;font-size:max(12.5px,1.3cqw)}

/* --- お問合せフォーム送信(紺地)。
       枠と影は墨(#211C16)だと紺に沈むので、紺より暗い影色に差し替える --- */
.ubtn--form{
  --ubtn-edge:#F9F4EC;
  --ubtn-shade:rgba(0,0,0,.34);   /* 紺地なので暖色の影は沈む */
  width:100%;margin-top:clamp(20px,2.6cqw,30px);
  font-size:clamp(15px,1.65cqw,19px);
}

/* --- プレフッターCTA --- */
.ubtn--gate{
  width:min(100%,30.3cqw);            /* 388/1280 */
  margin-top:clamp(28px,3.44cqw,44px);
  font-size:clamp(16px,1.64cqw,21px);
}

/* --- モバイル固定バー ---
   バーの地が墨だったため、枠も影も沈んで 2 つのボタンだけが
   ページの他と違う「平らなボタン」に見えていた。地を紙色に戻し、
   上端を 2px の墨罫で締めると、他のセクションと同じ立体に読める。
   電話は副action なので面だけ落とし、箱は完全に同じものを使う。 */
.mcta{
  background:var(--paper);
  border-top:2px solid #211C16;
  box-shadow:none;                    /* にじむ影は罫に置き換える */
}
.mcta .ubtn--bar{
  width:100%;font-size:14px;padding:1.16em 1em;gap:.56em;
  border:0;                           /* 旧層の .mcta a{border:2px} を打ち消す */
  border-radius:999px;                /* .mcta a の 6px を上書き */
  box-shadow:0 .10em .22em -.06em var(--ubtn-shade);
}
.mcta .ubtn--bar .ic{width:.96em;height:.96em}
/* 電話は副action。面はグラデを使わず墨一色に落とす */
.ubtn--quiet{--ubtn-g1:#2E251B;--ubtn-g2:#2E251B;--ubtn-g3:#2E251B;
  --ubtn-label:#F4EFE6;--ubtn-shade:rgba(0,0,0,.30)}
.mcta .ubtn--quiet .ic{color:var(--amber-hi)}

/* ---------- レスポンシブ: font-size と配置だけ ---------- */
@media (max-width:1023px){
  /* .pre__copy が display:contents になるので、CTA自身が並び順を持つ */
  .ubtn--gate{order:4;width:100%}
}
@media (max-width:900px){
  .ubtn--hero{font-size:16px}
  .ubtn--kvf{min-width:0;font-size:16px}
}
/* 料金表は 899px 以下でカード積みになり、ボタンがカード全幅に伸びる。
   表組み用の 1.3cqw のままだと幅に対して級数が細りすぎるので上げる */
@media (max-width:899px){
  .ubtn--plan{font-size:clamp(14px,3.9vw,15.5px)}
}
@media (max-width:640px){
  .ubtn--gate{margin-top:clamp(22px,5.6vw,26px);font-size:clamp(15px,4.1vw,16px)}
}
@media (max-width:600px){
  .ubtn--kvf{width:100%}
}
@media (max-width:400px){
  .ubtn--hero{font-size:15px}
  .ubtn--wide{font-size:16px}
}

/* =========================================================
   v28: 2026-08-02 表示修正レイヤー
   検証済みの表示不具合だけを、最小差分で打ち消す層。
   既存レイヤーの意匠判断は変更しない。
   (A1 / A4 / A8 / A9 は原因行を直接修正したのでここには無い)
   ========================================================= */

/* ---- A2: SPでも特徴4項目を2×2に詰める ----
   かつては ≤640 で1カラムに落として字を戻していたが、
   SPでも2×2に収める指示に合わせて列を維持し、級数と隙間を落とす。 */
@media (max-width:640px){
  .about__calls{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:14px 10px;
    margin-block:18px 14px;
  }
  .ac__reg{width:16px;height:16px;margin-bottom:6px}
  .ac__t{font-size:clamp(12px,3.15vw,14px);line-height:1.4}
  .ac__t::after{width:clamp(44px,16vw,64px);height:5px;margin-top:6px}
  .ac__d{margin-top:7px;font-size:clamp(10.5px,2.75vw,12px);line-height:1.6}
}

/* ---- A3(F21): ≤640 で strength のナンバータイルが上寄せ・幅不揃い・左ボーダー密着 ----
   ≤640 で .ptask が2行グリッドになるのに .ptask__no に grid-row 指定が無く、
   1行目だけに置かれて上寄せ(実測 上12px / 下33.8px)になっていた。
   2行にまたがらせて上下中央に置き、番号列・アイコン列を 40px で揃える。 */
@media (max-width:640px){
  .ptask__no{
    grid-row:1 / span 2;align-self:center;
    justify-content:center;padding-inline:0;
    inline-size:40px;block-size:40px;    /* 番号列・アイコン列と同じ 40px */
  }
}

/* ---- A5(F09): about 中段コールアウトの見出しがモック画像に食い込む ----
   実測1440: 1行目 ink右端 335.2 / .about__fig 左端 312.5 → 22.7px の重なり。
   注釈は画像左端から 140画像px の帯に置く設計だが、この見出しだけ1行が
   10文字(兄弟は8文字)あり、16.5画像px のままでは 157画像px 必要で必ずはみ出す。
   文言・2行組み・左端の位置は変えず、この見出しだけ級数と字送りを落として収める。
   ※仕様の「ガター24px以上」は、2行組みと見出しの級数階層を保ったままでは
     幾何的に不可能(24px確保には約12.6画像px = 本文とほぼ同寸まで落とす必要)。
     ここでは 14画像px とし、1440で 12.8px / 1180で 11.6px を確保(兄弟は9px前後)。 */
@media (min-width:1180px){
  .ac--mods .ac__t{font-size:calc(14 * var(--u));letter-spacing:-.01em}
}

/* ---- A6(F16): 送信ボタンのフォーカスリングが紺地で不可視 ----
   .ubtn--form は --ubtn-edge:#03101E。地の #0A1C32 に対し 1.11:1 でリングが見えない。
   このボタンのリングだけクリームに差し替える(他の .ubtn は従来どおり墨)。 */
.ubtn--form:focus-visible{outline-color:#F9F4EC;outline-offset:3px}

/* ---- A7(F23): 同意チェックボックスが18px ---- */
.cf__agree input{width:max(22px,1.75cqw);height:max(22px,1.75cqw)}

/* ---- A7(F22): フッターの隣接リンクのタップ領域が2px重なる ----
   行送り33.6px に対しヒット領域35.6px。送りを37.6pxにして重なりを解消する。 */
@media (max-width:640px){
  .foot--gate .foot__col li{margin-bottom:16px}
}

/* ---- A10(F43): sec20下部3項目の見出しが3番目だけ7px上 ----
   li が外側gridに引き伸ばされ、余った高さが auto 行(見出し行・本文行)に
   分配されるため、本文が1行の項目だけ見出しの中央位置がずれていた。
   行を「見出し=auto / 本文=残り」に固定し、見出しと本文は行の先頭へ、
   アイコンは従来どおり2行にまたがって上下中央。3列とも同じ基準線に乗る。
   (1カラムになる ≤899 は元から align-items:start で揃っているので触らない) */
@media (min-width:900px){
  .sec20__specs li{grid-template-rows:auto 1fr}
  .sec20__specs b,
  .sec20__specs p{align-self:start}
}

/* ---- A8(F26): sec20 の見出しを h2 → h3 にした分の見た目固定 ----
   .sec20__h には font-size 指定が無く、h2 既定(1.5em)に依存していた。
   h3 既定(1.17em)になると letter-spacing(-.025em)の実寸が変わるため、
   従前と同じ 1.5em に固定する。 */
.sec20__h{font-size:1.5em}

/* ---- B2(F32): サンプル画像の webp 化に伴う <picture> ラッパの無害化 ----
   img を <picture> で包んだが、picture は既定でインライン。
   .arch__card(ブロック配置)でも .lb__body .zoombox(grid)でも
   img が今までどおり直接の子として振る舞うよう、箱を消す。 */
.zoombox picture{display:contents}

/* ---- B3(F07): 390 で CVR グラフが見切れる(スクロールの手がかりが無い) ----
   .cvr .chartwrap は overflow-x:auto、中の svg は ≤640 で min-width:560px。
   390 の可視幅は 326px しかなく、「+120万円の利益差!」の吹き出しが
   右端で細片として断ち切られたまま止まって見えていた。
   ・.chartwrap を .chartscroll でくるみ(スクロールしない親)、その右端に
     多段イーズのフェードを重ねて断ち切りを隠す。
     ::after を .chartwrap 自身に置くと、スクロールコンテナの内容と一緒に
     流れてしまって右端に留まらないため、必ず外側に置く。
   ・フェードの終端色はシートの実色 var(--cvr-sheet)(#FBF9F7)。
   ・対応ブラウザではスクロール位置に連動させ、右端まで送るとフェードが消える。
   ・グラフ直下に一行のヒント(装飾なし・本文インク系)。
   641px 以上では .chartscroll は素通しの div のまま(指定なし)。 */
.chartscroll__hint{display:none}
@media (max-width:640px){
  .chartscroll{position:relative}
  .chartscroll::after{
    content:"";position:absolute;z-index:1;pointer-events:none;
    /* 26px: 1本目の吹き出し「+60万円の利益差!」の字尻(可視域の18px手前で
       終わる)に濃いフェードが掛からず、かつ2本目の吹き出しの4pxの断ち切り
       細片は完全に覆いきる幅。これ以上広げると読める文字を消してしまう。 */
    top:0;bottom:0;right:0;width:26px;
    background:linear-gradient(to right,
      rgba(251,249,247,0)    0%,
      rgba(251,249,247,.018) 8%,
      rgba(251,249,247,.069) 16%,
      rgba(251,249,247,.156) 25%,
      rgba(251,249,247,.255) 33%,
      rgba(251,249,247,.381) 42%,
      rgba(251,249,247,.5)   50%,
      rgba(251,249,247,.619) 58%,
      rgba(251,249,247,.745) 67%,
      rgba(251,249,247,.844) 75%,
      rgba(251,249,247,.931) 84%,
      rgba(251,249,247,.982) 92%,
      rgba(251,249,247,1)    100%);
  }
  /* .arch__hint / .cuts__hint と同じ調子(12px・本文の淡いインク・装飾なし) */
  .chartscroll__hint{
    display:block;margin:12px 0 0;
    font-size:12px;line-height:1.6;color:var(--ink3);
  }
  /* 右端まで送りきったらフェードを引く(非対応ブラウザは静的フェードのまま) */
  @supports (animation-timeline:scroll()){
    .chartscroll{timeline-scope:--cvrchartx}
    .cvr .chartwrap{scroll-timeline:--cvrchartx inline}
    .chartscroll::after{
      animation:cvrChartFadeOut linear both;
      animation-timeline:--cvrchartx;
      animation-range:78% 100%;
    }
  }
}
@keyframes cvrChartFadeOut{to{opacity:0}}

/* ---- B4(F34): ヒーロー写真 → KV下の紙面へのハードシーム ----
   ≥901 では .hero__in が KV を background で敷き、その下端(1440で y=962)で
   全幅が写真 → クリームへ 1px で切り替わっていた(マスク・フェード行ゼロ)。
   下端に「透明 → 紙色」の 13段スムーズステップを重ね、境界では完全不透明に
   する。最終色は境界直下の実測値 #F7F2E9 に合わせてあるので、
   重ねる = 画像側をマスクするのと数学的に等価になり、継ぎ目が生まれない。
   z-index:0 で .hero__copy(見出し/リード/CTA)より背面。高さは KV の 16%
   (1440で約142px)で、端末モックの下端よりさらに下の無地部分だけに掛かる。
   ≤900 は .hero__mbg 側に既に下端マスク(93.5%→100%)があるので触らない。 */
@media (min-width:901px){
  /* 幾何的には重ならないが、順序で必ず上に来るようにしておく */
  .hero__copy{z-index:1}
  .hero__in::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    left:0;right:0;bottom:0;height:12%;
    background:linear-gradient(to bottom,
      rgba(247,242,233,0)    0%,
      rgba(247,242,233,.018) 8%,
      rgba(247,242,233,.069) 16%,
      rgba(247,242,233,.156) 25%,
      rgba(247,242,233,.255) 33%,
      rgba(247,242,233,.381) 42%,
      rgba(247,242,233,.5)   50%,
      rgba(247,242,233,.619) 58%,
      rgba(247,242,233,.745) 67%,
      rgba(247,242,233,.844) 75%,
      rgba(247,242,233,.931) 84%,
      rgba(247,242,233,.982) 92%,
      rgba(247,242,233,1)    97%,
      rgba(247,242,233,1)    100%);
  }
}

/* ---- B6(F06): ヒーローリード文の白フチが細く、紺地の上で読み負担がある ----
   .hero__lead は #211C16 の文字。2行目が背景写真の濃紺(実質 1.10:1)を
   横切るため、可読性はすべて白フチが担っている。既存は 16方向(.28vw)+
   8方向(.14vw)の2重リングで、実効幅が 4.03px しかなかった。
   外側に 24方向 .42vw(=1.5倍・1440で6.05px)のリングを足し、既存の2重は
   そのまま内側の充填として残す(段差は約2pxで従来と同じ=隙間が出ない)。
   書体 Zen Kaku Gothic New は 700 の次が 900 しかなく、一段上げると
   リード文の級数バランスが変わるため、太さは 700 のまま据え置く。
   文言・位置・行分割は変更しない。 */
@media (min-width:901px){
  .hero__lead{
    text-shadow:
      0.42vw 0 0 #fff,0.406vw 0.109vw 0 #fff,0.364vw 0.21vw 0 #fff,0.297vw 0.297vw 0 #fff,
      0.21vw 0.364vw 0 #fff,0.109vw 0.406vw 0 #fff,0 0.42vw 0 #fff,-0.109vw 0.406vw 0 #fff,
      -0.21vw 0.364vw 0 #fff,-0.297vw 0.297vw 0 #fff,-0.364vw 0.21vw 0 #fff,-0.406vw 0.109vw 0 #fff,
      -0.42vw 0 0 #fff,-0.406vw -0.109vw 0 #fff,-0.364vw -0.21vw 0 #fff,-0.297vw -0.297vw 0 #fff,
      -0.21vw -0.364vw 0 #fff,-0.109vw -0.406vw 0 #fff,0 -0.42vw 0 #fff,0.109vw -0.406vw 0 #fff,
      0.21vw -0.364vw 0 #fff,0.297vw -0.297vw 0 #fff,0.364vw -0.21vw 0 #fff,0.406vw -0.109vw 0 #fff,
      0.28vw 0 0 #fff,0.259vw 0.107vw 0 #fff,0.198vw 0.198vw 0 #fff,0.107vw 0.259vw 0 #fff,
      0 0.28vw 0 #fff,-0.107vw 0.259vw 0 #fff,-0.198vw 0.198vw 0 #fff,-0.259vw 0.107vw 0 #fff,
      -0.28vw 0 0 #fff,-0.259vw -0.107vw 0 #fff,-0.198vw -0.198vw 0 #fff,-0.107vw -0.259vw 0 #fff,
      0 -0.28vw 0 #fff,0.107vw -0.259vw 0 #fff,0.198vw -0.198vw 0 #fff,0.259vw -0.107vw 0 #fff,
      0.14vw 0 0 #fff,0.099vw 0.099vw 0 #fff,0 0.14vw 0 #fff,-0.099vw 0.099vw 0 #fff,
      -0.14vw 0 0 #fff,-0.099vw -0.099vw 0 #fff,0 -0.14vw 0 #fff,0.099vw -0.099vw 0 #fff;
  }
}
/* ≤900(縦組みKV)も同じ比率で。既存 2px/1px に 3px の外周を足す。 */
@media (max-width:900px){
  .hero__lead{
    text-shadow:
      3px 0 0 #fff,2.898px 0.776px 0 #fff,2.598px 1.5px 0 #fff,2.121px 2.121px 0 #fff,
      1.5px 2.598px 0 #fff,0.776px 2.898px 0 #fff,0 3px 0 #fff,-0.776px 2.898px 0 #fff,
      -1.5px 2.598px 0 #fff,-2.121px 2.121px 0 #fff,-2.598px 1.5px 0 #fff,-2.898px 0.776px 0 #fff,
      -3px 0 0 #fff,-2.898px -0.776px 0 #fff,-2.598px -1.5px 0 #fff,-2.121px -2.121px 0 #fff,
      -1.5px -2.598px 0 #fff,-0.776px -2.898px 0 #fff,0 -3px 0 #fff,0.776px -2.898px 0 #fff,
      1.5px -2.598px 0 #fff,2.121px -2.121px 0 #fff,2.598px -1.5px 0 #fff,2.898px -0.776px 0 #fff,
      2px 0 0 #fff,1.848px 0.765px 0 #fff,1.414px 1.414px 0 #fff,0.765px 1.848px 0 #fff,
      0 2px 0 #fff,-0.765px 1.848px 0 #fff,-1.414px 1.414px 0 #fff,-1.848px 0.765px 0 #fff,
      -2px 0 0 #fff,-1.848px -0.765px 0 #fff,-1.414px -1.414px 0 #fff,-0.765px -1.848px 0 #fff,
      0 -2px 0 #fff,0.765px -1.848px 0 #fff,1.414px -1.414px 0 #fff,1.848px -0.765px 0 #fff,
      1px 0 0 #fff,0.707px 0.707px 0 #fff,0 1px 0 #fff,-0.707px 0.707px 0 #fff,
      -1px 0 0 #fff,-0.707px -0.707px 0 #fff,0 -1px 0 #fff,0.707px -0.707px 0 #fff;
  }
}

/* ---- B5(F36): 左右マージンを本文グリッドへ統一 ----
   本文セクションは max-width:1200 中央寄せ(1440で左端112.5px / 390で16px)。
   これに対し nav(100.5px)・pre/foot(72.5px)だけが別の版面幅を持っていた。
   また 390 では hero / kvf / about / cvr / worry / flw だけが 20〜22px だった。
   1440・390 の二点で本文と同じ数値に合わせる。
   ※ strength / smp / sec20 / prc / fq / cnt は既に16pxで正しく、しかも
     cqw 基準の精密実装なのでコンテナ幅には一切触らない。 */

/* 1) ナビ: FV と同じ全幅。左右ガターは FV コピーの左端 70u(1440基準)に揃える。 */
.nav__in{
  --nav-gut:max(16px, calc(70 / 1440 * 100vw));
  max-width:none;
  width:100%;
  padding-inline:var(--nav-gut);
}

/* 2) CTA帯 / フッター: 版面を 1280 → 1200 に。
      1440 → 72(セクションpadding) + (1281-1200)/2 = 112.5px。
      1023以下は1カラム用の max-width が別にあるので、そこには入らない。 */
@media (min-width:1024px){
  .pre--gate .pre__in,
  .foot--gate .foot__in,
  .foot--gate .foot__legal{max-width:1200px}   /* 注記帯は foot__in の外なので個別に */
}

/* 3) 390: 旧レイヤーのセクションのテキストガターを 20〜22px → 16px へ。
      ヒーローのKV画像(.hero__mbg)は全幅ブリードのままで触らない。 */
@media (max-width:640px){
  .hero__in{padding-left:16px;padding-right:16px}
  .kvf{padding-left:16px;padding-right:16px}
  .about__head{padding-inline:16px}
  .about__lead{padding-inline:16px}
  .about__plate{padding-inline:16px}
  .cvr{padding-left:16px;padding-right:16px}
  .worry{padding-left:16px;padding-right:16px}
  .flw__in>*{--gut:16px}
  /* キッカーだけ 2px の光学ずらしが入っていた。リード文と同じ軸へ戻す
     (見出しSVGはアートワーク側に約8pxのベアリングがあり、画像は触らない) */
  .hero__service{margin-left:0}
}

/* ---- B7(F22追補): 834幅でフッターの隣接リンクのヒット領域が3px重なる ----
   A7 で ≤640 は解消したが、641px以上を支配しているのは
   .foot--gate .foot__col li の margin-bottom:clamp(9px,1cqw,13px)(style.css:5365)。
   834 では foot__in が 736px = 1cqw 7.36px で下限の 9px に張り付き、
   行送り 31.95px に対しリンクのヒット領域(行高22.95 + 上下padding 6)が
   34.95px あって 3.0px 食い込んでいた。
   下限を 12.5px に上げ、どの幅でも「行送り ≧ ヒット領域 + 0.5px」を満たす。
   (≤640 は A7 の 16px がそのまま効くよう、この指定は 641px 以上に限定する) */
@media (min-width:641px){
  .foot--gate .foot__col li{margin-bottom:clamp(12.5px,1cqw,13px)}
}

/* =========================================================
   v29: 2026-08-02 アニメーションレイヤー
   ---------------------------------------------------------
   検証済みの動き提案12点の実装。方針:
   ・コンテンツは既定で可視。opacity:0 を初期状態に持つ動きは作らない
     (入りは transform / clip-path / stroke-dashoffset のみ)
   ・すべて body.js ゲート + prefers-reduced-motion 分岐。リビールは一度きり
   ・イージングと拍はページ既存の言語:
     cubic-bezier(.22,.7,.3,1) 系 / stagger 90ms(kvf 筆線と同じ刻み)
   ・静的な見た目(位置・色・サイズ)は変えない。動きを足すだけ
   ========================================================= */

/* ---------- 提案2(下ごしらえ): 筆線を background から ::after オーバーレイへ ----------
   静的な見た目は同一。clip-path で「引く」ために文字と別レイヤーにする。
   (background のまま clip すると文字ごと欠け、background-size を動かすと
    preserveAspectRatio:none の筆が横に潰れて伸びるため)
   幾何は元の background 指定の等価変換:
   ・.strength__eyebrow  50% 100% / 86% .34em → left/right:7% + height:.34em
   ・.sblk__tag           0 100% / 100% .4em
   ・.sblk__h--lead em    0 100% / 100% .36em
   ・.cvr .mky            0 100% / 100% .5em(v14 レイヤーの上書き値) */
.strength__eyebrow,.sblk__tag,.sblk__h--lead em,.cvr .mky{
  position:relative;z-index:0;background:none;
}
.strength__eyebrow::after,.sblk__tag::after,.sblk__h--lead em::after,.cvr .mky::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:0;right:0;bottom:0;
  background:var(--brush) no-repeat 0 0/100% 100%;
}
.strength__eyebrow::after{left:7%;right:7%;height:.34em}
.sblk__tag::after{height:.4em}
.sblk__h--lead em::after{height:.36em}
.cvr .mky::after{height:.5em}

/* ---------- 提案10(静的部分): + が90度回りながら1本に畳まれる ----------
   開いた状態の見た目は従来と同一(オレンジの水平バー)。
   コンテナごと回すため、畳むのは縦棒(::after)ではなく横棒(::before)側。
   回転後は ::after(ローカル縦)が画面上の水平になる。 */
.fq__item[open] .fq__ic{transform:rotate(90deg)}
.fq__item[open] .fq__ic::before{transform:scaleX(0)}
.fq__item[open] .fq__ic::after{transform:rotate(90deg)}

/* ---------- 提案12(静的部分): 固定ナビの現在地(.is-here) ----------
   下線もドットも足さない。インクの濃度と太さだけで示す。
   ::after が太字幅を予約するので、太字化しても隣のリンクは動かない(CLSゼロ)。 */
.nav__links a::after{
  content:attr(data-t);display:block;height:0;overflow:hidden;visibility:hidden;
  font-weight:900;pointer-events:none;
}
.nav__links a.is-here{color:var(--ink);font-weight:900}

@media (prefers-reduced-motion: no-preference){

  /* ---------- 提案2: 筆線が「引かれる」(kvfBrush と同じ尺・イージング) ---------- */
  @keyframes brushDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  body.js .about__head.rv.in .about__brush,
  body.js .strength__head.rv.in .strength__eyebrow::after,
  body.js .sblk.rv.in .sblk__tag::after,
  body.js .sblk--03.rv.in .sblk__h--lead em::after,
  body.js .cvr__head.rv.in .mky::after,
  body.js .ptasks.rv.in .ptasks__title::after{
    animation:brushDraw .58s cubic-bezier(.22,.72,.3,1) .26s backwards;
  }
  /* 結びの筆線だけは丸囲みの後(提案3と連結して1本の手の動きにする) */
  body.js .sconc.rv.in .sconc__big::after{
    animation:brushDraw .58s cubic-bezier(.22,.72,.3,1) .94s backwards;
  }

  /* ---------- 提案3: 「特化」の丸囲みが描かれる ----------
     旧実装(stroke-dasharray:100 + pathLength)は v30 で撤去した。
     vector-effect:non-scaling-stroke の path は Chromium がダッシュ距離を
     スクリーン座標系で計算するため、pathLength=100 の正規化が効かず、
     幅・DPR・ズーム依存でリングが一周しない(実測: 1440/DPR2 で右側欠け)。
     現行実装は v30 の conic-gradient マスク(ringSweep)。 */

  /* ---------- 提案5: 料金表の目盛りレールが通り、ノードとバッジが据わる ----------
     列(subgrid)と罫は絶対に動かさない。動くのは目盛り行の中身とバッジだけ。
     セルごと clip するので線とノードが同時に現れ、線の端の形は変わらない。
     ノードの据わりは about のトンボ(acReg)と同じオーバーシュート。 */
  @keyframes prcRail{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes prcSet{from{transform:scale(.42)}to{transform:none}}
  /* バッジは「タグを面に留める」所作。ディレイ中も backwards の from が見えるため、
     from はほぼ据わった姿(6px上・94%)にして、待ち時間が壊れて見えないようにする */
  @keyframes prcBadge{from{transform:translateY(-6px) scale(.94)}to{transform:none}}
  body.js .prc__matrix.rv.in .prc__plan>.prc__dot{animation:prcRail .5s cubic-bezier(.4,0,.2,1) backwards}
  body.js .prc__matrix.rv.in .prc__plan--b>.prc__dot{animation-delay:.34s}
  body.js .prc__matrix.rv.in .prc__plan--c>.prc__dot{animation-delay:.68s}
  body.js .prc__matrix.rv.in .prc__plan>.prc__dot i{animation:prcSet .42s cubic-bezier(.3,1.35,.5,1) .18s backwards}
  body.js .prc__matrix.rv.in .prc__plan--b>.prc__dot i{animation-delay:.52s}
  body.js .prc__matrix.rv.in .prc__plan--c>.prc__dot i{animation-delay:.86s}
  body.js .prc__matrix.rv.in .prc__badge{animation:prcBadge .38s cubic-bezier(.3,1.35,.5,1) .62s backwards}
  body.js .prc__matrix.rv.in .prc__plan--c .prc__badge{animation-delay:.96s}

  /* ---------- 提案6: 「伝わる20秒」の時間軸が実際に走る ----------
     ブロック共通の rise は解除し、シーケンスで組み直す:
     カットが .3s 刻みで着地 → オレンジの軸が linear で通り(時間は等速で流れる)、
     軸の先端が届いた瞬間に各ドットが据わる(軸 1.4s ÷ 4区間 = .35s 刻み)。
     合計約2秒は「20秒を圧縮した尺」という意味を持つ一度きりのナラティブ。 */
  @keyframes s20Run{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes s20Set{from{transform:scale(.42)}to{transform:none}}
  @keyframes s20Cut{from{transform:translateY(10px)}to{transform:none}}
  body.js .cuts.rv.in{animation:none}
  body.js .cuts.rv.in .cuts__track i{animation:s20Run 1.4s linear .25s backwards}
  body.js .cuts.rv.in .cuts__dot{
    animation:s20Set .34s cubic-bezier(.3,1.35,.5,1) backwards;
    animation-delay:calc(.25s + var(--i,0) * .35s);
  }
  body.js .cuts.rv.in .cuts__rail li{
    animation:s20Cut .5s cubic-bezier(.22,.7,.3,1) backwards;
    animation-delay:calc(var(--i,0) * .3s);
  }

  /* ---------- 提案7: ヒーローの順据わり ----------
     サービス名 → 見出し → リード → CTA。ヒーローは常に画面上端にあるので
     IO を使わず body.js 直下で発火する。.hero__copyimg は LCP なので
     transform のみ(opacity には一切触れない)。 */
  body.js .hero__service{animation:rise .6s cubic-bezier(.22,.7,.3,1) backwards}
  body.js .hero__copyimg{animation:rise .6s cubic-bezier(.22,.7,.3,1) .06s backwards}
  body.js .hero__lead{animation:rise .6s cubic-bezier(.22,.7,.3,1) .12s backwards}
  body.js .hero__cta{animation:rise .6s cubic-bezier(.22,.7,.3,1) .18s backwards}

  /* ---------- 提案8: 5工程が左から順に据わり、連結線が1本ずつ伸びる ----------
     スラブごとの共通 rise は解除し、見出し → カード → 連結線 → 番号札の
     時系列で組み直す(「一気通貫」の工程順をそのまま動きに乗せる)。
     刻みは 90ms(kvf 筆線と同じ拍)。 */
  body.js .ptasks.rv.in{animation:none}
  body.js .ptasks.rv.in .ptasks__title{animation:rise .5s cubic-bezier(.22,.7,.3,1) backwards}
  @keyframes ptSet{from{transform:translateY(12px)}to{transform:none}}
  body.js .ptasks.rv.in .ptask{
    animation:ptSet .46s cubic-bezier(.22,.7,.3,1) backwards;
    animation-delay:calc(.12s + var(--n,0) * .09s);
  }
  @media (min-width:900px){
    /* 連結線は次のカードが据わる直前に、前のカードから伸びて届く */
    @keyframes ptLink{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
    body.js .ptasks.rv.in .ptask+.ptask::before{
      animation:ptLink .26s cubic-bezier(.22,.7,.3,1) backwards;
      animation-delay:calc(.07s + var(--n,0) * .09s);
    }
    /* 番号札は判子。既存の translate を from にも書く(欠かすと札が中央からずれる) */
    @keyframes ptStamp{from{transform:translate(-50%,-58%) scale(.5)}to{transform:translate(-50%,-58%)}}
    body.js .ptasks.rv.in .ptask__no{
      animation:ptStamp .4s cubic-bezier(.3,1.35,.5,1) backwards;
      animation-delay:calc(.26s + var(--n,0) * .09s);
    }
  }

  /* ---------- 提案10: FAQ がなめらかに開閉する(Chromium 131+) ----------
     非対応(Safari/Firefox)は従来の即時展開 + fqOpen のまま何も壊れない。 */
  .fq__ic{transition:transform .28s cubic-bezier(.22,.7,.3,1)}
  @supports (interpolate-size: allow-keywords){
    .fq__item{interpolate-size:allow-keywords}
    .fq__item::details-content{
      block-size:0;overflow:hidden;
      transition:block-size .32s cubic-bezier(.22,.7,.3,1),content-visibility .32s allow-discrete;
    }
    .fq__item[open]::details-content{block-size:auto}
    /* 高さが動く環境では fqOpen の translateY(-5px) が展開方向と喧嘩する。
       フェード(.4→1)だけ残す */
    .fq__item[open] .fq__a{animation-name:fqOpenFade}
    @keyframes fqOpenFade{from{opacity:.4}}
  }

  /* ---------- 提案11: フォームの手応え ----------
     エラー行は 180ms のスライドイン(hidden が外れた瞬間に一度だけ走る)。
     完了パネルは判子が据わる所作(acReg と同じオーバーシュート値)。 */
  @keyframes errIn{from{transform:translateY(-6px)}to{transform:none}}
  body.js .cf__err,body.js .cf__field-err{animation:errIn .18s cubic-bezier(.22,.7,.3,1) backwards}
  @keyframes stampIn{from{transform:scale(.965)}to{transform:none}}
  body.js .cf__done{animation:stampIn .34s cubic-bezier(.3,1.35,.5,1) backwards}
}

/* ---------- 提案7b: ヒーローの微パララックス(PCのみ) ----------
   スクロールで KV から抜ける間、コピー層だけがわずかに先行して奥行きを作る。
   animation-range を exit に限定: exit 開始前は fill:both が from(静止位置)を
   保持するため、読み込み直後の表示は1pxもズレない。
   非対応ブラウザは素の位置で静止するだけで何も欠けない(.flw の前例と同じ書き方)。 */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body.js .hero__copy{
      animation:heroLift linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes heroLift{to{transform:translateY(-2.2vw)}}
  }
}

/* ---------- オプションb: アーカイブ4点カードの hover フィードバック ----------
   トーンのみ(縁のインクを締め、名前のインクを一段濃く)。
   持ち上げ・スケール・影の膨張は使わない(.ubtn の press とは別の、静かな応答)。
   transition は既存の .35s(zoombox / arch__name)をそのまま使う。 */
@media (hover:hover){
  .arch__item:not(.is-on) .arch__card:hover .zoombox{box-shadow:0 0 0 1.5px var(--smp-navy) inset}
  .arch__item:not(.is-on):has(.arch__card:hover) .arch__name{color:var(--ink2)}
}

/* =========================================================
   v30: 2026-08-02 round2(丸囲み修正・カルーセル・cvrパララックス)
   ========================================================= */

/* ---- R1: 「特化」の丸囲みを conic マスクで描く ----
   ダッシュはスクリーン座標依存(v29 の注記参照)なので使わない。
   svg 要素そのものに conic-gradient のマスクを当て、登録済みカスタム
   プロパティ --ringa(角度)を 360deg→0deg へ動かして「回りながら現れる」。
   ・from 49.4deg = path 始点(94,14)の箱内角度。箱のアスペクトは em 比例で
     一定(1.277)なので、この角度はどの幅でも始点と一致する。
   ・負方向(反時計回り)= 実際のペンの運びと同じ向き。
   ・終値 0deg = マスク全面黒 = マスク無しと同一。@property 非対応や
     アニメ未発火・reduced-motion・JS無効では宣言が落ちるか初期値 0deg の
     ままなので、常に「完成した一周のリング」が出る。 */
@property --ringa{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion: no-preference){
  body.js .sconc.rv.in .sconc__ringline{
    mask-image:conic-gradient(from 49.4deg, rgb(0 0 0 / 0) var(--ringa,0deg), #000 0);
    animation:ringSweep .72s cubic-bezier(.4,0,.2,1) .18s backwards;
  }
  @keyframes ringSweep{from{--ringa:359.9deg}to{--ringa:0deg}}
}

/* ---- R3: cvr のスマホ小道具がスクロールに連動して一周する ----
   セクション通過(entry〜exit)でちょうど1周の円軌道を描く。
   始点=終点=自然位置。左の端末は時計回り、右の端末は左右対称の
   反時計回り。半径 0.9vw の円 pos(θ)=(R·sinθ, R·(1−cosθ)) を
   15°刻み(24分割)で打ち、linear の折れ線でも円に見える精度にする。
   ・transform(rotate)には触らず、独立プロパティ translate を合成する。
   ・つぶやき(.cvr__mumble)は端末の「声」なので、timeline-scope で
     端末側の view-timeline を共有し、完全に同じ進行で並走させる。
   ・fill:both + 0%/100% が静止位置 = 読み込み直後・非対応環境は現状と同一。
   ・端末が意匠として見えるのは ≥1400px のみ(既存メディア条件と同じ)。 */
@media (min-width:1400px) and (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()) and (timeline-scope: --t){
    .cvr__stack{timeline-scope:--cvrpl,--cvrpr}
    .cvr__prop--l{view-timeline:--cvrpl}
    .cvr__prop--r{view-timeline:--cvrpr}
    .cvr__prop--l,.cvr__mumble--l{
      animation:cvrDriftL linear both;
      animation-timeline:--cvrpl;
      animation-range:entry 0% exit 100%;
    }
    .cvr__prop--r,.cvr__mumble--r{
      animation:cvrDriftR linear both;
      animation-timeline:--cvrpr;
      animation-range:entry 0% exit 100%;
    }
    @keyframes cvrDriftL{
      0%{translate:0vw 0vw}
      4.1667%{translate:0.2329vw 0.0307vw}
      8.3333%{translate:0.45vw 0.1206vw}
      12.5%{translate:0.6364vw 0.2636vw}
      16.6667%{translate:0.7794vw 0.45vw}
      20.8333%{translate:0.8693vw 0.6671vw}
      25%{translate:0.9vw 0.9vw}
      29.1667%{translate:0.8693vw 1.1329vw}
      33.3333%{translate:0.7794vw 1.35vw}
      37.5%{translate:0.6364vw 1.5364vw}
      41.6667%{translate:0.45vw 1.6794vw}
      45.8333%{translate:0.2329vw 1.7693vw}
      50%{translate:0vw 1.8vw}
      54.1667%{translate:-0.2329vw 1.7693vw}
      58.3333%{translate:-0.45vw 1.6794vw}
      62.5%{translate:-0.6364vw 1.5364vw}
      66.6667%{translate:-0.7794vw 1.35vw}
      70.8333%{translate:-0.8693vw 1.1329vw}
      75%{translate:-0.9vw 0.9vw}
      79.1667%{translate:-0.8693vw 0.6671vw}
      83.3333%{translate:-0.7794vw 0.45vw}
      87.5%{translate:-0.6364vw 0.2636vw}
      91.6667%{translate:-0.45vw 0.1206vw}
      95.8333%{translate:-0.2329vw 0.0307vw}
      100%{translate:0vw 0vw}
    }
    @keyframes cvrDriftR{
      0%{translate:0vw 0vw}
      4.1667%{translate:-0.2329vw 0.0307vw}
      8.3333%{translate:-0.45vw 0.1206vw}
      12.5%{translate:-0.6364vw 0.2636vw}
      16.6667%{translate:-0.7794vw 0.45vw}
      20.8333%{translate:-0.8693vw 0.6671vw}
      25%{translate:-0.9vw 0.9vw}
      29.1667%{translate:-0.8693vw 1.1329vw}
      33.3333%{translate:-0.7794vw 1.35vw}
      37.5%{translate:-0.6364vw 1.5364vw}
      41.6667%{translate:-0.45vw 1.6794vw}
      45.8333%{translate:-0.2329vw 1.7693vw}
      50%{translate:0vw 1.8vw}
      54.1667%{translate:0.2329vw 1.7693vw}
      58.3333%{translate:0.45vw 1.6794vw}
      62.5%{translate:0.6364vw 1.5364vw}
      66.6667%{translate:0.7794vw 1.35vw}
      70.8333%{translate:0.8693vw 1.1329vw}
      75%{translate:0.9vw 0.9vw}
      79.1667%{translate:0.8693vw 0.6671vw}
      83.3333%{translate:0.7794vw 0.45vw}
      87.5%{translate:0.6364vw 0.2636vw}
      91.6667%{translate:0.45vw 0.1206vw}
      95.8333%{translate:0.2329vw 0.0307vw}
      100%{translate:0vw 0vw}
    }
  }
}

/* =========================================================
   v34: 2026-08-20 オレンジの斜め帯(.fv__band)を右上へ斜めがけする。
        斜線 y = 158 + .2007x より上が帯(赤線の傾き .2135 と 0.35°差)。
        左頂点は赤線実測の 140u から 158u へ下げた: 140u だと1行目の
        「売」を天から 9u しか跨がず「削れて」見える(監修指摘)。
        色は About 帯(#E98502)を +4% 明るくした専用紙
        band-paper-bright.webp(平均 #FA9609)。クライアント指示。
        ラベル・左上コイン・右上コイン・鏃が帯の中に入り、星から下
        (スマホ・下コイン・リード・サービス行・CTA・実績)は生成りに残る。
        帯に入るのはラベル .fv__svc だけなので、そこだけオレンジ→墨に
        落とす。見出し素材・CTA・実績・版面の高さは v33 のまま。
   v33: 2026-08-19 ファーストビュー(approved-v4 / A・台なし)
   v32: 2026-08-19 KV一枚化(approved-v3。A・台を含む帯だった)
   v31: 2026-08-12 初版(端末+台座 + 背景AのSVG)
   ---------------------------------------------------------
   採用リファレンス:
     assets/hero/parts/approved-v3/hero-v3-approved-pc@2x.png (1440x1024)
     assets/hero/parts/approved-v3/hero-v3-approved-sp@2x.png ( 390x844)

   ■ 画像は2点だけ
     ・見出し+オレンジ線
     ・端末+装飾(hero-v4-devices-decor-{pc,sp})。PC/スマホ・手前の矢印・
       コイン3枚・星5つだけが1枚に固定されている。
     v4 で紺のA・オレンジの「+」・台・床が素材から外れた。これらを
     CSS/SVG で作り直さないこと(素材READMEの指示)。地は生成り一色で、
     端末群は接地影のない「浮いた」オブジェクトとして置く。

   ■ 寸法系
     1u = 版面幅/1440(SPは/390)。--u は .fv__in で宣言し子孫でのみ使う
     (コンテナ自身の cqw は自分を参照できない。.kvf と同じ約束)。
     PC=1440x860、SP=390x700(ナビ下 起点)。
     v32 までと違い、素材はどの辺でも断ち切られていないので、
     版面の高さはコピーの丈で決めてよい(帯の逃がしは不要)。

   ■ リファレンス実測(PC, 1u=1px, ナビ下からのローカル座標)
     サービス名 ink 110 / 見出し箱 top 155.5(ink 171) / リード ink 420・455
     サービス行 ink 508 / LP制作 569 / 1,200 598 / 罫 678
     動画制作 697 / 700 721 / CTA箱 787(高さ75)
     端末キャンバス left 324, top 76, 1152x870
     ※ v32 では版面が 946 → 858 に縮んだため、上記の縦位置は
       .fv__copy の top と各段の margin で比率を保ったまま詰めてある。
       横位置(左端 70 / 見出し 560 幅)は実測のまま動かしていない。

   ■ リファレンスからの意図的な変更(理由つき)
     1. ヘッダーはリファレンス(PC高さ95・SP57)ではなく既存の 71.2px のまま。
        FV 単体の改修でページ全体のナビを変えないため。SPはその分だけ
        構図を上へ詰め、固定CTAバーに当たらない高さ(700)にしている。
     2. SP の見出しは素材READMEの 360x150 ではなく 283x118。
        README値は「2x素材の半分」で、リファレンス実測(ink幅259px)と
        27%ずれる。リファレンス側を採った。PC の 560x220 は実測と一致。
     3. SP に in-hero CTA は置かない。リファレンス最下部のオレンジCTAの位置は
        既存の固定バー(.mcta)と重なるため、そちらに担わせる。
     4. オレンジの文字色はページ共通の黄オレンジ(#F09C12)。
     5. v33: 素材が断ち切られなくなったので、v32 で入れた FV だけの
        紙の段差(#FDF9F2)は不要になり、ページの地(--paper)へ戻した。
   ========================================================= */
.hero.fv{
  position:relative;
  margin:0;padding:0;
  background:var(--paper);
  /* clip であって hidden ではない。hidden にすると .hero 自身がスクロール
     コンテナになり、下の view() パララックスが解決されず一生発火しない。 */
  overflow:hidden;
  overflow:clip;
  container-type:inline-size;
  isolation:isolate;
  --fv-orange:#F09C12;
  /* 帯の色。もとは About の --about-orange(#E98502)と同一だったが、
     「少し明るく」の指示で +4% 明るい専用紙 band-paper-bright.webp
     (平均 #FA9609)に差し替えた。紙目のパターンは About と同じもの。
     墨ラベルとのコントラストは 8.5:1。About 帯は従来色のまま。 */
  --fv-band:#FA9609;
}
.hero.fv::before{
  /* 紙の粒子。文字と端末の「下」に置く(z:1)。.kvf::before と同じ値。 */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);opacity:.05;
}
.hero.fv::after{content:none}

/* ---------- オレンジの斜め帯(v34) ----------
   About の「+20%」帯と同じ色・同じ紙目。z:0 なので端末(2)・コピー(3)は
   すべて帯の上に乗り、紙の粒(::before, 1)は帯の上からもかかる。
   セクションの天から右下がりの斜線 y = 158 + .2007x までを塗る、
   右上の角の斜めがけ。深さは左端 158u・右端 447u。
   斜線はラベル ink(79〜108u)の 64u 下を通り、1行目の「売」を天から
   26u で跨ぎ(9u だと削れて見える)、左コイン(中心 629,198.5 r51.5)へ
   32.5u・鏃の下端(370u)へ 36u の逃げを取る。
   星(469〜498u)は斜線の 27u 下なので生成りに残る。
   .hero.fv が inline-size コンテナなので、子のここからは cqw を引ける。 */
.fv__band{
  --u:calc(100cqw / 1440);
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--fv-band) url("assets/hero/band/band-paper-bright.webp") repeat;
  background-size:calc(590 * var(--u)) calc(170 * var(--u));   /* About 帯と同じ紙目の粒度 */
  clip-path:polygon(0 0, 100% 0, 100% calc(447 * var(--u)), 0 calc(158 * var(--u)));
}

.fv__in{
  --u:calc(100cqw / 1440);
  justify-items:center;
  position:relative;
  display:block;
  width:100%;max-width:none;
  height:auto;min-height:0;max-height:none;
  margin:0;padding:0;
  /* 高さの内訳: 天 82 → コピー(〜613) / 端末(146〜667)
     → 実績の月桂樹(715〜849) → 地 40 で 889u。
     KV を 0.80 倍まで大きくし、月桂樹は版面中央に据えて下げる。
     素材はどの辺も断ち切られていないため、版面の外へ逃がす必要はない。
     v34 の帯は右上だけを斜めがけするので、実績にも版面の丈にも触らない。 */
  aspect-ratio:1440 / 889;
  background:none;
}

/* ---------- 端末+装飾(PC/スマホ+矢印+コイン3+星5) ----------
   素材 2304x1536。等倍は 1152x768u で、インクは 15.5,48.5 - 1136.5,719
   (= 1121 x 670.5u)。四辺とも断ち切られていない完結したオブジェクト。

   ■ 表示幅 896u = 等倍の 0.778 倍。上限はコピーとの当たりで決まる:
     左上のコインが見出しの高さに並ぶので、コインの左端(素材x=97)が
     見出しインクの右端 583u から 24u 空く位置が最大。
       右端 12u 留め → インク右端 1415.9u(版面右から 24.1u)
       コイン左端 = 1416 - (1136.5-97)x0.778 = 607.4u ✓
   ■ 表示幅 922u = 等倍の 0.80 倍。高さを決めているのは左上のコインで、
     コインの左端(素材x=97)と見出しのインク(その高さで 568.5u)の空きを
     24u とるとインク上端 188.8u、16u まで詰めると 145.8u まで上げられる。
     コインは絵柄であって文字ではないので 16u を採り、上端 146u に置く。
   ■ インク 507.3,146 - 1416,682.4。月桂樹はその下に中央ぞろえ。 */
.fv__devices{
  position:absolute;z-index:2;
  left:auto;
  right:calc(12 * var(--u));
  top:calc(107.2 * var(--u));
  width:calc(922 * var(--u));
  display:block;
}
.fv__devices img{display:block;width:100%;height:auto}

/* ---------- コピー ---------- */
/* 版面が 946u から 858u に縮んだぶん、天地の余白と段間を詰める。
   段間の比率(見出し→リード→サービス行→実績→CTA)は据え置き。
   左端 70u はリファレンス実測のまま動かさない(版面の左余白は設計値)。 */
.fv__copy{
  position:absolute;z-index:3;
  left:calc(70 * var(--u));
  top:calc(82 * var(--u));
  width:calc(620 * var(--u));
}
.fv__svc{
  margin:0;
  /* v34: ラベルだけが帯の中に入る。オレンジのままではオレンジ地に沈むので
     墨に落とす(オレンジ地で 7:1)。--fv-orange はサービス行の区切りが
     まだ使うので変数自体は残す。 */
  color:#141414;font-weight:900;
  font-size:max(13px, calc(20.2 * var(--u)));
  letter-spacing:.04em;line-height:1.2;
}
.fv__title{
  margin:calc(20 * var(--u)) 0 0;
  font-size:0;line-height:0;
}
.fv__title img{
  display:block;
  width:calc(560 * var(--u));height:auto;
  margin-left:calc(-15.5 * var(--u));
}
.fv__lead{
  margin:calc(30 * var(--u)) 0 0;
  color:#141414;font-weight:700;
  font-size:max(13px, calc(21 * var(--u)));
  line-height:1.67;letter-spacing:.01em;
}
/* サービス行: 商品画像 ｜ 動画 ｜ プレミアムA+ ｜ 登録代行 */
.fv__menu{
  list-style:none;margin:calc(18 * var(--u)) 0 0;padding:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  color:#141414;font-weight:700;
  font-size:max(12px, calc(19.9 * var(--u)));
  letter-spacing:.02em;line-height:1.4;
}
.fv__menu li{display:flex;align-items:baseline}
.fv__menu li + li::before{
  content:"｜";color:var(--fv-orange);font-weight:400;
  margin:0 calc(2 * var(--u));
}
/* ---------- 実績4本(もとは .kvf にあった行を FV へ引き上げ) ----------
   中身の寸法式は .kstat のものをそのまま使い、--u だけ FV の 0.75 倍に
   落とす(100cqw/1920 = 100cqw/1440 x 0.75)。cqw は .hero.fv が
   コンテナなので、子孫からは参照できる。
   位置決めは外側の .fv__stats(FV の --u のまま)で行う。 */
/* 実績4本は月桂樹の中へ。出典は同業(Amazon支援)の Pure Flat と
   Ryuki Design Amazon特化LP で、どちらも実績数字を月桂樹で囲っている。
   面や枠は付けない(素の紙の上に月桂樹だけが乗る)。
   版面の中央にそろえて 4つ並べる(左右の余りは均等)。
   環で囲うのをやめ、左右から片枝で挟む組みにした(参考画像の形)。
   囲うと中身の幅が環の内径に縛られるが、挟む形なら数字の幅は
   1本ぶんの幅からしか制約を受けないので、数字を大きく取れる。
   同時に帯の高さが 316u → 124u まで下がる。
   片枝の素材は laurel-half.svg(113.3x216.6)。右側は scaleX(-1) の鏡像。
   単位は数字の下へ落とし、数字そのものを大きく取れるようにした。 */
.fv__stats{
  position:absolute;z-index:3;
  left:calc(24 * var(--u));right:calc(24 * var(--u));
  top:calc(715 * var(--u));
}
.fv__stats .kvf__stats{
  /* 数字は 80u(= .kvf と同寸)。版面が 1440 と広いぶん、同じ 80u でも
     .kvf(1200)より相対的には小さく収まる。0.75倍(60u)では 4本が
     ばらけて見えたので、字を上げて間を詰めた。 */
  --u:calc(100cqw / 1440);
  /* .kvf の 294:370:408:128 は 1200 幅の紙面で本文がぴたり収まる比率。
     FV の台は 1392u と広く、4本のインク合計は 843u しかないので、
     space-between で散らすと本どうしが 180u 離れて「4つの別もの」に見える。
     列を中身の幅にして固定の間で寄せ、余りは台の左右の余白へ回す。 */
  grid-template-columns:repeat(4, max-content);
  justify-content:center;
  column-gap:calc(24 * var(--u));
}
/* 1本ぶん = [片枝][ラベル/数字][片枝(鏡像)] の3列。地は紙のまま。
   4本目の白ヌキ(.kstat--onmark)はマークアップから外してある。
   中央列は中身の幅そのままで、
   枝が必ず中身に寄り添う(1fr にすると数字が短い列で枝が離れて散る)。
   1本ぶんの幅は中身しだいなので、行は auto 4列を中央へ寄せている。 */
  .fv__stats .kstat{
    width:auto;height:auto;padding:0;border-left:0;
    display:grid;
    /* 中央列は max-content。auto にすると外側のグリッドの都合で潰れ、
       数字が枝の上に乗る。 */
    grid-template-columns:auto max-content auto;
    grid-template-rows:auto auto;
    justify-content:center;align-items:center;justify-items:center;
    column-gap:calc(24 * var(--u));
  }
.fv__stats .kstat::before,
.fv__stats .kstat::after{
  content:"";grid-row:1 / 3;
  width:calc(70 * var(--u));height:calc(134 * var(--u));
  background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjguMSAxNC44IDExMy4zIDIxNi42IiB3aWR0aD0iMTEzIiBoZWlnaHQ9IjIxNyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLjEiIHkxPSIwIiB4Mj0iLjkiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNFOUQwOEMiLz48c3RvcCBvZmZzZXQ9Ii4zOCIgc3RvcC1jb2xvcj0iI0NEQTY1NSIvPjxzdG9wIG9mZnNldD0iLjY4IiBzdG9wLWNvbG9yPSIjQUM4NzM1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjRDZCNjZEIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0iTTExMi4zLDIwNy43IEE4OCw4OCAwIDAgMSA4Mi44LDQwLjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNnKSIgc3Ryb2tlLXdpZHRoPSIxLjkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxnIGZpbGw9InVybCgjZykiPjxwYXRoIGQ9Ik0wLDAgQzIuOCwtNi43IDExLjUsLTcuNCAyMy4wLDAgQzExLjUsNy40IDIuOCw2LjcgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMi4zIDIwNy43KSByb3RhdGUoMTQwLjApIi8+PHBhdGggZD0iTTAsMCBDMS4yLC0zLjAgNS4yLC0zLjMgMTAuMywwIEM1LjIsMy4zIDEuMiwzLjAgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExMi4zIDIwNy43KSByb3RhdGUoMjMwLjApIi8+PHBhdGggZD0iTTAsMCBDMi43LC02LjUgMTEuMywtNy4zIDIyLjYsMCBDMTEuMyw3LjMgMi43LDYuNSAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOTUuMCAyMDQuNCkgcm90YXRlKDE1MS41KSIvPjxwYXRoIGQ9Ik0wLDAgQzEuMiwtMi45IDUuMSwtMy4zIDEwLjIsMCBDNS4xLDMuMyAxLjIsMi45IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg5NS4wIDIwNC40KSByb3RhdGUoMjQxLjUpIi8+PHBhdGggZD0iTTAsMCBDMi43LC02LjQgMTEuMSwtNy4xIDIyLjIsMCBDMTEuMSw3LjEgMi43LDYuNCAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzguNiAxOTcuNikgcm90YXRlKDE2My4xKSIvPjxwYXRoIGQ9Ik0wLDAgQzEuMiwtMi45IDUuMCwtMy4yIDEwLjAsMCBDNS4wLDMuMiAxLjIsMi45IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3OC42IDE5Ny42KSByb3RhdGUoMjUzLjEpIi8+PHBhdGggZD0iTTAsMCBDMi42LC02LjMgMTAuOSwtNy4wIDIxLjcsMCBDMTAuOSw3LjAgMi42LDYuMyAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjMuOSAxODcuOCkgcm90YXRlKDE3NC42KSIvPjxwYXRoIGQ9Ik0wLDAgQzEuMiwtMi44IDQuOSwtMy4xIDkuOCwwIEM0LjksMy4xIDEuMiwyLjggMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYzLjkgMTg3LjgpIHJvdGF0ZSgyNjQuNikiLz48cGF0aCBkPSJNMCwwIEMyLjYsLTYuMiAxMC43LC02LjkgMjEuMywwIEMxMC43LDYuOSAyLjYsNi4yIDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MS41IDE3NS4yKSByb3RhdGUoMTg2LjIpIi8+PHBhdGggZD0iTTAsMCBDMS4yLC0yLjggNC44LC0zLjEgOS42LDAgQzQuOCwzLjEgMS4yLDIuOCAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTEuNSAxNzUuMikgcm90YXRlKDI3Ni4yKSIvPjxwYXRoIGQ9Ik0wLDAgQzIuNSwtNi4wIDEwLjQsLTYuNyAyMC45LDAgQzEwLjQsNi43IDIuNSw2LjAgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQxLjggMTYwLjQpIHJvdGF0ZSgxOTcuNykiLz48cGF0aCBkPSJNMCwwIEMxLjEsLTIuNyA0LjcsLTMuMCA5LjQsMCBDNC43LDMuMCAxLjEsMi43IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MS44IDE2MC40KSByb3RhdGUoMjg3LjcpIi8+PHBhdGggZD0iTTAsMCBDMi41LC01LjkgMTAuMiwtNi42IDIwLjUsMCBDMTAuMiw2LjYgMi41LDUuOSAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzUuMyAxNDMuOSkgcm90YXRlKDIwOS4yKSIvPjxwYXRoIGQ9Ik0wLDAgQzEuMSwtMi43IDQuNiwtMy4wIDkuMiwwIEM0LjYsMy4wIDEuMSwyLjcgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1LjMgMTQzLjkpIHJvdGF0ZSgyOTkuMikiLz48cGF0aCBkPSJNMCwwIEMyLjQsLTUuOCAxMC4wLC02LjQgMjAuMCwwIEMxMC4wLDYuNCAyLjQsNS44IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMi4yIDEyNi41KSByb3RhdGUoMjIwLjgpIi8+PHBhdGggZD0iTTAsMCBDMS4xLC0yLjYgNC41LC0yLjkgOS4wLDAgQzQuNSwyLjkgMS4xLDIuNiAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIuMiAxMjYuNSkgcm90YXRlKDMxMC44KSIvPjxwYXRoIGQ9Ik0wLDAgQzIuNCwtNS43IDkuOCwtNi4zIDE5LjYsMCBDOS44LDYuMyAyLjQsNS43IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMi43IDEwOC44KSByb3RhdGUoMjMyLjMpIi8+PHBhdGggZD0iTTAsMCBDMS4xLC0yLjYgNC40LC0yLjggOC44LDAgQzQuNCwyLjggMS4xLDIuNiAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzIuNyAxMDguOCkgcm90YXRlKDMyMi4zKSIvPjxwYXRoIGQ9Ik0wLDAgQzIuMywtNS42IDkuNiwtNi4yIDE5LjIsMCBDOS42LDYuMiAyLjMsNS42IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNi43IDkxLjYpIHJvdGF0ZSgyNDMuOCkiLz48cGF0aCBkPSJNMCwwIEMxLjAsLTIuNSA0LjMsLTIuOCA4LjYsMCBDNC4zLDIuOCAxLjAsMi41IDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNi43IDkxLjYpIHJvdGF0ZSgzMzMuOCkiLz48cGF0aCBkPSJNMCwwIEMyLjMsLTUuNCA5LjQsLTYuMCAxOC44LDAgQzkuNCw2LjAgMi4zLDUuNCAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQuMSA3NS41KSByb3RhdGUoMjU1LjQpIi8+PHBhdGggZD0iTTAsMCBDMS4wLC0yLjQgNC4yLC0yLjcgOC40LDAgQzQuMiwyLjcgMS4wLDIuNCAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQuMSA3NS41KSByb3RhdGUoMzQ1LjQpIi8+PHBhdGggZD0iTTAsMCBDMi4yLC01LjMgOS4yLC01LjkgMTguMywwIEM5LjIsNS45IDIuMiw1LjMgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0LjUgNjEuMikgcm90YXRlKDI2Ni45KSIvPjxwYXRoIGQ9Ik0wLDAgQzEuMCwtMi40IDQuMSwtMi43IDguMiwwIEM0LjEsMi43IDEuMCwyLjQgMCwwIFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDU0LjUgNjEuMikgcm90YXRlKDM1Ni45KSIvPjxwYXRoIGQ9Ik0wLDAgQzIuMSwtNS4yIDkuMCwtNS44IDE3LjksMCBDOS4wLDUuOCAyLjEsNS4yIDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Ny42IDQ5LjMpIHJvdGF0ZSgyNzguNSkiLz48cGF0aCBkPSJNMCwwIEMxLjAsLTIuMyA0LjAsLTIuNiA4LjEsMCBDNC4wLDIuNiAxLjAsMi4zIDAsMCBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2Ny42IDQ5LjMpIHJvdGF0ZSgzNjguNSkiLz48cGF0aCBkPSJNMCwwIEMyLjEsLTUuMSA4LjcsLTUuNiAxNy41LDAgQzguNyw1LjYgMi4xLDUuMSAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIuOCA0MC4yKSByb3RhdGUoMjkwLjApIi8+PHBhdGggZD0iTTAsMCBDMC45LC0yLjMgMy45LC0yLjUgNy45LDAgQzMuOSwyLjUgMC45LDIuMyAwLDAgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODIuOCA0MC4yKSByb3RhdGUoMzgwLjApIi8+PC9nPjwvc3ZnPg==") no-repeat center/100% 100%;
}
.fv__stats .kstat::before{grid-column:1}
.fv__stats .kstat::after{grid-column:3;transform:scaleX(-1)}
.fv__stats .kstat dt{
  grid-column:2;grid-row:1;
  font-size:max(11px, calc(18 * var(--u)));
  color:#48413A;letter-spacing:.01em;line-height:1.25;font-weight:700;
  text-align:center;white-space:nowrap;
}
/* 単位は数字の下へ。横に置くと「39,800円〜」が1本ぶんの幅を超える */
.fv__stats .kstat dd{
  grid-column:2;grid-row:2;
  margin-top:calc(2 * var(--u));width:auto;
  flex-direction:column;justify-content:center;align-items:center;
}
/* 数字は明るい金（縁取りなし）。
   ・くすんで見えていた原因は明度ではなく彩度。前の階調は S50% 程度で、
     金というより青銅だった。ここは S86〜100% まで上げてある。
   ・横方向のグラデ。32%/68% に明るい段を置いて艶を出す。
   ・生成り地に対して 1.37〜3.75:1。艶の段は大きい文字の AA(3:1)に
     届かないが、字面の中心を占める段は 1.94〜2.67:1、両端は 3.75:1。
   ・background-clip:text が効かない環境では単色 #C98A00(2.67:1)に落ちる。 */
.fv__stats .kstat dd b{
  font-size:calc(84 * var(--u));line-height:1;letter-spacing:-.02em;
  color:#C98A00;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .fv__stats .kstat dd b{
    background-image:linear-gradient(90deg,
      #B87A00 0%, #E0A800 16%, #F7CE3A 32%, #DDA400 50%,
      #F0BC1C 68%, #C98A00 88%, #A87200 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}
.fv__stats .kstat dd span{
  font-size:max(10px, calc(14 * var(--u)));color:#A05A00;
  font-weight:700;margin-left:0;margin-top:calc(2 * var(--u));
}
/* 環の中では筆線は葉と喧嘩するので出さない(飾りは月桂樹が担う) */
.fv__stats .kstat dd::after{content:none}

/* ---------- CTA ---------- */
.fv__cta{margin:calc(44 * var(--u)) 0 0}
.ubtn--fv{font-size:max(14px, calc(21.5 * var(--u)))}
/* ---------- 入り(v29 と同じ拍。transform のみ = 文字は常に見えている) ---------- */
@media (prefers-reduced-motion:no-preference){
  body.js .fv__svc  {animation:rise .6s cubic-bezier(.22,.7,.3,1) backwards}
  body.js .fv__title{animation:rise .6s cubic-bezier(.22,.7,.3,1) .06s backwards}
  body.js .fv__lead {animation:rise .6s cubic-bezier(.22,.7,.3,1) .12s backwards}
  body.js .fv__menu {animation:rise .6s cubic-bezier(.22,.7,.3,1) .18s backwards}
  body.js .fv__cta  {animation:rise .6s cubic-bezier(.22,.7,.3,1) .24s backwards}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    body.js .fv__copy{
      animation:heroLift linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
  }
}

/* =========================================================
   SP(≤767): 縦一列。サービス名 → 見出し → 補足 → サービス行 →
   端末+台座 → 実績2本。CTA は既存の固定バーが担うので入れない。
   .fv__copy を display:contents にして、端末を order で間に挟む。
   ========================================================= */
/* 切替は 900px。PC構図は「サービス行の右端」と「スマホの左端」が
   ぶつかる 875px あたりで破綻するため、素材READMEの目安(767)より上で切る。
   768〜900 は縦組みのまま --u を 1.15px で頭打ちにして中央寄せする
   (390x700 の構図が 448x805 までしか育たない)。 */
@media (max-width:900px){
  /* SP の帯。PC と同じく右上の斜めがけ。傾きは 82u / 幅のまま、
     両頂点を 45/127 → 155/237 へ下げて見出し全体が帯に乗る深さにする。
     リードも帯側。サービス行・端末・実績は生成りに残す。
     448px を超えたら中央で固定せず、画面いっぱいまで文字と画像を追従させる。
     上限は縦のバランスが保てる 1.5px (=585px) まで。 */
  .fv__band{
    --u:min(1.5px, calc(100cqw / 390));
    clip-path:polygon(0 0, 100% 0, 100% calc(237 * var(--u)), 0 calc(155 * var(--u)));
  }

  .fv__in{
    --u:min(1.5px, calc(100cqw / 390));
    width:calc(390 * var(--u));max-width:100%;margin-inline:auto;
    /* 端末を大きくしたあと 709u に押し込むと実績が星・コインに乗る。
       下限だけ 709u、実績は下へ逃がして箱を伸ばす。 */
    aspect-ratio:auto;
    min-height:calc(709 * var(--u));
    display:flex;flex-direction:column;
  }
  .fv__copy{display:contents}

  /* 縦位置はリファレンス実測(ナビ下からのローカル座標)にそろえる。
     見出し画像・端末画像は透明マージンを持つので、その分は負のマージンで詰める。
       見出し箱 top 26.1(ink 34) / リード ink 140 / サービス行 ink 186
       端末キャンバス top 203(ink 292.5〜626.5) / 実績 630.5〜684.5 */
  .fv__svc  {order:1;margin:calc(13.2 * var(--u)) 16px 0;position:relative;z-index:3}   /* お問合せ(kvf/cnt)の16pxに縦ラインを合わせる */
  .fv__title{order:2;margin:calc(6.9 * var(--u)) 16px 0;position:relative;z-index:3}
  .fv__lead {order:3;margin:calc(-7.6 * var(--u)) 16px 0;position:relative;z-index:3}
  .fv__menu {order:4;margin:calc(8.8 * var(--u)) 16px 0;position:relative;z-index:3}
  /* 端末+装飾(SP)。素材 780x1388、等倍 390x694u で
     インクは 13.5,93 - 376.5,600.5(= 363 x 507.5u)。
     縦組みなので上にコイン2枚、下に星5つ+コイン1枚の帯がつき、
     等倍だと旧素材(インク高 334u)より 173u 高くなって実績が折り返し線の
     下へ落ちる。表示幅は 340u(0.87倍)。上のサービス行へ少し被せて
     コインを近づける(文字は z-index で前面)。
     箱の透明余白は負のマージンで消す。下は星・コインの下まで実績を
     下げ、版面を伸ばす(上へ食い込ませない)。 */
  .fv__devices{
    order:5;position:relative;z-index:0;
    top:auto;right:auto;left:auto;
    width:calc(340 * var(--u));
    margin:calc(-102 * var(--u)) auto calc(-56 * var(--u));
  }
  .fv__stats{order:6;position:relative;z-index:3;top:auto;left:auto;right:auto;margin:0;padding-inline:16px}
  .fv__cta{display:none}

  .fv__svc{font-size:max(11.5px, calc(12.5 * var(--u)));letter-spacing:.03em}
  .fv__title img{width:calc(283 * var(--u));margin-left:0}
  .fv__lead{font-size:max(11px, calc(11.5 * var(--u)));line-height:1.62}
  .fv__menu{font-size:max(11px, calc(12 * var(--u)))}

  /* SP も PC と同じ月桂樹＋ラベル／数字／単位の縦組み。
     4列は 390 幅に収まらないので 2x2。--u は 2 枠に枝が収まる 0.5 で頭打ち。
     数字は 90u(45px)。104u は枠に対して大きすぎた。
     上限は .fv__in の凍結(390 x 1.5px = 585px)と同じ点で止める。ここは /780 の
     半スケールなので同じ 1.5px にすると 585〜900px で箱だけ凍結して中身が
     育ち続け、月桂樹が隣と重なる。585/780 = 0.75px が正しい頭打ち。 */
  .fv__stats .kvf__stats{
    --u:min(.75px, calc(100cqw / 780));
    grid-template-columns:repeat(2, minmax(0,1fr));
    justify-content:center;justify-items:center;
    column-gap:0;
    row-gap:calc(8 * var(--u));
  }
  .fv__stats .kstat::before,
  .fv__stats .kstat::after{
    width:calc(58 * var(--u));height:calc(118 * var(--u));
  }
  .fv__stats .kstat dd{margin-top:max(4px, calc(2 * var(--u)))}
  .fv__stats .kstat dd b{font-size:calc(90 * var(--u))}

  /* 星〜実績〜お問い合わせの間に生成りの段が残らないよう、KV の天上を詰める */
  .kvf{padding-top:10px}
}

/* =========================================================
   v35: CVRセクション再構成(支給カンプ 2026-08-20)
   ---------------------------------------------------------
   支給カンプ 4.png(1536x1024)の実測にもとづく再構成。
   カンプの版面(白カード)幅は 1444px。このセクションだけ本文を 1320px まで
   広げてあるので、カンプ1px = 0.914px で写している。可変域の上限は本文が
   1320px で固定されるビューポート幅 1400px で頭打ちになるよう
   vw 係数 = 上限値 / 14 で置いた。

   構成(すべて .cvr__in の中央):
     見出し(.cvr__head) → リード(.cvrb__lead) → 白い大判カード(.cvrb) → 注釈
   カードの中身は
     .cvrb__body … 表 + 比較図のグリッド、その下に結果の2ボックス
     .cvrb__band … カード幅いっぱいのオレンジ帯。カード下端に密着させる
   カードは overflow:hidden。帯は角丸に合わせて切られるので、下に白の残りが出ない。

   クラス名の衝突について:
   ・新規部品はすべて .cvrb__*(cvr board)。style.css 全体を grep して
     "cvrb" の既存宣言が 0 件であることを確認済み(死にクラスの復活を避ける)。
   ・再利用は .cvr__table 系(2309〜2384行)/.cvr__head/.cvr__headline/
     .cvr__advice/.mky/.rv/.vh/.hl/.nw/.row-op/.row-half/.row-year のみ。
     旧 .cvr__compare / .cvr__pane / .cvr__card / .cvr__stack / .cvr__flag /
     .cvr__note / .cvr__tablewrap / .cvr__chip / .cvr__prop / .cvr__mumble は
     HTML から撤去した。CSS 側の宣言は他レイヤーのグループセレクタを
     巻き込むため残してある(どの要素にも当たらない)。
   ・2482行〜の @media(max-width:900px / 640px / 359px)にある .cvr__table 系の
     旧指定は今も当たる。ここでは幅の使い方が変わった(900px以下で表が
     1カラム全幅になる)ので、同じメディアクエリで全部当て直している。

   モーション: 既存の .rv(transform のみ)を使う。opacity で消さない。
   ========================================================= */

/* このセクションだけ版面を広げる(2168行の .cvr__in 1200px を上書き)。
   左右のガター clamp(20px,4vw,40px) はそのままなので、狭い画面でカードが
   画面端に触ることはない。 */
.cvr .cvr__in{max-width:1320px}

/* --- 見出し ------------------------------------------------------------- */
.cvr__head{text-align:center}
.cvr__advice{
  display:block;text-align:center;
  color:var(--cvr-orange);font-weight:700;
  font-size:clamp(13px,1.72vw,24px);line-height:1.25;letter-spacing:.01em;
}
/* ＼ ／ は見出しの飾り。文字送りだけで距離をつくる(線を引き足さない) */
.cvrb__sl{display:inline-block;margin:0 .7em;font-weight:400}
.cvr__headline h2{
  text-align:center;
  font-family:var(--sans);font-weight:900;color:var(--cvr-ink);
  font-size:clamp(22px,3.36vw,47px);line-height:1.36;letter-spacing:-.005em;
  margin-top:clamp(2px,.32vw,4.5px);
}
/* PC は1行。900px 以下だけ「獲得率(CV)」の前で折る。
   Zen Kaku Gothic New は palt を持たないので、「 」の左右の空き(実測 .74em/.69em)は
   負のマージンで詰める。カンプの空き(.48em/.40em)に合わせた値。
   筆線(.mky::after)は要素の幅に張るので、マージンでは伸び縮みしない。
   1行に収まる PC でだけ効かせる(行頭に来る SP では字下げに見えてしまう)。 */
@media (min-width:901px){
  .cvrb__wrap{display:none}
  .cvr__headline h2 .mky{margin-left:-.3em;margin-right:-.3em}
}

/* --- リード: 0.5% と説明 ------------------------------------------------- */
/* v35.1: リード(0.5%)は HTML から撤去済み。以下 .cvrb__lead/.cvrb__pct/.cvrb__leadtx は
   死にルール。同名クラスを再導入する場合は復活に注意。 */
.cvrb__lead{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px clamp(12px,2.05vw,29px);
  margin-top:clamp(1px,.22vw,3px);
}
.cvrb__pct{
  margin:0;font-family:var(--num);font-weight:700;line-height:1;
  color:var(--cvr-flag);letter-spacing:.005em;
  font-size:clamp(33px,5vw,70px);
}
.cvrb__pct em{font-style:normal;font-size:.63em}
.cvrb__leadtx{
  margin:0;text-align:left;color:var(--cvr-ink);
  font-size:clamp(13px,1.37vw,19px);line-height:1.55;font-weight:500;
}
.cvrb__leadtx b{color:var(--cvr-flag);font-weight:700}

/* --- 大判カード ---------------------------------------------------------- */
.cvrb{
  /* リード(0.5%)を撤去したぶん、見出しとの間はカード側で確保する */
  margin-top:clamp(18px,2.3vw,32px);
  background:var(--cvr-sheet);
  border-radius:14px;
  overflow:hidden;                       /* 帯を角丸で切る = 下に白が残らない */
  box-shadow:1px 2px 8px rgba(74,63,51,.12);
}
.cvrb__body{padding:clamp(14px,2.14vw,30px) clamp(12px,1.43vw,20px) 0}

/* 表 | 比較図。カンプ実測 545 : 824(= .66fr : 1fr)、間 35px */
.cvrb__grid{
  display:grid;
  grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  gap:clamp(16px,2.29vw,32px);
  align-items:center;
}
.cvrb__tw{min-width:0}
.cvrb__fig{margin:0;min-width:0}
.cvrb__fig img{display:block;width:100%;height:auto}

/* --- 表の再調整(列が狭くなったぶん) ------------------------------------- */
.cvr .cvr__table{font-size:clamp(11px,1.26vw,17.5px);line-height:1.5}
.cvr__table th,.cvr__table td{
  padding:clamp(6px,.79vw,11px) clamp(3px,.55vw,7.5px);
}
.cvr__table thead th{
  font-size:clamp(12px,1.34vw,18.5px);
  padding-top:0;padding-bottom:clamp(7px,.86vw,12px);
}
.cvr__table tbody th{
  width:37.6%;font-size:clamp(11px,1.26vw,17.5px);
  padding-left:clamp(7px,1.18vw,16.5px);
}
.cvr__table tbody td{width:31.2%}
/* 列の間にも細い罫。カンプでは表の縦3列が薄い線で仕切られている */
.cvr__table tbody td{border-left:1px solid #EBE6E0}
/* 見出しの帯は灰。アイコンは置かない */
.cvrb__chip{
  display:inline-block;
  background:#ECE6DC;color:var(--cvr-ink);border-radius:8px;
  padding:clamp(4px,.43vw,6px) clamp(12px,1.72vw,24px);
  font-weight:800;line-height:1;letter-spacing:0;
  font-size:clamp(11.5px,1.46vw,20.5px);white-space:nowrap;
}
/* 金額行。1.5% 側だけ一段大きい(主従) */
.cvr__table .row-op td,
.cvr__table .row-year td{font-size:clamp(15px,1.77vw,24.5px);line-height:1.1}
.cvr__table .row-op td.hl,
.cvr__table .row-year td.hl{font-size:clamp(18px,2.48vw,34.5px)}
.cvr__table .row-op>*{
  padding-top:clamp(4px,.47vw,6.5px);
  padding-bottom:clamp(9px,1.1vw,15.5px);
  background-size:100% calc(100% - clamp(8px,1.02vw,14.5px));
}
.cvr__table .row-half>*{
  padding-top:clamp(11px,1.34vw,18.5px);
  padding-bottom:clamp(4px,.47vw,6.5px);
  background-position:0 clamp(8px,1.02vw,14.5px);
  background-size:100% calc(100% - clamp(8px,1.02vw,14.5px));
}
.cvr__table .row-year>*{
  padding-top:clamp(3px,.32vw,4.5px);
  padding-bottom:clamp(4px,.47vw,6.5px);
}

/* --- 結果の2ボックス ----------------------------------------------------- */
.cvrb__result{
  display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:center;
  gap:clamp(12px,2.29vw,32px);
  margin-top:clamp(14px,1.96vw,27.5px);
}
.cvrb__box{
  margin:0;display:grid;grid-auto-flow:column;
  align-items:baseline;align-content:center;justify-content:center;
  gap:clamp(6px,.93vw,13px);
  border-radius:10px;
  padding:clamp(4px,.55vw,7.5px) clamp(16px,3.93vw,55px);
}
.cvrb__boxlab{
  font-weight:800;line-height:1.4;
  font-size:clamp(11px,1.54vw,21.5px);
}
.cvrb__boxsub{font-size:.92em;font-weight:700;letter-spacing:-.02em}
.cvrb__boxnum{
  font-family:var(--num);font-weight:700;line-height:1;
  letter-spacing:.005em;white-space:nowrap;
}
.cvrb__boxnum em{
  font-family:var(--sans);font-style:normal;font-weight:900;
  font-size:.48em;margin-left:.06em;
}
.cvrb__box--a{
  background:#F0EFEE;border:1.5px solid #C9C7C4;color:var(--cvr-ink);
}
.cvrb__box--a .cvrb__boxnum{font-size:clamp(24px,3.79vw,53px)}
.cvrb__box--b{
  background:#FEF5E9;border:2px solid var(--cvr-flag);color:var(--cvr-flag);
}
.cvrb__box--b .cvrb__boxnum{font-size:clamp(27px,4.5vw,63px)}
/* 点線の矢。丸い点5つ + 三角。線は引かない */
.cvrb__arrow{
  flex:none;align-self:center;display:block;color:var(--cvr-flag);
  width:clamp(42px,5vw,70px);
}
.cvrb__arrow svg{display:block;width:100%;height:auto}

/* --- カード下端のオレンジ帯 --------------------------------------------- */
/* 帯の文言はフレーズ単位で折り返す(375pxで語中折れしないように) */
.cvrb__band span{display:inline-block}
.cvrb__band{
  margin:clamp(7px,.86vw,12px) 0 0;
  background:var(--cvr-flag);color:#FFF;
  text-align:center;font-weight:800;letter-spacing:.01em;line-height:1.35;
  font-size:clamp(14px,2.29vw,32px);
  padding:clamp(8px,.93vw,13px) clamp(14px,2.21vw,31px);
}

/* --- カード下の注釈 ------------------------------------------------------ */
.cvrb__note{
  margin:clamp(9px,1.18vw,16.5px) 0 0;text-align:center;
  color:#5C554C;font-weight:400;
  font-size:clamp(11px,1.06vw,15px);line-height:1.8;text-wrap:pretty;
}

/* ---------------- タブレット(900px以下) ----------------
   1カラムに畳む。順番は DOM のまま = 表が先、比較図はその下。 */
@media (max-width:900px){
  .cvrb__grid{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,22px)}
  /* 見出しが2行になるぶん、筆線とリードがぶつかる。ここだけアキを戻す */
  .cvrb__lead{margin-top:clamp(8px,1.6vw,14px)}
  .cvrb__body{padding:clamp(14px,2.2vw,20px) clamp(12px,1.8vw,16px) 0}
  /* 表が全幅になるので、狭幅レイヤー(2496行〜)の 11.5px 固定を上書きする */
  .cvr .cvr__table{font-size:clamp(11.5px,1.9vw,17px)}
  .cvr__table tbody th{width:37%;font-size:clamp(11.5px,1.9vw,17px);padding-left:clamp(8px,1.6vw,15px)}
  .cvr__table tbody td{width:31.5%}
  .cvr__table thead th{font-size:clamp(12px,2vw,18px)}
  .cvr__table th,.cvr__table td{padding:clamp(7px,1.2vw,11px) clamp(3px,.8vw,8px)}
  .cvrb__chip{font-size:clamp(11.5px,1.95vw,17.5px);padding:clamp(5px,.9vw,8px) clamp(9px,1.6vw,15px)}
  .cvr__table .row-op td,.cvr__table .row-year td{font-size:clamp(15px,2.6vw,24px)}
  .cvr__table .row-op td.hl,.cvr__table .row-year td.hl{font-size:clamp(18px,3.5vw,32px)}
  .cvrb__result{gap:clamp(10px,1.8vw,18px)}
  .cvrb__box{padding:clamp(9px,1.5vw,14px) clamp(12px,2.2vw,22px)}
  .cvrb__box--a .cvrb__boxnum{font-size:clamp(24px,4.6vw,40px)}
  .cvrb__box--b .cvrb__boxnum{font-size:clamp(27px,5.2vw,45px)}
  .cvrb__boxlab{font-size:clamp(11px,1.6vw,15px)}
  .cvrb__arrow{width:clamp(38px,5vw,50px)}
  .cvrb__band{font-size:clamp(14px,2.6vw,24px);padding:clamp(11px,1.7vw,16px) 16px}
}

/* ---------------- スマホ(640px以下) ----------------
   結果は縦積み、矢は90度回して受け渡しの向きを保つ。 */
@media (max-width:640px){
  .cvrb{border-radius:12px}
  .cvrb__lead{gap:4px 12px}
  .cvrb__leadtx{text-align:center}
  .cvr .cvr__table{font-size:clamp(11px,3.1vw,14px)}
  .cvr__table tbody th{width:36%;font-size:clamp(11px,3.1vw,14px);padding-left:clamp(6px,2vw,10px)}
  .cvr__table tbody td{width:32%}
  .cvr__table thead th{font-size:clamp(11px,3.2vw,14.5px)}
  .cvr__table th,.cvr__table td{padding:clamp(7px,2vw,10px) clamp(2px,1vw,5px)}
  .cvrb__chip{font-size:clamp(11px,3.1vw,14px);padding:5px 9px;border-radius:7px}
  .cvr__table .row-op td,.cvr__table .row-year td{font-size:clamp(14px,4.2vw,19px)}
  .cvr__table .row-op td.hl,.cvr__table .row-year td.hl{font-size:clamp(16px,5.2vw,23px)}
  .cvrb__result{flex-direction:column;gap:clamp(8px,2.4vw,12px)}
  .cvrb__box{width:100%;justify-content:center}
  .cvrb__arrow{width:26px;transform:rotate(90deg)}
  .cvrb__box--a .cvrb__boxnum{font-size:clamp(26px,8vw,34px)}
  .cvrb__box--b .cvrb__boxnum{font-size:clamp(29px,9vw,38px)}
  .cvrb__boxlab{font-size:clamp(11px,3.3vw,14px)}
  .cvrb__band{font-size:clamp(13.5px,4.2vw,19px);padding:12px 14px}
  .cvrb__note{text-align:left}
}
@media (max-width:359px){
  .cvr .cvr__table{font-size:10.5px}
  .cvr__table tbody th{font-size:10.5px}
  .cvr__table .row-op td,.cvr__table .row-year td{font-size:14px}
  .cvr__table .row-op td.hl,.cvr__table .row-year td.hl{font-size:16px}
}

/* =========================================================
   v36: 2026-09-01 クライアント修正指示(Excel「A+コンテンツ改修」)対応
   ---------------------------------------------------------
   index.html の同名コメント(v36)と対で読む。以下は既存レイヤーへの上書きだけを
   置き、旧宣言は消していない。新規クラスはすべて全文 grep して 0 件を確認済み
   (死にクラスの復活を避けるため)。

   1. ヘッダー: 制作実績バッジ(.nav__proof)
   2. FV: コピー刷新(テキスト見出し+筆線)、端末を CSS で組む(.fv__devices--v5 / .dv)、
      実績4本の文言更新(ラベルが長くなったぶん間を詰める)
   3. kvf: 相談ブロックを白い版へ(.kvf__cta--v36)、流れる棚は支給スクショ(素の角丸枠)
   4. A+とは: 見出し差し替え、注釈は引き出し線を止めて文字を大きく(左ガター拡大)、
      SP は 注釈2 → 図版 → 注釈2 の順、+20% は生成りパネル(.about__band--panel)
   5. CVR: 前提注記を表の直下へ、「安価に〜」を一段大きく
   6. お悩み: 泡の位置、回答パネルの構成
   7. 特徴: 01 本文を太く、実績ボード差し替え(素材のみ)
   8. サンプル: 小見出し拡大、実際の商品画像(PC+SP の組 .pair)、実動画プレーヤー、
      20sec は サムネイル+3カット、カテゴリー8項目
   9. 料金: 登録代行の説明/注釈の差、枠外の一文(.prc__more)
   ========================================================= */

/* ---------- 1. ヘッダー: 制作実績バッジ ---------- */
/* オレンジの枠をピンクと金色のハイライトが一周する。 */
@property --nav-proof-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.nav__proof{
  display:inline-flex;align-items:center;gap:.42em;
  margin:0 0 0 clamp(4px,.8vw,14px);padding:.36em .9em .36em .72em;
  border:2px solid transparent;border-radius:999px;
  color:var(--ink);line-height:1;white-space:nowrap;font-size:13px;
  background:
    linear-gradient(#FFFDF8,#FFFDF8) padding-box,
    conic-gradient(from var(--nav-proof-angle),#FF6E00 0deg 210deg,#FF3B6B 265deg,#FFE39A 310deg,#FF6E00 360deg) border-box;
}
@media (prefers-reduced-motion:no-preference){
  .nav__proof{animation:nav-proof-orbit 3s linear infinite}
  @keyframes nav-proof-orbit{to{--nav-proof-angle:360deg}}
}
.nav__crown{width:1.5em;height:auto;color:var(--amber);flex:none}
.nav__prooft{font-weight:700;font-size:.93em;letter-spacing:.02em}
.nav__proofn{font-family:var(--num);font-weight:700;font-size:1.42em;letter-spacing:.02em;color:var(--brand-orange)}
.nav__proofn small{font-family:var(--sans);font-size:.6em;font-weight:900;margin-left:.12em;color:var(--ink)}
@media (max-width:1240px){.nav__proof{display:none}}

/* ---------- 2. FV ---------- */
/* コピー: 左端 70u・幅 620u は据え置き。筆線が帯に掛からないよう天を 118u へ下げた
   (線の右端 x=620u での帯の斜線は 282u。見出し2行目の下端は 290u より下)。 */
.fv__copy{top:calc(118 * var(--u))}
.fv__svc--v36{font-size:max(14px, calc(24 * var(--u)));letter-spacing:.06em}
.fv__title--txt{
  margin:calc(16 * var(--u)) 0 0;
  font-family:var(--sans);font-weight:900;font-feature-settings:"palt";
  font-size:calc(50 * var(--u));line-height:1.22;letter-spacing:-.02em;color:#141414;
}
.fv__t1{display:block;white-space:nowrap}
.fv__t2{position:relative;display:inline-block;white-space:nowrap;padding-bottom:calc(6 * var(--u))}
/* 2行目の下に、旧見出し画像と同じオレンジの一筆 */
.fv__t2::after{
  content:"";position:absolute;z-index:-1;
  left:calc(-6 * var(--u));right:calc(-10 * var(--u));bottom:calc(-5 * var(--u));
  height:calc(18 * var(--u));
  background:var(--brush-o) no-repeat 0 0/100% 100%;
}
.fv__lead--list{
  list-style:none;margin:calc(26 * var(--u)) 0 0;padding:0;
  display:grid;gap:calc(8 * var(--u));
  color:#141414;font-weight:700;font-size:max(13px, calc(21 * var(--u)));
  line-height:1.5;letter-spacing:.01em;
}
.fv__lead--list li{display:flex;align-items:center;gap:calc(10 * var(--u));white-space:nowrap}
.fv__lead--list .ic{width:1.05em;height:1.05em;color:var(--fv-orange);flex:none}
.fv__cta{margin-top:calc(40 * var(--u))}

/* 端末(CSS組み)。--lw = ノートPCの幅、--pw = スマホの幅。部品の寸法はすべてその比。
   PC: 版面右から 36u、天 150u、箱 770x500u。ノートPC 700u は右寄せ、スマホ 195u は
   左手前(箱の左下)。スマホの底はノートPCの台より 35u 下(参考画像の前後関係)。 */
.fv__devices--v5{
  --lw:calc(700 * var(--u));
  --pw:calc(195 * var(--u));
  position:absolute;z-index:2;display:block;
  left:auto;right:calc(36 * var(--u));top:calc(150 * var(--u));
  width:calc(770 * var(--u));height:calc(500 * var(--u));
}
.dv{position:absolute}
.dv--laptop{right:0;top:0;width:var(--lw);z-index:1}
.dv--phone{left:0;bottom:0;width:var(--pw);z-index:2}
.dv__lid{
  position:relative;background:#1A1C21;
  border-radius:calc(var(--lw) * .026) calc(var(--lw) * .026) calc(var(--lw) * .008) calc(var(--lw) * .008);
  padding:calc(var(--lw) * .02) calc(var(--lw) * .018) calc(var(--lw) * .022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.dv__cam{
  position:absolute;left:50%;top:calc(var(--lw) * .006);
  width:calc(var(--lw) * .009);height:calc(var(--lw) * .009);margin-left:calc(var(--lw) * -.0045);
  border-radius:50%;background:#090A0D;box-shadow:inset 0 0 0 1px #30343C;
}
.dv__screen{position:relative;overflow:hidden;background:#fff;border-radius:calc(var(--lw) * .007)}
.dv--laptop .dv__screen{aspect-ratio:16/10}
.fv__devices--v5 .dv__screen img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.dv__base{
  position:relative;height:calc(var(--lw) * .024);
  margin:0 calc(var(--lw) * -.043);
  border-radius:calc(var(--lw) * .004) calc(var(--lw) * .004) calc(var(--lw) * .016) calc(var(--lw) * .016);
  background:linear-gradient(180deg,#EDEEF0 0%,#CDCFD4 48%,#A3A7AE 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
}
.dv__notch{
  position:absolute;left:50%;top:0;
  width:calc(var(--lw) * .17);height:calc(var(--lw) * .007);margin-left:calc(var(--lw) * -.085);
  border-radius:0 0 calc(var(--lw) * .005) calc(var(--lw) * .005);background:#B9BCC3;
}
.dv--phone{
  padding:calc(var(--pw) * .036);background:#15171B;
  border-radius:calc(var(--pw) * .16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),
             calc(var(--pw) * .02) calc(var(--pw) * .05) calc(var(--pw) * .1) calc(var(--pw) * -.05) rgba(20,14,6,.45);
}
.dv--phone .dv__screen{aspect-ratio:384/894;border-radius:calc(var(--pw) * .125);background:#232F3E}
.dv__island{
  position:absolute;left:50%;top:calc(var(--pw) * .075);
  width:calc(var(--pw) * .28);height:calc(var(--pw) * .07);margin-left:calc(var(--pw) * -.14);
  border-radius:999px;background:#0A0B0E;
}
/* 接地影: 台の下だけに落ちる、低く薄い楕円 */
.dv__shadow{
  position:absolute;z-index:0;left:6%;right:0;
  bottom:calc(20 * var(--u));height:calc(30 * var(--u));
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%, rgba(46,33,14,.2), rgba(46,33,14,0) 68%);
}

/* 実績4本: ラベルが長くなったぶん枝との間と列間を詰め、字を 18u→16u */
.fv__stats .kvf__stats{column-gap:calc(16 * var(--u))}
.fv__stats .kstat{column-gap:calc(16 * var(--u))}
.fv__stats .kstat dt{font-size:max(11px, calc(16 * var(--u)))}
.kbr{display:none}

@media (max-width:900px){
  .fv__svc--v36{font-size:max(12px, calc(14 * var(--u)))}
  .fv__title--txt{margin:calc(8 * var(--u)) 16px 0;font-size:calc(30 * var(--u));line-height:1.25}
  .fv__t2::after{height:calc(11 * var(--u));bottom:calc(-3 * var(--u))}
  .fv__lead--list{margin:calc(14 * var(--u)) 16px 0;gap:calc(5 * var(--u));font-size:max(11.5px, calc(12.5 * var(--u)))}
  .fv__lead--list li{white-space:normal}
  .fv__devices--v5{
    --lw:calc(300 * var(--u));
    --pw:calc(84 * var(--u));
    position:relative;order:5;z-index:0;
    right:auto;top:auto;left:auto;
    width:calc(330 * var(--u));height:calc(212 * var(--u));
    margin:calc(18 * var(--u)) auto calc(8 * var(--u));
  }
  .dv__shadow{bottom:calc(6 * var(--u));height:calc(14 * var(--u))}
  /* 2x2 の枠にラベルを収める(「Amazon商品ページ/制作」は .kbr で2行) */
  .fv__stats .kstat dt{font-size:11px;white-space:normal;text-align:center;line-height:1.25}
  .kbr{display:block}
}

/* ---------- 3. kvf: 相談ブロック(白い版) ---------- */
.kvf__cta--v36{
  margin-left:0;width:100%;max-width:none;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  gap:calc(28 * var(--u));
  padding:calc(24 * var(--u)) calc(36 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
  background:#FFFDF8;
  border:1px solid rgba(33,28,22,.10);border-radius:8px;
}
.kvf__kick{
  font-family:var(--sans);font-weight:700;color:#D9720A;
  font-size:max(13px, calc(16 * var(--u)));letter-spacing:.04em;line-height:1.2;
  margin:0 0 calc(8 * var(--u));
}
.kvf__kick i{font-style:normal;margin:0 .35em;opacity:.85}
.kvf__cta--v36 .kvf__t{font-size:calc(30 * var(--u))}
.kvf__cta--v36 .kvf__lead{margin-top:calc(4 * var(--u))}
.telblock__pre{display:block;font-size:max(11px, calc(12.5 * var(--u)));color:var(--ink3);font-weight:700;margin-bottom:calc(2 * var(--u))}
/* 流れる棚: 支給スクショは端末の縁を含まない素の画面。参考画像どおり細い黒縁の角丸枠に入れ、
   1枚を大きめ(215u→250u)にする。 */
.kvf__set li{width:calc(250 * var(--u));margin-right:calc(26 * var(--u))}
.kvf__set img{
  border:2px solid #1A1C21;border-radius:calc(20 * var(--u));
  background:#1A1C21;
}
.kvf__note{font-size:max(12px, calc(14 * var(--u)));font-weight:700;color:var(--ink2)}
@media (max-width:1023px){
  .kvf__cta--v36{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 18px;border-radius:6px}
  .kvf__kick{font-size:14px;margin-bottom:6px}
  .telblock__pre{font-size:11px}
  .kvf__set li{width:clamp(180px,44vw,250px);margin-right:clamp(14px,2.6vw,22px)}
  .kvf__set img{border-radius:16px}
  .kvf__note{font-size:12.5px}
}
/* SP: 制作イメージを横に約3枚見せる。 */
@media (max-width:640px){
  .kvf__set li{width:calc((100vw - 36px) / 3);margin-right:12px}
  .kvf__set img{border-width:1px;border-radius:10px}
  .kvf__cap{margin-top:8px;font-size:clamp(10px,2.7vw,12px)}
}

/* ---------- 4. A+とは ---------- */
/* PC: 左ガターを 1/6 → 1/4 に広げ、注釈の文字を大きく。引き出し線は止める
   (「罫線や改行で見づらい」指摘)。注釈と図版の対応は高さ(--acy)で保つ。 */
.about{--gl:calc(var(--cw) / 4)}
.about__title--v36{font-size:clamp(28px,3.35vw,48px);line-height:1.38}
.abr{display:none}
.about__lead{
  left:calc(var(--gl) - 241 * var(--u));top:calc(700 * var(--u));
  width:calc(232 * var(--u));
  font-size:max(13px, calc(11.5 * var(--u)));
}
.ac--video{--acx:-241;--acy:148;--acw:232}
.ac--mods {--acx:-241;--acy:470;--acw:232}
.ac--image{--acx:529;--acy:386;--acw:212}
.ac--sp   {--acx:511;--acy:813;--acw:216}
.ac__lead{display:none}
.ac__t{font-size:max(17px, calc(16.6 * var(--u)));line-height:1.6}
.ac__t::after{
  content:"";display:block;width:calc(96 * var(--u));height:calc(9 * var(--u));
  margin-top:calc(9 * var(--u));
  background:var(--brush) no-repeat 0 0/100% 100%;
}
.ac__d{margin-top:calc(12 * var(--u));font-size:max(13.5px, calc(12.5 * var(--u)));line-height:1.85;color:var(--ink2)}
.ac--video .ac__d,.ac--mods .ac__d{width:auto}
@media (min-width:768px){.abr--b{display:block}}
@media (min-width:720px) and (max-width:767px){
  .about__title--v36{font-size:clamp(22px,3.8vw,34px);line-height:1.45}
  .abr--a,.abr--b{display:block}
}
@media (max-width:719px){
  /* スクロールバーのあるSP幅でも「Amazon商品詳細ページ下部に、」を1行に収める。 */
  .about__title--v36{font-size:clamp(15px,4.65vw,26px);line-height:1.5}
  .abr--a,.abr--b{display:block}
}
/* 旧SP構図(767px以下のみ): リード → 注釈4項目(2*2グリッド) → 図版 → パネル。
   各項目を画像の上にまとめて2x2で配置する。 */
@media (max-width:767px){
  .about__plate{
    display:grid;grid-template-columns:1fr;
    gap:clamp(20px,3vw,32px);
    max-width:760px;margin:0 auto;padding-inline:20px;
  }
  .about__lead{order:0;margin:18px 0 0;padding-inline:0;max-width:none;width:auto}
  .about__calls{
    order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(20px,3.5vw,36px) clamp(16px,3.5vw,36px);
    /* 旧レイヤーの padding-inline:20px が残ると .about__plate の 20px と二重になるので消す */
    padding-inline:0;margin-bottom:0;
  }
  .ac{order:unset}
  .about__fig{order:2;justify-self:center;width:100%;margin:0}
  .about__scene{width:min(var(--sw),100%)}
  .ac__t{font-size:16.5px;line-height:1.65}
  .ac__t::after{width:112px;height:10px;margin-top:11px}
  .ac__d{margin-top:12px;font-size:13.5px;line-height:1.95}
}
@media (max-width:599px){
  .about__calls{gap:10px 14px}
  .ac__t{font-size:clamp(12.5px,3.95vw,16.5px);line-height:1.62}
  .ac__t::after{width:clamp(64px,22vw,112px);height:clamp(5.8px,2vw,10px);margin-top:10px}
  .ac__d{margin-top:11px;font-size:clamp(11.5px,3.25vw,13.5px);line-height:1.92}
}
/* ≤640 は他セクションと同様ガター16pxへ(B層の意図)。この位置(v36層より後)に置くのは、
   v36 の .about__plate{padding-inline:20px} より後に勝たせるため。 */
@media (max-width:640px){
  .about__plate{padding-inline:16px}
}

/* +20%: 帯をやめ、生成りの角丸パネルへ(参考画像の温度感)。
   .about__band の帯用の負マージン・clip-path・::after(斜めの着地)をすべて外す。 */
.about__band.about__band--panel{
  margin:clamp(-76px,-5.2vw,-44px) auto 0;
  padding:0 clamp(20px,4vw,40px) clamp(48px,5.2vw,76px);
  background:none;clip-path:none;
}
.about__band.about__band--panel::after{content:none}
.about__stat--panel{
  position:relative;max-width:1000px;margin-inline:auto;
  background:#FAF3E6;
  border-radius:18px;
  border:1.5px solid #F0D4A8;
  box-shadow:0 12px 30px -8px rgba(180,110,40,0.12);
  padding:clamp(24px,2.8vw,36px) clamp(20px,9.5vw,150px) clamp(24px,2.8vw,36px) clamp(20px,3vw,48px);
  text-align:center;overflow:hidden;
}
.about__band--panel .about__statlead{
  font-size:clamp(14px,1.45vw,21px);font-weight:700;color:var(--ink);line-height:1.5;margin:0;
}
.about__band--panel .about__sbr{display:none}
.about__band--panel .about__statnum{
  margin-top:clamp(8px,1vw,14px);
  display:flex;align-items:baseline;justify-content:center;
}
.about__band--panel .about__statnum>:first-child{margin-right:0}
.about__band--panel .about__statnum>:last-child{margin-left:clamp(8px,1.2vw,18px)}
.about__band--panel .about__statk{
  font-size:clamp(26px,3.4vw,50px);line-height:1;color:var(--ink);font-weight:900;
}
.about__statbar{
  display:block;align-self:center;
  width:2px;height:clamp(40px,5vw,72px);margin:0 clamp(16px,2.4vw,36px);
  border-radius:1px;background:rgba(33,28,22,.25);
}
.about__band--panel .about__statnum b{
  font-size:clamp(60px,8.6vw,124px);line-height:.9;letter-spacing:-.02em;
  background:linear-gradient(180deg, #FF6E00 0%, #E65100 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 12px rgba(230,81,0,0.18));
}
.about__band--panel .about__statnum b em{font-size:.5em;font-style:normal}
.about__band--panel .about__statnote{
  margin-top:clamp(10px,1.3vw,18px);font-size:clamp(11px,.95vw,13.5px);color:var(--ink2);
}
.about__static{
  position:absolute;right:clamp(12px,2vw,36px);top:50%;transform:translateY(-50%);
  width:clamp(80px,9vw,120px);height:auto;max-width:none;pointer-events:none;
}
@media (max-width:900px){
  .about__band.about__band--panel{margin:clamp(16px,2.5vw,24px) auto 0}
  .about__stat--panel{padding-right:clamp(20px,3vw,48px);border-radius:14px}
  .about__static{display:none}
  .about__band--panel .about__sbr{display:block}
  .about__band--panel .about__statk{font-size:clamp(22px,5.4vw,40px)}
  .about__band--panel .about__statnum b{font-size:clamp(56px,14vw,100px)}
  .about__statbar{height:clamp(34px,8vw,56px);margin:0 clamp(10px,3vw,22px)}
}

/* ---------- 5. CVR ---------- */
/* 帯が無くなったので、上の空きを取り、地の紙を A+とは と同じ紙にして継ぎ目を消す */
.cvr{
  padding-top:clamp(40px,5vw,72px);
  background:#F3EDE7 url("assets/about/paper-cream.webp") repeat;
  background-size:600px 414px;
}
.cvrb__premise{
  margin:clamp(8px,.9vw,12px) 0 0;text-align:left;
  font-size:clamp(10.5px,.9vw,12.5px);line-height:1.6;color:#6E6355;
}
.cvrb__point{
  margin:clamp(16px,1.9vw,26px) auto 0;text-align:center;
  font-size:clamp(14px,1.34vw,19px);font-weight:700;color:var(--cvr-ink,#231F1C);line-height:1.8;
  text-wrap:pretty;
}
.cvrb__point em{
  font-style:normal;padding:0 .08em;
  background:linear-gradient(transparent 58%,var(--yellow) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
@media (max-width:640px){.cvrb__point{text-align:left}}

/* ---------- 6. お悩み ---------- */
/* 泡: 上段2枚の泡が頭に乗って見えたので、外側・上へ逃がす */
@media (min-width:960px){
  .worry__list li:nth-child(1)::before{right:-34px;bottom:-2px}
  .worry__list li:nth-child(1)::after {right:-62px;bottom:-22px}
  .worry__list li:nth-child(2)::before{left:-34px;bottom:-2px}
  .worry__list li:nth-child(2)::after {left:-62px;bottom:-22px}
}
.worry__big--v36{max-width:none;font-size:clamp(20px,2.9vw,34px);line-height:1.5;margin-bottom:clamp(10px,1.2vw,14px)}
.worry__big--v36 span{display:block}
.worry__big--v36 em{display:inline-block;font-size:1.18em;margin-top:.1em}
.worry__bbr{display:none}
.worry__sub{
  text-align:center;margin:clamp(14px,1.6vw,20px) 0 clamp(14px,1.8vw,22px);
  color:var(--cream);font-size:clamp(13px,1.3vw,16.5px);font-weight:500;letter-spacing:.02em;
}
@media (max-width:640px){
  .worry__big--v36{font-size:clamp(18px,5vw,21px)}
  .worry__bbr{display:block}
  .worry__sub{font-size:13px;line-height:1.7}
}

/* ---------- 7. 特徴 ---------- */
.sblk--01 .sblk__p{font-weight:400;color:var(--ink2)}

/* ---------- 8. サンプル ---------- */
.smp__k--lg{font-size:clamp(17px,1.95cqw,23px);color:var(--ink)}
/* 完全画像モジュール: PC は選択中の1点を大判で上に、残り3点をその下に並べる(order は JS) */
@media (min-width:900px){
  .arch__rail{flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:2.4cqw 2cqw}
  .arch__item{flex:0 0 32cqw}
  .arch__item.is-on{flex-basis:100%}
}
/* PC表示 + SP表示の組。SP は PC の左下に重ねる */
.arch__card .zoombox.pair{
  display:block;position:relative;overflow:visible;
  padding:0 0 6% 0;border-radius:0;background:none;box-shadow:none;
}
.arch__item.is-on .arch__card .zoombox.pair{box-shadow:none}
.pair__pc{
  display:block;width:88%;margin-left:auto;aspect-ratio:16/9;overflow:hidden;
  border-radius:3px;background:#fff;
  box-shadow:0 0 0 1px var(--smp-edge) inset;transition:box-shadow .35s;
}
.arch__item.is-on .pair__pc{box-shadow:0 0 0 2px var(--smp-or)}
.pair__sp{
  position:absolute;left:0;bottom:0;width:23%;aspect-ratio:640/1490;overflow:hidden;
  border:2px solid #1A1C21;border-radius:8px;background:#fff;
  box-shadow:2px 4px 10px -6px rgba(26,20,12,.45);
}
.pair__pc img,.pair__sp img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;max-width:none}
.pair__pc picture,.pair__sp picture{display:contents}
/* 拡大表示 */
.lb{max-width:min(94vw,1120px)}
.lb__body .zoombox.pair{display:block;width:100%;max-width:none;padding:12px;border-radius:10px}
.lb__body .pair__pc img,.lb__body .pair__sp img{width:100%;height:100%;max-height:none;border-radius:0}
@media (max-width:899px){
  .arch__item,.arch__item.is-on{flex:0 0 min(78vw,330px)}
}
@media (max-width:640px){
  .arch__item,.arch__item.is-on{flex-basis:min(80vw,320px)}
}

/* 完全動画モジュール: 実動画 */
.vp__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;background:#0F1A2A;display:block}
.vp--real .vp__stage{background:#0F1A2A}
.vp__mute{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:rgba(10,28,50,.6);color:#F9F4EC;
  border:1px solid rgba(249,244,236,.35);border-radius:999px;
  padding:5px 10px 5px 8px;font:inherit;font-size:11px;font-weight:700;line-height:1;
  cursor:pointer;transition:background .25s;
}
.vp__mute:hover{background:rgba(10,28,50,.85)}
.vp__mute:focus-visible{outline:2px solid var(--smp-or);outline-offset:2px}
.vp__mute .ic{width:14px;height:14px}
.vp__ic--sound{display:none}
.vp.is-sound .vp__ic--mute{display:none}
.vp.is-sound .vp__ic--sound{display:block}
.vp__prod{
  margin:0 0 8px;font-size:clamp(11.5px,1.1cqw,13px);font-weight:700;
  color:var(--smp-or-t);letter-spacing:.02em;
}
.vp[data-set="sun"] .vp__capset[data-s="sun"],
.vp[data-set="win"] .vp__capset[data-s="win"]{display:block}
.vp__tlset{display:none;position:relative}
.vp[data-set="sun"] .vp__tlset[data-s="sun"],
.vp[data-set="win"] .vp__tlset[data-s="win"]{display:block}
/* 3区間: 列幅 = 区間の長さ(インラインの grid-template-columns)。点は区間の始点に置く */
.vp__beats--3{display:grid}
.vp__beats--3 li{transform:none;text-align:left;padding-right:8px;min-width:0}
.vp__beats--3 li .vp__dot{left:0;margin-left:-5px}
.vp__beats--3 li:first-child .vp__dot{margin-left:0}
.vp__beats--3 li:last-child{text-align:left;transform:none}
.vp__beats--3 li:last-child .vp__dot{left:0;right:auto;margin-left:-5px;margin-right:0}
.vp__end{position:absolute;right:0;top:0;width:10px;height:10px}
.vp__end .vp__dot{left:auto;right:0;margin-left:0;margin-right:0;background:rgba(10,28,50,.3)}
.vp__end b{display:none}
.vp__pickname small{display:block;font-weight:500;font-size:.78em;color:var(--ink3);margin-top:3px;letter-spacing:0}
@media (max-width:899px){
  .vp__beats--3 li b{font-size:10.5px}
  .vp__beats--3 li i{font-size:11px;line-height:1.4}
}

/* 20sec: サムネイル + 3カット */
@media (min-width:900px){.cuts__rail--4{grid-template-columns:repeat(4,1fr)}}

/* 制作実績カテゴリー: 8項目 → 4段 */
.smp__cats--8{columns:4}
@media (max-width:899px){.smp__cats--8{columns:3}}
@media (max-width:640px){.smp__cats--8{columns:2}}

/* ---------- 9. 料金 ---------- */
.prc__agencymain{font-size:max(14.5px,1.45cqw);font-weight:700;color:var(--prc-navy);line-height:1.9}
.prc__agencybody .prc__note{
  margin-top:.45em;padding-left:1.1em;text-indent:-1.1em;
  font-size:max(12px,1.1cqw);line-height:1.85;color:var(--ink3);
}
.prc__more{
  margin:clamp(18px,1.9cqw,26px) auto 0;width:fit-content;max-width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4cqw,18px);
  font-size:max(13.5px,1.28cqw);font-weight:700;color:var(--ink);line-height:1.6;text-align:center;
}
.prc__more::before,.prc__more::after{
  content:"";flex:none;width:clamp(28px,3.2cqw,44px);height:2px;border-radius:1px;
  background:rgba(188,98,10,.55);
}
@media (max-width:899px){
  .prc__agencymain{font-size:clamp(14.5px,3.8vw,17px);line-height:1.85}
  .prc__agencybody .prc__note{font-size:clamp(12px,3.2vw,13.5px)}
  .prc__more{font-size:13.5px;gap:10px}
  .prc__more::before,.prc__more::after{width:22px}
}

/* ---------- v36.1: 初回レンダリング検証後の調整 ---------- */
/* 語中で折らない(SPの「不自然な改行」指摘への共通対策)。phrase 単位の折り返し。 */
.ac__t,.ac__d,.about__lead,.about__title--v36,.kvf__lead,.kvf__t,
.cvrb__point,.cvrb__premise,.worry__sub,.sblk__p,.sblk__intro,.proof__cap,
.vp__beats i,.vp__capitem b,.vp__capitem span,.vp__prod,
.prc__agencymain,.prc__agencybody .prc__note,.prc__more,.flw__lead,.flw__p,
.cf textarea,.cf input,.fq__body p,.fq__t,.pre__s,.cnt__sub,.kstat dt{
  word-break:auto-phrase;
}
.worry__sub span,.sconc__lead span{display:inline-block}

/* FV(SP): 1行目のチェックがオレンジ帯の上に乗って同色で消えるので、SPは墨にする。
   版面の最低高(709u)は旧端末画像の丈に合わせたものなので外し、中身で決める。 */
@media (max-width:900px){
  .fv__lead--list .ic{color:#141414}
  .fv__in{min-height:0;padding-bottom:calc(14 * var(--u))}
}

/* kvf(SP): 見出しの級数が u(=0.29px)基準になって潰れていた */
@media (max-width:1023px){
  .kvf__cta--v36 .kvf__t{font-size:clamp(22px,3.6vw,36px)}
  .kvf__cta--v36 .kvf__lead{margin-top:6px}
}

/* A+とは: 2列の説明は小見出しを本文より大きくし、図版までの余白を詰める。 */
@media (max-width:599px){
  .about__plate{grid-template-columns:minmax(0,1fr);gap:24px}
  .ac__t{font-size:clamp(15px,3.2vw,17px);line-height:1.6}
  .ac__t br{display:none}
  .ac__t::after{width:96px;height:9px;margin-top:9px}
  .ac__d{font-size:13.5px;line-height:1.9}
}

/* サンプル: 大判の1点は名前も一段大きく */
@media (min-width:900px){
  .arch__item.is-on .arch__name{font-size:clamp(14px,1.45cqw,17px);margin-top:14px}
}
/* 20sec(SP): 説明が省略記号で切れない幅に */
@media (max-width:899px){
  .cuts__rail--4 li{flex-basis:min(46vw,200px)}
  .cuts__rail--4 figcaption{font-size:10px;letter-spacing:0}
}
/* 料金(SP): 罫で挟むと文が語中で割れるので、上下の罫に切り替える */
@media (max-width:640px){
  .prc__more{
    display:block;width:auto;padding:10px 4px;
    border-top:1px solid rgba(188,98,10,.35);border-bottom:1px solid rgba(188,98,10,.35);
    text-wrap:balance;
  }
  .prc__more::before,.prc__more::after{display:none}
}

/* ---------- v36.2: 2回目の検証後 ---------- */
/* A+とは(SP ≤599): 見出しの改行は残す(1列なら14文字が収まる) */
@media (max-width:599px){.ac__t br{display:inline}}
/* kvf(SP): 「お気軽にお問い合わせください。」を1行に収める級数 */
@media (max-width:1023px){.kvf__cta--v36 .kvf__t{font-size:clamp(19px,5.2vw,36px)}}
/* FV(SP): 実績の下に少し息をさせる */
@media (max-width:900px){.fv__in{padding-bottom:calc(24 * var(--u))}}
/* 動画の区間ラベル(SP): 列は 3:4:3 で文字を収め、点だけ時間位置(--t)に置く */
@media (max-width:640px){
  .vp__beats--3{grid-template-columns:3fr 4fr 3fr !important}
  .vp__beats--3 li{position:static;padding-right:6px}
  .vp__beats--3 li .vp__dot{left:calc(var(--t, 0) / 20 * 100%);margin-left:-5px}
  .vp__beats--3 li:first-child .vp__dot{margin-left:0}
  .vp__beats--3 li:last-child .vp__dot{left:calc(var(--t, 0) / 20 * 100%);right:auto;margin-left:-5px}
}

/* A+とは: ラベル「Amazon プレミアムA+コンテンツとは」を一段大きく(指示「ここ重要なので」) */
.about__label{font-size:clamp(16px,1.6vw,23px);font-weight:900;letter-spacing:.01em}
@media (max-width:767px){.about__label{font-size:clamp(15px,3.9vw,20px)}}

/* ---------- v36.3: デザイン再点検(2026-09-02) ---------- */
/* FV実績4本(2x2 になる ≤900): ラベルが1行の本(商品向け動画)と2行の本
   (Amazon商品ページ/制作)で dt の高さが違い、数字と月桂樹の天地が
   段違いに見えていた。ラベル領域を2行ぶん(2.5em)に固定し、文字は
   その下端に寄せる。flex縦組みなら .kbr(改行用の空要素)は高さ0の
   アイテムになるだけで、テキストノードがそのまま行として積まれる。 */
@media (max-width:900px){
  .fv__stats .kstat dt{
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    min-height:2.5em; /* line-height 1.25 x 2行 */
  }
}

/* ---------- v37: FV端末を写実フレームへ差し替え+画面内フェード(2026-09-02) ---------- */
/* フレーム = codex生成の透過webp(assets/hero/parts/v6/)。画面穴は書き出し時点で透過
   (alpha版。縁はベゼル色→透明のAA)。中身(.dv6__hole の .dv6__face)はフレームの下層。
   穴の位置はアルファ領域の実測値:
     ノートPC left 9.375% / top 4.876% / w 81.208% / h 86.219% (画面比 1.5975)
     スマホ   left 5.796% / top 2.065% / w 88.198% / h 95.821% (画面比 0.4295 = 384:894)
   v37.1 配置(参考画像 codex/ref-01 の比率):
     スマホの高さ ≈ ノートPCの0.7(幅 --pw x .77)、天端 ≈ ノートPCの3割の高さ、
     接地線 = ノートPC台の下端(PCは box 500u - ノートPC高 460u = bottom 40u、
     ≤900 は box 212u - 197u = bottom 15u)。
   端末の幅は v36 の --lw/--pw を流用してスケール(SPの畳み込みもそのまま効く)。
   旧 .dv 系の宣言は残してあるが、v37 マークアップに現れるのは .dv__shadow のみ。 */
.fv__devices--v6 .dv6{position:absolute}
/* v37.2: 参考画像の「角度感」。参考は1台のカメラで撮った1つの平面なので、
   端末ごとに別の角度を付けず、コンテナ(.fv__devices--v6)を1回だけ回す。
   これで2台の水平線が平行(同一の消失点)に揃う。ロール2.2° + 右側が奥へ + 浅い俯瞰。 */
/* 支給PC画像(3036×2032)は元の縦横比で表示し、画面内だけscript.jsで四隅へ射影。
   ノートPC幅は882u→980u(約11%拡大)。右端と接地位置を保ち、上・左へ広げる。 */
.fv__devices--v6 .dv6--laptop{right:0;bottom:calc(-55 * var(--u));top:auto;width:calc(var(--lw) * 1.4);z-index:1}
.fv__devices--v6 .dv6--phone{left:0;bottom:calc(-12 * var(--u));width:calc(var(--pw) * .84);z-index:2}
.fv__devices--v6 .dv__shadow{bottom:calc(-60 * var(--u))}

/* v37.6 見出し「デカデカ」(指示: ウェイト↑ line-height↑ サイズ↑)。
   Zen Kaku Gothic New は 900 が上限なので、text-stroke で擬似的にさらに太らせる。
   コピーの天を 118u→104u へ上げ、拡大した端末(スマホ天端 311u)との間に
   見出し2行目の下端(≈299u)+12u の余白を確保。 */
.fv__copy{top:calc(104 * var(--u))}
.fv__title--txt{
  font-size:calc(55 * var(--u));line-height:1.36;letter-spacing:-.01em;
  -webkit-text-stroke:.014em currentColor;
}
.fv__t2::after{height:calc(20 * var(--u))}
@media (max-width:900px){
  .fv__title--txt{font-size:calc(32 * var(--u));line-height:1.34}
}
.fv__devices--v6 .dv6__frame{position:relative;z-index:2;display:block;width:100%;height:auto;max-width:none}
.fv__devices--v6 .dv6__hole{position:absolute;z-index:1;overflow:hidden}
/* 1038×724の入力面を透過画面に合わせる。射影の設定前は隠し、枠外のちらつきを防ぐ。 */
.fv__devices--v6 .dv6__hole--pc{
  left:0;top:0;width:1038px;height:724px;background:#fff;
  transform-origin:0 0;transform:none;visibility:hidden;
}
.fv__devices--v6 .dv6__hole--sp{left:5.796%;top:2.065%;width:88.198%;height:95.821%;background:#232F3E}
.fv__devices--v6 .dv6__face{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
/* v38: 昆陽甘芋はAmazonヘッダーと左右白余白を除き、本文幅1038pxに合わせた。
   cover+上基準で画面穴を埋め、本文の文字・商品画像は縦横比を変えない。 */
.fv__devices--v6 .dv6__face--b2{object-fit:cover;object-position:50% 0}
/* フェード: 重ね面(--b2〜--b6/--p2〜--p5)は透明で待機し、自分の番だけ乗る。
   1面目(下地)は常に不透明なので、アニメが動かない環境では従来どおりの静止表示
   (隠れるコンテンツは無い)。周期は PC 30s / SP 20s とずらし、切替が重なり続けないように。
   93%からの全面フェードアウトで下地に戻り、継ぎ目なくループする。 */
.fv__devices--v6 .dv6__face--b2,
.fv__devices--v6 .dv6__face--b3,.fv__devices--v6 .dv6__face--b4,
.fv__devices--v6 .dv6__face--b5,.fv__devices--v6 .dv6__face--b6,
.fv__devices--v6 .dv6__face--p2,.fv__devices--v6 .dv6__face--p3,
.fv__devices--v6 .dv6__face--p4,.fv__devices--v6 .dv6__face--p5{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .fv__devices--v6 .dv6__face--b2{animation:dv6FadeB2 30s ease-in-out infinite}
  .fv__devices--v6 .dv6__face--b3{animation:dv6FadeB3 30s ease-in-out infinite}
  .fv__devices--v6 .dv6__face--b4{animation:dv6FadeB4 30s ease-in-out infinite}
  .fv__devices--v6 .dv6__face--b5{animation:dv6FadeB5 30s ease-in-out infinite}
  .fv__devices--v6 .dv6__face--b6{animation:dv6FadeB6 30s ease-in-out infinite}
  .fv__devices--v6 .dv6__face--p2{animation:dv6FadeP2 20s ease-in-out -2s infinite}
  .fv__devices--v6 .dv6__face--p3{animation:dv6FadeP3 20s ease-in-out -2s infinite}
  .fv__devices--v6 .dv6__face--p4{animation:dv6FadeP4 20s ease-in-out -2s infinite}
  .fv__devices--v6 .dv6__face--p5{animation:dv6FadeP5 20s ease-in-out -2s infinite}
}
/* v39: PC 6枚フェード(各面 約4.8s、フェード 約0.9s)。DOM後方が上層なので
   後の面が前の面を覆い、最後に全 fade-out して下地へ戻る */
@keyframes dv6FadeB2{0%,10%{opacity:0}13%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeB3{0%,26%{opacity:0}29%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeB4{0%,42%{opacity:0}45%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeB5{0%,58%{opacity:0}61%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeB6{0%,74%{opacity:0}77%,93%{opacity:1}99%,100%{opacity:0}}
/* SP 5面(スーツケース→美容→食品→アウトドア→昆陽甘芋)。20s を五等分 */
@keyframes dv6FadeP2{0%,18%{opacity:0}24%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeP3{0%,38%{opacity:0}44%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeP4{0%,58%{opacity:0}64%,93%{opacity:1}99%,100%{opacity:0}}
@keyframes dv6FadeP5{0%,78%{opacity:0}84%,93%{opacity:1}99%,100%{opacity:0}}
@media (max-width:900px){
  /* SPはPC幅339u→360u(約6%拡大)。見出しと実績の間に収めるため、接地位置を維持。 */
  .fv__devices--v6{width:calc(370 * var(--u));height:calc(240 * var(--u))}
  .fv__devices--v6 .dv6--laptop{width:calc(var(--lw) * 1.2);bottom:0}
  .fv__devices--v6 .dv6--phone{left:calc(30 * var(--u));bottom:calc(15 * var(--u));width:calc(var(--pw) * .95)}
  .fv__devices--v6 .dv__shadow{bottom:calc(6 * var(--u))}
}

/* =========================================================
   v40: SPヘッダー モバイルメニュー(2026-09-03)
   ≤860px(.nav__tel が隠れるSP域)でハンバーガーを出し、各セクションへの
   全面オーバーレイをフェードで開く。PC/タブレットは従来どおり。
   開閉の真実は .nav.open の有無(JS)。JSなしではボタン自体出さない。
   ========================================================= */
.nav__burger{display:none}
.nav__spmenu{display:none}
@media (max-width:860px){
  body.js .nav__burger{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:none;width:44px;height:44px;margin-right:-8px;
    background:none;border:0;border-radius:8px;cursor:pointer;
  }
  body.js .nav__burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .nav__burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .25s ease,opacity .2s ease}
  .nav.open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav__burger span:nth-child(2){opacity:0}
  .nav.open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* 全面オーバーレイでフェードイン。ヘッダー1行(.nav__in)は前面に残し、
     ロゴ・相談ボタン・×をそのまま触れる。固定CTAバー(z:60)より上に敷く */
  .nav.open .nav__in{position:relative;z-index:72}
  .nav.open .nav__spmenu{
    display:block;position:fixed;inset:0;z-index:70;
    background:var(--paper);
    padding:92px 20px calc(32px + env(safe-area-inset-bottom));
    overflow-y:auto;overflow-x:hidden;
    animation:spmenuIn .28s ease;
  }
  @keyframes spmenuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav__spmenu-link{display:flex;align-items:center;gap:8px;
    padding:13px 4px;min-height:48px;
    font-size:16px;font-weight:700;color:var(--ink2);
    border-top:1px solid rgba(33,28,22,.12)}
  .nav__spmenu-link:first-child{border-top:0}
  .nav__spmenu-link .ic{width:16px;height:16px;margin-left:auto;color:var(--amber-text);flex:none}
  .nav__spmenu-link.is-here{color:var(--ink);font-weight:900}
  .nav__spmenu-foot{padding-top:12px}
  /* 行リンクの指定が .ubtn に漏れないよう、フッターのボタンは .ubtn のまま。
     詳細度で負けないよう幅・級数だけ足す */
  .nav__spmenu-foot .ubtn{width:100%;font-size:16px}
  .nav__spmenu-tel{display:flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 4px;min-height:48px;color:var(--ink2)}
  .nav__spmenu-tel .ic{width:18px;height:18px;color:var(--amber-text);flex:none}
  .nav__spmenu-tel span{font-family:var(--num);font-weight:600;font-size:18px;letter-spacing:.03em;text-align:center}
  .nav__spmenu-tel small{display:block;font-family:var(--sans);font-size:10px;color:var(--ink3);font-weight:500}
}
@media (prefers-reduced-motion:reduce){
  .nav__burger span{transition:none}
  .nav.open .nav__spmenu{animation:none}
}

/* SP: 人物を吹き出しに近づけ、相談条件と特徴見出しを横一列で見せる。 */
@media (max-width:640px){
  .worry__visual{margin-top:-28px;width:min(46%,194px)}
  .worry__points{
    flex-direction:row;flex-wrap:nowrap;align-items:center;
    width:auto;--gap:clamp(16px,4vw,24px);
  }
  .worry__points li{font-size:clamp(10.5px,2.6vw,13.5px);gap:4px;white-space:nowrap}
  .worry__points .ic{width:14px;height:14px;flex:none}
  .worry__points li+li::before{
    left:calc(var(--gap)/-2);right:auto;top:50%;
    width:1px;height:16px;margin-top:-8px;border:0;
    background:rgba(244,239,230,.35);
  }
  .sblk--01 .sblk__h,.sblk--02 .sblk__h,.sblk--03 .sblk__h--lead{font-size:clamp(12px,4.1vw,25px);line-height:1.6;white-space:nowrap}
  .sblk--03 .sblk__h--lead em{font-size:1em}
  .sblk--01 .sblk__h span,.sblk--02 .sblk__h span{display:inline}
}

/* SPは幅いっぱいに流し、強調語句の途中だけ折り返さない。 */
.worry__list p .worry__line{display:contents}
@media (max-width:959px){
  .worry__list p{font-size:clamp(10.5px,2.5vw,14.5px);line-height:1.8;word-break:normal;text-wrap:wrap}
  .worry__list p span{display:contents}
  .worry__list p b{white-space:nowrap}
}

@media (max-width:640px){
  .worry__list li{padding-inline:10px}
}

/* SPの特徴03も、番号とラベル → 見出し → 説明文の順で01・02に揃える。 */
@media (max-width:640px){
  .sblk--03{column-gap:12px}
  .sblk--03 .sblk__kicker{
    grid-column:2;grid-row:1;align-self:end;justify-self:start;
    margin-top:0;margin-bottom:.3em;padding-bottom:.42em;line-height:1.5;
    background:var(--brush) no-repeat 0 100%/100% .4em;
  }
  .sblk--03 .sblk__h--lead{grid-column:1/-1;grid-row:2;margin-top:16px}
  .sblk--03 .sblk__intro{
    grid-column:1/-1;grid-row:3;margin:14px 0 0;
    font-size:13.5px;line-height:1.95;font-weight:400;color:var(--ink2);
  }
  .sblk--03 .sblk__proof{grid-row:4}
  .sblk--03 .sblk__board{grid-row:5}
}

/* 最後の案内は固定改行・均等な行分割をせず、横幅に沿って流す。 */
.pre--gate .pre__t,.pre--gate .pre__s{word-break:normal;text-wrap:wrap}

/* SP: 説明と図版、実績パネルとCVRの間を詰める。 */
@media (max-width:640px){
  .about__fig{margin-top:-24px}
  .about__band.about__band--panel{padding-bottom:20px}
  .about + .cvr{padding-top:20px}
}

/* A+の本文は見出し下に配置。PCの図版と注釈は元の大きさ・座標を保つ。 */
.about__head .about__lead{
  position:static;width:auto;max-width:none;
  margin:18px 0 0;padding:0;
  font-size:clamp(14px,1.1vw,16px);line-height:1.9;
  word-break:normal;text-wrap:wrap;
}
.about__lead .nw{white-space:nowrap}
/* SPは説明2項目 → 図版 → 説明2項目。図版との間隔を揃える。 */
@media (max-width:767px){
  .about__plate{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:24px}
  .about__leadbreak{display:none}
  .about__calls{
    display:grid;grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;
    align-items:start;gap:24px;width:auto;max-width:none;margin:0;padding:0;order:unset;
  }
  .about__calls--primary{grid-row:1}
  .about__calls--secondary{grid-row:3}
  /* 素材上部の透過余白も含めて、説明文と端末の見た目の間隔を詰める。 */
  .about__fig{grid-column:1;grid-row:2;width:min(100%,330px);margin:-28px 0 0;justify-self:center;order:unset}
  .about__scene{width:100%}
  .about__fig::before{width:86%;height:auto;aspect-ratio:900/1840;left:18%;top:-6%}
  .about .ac{position:static;width:auto}
  .about .ac__reg{position:static;width:20px;height:20px;margin-bottom:10px}
  .about .ac__t{font-size:17px;line-height:1.6;letter-spacing:0;word-break:normal;text-wrap:wrap}
  .about .ac__t::after{content:none}
  .about .ac__t br{display:block}
  .about .ac__t .nw{display:inline-block;white-space:nowrap}
  .about .ac__d{width:auto;margin-top:12px;font-size:14px;line-height:1.9;word-break:normal;text-wrap:wrap}
}
@media (max-width:599px){
  .about__plate{gap:16px;margin-top:22px}
  .about__calls{gap:16px}
  .about .ac__reg{width:16px;height:16px;margin-bottom:7px}
  .about .ac__t{font-size:15px;line-height:1.6}
  .about .ac__d{font-size:13px;line-height:1.85;margin-top:9px}
}

/* Shared header: match approved TOP reference (2026-09-09). */
@media(min-width:1241px){
  .nav{border-top:6px solid #211C16}
  .nav__in{padding-left:40px;padding-right:16px}
}

/* About: 元の構図を維持し、短くした見出しの文字サイズを揃える。 */
.about__travel-picture{filter:drop-shadow(0 8px 8px rgb(53 42 28 / .13))}
.about__scene--travel{
  -webkit-mask:url("assets/about/travel-v2/travel-sp-mask.svg") center / 100% 100% no-repeat;
  mask:url("assets/about/travel-v2/travel-sp-mask.svg") center / 100% 100% no-repeat;
}
@media (min-width:768px){
  .about .ac--mods .ac__t{font-size:max(17px,calc(16.6 * var(--u)));letter-spacing:0}
  .about__scene--travel{
    -webkit-mask-image:url("assets/about/travel-v2/travel-pc-mask.svg");
    mask-image:url("assets/about/travel-v2/travel-pc-mask.svg");
  }
}

/* PCの商品紹介3段はページの遠近に合わせ、手前のスマホをマスクで保護する。 */
.about__module-overlay{display:none}
@media (min-width:768px){
  .about__fig{position:relative}
  .about__module-overlay{
    display:block;position:absolute;inset:0;pointer-events:none;
    -webkit-mask:url("assets/about/module-tone/pc-modules-mask.svg?v=2") center / 100% 100% no-repeat;
    mask:url("assets/about/module-tone/pc-modules-mask.svg?v=2") center / 100% 100% no-repeat;
  }
  .about__module-overlay img{
    display:block;position:absolute;object-fit:fill;
    /* 1052 × 1495座標の (42,485)〜(656,1076)。下辺を元のページに沿わせる。 */
    left:3.9924%;top:32.4415%;width:58.365%;height:35.6522%;
    transform-origin:top left;
    transform:scaleX(.913103) perspective(calc(695.8989 * var(--u))) rotateY(-9deg);
  }
}

/* タブレットもPCと同じ画像・座標を使用。文字だけを版幅に合わせる。 */
@media (min-width:768px) and (max-width:1179px){
  .about .ac__t,.about .ac--mods .ac__t{font-size:max(13px,calc(16.6 * var(--u)));letter-spacing:0}
  .about .ac__d{font-size:max(12px,calc(12.5 * var(--u)))}
}

/* SP採用案: 商品ページを囲む注釈と、手前に重なるスマートフォン。 */
.ac__copy--sp,.about-sp,.about-sp__copy-narrow{display:none}
@media (max-width:767px){
  .about__head--desktop,.about__plate{display:none}
  .about-sp{
    --sp-orange:#f58200;
    display:block;position:relative;isolation:isolate;
    width:min(100% - 32px,540px);margin-inline:auto;padding:8px 0 0;
  }
  .about-sp::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;
    top:-35px;left:22%;width:120%;height:calc(100% + 100px);
    background:url("assets/about/a-mark.svg") no-repeat center top / 100% auto;opacity:1;
  }
  .about-sp__head{position:relative;z-index:2}
  .about-sp__label{font-size:clamp(11px,3.1vw,16px);font-weight:700;color:var(--sp-orange);letter-spacing:.015em}
  .about-sp__title{
    position:relative;margin:13px 0 0;font-size:clamp(22px,6.65vw,36px);font-weight:900;
    font-feature-settings:"palt";letter-spacing:-.035em;line-height:1.4;white-space:nowrap;
  }
  .about-sp__title span{background:linear-gradient(transparent 16%,#ffdc62 16%,#ffdc62 91%,transparent 91%)}
  .about-sp__lead{font-size:clamp(12px,3.3vw,16px);line-height:1.7;margin-top:14px;color:var(--ink2)}
  .about-sp__stage{position:relative;aspect-ratio:1 / 1.03;margin-top:0}
  .about-sp__page{
    position:absolute;width:62%;height:auto;left:20.5%;top:14px;border-radius:4px;
    transform:perspective(900px) rotateY(-8deg) skewY(-7deg);transform-origin:center;
    box-shadow:0 13px 18px -9px rgb(44 39 32 / .24);
  }
  .about-sp__call{position:absolute;z-index:2}
  .about-sp__call h3{font-size:clamp(13px,3.7vw,20px);font-weight:900;line-height:1.5;letter-spacing:-.025em;margin-top:8px}
  .about-sp__call p{font-size:clamp(11px,3.0vw,15px);line-height:1.65;margin-top:7px;color:#4e4841}
  .about-sp__call--video{left:0;top:8px;width:25%}
  .about-sp__call--image{right:-12px;top:10%;width:24%}
  .about-sp__call--image h3{font-size:clamp(12px,3.35vw,18px);white-space:nowrap;letter-spacing:-.04em}
  .about-sp__icon{
    display:grid;place-items:center;width:clamp(36px,10.8vw,54px);aspect-ratio:1;
    color:#fff;background:var(--sp-orange);border:2px solid #fff;border-radius:50%;
    box-shadow:0 0 0 1px rgb(245 130 0 / .12);
  }
  .about-sp__icon svg{width:55%;height:55%;fill:currentColor}
  .about-sp__arrow{position:absolute;width:62%;height:auto;overflow:visible;pointer-events:none}
  .about-sp__call--video .about-sp__arrow{left:49%;top:37px;transform:rotate(30deg)}
  .about-sp__call--image .about-sp__arrow{right:99%;top:34px;transform:rotate(159deg)}
  .about-sp__hand{font-family:"Yusei Magic",var(--sans);font-weight:400;color:#e87800;line-height:1.45;white-space:nowrap}
  .about-sp__hand::after{content:"";display:block;height:12px;background:var(--brush-o) no-repeat center / 100% 100%}
  .about-sp__hand--appeal{position:absolute;left:0;top:52%;font-size:clamp(12px,3.3vw,18px);transform:rotate(-12deg)}
  .about-sp__star{position:absolute;width:17px;height:17px;color:var(--sp-orange)}
  .about-sp__star--heading{right:0;top:36px}
  .about-sp__star--one{left:12%;top:86%}
  .about-sp__star--two{right:2%;bottom:20%}
  .about-sp__panel{
    position:relative;margin-top:17px;padding:21px 11px 21px 31%;
    background:rgb(255 249 235 / .82);border:1px solid #f5d69f;border-radius:13px;
    box-shadow:0 8px 20px -15px rgb(114 80 37 / .16);
  }
  .about-sp__phone{
    position:absolute;z-index:3;width:22%;max-width:85px;left:6%;top:-25px;
    transform:rotate(-11deg);filter:drop-shadow(0 6px 4px rgb(43 32 23 / .2));
  }
  .about-sp__phone-frame{display:block;width:100%;height:auto}
  .about-sp__phone-screen{position:absolute;left:5.4%;top:2.4%;width:89.2%;height:95.2%;object-fit:cover;border-radius:12% / 5.5%}
  .about-sp__hand--device{position:absolute;right:0;top:-53px;font-size:clamp(13px,3.6vw,19px);transform:rotate(-8deg);text-align:center}
  .about-sp__features{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3.6vw,20px);list-style:none;margin:0;padding:0}
  .about-sp__features::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - .5px);width:1px;background:rgb(114 94 62 / .25)}
  .about-sp__features li{display:grid;grid-template-columns:clamp(30px,7.8vw,38px) minmax(0,1fr);column-gap:6px;align-items:center;align-content:start;min-width:0}
  .about-sp__feature-icon{position:relative;display:block;width:100%;aspect-ratio:1;background:#ffddb0;border-radius:50%;margin-bottom:0}
  .about-sp__feature-icon::before{content:"";position:absolute;inset:22%;background:var(--sp-orange);mask:var(--feature-icon) no-repeat center / contain}
  .about-sp__feature-icon--modules{--feature-icon:url("assets/about/sp-annotated/icons/puzzle-piece.svg")}
  .about-sp__feature-icon--mobile{--feature-icon:url("assets/about/sp-annotated/icons/device-mobile.svg")}
  .about-sp__features h3{font-size:clamp(12px,3.15vw,17px);font-weight:900;line-height:1.5;letter-spacing:-.035em;white-space:nowrap;min-height:3em}
  .about-sp__features h3 strong{margin-inline:.16em;font-size:1.15em;line-height:1;letter-spacing:0;font-family:var(--sans);color:var(--sp-orange);vertical-align:baseline}
  .about-sp__features p{grid-column:1 / -1;margin-top:10px;font-size:clamp(12px,3.1vw,15px);line-height:1.65;letter-spacing:-.03em;color:#4e4841}
  .about-sp__caption{font-size:10px;text-align:center;color:#887d70;margin-top:22px}
  .about__band.about__band--panel{margin-top:25px}
}
@media (max-width:359px){
  .about-sp{width:calc(100% - 28px)}
  .about-sp__copy-full{display:none}
  .about-sp__copy-narrow{display:inline}
  .about-sp__call p{font-size:11px}
  .about-sp__call--image{right:-10px;top:9%;width:25%}
  .about-sp__panel{padding-left:30%;padding-right:8px}
  .about-sp__features{gap:12px}
  .about-sp__features li{grid-template-columns:26px minmax(0,1fr);column-gap:5px}
  .about-sp__feature-icon::before{inset:5px}
  .about-sp__features p{font-size:11px}
  .about-sp__phone{left:5%;width:23%}
}

/* Selected PC/SP hero reference — 2026-09-13. Editable copy stays in HTML. */
.nav.nav--showcase{position:sticky;inset:auto;top:0;border-top:0;border-bottom:1px solid #d5d0c7;background:#fbf9f4;color:#07152b}
.nav--showcase .nav__in{height:clamp(64px,4.67vw,84px);padding:8px 3.78%;gap:28px}
.nav--showcase .brand{gap:14px}
.nav--showcase .brand__mark{width:clamp(58px,4.4vw,78px)}
.nav--showcase .brand__name-main{font-size:clamp(23px,1.7vw,30px);letter-spacing:.025em}
.nav--showcase .nav__links{display:flex;gap:clamp(22px,2.2vw,36px);font-size:clamp(13px,1.01vw,17px)}
.nav--showcase .nav__links a{color:#07152b}
.nav--showcase .nav__act{display:flex;margin-left:0}
.nav--showcase .nav__act .ubtn{width:clamp(180px,14vw,244px);min-height:48px;padding:14px 24px;font-size:18px}
.showcase{--hu:calc(100vw / 1586);position:relative;isolation:isolate;overflow:hidden;background:#fbf8f1;color:#07152b}
.showcase__visual{position:relative;width:100%;aspect-ratio:1586 / 791;pointer-events:none}
.showcase__scene{display:block;width:100%;height:auto}
.showcase__copy{position:absolute;z-index:2;left:calc(58 * var(--hu));top:calc(70 * var(--hu));width:calc(614 * var(--hu))}
.showcase__service{display:inline-flex;align-items:center;justify-content:center;gap:calc(13 * var(--hu));border:1px solid #ff6500;border-radius:999px;padding:calc(4 * var(--hu)) calc(23 * var(--hu));background:rgb(255 255 255 / .65);font-size:calc(20 * var(--hu));font-weight:700;line-height:1.5;white-space:nowrap}
.showcase__service b{font-weight:700}
.showcase__title{width:calc(635 * var(--hu));font-family:"Noto Serif JP",var(--serif);font-size:calc(54 * var(--hu));font-weight:900;line-height:1.36;letter-spacing:-.035em;margin:calc(21 * var(--hu)) 0 0}
.showcase__title>span{display:block;white-space:nowrap}
.showcase__title em{font-size:1.2em;color:#f56600;font-style:normal;letter-spacing:-.02em}
.showcase__bracket{display:inline-block;width:.55em;letter-spacing:0}
.showcase__bracket:first-child{text-indent:-.45em}
.showcase__tail{letter-spacing:-.14em}
.showcase__lead{font-family:var(--serif);font-size:calc(22.5 * var(--hu));font-weight:700;line-height:1.65;margin-top:calc(23 * var(--hu));letter-spacing:.01em;white-space:nowrap}
.showcase__proof{position:absolute;z-index:2;left:calc(58 * var(--hu));top:calc(425 * var(--hu));width:calc(470 * var(--hu));display:grid;grid-template-columns:1fr 1fr;gap:calc(30 * var(--hu));margin:0}
.showcase__proof::after{content:"";position:absolute;left:50%;top:4%;bottom:0;border-left:1px solid #b9b7b3}
.showcase__stat{display:grid;grid-template-columns:calc(44 * var(--hu)) 1fr;grid-template-rows:auto auto;column-gap:calc(10 * var(--hu));align-items:center;white-space:nowrap}
.showcase__stat-icon{display:block;grid-column:1;grid-row:1 / 3;width:calc(44 * var(--hu));height:calc(55 * var(--hu));background:#785326;mask:var(--stat-icon) no-repeat center / contain}
.showcase__stat-icon--image{--stat-icon:url("assets/hero/showcase/icons/images-square.svg")}
.showcase__stat-icon--video{--stat-icon:url("assets/hero/showcase/icons/video.svg")}
.showcase__stat dt{grid-column:2;grid-row:1;font-size:calc(16 * var(--hu));font-weight:700;line-height:1.5}
.showcase__stat dd{grid-column:2;grid-row:2;display:flex;align-items:baseline;gap:calc(6 * var(--hu));line-height:1.15}
.showcase__stat dd b{font-family:var(--num);font-size:calc(54 * var(--hu));font-weight:600;letter-spacing:-.035em;color:#f26600}
.showcase__stat dd span{font-size:calc(17 * var(--hu));font-weight:700}
.showcase__actions{position:absolute;z-index:3;left:calc(54 * var(--hu));top:calc(546 * var(--hu));width:calc(475 * var(--hu));text-align:center}
.showcase .showcase__cta{display:flex;width:100%;min-width:0;height:calc(78 * var(--hu));padding:0 calc(25 * var(--hu));border:0;border-radius:999px;font-family:var(--sans);font-size:calc(23 * var(--hu));font-weight:900;letter-spacing:0;gap:.5em;white-space:nowrap;--ubtn-g1:#ff6900;--ubtn-g2:#ff493d;--ubtn-g3:#ff2d78;--ubtn-label:#fff}
.showcase__free{display:flex;align-items:center;justify-content:center;gap:calc(18 * var(--hu));font-size:calc(14 * var(--hu));font-weight:700;line-height:1.6;margin-top:calc(16 * var(--hu))}
.showcase__free::before,.showcase__free::after{content:"";width:calc(48 * var(--hu));border-top:1px solid #939aa1}
.showcase__samples{display:inline-flex;align-items:center;gap:.5em;font-size:calc(18 * var(--hu));font-weight:700;line-height:1.7;border-bottom:1px solid currentColor;margin-top:calc(27 * var(--hu))}
.showcase__samples:hover{color:#e76b00}
.showcase a:focus-visible{outline:3px solid #07152b;outline-offset:5px}
.showcase__next{position:relative;z-index:1;text-align:center;font-family:var(--serif);font-size:calc(34 * var(--hu));font-weight:700;line-height:1.5;padding:calc(52 * var(--hu)) 16px calc(38 * var(--hu))}
.showcase__next::after{content:"";display:block;width:calc(68 * var(--hu));border-top:2px solid #ff7200;margin:calc(13 * var(--hu)) auto 0}
.showcase__next-sp{display:none}
.showcase__screen-mask{position:absolute;inset:0;mask:url("assets/hero/showcase/pc-phone-mask.svg") center / 100% 100% no-repeat;pointer-events:none}
.showcase__screen{position:absolute;left:0;top:0;width:1038px;height:1220px;transform-origin:0 0;visibility:hidden;overflow:hidden;border-radius:0 0 12px 0}
.showcase__slide{position:absolute;inset:0;background:#fff;opacity:0;overflow:hidden}
/* Each supplied desktop image includes the same 64px header. Keep the scene header fixed. */
.showcase__sample-top{display:block;width:100%;height:724px;margin-top:-64px;object-fit:contain;object-position:top}
.showcase__sample-detail{display:block;width:100%;height:560px;object-fit:cover;object-position:center bottom}
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .showcase__slide--2{animation:dv6FadeB2 30s ease-in-out infinite}
  .showcase__slide--3{animation:dv6FadeB3 30s ease-in-out infinite}
  .showcase__slide--4{animation:dv6FadeB4 30s ease-in-out infinite}
  .showcase__slide--5{animation:dv6FadeB5 30s ease-in-out infinite}
  .showcase__slide--6{animation:dv6FadeB6 30s ease-in-out infinite}
}
@media (min-width:768px) and (max-width:1050px){
  .nav--showcase .nav__links{gap:14px;font-size:12px}
  .nav--showcase .nav__in{gap:18px}
  .nav--showcase .brand__mark{width:48px}
  .nav--showcase .brand__name-main{font-size:20px}
  .nav--showcase .nav__act .ubtn{width:150px;min-height:42px;font-size:15px;padding:10px 16px}
  .showcase__service{font-size:12px}
  .showcase__lead{font-size:max(13px,calc(22.5 * var(--hu)))}
}
@media (min-width:768px) and (max-width:900px){
  .showcase__lead{line-height:1.4;margin-top:calc(14 * var(--hu))}
  .showcase__lead-final{display:block}
  .showcase__proof{top:calc(450 * var(--hu))}
}
@media (min-width:768px){
  body.js .nav--showcase .nav__burger{display:none}
  .mcta.mcta--showcase{display:none}
}
@media (max-width:767px){
  .nav--showcase .nav__in{height:clamp(54px,11.25vw,86px);padding:6px 4%;gap:12px}
  .nav--showcase .brand{gap:8px}
  .nav--showcase .brand__mark{width:clamp(44px,11vw,80px)}
  .nav--showcase .brand__name-main{font-size:clamp(19px,3.3vw,28px);letter-spacing:.02em}
  .nav--showcase .nav__links,.nav--showcase .nav__act{display:none}
  body.js .nav--showcase .nav__burger{display:flex;margin-left:auto;margin-right:-6px}
  .nav--showcase .nav__burger span{width:clamp(24px,5.6vw,40px);background:#07152b}
  .showcase{--hu:calc(100vw / 853);display:flex;flex-direction:column;overflow:hidden}
  .showcase__copy{position:static;order:1;width:100%;padding:calc(14 * var(--hu)) calc(50 * var(--hu)) 0;text-align:center}
  .showcase__service{gap:calc(22 * var(--hu));font-size:max(11px,calc(25 * var(--hu)));padding:calc(8 * var(--hu)) calc(35 * var(--hu));line-height:1.5}
  .showcase__service>span{color:#ec6400}
  .showcase__title{width:100%;font-size:calc(64 * var(--hu));line-height:1.26;margin-top:0;letter-spacing:-.035em}
  .showcase__title em{font-size:1.21em;letter-spacing:-.02em}
  .showcase__lead{font-family:var(--sans);font-size:calc(29 * var(--hu));font-weight:500;line-height:1.5;margin-top:calc(22 * var(--hu));letter-spacing:.025em}
  .showcase__visual{order:2;aspect-ratio:853 / 834;margin-top:calc(15 * var(--hu))}
  .showcase__screen-mask{display:none}
  .showcase__proof{position:relative;order:3;left:auto;top:auto;width:calc(705 * var(--hu));margin:calc(5 * var(--hu)) auto 0;gap:calc(45 * var(--hu))}
  .showcase__stat{grid-template-columns:calc(78 * var(--hu)) 1fr;column-gap:calc(12 * var(--hu))}
  .showcase__stat-icon{width:calc(76 * var(--hu));height:calc(82 * var(--hu));background:#694818}
  .showcase__stat dt{font-size:calc(24 * var(--hu));line-height:1.2}
  .showcase__stat dd{gap:calc(9 * var(--hu));line-height:1}
  .showcase__stat dd b{font-size:calc(72 * var(--hu));color:#bf5400}
  .showcase__stat dd span{font-size:calc(24 * var(--hu));color:#694818}
  .showcase__actions{position:static;order:4;width:calc(100% - 72 * var(--hu));margin:calc(20 * var(--hu)) auto 0}
  .showcase .showcase__cta{height:max(48px,calc(105 * var(--hu)));font-size:max(13px,calc(34 * var(--hu)));padding:0 12px;gap:.4em}
  .showcase__free{font-size:max(11px,calc(23 * var(--hu)));font-weight:500;margin-top:calc(17 * var(--hu));gap:calc(30 * var(--hu))}
  .showcase__free::before,.showcase__free::after{width:calc(22 * var(--hu))}
  .showcase__samples{font-size:max(13px,calc(25 * var(--hu)));font-weight:500;margin-top:calc(19 * var(--hu))}
  .showcase__next{order:5;display:flex;align-items:center;justify-content:center;gap:calc(24 * var(--hu));font-size:calc(27 * var(--hu));font-weight:500;padding:calc(25 * var(--hu)) calc(40 * var(--hu)) calc(12 * var(--hu));white-space:nowrap}
  .showcase__next::before,.showcase__next::after{content:"";display:block;flex:1;width:auto;border-top:1px solid #76808a;margin:0}
  .showcase__next-pc{display:none}
  .showcase__next-sp{display:block}
  .mcta.mcta--showcase{display:grid;grid-template-columns:1fr 2.1fr;gap:12px;padding:3px max(6px,1.5vw) calc(3px + env(safe-area-inset-bottom));background:#fbf8f1;border-top:1px solid #bfc0c0}
  .mcta--showcase .ubtn{min-height:42px;padding:7px 10px;font-size:clamp(15px,3.5vw,22px);--ubtn-g1:#ff6900;--ubtn-g2:#ff493d;--ubtn-g3:#ff2d78;--ubtn-label:#fff}
  .mcta--showcase .mcta__tel{background:#fff;color:#08121b;border:1px solid #ccc;box-shadow:0 2px 3px #00000014;--ubtn-g1:#fff;--ubtn-g2:#fff;--ubtn-g3:#fff;--ubtn-label:#08121b}
  .mcta--showcase .mcta__tel .ic{color:#08121b;width:1.25em;height:1.25em}
}

/* contact.php: honeypot, server-side invalid, submitting */
.cf__hp{
  position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;
}
.ubtn--form:disabled{opacity:.65;cursor:wait}