/**
 * Te Puna Hiro'a — Mana Flow Custom Styles
 * Design: Oceanic Naturalism × Japanese Wabi-Sabi
 * Palette: Deep Ocean Teal × Living Coral × Sand Ivory
 */

/* ─── CSS Custom Properties ─────────────────────────────────
   ⚠️ :root の --tph-* 定義は plugins/tph-core/assets/css/tph-design-tokens.css
   に一元化した（2026-07-13 UIUX Phase 0）。色・角丸・影・フォントの変更は
   必ずそちらで行うこと。このファイルには直値を書かない。
   ─────────────────────────────────────────────────────────── */

/* ─── ポリネシア紋様スロット ─────────────────────────────────
   Masamiさん制作のSVGを assets/patterns/ に置くと有効になる。
   制作サイズ仕様は assets/patterns/README.md 参照。
   ─────────────────────────────────────────────────────────── */

/* セクション区切り帯（ニホ等）: <div class="tph-divider"></div> で使用。
   divider.svg が無い間は透明の余白として振る舞う */
.tph-divider {
  height: 14px;
  margin: 3rem auto;
  background-image: url('../patterns/divider.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
}

/* ページ全面のタパ紋様背景（2026-07-14）
   tph-core の body_class フィルタが対象ページ（mypage / crafts / reotahiti-history）の
   body に tph-tapa-bg を付与する。対象を増やす時は tph-core.php の配列にスラッグ追加。
   成立条件: body に Sand 背景・ラッパー(.wp-site-blocks/main)が透明であること */
body.tph-tapa-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('../patterns/texture-tapa.png') repeat;
  background-size: 1280px auto; /* 紋様を大きめに（繰り返し少なめ）。元タイルは800×800 */
  opacity: 0.08;   /* 2026-07-19 Masamiさん指定で+2%（0.06→0.08） */
  pointer-events: none;
}

/* タパ紙テクスチャ: 背景に敷きたい要素へ class="tph-texture" を追加。
   texture-tapa.svg が無い間は何も表示されない */
.tph-texture { position: relative; }
.tph-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../patterns/texture-tapa.png') repeat;
  background-size: 800px auto; /* 鏡映4枚組タイル（800×800）を等倍表示 */
  opacity: 0.04;
  pointer-events: none;
}
.tph-texture > * { position: relative; }

/* ─── Global ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* 日本語の改行調整（2026-07-17）
   見出し等はBudouX（functions.php）が文節単位に。本文はブラウザの調整機能で
   なるべく自然な折返しに（非対応ブラウザでは無視されるだけで無害） */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* ⚠️ 本文への text-wrap: pretty は2026-07-19廃止。
   Safari(iPhone)のprettyはChromeより攻撃的に行を短く整形するため、
   Aboutページ等の枠内テキストが「左に寄って右に余白」状態になっていた。
   本文は素の折返しが正解（Chromeでは無くてもほぼ差が出ない） */
/* FullCalendar（予約カレンダー）内部は対象外。balanceが効くと狭い画面で
   月タイトル「2026年7月」が1〜2文字ずつ縦積みになりツールバーが崩壊する */
.fc h1, .fc h2, .fc h3, .fc h4, .fc h5, .fc h6,
.fc p, .fc li, .fc dd { text-wrap: initial; }

/* ── Pehe LP（page-id-133）: 最後の購入ボタン後の余白をほぼゼロに
   （2026-07-19 再指定: 2rem残しでもまだ多いとのことで最小化）── */
@media (max-width: 600px) {
  .page-id-133 main { padding-bottom: 0.25rem !important; }
  .page-id-133 .entry-content > .wp-block-group:last-child { padding-bottom: 0 !important; }
  /* ⚠️ ページ本文(DB)内の<style>が body.pehe-lp-page .tph-pehe-cta {…!important}
     を持つため、それより高い詳細度(0,3,0)で上書きする必要がある */
  .page-id-133 .entry-content .tph-pehe-cta {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }
  .page-id-133 .entry-content { margin-bottom: 0 !important; }
}

/* ── 規約系ページ（利用規約/プライバシー/特商法）の体裁修正（2026-07-18）──
   ・本文側 .tph-legal-title はテーマのページ題名h1と二重表示になるため非表示
   ・本文の word-break: auto-phrase（コンテンツ内<style>で指定）は文節折りで
     スマホだと右端ガタつきの原因 → 通常折返しに戻す（見出しh2は対象外のまま） */
.tph-legal-page .tph-legal-title { display: none; }
.tph-legal-page p, .tph-legal-page li, .tph-legal-page dd,
.tph-legal-page th, .tph-legal-page td {
  word-break: normal !important;
}
/* 特商法の表: コンテンツ内<style>がthを表本体より広げ（+32px）、白帯が
   画面右端に突き抜けて左右非対称になる → 幅をセル本来の枠に矯正（2026-07-19） */
@media (max-width: 600px) {
  .tph-legal-page th, .tph-legal-page td {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── ページ題名（固定ページh1）のレスポンシブ対応（2026-07-18）──
   40px固定だと「クラフト（工芸・衣装）」等の長い題名がスマホで2行に折れる。
   clampで画面幅に追従させ1行に収める（PCは従来どおり2.5rem=40px上限）。
   ※ テンプレートがh1にインラインstyle(font-size:2.5rem等)を持つため !important 必須 */
/* 2026-07-19: 7vw→6.2vwに縮小＋nowrapで絶対1行。7vwだと最長の
   「特定商取引法に基づく表記」(12文字)がSafariのフォント幅で2行に折れていた */
h1.wp-block-post-title {
  font-size: clamp(1.4rem, 6.2vw, 2.5rem) !important;
  white-space: nowrap;
}
/* 題名のデザイン性: 下にニホ（鮫の歯）連続帯の区切り線（2026-07-19
   Masamiさん指定でコーラル単色バー→既存のdivider.svgに変更。全ページ共通） */
h1.wp-block-post-title::after {
  content: '';
  display: block;
  /* 2026-07-19 Masamiさん指定: 88pxの短い帯→幅いっぱいに拡大 */
  width: 100%;
  height: 8px;
  background-image: url('../patterns/divider.svg');
  background-repeat: repeat-x;
  background-position: left center;
  background-size: auto 100%;
  margin-top: 0.6rem;
}
@media (max-width: 600px) {
  /* スマホは画面端から端までフルブリード（100vw+左右のはみ出し分を負マージンで相殺） */
  h1.wp-block-post-title::after {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}
@media (max-width: 600px) {
  /* 題名まわりの余白圧縮（題名下32px＋本文上24pxはスマホでは間延び） */
  h1.wp-block-post-title { margin-bottom: 0.75rem !important; }
  /* 題名上も圧縮: main padding-top 64px → 16px（ヘッダー→題名 88px→40px） */
  main.wp-block-group { padding-top: 1rem !important; }
  /* 本文内の表（特商法等）: autoレイアウトだとSafariでth列が広がり
     白背景ブロックからはみ出すため、コンテナ幅に強制フィット（2026-07-19） */
  .entry-content table { table-layout: fixed; width: 100%; }
  .entry-content th, .entry-content td { overflow-wrap: anywhere; }
}
/* BudouXが包んだ要素は文節でだけ折り返す */
budoux-ja { word-break: keep-all; overflow-wrap: anywhere; }
/* 手動改行制御: .tph-nobr で囲んだ塊の中では絶対に折り返さない
   （例: ヒーローの「本物は」「その先に」— 折れるのは塊と塊の間だけ） */
.tph-nobr { display: inline-block; }
/* スマホ専用の明示改行: PCでは1行、480px以下では必ずここで折る */
.tph-sp-br { display: none; }
@media (max-width: 480px) {
  .tph-sp-br { display: inline; }
}
/* 絶対に1行に収める見出し（font-sizeはclamp()で縮小させる前提。BudouX対象外） */
.tph-oneline { white-space: nowrap; }
/* ボタンは常に1行（2026-07-19: Chromeで収まってもSafariはフォント幅が広く
   「プログラム/一覧へ」のように折れるため。ラベルは短文なのでnowrapで安全） */
.wp-block-button__link, .tph-btn, .ori-btn { white-space: nowrap; }

/* ─── トップ「About」セクション（2026-07-18 調整）──────────────
   ・他セクションが全て中央寄せなのにここだけ左寄せで浮いていた → 中央寄せに統一
   ・ヒーロー直下で余白が続くため上下パディングを圧縮（特にスマホ）
   ・写真は背景透過の切り抜きに差し替え予定（枠・影を付けない）
   ※ ブロックのインラインstyleを上書きするため !important が必要 */
/* このブロックは余白なし（写真の上下フェードが余白の役目を果たす） */
.tph-section-about {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}
.tph-section-about .wp-block-buttons { justify-content: center; }

/* ─── 写真の上にテキストを重ねる配置（2026-07-18 サンプル準拠）───────
   PC: 写真は右寄せ・テキストは左半分／スマホ: 写真が上、テキストが肘あたりから重なる */
.tph-about-overlay { position: relative; }
/* 写真（背景レイヤー） */
.tph-about-overlay .tph-about-image {
  margin: 0;
  position: relative;
  z-index: 0;
}
/* テキスト（前面レイヤー） */
.tph-about-text {
  position: relative;
  z-index: 1;
  text-align: center;
}
/* 写真と重なっても読めるよう、文字の背面に背景色(Sand)の帯を敷く（iPad幅で特に効く）
   ⚠️ h2/p 自体を display:inline にすると見出しと本文が同じ行に流れて崩れる。
   ブロックのまま保ち、中のインライン要素（.tph-nobr / budoux-ja）に帯を付ける。
   box-decoration-break:clone で折り返した行にもそれぞれ帯が付く。 */
.tph-about-text h2 { line-height: 1.7; }
.tph-about-text p  { line-height: 2.2; }
.tph-about-text h2 > span,
.tph-about-text p > budoux-ja,
.tph-about-text > p.has-label-font-family {
  background: var(--tph-sand, #F2E8D0);
  box-shadow: 0.4em 0 0 var(--tph-sand, #F2E8D0), -0.4em 0 0 var(--tph-sand, #F2E8D0);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Aboutラベルは英字でBudouX対象外なので、それ自体をインライン化して帯を付ける */
.tph-about-text > p.has-label-font-family { display: inline-block; }
/* 句読点だけが行頭に落ちるのを防ぐ（禁則処理） */
.tph-about-text p > budoux-ja { line-break: strict; }
/* 写真: 背景透過の切り抜き（上下フェード＋全体透過済みPNG）。影は付けない */
.tph-about-image { margin-top: 0; margin-bottom: 0; }
.tph-about-image img {
  display: block;
  height: auto;
  border-radius: 0;
  filter: none;
}

/* ── PC（782px〜）: 写真は右／テキストは左に重ねる ── */
@media (min-width: 782px) {
  .tph-about-overlay {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 620px;
    display: flex;
    align-items: center;
  }
  /* 写真は右だが中央寄りに配置し、テキストと重ねる（2026-07-18 調整） */
  .tph-about-overlay .tph-about-image {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 46%;
  }
  .tph-about-overlay .tph-about-image img {
    width: 100%;
    max-width: 560px;
    margin-left: auto;
  }
  .tph-about-text {
    width: 64%;
    padding: 4rem 1rem 4rem 3rem;
    box-sizing: border-box;
  }
}

/* ── スマホ（〜781px）: 写真が上、テキストは肘あたりから重ねる ── */
@media (max-width: 781px) {
  .tph-about-overlay { display: block; }
  .tph-about-overlay .tph-about-image img {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  .tph-about-text {
    /* 写真の下部（肘のあたり）に食い込ませる */
    margin-top: -22%;
    padding: 0 1.5rem 2.5rem;
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(232, 114, 90, 0.2);
  color: var(--tph-text);
}

img {
  border-radius: 2px;
}

/* ─── Header ────────────────────────────────────────────── */
.tph-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(254, 252, 249, 0.92) !important;
  border-bottom: 1px solid var(--tph-sand-dark);
  transition: box-shadow var(--tph-transition);
}

.tph-header.scrolled {
  box-shadow: var(--tph-shadow-sm);
}

/* Navigation login button */
.tph-nav-login a {
  background: var(--tph-teal);
  color: var(--tph-white) !important;
  padding: 0.4rem 1.2rem;
  border-radius: 2px;
  transition: background var(--tph-transition);
}

.tph-nav-login a:hover {
  background: var(--tph-teal-light);
}

/* ─── プログラムページ ヒーローヘッダー（crafts / reotahiti-history） ── */
.tph-prog-hero {
  position: relative;
  text-align: center;
  overflow: hidden;
}

/* 背景画像（プログラムブロックと同じ assets/images/programs/ を流用） */
.tph-prog-hero--craft,
.tph-prog-hero--language {
  background-size: cover;
  background-position: center;
}
.tph-prog-hero--craft {
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/craft.jpg');
}
.tph-prog-hero--language {
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/langage.jpg');
}
/* 暗いオーバーレイ（白文字の可読性を確保） */
.tph-prog-hero--craft::before,
.tph-prog-hero--language::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 27, 42, 0.5) 0%, rgba(13, 27, 42, 0.68) 100%);
  z-index: 0;
}
/* コンテンツをオーバーレイより前面に */
.tph-prog-hero--craft > *,
.tph-prog-hero--language > * {
  position: relative;
  z-index: 1;
}
/* ─── 和文の改行品質を全ページで底上げ ──────────────────────
 * line-break:strict = 禁則処理（行頭に 、。」 等を置かない）※全ブラウザ対応
 * word-break:auto-phrase = 文節（句）単位で自動改行 ※対応ブラウザ(Chromium系)のみ。
 *   非対応(Safari等)では無視され通常の文字折返し＋禁則にフォールバック
 * 対象: 和文フォントクラス＋本文テキスト（DB本文の段落にも効く） */
/* 禁則処理は全対象に（全ブラウザ対応・副作用なし） */
.has-japanese-font-family,
main p,
main h1, main h2, main h3, main h4,
main li,
.tph-front-page p,
.tph-front-page h1, .tph-front-page h2, .tph-front-page h3 {
  line-break: strict;
}
/* 文節折り(auto-phrase)は見出しのみ (2026-07-18 本文p/liから除外:
   複数行の本文に効くと「こんなことが学べます」枠のように行末が早折れして
   右端スカスカのガタつきになる。見出し1〜2行なら効果的なので維持) */
main h1, main h2, main h3, main h4,
.tph-front-page h1, .tph-front-page h2, .tph-front-page h3 {
  word-break: auto-phrase;
}

/* フレーズ単位の改行制御（縦画面で句の途中で折り返さない）
   隣接spanはJPなのでスペース無しで連結。狭幅では句の切れ目で折り返す */
.tph-phrase {
  display: inline-block;
}

/* 各行の文字数を自動で均等化（見出し・中央寄せコピー）
   text-wrap:balance は Safari 17.5+ / Chrome / Firefox 対応。
   非対応ブラウザは通常折返しにフォールバック（無害） */
main :is(h1, h2, h3, h4),
.tph-front-page :is(h1, h2, h3),
main p.has-text-align-center,
.tph-front-page p.has-text-align-center,
.tph-prog-hero p {
  text-wrap: balance;
}

/* 装飾の短い区切り線（タイトル下） */
.tph-prog-hero-rule {
  width: 48px;
  height: 2px;
  border: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 0.85;
}
/* 本文の最初のブロックとヒーローの間を詰める（白帯防止） */
.tph-program-page > .wp-block-post-content > *:first-child {
  margin-top: 0;
}

/* ─── Hero ──────────────────────────────────────────────── */
.tph-hero {
  position: relative;
}

/* ── ヒーロー背景画像のフレーミング調整 ───────────────────────
   縦画面: 右のダンサーが切れないよう右寄りに表示
   横画面: 少しズームインして迫力を出す
   ※ 右寄せの強さは object-position の % を、ズーム量は scale() を調整 */
.tph-hero > img.wp-block-cover__image-background {
  object-position: center center;
}
/* 横長（PC等） */
@media (min-aspect-ratio: 1/1) {
  .tph-hero > img.wp-block-cover__image-background {
    transform: scale(1.1);
    transform-origin: center center;
  }
}
/* 縦長（スマホ縦・タブレット縦） */
@media (max-aspect-ratio: 1/1) {
  .tph-hero > img.wp-block-cover__image-background {
    object-position: 60% center;
  }
}

/* ヘッダーとメイン（ヒーロー）の間のFSEデフォルト余白を除去 */
.tph-front-page {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.tph-front-page > .tph-hero:first-child {
  margin-top: 0 !important;
}

/* ヒーローの2ボタン（無料会員登録／プログラムを見る）の幅を揃える */
.tph-hero-content .wp-block-button__link {
  min-width: 240px;
  box-sizing: border-box;   /* outlineの枠線分でズレないように */
  text-align: center;
}
@media (max-width: 480px) {
  .tph-hero-content .wp-block-button__link { min-width: 220px; }
}

/* ── ヒーロー 2フェーズ テキストシーケンス ─────────────────
 * フェーズ1: ラベル → H1 → サブ1 が順次登場
 * フェーズ2: H1・サブ1 がフェードアウト後に消え、
 *            サブ2（生きた文化をタヒチから）とボタンが登場
 * 制御は assets/js/hero-sequence.js が担う
 * ─────────────────────────────────────────────────────── */

/* H1以降はJS制御で初期非表示 */
.tph-hero-content > *:not(:first-child) {
  opacity: 0;
  will-change: opacity, transform;
}

/* ラベル（1行目）はCSSで出してそのまま維持 */
.tph-hero-content > *:first-child {
  animation: tphSeqIn 0.5s ease-out forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

/* フェーズ1 登場アニメーション */
@keyframes tphSeqIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* H1専用（より大きく浮き上がる） */
@keyframes tphSeqInH1 {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* フェードアウト */
@keyframes tphSeqOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.tph-seq-in  { animation: tphSeqIn   0.7s ease-out forwards; }
.tph-seq-h1  { animation: tphSeqInH1 2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tph-seq-out { animation: tphSeqOut  0.5s ease-in  forwards; }

/* アクセシビリティ: 動き低減設定の場合は即表示 */
@media (prefers-reduced-motion: reduce) {
  .tph-hero-content > * { opacity: 1 !important; animation: none !important; }
}

.tph-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--tph-white));
  pointer-events: none;
}

/* ─── News Ticker（ページ下部固定スティッキーバー） ────────── */
.tph-news-bar {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  /* 半透明ウォームダーク + blur */
  background: rgba(30, 20, 10, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(196, 136, 58, 0.25);
  padding: 2.2rem 2rem !important;
  /* 読み込み後に下からスライドインして注意を引く（1.2s後に登場） */
  animation: tphNewsBarIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

@keyframes tphNewsBarIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── 左端「NEWS」ラベル（クリック可能の明示・脈打つドット付き） ── */
.tph-news-label {
  flex-shrink: 0;
  position: relative;
  z-index: 3; /* スクロール文字より前面に */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 左は不透明でスクロール文字をマスク → 右へフェードしてバーに馴染ませる
     (2026-07-18) 不透明域52%→75%: 52%だと「NEWS」の文字上でフェードが始まり
     流れるテキストが透けて重なって見えた */
  padding: 0.7rem 2.6rem 0.7rem 0;
  margin-right: 0.3rem;
  background: linear-gradient(to right,
              #241a0c 0%, #241a0c 75%, rgba(36, 26, 12, 0) 100%);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tph-coral);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tph-transition);
}
.tph-news-label:hover {
  color: #f0a58f;
}
.tph-news-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tph-coral);
  flex-shrink: 0;
  animation: tphNewsPulse 1.6s ease-in-out infinite;
}
@keyframes tphNewsPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(200, 80, 58, 0.55); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 7px rgba(200, 80, 58, 0); }
}

/* 動き低減設定では登場アニメ・点滅を止める（ティッカー横スクロールは維持） */
@media (prefers-reduced-motion: reduce) {
  .tph-news-bar { animation: none; }
  .tph-news-dot { animation: none; }
}

/* 暗背景に合わせてテキストカラーを調整 */
.tph-news-bar .tph-news-item {
  color: rgba(242, 232, 208, 0.85);
}
.tph-news-bar .tph-news-item:hover {
  color: var(--tph-coral);
}
.tph-news-bar .tph-news-item time {
  color: rgba(242, 232, 208, 0.45);
}
.tph-news-bar .tph-news-item::after {
  color: rgba(242, 232, 208, 0.3);
}

/* 固定バーにフッターが隠れないよう下余白を確保（フロントpage=home は除外） */
body:not(.home) main {
  padding-bottom: 96px;
}
/* フロントページ: CTA直下の余白は消す。固定ニュースバー分はフッター下に確保 */
/* blockGap(1.5rem) の余白は footer テンプレートパート"ラッパー"の上マージンに付くので、
   そこを除去してCTA→フッターを密着させる（中の .tph-footer ではなくラッパーが要点） */
body.home main.tph-front-page { margin-bottom: 0 !important; }
body.home footer.wp-block-template-part {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
body.home .tph-footer { padding-bottom: 5.5rem; }

/* ── ティッカー外枠（overflow:hidden でマスク） ── */
.tph-news-ticker {
  display: flex;
  align-items: center;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  gap: 0;
}

/* ── スクロールトラック（2倍の内容を translateX(-50%) でループ） ── */
.tph-news-ticker__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: tphTickerScroll 35s linear infinite;
  flex-shrink: 0;
}

/* ホバーで一時停止 */
.tph-news-bar:hover .tph-news-ticker__track {
  animation-play-state: paused;
}

@keyframes tphTickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── 各アイテム ── */
.tph-news-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tph-text);
  font-size: 1rem;
  transition: color var(--tph-transition);
  flex-shrink: 0;
  padding: 0 2.5rem 0 0;
}

/* アイテム間の区切り */
.tph-news-item::after {
  content: '|';
  margin-left: 2.5rem;
  opacity: 0.25;
  font-size: 0.7rem;
}

.tph-news-item:hover {
  color: var(--tph-coral);
}

.tph-news-item time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--tph-text-muted);
  flex-shrink: 0;
}

/* モバイル縦向き */
@media (max-width: 768px) {
  .tph-news-bar {
    padding: 1.2rem 1.2rem !important;
  }
  .tph-news-item {
    font-size: 0.85rem;
  }
}

/* ── 「すべて見る」リンク ── */
.tph-news-ticker__all {
  flex-shrink: 0;
  margin-left: 1.5rem;
  padding: 0.3rem 1rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(242, 232, 208, 0.7);
  border: 1px solid rgba(242, 232, 208, 0.25);
  border-radius: 2px;
  text-decoration: none;
  transition: all var(--tph-transition);
  white-space: nowrap;
}

.tph-news-ticker__all:hover {
  color: rgba(242, 232, 208, 1);
  border-color: rgba(242, 232, 208, 0.5);
}

.tph-no-news {
  text-align: center;
  color: var(--tph-text-muted);
  font-size: 0.85rem;
}

/* ─── お知らせアーカイブ ────────────────────────────────── */
.tph-news-row {
  transition: background var(--tph-transition);
}
.tph-news-row:hover {
  background: rgba(242, 232, 208, 0.4);
}
/* 先頭行の上ボーダー */
.tph-news-archive .wp-block-post:first-child .tph-news-row {
  border-top: 1px solid var(--tph-sand-dark);
}
/* タイトルリンクのスタイル */
.tph-news-archive .wp-block-post-title a {
  text-decoration: none;
  color: var(--tph-text);
  transition: color var(--tph-transition);
}
.tph-news-archive .wp-block-post-title a:hover {
  color: var(--tph-coral);
}

/* ─── Blog（page-blog.html / カードグリッド） ───────────── */
/* 3列グリッド → タブレット2列 → スマホ1列 */
.tph-blog-grid.is-layout-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .tph-blog-grid.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tph-blog-grid.is-layout-grid { grid-template-columns: 1fr; }
}

/* 記事カード */
.tph-blog-card {
  display: flex;
  flex-direction: column;
  transition: transform var(--tph-transition);
}
.tph-blog-card:hover {
  transform: translateY(-4px);
}

/* アイキャッチ */
.tph-blog-card__img img {
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: var(--tph-shadow-sm);
  transition: box-shadow var(--tph-transition);
}
.tph-blog-card:hover .tph-blog-card__img img {
  box-shadow: var(--tph-shadow-md);
}
/* アイキャッチ未設定時のプレースホルダー */
.tph-blog-card__img.wp-block-post-featured-image:empty::before,
.tph-blog-card .wp-block-post-featured-image:not(:has(img)) {
  display: block;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--tph-sand) 0%, var(--tph-sand-dark) 100%);
  border-radius: 4px;
}

/* タイトルリンク */
.tph-blog-card .wp-block-post-title a {
  text-decoration: none;
  color: var(--tph-text);
  transition: color var(--tph-transition);
}
.tph-blog-card .wp-block-post-title a:hover {
  color: var(--tph-coral);
}

/* 抜粋の「続きを読む」リンク */
.tph-blog-card .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tph-coral);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 80, 58, 0.35);
  transition: border-color var(--tph-transition);
}
.tph-blog-card .wp-block-post-excerpt__more-link:hover {
  border-bottom-color: var(--tph-coral);
}

/* ページネーション */
.tph-blog .wp-block-query-pagination {
  gap: 0.5rem;
}
.tph-blog .wp-block-query-pagination a,
.tph-blog .wp-block-query-pagination .current {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--tph-text-muted);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  transition: all var(--tph-transition);
}
.tph-blog .wp-block-query-pagination a:hover {
  color: var(--tph-coral);
}
.tph-blog .wp-block-query-pagination .current {
  color: var(--tph-white);
  background: var(--tph-teal);
}

/* ─── Program Cards ─────────────────────────────────────── */
.tph-program-card {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 2px 14px rgba(10,61,92,0.08);
  transition: transform var(--tph-transition), box-shadow var(--tph-transition);
}

.tph-program-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tph-coral);
}

.tph-program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(10,61,92,0.13);
}

.tph-program-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(232,114,90,0.1);
  color: var(--tph-coral);
  flex-shrink: 0;
  transition: transform var(--tph-transition), background var(--tph-transition);
}

.tph-program-card:hover .tph-program-card__icon-wrap {
  transform: scale(1.1);
}

.tph-program-card__footer {
  margin-top: auto;
  padding-top: 1.5rem;
}

.tph-program-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tph-coral);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,114,90,0.35);
  padding-bottom: 1px;
  transition: border-color var(--tph-transition), gap var(--tph-transition);
}

.tph-program-card__link:hover {
  border-bottom-color: var(--tph-coral);
  gap: 0.55rem;
}

/* Dance */
.tph-prog-dance::before { background: var(--tph-coral); }
.tph-prog-dance .tph-program-card__icon-wrap { background: rgba(232,114,90,0.1); color: var(--tph-coral); }
.tph-prog-dance:hover .tph-program-card__icon-wrap { background: rgba(232,114,90,0.18); }
.tph-prog-dance .tph-program-card__link { color: var(--tph-coral); border-bottom-color: rgba(232,114,90,0.35); }
.tph-prog-dance .tph-program-card__link:hover { border-bottom-color: var(--tph-coral); }

/* Language */
.tph-prog-language::before { background: var(--tph-teal); }
.tph-prog-language .tph-program-card__icon-wrap { background: rgba(10,61,92,0.08); color: var(--tph-teal); }
.tph-prog-language:hover .tph-program-card__icon-wrap { background: rgba(10,61,92,0.15); }
.tph-prog-language .tph-program-card__link { color: var(--tph-teal); border-bottom-color: rgba(10,61,92,0.25); }
.tph-prog-language .tph-program-card__link:hover { border-bottom-color: var(--tph-teal); }

/* Music */
.tph-prog-music::before { background: var(--tph-amber); }
.tph-prog-music .tph-program-card__icon-wrap { background: rgba(196,136,58,0.1); color: var(--tph-amber); }
.tph-prog-music:hover .tph-program-card__icon-wrap { background: rgba(196,136,58,0.18); }
.tph-prog-music .tph-program-card__link { color: var(--tph-amber); border-bottom-color: rgba(196,136,58,0.3); }
.tph-prog-music .tph-program-card__link:hover { border-bottom-color: var(--tph-amber); }

/* Craft */
.tph-prog-craft::before { background: var(--tph-teal-light); }
.tph-prog-craft .tph-program-card__icon-wrap { background: rgba(26,90,122,0.08); color: var(--tph-teal-light); }
.tph-prog-craft:hover .tph-program-card__icon-wrap { background: rgba(26,90,122,0.15); }
.tph-prog-craft .tph-program-card__link { color: var(--tph-teal-light); border-bottom-color: rgba(26,90,122,0.25); }
.tph-prog-craft .tph-program-card__link:hover { border-bottom-color: var(--tph-teal-light); }

/* Equal-height columns */
.tph-section-programs .wp-block-columns { align-items: stretch; }
.tph-section-programs .wp-block-column { display: flex; flex-direction: column; }
.tph-section-programs .wp-block-column > .wp-block-group { flex: 1; }

/* ─── Event Cards（案A: ミニマル・ライン区切り） ─────────── */
/*
 * 通常枠: 区切り線のみ、背景なし、ミニマル
 * スペシャル枠（is-special）: 左カラーライン + 薄い背景 + バッジ
 * 種別クラス: tph-event-type--basic / --choreo / --event / --culture
 */

.tph-events-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--tph-sand-dark);
}

/* ── 通常カード ── */
.tph-event-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 1.75rem;
  align-items: center;
  padding: 1.4rem 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--tph-sand-dark);
  border-left: 3px solid transparent; /* スペシャル枠と幅を揃えるための透明ライン */
  padding-left: 0;
  position: relative;
  transition: background var(--tph-transition);
}

.tph-event-card:hover {
  background: rgba(245, 240, 232, 0.5);
  box-shadow: none;
  transform: none;
}

/* ── 日付ブロック ── */
.tph-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  color: var(--tph-text);
  border-radius: 0;
  padding: 0;
  min-width: auto;
  border-right: 1px solid var(--tph-sand-dark);
  padding-right: 1.25rem;
}

.tph-event-day {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--tph-text);
  order: 1;
}

.tph-event-month {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--tph-text-muted);
  order: 2;
}

.tph-event-wday {
  display: block;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--tph-text-muted);
  order: 3;
  margin-top: 0.2rem;
}

/* ── イベント情報 ── */
.tph-event-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tph-event-info h4 {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tph-text);
}

.tph-event-info h4 a {
  text-decoration: none;
  color: var(--tph-text);
  transition: color var(--tph-transition);
}

.tph-event-info h4 a:hover {
  color: var(--tph-coral);
}

.tph-event-time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--tph-text-muted);
}

.tph-event-type {
  display: inline-block;
  background: transparent;
  color: var(--tph-text-muted);
  border-radius: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
}

.tph-event-instructor {
  font-size: 0.78rem;
  color: var(--tph-text-muted);
}

.tph-event-location,
.tph-event-price {
  font-size: 0.8rem;
  color: var(--tph-text-muted);
}

/* ── スペシャルイベント共通 ── */
.tph-event-card.is-special {
  border-left: 3px solid var(--tph-coral);
  padding-left: 1.25rem;
  background: rgba(232, 114, 90, 0.03);
}

.tph-event-card.is-special:hover {
  background: rgba(232, 114, 90, 0.07);
}

.tph-event-card.is-special .tph-event-info h4 {
  color: var(--tph-coral-dark);
}

/* スペシャルバッジ */
.tph-event-special-badge {
  position: absolute;
  top: 1rem;
  right: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tph-coral);
  background: rgba(232, 114, 90, 0.1);
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
  grid-column: 1 / -1; /* grid内では全幅に広がらないよう absolute で対処 */
}

/* カルチャー系はティール */
.tph-event-card.tph-event-type--culture {
  border-left-color: var(--tph-teal);
  background: rgba(10, 61, 92, 0.03);
}

.tph-event-card.tph-event-type--culture:hover {
  background: rgba(10, 61, 92, 0.06);
}

.tph-event-card.tph-event-type--culture .tph-event-info h4 {
  color: var(--tph-teal);
}

.tph-event-card.tph-event-type--culture .tph-event-special-badge {
  color: var(--tph-teal);
  background: rgba(10, 61, 92, 0.08);
}

/* ─── Video Cards ───────────────────────────────────────── */
.tph-video-card,
.tph-archive-card {
  transition: transform var(--tph-transition), box-shadow var(--tph-transition);
  box-shadow: var(--tph-shadow-sm);
  overflow: hidden;
}

.tph-video-card:hover,
.tph-archive-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tph-shadow-md);
}

/* ─── Video Player ──────────────────────────────────────── */
.tph-video-player,
.tph-video-player-wrapper {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--tph-shadow-lg);
}

.tph-bunny-player {
  position: relative;
  padding-top: 56.25%;
  background: var(--tph-navy);
  border-radius: 4px;
  overflow: hidden;
}

.tph-bunny-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ─── Page Header (dark) ────────────────────────────────── */
.tph-page-header {
  position: relative;
}

.tph-page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--tph-sand));
  pointer-events: none;
}

/* ─── CTA Section ───────────────────────────────────────── */
.tph-cta-section {
  position: relative;
  /* 背景画像（assets/images/cta-bg.jpg） */
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/cta-bg.jpg');
  background-size: cover;
  background-position: center 75%;
}
/* 既存のティール60%オーバーレイ → 画像が見える暗めグラデーションに置換（白文字の可読性確保） */
.tph-cta-section > .wp-block-cover__background {
  background: linear-gradient(160deg, rgba(13,27,42,0.40) 0%, rgba(13,27,42,0.62) 100%) !important;
  opacity: 1 !important;
}

/* ─── Footer ────────────────────────────────────────────── */
.tph-footer a {
  transition: color var(--tph-transition);
}

.tph-footer a:hover {
  color: var(--tph-coral) !important;
}

/* ─── MemberPress Integration ───────────────────────────── */
.mepr-login-form,
.mepr-signup-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--tph-white);
  border-radius: 2px;
  box-shadow: var(--tph-shadow-md);
}

.mepr-login-form label,
.mepr-signup-form label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tph-text-muted);
}

.mepr-login-form input[type="text"],
.mepr-login-form input[type="password"],
.mepr-login-form input[type="email"],
.mepr-signup-form input[type="text"],
.mepr-signup-form input[type="password"],
.mepr-signup-form input[type="email"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tph-sand-dark);
  border-radius: 2px;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.95rem;
  transition: border-color var(--tph-transition);
}

.mepr-login-form input:focus,
.mepr-signup-form input:focus {
  border-color: var(--tph-teal);
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 61, 92, 0.1);
}

.mepr-login-form input[type="submit"],
.mepr-signup-form input[type="submit"] {
  background: var(--tph-coral);
  color: white;
  border: none;
  padding: 0.9rem 2rem;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--tph-transition);
  width: 100%;
}

.mepr-login-form input[type="submit"]:hover,
.mepr-signup-form input[type="submit"]:hover {
  background: var(--tph-coral-dark);
}

/* ─── Animations ────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tph-animate-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* ─── Mobile Navigation Overlay ────────────────────────── */
/* ハンバーガーメニューを全画面表示にする                        */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  background: rgba(254, 252, 249, 0.97) !important;
  backdrop-filter: blur(12px);
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  width: 100% !important;
  max-width: 400px !important;
  padding: 2rem !important;
}

/* メニュー項目のスタイル */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
  text-align: center !important;
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--tph-sand-dark) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item:last-child {
  border-bottom: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
  font-size: 1.1rem !important;
  letter-spacing: 0.1em !important;
  color: var(--tph-text) !important;
}

/* 閉じるボタン */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.5rem !important;
}

/* モバイルメニュー内のログインボタン: 白文字を維持 */
.wp-block-navigation__responsive-container.is-menu-open
.tph-nav-login a {
  color: var(--tph-white) !important;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .tph-event-card {
    grid-template-columns: 56px 1fr;
    gap: 0 1.25rem;
  }

  .tph-event-day {
    font-size: 1.8rem;
  }

  .tph-event-special-badge {
    font-size: 0.5rem;
    padding: 0.15rem 0.5rem;
  }

  .tph-news-ticker {
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .tph-hero h1 {
    font-size: 2rem !important;
  }
}

/* ─── プログラムカード レスポンシブ ────────────────────────── */
/* タブレット：4列 → 2×2グリッド */
@media (max-width: 768px) {
  .tph-section-programs .wp-block-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .tph-section-programs .wp-block-column {
    width: 100% !important;
  }
}

/* スマホ：2列 → 1列 */
@media (max-width: 480px) {
  .tph-section-programs .wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ─── Programs Section — Slideshow Background ───────────── */
/*
 * 4カテゴリの背景画像/グラデーションが5秒ごとにフェードトランジション。
 * 画像未設定時はグラデーションがプレースホルダーとして表示される。
 * 画像を追加する場合は assets/images/programs/ に配置して
 * 各クラスの background-image を有効にすること。
 */

.tph-section-programs {
  position: relative;
  overflow: hidden;
}

/* ── スライドコンテナ ── */
/* FSEのconstrained layoutで1200px制限されるため、
   left:50% + translateX(-50%) + width:100vw で全幅に強制突破する */
.tph-programs-slideshow-bg {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 100% !important;
  max-width: none !important;
  z-index: 0;
  pointer-events: none;
  margin: 0 !important;
}

/* ── 各スライド（共通） ── */
.tph-programs-slideshow-bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}

.tph-programs-slideshow-bg__slide.is-active {
  opacity: 1;
}

/* ── カテゴリ別グラデーション（画像がない間のプレースホルダー） ── */
.tph-slide-dance {
  background-color: #2a0f15;
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/dance.jpg');
  background-size: cover;
  background-position: center;
}

.tph-slide-language {
  background-color: #0a2035;
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/langage.jpg');
  background-size: cover;
  background-position: center;
}

.tph-slide-music {
  background-color: #3d2208;
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/music.jpg');
  background-size: cover;
  background-position: center;
}

.tph-slide-crafts {
  /* ラウハラ（パンダナス葉の編み） */
  background-color: #2a1e08;
  background-image: url('/wp-content/themes/tepunahiroa-manaflow/assets/images/programs/craft.jpg');
  background-size: cover;
  background-position: center;
}

/* ── 白オーバーレイ（カードの読みやすさを確保） ── */
.tph-programs-slideshow-bg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(250, 246, 238, 0.72);
  z-index: 5;
}

/* ── コンテンツをスライドの上に ── */
.tph-section-programs > .wp-block-group,
.tph-section-programs > .wp-block-columns {
  position: relative;
  z-index: 10;
}

/* ─── トップページ: ヘッダー直下の余白除去（2026-07-23）──────────
   .tph-front-page に root padding 由来の padding-top:16px が入り、
   サンド色の body 背景が「ベージュの帯」として覗いていた。
   ヒーローはヘッダー直下にぴたっと付けたいので0にする（PCは元々0）。
   ⚠️ 16pxは「.tph-front-page(0,1,0)」より高い詳細度の!importantルールが付けている
   （スマホのみ）。同詳細度では勝てないので main を足して(0,1,1)に上げる（本番で実測確認）。 */
main.tph-front-page {
  padding-top: 0 !important;
}

/* ─── スマホメニュー: NEWSバーとの重なり回避（2026-07-23）──────────
   メニュー(全画面overlay)を開いている間は最下部の「ログイン」ボタンが
   画面下固定のNEWSバー(z:200)に被って押しにくい → 開いている間はバーを隠す。
   併せてメニュー項目の縦余白を少し詰めてボタン位置を上げる。 */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .tph-news-bar {
  display: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item {
  padding: 0.45rem 0 !important;
}

/* ─── Print Styles ──────────────────────────────────────── */
@media print {
  .tph-header,
  .tph-footer,
  .tph-cta-section,
  .tph-news-bar {
    display: none;
  }
}