/* =========================================================================
   SQL社長 LP スタイル
   本体デザインシステム(松風堂 / frontend/src/styles/tokens.css)のトークンを
   複製して自己完結させたもの。値は本体と一致させ世界観の連続性を保つ。
   ========================================================================= */

:root {
  /* --- 色(和の色名) --- */
  --c-washi:     #FAF7F2;   /* 生成り・主背景 */
  --c-washi-sql: #F0EBE0;   /* 少し濃い生成り */
  --c-sumi:      #3D2E1E;   /* 墨・本文 */
  --c-kasumi:    #6B5D4F;   /* かすみ・サブ文字 */
  --c-shu:       #8B3A3A;   /* 朱・強調/CTA */
  --c-shu-deep:  #74302F;   /* 朱(濃)・hover */
  --c-cha:       #7A5C3A;   /* 茶・枠線/見出し */
  --c-cha-soft:  rgba(122, 92, 58, 0.28);
  --c-koke:      #5A7052;   /* 苔・アクセント */

  /* --- 書体 --- */
  --f-serif: 'Noto Serif JP', serif;
  --f-sans:  'Noto Sans JP', sans-serif;
  --f-mono:  'Source Code Pro', monospace;

  /* --- 余白(8pxグリッド) --- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px;
  --s-8: 64px; --s-10: 80px;

  /* --- 角丸・影 --- */
  --r-sm: 4px;
  --r-md: 6px;
  --shadow-card:  0 1px 2px rgba(61,46,30,0.06), 0 2px 8px rgba(61,46,30,0.05);
  --shadow-hover: 0 2px 4px rgba(61,46,30,0.08), 0 8px 18px rgba(61,46,30,0.10);

  /* --- レイアウト・動き --- */
  --w-max: 760px;
  --ease: cubic-bezier(0.4, 0.1, 0.2, 1);

  /* --- 和紙ノイズ(feTurbulence SVG) --- */
  --washi-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-serif);
  color: var(--c-sumi);
  background: var(--c-washi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.8;
}

/* --- 和紙の地(本体 .paper-ground を複製) --- */
.paper-ground {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(130% 95% at 80% -8%, rgba(214,182,120,0.22), rgba(214,182,120,0) 52%),
    radial-gradient(80% 60% at 12% 108%, rgba(122,92,58,0.10), rgba(122,92,58,0) 60%),
    linear-gradient(165deg, var(--c-washi) 0%, var(--c-washi-sql) 120%);
  z-index: -2;
  pointer-events: none;
}
.paper-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--washi-noise);
  background-size: 200px 200px;
  opacity: 0.20;
  mix-blend-mode: multiply;
}
.paper-ground::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(122,92,58,0.08), transparent) 22% 30%/120px 120px no-repeat,
    radial-gradient(closest-side, rgba(139,58,58,0.05), transparent) 78% 66%/90px 90px no-repeat,
    radial-gradient(closest-side, rgba(122,92,58,0.06), transparent) 64% 18%/70px 70px no-repeat;
}

/* =========================================================================
   レイアウト
   ========================================================================= */
.lp {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--s-3);
}

section {
  padding: var(--s-10) 0;
}
section + section {
  border-top: 1px solid var(--c-cha-soft);
}

/* 見出し(篆刻風の小ラベル + 主見出し) */
.sec-label {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--c-shu);
  margin: 0 0 var(--s-2);
  text-align: center;
}
.sec-title {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(20px, 4.4vw, 26px);
  letter-spacing: 0.08em;
  text-align: center;
  margin: 0 0 var(--s-6);
  color: var(--c-sumi);
}

/* =========================================================================
   1. ヒーロー
   ========================================================================= */
.hero {
  padding-top: var(--s-10);
  padding-bottom: var(--s-8);
  text-align: center;
}
.hero-visual {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto var(--s-6);
  display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--c-cha-soft);
  box-shadow: var(--shadow-hover);
}
.hero-title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: clamp(26px, 6.4vw, 40px);
  letter-spacing: 0.06em;
  line-height: 1.45;
  margin: 0 0 var(--s-3);
  color: var(--c-sumi);
}
.hero-title .sub {
  display: block;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--c-cha);
  letter-spacing: 0.12em;
  margin-top: var(--s-1);
}
.hero-catch {
  font-size: clamp(15px, 3.6vw, 19px);
  letter-spacing: 0.12em;
  color: var(--c-kasumi);
  margin: 0 0 var(--s-6);
}

/* =========================================================================
   ボタン(本体 .btn-primary を複製)
   ========================================================================= */
.btn-primary {
  display: inline-block;
  appearance: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--f-serif);
  font-size: 16px;
  letter-spacing: 0.2em;
  font-weight: 500;
  padding: 15px 44px;
  border-radius: var(--r-md);
  background: var(--c-shu);
  color: #FBF3E8;
  border: 1px solid var(--c-shu);
  box-shadow: var(--shadow-card);
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease),
              background 160ms var(--ease);
}
.btn-primary:hover {
  background: var(--c-shu-deep);
  box-shadow: var(--shadow-hover);
}
.btn-primary:active { transform: scale(0.97); }

/* =========================================================================
   2. 作品紹介(罫線装飾の textbox 風)
   ========================================================================= */
.story {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4);
  text-align: center;
}
.story::before, .story::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: var(--c-cha);
  opacity: 0.5;
}
.story::before { top: 0; }
.story::after  { bottom: 0; }
.story p {
  font-size: clamp(15px, 3.6vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin: 0;
  text-wrap: pretty;
}

/* =========================================================================
   3. プレイ情報
   ========================================================================= */
/* PCで3列(3+2、余り2枚は中央)、スマホで2列(2+2+1)。余り行は flex で中央寄せ */
.info-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  max-width: 540px;
  margin: 0 auto;
}
.info-card {
  flex: 1 1 150px;
  background: rgba(255,255,255,0.55);
  background-image: var(--washi-noise);
  background-size: 200px 200px;
  border: 1px solid var(--c-cha-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-2);
  text-align: center;
}
.info-card .k {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-shu);
  margin: 0 0 var(--s-1);
}
.info-card .v {
  font-family: var(--f-serif);
  font-size: clamp(16px, 4vw, 19px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-sumi);
  margin: 0;
}

/* =========================================================================
   4. コンセプト
   ========================================================================= */
.concept {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  align-items: center;
  max-width: 620px;
  margin: 0 auto;
}
.concept-fig {
  width: 300px;
  max-width: 80%;
  margin: 0;
}
.concept-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  border: 1px solid var(--c-cha-soft);
  box-shadow: var(--shadow-card);
}
.concept-body p {
  font-size: clamp(14px, 3.4vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-3);
  color: var(--c-sumi);
  text-wrap: pretty;
}
.concept-body p:last-child { margin-bottom: 0; }

/* =========================================================================
   5. スタッフ(控えめ)
   ========================================================================= */
.credits {
  text-align: center;
}
/* スタッフロール: 役割の下に名前を縦積み(本体 Credits.tsx に準拠) */
.staffroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin: 0 auto var(--s-6);
}
.staff-rule {
  width: 120px;
  height: 1px;
  background: var(--c-cha);
  opacity: 0.45;
}
.staff-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}
.role-title {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--c-kasumi);
  margin: 0;
}
.role-name {
  font-family: var(--f-serif);
  font-size: 17px;
  letter-spacing: 0.1em;
  color: var(--c-sumi);
  margin: 0;
}
/* 制作リンク(本体スタッフロールに準拠: 下線・色は名前と同じ) */
.role-link {
  color: var(--c-sumi);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 160ms var(--ease);
}
.role-link:hover {
  color: var(--c-shu);
}
.credits .copyright {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--c-cha);
  margin: 0;
}

/* =========================================================================
   7. 末尾CTA
   ========================================================================= */
.cta-final {
  text-align: center;
}
.cta-final .lead {
  font-size: clamp(15px, 3.6vw, 18px);
  letter-spacing: 0.1em;
  color: var(--c-kasumi);
  margin: 0 0 var(--s-4);
}

/* =========================================================================
   レスポンシブ(スマホ)
   ========================================================================= */
@media (max-width: 560px) {
  section { padding: var(--s-8) 0; }
  .concept {
    flex-direction: column;
    gap: var(--s-4);
  }
  .concept-fig {
    flex-basis: auto;
    width: 240px;
    max-width: 80%;
    margin: 0 auto;
  }
  .concept-body p { text-align: left; }
}

/* =========================================================================
   アクセシビリティ
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}