/*
  NEO NEEDS LP — ブラッシュアップの上書き層（2026-10-31・Claude）
  方針: 外注先の黒×金の世界観はそのまま。提携先LP（neoneeds-partner-lp）の良い所を取り込む。
  ・明るい面（生成り）と暗い面の交互で、読み進める区切りを作る（色は変数の差し替えだけで塗り替える）
  ・結論を言い切る大きな見出しと、強調は1見出し1か所の金
  ・本文の文字を大きく・濃く（小さい灰色の文字を残さない）
  ・右上に目立つ申し込みボタン、ファーストビューにも申し込みボタン
  ・書体は提携先LPと同じ Adobe Fonts（りょうDisplay・秀英角ゴ銀・Didot）。届くまではヒラギノで表示
  読み込み順: index.html 内の元の指定 → このファイル
*/

:root {
  --paper: #f2efe8;
  --paper2: #faf8f3;
  --paper-ink: #191511;
  --paper-sub: #3d372f;      /* 生成りの上の補足 10.6:1 */
  --gold-deep: #7d5e2c;      /* 生成りの上の金の文字 5.6:1 */
  --dim: #c9c4ba;            /* 暗い面の上の補足（元 #8a867c＝5.6:1 → 11.5:1） */
  --serif: "ryo-display-plusn", "Shippori Mincho JP", "Hiragino Mincho ProN", serif;
  --sans: Yakuhanjp, "dnp-shuei-gothic-gin-std", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --didot: "ambroise-std", "Bodoni Moda", "Didot", serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body { font-size: 16px; font-feature-settings: "palt" 1; }

/* ===== 上の帯 ===== */
header .gnav { display: flex; gap: clamp(14px, 2vw, 28px); margin-left: auto; margin-right: clamp(16px, 2.4vw, 32px); }
header .gnav a { font-size: 14px; letter-spacing: .12em; color: var(--ink); opacity: .86; display: inline-flex; align-items: center; min-height: 44px; transition: opacity .2s ease, color .2s ease; }
header .gnav a:hover { opacity: 1; color: var(--key); }
header .nav-cta { font-size: 14px; font-weight: 600; letter-spacing: .14em; color: #141210; background: var(--key); border: 1px solid var(--key); border-radius: 999px; padding: 0 22px; min-height: 44px; display: inline-flex; align-items: center; }
header .nav-cta:hover { color: var(--key); background: transparent; border-color: var(--key); }
@media (max-width: 900px) { header .gnav { display: none; } }

/* ===== ファーストビューの申し込みボタン ===== */
.hero .fv-cta { display: inline-grid; justify-items: center; gap: 2px; margin-top: clamp(22px, 4vw, 34px); padding: 15px 34px 13px; border-radius: 999px; background: var(--key); color: #141210; text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s var(--ease-out), filter .2s ease; position: relative; z-index: 2; }
.hero .fv-cta .lbl { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.hero .fv-cta small { font-size: 13px; letter-spacing: .08em; opacity: .85; }
@media (hover: hover) and (pointer: fine) { .hero .fv-cta:hover { transform: translateY(-2px); filter: brightness(1.06); } }
.hero .lead { font-size: clamp(15px, 1.4vw, 17px); color: var(--ink); }
.hero .kicker { font-size: 14px; color: var(--ink); opacity: .9; }

/* ===== 見出しと文字（暗い面・明るい面の共通） ===== */
.eyeb { font-family: var(--didot); font-size: 15px; letter-spacing: .2em; color: var(--key); font-style: italic; }
.htitle { font-size: clamp(28px, 4.6vw, 52px); line-height: 1.38; letter-spacing: .04em; }
.htitle.long { font-size: clamp(25px, 4vw, 46px); }
.htitle em { font-style: normal; color: var(--key); }
.subn { font-size: clamp(15px, 1.3vw, 16px); color: var(--dim); line-height: 1.95; }
.shead .ix { font-family: var(--didot); }
.intro .small { font-size: clamp(15px, 1.4vw, 17px) !important; color: var(--ink) !important; line-height: 2.1; }
.intro .big { font-family: var(--serif); }
.reason .rc p, .plans .plead { font-size: clamp(15px, 1.3vw, 16px); color: var(--dim); }
.faq summary { font-size: 16px; padding-top: 24px; padding-bottom: 24px; }
.faq .a { font-size: 15px; line-height: 2; }
.cases .disc, .disc { font-size: 14px; color: var(--dim); }
.tile .who .tg, .tile .who .shop { font-size: 13px; }
.phone .views { font-size: 13px; }
footer p, footer .fnav a { font-size: 14px; }
footer .fnav a { display: inline-flex; align-items: center; min-height: 44px; }

/* 大きな背景の番号（提携先LPの 01・03 のような淡い数字） */
section[data-n] { position: relative; }
section[data-n]::before { content: attr(data-n); position: absolute; top: clamp(18px, 4vw, 56px); right: clamp(14px, 5vw, 72px); font-family: var(--didot); font-weight: 400; font-size: clamp(96px, 15vw, 210px); line-height: .8; letter-spacing: -.02em; color: rgba(205, 177, 136, .12); pointer-events: none; z-index: 0; }

/* ===== 明るい面（生成り）。元の色は変数で書かれているので、変数を差し替えるだけで塗り替わる ===== */
.tone-paper {
  --bg: var(--paper);
  --panel: #e9e4da;
  --ink: var(--paper-ink);
  --dim: var(--paper-sub);
  --key: var(--gold-deep);
  --hair: rgba(25, 21, 17, .18);
  --hair2: rgba(25, 21, 17, .12);
  --ghost: rgba(25, 21, 17, .05);
  background: var(--paper) !important;
  color: var(--paper-ink);
}
.tone-paper[data-n]::before { color: rgba(176, 141, 87, .2); }
.tone-paper .reason .rc p, .tone-paper.reason .rc p, .tone-paper .plead, .tone-paper.plans .plead { color: var(--paper-sub); }
.tone-paper .tile .who, .tone-paper .tile .who * { color: #f4f0e8; }

/* ===== 選ばれる理由（パソコンでは3列） ===== */
@media (min-width: 900px) {
  .reason .sec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 44px); }
  .reason .shead { grid-column: 1 / -1; }
  .reason .r { grid-template-columns: 1fr; border-top: 1px solid var(--hair); border-bottom: 0 !important; align-content: start; gap: 10px; }
  .reason .rn { font-family: var(--didot); color: var(--key); }
}

/* ===== 運営（母体）の欄 ===== */
.trust { background: var(--bg); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.trust-lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 2.1; color: var(--ink); }
.trust-chip { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 22px; border: 1px solid var(--hair); background: rgba(255, 255, 255, .02); }
.trust-chip img { width: 112px; height: 112px; object-fit: cover; filter: grayscale(.15) sepia(.12); }
.trust-chip .tc-name { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.trust-chip .tc-meta { font-size: 14px; line-height: 1.85; color: var(--dim); }
@media (max-width: 760px) { .trust-grid { grid-template-columns: 1fr; } .trust-chip { grid-template-columns: 88px 1fr; } .trust-chip img { width: 88px; height: 88px; } }

/* ===== 料金（生成りの面でカードに） ===== */
.plans .p { padding: clamp(22px, 3vw, 30px) clamp(18px, 2.6vw, 28px); border: 1px solid var(--hair2) !important; margin-top: -1px; background: var(--paper2); }
.plans .p.top { background: var(--paper-ink); color: #f4f0e8; border-left: 1px solid var(--paper-ink) !important; padding-left: clamp(18px, 2.6vw, 28px); }
.plans .p.top .cap, .plans .p.top .ja { color: #f4f0e8; }
.plans .p.top .badge { background: #cdb188; color: #141210; }
.plans .cap { font-size: 15px; }
.plans .plan-tagline { font-family: var(--serif); }

/* ===== よくある質問（生成りの面） ===== */
.faq summary::after, .faq summary::before { background: var(--paper-ink); }

/* ===== 最後の案内・固定の申し込みボタン ===== */
.final h2 { font-family: var(--serif); }
.final .law { font-size: 14px; color: var(--dim); }
@media (min-width: 900px) {
  /* パソコンでは画面の中央に重ならないよう、右下の小さなボタンにする */
  .sticky { left: auto !important; right: 24px !important; width: auto !important; justify-content: flex-end !important; padding: 0 0 24px !important; background: none !important; }
}

/* ===== 動きを減らす設定 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero .fv-cta, header .gnav a { transition: none; }
}

/* ===== 2巡目: 薄くて読めない文字とボタンをそろえる ===== */
.plans.tone-paper .cap { color: var(--paper-sub); }
.plans.tone-paper .p.top .cap { color: #f4f0e8; }
.flow .s p { font-size: 15px; line-height: 1.9; }
.flow .s .n { font-size: 13px; letter-spacing: .16em; color: var(--key); }
footer p { color: var(--dim); }
/* 申し込みのボタンは、どこでも同じ金の面にする（提携先LPの「迷わない一つのボタン」） */
.sticky a { background: var(--key); color: #141210; border-radius: 999px; font-weight: 700; letter-spacing: .12em; font-size: 15px; }
.sticky a::before { display: none; }
.sticky a span { font-size: 13px; opacity: .85; font-weight: 500; }
.final .btn { background: #cdb188; color: #141210; border: 1px solid #cdb188; border-radius: 999px; padding: 18px 40px 16px; }
.final .btn .lbl { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.final .btn small { font-size: 13px; color: #141210; opacity: .85; }
.final .btn::before, .final .btn::after { display: none; }
@media (max-width: 760px) {
  section[data-n]::before { font-size: 84px; opacity: .8; }
}

/* ===== 3巡目: ファーストビューの重なり・料金の並び・小さい注記 ===== */
/* 申し込みボタンを足した分、画面の低いパソコンでは中身が上の帯（ロゴ）に食い込む。上に余白を取り、足りなければ欄が伸びる */
.hero { padding-top: clamp(96px, 13vh, 132px); }
@media (min-width: 900px) {
  .plans .plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .plans .plist .p { margin-top: 0; }
  .plans .plist .cap { max-width: none; }
}
.plans .disc { font-size: 13px; color: var(--dim); }
.plans.tone-paper .disc { color: var(--paper-sub); }
/* パソコンの固定ボタンは小さめに（本文に重なる面積を減らす） */
@media (min-width: 900px) {
  .sticky a { padding: 14px 30px !important; font-size: 14px; }
  .sticky a span { font-size: 12px; }
}
/* スマホでは背景の大きな番号を出さない（見出しに重なる。小さな番号は元の見出しにある） */
@media (max-width: 760px) {
  section[data-n]::before { display: none; }
}

/* ===== 4巡目: パソコンのマウスの矢印を戻す =====
   元の版は矢印を消し、金色の細い輪だけを付けていた。手直しで足した明るい欄では輪がほとんど見えず、矢印を見失う。
   矢印は残し、輪はその周りの飾りにする（/modern-web-motion §7「標準ポインタを残し・線1本の輪」） */
@media (hover: hover) and (pointer: fine) {
  * { cursor: auto !important; }
  a, button, summary, label, .tile, .phone, [role="button"] { cursor: pointer !important; }
}