/*
Theme Name: 鋼馬WEB Child
Theme URI: https://drue.jp/
Description: Twenty Twenty-Four用『鋼馬章伝』ランディングページ子テーマ
Author: 鋼馬WEB
Template: twentytwentyfour
Version: 1.0.0
Text Domain: kouba-web-child
*/

:root {
  --kouba-bg: #120f0d;
  --kouba-surface: #1b1612;
  --kouba-surface-2: #241c16;
  --kouba-text: #f3ead9;
  --kouba-muted: #b9a68d;
  --kouba-gold: #d8a44d;
  --kouba-gold-bright: #f0c778;
  --kouba-line: rgba(216, 164, 77, .28);
  --kouba-red: #9e3827;
}

html { scroll-behavior: smooth; }
body { background: var(--kouba-bg); }
body:has(.kouba-site) .wp-site-blocks { padding: 0; }
body:has(.kouba-site) header.wp-block-template-part,
body:has(.kouba-site) footer.wp-block-template-part { display: none; }

.kouba-site, .kouba-site * { box-sizing: border-box; }
.kouba-site {
  margin: 0;
  color: var(--kouba-text);
  background:
    radial-gradient(circle at 70% 8%, rgba(99, 70, 38, .18), transparent 33rem),
    var(--kouba-bg);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.9;
  letter-spacing: .035em;
}
.kouba-site a { color: inherit; text-decoration: none; }
.kouba-wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.kouba-serif { font-family: "Noto Serif JP", "Yu Mincho", serif; }

.kouba-header {
  position: absolute; z-index: 10; inset: 0 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(to bottom, rgba(8,7,6,.8), transparent);
}
.kouba-header-inner { height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kouba-logo { display: flex; align-items: center; gap: 14px; font-family: "Noto Serif JP", serif; font-weight: 700; letter-spacing: .12em; }
.kouba-logo img { width: 58px; height: 58px; object-fit: contain; filter: brightness(1.4); }
.kouba-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: #eadfce; }
.kouba-nav a:hover { color: var(--kouba-gold-bright); }
.kouba-nav .kouba-nav-cta { padding: 10px 18px; border: 1px solid var(--kouba-gold); color: var(--kouba-gold-bright); }

.kouba-hero { min-height: 92vh; position: relative; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.kouba-hero::before { content:""; position:absolute; z-index:-2; inset:0; background: var(--kouba-hero) center 25%/cover no-repeat; transform: scale(1.015); }
.kouba-hero::after { content:""; position:absolute; z-index:-1; inset:0; background: linear-gradient(90deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.46) 54%, rgba(8,7,6,.18)), linear-gradient(0deg, var(--kouba-bg) 0%, transparent 38%); }
.kouba-hero-content { padding: 190px 0 100px; max-width: 720px; }
.kouba-kicker { margin: 0 0 18px; color: var(--kouba-gold-bright); font-size: 14px; letter-spacing: .2em; }
.kouba-hero h1 { margin: 0; font-family: "Noto Serif JP", serif; font-size: clamp(54px, 8vw, 104px); line-height: 1.05; letter-spacing: .1em; text-shadow: 0 8px 28px #000; }
.kouba-lead { max-width: 610px; margin: 28px 0 0; font-family: "Noto Serif JP", serif; font-size: clamp(18px, 2vw, 25px); line-height: 1.7; }
.kouba-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.kouba-btn { display:inline-flex; min-height:56px; align-items:center; justify-content:center; gap:10px; padding:13px 26px; border:1px solid var(--kouba-gold); font-weight:700; transition:.2s ease; }
.kouba-btn-primary { color:#160f09 !important; background:linear-gradient(135deg, var(--kouba-gold-bright), #b97d29); box-shadow:0 14px 38px rgba(193,132,40,.22); }
.kouba-btn-secondary { background:rgba(12,10,8,.66); backdrop-filter:blur(8px); }
.kouba-btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.kouba-proof { display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:28px; color:#d9c8b1; font-size:13px; }

.kouba-section { padding: 112px 0; border-top: 1px solid var(--kouba-line); }
.kouba-section-label { display:inline-block; margin:0 0 25px; padding:5px 12px; border:1px solid var(--kouba-gold); color:var(--kouba-gold-bright); font-size:13px; letter-spacing:.18em; }
.kouba-title { margin:0 0 30px; font-family:"Noto Serif JP", serif; font-size:clamp(32px, 5vw, 54px); line-height:1.45; letter-spacing:.08em; }
.kouba-copy { max-width:790px; font-size:17px; color:#e7ddce; }
.kouba-copy p { margin:0 0 18px; }
.kouba-story-grid { display:grid; grid-template-columns:.55fr 1.45fr; gap:56px; align-items:start; }
.kouba-story-word { color:var(--kouba-gold-bright); font-family:"Noto Serif JP", serif; font-size:32px; line-height:1.7; letter-spacing:.2em; border-top:1px solid var(--kouba-gold); padding-top:24px; }

.kouba-listen { background:linear-gradient(135deg, #251c15, #17120e); }
.kouba-listen-card { display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center; padding:48px; border:1px solid var(--kouba-line); background:rgba(255,255,255,.025); }
.kouba-listen-card p { margin:10px 0 0; color:var(--kouba-muted); }

.kouba-cast { display:grid; gap:0; border-top:1px solid var(--kouba-line); }
.kouba-cast-row { display:grid; grid-template-columns:180px 1fr; gap:26px; padding:25px 0; border-bottom:1px solid var(--kouba-line); }
.kouba-cast-role { color:var(--kouba-gold); font-size:14px; }
.kouba-cast-name { font-family:"Noto Serif JP", serif; font-size:22px; }
.kouba-note { display:block; margin-top:6px; color:var(--kouba-muted); font-family:"Noto Sans JP", sans-serif; font-size:14px; }

.kouba-products { background:#17120f; }
.kouba-product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.kouba-product { position:relative; padding:38px; overflow:hidden; border:1px solid var(--kouba-line); background:linear-gradient(145deg, #2a2018, #18130f); }
.kouba-product::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--kouba-gold),transparent); }
.kouba-product .kouba-volume { color:var(--kouba-gold); font-size:13px; letter-spacing:.18em; }
.kouba-product h3 { margin:10px 0 12px; font-family:"Noto Serif JP",serif; font-size:30px; }
.kouba-product p { min-height:3.8em; color:var(--kouba-muted); }
.kouba-product .kouba-btn { width:100%; margin-top:18px; }

.kouba-footer { padding:52px 0 110px; border-top:1px solid var(--kouba-line); color:var(--kouba-muted); font-size:13px; }
.kouba-footer-inner { display:flex; justify-content:space-between; gap:24px; }
.kouba-mobile-cta { display:none; }

@media (max-width: 760px) {
  .kouba-wrap { width:min(100% - 32px, 1120px); }
  .kouba-header-inner { height:74px; }
  .kouba-logo img { width:44px; height:44px; }
  .kouba-logo span { font-size:14px; }
  .kouba-nav a:not(.kouba-nav-cta) { display:none; }
  .kouba-nav .kouba-nav-cta { padding:8px 12px; font-size:12px; }
  .kouba-hero { min-height:790px; }
  .kouba-hero::before { background-position:58% center; }
  .kouba-hero::after { background:linear-gradient(0deg,var(--kouba-bg) 0%,rgba(8,7,6,.2) 72%), linear-gradient(90deg,rgba(8,7,6,.65),transparent); }
  .kouba-hero-content { padding:150px 0 72px; }
  .kouba-hero h1 { font-size:48px; }
  .kouba-lead { font-size:17px; }
  .kouba-btn { width:100%; }
  .kouba-section { padding:78px 0; }
  .kouba-story-grid, .kouba-listen-card { grid-template-columns:1fr; gap:24px; }
  .kouba-story-word { font-size:24px; }
  .kouba-listen-card { padding:28px 22px; }
  .kouba-product-grid { grid-template-columns:1fr; }
  .kouba-cast-row { grid-template-columns:1fr; gap:4px; }
  .kouba-footer-inner { display:grid; }
  .kouba-mobile-cta { display:block; position:fixed; z-index:30; left:12px; right:12px; bottom:12px; padding:14px 18px; text-align:center; color:#160f09 !important; background:linear-gradient(135deg,var(--kouba-gold-bright),#b97d29); box-shadow:0 8px 32px rgba(0,0,0,.55); font-weight:800; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .kouba-btn { transition:none; }
}