/* =====================================================
   mindas. — front.css
   トップ（front-page）専用レイアウト。style.css の後に読み込み、
   #home の旧マストヘッド/旧 .mag-* ルールを上書きする。
   トーン: 温かい紙地 × 細罫線 × 明朝（2026-07 モック準拠の誌面型）。
   トークンは root.css を参照（--color-paper / --font-serif ほか）。
   ===================================================== */

/* 紙の一枚地。カードを白で浮かせず、罫線で区切る */
body#home { background: var(--color-paper); }

/* 新レイアウトのコンテナ幅（サイドバー無し・PCはワイド1400px）。
 * ヘッダー/フッターの内側も #home ではこの幅に合わせて端を揃える */
#home .front-wrap {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
#home .footer-wrap, #home .footer-bar { max-width: var(--container-wide); }

/* ── ヘッダー：誌面マストヘッド（左ロゴ＋ISSUE＋横ナビ＋常時検索） ── */
/* NOTE: position は style.css:168 の `position: fixed`（フロー外＋base.js の
   syncPad が #main-content に padding-top を注入する既存モデル）を尊重して上書きしない。
   sticky にするとヘッダーが再びフローに乗り、JS 注入 padding と二重化して
   マストヘッド直下に空白帯が出るため。ここでは見た目のみ上書きする。 */
#home .site-header {
  min-height: var(--header-h);
  background: var(--color-paper);
  border-bottom: var(--border-thin) solid var(--color-ink);
  box-shadow: none;
  padding-block: 0;
}
#home .site-header.is-scrolled { box-shadow: var(--shadow-xs); }
#home .header-inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0;
  min-height: var(--header-h);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}
#home .header-issue { margin-right: auto; }   /* ロゴの右に置き、以降を右側へ押す */
#home .header-nav { margin-left: 0; }
/* ナビはプレーンテキスト（塗りピル・アイコンを外して誌面トーンに） */
#home .header-nav .nav-link { color: var(--color-ink); }
#home .header-nav .nav-link i { display: none; }
#home .header-nav .nav-fortune {
  background: none;
  border: none;
  color: var(--color-ink);
  box-shadow: none;
  padding: inherit;
}
#home .header-nav .nav-fortune:hover { background: none; color: var(--color-coral-dark); box-shadow: none; transform: translateY(-2px); }
/* 常時表示の検索（トグルボタンは隠す） */
#home .header-search-btn { display: none; }
/* 旧マストヘッド（style.css 内 #home .header-search-wrap）が position:absolute で
   右上に固定していたのを解除し、ナビの右隣に横並びで流し込む */
#home .header-search-wrap {
  position: static;
  top: auto;
  right: auto;
}
#home .header-search-form {
  position: static;
  max-width: 190px;
  opacity: 1;
  visibility: visible;
  /* ベースの .header-search-form はトグル開閉式で pointer-events:none
   * （.is-open で解除）。トップは常時表示なので操作可能に戻す */
  pointer-events: auto;
  overflow: visible;
  border: var(--border-thin) solid var(--color-paper-line);
  border-radius: var(--radius-xs);
  background: var(--color-white);
}

/* ── ヒーロー4セル ── */
.hero-row {
  display: grid;
  grid-template-columns: 0.95fr 1.5fr 0.95fr;
  gap: var(--sp-md);
  align-items: stretch;
  padding-block: var(--sp-md) var(--sp-md);   /* 上をsp-lg→sp-mdへ(ヘッダーとの空き詰め) */
}
.hero-lede { display: flex; flex-direction: column; justify-content: center; }
.hero-lede-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.75vw, 1.55rem);
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  margin: 0 0 var(--sp-sm);
  white-space: nowrap;   /* <br> 指定の3行組を崩さない（各行は短いため溢れない） */
}
/* ブランド語（指名SEO用に h1 内へ内包）— 署名のように静かに */
.hero-lede-brand {
  display: block;
  margin-top: var(--sp-xs);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: 0.02em;
  color: var(--color-logo-brown);
}
.hero-lede-desc { font-size: var(--fs-sm); line-height: 2.1; color: var(--text-body); margin: 0; }

/* 中央列＝特集＋お知らせの縦積み */
.hero-main { display: flex; flex-direction: column; gap: var(--sp-sm); min-width: 0; }
.hero-main .hero-feature { flex: 1; }

/* 特集直下のお知らせ一覧 */
.hero-notice-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); border-bottom: var(--border-thin) solid var(--color-ink); padding-bottom: var(--sp-2xs); }
.hero-notice-title { font-family: var(--font-serif); font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.08em; color: var(--color-ink); margin: 0; }
.hero-notice-more { font-size: var(--fs-xs); font-weight: 700; color: var(--color-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.hero-notice-more:hover { color: var(--color-coral-dark); }
.hero-notice-list { list-style: none; margin: 0; padding: 0; }
.hero-notice-list a { display: flex; align-items: baseline; gap: var(--sp-sm); padding: 8px 0; border-bottom: var(--border-thin) solid var(--color-paper-line); }
.hero-notice-date { font-size: var(--fs-2xs); color: var(--text-muted); flex-shrink: 0; }
.hero-notice-text { font-size: var(--fs-xs); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hero-notice-list a:hover .hero-notice-text { color: var(--color-coral-dark); }

/* 特集＝白カード（背景白＋細罫線） */
.hero-feature {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-paper-line);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: border-color var(--tr), transform var(--tr);
}
.hero-feature:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.hero-feature-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.hero-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.hero-feature:hover .hero-feature-img img { transform: scale(1.03); }
.hero-feature-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--color-sage-deep); color: var(--color-white);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.12em;
  padding: 4px 12px; border-radius: var(--radius-xs);
}
.hero-feature-body { padding: var(--sp-sm) var(--sp-md) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-xs); flex: 1; }
.hero-feature-title { font-family: var(--font-serif); font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 600; line-height: 1.6; letter-spacing: 0.03em; color: var(--color-ink); margin: 0; }
.hero-feature:hover .hero-feature-title { color: var(--color-coral-dark); }
.hero-feature-desc { font-size: var(--fs-sm); line-height: 1.9; color: var(--text-body); margin: 0; }
.hero-feature-meta { display: flex; align-items: center; gap: var(--sp-sm); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-2xs); }
.hero-feature-cat { color: var(--text-sub); }

/* SP専用: 特集直下の新着情報一覧（PCは index-grid の New 列があるため非表示） */
.hero-news { display: none; }
.hero-news-title { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.08em; color: var(--color-ink); border-bottom: var(--border-thin) solid var(--color-ink); padding-bottom: var(--sp-xs); margin: 0 0 var(--sp-2xs); }

/* 右列＝今日のクイズ / 今日の運勢：白カード＋細罫線・影なし */
.hero-side { display: grid; grid-template-rows: auto 1fr; gap: var(--sp-md); }
.hero-quiz, .hero-fortune {
  display: flex; flex-direction: column; gap: var(--sp-sm);
  align-items: center; text-align: center;
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-paper-line);
  border-radius: var(--radius-xs);
  padding: var(--sp-md);
  box-shadow: none;
  transition: border-color var(--tr), transform var(--tr);
}
.hero-quiz:hover, .hero-fortune:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.hero-card-label { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.14em; color: var(--color-ink); }
.hero-quiz-img { width: min(72%, 200px); border-radius: var(--radius-xs); overflow: hidden; aspect-ratio: 16/10; }
.hero-quiz-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-quiz-title { font-family: var(--font-serif); font-size: var(--fs-md); font-weight: 600; line-height: 1.8; letter-spacing: 0.03em; color: var(--color-ink); margin: 0; }
.hero-card-cta {
  margin-top: auto; align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.2em; color: var(--color-white);
  background: var(--color-coral); padding: 12px 18px; border-radius: var(--radius-xs);
  transition: background var(--tr);
}
.hero-quiz:hover .hero-card-cta--quiz { background: var(--color-coral-dark); }
/* 運勢CTA＝アウトライン（クリーム地＋細枠） */
.hero-card-cta--fortune {
  background: var(--color-ivory);
  border: var(--border-thin) solid var(--color-logo-brown);
  color: var(--color-logo-brown);
  letter-spacing: 0.1em;
}
.hero-fortune:hover .hero-card-cta--fortune { background: var(--color-warm-yellow-soft); }
.hero-fortune-card { text-align: center; }
.hero-fortune-card img { width: 128px; height: auto; border-radius: var(--radius-xs); box-shadow: var(--shadow-xs); }

/* ── Popular Tags 帯 ── */
.tags-band {
  display: flex; align-items: center; gap: var(--sp-md);
  flex-wrap: wrap;
  padding-block: var(--sp-sm);
  border-block: var(--border-thin) solid var(--color-ink);
  margin-bottom: var(--sp-lg);
}
.tags-band-label { font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.tags-band-label .en { font-family: var(--font-serif); font-size: var(--fs-md); letter-spacing: 0.06em; margin-right: 6px; }
/* タグはスクロールさせず、改行して全部見せる */
.tags-band-list { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-md); list-style: none; margin: 0; padding: 0; min-width: 0; flex: 1; }
/* ピル→プレーンな「# 〜」テキスト（モック準拠）。tag-pill の塗り/枠を打ち消す */
#home .tags-band .tag-pill {
  background: none; border: none; box-shadow: none;
  padding: 2px 0; border-radius: 0;
  font-size: var(--fs-sm); color: var(--text-sub); white-space: nowrap;
}
#home .tags-band .tag-pill:hover { color: var(--color-coral-dark); background: none; }
#home .tags-band .tag-pill i { font-size: var(--fs-xs); margin-right: 2px; color: var(--text-muted); }
.tags-band-more { margin-left: auto; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.tags-band-more:hover { color: var(--color-coral-dark); }

/* W杯帯：全幅・タグ帯とインデックスの間（紙に馴染む白＋罫線に上書き） */
#home .wc-feature {
  margin-bottom: var(--sp-lg);
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-paper-line);
  border-radius: var(--radius-xs);
  box-shadow: none;
}
#home .wc-feature-label { color: var(--color-ink); }
#home .wc-feature-label i { color: var(--color-sage-deep); }
#home .wc-feature-list a { color: var(--text-body); text-decoration-color: var(--color-paper-line); }
#home .wc-feature-list a .wc-feature-title { color: var(--text-body); }
#home .wc-feature-list a:hover .wc-feature-title { color: var(--color-coral-dark); }

/* New大カードのNEWバッジ/日付を紙面トーンに */
#home .index-col--new .badge-new { background: var(--color-coral); color: var(--color-white); }

/* ── 4カラム誌面インデックス ── */
.index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 新着/Quiz/Column/ランキング＝完全等幅 */
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}
.index-col { display: flex; flex-direction: column; }
.index-head { border-bottom: var(--border-thin) solid var(--color-ink); padding-bottom: var(--sp-xs); margin-bottom: var(--sp-sm); }
.index-head h2 { font-size: var(--fs-base); font-weight: 700; color: var(--color-ink); margin: 0; display: flex; align-items: baseline; gap: 8px; }
.index-head .en { font-family: var(--font-serif); font-size: var(--fs-xl); font-weight: 600; letter-spacing: 0.04em; }
.index-lead { font-size: var(--fs-xs); color: var(--text-sub); margin: 0 0 var(--sp-sm); line-height: 1.8; }
.index-list { display: flex; flex-direction: column; }

/* コンパクト行（サムネ付き）
 * min-height=タイトル2行分の行高。1行タイトルでも行高が揺れず、列内で罫線のリズムが揃う。 */
.idx-row { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) 0; border-bottom: var(--border-thin) solid var(--color-paper-line); }
.idx-row:not(.idx-row--plain) { min-height: 120px; }
.idx-row:hover .idx-row-title { color: var(--color-coral-dark); }
.idx-row-thumb { border-radius: var(--radius-xs); overflow: hidden; aspect-ratio: 3/2; }
.idx-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.idx-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.idx-row-date { font-size: var(--fs-2xs); color: var(--text-muted); }
.idx-row-title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idx-row-cat { font-size: var(--fs-2xs); color: var(--text-sub); }
.idx-row-arrow { color: var(--text-muted); }

/* コンパクト行（サムネ無し・New列）：カテゴリ | 日付 | タイトル | › */
.idx-row--plain { grid-template-columns: auto auto 1fr auto; align-items: center; }
.idx-row--plain .idx-row-cat { min-width: 4.5em; }
.idx-row--plain .idx-row-title { -webkit-line-clamp: 2; }

/* New 大カード（card-mixed の .column-card）を誌面トーンに */
#home .index-col--new .column-card {
  margin-bottom: var(--sp-sm);
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-paper-line);
  border-radius: var(--radius-xs);
  box-shadow: none;
}
#home .index-col--new .column-card:hover { box-shadow: none; border-color: var(--color-ink); }
#home .index-col--new .column-card h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.7; letter-spacing: 0.02em; color: var(--color-ink); }
#home .index-col--new .column-card .btn-more { display: none; }

/* card-mixed の種別バッジ(クイズ/コラム等)。本体スタイルは tag.css にあり
 * トップでは読み込まれず素のテキストで出ていたため、誌面トーンでここに定義 */
#home .tag-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
  font-family: var(--font-jp);
}
#home .tag-type-badge i { font-size: 0.9em; }
#home .tag-type-badge--quiz      { background: rgba(223, 142, 117, 0.14); color: var(--color-coral-dark); }
#home .tag-type-badge--column    { background: var(--color-teal-soft);    color: var(--color-teal); }
#home .tag-type-badge--diagnosis { background: var(--color-sage-soft);    color: var(--color-sage-deep); }
#home .tag-type-badge--news      { background: var(--color-paper);        color: var(--color-ink); }
#home .tag-type-badge--page      { background: var(--color-paper);        color: var(--text-muted); }

/* ランキング（行高120px＝クイズ/コラムのサムネ行と同一。隣の列と罫線が水平に揃う） */
.index-rank { list-style: none; margin: 0; padding: 0; }
.index-rank li a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) 0; border-bottom: var(--border-thin) solid var(--color-paper-line); min-height: 120px; }
.index-rank li a:hover .index-rank-title { color: var(--color-coral-dark); }
.index-rank-num { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-xl); color: var(--color-ink); width: 1.4em; text-align: center; }
.index-rank li:nth-child(1) .index-rank-num { color: var(--color-warm-yellow); }
.index-rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.index-rank-title { font-size: var(--fs-sm); font-weight: 700; line-height: 1.6; color: var(--color-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.index-rank-cat { font-size: var(--fs-2xs); color: var(--text-sub); }

/* margin-top:auto で「〜一覧 →」を全列とも列の下端に揃える（grid stretch で列高は共通） */
.index-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--sp-md); align-self: center; font-size: var(--fs-sm); font-weight: 700; color: var(--color-ink); }
.index-more:hover { color: var(--color-coral-dark); }

/* 性格診断バナー(.diag-banner)は全ページ化に伴い style.css へ移動(2026-07-11) */

/* ── スクロールリビール(トップ限定のSP例外) ──
 * style.css はSPで[data-reveal]を即時表示化している(縦長記事のIO不発対策)が、
 * トップの各セクションはビューポートより短く不発の心配がないため、SPでも
 * ふわっと出す。front.css は style.css の後読みなので上書きが効く。 */
@media (max-width: 767px) {
  #home [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #home [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #home [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── レスポンシブ ── */
@media (max-width: 1199px) {
  .hero-row { grid-template-columns: 1fr 1fr; }
  .hero-lede { grid-column: 1 / -1; }
  .index-grid { grid-template-columns: 1fr 1fr; row-gap: var(--sp-xl); }
}
@media (max-width: 767px) {
  .hero-row { grid-template-columns: 1fr; gap: var(--sp-md); padding-block: var(--sp-md); }
  .hero-side { grid-template-rows: none; }
  /* 1stビュー: 特集の直下に新着情報一覧を表示 */
  .hero-news { display: block; }
  /* New列は hero-news と重複するため非表示。
   * （旧トップのSPカルーセル用 body#home .column-card { flex:0 0 82% } が
   *   card-mixed に誤爆して新着とクイズが重なる不具合の回避も兼ねる） */
  .index-col--new { display: none; }
  .tags-band { gap: var(--sp-sm); }
  /* flex:1(basis 0)のままだとラベル横の狭い縦列に押し込まれて崩れるため、
   * SPはタグ列を全幅に落として改行させる */
  .tags-band-list { flex-basis: 100%; }
  .tags-band-more { margin-left: 0; }
  .index-grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
  /* SPはクイズ/コラムを3件に抑制(PCは5件=ランキングと行数を揃える) */
  .index-col--quiz .index-list .idx-row:nth-child(n+4),
  .index-col--column .index-list .idx-row:nth-child(n+4) { display: none; }
  .idx-row--plain { grid-template-columns: auto 1fr auto; }
  .idx-row--plain .idx-row-cat { display: none; }
}