/* THINKING. LP — base styles */

:root {
  --bg-0: #0a0907;
  --bg-1: #110f0c;
  --bg-2: #15120e;
  --bg-3: #1c1812;
  --line: rgba(196, 162, 110, 0.18);
  --line-strong: rgba(196, 162, 110, 0.32);

  --ink-0: #f5ecd9;
  --ink-1: #e8dcc0;
  --ink-2: #b8ad94;
  --ink-3: #7a705c;
  --ink-4: #4a4438;

  --gold: #c8a868;
  --gold-bright: #e6c57a;
  --gold-deep: #8a6d3a;

  --accent: var(--gold);
  --accent-bright: var(--gold-bright);
  --accent-deep: var(--gold-deep);

  --serif-jp: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
  --sans-jp: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --serif-en: "Cormorant Garamond", "Cormorant", "Playfair Display", serif;
  --sans-en: "Cormorant Garamond", serif;

  --maxw: 1180px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--serif-jp);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200, 168, 104, 0.06), transparent 60%),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(200, 168, 104, 0.04), transparent 60%),
    var(--bg-0);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
img { display: block; max-width: 100%; }
.nobr { display: inline-block; white-space: nowrap; }

/* ====================================================
   MOBILE TEXT-WRAP HYGIENE — site-wide
   ----------------------------------------------------
   PCで意図して入れた <br> や .nobr が、スマホでは
   逆に変な改行を生んでしまう問題への対処。
   - 本文系（lead/body/sub/note/quote/desc/copy/text）の
     段落内の <br> はモバイルで非表示にして自然に折り返す
   - .nobr はモバイルで通常折り返しに戻す
   - タイトル系（title/headline/h1/h2）の <br> は意図的な
     詩的改行として残す
   - 行末/行頭の禁則と「pretty」改行で見栄えも整える
   ==================================================== */
html, body { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
p, li, dd, blockquote, .text-wrap-pretty { text-wrap: pretty; }

@media (max-width: 720px) {
  /* nobr は span 単位での折り返し禁止だが、モバイルでは
     画面が狭いので折り返しを許可する */
  .nobr { white-space: normal; display: inline; }

  /* 本文系の段落内に置かれた <br> をモバイルで非表示。
     タイトル/見出し系（hero-title, *-title, h1, h2, h3）の
     <br> は維持されるよう、対象を本文クラスに限定する。 */
  .hero-lead br,
  .section-lead br,
  .voice-hero-lead br,
  .voice-section-lead br,
  .voice-close-lead br,
  .footer-cta-sub br,
  .capacity-lead br,
  .capacity-body br,
  .capacity-quote br,
  .why-card-desc br,
  .strategy-claim-lead br,
  .strategy-compare-lead br,
  .strategy-sheet-lead br,
  .strategy-close-lead br,
  .support-section-lead br,
  .price-section-lead br,
  .price-form-lead br,
  .price-form-note br,
  .plan-foot-note br,
  .faq-contact-lead br,
  .blog-newsletter-lead br,
  .founder-closing-body br,
  .founder-quote br,
  .essay-body br,
  .final-cta-lead br,
  .voice-section-head p br,
  .article-body p br,
  .why-quote p br {
    display: none;
  }

  /* 本文中の "<br />" が消えた後、続く文がそのまま続くと
     詰まりすぎることがあるので、句読点後に微かな間を許可 */
  .hero-lead, .section-lead, .voice-hero-lead, .voice-section-lead,
  .capacity-lead, .capacity-body, .footer-cta-sub, .strategy-claim-lead,
  .strategy-compare-lead, .strategy-sheet-lead, .strategy-close-lead,
  .support-section-lead, .price-section-lead, .price-form-lead,
  .plan-foot-note, .faq-contact-lead, .blog-newsletter-lead,
  .founder-closing-body p, .essay-body p, .final-cta-lead, .voice-close-lead {
    text-wrap: pretty;
    line-break: strict;
  }
}

::selection { background: var(--accent); color: var(--bg-0); }

/* Scroll */
html { scroll-behavior: smooth; }

/* ----- Section frame ----- */
.section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 48px);
}
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

/* ----- English label (small caps) ----- */
.eyebrow {
  font-family: var(--serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow.left::before { display: none; }
.eyebrow.right::after { display: none; }

/* ----- Section title ----- */
.section-title {
  font-family: var(--serif-jp);
  font-weight: 500;
  font-size: clamp(28px, 4.5vw, 44px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin: 16px 0 0;
  color: var(--ink-0);
}
.section-title em {
  font-style: normal;
  color: var(--accent);
  position: relative;
  padding: 0 0.05em;
}

/* ----- Reveal animations ----- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.reveal.delay-5 { transition-delay: 0.5s; }

/* Decorative ornament */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--accent);
  opacity: 0.7;
  margin: 28px auto 0;
}
.ornament::before, .ornament::after {
  content: "";
  width: 60px;
  height: 1px;
  background: currentColor;
}
.ornament-mark {
  width: 6px;
  height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

/* CTA primary */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 36px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  color: #1a1408;
  font-family: var(--serif-jp);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 15px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 8px 24px rgba(200, 168, 104, 0.15);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  opacity: 0;
  transition: opacity 0.4s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(200, 168, 104, 0.3); }
.cta:hover::before { opacity: 1; }
.cta > * { position: relative; z-index: 1; }
.cta .arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.cta:hover .arrow { transform: translateX(4px); }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid var(--line-strong);
  color: var(--ink-1);
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.cta-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(200, 168, 104, 0.04);
}

/* Mobile */
@media (max-width: 768px) {
  .section { padding: 72px 20px; }
  .eyebrow { font-size: 12px; }
  .eyebrow::before, .eyebrow::after { width: 18px; }
  /* Mobile tap targets — anchors and buttons used as CTAs should never be smaller than 44×44 */
  .cta { min-height: 48px; padding: 14px 24px; }
  .cta-ghost { min-height: 44px; padding: 12px 20px; }
  /* Section title scales further down on small phones */
  .section-title { font-size: clamp(22px, 6.4vw, 32px); letter-spacing: 0.04em; }
  /* Tables — never let one push the page wider than the viewport */
  table { display: block; max-width: 100%; }
}

@media (max-width: 480px) {
  .section { padding: 56px 18px; }
  .cta { font-size: 14px; letter-spacing: 0.06em; padding: 14px 20px; }
}

/* Site-wide safety: prevent hero/inline images from breaking layouts on narrow screens */
img, video, iframe { max-width: 100%; }