/* ============================================================
   en_styles.css — 英語版サイト専用スタイルシート
   （日本語版 styles.css とは分けて定義：要件 #8）
   ============================================================ */

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@400;700&display=swap');

/* ===== 点滅アニメーション ===== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.blink {
  animation: blink 2s step-start infinite;
}

/* ===== Reset / Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  height: 100%;
}
body {
  height: 100%;
  font-family: "EB Garamond", "Noto Serif JP", "Times New Roman", serif;
  padding-top: 120px;
}

/* ===== 画像のはみ出し防止（レスポンシブ／スマホ対策） ===== */
img { max-width: 100%; height: auto; }
/* ヘッダーのタイトル画像：PCは従来どおり高さ100px固定 */
header img { height: 100px; }
/* スマホでは縦横比を保ったまま画面幅に収める */
@media (max-width: 768px) {
  header img { height: auto; max-height: 100px; }
}

/* ===== Header / Nav (PC) ===== */
header {
  position: fixed; inset: 0 0 auto 0; height: 120px;
  display: flex; align-items: center; gap: 20px;
  background: #22110b; color: #e2d5b8; padding: 0 16px; z-index: 100;
}

/* メニューは常に横一列。入り切らない場合は横スクロール */
.topnav {
  display: flex; gap: 16px;
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: #c8a84b rgba(200, 168, 75, 0.15);
}
.topnav::-webkit-scrollbar { height: 8px; }
.topnav::-webkit-scrollbar-track {
  background: rgba(200, 168, 75, 0.15); border-radius: 4px;
}
.topnav::-webkit-scrollbar-thumb {
  background: #c8a84b; border-radius: 4px;
}

.topnav a {
  flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  color: #c8a84b; text-decoration: none;
  padding: 8px 12px; border-radius: 4px; transition: background .25s;
  font-size: 24px;
}
.topnav a:hover { background: rgba(200, 168, 75, 0.15); }

/* 言語切替リンク（日本語版へ） */
.topnav a.lang-switch { border: 1px solid #c8a84b; }

/* ホーム（アイコン画像 ＋ テキスト） */
.topnav a.nav-home { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; }
.topnav a.nav-home img { height: 1.1em; width: auto; max-height: 1.1em; max-width: 100%; display: block; }

/* 廃止した☰ボタンは念のため非表示 */
.menu-toggle { display: none; }

/* 右端のフェード＋「まだ続きがある」ことを示す矢印（JSでcan-scroll-right付与時のみ表示） */
header::after {
  content: "❯";
  position: absolute; top: 0; right: 0; height: 100%;
  width: 56px;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 12px;
  color: #c8a84b; font-size: 22px; font-weight: 700;
  pointer-events: none;
  background: linear-gradient(to right, rgba(34, 17, 11, 0), #22110b 55%);
  opacity: 0; transition: opacity .25s; z-index: 101;
}
header.can-scroll-right::after { opacity: 1; animation: navHint 1.3s ease-in-out infinite; }
@keyframes navHint {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .topnav a { font-size: 20px; padding: 8px 10px; }
  .topnav a.nav-home { font-size: 20px; }
}

/* ===== コンテンツページ共通 ===== */
.dark-page {
  background: #08080f;
  color: #e2d5b8;
}

/* ===== index – ガチャ紹介ページ ===== */
.gacha-intro h1 {
  text-align: center;
  color: #c8a84b;
  font-size: xxx-large;
}

.gacha-intro h2.blink {
  text-align: center;
  color: #b07ad0;
  font-size: xx-large;
}

.gacha-intro .door-wrap {
  text-align: center;
}

.gacha-intro .door-wrap img {
  width: 85%;
}

.gacha-intro .welcome {
  padding: 1%;
}

.gacha-intro .welcome p {
  text-align: center;
  color: #e2d5b8;
  font-size: xx-large;
}

/* ===== 説明ページ共通（about / kamisama） ===== */
.about-page h1 {
  font-size: xxx-large;
  color: #c8a84b;
  padding: 1em 3%;
}

.about-page .page-text {
  font-size: xx-large;
  color: #e2d5b8;
  padding: 0.5em 3% 3em 3%;
}

.about-page .page-text p {
  text-indent: 0em;
  margin-bottom: 1.2em;
  line-height: 1.9;
}

/* ===== gacha1 – 扉アニメーションページ ===== */
.gacha-anim h1 {
  text-align: center;
  color: #8a88aa;
}

.gacha-anim .door-wrap {
  text-align: center;
}

.gacha-anim .door-wrap img {
  width: 85%;
}