/* /assets/css/mejikara.css */
/* 目力 数トレ：ページ専用の上書きCSS（既存 style.css を壊さない方針） */

:root{
  --bg: #f6f8fb;
  --paper: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --navy: #0b2a4a;
  --navy2:#0e3a66;
  --line: #e2e8f0;
  --shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 14px;
  --max: 1080px;
}

html { scroll-behavior: smooth; }

body{
  margin: 0;
  color: var(--text);
  background: var(--bg) !important; /* body inline 背景画像を落ち着かせて上書き */
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  line-height: 1.75;
}

/* 画像のはみ出し防止 */
img, iframe { max-width: 100%; height: auto; }

/* ====== コンテナ：#wrapper を中央寄せ ====== */
#wrapper{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 16px 48px;
}

/* ====== ヘッダー（上の nav） ====== */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(90deg, var(--navy), var(--navy2));
  color: #fff;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .18);
  padding: 16px 16px 22px; /* ←ここで統一 */
}

header > div{
  max-width: var(--max);
  margin: 0 auto 14px; /* ボタン列との距離 */
  padding: 0;          /* header側でpadding済み */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;     /* ←被り対策の本丸 */
}

header > div img,
header img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

header h1{
  margin: 0 !important;
  text-align: center;
  line-height: 1.25;
  letter-spacing: .02em;
  font-size: 1.35rem !important; /* inline指定を確実に上書き */
  max-width: 900px;
}

header nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

header nav a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

header nav a:hover{
  background: rgba(255,255,255,.16);
}

/* ====== 既存テンプレのハンバーガー nav（#mainNav） ====== */
/* ヘッダーと干渉しないよう控えめに（必要なら後で消せます） */
#mainNav{
  background: transparent;
  border: 0;
}

#mainNav .inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 8px;
}

#mainNav a.menu{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

/* ====== メインバナー ====== */
#mainBanner{
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
  margin-top: 10px;
}

#mainBanner > img{
  display: block;
  width: 100%;
  height: min(360px, 48vw);
  object-fit: cover;
  opacity: 0.95 !important; /* inline と整合 */
}

#mainBanner .slogan{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  color: #fff;
}

#mainBanner .slogan h2{
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
}

#mainBanner .slogan p{
  margin: 0;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

/* ====== 記事カード（article.post） ====== */
article.post{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
  padding: 16px;
  margin: 18px 0;
}

article.post h1, article.post h2, article.post h3{
  margin: 0 0 10px;
}

article.post h1[style*="color:green"],
article.post h4[style*="color:green"]{
  color: #0b7a42 !important; /* “緑”を少し落ち着かせる */
}

article.post h3[style*="color:red"],
article.post h2[style*="color:red"]{
  color: #c1121f !important;
}

/* お知らせ（.note） */
.note{
  margin-top: 12px;
  padding: 12px 14px;
  background: #f1f5f9;
  border: 1px solid var(--line);
  border-left: 5px solid #0b7a42;
  border-radius: 12px;
  color: var(--muted);
  font-size: .95rem;
}

/* ====== テーブル ====== */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

table th, table td{
  padding: 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
  font-size: .95rem;
}

table tr:last-child td{ border-bottom: 0; }
table td:last-child, table th:last-child{ border-right: 0; }

table tr:first-child td{
  font-weight: 700;
  background: #f8fafc;
}

/* ====== グリッド（画像＋説明） ====== */
.gridWrapper{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 12px 0 20px;
}

.gridWrapper .grid{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
  padding: 14px;
}

.gridWrapper .grid p{
  margin: 8px 0 0;
  color: var(--muted);
}

/* inlineの width:290px を自然に */
.gridWrapper .grid p[style*="width: 290px"]{
  width: auto !important;
  max-width: 34rem;
}

.gridWrapper .grid img{
  width: 100% !important;  /* inline 280px を上書き */
  height: auto !important;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
}

/* iframe（プレイイメージ）もカード化 */
.gridWrapper iframe{
  width: 100% !important;
  height: min(520px, 95vw) !important;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #000;
}

/* ====== box（下部の2つのDLブロック） ====== */
.box{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
  padding: 20px 16px;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.box:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.box h3{
  margin: 10px 0 6px;
  font-size: 1.05rem;
}

.box p{
  margin: 0;
  font-size: .95rem;
  color: var(--muted);
}

/* App Storeバッジ（共通） */
.appstore-badge{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  margin-bottom: 10px;
}

.appstore-badge img{
  height: 48px;
  width: auto;
}

/* Google Play など他のバッジも揃える */
.box a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  margin-bottom: 10px;
}

.box a img{
  height: 48px;
  width: auto;
}

/* ====== ストアDLカード専用（左右対称） ======
   HTML側で <section class="gridWrapper storeGrid"> にする */
.storeGrid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.storeGrid > .grid{
  display: flex;
}

.storeGrid .box{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
}

/* ====== フッター ====== */
footer{
  margin: 22px 0 10px;
  padding: 14px 12px;
  background: rgba(255,255,255,.90);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(17,24,39,.05);
  color: var(--muted);
}

#footer .inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 12px;
}

#footer a{
  color: var(--navy);
  text-decoration: none;
}

#copyright{
  text-align: center;
  color: var(--muted);
  padding: 10px 16px 24px;
  margin: 0;
  font-size: .9rem;
}

/* ====== レスポンシブ ====== */
@media (max-width: 980px){
  .gridWrapper{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  header{ padding: 12px 12px 18px; }
  header > div{ margin-bottom: 12px; }
  header > div img{ width: 40px; height: 40px; }
  header h1{ font-size: 1.1rem !important; }
  header nav a{ padding: 10px 14px; font-size: .95rem; }

  .gridWrapper{ grid-template-columns: 1fr; }
  #mainBanner > img{ height: 240px; }
  .storeGrid{ grid-template-columns: 1fr; }
}

/* ===== mainBanner：文字とバッジの重なり解消 ===== */
#mainBanner { position: relative; }

#mainBanner .slogan{
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}

/* ===== 中央アイコンが“ガラス”に被らないようにする ===== */

/* 左のコピー枠：右端を中央まで伸ばさない */
#mainBanner .slogan{
  max-width: 380px;              /* ここで幅を止める */
}

/* 右のバッジ枠：左端を中央まで伸ばさない */
#mainBanner .store-links{
  max-width: 340px;              /* ここで幅を止める */
}

/* スマホだけは幅を広げる（中央配置なので） */
@media (max-width: 640px){
  #mainBanner .slogan{
    max-width: none;
  }
  #mainBanner .store-links{
    max-width: none;
  }
}

/* ===== ストアDLエリア：枠の整理 ===== */

/* storeGrid内では、gridは“ただのレイアウト用”にする */
.storeGrid > .grid{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* boxだけを最終カードにする */
.storeGrid .box{
  border-radius: 18px;
  padding: 28px 20px;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* 余計な二重縁を消す */
.storeGrid .box img{
  border: none;
  background: transparent;
}

/* gridWrapper自体の“外枠感”を消す */
.storeGrid{
  background: transparent;
  box-shadow: none;
  border: none;
}

/* はみ出し防止（角丸と影をきれいに） */
.storeGrid,
.storeGrid .box{
  overflow: hidden;
}

/* ================================
   ① スクショ画像セクション：カード統一
   ② CTA（赤見出し）をボタン化
   ================================ */

/* ---- storeGrid（DLカード）の枠整理：1枚だけにする ---- */
.storeGrid > .grid{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.storeGrid .box{
  border-radius: 18px;
  padding: 28px 20px;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  overflow: hidden;
}

.storeGrid .box img{
  border: none;
  background: transparent;
}

/* ---- ① スクショ／「iOS版 / Android版 / プレイイメージ」列も統一 ---- */
/* gridWrapper内のカード（.grid）の見た目を上品に揃える */
.gridWrapper .grid{
  border-radius: 18px;
  padding: 16px;
}

/* 見出し（iOS版 / Android版 / プレイイメージ）を揃える */
.gridWrapper .grid h4{
  margin: 0 0 10px !important;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: .02em;
}

/* 画像/バッジ（a.png b.png）の“内側の枠”を消してスッキリ */
.gridWrapper .grid img{
  border: none !important;
  background: transparent !important;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
}

/* プレイイメージ（iframe）も同じ丸み・影に */
.gridWrapper iframe{
  border-radius: 18px !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  overflow: hidden;
  background: #000;
}

/* gridWrapper内の“3つ目（プレイイメージ）”が .grid じゃないので統一 */
.gridWrapper > article:not(.grid){
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 2px 14px rgba(15,23,42,.06);
  padding: 16px;
}

/* その中の h4 も中央寄せ */
.gridWrapper > article:not(.grid) h4{
  margin: 0 0 10px !important;
  text-align: center;
  font-size: 1.05rem;
}

/* ---- ② 「さあ、反復練習して〜」をCTAとして整える ---- */
/* 既存の <article class="post"> 内の赤い見出しをCTA風にする */
article.post h3[style*="color:red"],
article.post h2[style*="color:red"]{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(193,18,31,.08);
  border: 1px solid rgba(193,18,31,.18);
}

/* CTA直後にある説明文の読みやすさUP */
article.post{
  overflow: hidden;
}

/* バナー内のストアバッジ配置を“右下寄せ”で綺麗に（既にAでOKなら微調整だけ） */
#mainBanner{
  position: relative;
}

#mainBanner > a + a{
  right: 16px; /* 念のため */
}

/* ↑上の指定だとaが2つ別々なので“束ねられない”場合があります。
   その場合は次のHTML修正（推奨）で確実に揃います（下に書きます）。 */

   /* バナー右下のバッジを“1かたまり”で配置（崩れない） */
#mainBanner .storeBadges{
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 3;
}

#mainBanner .storeBadges img{
  height: 44px;
  width: auto;
  display: block;
}

@media (max-width: 640px){
  #mainBanner .storeBadges img{
    height: 38px;
  }
}

/* ===== テーマを「1画面ずつ止まる」スクロールスナップ ===== */

/* テーマの前後だけスナップを強く感じさせる */
.theme-slide{
  scroll-margin-top: 140px; /* アンカーで飛んだ時も見出しが隠れない */
}

/* 1枚(=1テーマの説明パート) */
.theme-slide{
  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* だいたい1画面で収める */
  min-height: calc(100vh - 160px); /* ヘッダー分引く。必要に応じて調整 */
  padding: 10px 0 22px;
  display: grid;
  gap: 14px;
  align-content: start; /* 上に詰める */

  /* 見た目を「区切り」っぽく */
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  margin: 12px 0 22px;
}

/* theme-slide 内の gridWrapper の余白を整える（詰めすぎ防止） */
.theme-slide .gridWrapper{
  margin: 0;
}

/* 画像が多くて1画面に収まらないときは、カードを少しだけ締める */
@media (min-width: 900px){
  .theme-slide .gridWrapper{
    gap: 12px;
  }
  .theme-slide .gridWrapper .grid{
    padding: 12px;
  }
}

/* テーマ見出しを「埋もれないバー」に */
.themeTitle{
  position: sticky;
  top: 96px;                 /* headerの高さに合わせて微調整 */
  z-index: 20;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}

/* 見出しの下の余白を締める */
.themeTitle h1{ margin: 0; }