/* Forest Hollows 公式サイト
   ゲーム本体と同じ世界観: 夕暮れの森、絵本タッチ、温かい色調
   主色: #7A4E2D (温かい茶) / #4A5D23 (深い苔緑) / #F4E4BC (クリーム羊皮紙)
   背景:  夜空〜夕暮れのグラデーション + キービジュアル */

:root{
  --c-cream: #F4E4BC;
  --c-cream-soft: #FFF5D8;
  --c-brown: #7A4E2D;
  --c-brown-dark: #3a2a1a;
  --c-green: #4A5D23;
  --c-green-light: #6B8E5A;
  --c-amber: #FFD27A;
  --c-night: #1C1610;
  --c-dusk-1: #2a1f3a;
  --c-dusk-2: #4a2c3f;
  --c-dusk-3: #7a4530;
  --shadow-soft: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-pop:  0 12px 36px rgba(0,0,0,0.5);
  --radius-l: 22px;
  --radius-m: 14px;
  --maxw: 1080px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Segoe UI", Roboto, sans-serif;
  color: var(--c-cream);
  background:
    radial-gradient(ellipse at top, var(--c-dusk-1) 0%, #1a1410 70%, #0d0807 100%);
  background-attachment: fixed;
  line-height:1.7;
  min-height:100vh;
  font-feature-settings: "palt" 1;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--c-amber); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

/* ===== Top bar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 20px;
  background: rgba(20,16,12,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(244,228,188,0.15);
}
.brand{
  display:flex; align-items:center; gap:10px;
  color: var(--c-cream);
  font-weight:800; letter-spacing:0.04em; font-size:18px;
}
.brand img{ width:32px; height:32px; border-radius:8px; }
.brand-text{ font-family: Georgia, "Times New Roman", serif; }
.nav{
  display:flex; align-items:center; gap:18px;
}
.nav a{
  color: var(--c-cream);
  font-weight:600; font-size:14px;
  padding:6px 10px; border-radius:8px;
}
.nav a:hover, .nav a:focus{
  background: rgba(244,228,188,0.12);
  text-decoration:none;
}
.lang-toggle{
  display:flex; gap:0;
  border:1px solid rgba(244,228,188,0.4); border-radius:10px;
  overflow:hidden; font-size:12px; font-weight:700;
}
.lang-toggle button{
  appearance:none; border:0; background:transparent; color:var(--c-cream);
  padding:6px 12px; cursor:pointer; letter-spacing:0.06em;
}
.lang-toggle button.active{ background: var(--c-amber); color: var(--c-night); }

/* 言語切替: data-lang 属性に応じて表示制御 */
html[data-lang="ja"] [data-lang-only="en"]{ display:none !important; }
html[data-lang="en"] [data-lang-only="ja"]{ display:none !important; }

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height: 72vh;
  display:flex; align-items:flex-end;
  background-image: url("../images/hero-landscape.webp");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,16,12,0.05) 0%, rgba(20,16,12,0.5) 60%, rgba(13,8,7,0.92) 100%);
}
.hero-inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding: 80px 24px 60px;
  text-align:center;
}
/* スクリーンリーダー専用: 視覚的には隠すが、SEO/アクセシビリティで読まれる。
   ロゴ画像で表示する場合のテキスト保険として使う。 */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero h1{
  margin: 6px 0 8px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero-logo{
  display:block;
  width: min(540px, 86%);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.6))
          drop-shadow(0 0 40px rgba(255,210,122,0.15));
}
.hero-tagline{
  font-family: "Hiragino Sans","Yu Gothic", serif;
  font-size: clamp(16px, 2.6vw, 22px);
  font-weight:700;
  letter-spacing:0.1em;
  margin-top: 6px;
  color: var(--c-amber);
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}
.hero-tagline .sep{ opacity:0.6; margin: 0 8px; }
.hero-lead{
  max-width: 640px; margin: 24px auto 0;
  font-size: 16px; line-height:1.85;
  color: var(--c-cream-soft);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55);
  white-space: pre-line;
}
.hero-cta{
  margin-top: 30px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 28px;
  border-radius: 14px;
  font-weight:800; font-size:16px; letter-spacing:0.04em;
  border:0; cursor:pointer; text-decoration:none;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow-soft);
}
.btn:active{ transform: scale(0.96); }
.btn-primary{
  background: linear-gradient(180deg, #8FBA72 0%, #4A5D23 100%);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.18);
}
.btn-primary:hover, .btn-primary:focus{ text-decoration:none; box-shadow: var(--shadow-pop); }
.btn-soon{
  background: rgba(255,210,122,0.18);
  color: var(--c-amber);
  border: 2px dashed rgba(255,210,122,0.55);
  cursor: not-allowed;
}
.btn-ghost{
  background: rgba(28,22,16,0.55);
  color: var(--c-cream);
  border: 2px solid rgba(244,228,188,0.4);
}
.btn-ghost:hover, .btn-ghost:focus{ background: rgba(28,22,16,0.85); text-decoration:none; }

/* ===== Sections ===== */
.section{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 80px 24px;
}
.section h2{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4.4vw, 40px);
  color: var(--c-amber);
  margin-bottom: 28px;
  text-align:center;
  letter-spacing:0.02em;
}
.section .lead{
  font-size: 17px;
  line-height:1.9;
  color: var(--c-cream-soft);
  max-width: 720px;
  margin: 0 auto 24px;
  white-space: pre-line;
}

/* Feature cards (top page) */
.features{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.feature{
  background: rgba(28,22,16,0.65);
  border: 1px solid rgba(244,228,188,0.18);
  border-radius: var(--radius-l);
  padding: 24px;
  text-align:center;
}
.feature .icon{
  font-size: 36px; line-height:1;
  margin-bottom: 12px;
}
.feature h3{
  color: var(--c-amber);
  font-size: 18px;
  margin-bottom: 8px;
}
.feature p{
  font-size: 14px;
  color: var(--c-cream-soft);
  line-height:1.7;
}

/* About: timeline */
.timeline{
  max-width: 640px;
  margin: 24px auto 0;
  padding-left: 16px;
  border-left: 3px solid rgba(255,210,122,0.4);
  display:flex; flex-direction:column; gap:22px;
}
.timeline li{
  list-style:none;
  position:relative;
  padding: 4px 0 4px 18px;
}
.timeline li::before{
  content:"";
  position:absolute; left:-23px; top:14px;
  width:13px; height:13px; border-radius:50%;
  background: var(--c-amber);
  box-shadow: 0 0 12px rgba(255,210,122,0.6);
}
.timeline .date{
  display:block;
  font-weight:800; color: var(--c-amber);
  letter-spacing:0.04em; font-size:14px;
}
.timeline .desc{
  display:block;
  margin-top: 4px;
  color: var(--c-cream-soft);
  font-size: 15px;
}
.timeline .desc-en{
  display:block;
  font-size: 13px;
  font-style: italic;
  color: rgba(244,228,188,0.7);
  margin-top: 2px;
}

/* About: cards */
.story{
  background: rgba(28,22,16,0.62);
  border: 1px solid rgba(244,228,188,0.16);
  border-radius: var(--radius-l);
  padding: 28px 26px;
  margin-top: 24px;
}
.story p{
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-cream-soft);
  white-space: pre-line;
}
.story p + p{ margin-top: 14px; }

/* ===== Footer ===== */
.site-footer{
  background: rgba(13,8,7,0.92);
  border-top: 1px solid rgba(244,228,188,0.12);
  padding: 36px 24px 28px;
  margin-top: 60px;
  text-align:center;
}
.site-footer .foot-lines{
  max-width: 720px;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(244,228,188,0.75);
  white-space: pre-line;
}
.site-footer .foot-contact{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(244,228,188,0.85);
}
.site-footer .foot-contact a{ color: var(--c-amber); font-weight:700; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ===== Mobile portrait: switch hero image to portrait variant ===== */
@media (max-width: 720px){
  .hero{
    background-image: url("../images/hero-portrait.webp");
    background-position: center 25%;
    min-height: 78vh;
  }
  .hero-inner{ padding: 60px 20px 50px; }
  .topbar{ padding: 10px 14px; }
  .nav{ gap:8px; }
  .nav a{ padding:5px 8px; font-size:13px; }
  .section{ padding: 60px 18px; }
}