/*
 * home.css — PB1 トップページ（page-home.php / page-id-785）専用スタイル
 *
 * Phase 2B「アプローチB（カンプ型組み直し）」B-1a。
 *   設計図: gtm/branding/phase2B-top-globalmenu-design-draft.md
 *   要件:   gtm/branding/DESIGN.pickle-one-web.md
 *   カンプ: data-20251203/html/index.html + assets/css/style.css（型の真値）
 *
 * 方針（厳守）:
 *   1. 色・radius・transition・主要タイポは必ずトークン参照（design-tokens.core.css の var(--*)）。
 *      レイアウト用の構造値（位置・サイズの % / vw / px、clamp() 内 rem）は構造値ゆえ直書きする。
 *   2. カンプ hover #FF933D 採用＝カンプ忠実回帰。白文字2.21:1でAA非適合だが美観優先の意図的AA例外（ユーザー承認2026-06-15）・--color-orange-hover 経由。
 *      カンプ hover #0050E0 → var(--color-blue-light)。#003594/#EF6A00/#fff 等は対応トークンへ。
 *   3. 全セレクタを .page-id-785 にスコープし全ページ波及を防ぐ（is_page_template 条件 enqueue と二重防御）。
 *   4. カンプは slick + .slider DOM。本実装は既存 Splide を保持するため、
 *      スライダー系は Splide DOM（.splide / .splide__list / .splide__slide）へ読み替えて適用する。
 *   5. 右レール #main-Nav / .menu-Overlay の CSS は B-1c（header + メニュー）スコープ。本ファイルには含めない。
 *
 * ロード順: cocoon-child-style(10) -> pb1-fonts(15) -> pb1-design-tokens-core(20)
 *           -> pb1-home(20, deps: pb1-design-tokens-core) 本ファイル
 */

/* ====================================================================
 * 0. レイアウト基盤（wrapper / section 右余白 / 出し分けユーティリティ）
 * ==================================================================== */
.page-id-785 .wrapper {
  display: flex;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .wrapper {
    max-width: var(--container-max-width);
    width: 100%;
    padding-left: var(--container-padding-x-pc);
  }
}
@media screen and (max-width: 767px) {
  .page-id-785 .wrapper {
    width: 100%;
    padding-left: var(--container-padding-x-sp);
    padding-right: var(--container-padding-x-sp);
  }
}
.page-id-785 .dp-Flexcolumn {
  display: flex;
  flex-direction: column;
}

/* section 下マージン + Q8 右レール用 右余白 120px（rail100 + 緩衝20・カンプ実測）。
 * full-Slider はスライダーが画面右までこぼれる演出のため右余白を相殺。 */
.page-id-785 main section {
  margin-bottom: var(--space-section);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 main section {
    padding-right: var(--section-padding-right-pc);
  }
  .page-id-785 main section.full-Slider {
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .page-id-785 .dp-Spnone { display: none; }
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .dp-Pcnone { display: none; }
}

/* ====================================================================
 * 0b. ヘッダーロゴ（T1 再実装）— 背景連動カラー切替（rescalar風・ただしブランド色維持）
 *     markup は functions.php pb1_home_globalmenu_markup() 先頭で wp_body_open に出力。
 *     header.php は非接触（計測タグ保護）。
 *
 *     【方式】デュアルSVGクロスフェード（旧「白バー＋filter白⇄カラー」方式は撤去）。
 *       - .logo-light = フルカラー版 logo.svg（白背景セクション上＝ブランド青/橙）
 *       - .logo-dark  = 白版 logo-W.svg（青#003594 / 橙#EF6A00 背景・MV写真上）
 *       2枚を absolute で重ね、opacity で滑らかにクロスフェード。
 *
 *     【切替トリガ】home-globalmenu.js の IntersectionObserver が、各セクションの
 *       data-logo（light=濃ロゴ表示 / dark=白ロゴ表示）を検知して .site-Header-pb1 に
 *       .logo-on-light / .logo-on-dark を付与。mix-blend-mode:difference は PB1 多色背景で
 *       非ブランド色が出るため不採用（ユーザー確定 B案 2026-06-15）。
 *
 *     【配置】ロゴは画面左上に position:fixed で常時固定（白バーは出さない）。
 *       スクロールしても左上に留まり、色だけがブランド色で切替わる。
 *       z-index は右レール(#main-Nav=100002)/Cocoon(9999)未満の 5000。
 * ==================================================================== */
/* 自前ヘッダー本体：画面左上に固定・透明（バー背景なし）。Cocoon の
   .page-id-785 header{position:fixed; background:#0240d6} を詳細度で上書き。 */
.page-id-785 .site-Header-pb1 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;   /* 右レール100002 / オーバーレイ100000番台 未満・本文セクション上 */
  background-color: transparent;
  pointer-events: none;   /* 透明バー全幅でクリックを奪わない。ロゴ <a> のみ復帰 */
}
.page-id-785 .site-Header-pb1 .site-Logo {
  position: relative;
  z-index: 10;
  margin-top: 20px;   /* カンプ #header .site-Logo{margin-top:20px} 準拠 */
  width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem);
}
.page-id-785 .site-Header-pb1 .site-Logo a {
  display: block;
  position: relative;
  pointer-events: auto;   /* ロゴリンクはクリック可能に戻す */
}
/* 2枚のロゴを重ねてクロスフェード。.logo-light を基準（高さ確保）に置き、
   .logo-dark を absolute で重ねる。color 切替は opacity transition で滑らかに。 */
.page-id-785 .site-Header-pb1 .site-Logo .logo-Img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity .3s ease;
}
.page-id-785 .site-Header-pb1 .site-Logo .logo-dark {
  position: absolute;
  top: 0;
  left: 0;
}
/* data-logo=dark セクション（青/橙背景・MV）：白ロゴ表示（既定。markup 初期 class） */
.page-id-785 .site-Header-pb1.logo-on-dark  .logo-light { opacity: 0; }
.page-id-785 .site-Header-pb1.logo-on-dark  .logo-dark  { opacity: 1; }
/* data-logo=light セクション（白背景）：フルカラー（ブランド青）ロゴ表示 */
.page-id-785 .site-Header-pb1.logo-on-light .logo-light { opacity: 1; }
.page-id-785 .site-Header-pb1.logo-on-light .logo-dark  { opacity: 0; }
@media screen and (max-width: 767px) {
  .page-id-785 .site-Header-pb1 .site-Logo {
    margin-left: 14px;
    margin-top: 10px;
  }
}

/* ====================================================================
 * 1. Content Title（P4）— 英 Poppins 見出し + 和文サブ + 橙ドット
 * ==================================================================== */
.page-id-785 .content-Title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h2-content-title);
  color: var(--color-title-on-white);
  margin-bottom: var(--space-title-bottom);
}
.page-id-785 .orange-Bg .content-Title,
.page-id-785 .blue-Bg .content-Title {
  color: var(--color-brand-white);
}
.page-id-785 .content-Title span {
  position: relative;
  font-family: var(--font-family-ja);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-title-sub);
  line-height: 1.6;
  padding-left: 15px;
}
.page-id-785 .content-Title span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--color-dot-on-white);
}
.page-id-785 .orange-Bg .content-Title span::before {
  background: var(--color-dot-on-orange);
}
.page-id-785 .blue-Bg .content-Title span::before {
  background: var(--color-dot-on-blue);
}
.page-id-785 .mright-Auto { margin-right: auto; }
.page-id-785 .mleft-Auto  { margin-left: auto; }

/* ====================================================================
 * 2. Arrow Link（P5）— Blue ピル + 白矢印（SVG）
 * ==================================================================== */
.page-id-785 .arrow-Link {
  display: inline-block;
  position: relative;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  padding: 24px 50px 24px 24px;
  font-size: var(--font-size-arrow-link);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: var(--t-slide);
}
@media screen and (max-width: 767px) {
  .page-id-785 .arrow-Link {
    width: auto;
    padding: 20px 50px 20px 20px;
    margin-left: auto;
    margin-right: auto;
  }
}
.page-id-785 .arrow-Link:hover {
  color: var(--color-cta-text);
  background: var(--color-blue-light);
}
.page-id-785 .arrow-Link::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 14px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 24px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%208H18.5M12%2015L19%208L12%201%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: contain;
  transition: var(--t-base);
}
.page-id-785 .arrow-Link:hover::after {
  right: 20px;
  transform: translateX(6px);
}

/* ====================================================================
 * 3. Full Slider（P6）— Pick Up + 進捗バー。既存 Splide(#pickup_slider) DOM へ適用。
 * ==================================================================== */
.page-id-785 .full-Slider #pickup_slider {
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  margin-top: -60px;
}
.page-id-785 .full-Slider #pickup_slider .splide__track {
  overflow: visible;
}
.page-id-785 .full-Slider #pickup_slider .splide__slide a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--t-slowest);
}
.page-id-785 .full-Slider #pickup_slider .splide__slide a:hover p {
  opacity: 0.8;
}
.page-id-785 .full-Slider #pickup_slider .splide__slide a:hover figure::before {
  background: none;
}
.page-id-785 .full-Slider #pickup_slider p {
  color: var(--color-brand-blue);
  font-size: var(--font-size-slider-caption);
  font-weight: var(--font-weight-bold);
  margin-left: auto;
  margin-right: auto;
  transition: transform var(--t-slowest);
}
.page-id-785 .full-Slider #pickup_slider figure {
  position: relative;
  max-width: clamp(11.688rem, 9.06rem + 13.14vw, 18.75rem);
  height: clamp(15.625rem, 12.137rem + 17.44vw, 25rem);
  margin-bottom: 16px;
  overflow: hidden;
  z-index: 1;
  transition: transform var(--t-slowest);
}
.page-id-785 .full-Slider #pickup_slider figure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay-pickup-blue);
  border-radius: clamp(4.375rem, 3.91rem + 2.33vw, 5.625rem);
  z-index: 2;
  transition: transform var(--t-slowest);
}
.page-id-785 .full-Slider #pickup_slider figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: clamp(4.375rem, 3.91rem + 2.33vw, 5.625rem);
}
.page-id-785 .full-Slider #pickup_slider .splide__slide.is-active figure {
  transform: scale(1.1);
  margin-bottom: 30px;
}
.page-id-785 .full-Slider #pickup_slider .splide__slide.is-active figure::before {
  background: none;
}

/* [PR-B 7+8 補強] splide-core 投入時の素スタイル相殺・二重防御（.page-id-785 スコープ） */
.page-id-785 .full-Slider #pickup_slider figure {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* アクティブ時も角丸を保持（既存 figure img の clamp 値に合わせる） */
.page-id-785 .full-Slider #pickup_slider .splide__slide.is-active figure,
.page-id-785 .full-Slider #pickup_slider .splide__slide.is-active figure img {
  border-radius: clamp(4.375rem, 3.91rem + 2.33vw, 5.625rem);
  overflow: hidden;
}

/* [PR-C] PickUp img と ::before のサイズ整合（正規化）。figure に角丸を集約し、
   img/::before を inset:0 で figure と完全一致させて段差・はみ出しを解消。
   img の object-fit:cover は維持。is-active の ::before{background:none} は上で温存。 */
.page-id-785 .full-Slider #pickup_slider figure {
  border-radius: clamp(4.375rem, 3.91rem + 2.33vw, 5.625rem);
}
.page-id-785 .full-Slider #pickup_slider figure::before,
.page-id-785 .full-Slider #pickup_slider figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.page-id-785 .full-Slider #pickup_slider figure img {
  object-fit: cover;
}

/* [FIX-① 2026-06-16] PickUp 非active スライドは style.css が img のみ scale(.8)（左右を
   小さく薄く）する一方、figure::before（青オーバーレイ）は等倍のままで img と不一致になる
   （画像80%・オーバーレイ100%）。::before にも同じ scale を当てて常に img と一致させる。
   active は figure ごと scale(1.1) されるため img/before とも等率で一致（scale は乗算合成
   されないので明示的に scale(1) へ戻す）。 */
.page-id-785 .full-Slider #pickup_slider .splide__slide figure::before {
  transform: scale(.8);
  transition: .7s;
}
.page-id-785 .full-Slider #pickup_slider .splide__slide.is-active figure::before {
  transform: scale(1);
}

/* 進捗バー（P6）— Splide rate() を JS で width に反映 */
.page-id-785 .full-Slider .slick-progress-bar {
  position: absolute;
  top: 10px;
  right: 10%;
  width: 200px;
  height: 10px;
  background: var(--color-brand-orange);
  border-radius: var(--radius-progress);
  z-index: 6;
}
@media screen and (max-width: 767px) {
  .page-id-785 .full-Slider .slick-progress-bar {
    width: 150px;
    right: 16px;
  }
}
.page-id-785 .full-Slider .slick-progress-bar .progress {
  width: 5%;
  height: 100%;
  background: var(--color-brand-blue);
  border-radius: var(--radius-progress);
  transition: width 0.1s ease;
}

.page-id-785 .full-Slider .wrapper > .arrow-Link {
  /* [T5]「イベント検索はこちら」を右寄せ・内容幅（flex column の wrapper 内）。 */
  align-self: flex-end;
  width: auto;
}

/* ====================================================================
 * 4. Orange Bg + Item Slider（P7 / P8）— 左上90px大R・商品カード（枠だけ）。
 *    既存 Splide(#item_slider) DOM へ適用。カンプ #paddle-Slider -> #item_slider。
 * ==================================================================== */
.page-id-785 .orange-Bg {
  background: var(--color-section-bg-alt-orange);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  border-top-left-radius: var(--radius-hero);
}
.page-id-785 .orange-Bg #item_slider {
  position: relative;
  /* P0修正: Splide ループ生成のスライド総幅（約3120px）が親(.wrapper 1160px)を
   * はみ出し、ページ全体に横スクロール（docScrollW約3139px）が発生していた。
   * その結果トップ全体が左約40%に圧縮表示される崩れ（P0-A）と、
   * perPage:3 が効かず1枚=1040px化して商品カードが破綻する崩れ（P0-B）を誘発。
   * #pickup_slider と同様に幅を親へ拘束し overflow:hidden でクリップして相殺する。 */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.page-id-785 .orange-Bg #item_slider .splide__slide a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--t-slowest);
}
.page-id-785 .orange-Bg #item_slider .splide__slide a:hover {
  opacity: 0.8;
}
.page-id-785 .orange-Bg #item_slider figure {
  max-width: clamp(11.688rem, 9.06rem + 13.14vw, 18.75rem);
  height: clamp(15.625rem, 12.137rem + 17.44vw, 25rem);
  margin: 0 auto 16px;
}
.page-id-785 .orange-Bg #item_slider figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-hero);
}
.page-id-785 .orange-Bg #item_slider dl {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.page-id-785 .orange-Bg #item_slider dl dt,
.page-id-785 .orange-Bg #item_slider dl dd {
  color: var(--color-brand-white);
}
.page-id-785 .orange-Bg #item_slider dl dt {
  font-size: var(--font-size-paddle-card);
}
.page-id-785 .orange-Bg #item_slider dl dd {
  margin-left: auto;
}
.page-id-785 .orange-Bg #item_slider + .arrow-Link {
  margin-top: var(--space-title-bottom);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .orange-Bg #item_slider + .arrow-Link {
    margin-left: auto;
  }
}

/* [T11] Item スライダー(#item_slider)の左右矢印を正しく配置（消さず残す）。
 *       home は splide-core.css 未 enqueue のため、PickUp 準拠の丸ボタン装飾を
 *       #item_slider 用に自前で完結させる（404/未スタイル回避）。
 *       prev=左端・左向き / next=右端・右向き。overflow:hidden 内に収まるよう端から少し内側へ。
 *       Splide が自動生成する内蔵 <svg> は非表示にし、背景アイコンで描画する。 */
.page-id-785 .orange-Bg #item_slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-soft, rgba(0,0,0,.15));
  border-radius: 50%;
  background-color: var(--color-brand-white);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23003594%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%229%2018%2015%2012%209%206%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0 4px 14px var(--color-shadow-soft);
  cursor: pointer;
  opacity: 0.95;
  transition: opacity var(--t-base), background-color var(--t-base);
}
.page-id-785 .orange-Bg #item_slider .splide__arrow:hover {
  opacity: 1;
}
.page-id-785 .orange-Bg #item_slider .splide__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
/* Splide 内蔵の SVG を隠して背景アイコンに一本化 */
.page-id-785 .orange-Bg #item_slider .splide__arrow svg {
  display: none;
}
.page-id-785 .orange-Bg #item_slider .splide__arrow--prev {
  left: 0;
  transform: translateY(-50%) scaleX(-1);   /* 向き是正：左向き */
}
.page-id-785 .orange-Bg #item_slider .splide__arrow--next {
  right: 0;
}
@media screen and (max-width: 767px) {
  .page-id-785 .orange-Bg #item_slider .splide__arrow {
    width: 34px;
    height: 34px;
  }
  .page-id-785 .orange-Bg #item_slider .splide__arrow--prev { left: 0; }
  .page-id-785 .orange-Bg #item_slider .splide__arrow--next { right: 0; }
}

/* ====================================================================
 * 5. News Wrapper（P10）— タブ UI（非対称 R 0 20px 20px 20px）
 * ==================================================================== */
.page-id-785 #news-Wrapper {
  margin-bottom: 0;
  /* 暫定: カンプ書き出しSVG(conte-Bg=#004098/#EB6100)をそのまま流用。本来トークンは#003594/#EF6A00。次フェーズでSVGアセット一括色補正TODO（Plato意図的例外運用） */
  /* [PR-C] New Arrival背景SVG非表示（画像は残置・CSSで出さないのみ）。再表示時はコメント解除
  background: url("/wp-content/uploads/dist/conte-Bg.svg") no-repeat left bottom;
  background-size: 70%;
  background-position: left calc(100% + 50px); */
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper { padding-bottom: 5rem; }
  .page-id-785 #news-Wrapper .content-Title { margin-right: auto; }
}
@media screen and (max-width: 767px) {
  .page-id-785 #news-Wrapper { padding-bottom: 8rem; /* [PR-C] background-position: left calc(100% + 0px); */ }
  .page-id-785 #news-Wrapper .content-Title { margin-left: auto; margin-right: auto; }
}
.page-id-785 #news-Wrapper .tab-List {
  display: flex;
  margin-bottom: 0;   /* [T8] tab-List 下余白ゼロ（リストデフォルト/Cocoon ul 余白の打消し） */
}
.page-id-785 #news-Wrapper .tab-List li {
  margin: 0;          /* [T9] tab-List 各 li 余白ゼロ */
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper .tab-List { gap: 8px; }
}
@media screen and (max-width: 767px) {
  .page-id-785 #news-Wrapper .tab-List { align-items: flex-end; }
}
.page-id-785 #news-Wrapper .tab-List .tab-Link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  background: var(--color-brand-white);
  border-top: 3px solid var(--color-border-tab-blue);
  border-left: 3px solid var(--color-border-tab-blue);
  border-right: 3px solid var(--color-border-tab-blue);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  color: var(--color-brand-blue);
  font-size: var(--font-size-tab-link);
  text-decoration: none;
  transition: var(--t-base);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper .tab-List .tab-Link {
    min-width: clamp(150px, 15vw, 200px);
    padding: 16px 0;
  }
}
@media screen and (max-width: 767px) {
  /* [PR-A⑦ / FIX-⑤ 2026-06-16] SP：New Arrival タブを等分割し親幅内に収める。
     flex コンテナ .tab-List の子は <li> なので、等分の flex:1 1 0 は <li> に当てる
     （孫の .tab-Link(a) に当てても無効＝従来は li が内容幅で不均等だった）。
     .tab-Link は li 内を width:100% で満たす。 */
  .page-id-785 #news-Wrapper .tab-List {
    width: 100%;
  }
  .page-id-785 #news-Wrapper .tab-List li {
    flex: 1 1 0;
    min-width: 0;
  }
  .page-id-785 #news-Wrapper .tab-List .tab-Link {
    padding: 10px 0;
    min-width: 0;
    width: 100%;
  }
}
.page-id-785 #news-Wrapper .tab-List .tab-Link.active,
.page-id-785 #news-Wrapper .tab-List .tab-Link:hover {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
}
.page-id-785 #news-Wrapper .tab-Wrapper {
  position: relative;
  z-index: 1;
  border: 3px solid var(--color-brand-blue);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  padding: var(--space-card-padding);
  background: var(--color-brand-white);
}
@media screen and (max-width: 767px) {
  .page-id-785 #news-Wrapper .tab-Wrapper {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
}
.page-id-785 #news-Wrapper .tab-Content {
  display: none;
  opacity: 0;
  transition: opacity var(--t-base);
}
.page-id-785 #news-Wrapper .tab-Content.active { display: block; }
.page-id-785 #news-Wrapper .tab-Content.show   { opacity: 1; }
.page-id-785 #news-Wrapper .tab-Wrapper + .arrow-Link {
  margin-top: var(--space-title-bottom);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper .tab-Wrapper + .arrow-Link { margin-left: auto; }
}
.page-id-785 #news-Wrapper .post-Box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 32px;
}
.page-id-785 #news-Wrapper .post-Box:last-child { margin-bottom: 0; }
.page-id-785 #news-Wrapper .post-Box .post-Thumb { width: 100%; }
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper .post-Box .post-Thumb { width: 23%; }
  .page-id-785 #news-Wrapper .post-Box .post-Thumb img { max-width: 240px; }
}
@media screen and (max-width: 767px) {
  .page-id-785 #news-Wrapper .post-Box .post-Thumb { margin-bottom: 16px; }
}
.page-id-785 #news-Wrapper .post-Box .post-Thumb img {
  border-radius: var(--radius-card);
}
.page-id-785 #news-Wrapper .post-Box .text-Area {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-arrow-link);
  text-decoration: none;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #news-Wrapper .post-Box .text-Area {
    width: 77%;
    padding-left: 24px;
  }
}
.page-id-785 #news-Wrapper .post-Box .text-Area time {
  display: block;
  color: var(--color-brand-blue);
  margin-top: auto;
  margin-bottom: 8px;
}
.page-id-785 #news-Wrapper .post-Box .text-Area .post-title {
  /* [T10] 旧トップ用レガシー .page-id-785 .article h3（style.css:2414）の
   *       青文字・中央寄せ・border-bottom・固定幅を打ち消す（h3.post-title への波及是正）。 */
  position: relative;
  display: inline;
  color: var(--color-text-primary);   /* ① 青(--main-color)→本文色 #161414 */
  text-align: left;                    /* ② 中央寄せ→左寄せ */
  border-bottom: none;                 /* ④ border-bottom 除去 */
  width: auto;                         /* レガシー width:70vw を解除 */
  margin: 0;                           /* レガシー margin:5vw auto 2vw を解除 */
  padding: 0;                          /* レガシー padding:10px を解除 */
  font-size: var(--font-size-post-title);
  font-weight: var(--font-weight-regular);
  background-image: linear-gradient(to right, var(--color-brand-blue), var(--color-brand-blue));
  background-repeat: no-repeat;
  background-position: left bottom 0.1em;  /* ③ hover下線をテキスト下端へ（打消し線化を是正） */
  background-size: 0 2px;
  transition: background-size var(--t-base);
}
.page-id-785 #news-Wrapper .post-Box .text-Area {
  align-items: flex-start;   /* [T10] flex column 子要素を左寄せ */
  text-align: left;
}
.page-id-785 #news-Wrapper .post-Box .text-Area:hover .post-title {
  background-size: 100% 2px;
}

/* ====================================================================
 * 6. Blue Bg + Member Wrapper（P9）— Q4: 今回省く（マークアップ側コメントアウト温存）。
 *    将来有効化時に効くよう CSS は本ファイルに保持する。
 * ==================================================================== */
.page-id-785 .blue-Bg {
  background: var(--color-section-bg-alt-blue);
  padding-top: var(--space-section);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .blue-Bg .content-Title { margin-right: auto; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .blue-Bg .content-Title {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
}
.page-id-785 .member-Wrapper { width: 100%; }
@media print, screen and (min-width: 768px) {
  .page-id-785 .member-Wrapper { display: flex; flex-wrap: wrap; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .member-Wrapper { padding-left: 16px; padding-right: 16px; }
}
.page-id-785 .member-Wrapper article {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: var(--color-brand-blue);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .member-Wrapper article { width: 25%; }
}
@media print, screen and (min-width: 768px) and (max-width: 980px) {
  .page-id-785 .member-Wrapper article { width: 50%; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .member-Wrapper article { border-right: 1px solid var(--color-brand-white); }
}
.page-id-785 .member-Wrapper article a {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-top: var(--space-card-padding);
  padding-left: var(--space-card-padding);
  border-top: 1px solid var(--color-brand-white);
  border-left: 1px solid var(--color-brand-white);
}
.page-id-785 .member-Wrapper article a:hover h3,
.page-id-785 .member-Wrapper article a:hover p {
  color: var(--color-brand-orange);
}
.page-id-785 .member-Wrapper article a:hover img {
  transform: scale(1.1);
}
.page-id-785 .member-Wrapper article figure {
  margin-left: 15%;
  margin-top: auto;
  overflow: hidden;
  border-radius: var(--radius-hero) 0 0 0;
}
.page-id-785 .member-Wrapper article img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transform-origin: center center;
  transition: var(--t-slow);
}
.page-id-785 .member-Wrapper article h3,
.page-id-785 .member-Wrapper article p {
  color: var(--color-brand-white);
  transition: var(--t-base);
  line-height: 1.6;
  padding-right: 24px;
}
.page-id-785 .member-Wrapper article h3 {
  font-size: var(--font-size-member-name);
  margin-bottom: 8px;
}
.page-id-785 .member-Wrapper article p {
  font-size: 1rem;
  margin-bottom: 16px;
}
.page-id-785 .member-Wrapper .last-Block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 112px;
  background: var(--color-brand-blue);
  border-top: 1px solid var(--color-brand-white);
  border-left: 1px solid var(--color-brand-white);
  border-bottom: 1px solid var(--color-brand-white);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .member-Wrapper .last-Block { width: 25%; }
}
@media print, screen and (min-width: 768px) and (max-width: 980px) {
  .page-id-785 .member-Wrapper .last-Block { width: 50%; }
}
.page-id-785 .member-Wrapper .last-Block a {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--color-brand-white);
  background: var(--color-brand-orange);
  font-size: var(--font-size-last-block-cta);
  transition: var(--t-slide);
}
.page-id-785 .member-Wrapper .last-Block a:hover {
  background: var(--color-orange-hover); /* light #FF933D・カンプ忠実回帰・意図的AA例外2.21:1・ユーザー承認2026-06-15 */
}
.page-id-785 .member-Wrapper .last-Block a:hover::after {
  right: 20px;
  transform: translateX(6px);
}
.page-id-785 .member-Wrapper .last-Block a span {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10%;
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}
.page-id-785 .member-Wrapper .last-Block a::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 14px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 24px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%208H18.5M12%2015L19%208L12%201%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center center;
  background-size: contain;
  transition: var(--t-base);
}
@media screen and (max-width: 767px) {
  .page-id-785 .member-Wrapper .last-Block:first-of-type,
  .page-id-785 .member-Wrapper .last-Block:nth-of-type(2),
  .page-id-785 .member-Wrapper .last-Block:nth-of-type(3) { display: none; }
}
@media print, screen and (min-width: 768px) and (max-width: 980px) {
  .page-id-785 .member-Wrapper .last-Block:first-of-type,
  .page-id-785 .member-Wrapper .last-Block:nth-of-type(2) { display: none; }
}

/* ====================================================================
 * 7. Vision Area（P12）— fade-up + 円形画像散在
 * ==================================================================== */
.page-id-785 #vision-Area {
  position: relative;
  padding-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  /* [FIX 2026-06-16] SP：下余白が過大（10rem）→ 4rem に縮小（全部離れすぎの是正の一部）。 */
  .page-id-785 #vision-Area { padding-bottom: 4rem; }
}
.page-id-785 #vision-Area p {
  text-align: center;
  line-height: 2.1;
  color: var(--color-brand-blue);
  margin-left: auto;
  margin-right: auto;
  /* PR-B: #vision-Area p の font-size 欠落が SP 文字過小の真因。clamp で新設（SP1rem〜PC1.25rem） */
  font-size: clamp(1rem, 0.86rem + 0.7vw, 1.25rem);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #vision-Area p { width: 30%; margin-bottom: 3.75rem; }
  /* [FIX 2026-06-16] PC：タグ(FUN AS ONE)とメッセージが密着(gap0)→h2 に下余白を付与し離す。
     PC は肩書きだけ個別に余白制御したいので flex gap でなく margin で調整（SP は gap 一律）。 */
  .page-id-785 #vision-Area h2 { margin-bottom: 2.5rem; }
  /* [FIX 2026-06-16] PC：肩書き「株式会社ピックルボールワン代表取締役」が width:30% に収まらず
     折返し（ブレイク）→ 折返さず1行化。width:auto で内容幅・max-width:100% で将来の超長文時は
     画面外突き抜けでなく折返しに退避。:last-of-type は肩書きの p のみ対象（.wrapper 直下の p は
     メッセージ／肩書き の2つ・間の円は img）。 */
  .page-id-785 #vision-Area p:last-of-type { white-space: nowrap; width: auto; max-width: 100%; }
}
@media print, screen and (min-width: 768px) and (max-width: 980px) {
  .page-id-785 #vision-Area p { width: auto; }
}
@media screen and (max-width: 767px) {
  /* [FIX 2026-06-16] SP：全部離れすぎの是正。p の margin-top:35%(125px) は .wrapper が flex のため
     既存 gap と相殺されず加算され過剰余白になっていた。p の縦 margin を撤去し、.wrapper の flex gap
     一律(2rem=既存値)で h2／メッセージ／肩書き／ボタンを均等(32px)に。PC は h2 個別 margin で制御。 */
  .page-id-785 #vision-Area p { margin-top: 0; margin-bottom: 0; }
  .page-id-785 #vision-Area .wrapper { gap: 2rem; }
}
.page-id-785 #vision-Area #funasone-Logo {
  width: 112px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.page-id-785 #vision-Area .circle-Img {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-circle);
}
.page-id-785 #vision-Area .circle-Img:first-of-type {
  width: clamp(10.125rem, 7.009rem + 15.58vw, 18.5rem);
  height: clamp(10.125rem, 7.009rem + 15.58vw, 18.5rem);
  right: 100px;
  top: -50px;
}
.page-id-785 #vision-Area .circle-Img:nth-of-type(2) {
  width: clamp(7.25rem, 5.017rem + 11.16vw, 13.25rem);
  height: clamp(7.25rem, 5.017rem + 11.16vw, 13.25rem);
  right: 15%;
  top: 40%;
}
.page-id-785 #vision-Area .circle-Img:nth-of-type(3) {
  width: clamp(5.688rem, 3.92rem + 8.84vw, 10.438rem);
  height: clamp(5.688rem, 3.92rem + 8.84vw, 10.438rem);
  right: 180px;
  top: 75%;
}
.page-id-785 #vision-Area .circle-Img:nth-of-type(4) {
  width: clamp(7.25rem, 5.017rem + 11.16vw, 13.25rem);
  height: clamp(7.25rem, 5.017rem + 11.16vw, 13.25rem);
  left: 8%;
  top: 0;
}
.page-id-785 #vision-Area .circle-Img:nth-of-type(5) {
  width: clamp(5.688rem, 3.92rem + 8.84vw, 10.438rem);
  height: clamp(5.688rem, 3.92rem + 8.84vw, 10.438rem);
  left: 13%;
  top: 40%;
}
.page-id-785 #vision-Area .circle-Img:nth-of-type(6) {
  width: clamp(10.125rem, 7.009rem + 15.58vw, 18.5rem);
  height: clamp(10.125rem, 7.009rem + 15.58vw, 18.5rem);
  left: -3%;
  bottom: -17%;
}
@media screen and (max-width: 767px) {
  /* PR-B SP⑤: 円を画面端へ退避し「気配」だけ残す。負の right/left で一部のみ可視化（overflow:hidden は使わない）。退避量は pre 実機で微調整前提。 */
  .page-id-785 #vision-Area .circle-Img:first-of-type { top: -5%; right: -18%; }
  /* PR-C: SP で円2と円3が直径の56%重なり過密 → 円2 のみ上げ(86%→83%)て重なりを12〜24%へ緩和。
     円3 は据え置き(フッター見切れリスク回避=Nexus代替A)。right(横退避=可視性)は不変。重なりはゼロにせず残す(Plato)。 */
  .page-id-785 #vision-Area .circle-Img:nth-of-type(2) { right: -12%; top: 83%; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(3) { right: -10%; top: 93%; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(4) { left: -14%; top: -40px; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(5) { left: -16%; top: 8%; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(6) { left: -20%; bottom: -80px; }
  /* PR-B SP⑤補助: 端退避した円が横スクロールを生まないよう entry-content で抑止（body には掛けない＝
     Cocoon の menu-open スクロールロック [body fixed化] との干渉を構造的に回避）。
     #vision-Area 自体には overflow:hidden を掛けない（円の気配を端に残すため）。 */
  /* [FIX-② 2026-06-16] overflow-x:hidden は overflow-y を auto に強制し .entry-content を
     ネストスクロールコンテナ化（25px 分スクロール可能）→ SP でタッチスクロールが引っかかる。
     overflow-x:clip はスクロールコンテナを作らず横はみ出しのみ抑止。clip 非対応の旧環境
     （iOS15以前等）向けに hidden を先行宣言してフォールバックさせる（プログレッシブ）。 */
  .page-id-785 .entry-content { overflow-x: hidden; overflow-x: clip; }
}
.page-id-785 .fade-up-Item {
  opacity: 0;
  transform: translateY(var(--fade-up-distance));
  /* PR-B PC⑤: メッセージ出現を 0.9s ease-out へ（vision-Area スコープ上書き。グローバルトークンは変えない） */
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.page-id-785 .fade-up-Item.is-Inview {
  opacity: 1;
  transform: translateY(0);
}

/* [PR-B PC⑥] Message 丸画像は「最初から表示」＋常時ふわふわ浮遊。
   PR-C では .is-Inview 付与後（登場完了後）に浮遊開始としていたが、PR-B 確定仕様で
   円は opacity:0 登場をやめ最初から表示する（page-home.php で円から .fade-up-Item を除去）。
   そのため .is-Inview は円に付かなくなる → 浮遊トリガーを .circle-Img 常時発火へ移行する。
   位相差 delay（1.0〜1.8s）は保持し、円ごとに浮遊の開始位相をずらす。
   nth-of-type は §7 の円配置と同一個体を指す（.wrapper 直下 img は円6枚のみ）。 */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pb1-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }
  .page-id-785 #vision-Area .circle-Img {
    animation: pb1-float 6s ease-in-out infinite;
  }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(1){ animation-duration:6.5s; animation-delay:1.2s; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(2){ animation-duration:5.5s; animation-delay:1.5s; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(3){ animation-duration:7s;   animation-delay:1.0s; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(4){ animation-duration:6s;   animation-delay:1.8s; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(5){ animation-duration:8s;   animation-delay:1.3s; }
  .page-id-785 #vision-Area .circle-Img:nth-of-type(6){ animation-duration:6.8s; animation-delay:1.6s; }
}

/* ====================================================================
 * 8. Footer（P15）— Q5: カンプフッターに差し替え（トップ限定＝page-home.php
 *    インライン footer のみ）。全ページ共通フッターには波及させない。
 *    .home-footer-kampu スコープで footer.php(.footer 等)と衝突回避。
 * ==================================================================== */
.page-id-785 .home-footer-kampu {
  position: relative;
  z-index: 2;
  /* PR-B PC⑦: フッター背景を Blue #003594 へ（カンプ逸脱だがユーザー承認済・白文字 約10.4:1 でAAA可読性確保。
     Tier0 色役割定義 Blue=主色/Orange=アクセント に沿う是正） */
  background: var(--color-brand-blue);
  padding-top: var(--space-section);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .home-footer-kampu { padding-right: var(--section-padding-right-pc); padding-bottom: 3rem; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .home-footer-kampu { padding-bottom: 5rem; }
}
.page-id-785 .home-footer-kampu #footer-Nav { width: 100%; }
@media print, screen and (min-width: 768px) {
  .page-id-785 .home-footer-kampu #footer-Nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-id-785 .home-footer-kampu #footer-Nav .foot-Col { width: 25%; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .home-footer-kampu #footer-Nav { display: flex; flex-wrap: wrap; }
  .page-id-785 .home-footer-kampu #footer-Nav .foot-Col { width: 47%; }
  .page-id-785 .home-footer-kampu #footer-Nav .foot-Col:nth-child(3) { margin-top: 16px; }
  .page-id-785 .home-footer-kampu #footer-Nav .foot-Col:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
    width: 100%;
  }
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col { border-left: 1px solid var(--color-brand-white); }
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col:last-child { border-left: none; }
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col:last-child h3 {
  font-size: var(--font-size-footer-sns-heading);
  color: var(--color-brand-white);
  margin-bottom: 16px;
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col .f-Link {
  margin-left: var(--space-card-padding);
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col .f-Link li {
  margin-bottom: var(--space-link-vmargin);
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col .f-Link a {
  position: relative;
  color: var(--color-brand-white);
  font-size: 1rem;
  text-decoration: none;
  padding-left: 10px;
  line-height: 1.6;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 1px;
  transition: background-size var(--t-base);
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col .f-Link a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-circle);
  background: var(--color-brand-white);
}
.page-id-785 .home-footer-kampu #footer-Nav .foot-Col .f-Link a:hover { background-size: 100% 1px; }
.page-id-785 .home-footer-kampu #footer-Nav .sns-Link {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-id-785 .home-footer-kampu #footer-Nav .sns-Link img { width: 23px; height: auto; }
.page-id-785 .home-footer-kampu #foot-Logo img { width: 202px; height: auto; }
.page-id-785 .home-footer-kampu #footer-Info {
  margin-top: var(--space-footer-info-top);
}
.page-id-785 .home-footer-kampu #footer-Info p { color: var(--color-brand-white); }
@media print, screen and (min-width: 768px) {
  .page-id-785 .home-footer-kampu #footer-Info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .page-id-785 .home-footer-kampu #footer-Info ul { margin-right: auto; margin-left: 24px; gap: 24px; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .home-footer-kampu #footer-Info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .page-id-785 .home-footer-kampu #footer-Info > ul { order: 1; }
  .page-id-785 .home-footer-kampu #footer-Info > p { order: 2; }
  .page-id-785 .home-footer-kampu #footer-Info #foot-Logo { order: 3; }
  .page-id-785 .home-footer-kampu #footer-Info ul { justify-content: center; gap: 16px; flex-wrap: wrap; }
}
.page-id-785 .home-footer-kampu #footer-Info ul { display: flex; }
.page-id-785 .home-footer-kampu #footer-Info ul li a {
  position: relative;
  display: inline;
  color: var(--color-brand-white);
  text-decoration: none;
  line-height: 1.6;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 1px;
  transition: background-size var(--t-base);
}
.page-id-785 .home-footer-kampu #footer-Info ul li a:hover { background-size: 100% 1px; }
.page-id-785 .home-footer-kampu .footer-copyright {
  text-align: center;
  color: var(--color-brand-white);
  margin-top: 24px;
  padding-bottom: 1.5rem;
}

/* ====================================================================
 * 9. Q6: トップ限定で Cocoon 既存グローバルナビを CSS 非表示（撤去せず・二重ナビ回避）。
 *    B-1c で右レール #main-Nav を出すまでの暫定 hide。実装後に要否を再評価する。
 * ==================================================================== */
.page-id-785 #navi,
.page-id-785 #navi-in {
  display: none;
}


/* ====================================================================
 * 10. Main Visual ＋ 検索枠（①）— カンプ #main-Visual 準拠。
 *     MV 画像の中央に検索ボックス枠を重ねる。submit は無効化（枠のみ）。
 *     機能は既存 CSP 検索 FAB が担保。色・radius・影はトークン参照、
 *     位置・寸法（%/vw/px）は構造値ゆえ直書き（home.css 方針1）。
 * ==================================================================== */
.page-id-785 #main-Visual {
  /* [T4/T1] カンプ #main-Visual 準拠：固定ヘッダー高さ分だけ上に詰める（top:-70px）。
   *         MV↔PickUp 間にトークン余白を付与（旧 margin-bottom:0 を解除）。 */
  position: relative;
  z-index: 0;
  top: -70px;
  margin-bottom: var(--space-section);
  /* [B案 2026-06-15] 背景連動ロゴの背景サンプリング担保：MV はコンテンツ <img>
     （CSS 背景ではない）で塗られるため、ロゴ判定が貫通して下層の白 main を拾い
     白ロゴが白扱いになるのを防ぐ。セクション自体に濃いブランド青を敷き、MV 区間を
     確実に dark（白ロゴ）と判定させる。画像はロゴ位置を覆うため視覚的な露出はない。 */
  background-color: var(--color-brand-blue);
}
@media print, screen and (min-width: 768px) {
  /* [PR-C] MV右内側余白をレール幅100pxに一致させMV画像とレール間の青帯を解消（カンプ #main-Visual{padding-right:100px} 準拠） */
  .page-id-785 #main-Visual { padding-right: 100px; }
}
.page-id-785 #main-Visual > h1 {
  margin: 0;
}
.page-id-785 #main-Visual > h1 img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* [①キャッチコピー 2026-06-18] コピー＋検索枠を 1 まとまり（.mv-Group）として MV 中央に重ねる。
 *   旧実装は form 単体を absolute 中央寄せしていたが、上にサブタイトルを足すため
 *   絶対配置を .mv-Group へ移譲し、内部を flex column（コピーが上・検索枠が少し下）にする。
 *   form 自体は static に戻す（margin:0 維持）。寸法は構造値ゆえ直書き（home.css 方針1）。 */
.page-id-785 #main-Visual .mv-Group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;            /* MV画像(>h1 z-index:1)より前面。旧 form の z-index:2 は static化で無効のため移譲 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: max-content;
  max-width: 90%;
}
/* [①] MV 写真上のサブタイトル：白文字＋影で視認性確保。日本語見出し系・中央寄せ。 */
.page-id-785 #main-Visual .mv-Catch {
  margin: 0;
  font-family: var(--font-family-ja);
  font-weight: var(--font-weight-medium);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.4;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.page-id-785 #main-Visual form {
  margin: 0;
}
.page-id-785 #main-Visual form .search-Box {
  position: relative;
}
.page-id-785 #main-Visual form .search-Box input[type="text"] {
  border-radius: var(--radius-pill);
  font-size: 1rem;
  background: var(--color-search-input-bg);
  box-shadow: 0 10px 35px 5px var(--color-shadow-soft);
  border: none;
  height: 68px;
  min-width: 500px;
  padding: 16px 24px 16px 56px;
}
.page-id-785 #main-Visual form .search-Box input[type="text"]::placeholder {
  color: var(--color-text-muted);
}
/* submit ボタン：枠のみ（disabled）。検索アイコンは inline SVG（トークン橙の代わりに
 * 視認性重視で brand-blue。クリック不可のため装飾）。 */
/* [②アイコン縦中央是正 2026-06-18] 旧実装（top:50%/translateY(-50%)）では button 固有の
 *   font/line-height ボックスの癖でアイコンが入力中央より約10px下に寄っていた。
 *   flex 中央寄せ＋font-size:0/line-height:0 でテキスト基準のドリフトを消し、24×24 の背景
 *   SVG を確実にボックス縦中央へ合わせる。 */
.page-id-785 #main-Visual form .search-Box button[type="submit"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 18px;
  margin-block: auto;            /* top:0/bottom:0+margin:auto で確実に縦中央（translateYの10pxドリフト回避） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  padding: 0;
  font-size: 0;
  line-height: 0;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23003594%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E") center center no-repeat;
  background-size: contain;
  cursor: default;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  /* [PR-A④] SP：MV画像下の青背景露出を解消（display:block で inline 画像の下隙間を消す。青地維持） */
  .page-id-785 #main-Visual > h1 img { display: block; width: 100%; height: auto; }
  /* [FIX-③ 2026-06-16] MV 下部の青帯（背景青の露出）を画像で埋めて消す。背景青 color 自体は
     ロゴ背景連動の判定担保のため温存（裏に残す）。青帯の正体は (a)Cocoon 既定 h1 padding(19.5px)
     残存＋(b)h1 と absolute な form の間の空白テキストノードが作る行ボックス(≈7px)で MV が画像より
     高くなること。h1 padding を 0、MV の line-height を 0 にして両方を解消。form 内テキスト（検索
     入力等）には line-height:0 を波及させない防御を入れる（MV 直下に form 外テキストは無し）。 */
  .page-id-785 #main-Visual { line-height: 0; }
  .page-id-785 #main-Visual > h1 { margin: 0; padding: 0; }
  /* [①SP 2026-06-18] line-height:0 を .mv-Group 配下（コピー＋検索枠）に波及させない防御。
     旧 form 単体への防御を .mv-Group へ拡張（form もこの配下のため一括でカバー）。 */
  .page-id-785 #main-Visual .mv-Group { line-height: normal; }
  /* [PR-A⑤] SP：MV〜PickUp間の余白短縮 */
  .page-id-785 #main-Visual { margin-bottom: 1.5rem; }
  /* [PR-A⑥補助 / FIX-④ 2026-06-16] SP：PickUp figure を親幅に拘束し隣スライドのピーク表示を担保。
     さらに中央画像が広く（active≒画面70%）隣スライドと密着（ギャップ0）するため、figure を
     slide 幅の 85% に絞り中央寄せ（margin auto 既設）して隣接を解消（active幅242px・ギャップ31px）。
     img/::before/overlay は figure 連動で追従。 */
  .page-id-785 .full-Slider #pickup_slider figure { max-width: 85%; }
  .page-id-785 #main-Visual form .search-Box input[type="text"] {
    width: 78vw;
    min-width: 0;
    height: 56px;
    padding: 12px 16px 12px 48px;
  }
  .page-id-785 #main-Visual form .search-Box button[type="submit"] {
    left: 14px;
    width: 20px;
    height: 20px;
  }
  /* [①SP 2026-06-18] SP：サブタイトルを小さめ＋コピーと検索枠の間隔を詰める。
     [SP位置 2026-06-18] SPはコピー＋検索枠が上寄りに見えるため中央(50%)より少し下げる。 */
  .page-id-785 #main-Visual .mv-Group { gap: 16px; max-width: 88%; top: 58%; }
  .page-id-785 #main-Visual .mv-Catch { font-size: clamp(1.05rem, 4.4vw, 1.4rem); }
}

/* ====================================================================
 * 11. Event 導線（③）— エリア（地域）別ページへのリンク群を blue-Bg にグリッド配置。
 *     各カード = /events/e-{area}/（events CPT 地域アーカイブ）への固定リンク。
 *     .orange-Bg と同じ 90px 大R・反転配色（見出し白・ドット橙＝既存 §1/§4 で対応済）。
 *     寸法（グリッド列・gap・figure 比率）は構造値ゆえ直書き、色/影/R/余白はトークン参照。
 *     旧・単一バナー（.event-Banner …）の CSS はマークアップ温存に合わせ下部に保持。
 * ==================================================================== */
.page-id-785 .blue-Bg.event-Bg {
  background: var(--color-section-bg-alt-blue);
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  border-top-left-radius: var(--radius-hero);
}
/* --- エリアリンク・グリッド（③本体）-------------------------------- */
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid {
  /* [T6] 5列×2段（10セル目=「すべてのエリア」CTAカード）。SPは2列維持（下のMQ）。 */
  list-style: none;
  width: 100%;
  margin: 0 0 var(--space-title-bottom);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 1.2vw + 8px, 28px);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid > li {
  margin: 0;
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: transform var(--t-slowest);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid a:hover {
  transform: translateY(-4px);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid figure {
  width: 100%;
  aspect-ratio: 4 / 5;  /* [T6] ちょっとだけ縦長 */
  margin: 0 0 12px;
  overflow: hidden;
  border-radius: var(--radius-hero) 0 var(--radius-hero) 0;
  box-shadow: 0 10px 35px 5px var(--color-shadow-soft);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t-slow);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid a:hover img {
  transform: scale(1.06);
  opacity: 0.85;
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid span {
  color: var(--color-brand-white);
  font-size: var(--font-size-paddle-card);
  text-align: center;
}
/* [T6] 10セル目=「すべて見る」CTAカード。サムネ画像の代わりに半透明タイル＋アイコン。 */
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid li.event-Cta figure {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 2px dashed rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid li.event-Cta .event-Cta-Icon {
  display: inline-flex;
  width: 44%;
  max-width: 64px;
  color: var(--color-brand-white);
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid li.event-Cta .event-Cta-Icon svg {
  width: 100%;
  height: auto;
}
.page-id-785 .blue-Bg.event-Bg .event-Area-Grid li.event-Cta a:hover figure {
  background: rgba(255, 255, 255, 0.22);
}
@media screen and (max-width: 767px) {
  .page-id-785 .blue-Bg.event-Bg .event-Area-Grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
.page-id-785 .blue-Bg.event-Bg .event-Banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin: 0 auto var(--space-title-bottom);
  transition: transform var(--t-slowest);
}
.page-id-785 .blue-Bg.event-Bg .event-Banner:hover {
  opacity: 0.85;
}
.page-id-785 .blue-Bg.event-Bg .event-Banner figure {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 24px;
  overflow: hidden;
  border-radius: var(--radius-hero) 0 var(--radius-hero) 0;
}
.page-id-785 .blue-Bg.event-Bg .event-Banner figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-id-785 .blue-Bg.event-Bg .event-Banner-Body {
  text-align: center;
}
.page-id-785 .blue-Bg.event-Bg .event-Banner-Lead {
  color: var(--color-brand-white);
  font-size: 1rem;
  line-height: 1.8;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .blue-Bg.event-Bg .arrow-Link {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .page-id-785 .blue-Bg.event-Bg .arrow-Link {
    margin-left: auto;
    margin-right: auto;
  }
}

/* [T7] Events「イベント一覧を見る」ボタンをブルー→オレンジへ。
 *      白矢印::after は白のまま橙背景に整合。hover は意図的AA例外トークン（--color-orange-hover）。 */
.page-id-785 .blue-Bg.event-Bg .arrow-Link {
  background: var(--color-brand-orange);
}
.page-id-785 .blue-Bg.event-Bg .arrow-Link:hover {
  background: var(--color-orange-hover);
}

/* ====================================================================
 * 12. グローバルメニュー（Phase 2B B-1c）— カンプ #main-Nav / .menu-Btn / .menu-Overlay
 *     設計図: gtm/branding/phase2B-top-globalmenu-design-draft.md §5 / §10
 *     カンプ: data-20251203/html/assets/css/style.css（型の真値）
 *
 *     z-index（両監査 literal・固有レンジ再設計）:
 *       既存最大 99999（Cocoon .go-to-top）/ 9999（Cocoon .menu-content）/
 *       10001（子 .floating-event-searching.active CSP検索FAB）と衝突回避のため
 *       100000 番台の固有レンジへ退避（カンプ実測 9999 は衝突するため不採用）。
 *         .menu-Overlay : 100000（Cocoon FAB 群より上・橙面が FAB を隠す）
 *         #main-Nav     : 100002（オーバーレイより上・常時最前のレール）
 *         .menu-Btn     : 100003（X 字ボタンを最前面に）
 *       ※ プラグイン側の決済/ライトボックス等の最上位モーダル
 *         （stripe-payments 2147483647 / baguettebox 1000000）より下に置き、
 *         それらが正しくナビを覆える設計とする。
 *
 *     色/hover: カンプ hover #FF933D 採用＝カンプ忠実回帰。白文字2.21:1でAA非適合だが美観優先の意図的AA例外（ユーザー承認2026-06-15）・--color-orange-hover 経由。
 *     寸法（px/vw/%）は構造値ゆえ直書き、色/radius/transition はトークン参照。
 *     SP(767px以下): 3×3 ドットを 70px 角で残置（カンプ準拠・シグネチャ死守）。
 * ==================================================================== */

/* スクロールロック用：JS が body.style で fixed 化するため補助のみ */
.page-id-785.menu-open { height: 100vh; overflow-y: hidden; }

/* --- 右レール #main-Nav -------------------------------------------- */
.page-id-785 #main-Nav {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100002;
  display: flex;
  flex-direction: column;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 #main-Nav {
    width: 101px;
    height: 100vh;
    align-items: center;
    background: var(--color-brand-blue);
    border-left: 1px solid var(--color-brand-white);
  }
}
@media screen and (max-width: 767px) {
  .page-id-785 #main-Nav { overflow: hidden; }
}
.page-id-785 #main-Nav a { color: var(--color-brand-white); text-decoration: none; }

@media print, screen and (min-width: 768px) {
  .page-id-785 #main-Nav .nav-content-Scroll {
    flex-grow: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
}
.page-id-785 #main-Nav .nav-content-Scroll::-webkit-scrollbar { display: none; width: 0; }

.page-id-785 #main-Nav .g-Navigation { font-size: 1rem; list-style: none; margin: 0; padding: 0; }
@media print, screen and (min-width: 768px) {
  .page-id-785 #main-Nav .g-Navigation { width: 100%; }
}
.page-id-785 #main-Nav .g-Navigation .top-Level { margin: 0; }
.page-id-785 #main-Nav .g-Navigation .top-Level img,
.page-id-785 #main-Nav .g-Navigation .top-Level .nav-Icon {
  width: 35px;
  height: auto;
  margin: 0 auto 1px;
  display: block;
}
.page-id-785 #main-Nav .g-Navigation .top-Level a {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  background: var(--color-brand-blue);
  transition: background var(--t-base);
}
.page-id-785 #main-Nav .g-Navigation .top-Level a:hover {
  background: var(--color-blue-light); /* #0050E0・カンプ準拠（白文字 AA） */
}
/* [T2] 右レール（rail100px・padding10px→実効80px）内で「Tournament」等の長いラベルが
 *      段ズレしないよう縮小＋折返し。#main-Nav 限定で他項目/他ページへ非波及。 */
.page-id-785 #main-Nav .g-Navigation .top-Level a {
  font-size: 0.8rem;
  letter-spacing: 0;
  word-break: break-word;
  line-height: 1.3;
}

/* --- 3×3 ドットボタン .menu-Btn ------------------------------------ */
.page-id-785 .menu-Btn {
  position: relative;
  z-index: 100003;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  cursor: pointer;
  padding: 20px 12px 15px;
  background: var(--color-brand-orange);
  transition: background var(--t-base);
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .menu-Btn { width: 100%; min-width: 100px; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Btn { width: 70px; height: 60px; padding: 6px 0 3px; } /* シグネチャ死守 */
}
/* hover はホバー可能端末のみ（タッチ端末はタップ後の貼り付き防止で解除） */
@media (hover: hover) {
  .page-id-785 .menu-Btn:hover { background: var(--color-orange-hover); } /* light #FF933D・カンプ忠実回帰・意図的AA例外2.21:1・ユーザー承認2026-06-15 */
}

.page-id-785 .menu-Btn .btn-Text {
  color: var(--color-brand-white);
  margin-top: 4px;
  margin-bottom: auto;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Btn .btn-Text { font-size: .8rem; }
}

/* ドット束 */
.page-id-785 .menu-Btn .dots-Line { position: relative; width: 30px; height: 30px; }
.page-id-785 .menu-Btn .dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-brand-white);
  border-radius: 50%;
  position: absolute;
  transition: all var(--t-base);
}
.page-id-785 .menu-Btn .dot:nth-child(1) { top: 0;    left: 0; }
.page-id-785 .menu-Btn .dot:nth-child(2) { top: 0;    left: 12px; }
.page-id-785 .menu-Btn .dot:nth-child(3) { top: 0;    left: 24px; }
.page-id-785 .menu-Btn .dot:nth-child(4) { top: 12px; left: 0; }
.page-id-785 .menu-Btn .dot:nth-child(5) { top: 12px; left: 12px; }
.page-id-785 .menu-Btn .dot:nth-child(6) { top: 12px; left: 24px; }
.page-id-785 .menu-Btn .dot:nth-child(7) { top: 24px; left: 0; }
.page-id-785 .menu-Btn .dot:nth-child(8) { top: 24px; left: 12px; }
.page-id-785 .menu-Btn .dot:nth-child(9) { top: 24px; left: 24px; }

/* active 時：四隅ドット → X 字（2 本線）、中・辺ドットは消去 */
.page-id-785 .menu-Btn.active .dot:nth-child(1),
.page-id-785 .menu-Btn.active .dot:nth-child(3),
.page-id-785 .menu-Btn.active .dot:nth-child(7),
.page-id-785 .menu-Btn.active .dot:nth-child(9) {
  width: 30px;
  height: 3px;
  background-color: var(--color-brand-white);
  border-radius: 2px;
  top: 50%;
  left: 0;
  transform-origin: center;
}
.page-id-785 .menu-Btn.active .dot:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.page-id-785 .menu-Btn.active .dot:nth-child(3) { transform: translateY(-50%) rotate(-45deg); }
.page-id-785 .menu-Btn.active .dot:nth-child(7) { transform: translateY(-50%) rotate(-45deg); }
.page-id-785 .menu-Btn.active .dot:nth-child(9) { transform: translateY(-50%) rotate(45deg); }
.page-id-785 .menu-Btn.active .dot:nth-child(2),
.page-id-785 .menu-Btn.active .dot:nth-child(4),
.page-id-785 .menu-Btn.active .dot:nth-child(5),
.page-id-785 .menu-Btn.active .dot:nth-child(6),
.page-id-785 .menu-Btn.active .dot:nth-child(8) { opacity: 0; }

/* --- 橙オーバーレイ .menu-Overlay ---------------------------------- */
.page-id-785 .menu-Overlay {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100vw;
  background: var(--color-brand-orange);
  z-index: 100000;
  transform: translateX(100%);
  transition: transform 0.4s ease-in-out;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .menu-Overlay { right: 100px; width: calc(100% - 100px); } /* レール分よける */
}
.page-id-785 .menu-Overlay.open { transform: translateX(0); }

.page-id-785 .menu-Overlay .wrapper { height: 100%; }

.page-id-785 .menu-Overlay .site-Logo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Overlay .site-Logo { margin-top: -5px; margin-left: 0; }
}
.page-id-785 .menu-Overlay.open .site-Logo { opacity: 1; transform: translateY(0); }
.page-id-785 .menu-Overlay .site-Logo img { width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem); }

.page-id-785 .menu-Overlay .navi-Wrap {
  padding-top: clamp(2rem, 2.256rem + 3.72vw, 3rem);
  padding-bottom: 150px;
  flex-grow: 1;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.page-id-785 .menu-Overlay .navi-Wrap::-webkit-scrollbar { display: none; width: 0; }

.page-id-785 .menu-Overlay .navi-Link {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
@media print, screen and (min-width: 768px) {
  .page-id-785 .menu-Overlay .navi-Link { align-items: center; padding-top: 5%; }
  .page-id-785 .menu-Overlay .navi-Link li { width: 48%; }
}
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Overlay .navi-Link li { width: 50%; margin-bottom: 8px; }
}
.page-id-785 .menu-Overlay .navi-Link li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.page-id-785 .menu-Overlay.open .navi-Link li { opacity: 1; transform: translateY(0); }

.page-id-785 .menu-Overlay .navi-Link li a {
  color: var(--color-brand-white);
  line-height: 1.6;
  text-decoration: none;
  font-size: clamp(1.125rem, .637rem + 2.44vw, 2.438rem);
  position: relative;
  padding-left: 20px;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 4px;
  transition: background-size .3s ease;
}
.page-id-785 .menu-Overlay .navi-Link li a::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-brand-white);
  left: 0;
  top: .6em;
}
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Overlay .navi-Link li a::before { top: .5em; }
}
.page-id-785 .menu-Overlay .navi-Link li a:hover { background-size: 100% 4px; }

/* --- SP 用ヘッダー/フッターナビ配置（カンプ .sp-Header / .sp-Footer） --- */
@media screen and (max-width: 767px) {
  .page-id-785 #main-Nav .sp-Header {
    display: flex;
    flex-direction: row-reverse;
    margin-left: auto;
    border-left: 1px solid var(--color-brand-white);   /* SPヘッダーナビは左＋下のボーダーのみ */
    border-bottom: 1px solid var(--color-brand-white);
  }
  .page-id-785 #main-Nav .sp-Header .top-Level { width: 70px; height: 60px; }
  /* Login（SP ヘッダーの非ボタン項目）は 3×3 ドットの脇に小さく置く */
  .page-id-785 #main-Nav .sp-Header .top-Level a { min-height: 60px; font-size: .7rem; padding: 1px 0; }

  .page-id-785 #main-Nav .sp-Footer {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .page-id-785 #main-Nav .sp-Footer.visible {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    border-top: 1px solid var(--color-brand-white);
    z-index: 100001; /* オーバーレイ(100000)より上・レール(100002)より下 */
  }
  .page-id-785 #main-Nav .sp-Footer.visible li.top-Level {
    width: 25%;
    border-left: 1px solid var(--color-brand-white);
    border-bottom: 1px solid var(--color-brand-white);
  }
  .page-id-785 #main-Nav .sp-Footer.visible li.top-Level .nav-Icon { width: 27px; }
  /* SP: Menu開時はレールSearchを出さない（SPの検索は固定フッターが担保） */
  .page-id-785 #main-Nav .sp-Footer.visible li.top-Level-Search { display: none; }
}
@media print, screen and (min-width: 768px) {
  /* PC は sp-Footer 項目もレール内に縦並びで表示（カンプは PC でも下部に積む） */
  .page-id-785 #main-Nav .sp-Footer { display: flex; flex-direction: column; }
}

/* ====================================================================
 * §12b. ログイン状態表示（右レール Login 項目）
 *   未ログイン時は従来どおり "Login"(font-En) リンク。ログイン時は
 *   Gravatar（円形・白細枠で nav-Icon トーンに整合＝Plato 整合条件）＋ display_name、
 *   クリックで <details> ドロップダウン（マイページ / ログアウト）。
 *   ドロップダウンは position:fixed（レール/スクロール枠の overflow クリップ回避）、
 *   位置補正・外側クリック/Esc閉じは home-login-menu.js。スコープ: .page-id-785 #main-Nav 限定。
 * ================================================================== */
.page-id-785 #main-Nav .g-Navigation .login-Item { margin: 0; position: relative; }
.page-id-785 #main-Nav .login-Menu { width: 100%; }
/* summary を他レール項目（top-Level a）と同じ箱に揃える */
.page-id-785 #main-Nav .login-Summary {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0;
  word-break: break-word;
  cursor: pointer;
  list-style: none;                 /* デフォルトの三角マーカー除去 */
  transition: background var(--t-base);
}
.page-id-785 #main-Nav .login-Summary::-webkit-details-marker { display: none; }
.page-id-785 #main-Nav .login-Summary:hover { background: var(--color-blue-light); }
/* アバター：nav-Icon(35px) と造形を揃える＝円形＋白細枠。
   詳細度を .top-Level.login-Item まで上げ、rail既存の `.top-Level img{height:auto}`(L1426)を
   上書きして縦横とも35px固定。非正方形Gravatarが縦長楕円化するのを object-fit:cover で防ぐ。 */
.page-id-785 #main-Nav .login-Avatar { display: block; margin: 0 auto 4px; }
.page-id-785 #main-Nav .g-Navigation .top-Level.login-Item .login-Avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--color-brand-white);
  background: var(--color-brand-white);
  display: block;
  object-fit: cover;
}
.page-id-785 #main-Nav .login-Name {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ドロップダウン本体（位置は home-login-menu.js が summary 基準で補正） */
.page-id-785 #main-Nav .login-Drop {
  display: none;
  position: fixed;
  z-index: 100021;                  /* レール(#main-Nav=100020) 子・検索(100010)より上 */
  min-width: 160px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--color-brand-blue);
  border: 1px solid var(--color-brand-white);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.page-id-785 #main-Nav .login-Menu[open] .login-Drop { display: block; }
.page-id-785 #main-Nav .login-Drop li { margin: 0; }
.page-id-785 #main-Nav .login-Drop a {
  display: block;
  padding: 10px 16px;
  color: var(--color-brand-white);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: left;
  transition: background var(--t-base);
}
.page-id-785 #main-Nav .login-Drop a:hover { background: var(--color-blue-light); }
/* SP：レール項目は 70px 箱に縮むため summary も合わせる＋ドロップダウンをコンパクトに */
@media screen and (max-width: 767px) {
  .page-id-785 #main-Nav .sp-Header .login-Summary { min-height: 60px; font-size: .6rem; padding: 5px 0; }
  .page-id-785 #main-Nav .g-Navigation .top-Level.login-Item .login-Avatar img { width: 28px; height: 28px; }
  /* SP はドロップダウンを小ぶりに（min-width/padding/フォント縮小） */
  .page-id-785 #main-Nav .login-Drop { min-width: 132px; padding: 4px 0; border-radius: 5px; }
  .page-id-785 #main-Nav .login-Drop a { padding: 8px 14px; font-size: .8rem; }
}

/* ====================================================================
 * 0c. Cocoon 純正ヘッダーの明示非表示（監査修正3/Nexus・二重ヘッダー予防）
 *     header-container.php が常時 <header id="header"> を出力する。現状は
 *     Cocoon PCヘッダーが偶然空で不可視なだけ＝設定変更で二重表示に復活する
 *     脆い前提。Cocoon純正の ID(#header-container/#header) に限定して明示排除。
 *     注入した自前 <header>（wp_body_open出力・.site-Logo）は ID 無しのため
 *     このセレクタに該当せず巻き込まない。
 *
 *     【二重ヘッダー是正 / phase2B-top-header-fix】実機検証で、トップに
 *     重なって表示されていた Cocoon 既存ヘッダー帯の実体は tmp/body-top.php が
 *     wp_body_open 直後に出力する .navi_area（position:fixed; z-index:100）>
 *     #navi-area（ロゴ）であり、従来の #header-container/#header/#navi では
 *     なかった。これが z-index:auto の自前 <header> を物理的に覆っていた。
 *     よって実際に見えている .navi_area / #navi-area を .page-id-785 で確実に
 *     非表示にする。自前ヘッダー（.site-Header-pb1）/右レール #main-Nav /
 *     オーバーレイ .menu-Overlay / 計測タグは巻き込まない。
 * ==================================================================== */
.page-id-785 #header-container,
.page-id-785 #header,
.page-id-785 .navi_area,
.page-id-785 #navi-area { display: none; }

/* ====================================================================
 * §13. 検索モーダル P1（トップ限定）— FAB視覚撤去 / レールSearchボタン /
 *      CSPモーダル前面化（暗幕） / CTA可読性是正
 *      設計: 検索モーダル P1 実装ドラフト v3（修正A/B/C反映）
 *      スコープ: .page-id-785 限定。プラグイン custom-search-plugin は非改変。
 * ==================================================================== */

/* --- 13-1. FAB 視覚撤去（バインド・マークアップは残置） ------------------ */
/*   .floating-event-searching は custom-search.js の openBtns に配線済み。
 *   表示のみ殺す（要素は残すので JS 配線・setBtnState は無害に空振り）。 */
.page-id-785 .floating-event-searching { display: none; }

/* --- 13-2. レール Search ボタン（青地＝レール同色 / 虫眼鏡のみ橙 / hover blue-light） --- */
/*   レール他項目（a要素）と寸法を揃えるため top-Level a と同等の箱を button に付与。 */
.page-id-785 #main-Nav .g-Navigation .top-Level-Search { margin: 0; }
.page-id-785 #main-Nav .g-Navigation .top-Level-Search .rail-Search {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: none;
  cursor: pointer;
  text-align: center;
  background: var(--color-brand-blue);   /* レール同色（青地） */
  color: var(--color-brand-white);
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0;
  transition: background var(--t-base);
}
.page-id-785 #main-Nav .g-Navigation .top-Level-Search .rail-Search:hover {
  background: var(--color-blue-light);   /* #0050E0・他レール項目と同 hover */
}
/* アイコンは虫眼鏡のみ橙（×は白）。寸法はレール nav-Icon（35px）に揃える。 */
.page-id-785 #main-Nav .top-Level-Search .rail-Search .nav-Icon {
  width: 35px;
  height: auto;
  margin: 0 auto 1px;
  display: block;
}
.page-id-785 #main-Nav .top-Level-Search .rail-Search .icon-Search { color: var(--color-brand-orange); } /* 虫眼鏡＝橙 */
.page-id-785 #main-Nav .top-Level-Search .rail-Search .icon-Close  { color: var(--color-brand-orange); }  /* ×＝橙 */
.page-id-785 #main-Nav .top-Level-Search .rail-Search-Label {
  font-style: normal;          /* <i> のイタリック解除 */
  color: var(--color-brand-white);
}
/* 開閉アイコン切替：setBtnState が付与する .active を opacity でクロス。
 *   閉(初期)=虫眼鏡表示／開=×表示。2枚を重ねず縦積み回避のためグリッド重ね。 */
.page-id-785 #main-Nav .top-Level-Search .rail-Search { position: relative; }
.page-id-785 #main-Nav .top-Level-Search .rail-Search .icon-Close { display: none; }
.page-id-785 #main-Nav .top-Level-Search .rail-Search.active .icon-Search { display: none; }
.page-id-785 #main-Nav .top-Level-Search .rail-Search.active .icon-Close  { display: block; }

/* --- 13-3. MV .search-Box を role=button 化した際の操作性 ------------------ */
.page-id-785 #main-Visual form .search-Box.csp-search-open { cursor: pointer; }
.page-id-785 #main-Visual form .search-Box.csp-search-open:focus-visible {
  outline: 3px solid var(--color-brand-orange);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}
.page-id-785 #main-Visual form .search-Box.csp-search-open input[type="text"] { cursor: pointer; }

/* ============================ §13-4 置換ブロック開始 ============================ */
/* ------------------------------------------------------------
 * §13-4/§13-5 ＝ 利休 v5（ブルー地 × グローバルMenu テイスト × 段階開示UX）。
 *
 *   ■ [fix7] ユーザー指摘6点（②除く）反映版。
 *     ① PC パネル起点を Menu(right:100px; width:calc(100%-100px); left無し) と完全同型化。
 *     ③ ロゴ→カテゴリの縦開始点を Menu(navi-Wrap padding-top) と一致。
 *     ④ カテゴリのナカグロ(・)削除＋左 padding 詰め（Menu のドットは残す＝検索のみ無し）。
 *     ⑥ ×クローズを常時オレンジ・hover で濃オレンジ。
 *
 *   ■ 詳細度設計（important 不使用で確実に上書き）
 *     プラグイン最強 … .csp-modal.active .csp-modal-content = 0,3,0
 *     本ブロック     … .page-id-785 #csp-modal.csp-modal.active .csp-modal-content = id1+class4 = 1,4,0 ＞ 0,3,0
 *     → 全 media 内も同 id 込みセレクタで 1,4,0 を維持。被せ要素(.csp-cat-*)も id 込みで統一。
 * ------------------------------------------------------------ */

/* ---- レール幅変数（§13 共通・既存 #main-Nav width:101px と一致）---- */
.page-id-785 { --rail-width: 101px; }

/* ---- 暗幕（オーバーレイ）：見える地はパネルで表現。暗幕は薄いブルーの陰 ---- */
.page-id-785 #csp-modal.csp-modal {
  /* A2 dimmer removed: Menu(.menu-Overlay) has no dimmer. full-blue content covers alone. */
  clip-path: none;
  -webkit-clip-path: none;
  background: transparent;
  z-index: 100010;
  transition: opacity var(--t-base, 0.3s ease);
}

/* ---- パネル共通：ブルー地・Menu と同方向スライド（scale を translate で完全上書き）---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content {
  background: var(--color-brand-blue);
  color: var(--color-brand-white);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slide, 0.4s ease-in-out);
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- ×クローズ（[fix7⑥] 常時オレンジ・hover で濃オレンジ）---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-close {
  display: none;            /* モーダル右上の×は不要。閉じる操作はレールSearchボタン(トグル)が担う */
  align-self: flex-end;
  background: transparent;
  border: none;
  color: var(--color-brand-orange);
  font-size: 2rem;
  line-height: 1;
  padding: 0;
  margin: 0 0 clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out, color var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-close:hover {
  color: var(--color-orange-hover);
}
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-modal-close {
  opacity: 1;
  transform: translateY(0);
}

/* ---- フォーム本体：ブルー地に直接乗せる（白カードなし）・上寄せで空白対策 ---- */
/* [fix7③] 縦開始点を Menu と一致：絶対配置ロゴ(top:20px・実高≈48px)の下端 ≈68px を margin-top で
   確保し、その上に Menu .navi-Wrap{padding-top:clamp(2rem,2.256rem+3.72vw,3rem)} と同じ間隔を足す。
   厳密 px は Genesis が pre 実測で最終調整（ここは構造一致を優先）。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  width: 100%;
  max-width: 560px;
  margin-top: calc(68px + clamp(2rem, 2.256rem + 3.72vw, 3rem));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out .06s, transform .3s ease-out .06s;
}
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form {
  opacity: 1;
  transform: translateY(0);
}

/* 検索ボックス・フィールド・ラベル：白文字（内側ラッパの明色地・枠・影・余白を打ち消し） */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-basis: auto;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-extra-fields {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field label {
  color: var(--color-brand-white);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
  line-height: 1.6;
  font-weight: 700;
}

/* セレクト：ブルー地に映える白枠・半透明白fill・白文字 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content select#csp_post_type,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field select {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-brand-white);
  border: 1px solid var(--color-brand-white);
  border-radius: var(--radius-pill, 60px);
  padding: 12px 20px;
  font-size: 1rem;
  line-height: 1.6;
  cursor: pointer;
  transition: background var(--t-base, 0.3s ease), border-color var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field select:hover,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field select:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field select option {
  color: var(--color-text-primary);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field input[type="date"] {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-brand-white);
  border: 1px solid var(--color-brand-white);
  border-radius: var(--radius-pill, 60px);
  padding: 12px 20px;
  font-size: 1rem;
  line-height: 1.6;
  transition: background var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* =====================================================================
 * 段階開示 UX（被せ層）— カテゴリ一覧 / ピン / 戻し導線。
 * ===================================================================== */

/* ネイティブ csp_post_type の field を視覚的に隠す（DOM・送信・既存リスナは温存） */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-field-full.csp-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* ---- カテゴリ一覧（STEP1）。Menu .navi-Link を青地へ読み替え踏襲 ---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 0.25rem + 0.8vw, 0.9rem);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2 .csp-cat-list {
  /* [v6] list は残し、非選択 button(.is-dropped) を個別に畳む。gap を 0 にし見出しを最上部へ密着。 */
  gap: 0;
  transition: gap var(--t-base, 0.3s ease);
}

/* カテゴリタイル（実 button）。Menu navi-Link li a 質感（font-size/line-height は Menu と完全一致）。
   [fix7④] ナカグロ(・)無し版に合わせ左 padding を詰める（旧 padding-left:20px → 0）。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--color-brand-white);
  line-height: 1.6;
  font-size: clamp(1.125rem, .637rem + 2.44vw, 2.438rem);
  font-weight: 700;
  position: relative;
  padding: 4px 12px 4px 0;
  cursor: pointer;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 4px;
  opacity: 0;
  transform: translateY(10px);
  /* [v6] 個別 collapse を畳めるよう max-height/margin/padding も遷移対象に追加。 */
  max-height: 4em;
  overflow: hidden;
  transition:
    opacity var(--t-base, 0.3s ease),
    transform var(--t-base, 0.3s ease),
    background-size var(--t-base, 0.3s ease),
    color var(--t-base, 0.3s ease),
    max-height var(--t-slide, 0.4s ease-in-out),
    margin var(--t-slide, 0.4s ease-in-out),
    padding var(--t-slide, 0.4s ease-in-out);
}
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-cat-btn {
  opacity: 1;
  transform: translateY(0);
}
/* [fix7④] 先頭ブレットドット（ナカグロ）を削除。Menu のドットは残し検索カテゴリのみ無し。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn::before {
  display: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:hover,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:focus-visible {
  background-size: 100% 4px;
  outline: none;
}

/* ---- [v6] 段階遷移：非選択カテゴリのフェードアウト＋個別 collapse ---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-dropped {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  transition:
    opacity var(--t-base, 0.3s ease),
    transform var(--t-base, 0.3s ease),
    max-height var(--t-slide, 0.4s ease-in-out) 0.12s,
    margin var(--t-slide, 0.4s ease-in-out) 0.12s,
    padding var(--t-slide, 0.4s ease-in-out) 0.12s;
}

/* ---- [v6] 選択カテゴリ＝見出しに昇格。非選択 collapse 分だけ最上部へせり上がる ---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-picked {
  opacity: 1;
  transform: translateY(0);
  cursor: default;
  background-size: 0 4px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  transition:
    transform var(--t-slide, 0.4s ease-in-out),
    padding var(--t-slide, 0.4s ease-in-out),
    color var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-picked:hover,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-picked:focus-visible {
  background-size: 0 4px;
}

/* ---- 選択後のピン（STEP2）。選んだカテゴリ＋戻し ---- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-pinned {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, max-height .35s ease, visibility .35s ease;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2 .csp-cat-pinned {
  opacity: 1;
  visibility: visible;
  max-height: 120px;
  transform: translateY(0);
  pointer-events: auto;
}
/* 戻しボタン（白・hover で橙） */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-brand-white);
  border-radius: 50%;
  color: var(--color-brand-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-base, 0.3s ease), color var(--t-base, 0.3s ease), border-color var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-back:hover,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-back:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-brand-orange);
  outline: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-pinned-label {
  color: var(--color-brand-white);
  font-size: clamp(1.125rem, .637rem + 2.44vw, 2.438rem);
  font-weight: 700;
  line-height: 1.4;
}

/* [v6] 選択名は昇格 .csp-cat-btn.is-picked が担うため、ピン内ラベルは非表示。
   [v7] ◀戻るは見出しと条件の間に挟まり無駄な余白を作るため、フローから外し右上へ絶対配置。
   offset parent = .csp-modal-content(position:fixed)。 */
/* [v13] pinned(◀)はフォーム基準で絶対配置＝見出しと同じ行の左端に安定配置。
   フローから外すことで選択せり上がりの押し下げ/戻り跳ねを防ぎつつ、top固定値の脆さも回避。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2 {
  position: relative;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2 .csp-cat-pinned {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-pinned-label {
  display: none;
}

/* =====================================================================
 * A4/A6 STEP2 フィールドの段階開示＋順次 fade-up。
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-extra-fields {
  transition: max-height var(--t-slide, 0.4s ease-in-out), opacity var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-extra-fields .csp-field {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.page-id-785 #csp-modal.csp-modal .csp-search-form.is-step2 .csp-extra-fields.active .csp-field {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
 * SP（max-width:767px）＝Menu と同方向（右からスライドイン）でテイスト統一。
 * ===================================================================== */
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: clamp(1.5rem, 1rem + 3vw, 2.5rem) clamp(1.25rem, 1rem + 2vw, 2rem);
    transform: translateX(100%);
    justify-content: flex-start;
  }
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content {
    transform: translateX(0);
  }
}

/* =====================================================================
 * PC（min-width:768px）＝右からスライドイン・右端縦パネル（Menu と同方向）。
 * [fix7①] Menu(.menu-Overlay PC = right:100px; width:calc(100%-100px); left無し) と完全同型。
 *   旧 right:var(--rail-width)101px; left:0 → right:100px; width:calc(100%-100px); left 削除。
 * ===================================================================== */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    position: fixed;
    top: 0;
    right: 100px;
    width: calc(100% - 100px);
    max-width: none;            /* プラグイン .csp-modal-content{max-width:600px} を打ち消し全画面化 */
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: clamp(2rem, 1.5rem + 4vw, 4rem) clamp(1.75rem, 1.25rem + 4vw, 5rem);
    transform: translateX(100%);
    justify-content: flex-start;
  }
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content {
    transform: translateX(0);
  }
}

/* =====================================================================
 * prefers-reduced-motion ＝ transform 移動を抑止しフェードのみ。
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    transition: opacity var(--t-base, 0.3s ease);
    transform: none;
    opacity: 0;
  }
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content {
    transform: none;
    opacity: 1;
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content,
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content {
    transform: none;
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-close,
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form {
    transform: none;
    transition: opacity var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2 .csp-cat-list {
    transform: none;
    transition: max-height var(--t-base, 0.3s ease), opacity var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn {
    opacity: 1;
    transform: none;
    transition: color var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-pinned {
    transform: none;
    transition: opacity var(--t-base, 0.3s ease), max-height var(--t-base, 0.3s ease), visibility var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-extra-fields .csp-field {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-base, 0.3s ease);
  }
}

/* ------------------------------------------------------------
 * §13-5 ＝ 利休 v5（CTA「検索する」: ブルー地に映える橙地 × 白文字）。
 * ------------------------------------------------------------ */
.page-id-785 #csp-modal .csp-modal-content .csp-field.csp-submit {
  width: 100%;
  box-sizing: border-box;
  flex-basis: auto;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}
/* [②] STEP1（カテゴリ選択画面）では「検索する」を非表示。カテゴリ選択後(.is-step2)に表示 */
.page-id-785 #csp-modal .csp-modal-content .csp-search-form:not(.is-step2) .csp-field.csp-submit {
  display: none;
}
.page-id-785 #csp-modal .csp-search-form .csp-field.csp-submit .btn {
  background: var(--color-brand-orange);
  color: var(--color-brand-white);   /* 検索するボタン：白抜き文字（2026-06-18） */
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill, 60px);
  padding: 14px 40px;
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: background var(--t-base);
}
.page-id-785 #csp-modal .csp-search-form .csp-field.csp-submit .btn:hover {
  background: var(--color-orange-hover);
}
/* ============================ §13-4/§13-5 置換ブロック終了 ============================ */

/* =====================================================================
 * §13-6 ＝ 検索モーダルロゴ注入（利休 v5 / ヘッダー・Menu と同位置 left:80/top:20）。
 *   ※[fix7①] PC content は left を指定せず right:100px 起点だが、fixed の left は実効 0 相当で
 *     絶対ロゴの left:80 基準は維持される（ロゴ位置は不変・確認のみ）。
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo {
  position: absolute;
  top: 20px;
  left: 80px;
  z-index: 2;
  width: 202px;
  max-width: 50%;
  margin: 0;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-modal-logo {
  opacity: 1;
  transform: translateY(0);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo {
    top: 10px;
    left: 14px;
    width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo {
    transform: none;
    transition: opacity var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-modal-logo {
    transform: none;
  }
}
/* ============================ §13-6 検索モーダルロゴ 終了 ============================ */

/* ============================ Menu ロゴ位置整合（利休 / Phase2 P1 / v2 実測整合）============================ */
/* ------------------------------------------------------------
 * 目的：グローバルMenu(.menu-Overlay) を開いた時のロゴを、通常ヘッダーロゴと
 *   「完全に同じ画面位置（PC実測 left:80 / top:20）」に重ね、開閉で跳ばないようにする。
 *
 * ■ 実測の真値（pre実機 PC viewport1280・getBoundingClientRect）
 *     通常ヘッダーロゴ .site-Header-pb1 .site-Logo img … left:80 / top:20  ← 全ロゴの整合先（真値）
 *     Menu開時オーバーレイロゴ（修正前）            … left:30 / top:0   ← 左50px・上20px ズレ
 *
 * ■ left=80 の構成根拠（home.css を精読して確定。理論値20は誤り）
 *     ヘッダーは position:fixed; left:0（home.css:91-98）で viewport 全幅（vw=1280）。
 *     その中の .wrapper は base 規則で max-width:1160px(--container-max-width / design-tokens.core.css:199),
 *       width:100%, margin:0 auto（home.css:26-37）＝全幅 fixed の中で「中央寄せ」される。
 *       -> wrapper 左端 = (1280 - 1160) / 2 = 60px
 *     .wrapper padding-left = --container-padding-x-pc:20px（home.css:34 / design-tokens.core.css:200）
 *       -> 60 + 20 = 80px ＝ 実測 left:80 に一致（縦は .site-Logo margin-top:20px / home.css:102 ＝ top:20）。
 *
 * ■ なぜ Menu は left:30 に落ちるか（前回 left=20 想定の誤りの真因）
 *     .menu-Overlay は PC で right:100px; width:calc(100%-100px)＝幅1180・左端 viewport 0（home.css:1507）。
 *     その .wrapper も同 base 規則で max-width:1160; margin:0 auto ＝ 1180 の中で中央寄せ
 *       -> wrapper 左端 = (1180 - 1160) / 2 = 10px ＋ padding-left 20 = 30px ＝ 実測 left:30。
 *     => 前回 fix は「両者 padding-left:20 のみで left:20 一致」と誤認（.wrapper の margin:0 auto 中央寄せを失念）。
 *        ヘッダーは vw=1280 で中央寄せ->オフセット60、Menu は vw'=1180 で中央寄せ->オフセット10。差は常に
 *        (1280 - 1180)/2 = 50px（レール100pxの半分）。これが left:80 - left:30 = 50px の正体。
 *
 * ■ 修正：この「中央寄せオフセット差 = 50px」を margin-left:50px で吸収し、Menu ロゴを left:80 に揃える。
 *     50px は viewport 幅に依存しない定数（両 wrapper が max-width:1160 に張り付く PC 幅域で成立）。
 *     縦は margin-top:20px をヘッダーと同値にして top:0->20 を解消（前回踏襲）。
 *     ※ .site-Logo はオーバーレイの flex column 直下要素で、下に margin-bottom:20px の spacer を持つため、
 *        flow を崩す position:absolute は使わず margin で寄せる（既存 fade-up transform/transition は無改変で温存）。
 *
 * 配置：home.css §12 既存「.menu-Overlay .site-Logo{...margin-bottom:20px}」(1513) と
 *   SP override(1519-1521) の直後に追記。id 込み同詳細度・後勝ち・important 不使用・プラグイン非依存。
 * ------------------------------------------------------------ */

/* PC：縦＝ヘッダー .site-Logo margin-top:20px に合わせ top:0->20 を解消。
   横＝ヘッダー(中央寄せオフセット60)と Menu(同10)の差 50px を margin-left:50px で吸収し left:30->80 に整合。 */
.page-id-785 .menu-Overlay .site-Logo {
  margin-top: 20px;
  margin-left: 50px;
}

/* SP：max-width:767px では .wrapper が width:100%（中央寄せ無し）になり両者フラット左寄せ＝オフセット差ゼロ。
   ヘッダー SP 値（margin-top:10 / margin-left:14・home.css:130-133）に合わせる（既存 -5px/0 を上書き）。 */
@media screen and (max-width: 767px) {
  .page-id-785 .menu-Overlay .site-Logo {
    margin-top: 10px;
    margin-left: 14px;
  }
}
/* ============================ Menu ロゴ位置整合 終了 ============================ */


/* ============================================================
 * [fix7] §13 外の修正 — ⑤レール z-index ／ ⑦MV 検索ボックス前面化
 *   ※ extra.css は home.css へ「追記」する形を基本とする（既存ルールの後勝ち上書き）。
 *     ただし ⑦は既存ルールに property を足すのが安全（下記「適用方法」参照）。
 * ============================================================ */

/* ------------------------------------------------------------
 * ⑤ Search 開 → Menu 押で Menu が開くように（CSS 側）。
 *   原因：検索パネル #csp-modal(z-index:100010) が レール #main-Nav(z-index:100002) より前面で、
 *         menuBtn が検索パネル（暗幕領域）の裏に入り、クリックが検索側へ吸われていた。
 *   対策：レール #main-Nav を検索パネルより前面（100020）へ。これで menuBtn が常にクリック可能になる。
 *
 *   適用方法（どちらか）：
 *     (a) home.css:1352 の「.page-id-785 #main-Nav { ... z-index: 100002; }」の値を 100020 に直接変更。
 *     (b) home.css 末尾へ下記ルールを追記して後勝ち上書き（id1+class1=1,1,0 で既存 1,1,0 と同詳細度・後勝ち）。
 *   → リスク最小は (a)（重複ルールを残さない）。本ファイルは (b) 形式で提示。
 *
 *   副作用確認（z-index ランドスケープ）:
 *     header .site-Header-pb1 = 5000
 *     .menu-Overlay           = 100000
 *     #main-Nav .sp-Footer.visible = 100001（#main-Nav 子・別ルール、本変更で不変）
 *     .menu-Overlay (Cocoon FAB 上)= 100000
 *     #csp-modal              = 100010
 *     #main-Nav .nav-content（1419）= 100003（#main-Nav 子・別ルール、本変更で不変）
 *     #main-Nav（変更後）      = 100020 ← 最前。レールは「常時最前」設計（§12 コメント）に合致。
 *   → レール(100020) > 検索(100010) > sp-Footer(100001) > Menu(100000)。
 *     レールは元々「オーバーレイより上の常時最前レール」(§12 設計)なので Menu(100000)より上は意図通り。
 *     検索(100010)を跨いで上に出るのが本変更の主目的。sp-Footer/nav-content は #main-Nav の
 *     子孫で別 stacking のため #main-Nav 自身の値変更では相対順序は崩れない。
 * ------------------------------------------------------------ */
.page-id-785 #main-Nav {
  z-index: 100020;
}

/* ------------------------------------------------------------
 * ⑦ MV 検索ボックスを MV 画像より前面に確定。
 *   home.css:1113「.page-id-785 #main-Visual form」と
 *   home.css:1105「.page-id-785 #main-Visual > h1」に z-index を付与。
 *   form は既に position:absolute、h1 は position 指定が無いため position:relative を付ける。
 *
 *   適用方法（推奨）：既存ルールに property を 1 行ずつ足す（Edit）か、本ファイルを末尾追記。
 *     既存 .page-id-785 #main-Visual form（1113）に  z-index: 2; を追加。
 *     既存 .page-id-785 #main-Visual > h1（1105）に position: relative; z-index: 1; を追加。
 *   ※ 末尾追記でも同詳細度・後勝ちで効くが、form の position:absolute / h1 の margin は
 *      既存ルールに残るため、追記時は下記のとおり最小プロパティのみ宣言する。
 * ------------------------------------------------------------ */
.page-id-785 #main-Visual > h1 {
  position: relative;
  z-index: 1;
}
.page-id-785 #main-Visual form {
  z-index: 2;
}

/* =====================================================================
 * §13 検索モーダル 本文「左インセット」= グローバルMenu .navi-Link li a と一致
 * 利休 v6 — 方式X（プラグイン非改変・id込み詳細度・\!important不使用）
 * ---------------------------------------------------------------------
 * 目的：検索本文（カテゴリ/フォーム/フィールド/ピン/CTA）の左端を、
 *   Menu の .navi-Link li a 左端と同一インセットにし、幅が変わっても
 *   Menu と同じカーブでスケールさせる（vw=1280 で 52.8px ≒ 53px）。
 *
 * ── Menu 側「overlay左端→navi-Link 53」内訳（vw=1280, home.css 実測値）──
 *   .menu-Overlay        : right:100px; width:calc(100%-100px) → overlay幅 1180 / 左端 0   (home.css:1507)
 *   .menu-Overlay .wrapper: base規則 max-width:1160; width:100%; margin:0 auto; padding-left:20  (home.css:26-35 / tokens 199-200)
 *        → wrapper幅 1160、1180内で中央寄せ ⇒ 左margin (1180-1160)/2 = 10
 *        → wrapper content 左 = 10 + 20(padding) = 30、content幅 = 1160-20 = 1140
 *   .navi-Link           : display:flex; justify-content:center; flex-wrap:wrap  (home.css:1535-1544)
 *   .navi-Link li        : PC で width:48%  (home.css:1547)
 *        → li 2列 = 2×0.48×1140 = 1094.4、余白 = 1140-1094.4 = 45.6
 *        → justify-content:center ⇒ 先頭liの前 = 45.6/2 = 22.8
 *   ∴ navi-Link li a 左 = 30 + 22.8 = 52.8 ≒ 53  （= 30 + 0.02×1140）
 *      ※ 22.8 は wrapper content幅(1140)の 2%。幅が変われば 2% も追従＝Menu はこの式でスケール。
 *
 * ── 検索側の再現（同じ式へ収束）──
 *   .csp-modal-content は既に Menu と同じ overlay箱（right:100px; width:calc(100%-100px)）。
 *   そこで本ブロックは：
 *     (A) .csp-modal-content の左右 padding を 0 にする（縦 padding は維持）。
 *         → 現行 padding:clamp(2rem,1.5rem+4vw,4rem) clamp(1.75rem,1.25rem+4vw,5rem) が左 71.2px の原因。撤去。
 *     (B) .csp-search-form を Menu .wrapper と同型化：max-width:1160; width:100%; margin:0 auto; padding-left:20。
 *         → form content 左 = 中央寄せ10 + padding20 = 30（vw=1280）。
 *     (C) form 直下の本文要素（cat-list/search-box/extra-fields/cat-pinned/submit）に padding-left:2% を付与。
 *         → % は form content幅(1140)基準 ⇒ 22.8px。∴ 本文左 = 30 + 22.8 = 52.8 ＝ Menu と完全一致・同カーブ。
 *   ※ Python 検算（vw=1280/1440/1024/820）で menu_navlink_left == search_child_left（差<0.01px）を確認済。
 *
 * ── 読み幅（フィールド間延び防止）──
 *   左インセットは Menu 一致（form＝1160 wrapper）。各フィールドの読み幅は別管理：
 *   各本文要素の中身（search-box / extra-fields / cat-pinned）に max-width を与え、
 *   左 53 に揃えつつ右側が間延びしないようにする（カテゴリ見出し・CTA は従来通り）。
 *
 * 詳細度：.page-id-785 #csp-modal.csp-modal(.active) .csp-modal-content … = 1,4,0 で
 *   プラグイン 0,3,0 を \!important 無しで上書き（§13-4 と同方針）。
 * ===================================================================== */

/* (A) PC：modal-content の横 padding を撤去（縦は維持）。Menu .wrapper 方式に置換するため。 */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    padding-top: clamp(2rem, 1.5rem + 4vw, 4rem);
    padding-bottom: clamp(2rem, 1.5rem + 4vw, 4rem);
    padding-left: 0;
    padding-right: 0;
  }
}

/* (B) PC：search-form を Menu .wrapper と同型化（max-width:1160 / margin:0 auto / padding-left:20）。
   max-width を 560→1160 に変更し overlay 内で中央寄せ。読み幅は (D) で各要素に持たせる。 */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form {
    max-width: var(--container-max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x-pc);
    padding-right: var(--container-padding-x-pc);
    box-sizing: border-box;
  }
}

/* (C) PC：本文インセットは form 直下の .csp-search-box 1箇所のみに padding-left:2%
   （form content幅 1140 基準 ⇒ 22.4px）。cat-list/cat-pinned/extra-fields/submit は
   いずれも search-box の直下childのため、ここに付けると二重インセット（実機 64px）に
   なる。search-box 単一適用で本文左 = 30 + 22.4 = 52.4 ＝ Menu navi-Link li a と一致。 */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-search-box {
    padding-left: 2%;
    box-sizing: border-box;
  }
}

/* (D) PC：読み幅（フィールド間延び防止）。左は 53 に揃えたまま、各コントロールの右最大幅を制御。
   旧 .csp-search-form{max-width:560px} の役割をここへ移譲（左インセットと両立）。 */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-search-box,
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-extra-fields,
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-cat-pinned {
    max-width: calc(560px + 2%);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-field.csp-submit {
    max-width: calc(560px + 2%);
    justify-content: flex-start;
  }
}

/* (E) SP（max-width:767）：Menu SP は .wrapper が width:100%・padding-left:16px（中央寄せ無し・
   navi-Link は justify-content:center だが li 幅指定が PC 限定のため左基準は wrapper padding=16 相当）。
   よって検索 SP も左インセット 16px に統一（PC の 2% 余白は SP では付与しない）。 */
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    padding-top: clamp(1.5rem, 1rem + 3vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 1rem + 3vw, 2.5rem);
    padding-left: var(--container-padding-x-sp);
    padding-right: var(--container-padding-x-sp);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================================
 * §13 検索モーダル ユーザー指摘5点 修正（利休 / Phase2 P1 fix5）
 * 方式X（プラグイン非改変・id込み詳細度・important不使用・.page-id-785 スコープ）
 *
 * 適用方法：home.css の各既存ルールを「変更」または「末尾追記で後勝ち上書き」。
 *   下記は既存ルールの該当 property だけを再宣言した後勝ちブロック（id込み同詳細度・後勝ち）。
 *   既存ルールを直接 Edit する場合の対象行は各ブロック冒頭コメントに明記。
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * (1) ロゴ位置・サイズを Menu と完全一致（全幅で同カーブに収束）
 *   既存：home.css:2158-2164（.csp-modal-logo position:absolute; top:20; left:80px; width:202px;）
 *         home.css:2180-2185（SP override）
 *
 *   根拠（home.css 精読・実測整合済）
 *     Menu ロゴ絶対left = (overlay幅 - 1160)/2 + padding20 + site-Logo margin-left50
 *       overlay幅 = calc(100vw - 100px)（.menu-Overlay PC：right:100px;width:calc(100%-100px) / home.css:1507）
 *       wrapper 中央寄せオフセット = (overlay幅-1160)/2、wrapper padding-left=20（home.css:34）、
 *       .site-Logo margin-left=50（home.css:2237）。vw=1280 -> (1180-1160)/2+20+50 = 80 ＝実測一致。
 *     Menu ロゴ width = clamp(9.813rem,8.766rem+5.23vw,12.625rem)（home.css:1523）。
 *
 *   検索ロゴの一致式
 *     .csp-modal-logo は position:absolute、offset parent=.csp-modal-content
 *     （PC：right:100px;width:calc(100%-100px) ＝ Menu overlay と同一箱・左端 viewport0 / home.css:2057-2070）。
 *     よって logo の 100% = content幅 = overlay幅。Menu と同じ式を left に展開すれば全幅で一致・同カーブ。
 *       left = calc((100% - 1160px)/2 + 20px + 50px)
 *     固定 202px / 固定 left:80px を廃止し、clamp 幅と式 left に置換。top:20 は維持（Menu 一致）。
 * --------------------------------------------------------------------- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo {
  /* 固定202px -> Menu と同 clamp。固定 left:80px -> Menu 同式（中央寄せ＋padding20＋marginL50）。 */
  width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem);
  left: calc((100% - var(--container-max-width)) / 2 + var(--container-padding-x-pc) + 50px);
  max-width: none;   /* 旧 max-width:50% を解除（clamp 上限で頭打ち制御するため不要） */
}
/* SP：Menu SP ロゴは margin-top:10 / margin-left:14（home.css:2244-2245）。検索 SP も left:14/top:10 に揃える。
   幅は Menu と同 clamp。SP は .wrapper 中央寄せ無し＝フラット左寄せのため左基準は 14px の固定で一致。 */
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-modal-logo {
    top: 10px;
    left: 14px;
    width: clamp(9.813rem, 8.766rem + 5.23vw, 12.625rem);
    max-width: none;
  }
}


/* ---------------------------------------------------------------------
 * (2) 閉じる挙動を Menu に合わせる（即時消え -> 0.4s スライドアウト）
 *   既存：home.css:1738-1745（.page-id-785 #csp-modal.csp-modal{ transition: opacity var(--t-base...) }）
 *
 *   原因（確定事実）
 *     プラグイン .csp-modal は visibility:hidden / .active で visible だが
 *     transition 対象に visibility が無い（custom-search.css:94-117）。テーマ override(1744) も
 *     opacity のみ。よって閉じる瞬間 visibility が即 hidden になり、.csp-modal-content の
 *     translateX(0->100%) 0.4s スライド（home.css:1755）が見えず一瞬で消える。
 *     Menu(.menu-Overlay) は visibility を使わず transform のみ＝0.4s スライドが見える。
 *
 *   対策：transition に visibility を 0.4s で含める（開く時：visible は即時反映／
 *     閉じる時：0.4s 後まで visible を保持しスライドアウトを見せる）。opacity も --t-slide に同調。
 *     clip-path は既に none 化済み（1740）で維持。
 * --------------------------------------------------------------------- */
.page-id-785 #csp-modal.csp-modal {
  transition: opacity var(--t-slide, 0.4s ease-in-out),
              visibility var(--t-slide, 0.4s ease-in-out);
}


/* ---------------------------------------------------------------------
 * (4) ホバー下線の調整（速く出る・テキスト幅に収める）
 *   既存：home.css:1925-1946（.csp-cat-btn 本体・display:block;width:100%;
 *         transition ... background-size .3s ease ...）
 *         home.css:1955-1958（:hover/:focus-visible background-size:100% 4px）
 *
 *   (a) 出る/消えるを速く：background-size の transition を .3s -> .2s ease。
 *       他 property（opacity/transform/color）は据え置き、background-size のみ短縮。
 *   (b) 下線をテキスト幅に収める：cat-btn を display:block;width:100% -> inline-block;width:fit-content。
 *       background-size:100% = テキスト幅となり下線がテキスト分だけになる。text-align:left の
 *       左揃えは維持（li 内で左寄せ・hover/クリック領域はテキスト幅で可）。
 * --------------------------------------------------------------------- */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn {
  /* (b) 下線=テキスト幅。block/width:100% を上書き。 */
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  /* (a) 下線アニメを速く。既存 transition の background-size 区間のみ .3s -> .2s。
     他区間（opacity/transform/color）は元値を踏襲して再宣言。 */
  transition: opacity .3s ease-out,
              transform .3s ease-out,
              background-size .2s ease,
              color var(--t-base, 0.3s ease);
}


/* ---------------------------------------------------------------------
 * (6) Search 開いている間、右レールの Search 以外を半透明化（opacity:0.4）
 *   新規ルール。body.csp-search-active を JS（MutationObserver）が付与/除去（プラグイン非改変・class監視のみ）。
 *   #main-Nav は DOM 上 #csp-modal より前のため先祖/兄弟セレクタ不可 -> body class フラグ方式。
 *   Search ボタン(.top-Level-Search)は除外＝通常 opacity を維持。
 * --------------------------------------------------------------------- */
body.csp-search-active.page-id-785 #main-Nav .g-Navigation .top-Level:not(.top-Level-Search) {
  opacity: 0.4;
  transition: opacity var(--t-base, 0.3s ease);
}


/* =====================================================================
 * (7) カテゴリ先頭アイコン ＋ 下線さらに高速化（利休 / icons）
 *   対象：home.css §13 の .csp-cat-btn（本体 1925-1946 / hover 1955-1958 / §13-override 2494-2505）
 *
 *   方針（方式X・プラグイン非改変・!important不使用・.page-id-785 スコープ・id込み詳細度で勝つ）
 *     - JS(home-search-progressive.js) が button 内を
 *         <span class="csp-cat-icon" aria-hidden><svg .csp-cat-icon-svg/></span>
 *         <span class="csp-cat-label">{ラベル}検索</span>
 *       の2span構成で生成（アイコン=装飾 / ラベル=テキスト）。
 *     - cat-btn を inline-flex 化しアイコン＋テキストを縦中央で横並べ（fit-content 維持）。
 *     - 下線(background-size アニメ)は button から .csp-cat-label へ移設し「テキスト分だけ」に収める。
 *       button 側の既存グラデ(1939-1942/1957)は background-image:none で無効化（下線が icon まで伸びない）。
 *     - (a) 下線 transition を .2s -> .12s ease-out（出る/消える両方・snappy）。delay は付けない(=0)。
 * --------------------------------------------------------------------- */

/* cat-btn：inline-flex でアイコン＋テキストを並べる。button 自身の下線グラデは無効化。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  max-width: 100%;
  /* button 本体の下線グラデを無効化（下線は .csp-cat-label に移設）。 */
  background-image: none;
  background-size: auto;
  /* 既存 transition のうち background-size 区間は label へ移ったため button からは外す。
     opacity/transform/color は §13 本体の挙動を踏襲して再宣言（fade-up・色 hover を温存）。 */
  transition: opacity .3s ease-out,
              transform .3s ease-out,
              color var(--t-base, 0.3s ease);
}
/* hover/focus 時の button 側 background-size:100%（1957）は無効化（label が下線を担う）。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:hover,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:focus-visible {
  background-size: auto;
}

/* 先頭アイコン：テキストと同色(currentColor=白)・縦中央・テキストとの間隔は gap で確保。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn .csp-cat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  color: currentColor;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn .csp-cat-icon .csp-cat-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

/* ラベルテキスト：下線(background-size アニメ)をここに移設。テキスト幅基準で出る。 */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn .csp-cat-label {
  display: inline;
  background-image: linear-gradient(to right, var(--color-brand-white), var(--color-brand-white));
  background-repeat: no-repeat;
  background-position: left 1.3em;
  background-size: 0 4px;
  /* (a) さらに高速化：.2s -> .12s ease-out。出る/消える両方。delay 無し。 */
  transition: background-size .12s ease-out;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:hover .csp-cat-label,
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn:focus-visible .csp-cat-label {
  background-size: 100% 4px;
}


/* =====================================================================
 * [2026-06-18] SP検索モーダル：下からスライドイン（青地は維持）。
 *   固定フッター由来・MV検索ボックス由来とも統一（黒川さん指定）。
 *   PC(min-width:768)は右スライドのまま（本ブロックはSP限定）。
 *   固定フッター(52px)に隠れないよう下余白を確保。
 * ===================================================================== */
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    transform: translateY(100%);
    padding-bottom: calc(52px + 1.5rem);
  }
  .page-id-785 #csp-modal.csp-modal.active .csp-modal-content {
    transform: translateY(0);
  }
}

/* =====================================================================
 * [2026-06-18] 検索モーダル：テキストを中央寄せ（黒川さん指定）
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal .csp-modal-content {
  text-align: center;
}

/* =====================================================================
 * [2026-06-18] SP検索モーダル：フォーム(.csp-search-form max-width:560)が
 *   左寄せ（flex cross-axis=start）だったため、中央寄せして .csp-search-box
 *   ごと中央へ。PC(min-width:768)はMenu基準の左インセット維持のため対象外。
 * ===================================================================== */
@media screen and (max-width: 767px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    align-items: center;
  }
}

/* =====================================================================
 * [2026-06-18] PC検索フォームもモーダル中央へ（SP中央寄せと統一・黒川さん指定）
 *   旧Menu基準の左インセット（.csp-search-box padding-left:2% / 子の左寄せ）を解除し中央寄せ。
 * ===================================================================== */
@media print, screen and (min-width: 768px) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content {
    align-items: center;
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form {
    align-items: center;
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-search-box {
    padding-left: 0;
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form .csp-field.csp-submit {
    justify-content: center;
  }
}

/* =====================================================================
 * [v6 2026-06-18] カテゴリ遷移 reduced-motion：transform/collapse の動きを抑止しフェードのみ。
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-dropped {
    transform: none;
    transition: opacity var(--t-base, 0.3s ease), max-height var(--t-base, 0.3s ease),
                margin var(--t-base, 0.3s ease), padding var(--t-base, 0.3s ease);
  }
  .page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-btn.is-picked {
    transform: none;
    transition: color var(--t-base, 0.3s ease);
  }
}

/* =====================================================================
 * [v7 2026-06-18] 条件群はカテゴリ collapse 完了(cond-ready)まで隠し、出現順を確定。
 *   非選択カテゴリが消える → 選択がせり上がる → 条件(コンテナ/各field/検索する)が出る。
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2:not(.cond-ready) .csp-extra-fields {
  max-height: 0 !important;
  opacity: 0;
  overflow: hidden;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2:not(.cond-ready) .csp-field.csp-submit {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2.cond-ready .csp-extra-fields {
  opacity: 1;
  transition: max-height var(--t-slide, 0.4s ease-in-out), opacity var(--t-base, 0.3s ease);
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-search-form.is-step2.cond-ready .csp-field.csp-submit {
  max-height: 120px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transition: opacity var(--t-base, 0.3s ease), max-height var(--t-slide, 0.4s ease-in-out);
}

/* =====================================================================
 * [v9 2026-06-18] カテゴリ出現stagger（CSSで確定的に）。
 *   step1(:not(.is-step2))のみ適用。step2の消える/せり上がりは is-dropped/is-picked 側で制御。
 *   ※JSのinline遅延はMutationObserver timingで効かない事があったためCSSへ移管。
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form:not(.is-step2) .csp-cat-list li:nth-child(1) .csp-cat-btn { transition-delay: 0.50s; }
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form:not(.is-step2) .csp-cat-list li:nth-child(2) .csp-cat-btn { transition-delay: 0.62s; }
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form:not(.is-step2) .csp-cat-list li:nth-child(3) .csp-cat-btn { transition-delay: 0.74s; }
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form:not(.is-step2) .csp-cat-list li:nth-child(4) .csp-cat-btn { transition-delay: 0.86s; }
.page-id-785 #csp-modal.csp-modal.active .csp-modal-content .csp-search-form:not(.is-step2) .csp-cat-list li:nth-child(5) .csp-cat-btn { transition-delay: 0.98s; }

/* =====================================================================
 * [v11 2026-06-18] 非選択カテゴリの <li> を max-height で滑らかに畳む。
 *   ボタンは inline-block ゆえ max-height:0 でも li の行ボックス高さが残る。
 *   li 自体を固定値(5em)→0 で遷移＝往復なめらか＋残り高さ完全除去（display:none不要）。
 * ===================================================================== */
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-list li {
  max-height: 5em;
  overflow: hidden;
  transition: max-height var(--t-slide, 0.4s ease-in-out) 0.1s,
              margin var(--t-slide, 0.4s ease-in-out) 0.1s,
              padding var(--t-slide, 0.4s ease-in-out) 0.1s;
}
.page-id-785 #csp-modal.csp-modal .csp-modal-content .csp-cat-list li:has(.csp-cat-btn.is-dropped) {
  max-height: 0;
  margin: 0;
  padding: 0;
}

/* =====================================================================
   AREA セクション（トップ：エリアから探す）
   home.css に追記する想定。全セレクタを .page-id-785 にスコープする。
   テーマ未使用の命名（area- / pref- / region-）を維持。
   フォントはテーマ側で供給（font-family 指定のみ）。
   Plato ブランド是正反映：
     1) CTA（arrow-Link）= 白ピル＋青文字、hoverで青地#0050E0白文字（オレンジCTA廃止）
     2) #BC5300 トークン廃止
     3) 和文サブ見出し = weight700・オレンジ丸ドット ::before（#EF6A00・約10px・padding-left:15px）・文字色 白
     4) セクション非対称大角丸を 90px 系に
   県ハイライト #EF6A00 / region塗り #FF933D（AA例外・承認済）/ SP全県白+青境界 は維持。
   ===================================================================== */

.page-id-785{
  /* ローカルトークン（#BC5300 は廃止し定義しない） */
  --area-brand-blue:#003594;
  --area-brand-blue-hover:#0050E0;
  --area-brand-orange:#EF6A00;
  --area-orange-light:#FF933D;   /* region塗り：AA例外・承認済 */
  --area-ink:#161414;
  --area-white:#ffffff;
  --area-section-bg-blue:#003594;
  --area-radius-pill:999px;
  --area-shadow-soft:rgba(0,0,0,.18);
  --area-t:.25s cubic-bezier(.22,.61,.36,1);
  --area-font-jp:"Noto Sans JP",system-ui,sans-serif;
  --area-font-en:"Poppins","Noto Sans JP",sans-serif;
}

/* ===== Section（青地の世界観）===== */
/* Plato#4：非対称大角丸を 90px 系に */
.page-id-785 .area-Bg{
  background:var(--area-section-bg-blue);
  padding:88px 0 96px;
  border-top-left-radius:90px;
  overflow:hidden;
  position:relative;
}
.page-id-785 .area-Bg .wrapper{
  width:min(1080px,92vw);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
}

/* ===== 見出し ===== */
.page-id-785 .area-Bg .content-Title{
  font-family:var(--area-font-en);
  font-weight:700;
  font-size:clamp(2.4rem,4vw,3.4rem);
  line-height:1.05;
  color:var(--area-white);
  letter-spacing:.01em;
  margin:0 auto 8px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* Plato#3：和文サブ = weight700・白文字・オレンジ丸ドット ::before 復活 */
.page-id-785 .area-Bg .content-Title span{
  font-family:var(--area-font-jp);
  font-weight:700;
  font-size:clamp(.85rem,1.6vw,1rem);
  letter-spacing:.18em;
  color:var(--area-white);
  margin-top:10px;
  position:relative;
  padding-left:15px;
  display:inline-flex;
  align-items:center;
}
.page-id-785 .area-Bg .content-Title span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--area-brand-orange);
}
.page-id-785 .area-Bg .area-Lead{
  color:rgba(255,255,255,.82);
  font-size:.95rem;
  margin:6px 0 40px;
  max-width:640px;
}

/* ===== Map ===== */
.page-id-785 .area-Bg .map-Stage{
  position:relative;
  width:100%;
}
.page-id-785 .area-Bg .japan-map{
  width:100%;
  height:auto;
  display:block;
  max-width:820px;
  margin-inline:auto;
  overflow:visible;
}
.page-id-785 .area-Bg .japan-map .prefecture{
  cursor:pointer;
  outline:none;
}
.page-id-785 .area-Bg .japan-map .prefecture polygon,
.page-id-785 .area-Bg .japan-map .prefecture path{
  fill:rgba(255,255,255,.92);
  stroke:var(--area-brand-blue);
  stroke-width:1;
  transition:fill var(--area-t);
}
/* hover / focus → オレンジ（青地に映えるライト寄り＝region塗り #FF933D） */
.page-id-785 .area-Bg .japan-map .prefecture:hover polygon,
.page-id-785 .area-Bg .japan-map .prefecture:hover path,
.page-id-785 .area-Bg .japan-map .prefecture:focus-visible polygon,
.page-id-785 .area-Bg .japan-map .prefecture:focus-visible path{
  fill:var(--area-orange-light);
}
/* active（ポップオーバー表示中の県）= ブランドオレンジ #EF6A00 */
.page-id-785 .area-Bg .japan-map .prefecture.is-active polygon,
.page-id-785 .area-Bg .japan-map .prefecture.is-active path{
  fill:var(--area-brand-orange);
  stroke:#fff;
  stroke-width:1.4;
}

/* ===== Popover ===== */
/* z-index: popover=100008 / backdrop=100007（テーマヘッダ等より前面に出すための高位レイヤー） */
.page-id-785 .pref-Popover{
  position:fixed;                 /* fixed=祖先 .area-Bg の overflow:hidden クリップ外で表示（NewArrival背面潜り対策）。座標は home-area-map.js が viewport 基準で算出 */
  z-index:100008;                /* popover 本体（最前面） */
  width:268px;
  background:var(--area-white);
  border-radius:24px;
  box-shadow:0 18px 48px 4px var(--area-shadow-soft);
  padding:18px 18px 20px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px) scale(.96);
  transform-origin:var(--pop-origin,center top);
  transition:opacity var(--area-t),transform var(--area-t),visibility var(--area-t);
  pointer-events:none;
}
.page-id-785 .pref-Popover.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* small pointer（既定：上向き＝popoverはアンカー点の下） */
.page-id-785 .pref-Popover::before{
  content:"";
  position:absolute;
  top:-9px;
  left:var(--arrow-x,32px);
  width:18px;height:18px;
  background:var(--area-white);
  transform:rotate(45deg);
  border-radius:4px 0 0 0;
}
/* 上方向へフリップした場合（popoverがアンカー点の上）：矢印を下向きに */
.page-id-785 .pref-Popover.is-flip::before{
  top:auto;
  bottom:-9px;
  border-radius:0 0 4px 0;
}
.page-id-785 .pref-Popover .pop-Head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:1px solid #eef0f5;
}
.page-id-785 .pref-Popover .pop-Title{
  font-family:var(--area-font-jp);
  font-weight:700;
  font-size:1.18rem;
  color:var(--area-brand-blue);
  margin:0;
  line-height:1.2;
  min-width:0;
  flex:1 1 auto;                 /* 親 .pop-HeadLeft 幅まで伸長させ、初回描画から県名を全文表示（flex:0 1 auto だと content幅72pxで頭打ち→ellipsis化していた） */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.page-id-785 .pref-Popover .pop-Close{
  border:none;
  background:#f1f3f8;
  color:var(--area-ink);
  width:30px;height:30px;
  border-radius:var(--area-radius-pill);
  font-size:1.05rem;line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  transition:background var(--area-t),color var(--area-t);
}
/* Plato#1/#2：hover を青系に（オレンジ・#BC5300 廃止） */
.page-id-785 .pref-Popover .pop-Close:hover{background:var(--area-brand-blue-hover);color:#fff}
.page-id-785 .pref-Popover .pop-Links{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:8px;
}
.page-id-785 .pref-Popover .pop-Links a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:var(--area-radius-pill);
  background:#f5f7fb;
  color:var(--area-ink);
  text-decoration:none;
  font-weight:500;
  font-size:.92rem;
  transition:background var(--area-t),color var(--area-t),transform var(--area-t);
}
.page-id-785 .pref-Popover .pop-Links a:hover{
  background:var(--area-brand-blue);
  color:#fff;
  transform:translateX(2px);
}
.page-id-785 .pref-Popover .pop-Links a .ic{
  flex:0 0 auto;width:18px;height:18px;color:currentColor;
}
.page-id-785 .pref-Popover .pop-Links a .label{flex:1}
.page-id-785 .pref-Popover .pop-Links a .arr{opacity:.55;font-size:.8rem}

/* ===== Popover：戻るボタン（SP 県一覧 ⇄ 種別の行き来）===== */
.page-id-785 .pref-Popover .pop-Back{
  border:none;
  background:#f1f3f8;
  color:var(--area-brand-blue);
  height:30px;
  padding:0 12px 0 8px;
  border-radius:var(--area-radius-pill);
  font-family:var(--area-font-jp);
  font-weight:600;
  font-size:.82rem;line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:4px;
  transition:background var(--area-t),color var(--area-t);
}
.page-id-785 .pref-Popover .pop-Back::before{content:"\2190";font-size:1rem;line-height:1}
.page-id-785 .pref-Popover .pop-Back:hover{background:var(--area-brand-blue);color:#fff}
.page-id-785 .pref-Popover .pop-Back[hidden]{display:none}
.page-id-785 .pref-Popover .pop-HeadLeft{display:flex;align-items:center;gap:10px;min-width:0}

/* ===== Popover：県一覧ピル（SP STEP1.5：地方→県）===== */
.page-id-785 .pref-Popover .pop-Links.is-prefs a{
  justify-content:space-between;
  font-weight:700;
  color:var(--area-brand-blue);
}
.page-id-785 .pref-Popover .pop-Links.is-prefs a:hover{color:#fff}

/* ===== Backdrop（SP モーダル時に使用）===== */
/* z-index 100007：popover(100008) の直下、ページコンテンツより前面 */
.page-id-785 .pop-Backdrop{
  position:fixed;inset:0;
  background:rgba(0,15,45,.45);
  opacity:0;visibility:hidden;
  transition:opacity var(--area-t),visibility var(--area-t);
  z-index:100007;
}
.page-id-785 .pop-Backdrop.is-open{opacity:1;visibility:visible}

/* ===== CTA ===== */
/* Plato#1/#2：白ピル＋青文字、hoverで青地#0050E0白文字。オレンジCTA・#BC5300 廃止 */
.page-id-785 .area-Bg .arrow-Link{
  align-self:flex-end;
  margin-top:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--area-white);
  color:var(--area-brand-blue);
  border:1px solid rgba(255,255,255,.0);
  font-weight:600;
  font-size:.95rem;
  padding:14px 28px;
  border-radius:var(--area-radius-pill);
  text-decoration:none;
  transition:background var(--area-t),color var(--area-t),transform var(--area-t);
}
.page-id-785 .area-Bg .arrow-Link::after{content:"\2192";font-size:1.05rem;position:static;width:auto;height:auto;margin:0;background:none;inset:auto}
.page-id-785 .area-Bg .arrow-Link:hover{
  background:var(--area-brand-orange);   /* hover=ブランドオレンジ#EF6A00（白文字AA例外・ユーザー指定2026-06-19）*/
  color:#fff;
  transform:translateX(3px);
}

/* ===== SP（〜767px）===== */
@media (max-width:767px){
  /* Plato#4：SP の非対称角丸も 90px 系に揃える */
  .page-id-785 .area-Bg{padding:56px 0 64px;border-top-left-radius:60px}
  .page-id-785 .area-Bg .content-Title{align-items:center;text-align:center;margin-inline:auto}
  .page-id-785 .area-Bg .content-Title span{align-self:center}
  .page-id-785 .area-Bg .area-Lead{margin-inline:auto;text-align:center}
  .page-id-785 .area-Bg .arrow-Link{align-self:center}

  /* SP では地図を残し、地方ブロックのセレクタとして使う。 */
  .page-id-785 .area-Bg .map-Stage{display:block}

  /* SP：全都道府県 白塗り＋地方境を青線で区切るブロック表現 */
  .page-id-785 .area-Bg .japan-map .prefecture polygon,
  .page-id-785 .area-Bg .japan-map .prefecture path{
    fill:#ffffff;                       /* 全都道府県 白塗り */
    stroke:rgba(0,53,148,.14);          /* 地方内の県境＝淡いブルー（ほぼ白） */
    stroke-width:.5;
    transition:fill var(--area-t);
    paint-order:stroke fill;
  }
  /* 地方ブロック外周を太い青で縁取り（塊の外周だけが青く立つ） */
  .page-id-785 .area-Bg .japan-map .prefecture[data-region]:not(.is-region-on) polygon,
  .page-id-785 .area-Bg .japan-map .prefecture[data-region]:not(.is-region-on) path{
    stroke:var(--area-brand-blue);
    stroke-width:1.1;
  }

  /* SP：hover/focus は地方塗りを乱さないよう無効化（タップ主体） */
  .page-id-785 .area-Bg .japan-map .prefecture:hover polygon,
  .page-id-785 .area-Bg .japan-map .prefecture:hover path,
  .page-id-785 .area-Bg .japan-map .prefecture:focus-visible polygon,
  .page-id-785 .area-Bg .japan-map .prefecture:focus-visible path{fill:#ffffff}

  /* SP：選択中の地方をオレンジでハイライト（JS が .is-region-on を付与） */
  .page-id-785 .area-Bg .japan-map .prefecture.is-region-on polygon,
  .page-id-785 .area-Bg .japan-map .prefecture.is-region-on path{
    fill:var(--area-brand-orange) !important;
    stroke:#fff;
    stroke-width:.9;
  }

  /* SP：ポップオーバー幅をSP画面に合わせてクランプ（最大 92vw） */
  .page-id-785 .pref-Popover{
    width:min(300px,92vw);
  }
  /* SP：県一覧が多い地方でも収まるよう、リンクリストに内部スクロールを許可 */
  .page-id-785 .pref-Popover .pop-Links{
    max-height:min(58vh,420px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* SP：県一覧（ピル）は2列グリッドでコンパクトに */
  .page-id-785 .pref-Popover .pop-Links.is-prefs{
    grid-template-columns:repeat(2,1fr);
  }
}

/* [2026-06-21] SP 最下部到達時にレール＋ロゴをゆっくりフェードアウト（home-globalmenu.js が .is-rail-hidden をトグル）。 */
.page-id-785 #main-Nav,
.page-id-785 .site-Header-pb1 { transition: opacity .5s ease; }
.page-id-785 #main-Nav.is-rail-hidden,
.page-id-785 .site-Header-pb1.is-rail-hidden { opacity: 0; pointer-events: none; }