/* EX REDESiGN — assets/css/sections.css
 * Front-page hero / sections / feature cards / CTA / notice list / alternating-section bg / back-to-top button.
 *
 * Selectors: .ex-back-to-top, .ex-cta, .ex-cta-title, .ex-eyebrow, .ex-feature-card, .ex-feature-number, .ex-feature-title, .ex-hero, .ex-hero-center, .ex-hero-lead, .ex-hero-title, .ex-notice, .ex-notice-date, .ex-notice-item, .ex-notice-list, .ex-notice-tag, .ex-notice-title, .ex-section, … +5
 * Variables consumed: --color-bg-base, --color-border-subtle, --color-surface, --color-surface-raised, --color-text-muted, --color-text-primary, --color-text-secondary, …
 *
 * Sections (search anchors — grep `@section <name>`):
 *   @section back-to-top-button         L16-L67  Back to Top button
 *   @section feature-card               L68-L72  Feature card
 *   @section cta                        L73-L77  CTA
 *   @section design-tokens-unified-section-system L78-L86  Design Tokens (unified section system)
 *   @section unified-section-system     L87-L118  Unified Section System
 *   @section alternating-backgrounds-toggleable L120-L142  Alternating Backgrounds (toggleable)
 *   @section notice-list                L143-L217  Notice list (homepage announcements)
 */

/* ── Back to Top button ──
   Rendered via wp_footer hook from inc/dynamic.php (when the show_back_to_top
   option is ON). The .is-visible class is toggled by the inline JS based on
   window.scrollY — the button fades in after the user scrolls a bit. */
.ex-back-to-top {
  position: fixed;
  bottom: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 200;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, visibility 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.ex-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.ex-back-to-top a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: var(--color-text-primary);
  color: var(--color-surface) !important;
  font-size: var(--exr-fs-sm);
  text-decoration: none;
  box-shadow: var(--wp--preset--shadow--card-emphasis);
  transition: background-color 200ms ease, transform 200ms ease;
  line-height: 1;
}
.ex-back-to-top a:hover {
  background: var(--color-text-secondary);
  transform: translateY(-2px);
}

/* ── Hero / Section common ── */

/* .exr-eyebrow / .ex-section-eyebrow: 同期パターンアイブロウと、セクション見出しインラインアイブロウを
 * 一貫した見た目に揃えるための共通スタイル。
 *   ・同期パターン (オーバーライド) は re-render を避けるためクラスだけ使う。
 *   ・セクション見出しは inline style も使うが、同じ見た目になるようクラスも同仕様。
 * デザイン変更はこのブロックを編集 → 両クラスに一括反映。
 */
.exr-eyebrow,
.ex-section-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  /* v1.4.69: text-transform: uppercase 廃止 (GREViA 等ブランド名の "i" 保護)。 */
  color: var(--color-text-muted);
  font-weight: 400;
  margin-block: 0 0.5rem;
}

/* ============================================================
 * Eyebrow → 次要素の gap を統一 (12px = 0.75rem)
 *   - section-head では WP block-gap (約 24px) が動くため、
 *     次兄弟の margin-block-start を0にして eyebrow 自身の余白を使う
 *   - hero context では block-gap が効かないため eyebrow の margin がそのまま反映
 * ========================================================= */
/* ヒーロー内では .exr-hero-slide__content p ルール (0,2,0) がデフォルトで効くため、
   同等 specificity かつ後に書かれたルールとして .exr-hero-slide__content .exr-eyebrow を追加して勝たせる。 */
.exr-hero-slide__content .exr-eyebrow,
.exr-eyebrow,
.ex-section-eyebrow {
  margin-block-start: 0 !important;
  margin-block-end: 0.75rem !important;
}
.exr-eyebrow + *,
.ex-section-eyebrow + * {
  margin-block-start: 0 !important;
}

.exr-eyebrow--center {
  text-align: center;
}
.exr-eyebrow--right {
  text-align: right;
}

/* margin-block のみ使用 (margin ショートハンドは WP の is-layout-constrained
   が適用する margin-inline: auto をオーバーライドして中央寄せを破壊するため NG)
   同様のパターンを他の CSS でも避けること — margin-block / margin-inline を個別指定。 */
/* ヒーロー見出しのデフォルト (= 4xl / line-height 1.1 / margin-block 0 1.25rem)。
   block 側で別 preset (= has-{slug}-font-size) や inline style を選んだ時に上書きできるよう !important なし。 3 層 cascade 哲学維持。 */
.ex-hero-title { font-size: var(--exr-fs-4xl); letter-spacing: var(--exr-ls-4xl, -0.025em); line-height: var(--exr-lh-4xl, 1.1); margin-block: 0 1.25rem; }
/* スマホ (≤600px) では 4xl は大きすぎるため 2xl にスケールダウン。
   タイポグラフィスケールシステムと連動。 block 側上書きを尊重するため !important なし。 */
@media (max-width: 600px) {
  .ex-hero-title {
    font-size: var(--exr-fs-2xl);
    letter-spacing: var(--exr-ls-2xl, -0.015em);
    line-height: var(--exr-lh-2xl, 1.3);
  }
}
.ex-hero-lead { font-size: var(--exr-fs-base); line-height: 1.75; color: var(--color-text-secondary); }
.ex-hero-center .ex-hero-lead { margin-inline: auto; }
/* .ex-section-title / .ex-section-link: インライン属性で表現 (Phase 2.3 で移行済) */

/* ── Feature card ── */
/* .ex-feature-card: 背景・ボーダー・角丸はパターン attribute で表現。ここでは overflow クリップ (画像 negative margin の clip) と height: 100% (グリッド カード揃え) のみ保持。 */
.ex-feature-card { height: 100%; overflow: hidden; }

/* ── Feature card 内の sibling 間スペース (universal) ──
   WP コアの `.wp-block-group.is-layout-flow > * + *` (block-gap = 24px) は
   カード内の要素並び (image / title / date / excerpt / paragraph / buttons …) に対し
   間延びして見える。全 sibling を 0.375rem に詰めて密度を上げる。
   first-child は 0 (画像の場合は pages.css の edge-bleed 規則が specificity で勝つ)。
   h3 タイトルは inline margin-top:0 を持つため、見た目の gap は figure.margin-bottom が支配。
   .wp-block-group.ex-feature-card.is-layout-flow (0,3,0) で WP コア (0,2,0) を上回らせる。 */
.wp-block-group.ex-feature-card.is-layout-flow > * {
	margin-block-start: 0.375rem;
}
.wp-block-group.ex-feature-card.is-layout-flow > :first-child {
	margin-block-start: 0;
}

/* date div の line-box 圧縮 ―― small text を巨大 line-box の中央に配置するのを避ける。
   font-size は base を継承していて line-box が ~26px に膨らみ、xs テキストの上下に
   ~7px ずつの leading が出るので、div ごと xs/1.2 に詰めて line-box を ~14px にする。 */
.ex-feature-card.is-layout-flow > .wp-block-post-date,
.ex-feature-card.is-layout-flow > .ex-card-date {
	font-size: var(--exr-fs-xs);
	line-height: 1.2;
}

/* サムネイル画像：カード上部を縁まで見せるよう、padding を越えて三辺を外側に伸ばす。
   .ex-feature-card の overflow:hidden と border-radius:8px により、
   画像の上角もカードに揃って丸くキリップされる。 */

/* ── CTA ── */

/* ── Design Tokens (unified section system) ── */
:root {
  --exr-section-y: 5rem;
  --exr-hero-y: 7rem;
  --exr-section-x: 2rem;
  --exr-section-head-gap: 2.5rem;
}

/* ── Unified Section System ──
   左右余白は WP コアの .has-global-padding (alignfull + constrained に自動付与) に任せる。
   theme.json の styles.spacing.padding.{left,right} = var(--exr-gutter, 2rem) が
   --wp--style--root--padding-{left,right} として出力され、スマホ 16px / タブ 24px / PC 32px と連動。
   以前は .ex-section に padding-inline:0 を明示していたが、 WP コアは
   .has-global-padding > .alignfull に自動で negative margin を付与して全幅化するため
   その見出しは不要。付けていたためスマホでコンテナ余白が取れない不具合の口だった。 */
.ex-hero, .ex-section, .ex-cta {
  padding-top: var(--exr-section-y);
  padding-bottom: var(--exr-section-y);
}

/* 防御: セクション中身が何らかの原因でビューポートを越えたときも右に飛び出さずクリップ。
   スマホ上の「右にてらてら」防止。グリッドアイテムに min-width: 0 を明示して
   minmax(0, 1fr) の 0 を確実に効かせ、画像の内定 width がトラックを押し広げるのを阫ぐ。 */
.ex-section,
.exr-main {
  overflow-x: clip !important;
  max-width: 100% !important;
}
.ex-section .wp-block-post-template,
.ex-section .wp-block-post-template > * {
  min-width: 0;
  max-width: 100%;
}
.ex-section .wp-block-post-template img {
  max-width: 100%;
  height: auto;
}

/* ── CTA セクション背景（JavaScript パララックス） ──
   トップページのカバー画像と同じ cover-default.webp を .ex-cta__bg-layer という
   絶対位置の子要素に背景として適用し、JavaScript (assets/js/parallax.js) で
   transform: translate3d() を動的に計算してパララックスを実現する。
   iOS 含めどのようなデバイスでも安定して動作。 */
/* CTA セクション内の「JOIN US」（.ex-eyebrow）はデフォルトだと薄い muted 色で背景画像に溶けるため、
   ここではテーマの主テキスト色を使ってしっかり可読にする。 */
/* @section cta-parallax — .ex-cta のスクロール連動パララックス背景の実体。
 *   assets/js/parallax.js が .ex-cta の先頭に空の .ex-cta__bg-layer を挿入し、
 *   transform: translate3d() で上下に動かす（CSS background-attachment:fixed の代替）。
 *   背景画像は --ex-cta-bg（既定 assets/cover-default.webp）を上書きすれば差し替え可能。
 *   背景欠け対策として .ex-cta 自体にも暗色フォールバックを敷く。 */
.ex-cta {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: #111827;
}
.ex-cta__bg-layer {
  position: absolute;
  left: 0;
  right: 0;
  /* v1.7.10+: 親 .ex-cta が layout:constrained のとき、 WP の
     「.is-layout-constrained > * に max-width:コンテンツ幅」 ルールがこの背景レイヤーにも効き、
     画像が中央のコンテンツ幅 (例 760px) に絞られてしまう。 背景は全幅で見せるため max-width を解除。 */
  max-width: none;
  margin: 0;
  /* v1.5.13+: -20% → -50% に拡張。 SPEED 0.3 のスクロール offset 範囲 (= 最大 ±vh/2 × 0.3 = ~255px)
     を bg-layer 上下拡張で覆い切るため。 20% (= 140px 余裕) だと section が画面端に来た時に
     bg-layer がはみ出して section の上下端に背景が描画されない隙間が露出する。 */
  top: -50%;
  bottom: -50%;
  z-index: 0;
  background-image: var(--ex-cta-bg, url("../cover-default.webp"));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}
.ex-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 背景オーバーレイ。 色 + 不透明度は設定タブ(レイアウト)で変更でき、
     inc/dynamic-css.php が --exr-cta-overlay を出力する。 既定は濃紺 55%。 */
  background-color: var(--exr-cta-overlay, rgba(17, 24, 39, 0.55));
  pointer-events: none;
}
.ex-cta > :not(.ex-cta__bg-layer) {
  position: relative;
  z-index: 2;
}

.ex-hero { padding-top: var(--exr-hero-y); padding-bottom: var(--exr-hero-y); }
/* .ex-section-inner / .ex-section-head: インライン属性で表現 (Phase 2.3 で移行済)
 * - .ex-section-inner    → group { layout.type:constrained, style.spacing.padding.left/right:var(--exr-section-x) }
 * - .ex-section-head      → group { layout.type:flex, justifyContent:space-between, flexWrap:wrap, style.spacing.margin.bottom:var(--exr-section-head-gap) }
 */

@media (max-width: 600px) {
  :root { --exr-section-y: 3rem; --exr-hero-y: 4rem; --exr-section-x: 1.25rem; --exr-section-head-gap: 1.75rem; }
}

/* ============================================================
 * @section alt-bg
 *   トップタブの「セクション背景の交互切替」設定 (body.exr-alt-bg) を home ページ限定で適用。
 *
 *   設計上の考慮点:
 *   1. .exr-main は他テンプレートと同じ「カード visual」 (constrained + padding + radius) を持つが、
 *      alt-bg は「サイトを横切る色帯」の演出 — 両者は視覚的に両立しない。
 *      alt-bg が ON のときは .exr-main を【透明 + フル幅 + padding 0】にして、
 *      セクションが viewport 端まで伸びるようにする。
 *
 *   2. .wp-block-post-content はデフォルトで constrained-layout (content-size 680px) に cap され、
 *      alignfull の break-out も root padding 分しか効かない — これが「背景が本文幅だけ」の原因。
 *      max-width を解除してサイト全幅にする。
 *
 *   3. WP の block-gap (セクション間スペース) は、フル幅色帯スタイルとは不適合 — 0 にする。
 *      セクション自身が內部 padding で上下の間隔を管理する。
 *
 *   4. 交互色は --exr-section-alt-odd / -even (トップタブのカラーピッカー) を使う。
 *      デフォルトは bg-base vs surface (サイト背景とカード色の組み合わせ)。
 *      セレクタは * (全子要素) に適用し CTA / template-part / group / section すべて参加。
 * ========================================================= */

/* (1) .exr-main を透明・フル幅・装飾ゼロに */
body.home.exr-alt-bg .exr-main {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
}

/* (2) .wp-block-post-content をフル幅に拡張 (constrained の cap を解除) */
body.home.exr-alt-bg .exr-main > .wp-block-post-content {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* (3) 直下子要素を viewport 幅させる + block-gap を 0 に */
body.home.exr-alt-bg .exr-main > .wp-block-post-content > * {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  margin-block: 0 !important;
}

/* (4) 奇数・偶数の交互背景色 (デフォルト: bg-base vs surface)
   ─ .ex-cta は除外 ─
   .ex-cta は固有の暗色 base (#111827) + bg-layer によるパララクス背景画像を持つため、
   alt-bg cycle の背景色上書きと両立しない。 :not(.ex-cta) で alt-bg 対象から外し、
   .ex-cta は自身の background-color と bg-layer に基づく描画を維持させる。 */
body.home.exr-alt-bg .exr-main > .wp-block-post-content > *:not(.ex-cta):nth-child(odd) {
  background-color: var(--exr-section-alt-odd, var(--color-bg-base));
}
body.home.exr-alt-bg .exr-main > .wp-block-post-content > *:not(.ex-cta):nth-child(even) {
  background-color: var(--exr-section-alt-even, var(--color-surface));
}/* CTA: previously had a forced surface-raised override here, but with the
   alt-bg pattern it created a doubled-background look (odd-row gray + the
   forced gray were near-identical). Now the CTA just follows the natural
   alt-bg cycle along with the other sections. */

/* ── LATEST セクションのグリッド ──
   parts/latest-posts.html の wp:post-template columnCount と、
   inc/dynamic-css.php が出力する CSS 変数 --exr-latest-cols（テーマ設定 →
   トップタブの front_latest_columns）の両方でカラム数を制御。
   タブレット以下（≦900px）は 2 列、モバイル（≦600px）は 1 列にフォールバック。 */
.ex-section .wp-block-post-template.is-layout-grid {
  grid-template-columns: repeat(var(--exr-latest-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .ex-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ex-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Notice list (homepage announcements) ──
   Editorial-style notice rows: date / tag-pill / title in a 3-column grid.
   Each row uses a hairline bottom border; hover applies a subtle underline
   sweep on the title. Tag color variants (.is-tag-release, .is-tag-update,
   .is-tag-maintenance) provide semantic accent without overpowering the row. */
.ex-notice-list {
  display: grid;
  grid-template-columns: 96px auto 1fr;
  column-gap: 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
}
/* core/query block (ex-notice-list) は 【クエリー div】 > 【post-template ul】 > 【li】 > 【ex-notice-item】
   というネストを出力するため、中間の ul と li を display: contents で透明化して
   .ex-notice-item を .ex-notice-list の直接グリッド子にする。 */
.ex-notice-list .wp-block-post-template {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ex-notice-list .wp-block-post-template > li {
  display: contents;
}
/* Each item uses subgrid so all rows share the same 3 column tracks. The tag
   column auto-sizes to the widest tag across all rows, then the pill stretches
   to fill that shared width via .ex-notice-tag {width:100%} below. Result:
   all tag pills are identical width = widest tag, and titles align flush. */
.ex-notice-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color 200ms ease;
}
.ex-notice-item > * { margin: 0 !important; }
.ex-notice-date {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.ex-notice-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border-subtle);
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  white-space: nowrap;
}
/* タグの色バリエーションは inc/dynamic-css.php が EX REDESiGN テーマ設定 →
   お知らせタブの notice_tags 配列から動的に生成するため、ここでは個別
   ルールを持たない（.ex-notice-tag.is-tag-{slug} の border/color/background）。 */
.ex-notice-title {
  font-size: var(--exr-fs-sm);
  line-height: 1.6;
  font-weight: 500;
  color: var(--color-text-primary);
}
.ex-notice-title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 250ms ease;
}
.ex-notice-title a:hover { background-size: 100% 1px; }
.ex-notice-item:hover .ex-notice-date { color: var(--color-text-secondary); }

@media (max-width: 600px) {
  /* Mobile: drop the parent grid, each item becomes its own 2-col / 2-row grid. */
  .ex-notice-list {
    display: flex;
    flex-direction: column;
  }
  .ex-notice-item {
    grid-column: auto;
    grid-template-columns: auto 1fr;
    grid-template-areas: "date tag" "title title";
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    padding: 1rem 0;
  }
  .ex-notice-date  { grid-area: date; }
  .ex-notice-tag   { grid-area: tag; width: fit-content; }
  .ex-notice-title { grid-area: title; font-size: var(--exr-fs-sm); }
}

/* ── COMPANY セクション（会社名・住所・営業時間） ── */

/* 営業時間の表
   テーマ哲学: テーブル幅は親 (Column / Group) に追従。テーマ側で max-width を強制しない。 */
.ex-hours-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-border-subtle);
  font-size: var(--exr-fs-sm);
  margin: 0;
}
.ex-hours-table th,
.ex-hours-table td {
  border: 1px solid var(--color-border-subtle);
  padding: 0.6rem 0.5rem;
  text-align: center;
  vertical-align: middle;
  font-weight: 400;
  color: var(--color-text-primary);
}
.ex-hours-table thead th {
  background: var(--color-text-primary);
  color: var(--color-surface, var(--wp--preset--color--surface));
  font-weight: 500;
  letter-spacing: 0.04em;
  border-color: var(--color-text-primary);
}
.ex-hours-table tbody tr > td:first-child {
  background: var(--color-surface-raised);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  padding: 0.6rem 0.85rem;
}
.ex-hours-table .is-closed {
  color: var(--color-text-muted);
}

/* スマホ：ラベルを値の上にスタック */

/* 2 カラムレイアウト: 左=会社名/住所/電話、右=営業時間表 */

/* 左カラム: 会社名 / 住所 / 電話 */

.ex-company-phone a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 200ms ease;
}
.ex-company-phone a:hover { opacity: 0.7; }

/* 右カラム: 表をセルいっぱい、上下センター */
.ex-company-col-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ex-company-col-right .ex-hours-table { max-width: none; }

/* タブレット・スマホでは縦スタック */
@media (max-width: 600px) {
  .ex-company-cols {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  .ex-hours-table { font-size: var(--exr-fs-xs); }
  .ex-hours-table th,
  .ex-hours-table td { padding: 0.4rem 0.25rem; }
  .ex-hours-table tbody th {
    padding: 0.4rem 0.5rem;
    white-space: normal;
  }
}

/* .ex-feature-image の img フォールバック (image block aspectRatio attribute が出していないケース用) */
.ex-feature-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }