@charset "UTF-8";
/* =======================================
   銀河美味しんぼ学会｜五丁目新聞レイアウト＋Apple風ナビ
   Walker対応・整理版 v3-final（単一ファイル）
   ======================================= */
.site-header.apple-nav {
  position: sticky;
  top: 0;
}
@supports (-webkit-touch-callout: none) {
  .site-header.apple-nav {
    position: fixed !important;
  }
  body {
    padding-top: 60px;
  }
}
/* ---------------------------------------
   基本変数（統合・整理）
--------------------------------------- */
:root{
  /* フォント／カラー */
  --main-font:'Hiragino Mincho ProN','游明朝体','Yu Mincho',serif; /* 新聞レイアウト用 */
  --heading-font:'Noto Serif JP',serif;
  --ui-font:'Noto Sans JP','SF Pro JP','Helvetica Neue','Yu Gothic Medium','Yu Gothic','Meiryo',sans-serif; /* UI・Appleナビ用 */
  --text-color:#1d1d1f;
  --sub-color:#000000; /* 将来拡張用 */
  --bg-color:#fefefe;
  --border-color:#ccc;
  --apple-bg:#f5f5f7;

  /* アクセント */
  --accent-color:#d7fc5e; /* ハイライト */
  --accent1:#F42272;      /* 強調色（ホバー等） */
  --accent2:#9381FF;      /* フォーカスリング */
  --line-soft:#ddd;

  /* z-index層
     1000: Header
     1100: Dropdown
     1190: Mega Menu
     8999: Mobile Backdrop
     9000: Mobile Drawer
  */
  --z-header:1000;
  --z-nav-fade:900;       /* 背景フェード(PC) */
  --z-dropdown:1100;
  --z-mega:1190;
  --z-mobile-backdrop:8999;
  --z-mobile-drawer:9000;
}

/* ========== 全体共通 ========== */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--ui-font);
  font-size:18px;
  line-height:1.8;
  background-color:var(--bg-color);
  color:var(--text-color);
  overflow-x:hidden;
}

a{
  color:var(--text-color);
  text-decoration:none;
  transition:color .3s;
}
a:hover{ color:var(--accent1); }
a:focus-visible{
  outline:2px solid var(--accent2);
  outline-offset:2px;
  border-radius:3px;
}

.container{
  width:min(90%, 1200px);
  margin-inline:auto;
}

/* =======================================
   1) Apple風グローバルナビ（Walker対応）
======================================= */
.site-header.apple-nav{
  position:sticky;
  top:0;
  width:100%;
  background:var(--apple-bg);
  border-bottom:1px solid #e0e0e0;
  color:var(--text-color);
  font-family:var(--ui-font);
  font-size:13px;
  line-height:1.4;
  letter-spacing:-.02em;
  z-index:var(--z-header);
  overflow:visible; /* サブメニュー切れ対策 */
}

/* ヘッダー基本 */
.site-header{
  padding:0;           /* Stickyなので不要 */
  border-bottom:none;  /* 個別設定 */
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
  padding:.5rem 1.5rem;
  flex-wrap:nowrap;
}

/* ロゴ */
.apple-logo{
  display:flex; align-items:center; height:48px;
  font-weight:600; color:var(--text-color);
  font-size:1.1rem; margin-right:1.5rem; white-space:nowrap;
  transition:opacity .2s ease;
}
.apple-logo:hover{ opacity:.6; }

.site-logo{
  display:block; height:auto; width:auto; max-height:40px;
  object-fit:contain; vertical-align:middle;
}
@media (max-width:900px){ .site-logo{ max-height:32px; } }
/* ======================
   グローバルナビ：第1階層
====================== */
.global-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-menu > li {
  position: relative;
  white-space: nowrap;
}

.global-menu > li > a {
  display: inline-block;
  padding: .4rem 0;
  color: var(--text-color);
  font-size: .95rem;
  font-weight: 500;
  transition: opacity .25s ease;
}
.global-menu > li:hover > a { opacity: .7; }

/* ======================
   通常ドロップダウン（第2階層）
====================== */
ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s ease;
  z-index: var(--z-dropdown);
}

li:hover > ul.sub-menu,
li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

ul.sub-menu a {
  display: block;
  padding: .8rem 1.2rem;
  font-size: 1rem;
  color: #333;
  transition: background .2s ease;
}
ul.sub-menu a:hover {
  background: var(--apple-bg);
}

/* ======================
   メガメニュー（第1階層専用）
====================== */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .3s ease;
  text-align: left;
  z-index: var(--z-mega);
}

.has-mega:hover > .mega-menu,
.has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-menu ul {
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.mega-menu a {
  display: block;
  padding: .6rem 0;
  color: #1d1d1f;
  font-size: 1.05rem;
  font-weight: 500;
  transition: opacity .25s ease;
}
.mega-menu a:hover { opacity: .6; }

/* ---- 右側アイコン／SNS ---- */
.apple-icons{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.apple-icon{
  background:none; border:none; font-size:1.2rem; color:var(--text-color);
  cursor:pointer; transition:opacity .25s ease;
}
.apple-icon:hover,
.apple-icon:focus-visible{ opacity:.6; outline:none; }

.sns-icon{
  display:flex; gap:.5rem; justify-content:center;
}
.sns-icon a{
  font-size:1.2rem; color:var(--text-color); transition:opacity .3s;
}
.sns-icon a:hover{ opacity:.7; }

/* ---- ハンバーガー ---- */
.hamburger{
  display:none; position:relative; width:28px; height:20px;
  background:none; border:none; cursor:pointer; padding:0;
  margin-left:1rem;
}
.hamburger span{
  display:block; position:absolute; left:0; width:100%; height:2px;
  background:var(--text-color); transition:.3s;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:9px; }
.hamburger span:nth-child(3){ bottom:0; }
.hamburger.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ---- ヘッダ下の背景フェード（PC） ---- */
@media (min-width:901px){
  .apple-nav::after{
    content:""; position:absolute; top:100%; left:0; width:100%; height:0;
    background:rgba(0,0,0,.05); opacity:0;
    transition:opacity .3s ease, height .3s ease;
    z-index:var(--z-nav-fade); pointer-events:none;
  }
  .apple-nav:hover::after{ opacity:1; height:100vh; }
}

/* 動きに弱い方向け */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =======================================
   2) 新聞レイアウト
======================================= */
body.page-template-template-5chome-shinbun{
  background:var(--bg-color); color:var(--text-color);
  font-family:var(--main-font); font-size:20px; line-height:2; letter-spacing:.05em;
  margin:0; padding:0; overflow-x:hidden;
}
.shinbun-wrapper{ padding:2em 1em; }
.shinbun-container{
  max-width:820px; margin:0 auto; background:#fff; padding:1.5em 2em;
  border:1px solid var(--border-color); box-shadow:0 4px 16px rgba(0,0,0,.05);
}
.shinbun-header{ border-bottom:2px solid var(--border-color); margin-bottom:2em; padding-bottom:.5em; }
.shinbun-title{
  font-family:var(--heading-font); font-size:2.2rem; font-weight:700;
  margin:0 0 .4em; line-height:1.4;
}
.shinbun-meta{ font-family:var(--ui-font); font-size:.9rem; color:#666; }

.shinbun-content p{ margin:1em 0 1.8em; text-indent:1em; line-height:1.9; }
.shinbun-content h2{
  font-size:1.6rem; border-left:6px solid var(--accent-color); padding-left:.6em;
  background:linear-gradient(transparent 60%, rgba(215,252,94,.25) 60%);
  margin:2.8em 0 1em;
}
.shinbun-content h3{
  font-size:1.25rem; border-bottom:1px dashed var(--border-color);
  padding-bottom:.3em; margin:2.8em 0 1em;
}
.shinbun-content blockquote{
  border-left:4px solid var(--border-color); padding-left:1em;
  margin:2em 0; color:#555; font-style:italic; font-size:.95em;
}
.shinbun-author{
  text-align:right; font-size:1rem; margin-top:3em; padding-top:1em;
  border-top:1px solid var(--border-color); color:#555; font-family:var(--ui-font); font-style:italic;
}
figure.shinbun-thumb {
  width: 100%;
  margin: 2em 0;
}

figure.shinbun-thumb img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 6px; /* 任意。角丸を付けたい場合 */
}

/* =======================================
   3) 投稿グリッド・セクションタイトル・ボタン
======================================= */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
  margin-top:2rem;
}

.post-card{
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:10px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.post-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.post-card a{ color:inherit; display:block; height:100%; }
.post-thumb img{
  width:100%; height:180px; object-fit:cover; display:block;
}
.post-content{ padding:1rem; }
.post-title{ font-size:1.1rem; margin-bottom:.5rem; }
.post-excerpt{ font-size:.9rem; color:#666; }

/* セクションタイトル・ボタン */
.section-title{
  font-size:1.8rem; margin-bottom:1rem;
  border-left:6px solid #333; padding-left:.5rem;
}
.btn{
  display:inline-block; padding:.75em 1.5em;
  background:#333; color:#fff; border-radius:5px;
  font-weight:700; transition:background .3s ease; text-align:center;
}
.btn:hover{ background:#555; }
.more-link{ text-align:center; margin-top:2rem; }
.lang-inline-button{ text-align:center; margin:2rem 0; }

/* =======================================
   4) シェアボタン・フッター
======================================= */
.share-buttons{
  margin-top:2.5rem; border-top:1px solid var(--line-soft); padding-top:1.5rem;
  font-family:var(--ui-font);
}
.share-buttons span{
  display:block; font-size:.95rem; color:#555; margin-bottom:.5rem;
}
.share-buttons ul{
  display:flex; gap:1.2rem; list-style:none; padding:0; margin:0; flex-wrap:wrap;
}
.share-buttons a{
  font-weight:600; font-size:.95rem; color:#333;
  padding:.4em .8em; border:1px solid var(--border-color); border-radius:4px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.share-buttons a:hover,
.share-buttons a:focus-visible{
  background:var(--accent-color); color:#000; border-color:var(--accent-color); outline:none;
}

.site-footer{
  background:#fafafa; border-top:1px solid var(--border-color);
  padding:3em 1em 2em; font-family:var(--ui-font); color:#333; text-align:center;
}
.footer-menu{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.2em 2em;
  list-style:none; padding:1.2em 0 0; margin:0 auto 2em; max-width:800px;
  border-top:1px solid var(--line-soft);
}
.footer-menu li a{
  color:#333; font-size:.95rem; font-weight:500; position:relative; transition:color .2s ease;
}
.footer-menu li a::after{
  content:""; position:absolute; left:0; bottom:0; width:0%; height:1px; background:#333; transition:width .25s ease;
}
.footer-menu li a:hover::after,
.footer-menu li a:focus-visible::after{ width:100%; }

/* =======================================
   5) モバイル（ドロワー対応）
======================================= */
@media (max-width:900px){
  .header-inner{ flex-wrap:nowrap; justify-content:space-between; }
  .hamburger{ display:inline-block; }

  /* ドロワー本体 */
  .global-nav{ display:none; }
  .global-nav.open{
    display:block; position:fixed; top:0; right:0; width:85%; max-width:340px; height:100vh;
    background:#fff; padding:5rem 1.5rem 2rem; box-shadow:-4px 0 12px rgba(0,0,0,.15);
    overflow-y:auto; z-index:var(--z-mobile-drawer); text-align:left;
    transform:translateZ(0); will-change:transform;
  }

  /* 背景の半透明幕 */
  body.nav-open::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(2px);
    z-index:var(--z-mobile-backdrop);
  }
  body.nav-open{ overflow:hidden; }

  .global-menu{
    display:flex; flex-direction:column; align-items:stretch;
    list-style:none; margin:0; padding:0; width:100%;
  }
  .global-menu>li{ width:100%; border-bottom:1px solid #e5e5e5; }
  .global-menu>li>a{
    display:block; width:100%; padding:1rem 0; font-size:1.05rem; font-weight:500;
    color:var(--text-color); transition:background .2s ease, color .2s ease;
  }
  .global-menu>li>a:hover{ background:#f5f5f7; color:#000; }

  /* サブメニューはモバイルでは非表示＆クリックブロック解除 */
  .global-menu .sub-menu {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  /* 念のため、親リンクを前面に */
  .global-menu .menu-item-has-children > a {
    position: relative;
    z-index: 1;
  }

  .global-menu li.is-open>.sub-menu{ display:block; }
  .global-menu .sub-menu a{ padding:.5rem 0; }

  /* メガメニューはドロワー内では非表示 */
  .mega-menu{ display:none !important; }

  /* 投稿グリッドの1列化 */
  .posts-grid{ grid-template-columns:1fr; }
}

/* =======================================
   6) クイズモジュール
======================================= */
.simple-quiz{
  width:100%;
  max-width:800px;
  margin:1em auto;
  padding:1em;
  background:#fafafa;
  border:1px solid var(--border-color);
  border-radius:8px;
  box-sizing:border-box;
}
.quiz-question{ font-weight:bold; margin-bottom:.6em; }
.quiz-hint-btn{
  background:#f0f0f0;
  border:1px solid #aaa;
  border-radius:4px;
  padding:.3em .8em;
  font-size:14px;
  cursor:pointer;
  margin-bottom:.6em;
}
.quiz-hint{
  background:#ffffe0;
  border:1px dashed #aaa;
  border-radius:4px;
  padding:.6em;
  margin-bottom:.8em;
  font-size:15px;
}
.quiz-choices{ list-style:none; padding:0; margin:0; }
.quiz-choices li{ margin:.3em 0; }
.quiz-btn{
  width:100%;
  padding:.6em;
  border:1px solid #333;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  font-size:18px;
  transition:background .2s ease;
}
.quiz-btn:hover{ background:#e9f0ff; }
.quiz-result{ text-align:center; font-weight:bold; margin-top:.5em; }
.quiz-source{ font-size:.9em; color:#555; text-align:right; margin-bottom:.5em; }

@media (max-width:600px){
  .simple-quiz{
    width:100%;
    border-radius:0;
    padding:.8em;
  }
  .quiz-btn{ font-size:16px; }
}
/* --- サブメニューが途中で消える対策 --- */
.site-header,
.header-inner,
.global-nav,
.global-menu {
  overflow: visible !important;
}

.global-menu ul.sub-menu {
  position: absolute;
  z-index: 9999; /* z-indexを大きくしてヘッダーや他要素より前面に */
}

.site-header.apple-nav {
  z-index: 10000; /* ドロワーよりも上に */
}

/* =======================================
   子ページ自動サブメニュー（機能＋視認性重視）
   ======================================= */

.article-submenu {
  margin: 1.5em 0 1.25em;
  padding: 0.8em 1em;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: var(--ui-font, 'Noto Sans JP', sans-serif);
  font-size: 0.82rem; /* ← 小さめフォント */
  line-height: 1.7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
}

.article-submenu__label {
  font-weight: 700;
  color: #333;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* リスト構造 */
.article-submenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.2em;
}

/* 各リンクの見た目 */
.article-submenu__list li a {
  display: inline-block;
  padding: 0.3em 0.6em;
  text-decoration: none;
  color: #1d1d1f;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

/* hover時：軽く浮く */
.article-submenu__list li a:hover {
  background: #fff;
  border-color: var(--accent-color, #d7fc5e);
  box-shadow: 0 0 5px rgba(0,0,0,0.08);
  color: #007aff;
}

/* 現在ページをハイライト */
.article-submenu__list li.current-page a {
  background: var(--accent-color, #d7fc5e);
  border-color: #c5eb4d;
  color: #000;
  font-weight: bold;
}

/* =======================================
   レスポンシブ対応
   ======================================= */
@media (max-width: 768px) {
  .article-submenu {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-submenu__label {
    margin-bottom: 0.4em;
  }
  .article-submenu__list {
    gap: 0.4em 0.8em;
  }
  .article-submenu__list li a {
    padding: 0.4em 0.8em;
  }
}

/* =======================================
   視覚的補助：スクロールが長いページ用に固定も可
   （任意で有効化）
   ======================================= */
/*
.article-submenu {
  position: sticky;
  top: 64px; 
  z-index: 900;
  ba