/*
Theme Name: SWELL Child
Theme URL: https://yells.hiup.jp/
Description: SWELL 子テーマ（Yells オウンドメディア）。claude design「Yellsオウンドメディア」のデザインシステムに準拠したトークンとブロックパターン用スタイルを定義。
Author: Yells / HIUP / AIDIOM
Template: swell
Version: 0.2.0
Text Domain: swell_child
*/

/* =============================================================
   Yells デザイントークン（claude design / styles/site.css に同期）
   --------------------------------------------------------------
   ※ 色・タイポ・余白・角丸・影はすべてここに集約（CLAUDE.md §3 / §5）。
      命名・値は claude design「Yellsオウンドメディア」の site.css と 1:1。
      デザイン更新時はこのブロックの値を合わせるだけで全パターンに反映される。
      ブロックパターン側は必ずこの変数を参照し、HEX直書きしない（CLAUDE.md §8）。
   ============================================================= */
:root {
  /* --- ブランドカラー（青3段＋派生） --- */
  --c-primary:     #2F65F4; /* CTA / LINE / リンク / focus */
  --c-primary-700: #1E4FD6; /* Primary ホバー / 濃 */
  --c-primary-050: #EAF0FE; /* 極淡面（アイコン地・行ハイライト） */
  --c-primary-100: #DCE7FE; /* 淡ライン */
  --c-dark:        #152773; /* 見出し / フッター / 濃アクセント / ダーク背景 */
  --c-light:       #6CA6FA; /* ホバー / 補助 / 図解 / focusリング */

  /* --- ベース / テキスト / 面 --- */
  --c-text:   #1F2433; /* 本文（純黒は使わない） */
  --c-muted:  #5A6379; /* 補足・注記 */
  --c-base:   #FFFFFF; /* 本文背景 */
  --c-cream:  #F6F6F1; /* セクション交互の淡い地 */
  --c-border: #E7E9F0; /* 境界 */

  /* --- タイポグラフィ（3書体：和文 / 欧文見出し / 等幅） --- */
  --f-jp:    "Noto Sans JP", system-ui, sans-serif;
  --f-latin: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-mono:  "Space Mono", ui-monospace, monospace;

  /* --- 角丸 --- */
  --r-lg:   22px;
  --r-md:   16px;
  --r-sm:   10px;
  --r-pill: 999px;

  /* --- 影 --- */
  --sh-sm:  0 1px 2px rgba(21,39,115,0.04), 0 6px 20px rgba(21,39,115,0.06);
  --sh-md:  0 10px 34px rgba(21,39,115,0.10);
  --sh-lg:  0 24px 60px rgba(21,39,115,0.16);
  --sh-btn: 0 8px 20px rgba(47,101,244,0.30);

  --maxw: 1200px;
}

/* =============================================================
   FV（ファーストビュー / A1 スプリット型）パターン用スタイル
   --------------------------------------------------------------
   claude design top-page.jsx の Hero() を移植。
   全セレクタを .yells-fv 配下にスコープし、SWELL本体や他ブロックへ影響させない。
   PC優先＋レスポンシブ（モバイル主要部対応 CLAUDE.md §5）。
   ============================================================= */
.yells-fv {
  font-family: var(--f-jp);
  color: var(--c-text);
  line-height: 1.75;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  background: var(--c-base);
}
.yells-fv *,
.yells-fv *::before,
.yells-fv *::after { box-sizing: border-box; }
.yells-fv p { margin: 0; }
.yells-fv a { color: inherit; text-decoration: none; }

/* ---------------- eyebrow（欧文キッカー） ---------------- */
.yells-fv .eyebrow {
  font-family: var(--f-latin);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary);
  display: inline-flex; align-items: center; gap: 10px;
}
.yells-fv .eyebrow::before { content: "✦"; color: var(--c-light); }

/* ---------------- 見出し・本文 ---------------- */
.yells-fv .h1 {
  font-weight: 900; letter-spacing: 0.01em; color: var(--c-dark);
  font-size: 60px; line-height: 1.22; margin: 22px 0 0;
}
.yells-fv .h1 .accent { color: var(--c-primary); }
.yells-fv .sub {
  font-size: 21px; font-weight: 700; color: var(--c-text);
  margin: 22px 0 0; line-height: 1.6; letter-spacing: 0.01em;
}
.yells-fv .lead {
  font-size: 15.5px; color: var(--c-muted);
  margin: 20px 0 0; line-height: 1.95; max-width: 52ch;
}

/* ---------------- CTA 群（主CV = 公式LINE登録 CLAUDE.md §4） ---------------- */
.yells-fv .cta-group {
  display: flex; align-items: center; gap: 16px;
  margin: 14px 0 20px; flex-wrap: wrap;
}
.yells-fv .cta-note {
  font-size: 12.5px; color: var(--c-muted);
  margin-top: 16px; line-height: 1.7; max-width: 46ch;
}
.yells-fv .cta-note b { color: var(--c-primary); font-weight: 700; }

/* ---------------- buttons ---------------- */
.yells-fv .btn {
  font-family: var(--f-jp); font-weight: 700; font-size: 15px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  padding: 15px 26px; display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; line-height: 1; transition: all .15s ease; white-space: nowrap;
}
.yells-fv .btn .ico { width: 19px; height: 19px; flex: none; }
/* 青背景ボタンは文字・SVGとも白に統一（.yells-fv a{color:inherit} に勝つ詳細度） */
.yells-fv a.btn-primary, .yells-fv .btn-primary { background: var(--c-primary); color: #fff; box-shadow: var(--sh-btn); }
.yells-fv .btn-primary, .yells-fv .btn-primary * { color: #fff; }
.yells-fv .btn-primary svg { stroke: #fff; }
.yells-fv a.btn-primary:hover, .yells-fv .btn-primary:hover { background: var(--c-primary-700); transform: translateY(-1px); }
.yells-fv a.btn-secondary, .yells-fv .btn-secondary { background: #fff; color: var(--c-primary); border-color: var(--c-border); box-shadow: var(--sh-sm); }
.yells-fv .btn-secondary svg { stroke: var(--c-primary); }
.yells-fv .btn-secondary:hover { border-color: var(--c-primary); }
.yells-fv .btn-lg { padding: 18px 32px; font-size: 16px; }

/* アクセシビリティ：フォーカスリングを明示（CLAUDE.md §5） */
.yells-fv a:focus-visible,
.yells-fv .btn:focus-visible { outline: 3px solid var(--c-light); outline-offset: 2px; }

/* ---------------- FV オファー帯（キャンペーン：ボタンと差別化＝角丸なし＋上下罫線） ---------------- */
.yells-fv .offer-pill {
  display: flex; align-items: center; gap: 10px;
  margin-top: 22px; padding: 12px 2px;
  border-top: 1.5px solid #C9D8FB; border-bottom: 1.5px solid #C9D8FB;
  font-size: 13.5px; color: var(--c-dark); letter-spacing: 0.01em;
}
.yells-fv .offer-pill svg { color: var(--c-primary); flex: none; }
.yells-fv .offer-pill b { font-weight: 800; color: var(--c-primary); }
.yells-fv .offer-pill .of-tag {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: #fff; background: var(--c-primary); border-radius: 4px; padding: 3px 8px; flex: none;
}

/* ---------------- hero レイアウト（A1 スプリット） ---------------- */
.yells-fv .hero { position: relative; overflow: hidden; }
.yells-fv .hero-blob {
  position: absolute; border-radius: 50%; filter: blur(8px);
  background: radial-gradient(circle at 30% 30%, var(--c-primary-050), transparent 70%);
  pointer-events: none;
}
.yells-fv .hero-split {
  max-width: var(--maxw); margin: 0 auto; padding: 76px 32px 90px;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 60px; align-items: center;
}
.yells-fv .mock-wrap { position: relative; }

/* ---------------- プロダクトウィンドウ・モック（プレースホルダ） ---------------- */
.yells-fv .win {
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-border);
  box-shadow: var(--sh-lg); overflow: hidden;
}
.yells-fv .win-bar {
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px;
  border-bottom: 1px solid var(--c-border); background: var(--c-cream);
}
.yells-fv .win-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #D6DBEA; }
.yells-fv .win-bar .url {
  margin-left: 14px; font-family: var(--f-mono); font-size: 11px; color: var(--c-muted);
  background: #fff; border: 1px solid var(--c-border); border-radius: 6px; padding: 4px 12px;
}
.yells-fv .ph {
  background: var(--c-cream);
  background-image: repeating-linear-gradient(45deg, #DCE0EC 0 1px, transparent 1px 12px);
  display: flex; align-items: center; justify-content: center;
}
.yells-fv .ph span {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--c-muted);
  background: #fff; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--c-border); text-align: center;
}

/* 浮かぶチップ（装飾UIヒント） */
.yells-fv .win-chip {
  position: absolute; background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-sm); box-shadow: var(--sh-md); padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--c-dark);
}
.yells-fv .win-chip .ic {
  width: 30px; height: 30px; border-radius: 8px; background: var(--c-primary-050);
  color: var(--c-primary); display: flex; align-items: center; justify-content: center; flex: none;
}
.yells-fv .win-chip small { display: block; font-weight: 500; font-size: 10.5px; color: var(--c-muted); }

/* ===========================================================
   レスポンシブ（claude design top.css に準拠）
   =========================================================== */
@media (max-width: 980px) {
  .yells-fv .hero-split { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 64px; }
  .yells-fv .h1 { font-size: 48px; }
}
@media (max-width: 640px) {
  .yells-fv .hero-split { padding-left: 20px; padding-right: 20px; }
  .yells-fv .h1 { font-size: 36px; line-height: 1.28; }
  .yells-fv .sub { font-size: 17px; }
  .yells-fv .cta-group { flex-direction: column; align-items: stretch; }
  .yells-fv .cta-group .btn { justify-content: center; }
  .yells-fv .win-chip { display: none; } /* 狭幅では装飾チップを隠す */
}