/* ══════════════════════════════════════════════════════════════════
   écrin nail studio ─ 日本語版タイポグラフィ／レイアウト調整レイヤー
   作成：2026-08-14

   ■ このファイルの役割
   海外版（英語）サイトから移植したCSSは、字間（letter-spacing）や
   行間・文字サイズがすべて「欧文の大文字」に合わせて設計されていました。
   そのまま日本語を流し込むと「ラ ン キ ン グ」のように不自然に間延びし、
   和文フォントの指定も無いため端末任せの書体で表示されていました。

   このファイルは各ページの <style> の後ろに読み込まれ、
   和文として自然に見えるように上書きします。元のCSSは書き換えていないため、
   この <link> を1行外すだけで元の状態に戻せます。

   ■ 触るときの原則
   ・欧文だけの箇所（ブランド名 écrin、ローマ字ラベル、価格の ¥ など）は
     広い字間のままにしてあります。字間を詰めるのは「和文が入る箇所」だけ。
   ・和文の字間は 0.02〜0.14em の範囲。0.2em を超えると日本語は読みにくくなります。
   ・見出しは明朝（Zen Old Mincho）、本文はゴシック（Zen Kaku Gothic New）。
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 書体 ────────────────────────────────────────────────────
   --sans      本文（欧文Jost＋和文ゴシック。数字・記号は Jost が拾います）
   --sans-jp   和文ゴシックのみ（UIラベル用）
   --mincho    和文明朝（見出し・コレクション名）
   --serif     欧文セリフ（商品名・ブランド名。和文は明朝へフォールバック） */
:root{
  --sans:"Jost","Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --sans-jp:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
  --serif:"Cormorant Garamond","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Italiana","Cormorant Garamond","Zen Old Mincho",serif;

  /* 余白：日本語は文字が詰まって見えるぶん、セクション間をわずかに広く取ります */
  --sec:clamp(66px,8vw,116px);
  --gut:clamp(22px,5vw,64px);
}

/* ── 2. 和文の基本組み ──────────────────────────────────────────
   font-feature-settings:"palt" ＝ 和文の約物（、。「」）の余白を詰める指定。
   これが無いと句読点まわりが間延びして「翻訳サイト」らしい印象になります。 */
html{ text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  font-kerning:normal;
}
/* 段落・箇条書き：行末の泣き別れと1文字だけ残る行を抑える */
p,li,dd,dt,td,th,figcaption,summary,label,.sub,.sec-lede,.f-tag,.d-note,.col-note{
  line-break:strict;
  word-break:normal;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
h1,h2,h3,h4,.display,.sec-h,.kicker.sec{ text-wrap:balance; }
strong,b{ font-weight:500; }

/* 旧 <em>：和文に斜体は無いため、ブラウザが機械的に傾けた文字になっていました。
   傾けず、金色で意味を持たせます（.accent は index.html で置き換えた新クラス） */
em,.accent{ font-style:normal; }
.hero h1 em,.hero h1 .accent,.concept-line em,.concept-line .accent{
  font-style:normal;
  color:var(--gold-d);
}

/* ── 3. 見出し ─────────────────────────────────────────────────
   セクション見出しは「小さな欧文ラベル＋大きな明朝の和文」の二段組みに。
   欧文ラベルは data-en 属性から出しています（index.html 側に付与済み）。 */
.kicker{
  font-family:var(--sans);
  font-size:11.6px;
  letter-spacing:.16em;
  line-height:1.9;
  color:var(--bordeaux);
}
.kicker.sec{
  display:block;
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(23px,2.7vw,30px);
  letter-spacing:.09em;
  line-height:1.55;
  color:var(--ink);
  text-transform:none;
}
.kicker.sec[data-en]::before{
  content:attr(data-en);
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:10.4px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-d);
  margin-bottom:13px;
}
/* 見出し下のリード文：和文は 1行 30〜35字前後が読みやすい上限です
   （移植時に 96ch / 130ch という欧文向けの値が残っていました）
   ※ ch は欧文の「0」1文字ぶんの幅なので、和文では em で指定します */
.sec-lede,.rank-head .sec-lede,.col-head .sec-lede{
  font-size:15.2px;
  line-height:1.95;
  letter-spacing:.02em;
  max-width:34em;
  margin-top:16px;
}
.sec-h{ line-height:1.45; letter-spacing:.04em; }

/* ── 4. ヘッダー・ナビゲーション ────────────────────────────────
   移植時は 11.8px／字間.28em。和文だと小さすぎ、かつ間延びしていました。 */
.nav > a,.nav .drop > button{
  font-family:var(--sans-jp);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:none;
}
.drop-menu a{ font-size:11.6px; letter-spacing:.1em; }
.drop-menu a b{ font-family:var(--mincho); font-size:15px; letter-spacing:.08em; }
.cart-btn .lbl{ font-family:var(--sans-jp); font-size:12.4px; letter-spacing:.06em; }
/* 欧文のブランドロゴは字間を広いまま残します */
.brand,.brand span,.f-brand,.f-brand span{ font-feature-settings:normal; }

/* ── 5. ボタン ─────────────────────────────────────────────────
   .btn / .add / .more-btn はいずれも和文ラベルです。
   欧文大文字用の .24〜.28em から、和文に合う .08em 前後へ。 */
.btn{
  font-family:var(--sans-jp);
  font-size:13.2px;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.2;
  padding:18px 34px 17px;
  text-transform:none;
}
.add{
  font-family:var(--sans-jp);
  font-size:12.2px;
  letter-spacing:.06em;
  padding:12px 6px;
  text-transform:none;
}
.more-btn{
  font-family:var(--sans-jp);
  font-size:13px;
  letter-spacing:.1em;
  padding:16px 44px;
  text-transform:none;
}
.d-alt,.rm,.back-link,.toast{ letter-spacing:.06em; text-transform:none; }
.back-link{ font-size:13px; }
.toast{ font-size:13px; }

/* ── 6. ヒーロー ───────────────────────────────────────────────
   写真をセクション全体の背景に薄く敷き、その上に文字を重ねる構成。
   （2026-08-14：右半分に写真を置く二段組みから変更しました）

   ■ 濃さの調整
   --hero-opacity … 写真の見え方。0.18〜0.40 くらいで調整してください。
   --hero-blur    … 仕上げのぼかし。0〜3px 程度。
   文字が読みにくいと感じたら --hero-opacity を下げるか、--hero-veil を上げます。 */
:root{
  --hero-opacity:.34;
  --hero-blur:0px;   /* 写真のぼかし。0＝ぼかさない */
  --hero-veil:.30;   /* 文字の後ろに敷く紙色のベール。0で無し、1で真っ白 */
}
.hero{
  display:block;
  position:relative;
  padding:calc(84px + clamp(52px,7vw,104px)) 0 clamp(64px,8vw,116px);
  min-height:min(80vh,700px);
  overflow:hidden;
}
.hero-bg{ display:block; }
.hero-bg::before{
  background:url("images/hero-plain.jpg") center 44% / cover no-repeat;
  opacity:var(--hero-opacity);
  filter:blur(var(--hero-blur));
  transform:scale(1.02);
}
/* 文字の可読性を保つためのベール。左（文章側）を少し濃く、右へ抜けるグラデーション */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg,
      rgba(251,249,245,calc(var(--hero-veil) + .40)) 0%,
      rgba(251,249,245,calc(var(--hero-veil) + .18)) 38%,
      rgba(251,249,245,var(--hero-veil)) 68%,
      rgba(251,249,245,0) 100%),
    linear-gradient(180deg,
      rgba(251,249,245,.55) 0%,
      rgba(251,249,245,0) 22%,
      rgba(251,249,245,0) 72%,
      rgba(251,249,245,.75) 100%);
}
.hero-in{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--gut);
}
.hero-lead,.hero-cta{ max-width:36em; }
/* ヒーローのボタンは3つになったため、狭い画面では折り返す */
.hero-cta{ flex-wrap:wrap; }
/* オーダーメイドへの導線。既存の2つとは役割が違うので、金色の塗りで独立させ、
   ボタン2つの下に1行使って置きます（横に3つ並べると和文ラベルが2行に折れるため） */
.btn.gold{
  background:var(--gold);
  color:#fff;
  border-color:var(--gold);
  flex:0 0 auto;
}
.btn.gold:hover{ background:var(--gold-d); border-color:var(--gold-d); color:#fff; }
.btn.gold .arrow{ margin-left:.6em; }
.hero-cta .btn.gold{ order:3; }
.hero-figure{ display:none; }
.hero-in .kicker{ font-size:12.4px; letter-spacing:.14em; }
h1.display{ line-height:1.5; letter-spacing:.04em; }
.hero-in h1.display{ font-family:var(--mincho); font-weight:500; }
.hero-in .concept-line{
  font-family:var(--mincho);
  font-size:17px;
  letter-spacing:.06em;
  line-height:1.9;
  margin-top:14px;
  color:var(--ink);
}
.hero-in .sub{
  font-size:15.6px;
  line-height:2;
  letter-spacing:.02em;
  max-width:34em;
  margin-top:16px;
  color:var(--ink-soft);
}
.hero-tagline{
  font-family:var(--sans-jp);
  font-size:13px;
  letter-spacing:.02em;
  line-height:1.85;
  padding:12px 22px;
  color:var(--ink-soft);
}
.scroll-hint span{ letter-spacing:.3em; }
@media (min-width:981px){
  .hero-in h1.display{ font-size:clamp(33px,2.5vw,40px); }
  .hero-in .concept-line{ font-size:17.6px; }
  .hero-in .sub{ font-size:16px; }
  .hero-cta .btn{ font-size:13.2px; }
}

/* ── 7. ランキング／商品カード ──────────────────────────────────
   コレクション名（花霞・実り・真珠・凪・雫）は明朝に。
   移植時は 10.8px／字間.22em で「花 霞」と割れて見えていました。 */
.rank-body,.prod .body{ padding:20px 20px 24px; }
.rank-body h3,.prod h3{ line-height:1.3; letter-spacing:.02em; }
.rank-body .cat,.prod .cat{
  font-family:var(--mincho);
  font-size:12.8px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:none;
  color:var(--ink-soft);
  margin-top:7px;
}
.rank-body .price,.prod .price{ font-size:16px; letter-spacing:.04em; }
.prod .price small{ font-family:var(--sans-jp); font-size:11px; letter-spacing:.04em; text-transform:none; margin-left:6px; }
.tag{ font-family:var(--sans-jp); font-size:10.6px; letter-spacing:.08em; text-transform:none; padding:6px 11px; }
.filters-label{ font-family:var(--sans-jp); font-size:11.6px; letter-spacing:.14em; text-transform:none; color:var(--ink-soft); margin-bottom:12px; }
.chip b{ letter-spacing:.1em; }
.rank-head{ margin-bottom:44px; }
.col-head{ margin-bottom:36px; }
.filters{ margin-bottom:50px; padding-bottom:26px; }
.col-note{ font-size:14.6px; line-height:1.95; padding:26px 30px; }

/* ── 8. ご注文から配送まで ──────────────────────────────────────
   同じ背景色のセクションが続くと余白がただの空白に見えるため、
   「ご注文から配送まで」の下と「よくあるご質問」の上を詰めます */
.howworks{ padding-bottom:calc(var(--sec) * .5); }
.faq{ padding-top:calc(var(--sec) * .75); }
.how-block h3{
  font-family:var(--mincho);
  font-weight:500;
  font-size:18.6px;
  letter-spacing:.06em;
  line-height:1.6;
  margin-bottom:20px;
}
.how-steps{ gap:15px; }
.how-steps li{ padding-left:38px; }
.how-steps li span{ font-size:14.6px; line-height:1.95; }
.how-steps li::before{ font-family:var(--sans); font-size:12px; top:3px; }
.how-post p{ font-size:14.4px; line-height:1.95; }
.how-caveat{ font-size:13px; line-height:1.9; }

/* ── 9. よくあるご質問 ─────────────────────────────────────────*/
.q > button{
  font-family:var(--sans-jp);
  font-size:15px;
  letter-spacing:.03em;
  line-height:1.7;
  padding:16px 38px 16px 0;
}
.a p{ font-size:14.4px; line-height:1.95; letter-spacing:.02em; padding-bottom:20px; }

/* ── 10. お知らせ ──────────────────────────────────────────────*/
.news-list{ margin-top:38px; }
.news-body h3{ font-family:var(--mincho); font-weight:500; font-size:17.6px; letter-spacing:.05em; line-height:1.65; }
.news-body p{ font-size:14.4px; line-height:1.95; max-width:36em; }
.news-cat{ font-family:var(--sans-jp); font-size:11px; letter-spacing:.08em; text-transform:none; padding:6px 13px; }
.news-date{ letter-spacing:.1em; }

/* ── 11. フッター ──────────────────────────────────────────────*/
.f-tag{ font-size:14px; line-height:1.95; letter-spacing:.02em; max-width:34em; }
.f-col h4{ font-family:var(--sans-jp); font-size:12.4px; letter-spacing:.14em; text-transform:none; margin-bottom:20px; }
.f-col a{ font-size:13.6px; letter-spacing:.02em; line-height:2.1; }
.f-note{ font-size:13px; line-height:1.95; }
.f-pay .lbl{ font-family:var(--sans-jp); font-size:11.6px; letter-spacing:.14em; text-transform:none; }
/* 決済アイコン用に幅96px固定・高さ32pxで作られていた枠に和文が入ると
   「クレジットカ／ード」と折れて枠からはみ出すため、内容に合わせた大きさに */
.pay-row{ flex-wrap:wrap; gap:8px; }
.pay-chip{ flex:0 0 auto; width:auto; max-width:none; height:auto; min-height:32px;
  padding:7px 14px; justify-content:center; }
.pay-chip .txt{ font-family:var(--sans-jp); font-size:12px; letter-spacing:.04em;
  line-height:1.4; white-space:nowrap; }
.f-bot{ font-size:12.6px; letter-spacing:.03em; }
.f-bot .legal a{ font-size:12.6px; letter-spacing:.03em; }
.soc{ text-transform:none; }

/* ── 12. カート ────────────────────────────────────────────────*/
.d-head h3{ font-family:var(--mincho); font-weight:500; font-size:20px; letter-spacing:.08em; }
.line .c{ font-family:var(--sans-jp); font-size:12px; letter-spacing:.04em; text-transform:none; line-height:1.7; }
.d-note{ font-size:12.6px; line-height:1.9; }
.checkout{ font-family:var(--sans-jp); font-size:14px; letter-spacing:.06em; }
.checkout-note{ font-size:12.4px; line-height:1.8; letter-spacing:.02em; }
.d-opt label{ font-size:13.4px; line-height:1.8; }
.size-hand > span{ font-family:var(--sans-jp); font-size:11.6px; letter-spacing:.08em; text-transform:none; }
.size-f label{ font-size:10.6px; }

/* ── 13. 法務・案内ページ ──────────────────────────────────────*/
.legal-main{ max-width:800px; }
.legal-main h1{ font-family:var(--mincho); font-weight:500; letter-spacing:.06em; line-height:1.5; margin-bottom:14px; }
.legal-main h2{
  font-family:var(--mincho);
  font-weight:500;
  font-size:19px;
  letter-spacing:.06em;
  line-height:1.6;
  margin:44px 0 16px;
  padding-top:24px;
}
.legal-main p,.legal-main li{ font-size:15px; line-height:2; letter-spacing:.02em; }
.legal-main li{ margin-bottom:8px; }
.legal-table{ font-size:14.6px; }
.legal-table th{ font-family:var(--sans-jp); letter-spacing:.04em; line-height:1.8; }
.legal-table td{ line-height:2; letter-spacing:.02em; }
/* 移植当時の「⚠️ 公開前の注意書き」を赤枠で出していた箱は、
   中身がお客様向けの案内文に変わったため、落ち着いた配色に差し替えます */
.legal-warn{
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-left:2px solid var(--gold);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.95;
  padding:20px 24px;
  border-radius:2px;
}
.legal-warn b{ color:var(--ink); font-weight:500; margin-bottom:6px; }
.legal-ph{ color:var(--ink-soft); }
.page-note{ font-size:13px; line-height:1.9; }

/* ── 14. 商品詳細ページ ────────────────────────────────────────*/
.crumb{ font-size:12.4px; letter-spacing:.04em; text-transform:none; }
.pd-title,.pd-name{ letter-spacing:.02em; line-height:1.3; }
.pd-jp,.pd-cat{ font-family:var(--mincho); letter-spacing:.08em; text-transform:none; }
.acc-h,.pd-acc h3{ font-family:var(--sans-jp); letter-spacing:.04em; }
.pd-desc,.pd-body p,.pd-list li{ font-size:14.8px; line-height:2; letter-spacing:.02em; }
.review-card{ line-height:1.9; }
.sz-note{ font-size:13.4px; line-height:1.95; }
/* サイズ表（11列）はスマホ幅に収まらず、ページ全体が横スクロールしていました。
   表だけを横スクロールさせ、ページはスクロールしないようにします */
/* グリッドの子要素は既定で内容幅まで伸びる（min-width:auto）ため、
   表を入れている枠に min-width:0 を与えないと枠ごと画面外へはみ出します */
.pdp-sections > *,.pdp-sec,.pdp-grid > *{ min-width:0; }
#sizeGuideBody,#secSizeTable{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.sz-table{ min-width:430px; }
.sz-table th,.sz-table td{ white-space:nowrap; letter-spacing:.02em; }
@media (max-width:640px){
  .sz-table{ font-size:12.8px; }
  .sz-table th{ font-size:11.6px; }
  .sz-table th,.sz-table td{ padding:9px 9px; }
}

/* ── 15. スマートフォン ────────────────────────────────────────*/
@media (max-width:980px){
  /* スマホは縦位置の写真に差し替え、余白を詰める */
  .hero{ display:block; min-height:0; padding:calc(78px + 40px) 0 clamp(48px,9vw,72px); }
  .hero-figure{ display:none; }
  .hero-bg::before{ background-image:url("images/hero-sp.jpg"); background-position:center 34%; }
  :root{ --hero-opacity:.38; --hero-blur:0px; --hero-veil:.24; }
  /* スマホは横方向のグラデーションだと文字の途中で濃さが変わるため、縦方向だけにします */
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(251,249,245,.62) 0%,
      rgba(251,249,245,calc(var(--hero-veil) + .12)) 18%,
      rgba(251,249,245,var(--hero-veil)) 60%,
      rgba(251,249,245,.80) 100%);
  }
  .hero-lead,.hero-cta{ max-width:none; }
  .scroll-hint{ display:none; }
  /* 旧デザインで文字の裏に敷いていたゴースト画像は、背景に統一したため不要 */
  .hero-lead::before{ display:none!important; }
}
@media (max-width:820px){
  .nav > a,.nav .drop > button{ font-size:17px; letter-spacing:.08em; }
  .drop-menu a{ font-size:14px; letter-spacing:.06em; }
}
@media (max-width:640px){
  body{ font-size:15.4px; line-height:1.88; }
  .kicker.sec{ font-size:21.5px; letter-spacing:.07em; }
  .kicker.sec[data-en]::before{ font-size:9.6px; letter-spacing:.28em; margin-bottom:10px; }
  .sec-lede,.rank-head .sec-lede,.col-head .sec-lede{ font-size:14.4px; line-height:1.9; max-width:100%; }
  .rank-head{ margin-bottom:32px; }
  .col-head{ margin-bottom:26px; }
  .filters{ margin-bottom:34px; }
  .how-steps li span{ font-size:14px; line-height:1.9; }
  .q > button{ font-size:14.4px; }
  .a p{ font-size:13.8px; }
  .legal-main p,.legal-main li{ font-size:14.4px; line-height:1.95; }
  .legal-main h2{ font-size:17.4px; margin:34px 0 14px; }
  .news-body h3{ font-size:16.4px; }
  .news-body p{ font-size:13.8px; max-width:100%; }
  .f-col a{ font-size:13.2px; }
  .hero-tagline{ font-size:12.4px; padding:11px 18px; }
}
@media (max-width:520px){
  .rank-body,.prod .body{ padding:14px 13px 17px; }
  .rank-body .cat,.prod .cat{ font-size:11.8px; letter-spacing:.06em; margin-top:5px; }
  .rank-body .price,.prod .price{ font-size:14.8px; }
  .add{ font-size:11.4px; letter-spacing:.04em; padding:10px 4px; }
  /* 3つのボタンを1行に押し込むと和文ラベルが折れるため、2＋1の2段に */
  .hero-cta{ flex-wrap:wrap; gap:10px; }
  .hero-cta .btn{ font-size:12.4px; letter-spacing:.04em; padding:16px 6px 15px;
    flex:1 1 calc(50% - 5px); min-width:0; }
  .hero-cta .btn.gold{ flex:1 1 100%; }
  .more-btn{ font-size:12.4px; letter-spacing:.06em; padding:15px 30px; }
}

/* ── 16. 印刷・アクセシビリティ ────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .hero-figure img{ opacity:1!important; filter:none!important; transform:none!important; }
}


/* ══ 17. オーダーメイド専用ページ（custom.html）══════════════════════
   2026-08-14 新規。写真からお作りするオーダーメイドの案内ページ。
   バックエンドを持たないため、フォームは「送る文面を組み立てて
   メール／Instagram／LINE へ渡す」方式です（JSはページ内に記載）。 */
.custom-main{
  max-width:940px;
  margin:0 auto;
  padding:calc(84px + clamp(36px,6vw,76px)) var(--gut) clamp(64px,8vw,110px);
}

/* ── ページ冒頭 ── */
.cm-hero{ padding-bottom:clamp(34px,5vw,54px); border-bottom:1px solid var(--hair); }
.cm-hero .kicker[data-en]::before{
  content:attr(data-en);
  display:block;
  font-family:var(--sans);
  font-size:10.4px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-d);
  margin-bottom:12px;
}
.cm-hero .kicker{
  font-family:var(--mincho);
  font-size:15px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--ink-soft);
}
.cm-hero h1{
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(27px,3.6vw,40px);
  letter-spacing:.05em;
  line-height:1.55;
  margin-top:14px;
}
.cm-hero h1 .accent{ color:var(--gold-d); font-style:normal; white-space:nowrap; }
.cm-lede{
  margin-top:20px;
  font-size:15.6px;
  line-height:2.05;
  letter-spacing:.02em;
  color:var(--ink-soft);
  max-width:34em;
}
.cm-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,3.4vw,36px); }

/* ── セクション見出し ── */
.cm-sec{ margin-top:clamp(48px,6.5vw,84px); }
.cm-sec h2{
  font-family:var(--mincho);
  font-weight:500;
  font-size:clamp(20px,2.4vw,25px);
  letter-spacing:.07em;
  line-height:1.6;
  color:var(--ink);
  margin-bottom:22px;
}
.cm-sec h2[data-en]::before{
  content:attr(data-en);
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:10.2px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold-d);
  margin-bottom:11px;
}
.cm-p{ font-size:15px; line-height:2.05; letter-spacing:.02em; color:var(--ink-soft); max-width:36em; }
.cm-p b{ color:var(--ink); font-weight:500; }
.cm-note{ margin-top:14px; font-size:13px; line-height:1.9; color:var(--muted); }
.cm-note a{ color:var(--gold-d); border-bottom:1px solid var(--hair); }

/* ── 流れ ── */
.cm-steps{ gap:22px; }
.cm-steps li span{ font-size:14.8px; line-height:2; color:var(--ink-soft); }
.cm-steps li b{ color:var(--ink); font-weight:500; font-size:15.4px; }

/* ── お送りいただきたいもの ── */
.cm-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cm-card{
  background:var(--card);
  border:1px solid var(--hair);
  border-top:2px solid var(--gold);
  padding:24px 26px 26px;
}
.cm-card h3{
  font-family:var(--sans-jp);
  font-size:14.8px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:10px;
}
.cm-card p{ font-size:14px; line-height:1.95; color:var(--ink-soft); }

/* ── 料金 ── */
.cm-price{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,42px);
  letter-spacing:.03em;
  color:var(--gold-d);
  line-height:1.3;
  margin-bottom:18px;
}
.cm-price b{ font-weight:400; }
.cm-price small{ font-family:var(--sans-jp); font-size:13px; color:var(--muted); margin-left:8px; letter-spacing:.04em; }

/* ── フォーム ── */
.cm-form{ margin-top:26px; }
.cm-row{ margin-bottom:20px; }
.cm-row label{
  display:block;
  font-family:var(--sans-jp);
  font-size:13.2px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:8px;
}
.cm-row input,.cm-row textarea{
  width:100%;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:3px;
  padding:13px 15px;
  transition:border-color .3s var(--ease);
}
.cm-row textarea{ resize:vertical; min-height:110px; }
.cm-row input:focus,.cm-row textarea:focus{ outline:none; border-color:var(--gold); }
.cm-row input::placeholder,.cm-row textarea::placeholder{ color:#bdb3a6; }

.cm-send-label{
  font-family:var(--sans-jp);
  font-size:13.2px;
  font-weight:500;
  letter-spacing:.06em;
  color:var(--ink);
  margin:30px 0 14px;
  padding-top:26px;
  border-top:1px solid var(--hair);
}
.cm-send{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.cm-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  width:100%;
  text-align:left;
  padding:17px 20px;
  border:1px solid var(--hair);
  border-radius:3px;
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);
}
.cm-btn:hover{ border-color:var(--gold); color:var(--gold-d); }
/* display:flex が [hidden] のUA既定より強いため、明示的に打ち消します
   （LINEのURLが未設定のあいだ、LINEボタンを隠すために必要） */
.cm-btn[hidden]{ display:none; }
.cm-btn-t{ font-family:var(--sans-jp); font-size:14.4px; font-weight:500; letter-spacing:.04em; }
.cm-btn-s{ font-size:12.2px; letter-spacing:.02em; color:var(--muted); line-height:1.7; }
.cm-btn:hover .cm-btn-s{ color:var(--ink-soft); }
.cm-btn-mail{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cm-btn-mail .cm-btn-s{ color:rgba(255,255,255,.62); }
.cm-btn-mail:hover{ background:var(--gold-d); border-color:var(--gold-d); color:var(--paper); }
.cm-btn-mail:hover .cm-btn-s{ color:rgba(255,255,255,.75); }
#cmMsg:empty{ display:none; }
#cmMsg{ margin-top:16px; color:var(--gold-d); }

/* ── ページ内FAQ ── */
.cm-faq{ border-top:1px solid var(--hair); }
.cm-faq .a a{ color:var(--gold-d); border-bottom:1px solid var(--hair); }

.custom-main .back-link{ margin-top:clamp(44px,6vw,72px); }

@media (max-width:760px){
  .cm-cards{ grid-template-columns:1fr; }
  .cm-send{ grid-template-columns:1fr; }
  .cm-hero-cta .btn{ flex:1 1 100%; }
  .cm-steps li span{ font-size:14.2px; }
  .cm-card{ padding:20px 20px 22px; }
}