/* =========================================================
   LPデザインの型「雑誌風ゴールド」
   元: StackUP 商業出版の無料Ebook LP（プロライン /cp/UD985I0V7Y）の作り。
   雑誌の特集ページのように、生成りの地に明朝・金の細線・番号。申込ボタンだけ蛍光イエロー。
   元の一番上はChatGPTで作った画像だったので、ここでは黒地に金の文字で作っている。
   色・書体はここ（:root）が正本。
   ========================================================= */
:root {
  --ivory: #f6f2ea;
  --stone: #e7e3d9;        /* 少し暗い生成り（交互に使う） */
  --deep: #efe9dd;
  --ink: #2b2620;
  --muted: #6f675c;
  --gold: #b08a3e;
  --gold-light: #d8b46a;
  --line: #d9cdb6;
  --neon: #eaff00;          /* ボタンと強調の蛍光イエロー */
  --black: #0b0b0b;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --en: "Cormorant Garamond", var(--serif);
  --col: 480px;
  --gutter: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #d8d3c8; color: var(--ink); font-family: var(--serif); line-height: 1.9; font-size: 14.5px; letter-spacing: .04em; }
p, ol, ul, h1, h2, h3 { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, .frame, .fv__to, .final h2 { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.page { max-width: var(--col); margin: 0 auto; background: var(--ivory); box-shadow: 0 0 40px rgba(0, 0, 0, .12); overflow: hidden; }
em { font-style: normal; color: var(--gold); }
mark { background: var(--neon); color: var(--ink); padding: 0 .15em; }
.center { text-align: center; }
.small { font-size: 12.5px; color: var(--muted); line-height: 2; }
.light { color: #bbb; text-align: center; }

/* 見本だけの部品名札（本番では消す） */
.part-label { margin: 0; padding: 6px 12px; font: 700 11px/1.4 var(--sans); color: #fff; background: #555; letter-spacing: 0; }
.part-label b { display: inline-block; margin-right: 8px; padding: 0 6px; background: #000; border-radius: 3px; }
.part-label code { margin-left: 8px; padding: 0 6px; background: #777; border-radius: 3px; font-size: 11px; }

/* 写真の仮置き */
.ph { display: grid; place-items: center; aspect-ratio: var(--r, 4/3); background: #ddd6c8; color: #8f8676; font: 500 12px var(--sans); }
.ph--dark { background: #1b1a18; color: #6b655b; margin: 18px auto; width: 70%; box-shadow: 0 20px 40px rgba(0, 0, 0, .6); }

/* ---------- ボタン（蛍光イエローの四角） ---------- */
.cta {
  position: relative; display: block; margin: 22px 0 0; padding: 14px 18px 12px; background: var(--neon); color: var(--ink); text-decoration: none;
  font: 700 15px/1.4 var(--sans); letter-spacing: .04em;
}
.cta small { display: block; font-size: 9px; font-weight: 500; margin-bottom: 2px; }
.cta i { display: block; font-style: normal; font-size: 14px; margin-top: 4px; }
.cta:hover { filter: brightness(.96); }
.cta-note { margin-top: 6px; font: 500 9.5px/1.7 var(--sans); color: var(--muted); text-align: center; }
.cta-note::before { content: "●"; color: var(--neon); margin-right: 4px; }

/* ---------- FV（黒地に金） ---------- */
.fv { padding: 34px var(--gutter) 28px; background: radial-gradient(ellipse at 50% 0%, #2a241a, #0b0b0b 70%); color: #eee; text-align: center; }
.fv__to { margin-bottom: 14px; font-size: clamp(15px, 4.4vw, 18px); color: #ddd; }
.fv__title span { display: block; font-weight: 600; font-size: clamp(18px, 5.4vw, 24px); line-height: 1.5; color: #f3ead7; }
.fv__title em { font-family: var(--en); font-size: 2em; color: var(--gold-light); letter-spacing: 0; }
.fv__title strong { font-size: 1.45em; font-weight: 700; color: var(--gold-light); }
.fv__sub { margin-top: 14px; font-size: clamp(20px, 6vw, 26px); font-weight: 600; line-height: 1.5; color: #f3ead7; }
.fv__sub em { color: var(--gold-light); }
.seal {
  display: grid; place-content: center; width: 96px; height: 96px; margin: -60px 6px 0 auto; position: relative; border-radius: 50%;
  border: 1px solid var(--gold-light); outline: 1px solid var(--gold-light); outline-offset: 3px; background: #0b0b0b; color: var(--gold-light); font: 500 10px/1.6 var(--sans);
}
.seal b { font: 600 13px var(--serif); color: #eee; }
.fv .cta { text-align: left; }
.fv .cta-note { color: #999; }

/* ---------- 共通の面 ---------- */
.sec { padding: 46px var(--gutter); }
.sec--deep { background: var(--deep); }
.sec--stone { background: var(--stone); }
.ttl { margin-bottom: 18px; text-align: center; font-weight: 500; font-size: clamp(20px, 6vw, 25px); line-height: 1.6; }
.ttl--left { text-align: left; font-size: clamp(22px, 6.6vw, 28px); }
.rule { display: block; width: 70px; margin: 0 auto 22px; border-top: 2px solid var(--gold); }
.rule--left { margin: 10px 0 14px; width: 44px; }
/* 金の菱形の区切り：線—◆—線（HTMLは <span class="diamond">◆</span>） */
.diamond { display: flex; align-items: center; gap: 12px; margin: 26px 0; color: var(--gold); font-size: 13px; line-height: 1; }
.diamond::before, .diamond::after { content: ""; flex: 1; border-top: 1px solid var(--gold); }
.body { font-size: 13px; color: var(--muted); line-height: 2.1; }
.frame { margin: 22px 0; padding: 22px 14px; border: 1px solid var(--gold); text-align: center; font-size: 13px; color: var(--muted); }

/* こんな経験：番号つきの行 */
.numlist { counter-reset: n; border-top: 1px solid var(--line); }
.numlist li { counter-increment: n; position: relative; padding: 20px 0 20px 62px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.9; }
.numlist li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 600 15px var(--en); }

/* 中身の紹介 */
.chapter { margin-bottom: 26px; background: #fff; box-shadow: 0 1px 0 var(--line); }
.chapter__body { padding: 18px 16px 20px; }
.chapter__no { font: 700 11px/1.4 var(--sans); letter-spacing: .08em; }
.chapter h3 { margin-top: 6px; font-weight: 500; font-size: clamp(17px, 5vw, 20px); line-height: 1.6; }
.okchecks { margin-top: 14px; }
.okchecks li { position: relative; padding: 9px 0 9px 34px; border-bottom: 1px solid var(--line); font-size: 12px; }
.okchecks li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--gold); color: #fff; font: 700 12px var(--sans);
}

/* 実績カード */
.case { display: grid; grid-template-columns: 42% 1fr; margin-bottom: 18px; background: #fbf9f4; border: 1px solid var(--gold-light); }
.case:not(:has(.ph)) { grid-template-columns: 1fr; }
.case .ph { aspect-ratio: auto; min-height: 100%; }
.case__body { padding: 18px 14px; }
.case__name { font-size: 22px; font-weight: 600; letter-spacing: .12em; }
.case__name small { font-size: .6em; }
.case__tag { display: inline-block; margin: 2px 0 10px; padding: 0 6px; border: 1px solid var(--gold); color: var(--gold); font-size: 10px; }
.case__line { padding-top: 8px; border-top: 1px solid var(--gold-light); font-size: 11.5px; font-weight: 600; }
.case__big { font-size: 20px; font-weight: 600; border-bottom: 1px solid var(--gold-light); }
.case__big b { font: 600 2.2em/1.1 var(--en); color: var(--gold); margin: 0 .05em; }
.case__note { margin-top: 8px; font-size: 11.5px; font-weight: 600; }

/* 最後のお誘い */
.final { padding: 46px var(--gutter) 40px; background: #0b0b0b; }
.final h2 { text-align: center; font-weight: 600; font-size: clamp(21px, 6.4vw, 27px); line-height: 1.5; color: var(--neon); }
.final h2 span { display: block; color: #555; }
.final .cta-note { color: #888; }

.ft { padding: 22px; background: #0ec455; color: #0a3d1d; font: 500 11px var(--sans); letter-spacing: .1em; }