/*
 * front-page.css — Hero / FV
 *
 * ブレークポイント設計:
 *   --bp-xl : 1440px  大画面（余白・フォントを若干拡大）
 *   --bp-lg : 1200px  標準PC（基準レイアウト）
 *   --bp-md : 1024px  タブレット横（フレックス比率を調整）
 *   --bp-sm :  768px  タブレット縦（縦積みに切り替え）
 *   --bp-xs :  480px  スマホ（フォント・写真サイズを縮小）
 *   481〜583px：ヒーローコピー「が起きる」「にであう」の折返し防止（専用 @media）
 *
 * クラス一覧:
 *   .hero              セクション全体。position: relative の起点
 *   .hero__inner       左右を並べるフレックスコンテナ
 *   .hero__copy        左カラム：コピーテキストエリア
 *   .hero__copy-line   テキスト1行分（--1 / --2）
 *   .hero__copy-part   各テキストパーツ（--koto / --machi / --dark）
 *   .hero__visual      右カラム：写真3枚を絶対配置するコンテナ
 *   .hero__photo       円形写真ラッパー（--lg / --md / --sm）
 *   .hero__deco        装飾円（--green-lg / --yellow-md / --green-sm / --yellow-sm）
 *
 * EVENT セクション（調整しやすいクラス）:
 *   .event-section           セクション全体・背景
 *   .event-section__inner    横の最大幅（PCで広がり調整は主にここ＋JSのSplide padding）
 *   .event-section__header   見出しラッパ（中身は共通 .section-heading）
 *   .section-heading / __title-wrap / __deco / __title-en / __title-ja … EVENT・ACCESS 共通見出し
 *   .access-section / __inner / __layout / __info / __map … ACCESS セクション
 *   .kotomachi-section / __row / __label / __cards … KOTOMACHI セクション
 *   .kotomachi-card … 画像リンクカード（::before で暗幕・hover で解除）
 *   .event-section__slider-wrap     position:relative。viewport＋矢印を内包し矢印は absolute で重ねる
 *   .event-section__slider-viewport  Splide の幅＝100%、overflow hidden、min-width:0
 *   .event-section__arrow      左右ボタン（ラッパー基準の absolute・カード上に重なる）
 *   .event-section__splide     Splide ルート（width:100% のみ。見切れは track の overflow）
 *   .event-card / .event-card__*  カード各パーツ（サムネは全幅で aspect-ratio 16/9・全体表示）
 *   .event-section__cta-link CTA ボタン本体
 *
 * Zen Maru Gothic:
 *   - 読み込みは functions.php（is_front_page のみ wp_enqueue_style）
 *   - body.kotomachi--front-page 配下の .hero / .event-section に限定（body 全体には当てない）
 */

/* ============================================================
   Zen Maru Gothic（トップページのみ）
   body に .kotomachi--front-page が付くのは is_front_page() のときのみ（functions.php）
   ============================================================ */

.kotomachi--front-page .hero,
.kotomachi--front-page .event-section,
.kotomachi--front-page .kotomachi-section,
.kotomachi--front-page .access-section {
  font-family: "Zen Maru Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* button は UA 既定でフォントが継承されないことがあるため明示 */
.kotomachi--front-page .hero button,
.kotomachi--front-page .event-section button,
.kotomachi--front-page .kotomachi-section button,
.kotomachi--front-page .access-section button {
  font-family: inherit;
}

/* ============================================================
   Base
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  background-color: #fef9f3;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero__inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100svh;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ============================================================
   左カラム：コピー
   ============================================================ */

/* コピー全体ブロック */
.hero__copy {
  flex: 0 0 46%;
  max-width: 46%;
  position: relative;
  z-index: 2;
  /* ヘッダー高さ分だけ上方向にオフセットを防ぐため上padding */
  padding-top: clamp(60px, 8vh, 100px);
}

/* 1行ずつのブロック */
.hero__copy-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  width: auto;
  max-width: 100%;
  height: auto;
  line-height: 1.2;
  margin: 0;
}

.hero__copy-line + .hero__copy-line {
  margin-top: 0.06em;
}

/* 各テキストパーツ */
/* 各ブレークポイントでベストなサイズを固定指定。vwによる比例縮小はしない。 */
.hero__copy-part {
  display: inline-block;
  font-size: 64px; /* 1440px以上の基準サイズ */
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  width: auto;
  max-width: 100%;
  height: auto;
  text-align: left;

  /* アニメーション前の初期状態 */
  opacity: 0;
}

/* カラー */
.hero__copy-part--koto  { color: #01ab7d; }
.hero__copy-part--machi { color: #ffc433; }
.hero__copy-part--dark  { color: #333333; }

/* ============================================================
   右カラム：ビジュアル
   ============================================================ */

/* 写真3枚を絶対配置するコンテナ */
.hero__visual {
  flex: 0 0 54%;
  max-width: 54%;
  position: relative;
  height: 100svh;
  z-index: 1;
}

/* ============================================================
   円形写真
   ============================================================ */

/* 共通 */
.hero__photo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;

  /* アニメーション前の初期状態 */
  opacity: 0;
  transform: translateY(40px) scale(0.9);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
 * 円形写真のサイズ・位置: assets/css/HERO_PHOTO_POSITIONS.md と同期
 * max-width は広い順に記述し、狭い画面用ブロックが後から上書きする
 */
.hero__photo--lg {
  width: 340px;
  height: 340px;
  top: 11%;
  right: auto;
  bottom: auto;
  left: 37%;
}

.hero__photo--md {
  width: 234px;
  height: 234px;
  top: 38%;
  right: 25%;
  bottom: auto;
  left: auto;
}

.hero__photo--sm {
  width: 144px;
  height: 144px;
  top: auto;
  right: auto;
  bottom: 39%;
  left: 20%;
}

/* min-1440: md/sm 位置（lg は max-1200 系と同じ値のため 1200 以下と揃える） */
@media (min-width: 1440px) {
  .hero__photo--lg {
    top: 19%;
    right: auto;
    bottom: auto;
    left: 37%;
  }

  .hero__photo--md {
    top: 67%;
    right: 3%;
    bottom: auto;
    left: auto;
  }

  .hero__photo--sm {
    top: auto;
    right: auto;
    bottom: 24%;
    left: 7%;
  }
}

@media (max-width: 1200px) {
  .hero__photo--lg {
    width: 280px;
    height: 280px;
    top: 19%;
    right: auto;
    bottom: auto;
    left: 37%;
  }

  .hero__photo--md {
    width: 194px;
    height: 194px;
    top: 67%;
    right: 3%;
    bottom: auto;
    left: auto;
  }

  .hero__photo--sm {
    width: 118px;
    height: 118px;
    top: auto;
    right: auto;
    bottom: 24%;
    left: 7%;
  }
}

@media (max-width: 1024px) {
  .hero__photo--lg {
    width: 240px;
    height: 240px;
    top: 19%;
    right: auto;
    bottom: auto;
    left: 37%;
  }

  .hero__photo--md {
    width: 166px;
    height: 166px;
    top: 67%;
    right: 3%;
    bottom: auto;
    left: auto;
  }

  .hero__photo--sm {
    width: 166px;
    height: 166px;
    top: auto;
    right: auto;
    bottom: 24%;
    left: 7%;
  }
}

@media (max-width: 768px) {
  .hero__photo--lg {
    width: 196px;
    height: 196px;
    top: 24%;
    right: 6%;
    bottom: auto;
    left: auto;
  }

  .hero__photo--md {
    width: 160px;
    height: 160px;
    top: auto;
    right: auto;
    bottom: 12%;
    left: -69%;
  }

  .hero__photo--sm {
    width: 160px;
    height: 160px;
    top: auto;
    right: 42%;
    bottom: 18%;
    left: auto;
  }
}

/* ============================================================
   装飾円（SVG画像）
   ============================================================ */

/* 共通 */
.hero__deco {
  position: absolute;
  display: block;
  height: auto;       /* SVGのアスペクト比を維持 */
  pointer-events: none;
  z-index: 1;
}

/*
 * 位置はスクリーンショットに合わせて設定。
 * スクリーンショット（約1024px幅）基準:
 *   green-lg : 上部・左寄り（コピー右上あたり）
 *   green-sm : 上部・中央（コピーとビジュアルの間）
 *   yellow-sm: 下部・左寄り（コピー下あたり）
 *   yellow-md: 下部・中央（yellow-smの右下）
 */

/*
 * 装飾円は「画面縮小と比例して縮む（vw/clamp）」方式ではなく、
 * 画面サイズの区切り（ブレークポイント）ごとにベストな固定pxへ切り替える。
 */

/* 緑円①：上部・左エリア */
.hero__deco--green-lg {
  width: 160px;
  top:  22%;
  left: 25%;
}

/* 緑円②：上部・中央エリア */
.hero__deco--green-sm {
  width: 160px;
  top:  17%;
  left: 47%;
}

/* 黄色円①：下部・左エリア（コピー直下） */
.hero__deco--yellow-sm {
  width: 160px;
  top:  58%;
  left: 12%;
}

/* 黄色円②：下部・中央エリア */
.hero__deco--yellow-md {
  width: 160px;
  top:  66%;
  left: 34%;
}

/* ブレークポイントごとのベストサイズ（px固定） */
@media (max-width: 1199px) {
  .hero__deco--green-lg,
  .hero__deco--green-sm,
  .hero__deco--yellow-sm,
  .hero__deco--yellow-md { width: 133px; }
}

@media (max-width: 1024px) {
  .hero__deco--green-lg,
  .hero__deco--green-sm,
  .hero__deco--yellow-sm,
  .hero__deco--yellow-md { width: 114px; }
}

@media (max-width: 860px) {
  .hero__deco--green-lg,
  .hero__deco--green-sm,
  .hero__deco--yellow-sm,
  .hero__deco--yellow-md { width: 96px; }
}

@media (max-width: 768px) {
  .hero__deco--green-lg,
  .hero__deco--green-sm,
  .hero__deco--yellow-sm,
  .hero__deco--yellow-md { width: 85px; }
}

@media (max-width: 480px) {
  .hero__deco--green-lg,
  .hero__deco--green-sm,
  .hero__deco--yellow-sm,
  .hero__deco--yellow-md { width: 53px; }
}

/* ============================================================
   アニメーション定義
   ============================================================ */

/* 写真の登場 */
@keyframes photoEnter {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* 写真の浮遊（登場後にimgへ適用） */
@keyframes heroFloat {
  0%,  100% { transform: translateY(0);     }
  50%       { transform: translateY(-12px); }
}

/* テキストの登場 */
@keyframes textIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

/* ============================================================
   アニメーション発火（JSが .hero に .is-animated を付与）
   ============================================================ */

/* 写真: lg → md → sm の順に登場 */
.hero.is-animated .hero__photo--lg {
  animation: photoEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}
.hero.is-animated .hero__photo--lg img {
  animation: heroFloat 5.0s ease-in-out 1.0s infinite;
}

.hero.is-animated .hero__photo--md {
  animation: photoEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero.is-animated .hero__photo--md img {
  animation: heroFloat 5.4s ease-in-out 1.3s infinite;
}

.hero.is-animated .hero__photo--sm {
  animation: photoEnter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.60s both;
}
.hero.is-animated .hero__photo--sm img {
  animation: heroFloat 4.8s ease-in-out 1.6s infinite;
}

/* テキスト: こと → が起きる → まち → にであう */
.hero.is-animated .hero__copy-line--1 .hero__copy-part--koto {
  animation: textIn 0.70s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both;
}
.hero.is-animated .hero__copy-line--1 .hero__copy-part--dark {
  animation: textIn 0.70s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both;
}
.hero.is-animated .hero__copy-line--2 .hero__copy-part--machi {
  animation: textIn 0.70s cubic-bezier(0.22, 1, 0.36, 1) 2.25s both;
}
.hero.is-animated .hero__copy-line--2 .hero__copy-part--dark {
  animation: textIn 0.70s cubic-bezier(0.22, 1, 0.36, 1) 3.25s both;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

/* ---- 1440px以上：大画面余白調整 ---- */
@media (min-width: 1440px) {
  .hero__inner {
    padding-inline: clamp(64px, 7vw, 140px);
  }
  .hero__copy {
    flex-basis: 44%;
    max-width:  44%;
  }
  .hero__visual {
    flex-basis: 56%;
    max-width:  56%;
  }
}

/* ---- 1199px：標準PC（コピーのみ。写真は上部 HERO_PHOTO_POSITIONS ブロック参照） ---- */
@media (max-width: 1199px) {
  .hero__copy-part {
    font-size: 56px;
  }
}

/* ---- 1024px：タブレット横 ---- */
@media (max-width: 1024px) {
  .hero__copy {
    flex-basis: 50%;
    max-width:  50%;
  }
  .hero__visual {
    flex-basis: 50%;
    max-width:  50%;
  }
  .hero__copy-part {
    font-size: 52px;
  }
}

/* ---- 860px：コピー／ビジュアル比率のみ（写真は HERO_PHOTO_POSITIONS 準拠） ---- */
@media (max-width: 860px) {
  .hero__copy {
    flex-basis: 48%;
    max-width:  48%;
  }
  .hero__visual {
    flex-basis: 52%;
    max-width:  52%;
  }
}

/* ---- 768px：装飾円・コピー ---- */
@media (max-width: 768px) {
  .hero__deco--green-lg {
    top:  8%;
    left: 22%;
  }
  .hero__deco--green-sm {
    top:  6%;
    left: 58%;
  }
  .hero__deco--yellow-sm {
    top:    auto;
    bottom: 22%;
    left:   6%;
  }
  .hero__deco--yellow-md {
    top:       auto;
    bottom:    14%;
    left:      50%;
    transform: translateX(-50%);
  }

  .hero__copy-part {
    font-size: 33px;
  }
}

/* ---- 481〜583px：コピー列が狭く「が起きる」「にであう」が不自然に折れるのを防ぐ（584px 以上は未適用） ---- */
@media (max-width: 583px) and (min-width: 481px) {
  /* コピーにやや幅を寄せる（860px の 48/52 よりコピー優先） */
  .hero__copy {
    flex: 0 0 56%;
    max-width: 56%;
    min-width: 0;
  }

  .hero__visual {
    flex: 0 0 44%;
    max-width: 44%;
  }

  /* 768px の 40px だと収まりきらない幅帯向けに一段小さく */
  .hero__copy-part {
    font-size: 36px;
  }

  .hero__copy-part--dark {
    white-space: nowrap;
    max-width: none;
    flex-shrink: 0;
  }

  .hero__copy-part--koto,
  .hero__copy-part--machi {
    flex-shrink: 0;
  }
}

/* ---- 480px以下：スマホ（sm 非表示・lg/md は HERO_PHOTO_POSITIONS.md max-480） ---- */
@media (max-width: 480px) {
  /*
   * 横並び row のままだと .hero__copy の max-width:46% が効き折れるため column 積み。
   * align-items: flex-start で左寄せ、justify-content: center で画面内の上下中央。
   */
  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    min-height: 100svh;
    width: 100%;
    box-sizing: border-box;
    padding-top: 300px;
    padding-bottom: 32px;
  }

  .hero__copy {
    flex: 0 0 auto;
    max-width: 100%;
    width: max-content;
    margin-bottom: 0;
    padding-top: 0;
    box-sizing: border-box;
    align-self: flex-start;
  }

  .hero__visual {
    flex: 0 0 auto;
    align-self: flex-start;
    max-width: 100%;
    width: min(100%, 360px);
    height: 360px;
  }

  .hero__copy-line {
    justify-content: flex-start;
  }

  .hero__copy-part {
    font-size: 30px;
  }

  .hero__copy-part--dark {
    white-space: nowrap;
    max-width: none;
  }

  .hero__photo--sm {
    display: none;
  }

  .hero__photo--lg {
    width: 130px;
    height: 130px;
    top: -75%;
    right: 0%;
    bottom: auto;
    left: auto;
    margin-left: 0;
  }

  .hero__photo--md {
    width: 130px;
    height: 130px;
    top: auto;
    right: auto;
    bottom: 56%;
    left: 26%;
    margin-left: 0;
  }
}

/* ============================================================
   EVENT セクション（トップ）
   背景: FV に近い薄ベージュ
   ============================================================ */

.event-section {
  --event-bg: #fff7e5ff;
  --event-card-bg: #fffcc3ff;
  --event-green: #01ab7d;
  --event-yellow: #ffc433;
  --event-text: #333333;
  --event-title-en: #544631ff;
  /* .section-heading 共通トークン */
  --section-deco-bg: var(--event-yellow);
  --section-title-en-color: var(--event-title-en);
  --section-title-ja-color: var(--event-text);

  background-color: var(--event-bg);
  /* PC縦バランス優先: 1画面内に見出し〜CTAがまとまるようやや抑える */
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  /* 横余白は .event-section__inner 側で調整（セクション自体は左右 0） */
  padding-inline: 0;
  /* 100vw は使わない。横はみ出し防止 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .event-section {
    overflow-x: clip;
  }
}

/* 初回フェードイン（JS で .event-section--visible が付く） */
.event-section:not(.event-section--visible) {
  opacity: 0;
  transform: translateY(1.25rem);
}

.event-section.event-section--visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
  .event-section:not(.event-section--visible),
  .event-section.event-section--visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.event-section__inner {
  width: 100%;
  /* 90rem → 拡大: PCでカード列の「のびやかさ」を確保（フル幅ではなく上限のみ緩和） */
  max-width: min(100%, 108rem);
  margin-inline: auto;
  box-sizing: border-box;
  min-width: 0;
}

/* 大画面ほど inner を広く（1440px 以上でさらに余裕） */
@media (min-width: 1440px) {
  .event-section__inner {
    max-width: min(100%, 112rem);
  }
}

/* ----- 共通見出し（EVENT / ACCESS）-----
 * マークアップ: .section-heading > .section-heading__title-wrap > deco + title-en + title-ja
 * 色: 親セクションで --section-deco-bg / --section-title-en-color / --section-title-ja-color
 */
.section-heading {
  text-align: center;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.section-heading__title-wrap {
  position: relative;
  display: inline-block;
  padding-inline: clamp(2.5rem, 12vw, 6rem);
}

/* スクロール表示アニメーション（デザイン値は変更しない：opacity/transform のみ） */
.fp-reveal-ready .section-heading__title-wrap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fp-reveal-ready .section-heading__title-wrap.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fp-reveal-ready .section-heading__title-wrap {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* 黄色の丸：英字のやや左後ろ */
.section-heading__deco {
  position: absolute;
  width: clamp(3.25rem, 10vw, 5.5rem);
  height: clamp(3.25rem, 10vw, 5.5rem);
  border-radius: 50%;
  background: var(--section-deco-bg, #ffc433);
  opacity: 0.92;
  top: 50%;
  left: 18%;
  transform: translate(-55%, -58%);
  z-index: 0;
  pointer-events: none;
}

.section-heading__title-en {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--section-title-en-color, #544631);
  text-transform: uppercase;
}

.section-heading__title-ja {
  position: relative;
  z-index: 1;
  margin: 0.35em 0 0;
  font-size: clamp(1.125rem, 2.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--section-title-ja-color, #333333);
}

/* ----- 空データ ----- */
.event-section__empty {
  text-align: center;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
  color: var(--event-text);
  line-height: 1.6;
}

/* ----- スライダーラッパー（矢印はフロー外に出さず、同じ箱で absolute 重ね） ----- */
.event-section__slider-wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-bottom: clamp(1.35rem, 3.5vw, 2.25rem);
  box-sizing: border-box;
}

/* Splide の表示幅。矢印の配置基準は親 .event-section__slider-wrap */
.event-section__slider-viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.event-section__splide {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Splide 既定どおりトラックでクリップ（visible は横はみ出し・幅計算崩れの原因になる） */
.event-section__splide .splide__track {
  overflow: hidden;
}

.event-section__splide .splide__list {
  align-items: stretch;
}

.event-section__splide .splide__slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
  /* 幅は Splide が計算。ここで width を固定しない */
}

/* ----- 矢印（ラッパー基準で absolute・カード列に少し重なる） ----- */
.event-section__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  flex-shrink: 0;
  width: clamp(2.5rem, 6vw, 3.25rem);
  height: clamp(2.5rem, 6vw, 3.25rem);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--event-green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 1rem rgba(1, 171, 125, 0.25);
  transform: translateY(-50%);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 左右はトラック端から内側へ。数値を小さくするとカード上への重なりが強くなる */
.event-section__arrow--prev {
  left: clamp(0.2rem, 1.2vw, 0.65rem);
}

.event-section__arrow--next {
  right: clamp(0.2rem, 1.2vw, 0.65rem);
}

.event-section__arrow:hover {
  background-color: #019e73;
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 0.35rem 1.15rem rgba(1, 171, 125, 0.35);
}

.event-section__arrow:active {
  transform: translateY(-50%) scale(0.98);
}

.event-section__arrow:focus-visible {
  outline: 0.125rem solid var(--event-text);
  outline-offset: 0.125rem;
}

.event-section__arrow-icon {
  display: block;
  width: 28%;
  height: 28%;
  border-right: 0.15rem solid #fff;
  border-bottom: 0.15rem solid #fff;
  transform: rotate(-45deg);
  margin-left: 10%;
}

.event-section__arrow--prev .event-section__arrow-icon {
  transform: rotate(135deg);
  margin-left: -10%;
}

.event-section__arrow[hidden] {
  display: none;
}

/* ----- カード（幅は親 .splide__slide に合わせ、二重指定しない） ----- */
.event-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

.event-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background-color: var(--event-card-bg);
  overflow: hidden;
  border-radius: clamp(0.65rem, 1.8vw, 1.1rem);
  box-shadow: 0 0.35rem 1.5rem rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  padding: clamp(0.65rem, 1.8vw, 1.05rem);
  box-sizing: border-box;
}

.event-card__link:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.1);
}

/* サムネ: 全画面サイズで 16:10・画像はトリミングしない（レターボックスは背景色） */
.event-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #f0f0f0;
  border-radius: clamp(0.65rem, 1.8vw, 1.1rem);
}

.event-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

/* 他CSSの img { object-fit: cover; } 等に負けないように */
.event-card__thumb > .event-card__image {
  object-fit: contain !important;
  object-position: center !important;
}

/* WP が付与する class（例: .wp-post-image）に cover が付いても打ち消す */
.event-card__thumb img.event-card__image,
.event-card__thumb img.wp-post-image.event-card__image,
body.home .event-card__thumb img.event-card__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.event-card__image--placeholder {
  background: linear-gradient(135deg, #ddeee4 0%, #f0f5e8 100%);
}

.event-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(0.85rem, 2vw, 1.1rem);
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.event-card__tag {
  display: inline-block;
  font-size: clamp(0.7rem, 1.8vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.25em 0.65em;
  line-height: 1.3;
}

.event-card__tag--status {
  background: #ff9987;
  color: var(--event-text);
  border-radius: 0.25rem;
  padding: 0.45em 0.9em;
  max-width: 100%;
}

/* カテゴリ未一致時の既定（PHP で kotomachi_get_event_category_variant が null のとき） */
.event-card__tag--category {
  background: rgba(255, 196, 51, 0.25);
  color: var(--event-text);
  border-radius: 999px;
  padding: 0.45em 0.9em;
  max-width: 100%;
}

/* 文言に応じた修飾クラス（front-page.php で付与） */
.event-card__tag--category-oyako {
  background-color: #d9f2d0;
  color: var(--event-text);
}

.event-card__tag--category-kodomo {
  background-color: #ffefff;
  color: var(--event-text);
}

/* 親子・子ども向けのミント×淡ピンクに馴染む大人向け用ブルーグレー */
.event-card__tag--category-otona {
  background-color: #d4dde6;
  color: var(--event-text);
}

.event-card__title {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--event-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----- CTA ----- */
.event-section__cta {
  text-align: center;
}

.event-section__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: clamp(2.75rem, 6vw, 3.35rem);
  padding: 0.55rem clamp(1.75rem, 6vw, 3.25rem);
  background-color: var(--event-yellow);
  color: var(--event-text);
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 0.25rem 1rem rgba(255, 196, 51, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.event-section__cta-link:hover {
  transform: translateY(-0.12rem);
  filter: brightness(1.03);
  box-shadow: 0 0.35rem 1.25rem rgba(255, 196, 51, 0.45);
}

.event-section__cta-icon {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 0.14rem solid currentColor;
  border-bottom: 0.14rem solid currentColor;
  transform: rotate(-45deg);
  margin-top: 0.05rem;
}

/* ----- ブレークポイント微調整 ----- */
/* タブレット〜小さめPC: タイトル2行で縦を抑える（サムネはベースの 16:10 のまま） */
@media (min-width: 769px) {
  .event-card__title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/*
 * 大きめPC（width ≥ 1200px）: サムネは 16:10 のまま、カード内余白のみ調整。
 * スライダー幅・3:4:3 比率は JS のまま。
 */
@media (min-width: 1200px) {
  .event-card__link {
    padding-inline: clamp(0.8rem, 1.35vw, 1.15rem);
    padding-block: clamp(0.65rem, 1.1vw, 0.9rem);
  }

  .event-card__body {
    padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.9rem, 1.75vw, 1.3rem);
    gap: 0.55rem;
  }

  /* 769px ブロックの 2 行指定を上書きし、長いタイトルも収めやすく */
  .event-card__title {
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    line-height: 1.42;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .event-card__tag {
    font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  }
}

@media (max-width: 1024px) {
  .section-heading__deco {
    left: 14%;
  }
}

/* タブレット: 矢印をやや小さく・端寄り（重なり過ぎ防止） */
@media (max-width: 900px) {
  .event-section__arrow {
    width: clamp(2.4rem, 6.5vw, 3rem);
    height: clamp(2.4rem, 6.5vw, 3rem);
  }

  .event-section__arrow--prev {
    left: clamp(0.15rem, 1vw, 0.45rem);
  }

  .event-section__arrow--next {
    right: clamp(0.15rem, 1vw, 0.45rem);
  }
}

/* スマホ: タップしやすさを維持しつつ、カードを邪魔しにくい位置 */
@media (max-width: 768px) {
  .event-section__arrow {
    top: 42%;
    width: clamp(2.5rem, 11vw, 2.85rem);
    height: clamp(2.5rem, 11vw, 2.85rem);
  }

  .event-section__arrow--prev {
    left: 0.15rem;
  }

  .event-section__arrow--next {
    right: 0.15rem;
  }

  .event-section__arrow:hover,
  .event-section__arrow:active {
    transform: translateY(-50%);
  }
}

@media (max-width: 480px) {
  .section-heading__title-wrap {
    padding-inline: clamp(1.75rem, 10vw, 3rem);
  }

  .section-heading__deco {
    left: 10%;
    transform: translate(-50%, -55%);
  }
}

/* ============================================================
   ACCESS セクション（トップ）
   背景・トークンは EVENT に近い薄ベージュ系で統一
   調整ガイド:
   - .access-section … セクション全体の背景・上下余白
   - .access-section__inner … 最大幅・横インセット（他セクションと揃えるなら max-width のみ変更）
   - .access-section__layout … PC の左右比率（grid-template-columns）
   - .access-section__info … 左カラム内で flex 中央寄せ＋中身は左揃え（--access-info-content-max）
   - .access-section__name … 施設名（色・サイズ）
   - .access-section__label … 住所/TEL/MAIL ラベル（黄色ボックス）
   - .access-section__map-frame … 地図枠の角丸・影・aspect-ratio / min-height
   ============================================================ */

.access-section {
  --access-bg: #fff7e5ff;
  --access-green: #01ab7d;
  --access-text: #333333;
  --access-label-bg: rgba(255, 196, 51, 0.38);
  --access-link: #01ab7d;
  --access-note: rgba(51, 51, 51, 0.72);
  /* 左カラム内で情報を横中央に置くときの最大幅（中身は text-align: left） */
  --access-info-content-max: min(100%, 28rem);
  --section-deco-bg: #ffc433;
  --section-title-en-color: #544631;
  --section-title-ja-color: var(--access-text);

  background-color: var(--access-bg);
  padding-block: clamp(2.25rem, 5.5vw, 4rem);
  padding-inline: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .access-section {
    overflow-x: clip;
  }
}

.access-section__inner {
  width: 100%;
  max-width: min(100%, 108rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1440px) {
  .access-section__inner {
    max-width: min(100%, 112rem);
  }
}

/* PC: 左情報 1 : 右地図 約 1.15〜1.32。見た目優先でブレークごとに微調整 */
.access-section__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  /* 2カラム時: 左 .access-section__info を地図列の高さに対して縦中央 */
  align-items: center;
}

@media (min-width: 768px) {
  .access-section__layout {
    grid-template-columns: 1fr 1.18fr;
    gap: clamp(1.65rem, 3.2vw, 2.75rem);
  }
}

@media (min-width: 1024px) {
  .access-section__layout {
    grid-template-columns: 1fr 1.26fr;
    gap: clamp(1.85rem, 3vw, 3.25rem);
  }
}

@media (min-width: 1200px) {
  .access-section__layout {
    grid-template-columns: 1fr 1.3fr;
  }
}

@media (min-width: 1440px) {
  .access-section__layout {
    grid-template-columns: 1fr 1.34fr;
    gap: clamp(2rem, 2.8vw, 3.5rem);
  }
}

.access-section__info {
  min-width: 0;
  padding-block: clamp(0.15rem, 0.8vw, 0.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

/* 施設名: 緑・やや大きめ（左カラムの中央にブロックを置き、文字は左揃え） */
.access-section__name {
  align-self: center;
  width: var(--access-info-content-max);
  margin: 0 0 clamp(1.05rem, 2.8vw, 1.65rem);
  font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--access-green);
  text-align: left;
}

.access-section__list {
  align-self: center;
  width: var(--access-info-content-max);
  margin: 0;
  padding: 0;
  text-align: left;
}

.access-section__list dd {
  margin-inline-start: 0;
}

.access-section__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 0.85rem);
  margin-bottom: clamp(0.95rem, 2.4vw, 1.35rem);
}

.access-section__item:last-child {
  margin-bottom: 0;
}

/* ラベル: 薄い黄色・角丸ボックス（dt は折り返さず dd と同一行） */
.access-section__label {
  margin: 0;
  flex-shrink: 0;
  display: inline-block;
  padding: 0.4em 0.95em;
  border-radius: clamp(0.3rem, 0.8vw, 0.45rem);
  background: var(--access-label-bg);
  color: var(--access-text);
  font-size: clamp(0.72rem, 1.85vw, 0.84rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.access-section__text {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(0.88rem, 2.1vw, 1.05rem);
  line-height: 1.65;
  color: var(--access-text);
  word-break: break-word;
}

.access-section__link {
  color: var(--access-text);
  text-decoration: none;
}

.access-section__link:hover {
  opacity: 0.88;
}

.access-section__note {
  display: inline;
  margin-left: 0.35em;
  font-size: clamp(0.82rem, 1.9vw, 0.95rem);
  color: var(--access-text);
}

/* ----- 地図 ----- */
.access-section__map {
  min-width: 0;
  width: 100%;
}

.access-section__map-frame {
  position: relative;
  width: 100%;
  border-radius: clamp(0.65rem, 1.8vw, 1.15rem);
  overflow: hidden;
  box-shadow: 0 0.35rem 1.5rem rgba(0, 0, 0, 0.07);
  background: #e8e4dc;
  aspect-ratio: 16 / 11;
  min-height: clamp(220px, 42vw, 460px);
}

@media (min-width: 768px) {
  .access-section__map-frame {
    min-height: clamp(260px, 36vw, 480px);
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1200px) {
  .access-section__map-frame {
    min-height: clamp(300px, 32vw, 520px);
  }
}

.access-section__map-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   KOTOMACHI セクション（トップ・ことまちについて）
   調整ガイド:
   - .kotomachi-section … 背景・セクション上下余白
   - .kotomachi-section__inner … 最大幅・横インセット（EVENT/ACCESS と同系）
   - .kotomachi-section__grid … 行同士の縦 gap・width min(100%,80%)・レスポンシブ padding
   - .kotomachi-section__row … 左ラベル＋右カードのグリッド（ブレークで 1 列化）
   - .kotomachi-section__label … LAB/PROJECT ボックス（--kotomachi-label-lab-bg / --project-bg）
   - .kotomachi-section__cards … 931px 以上で 2 列、以下は 1 列（縦並び）
   - .kotomachi-card … 角丸・aspect-ratio・hover 時の ::before 不透明度
   - .kotomachi-card__title / __icon … タイトル位置・矢印円サイズ
   暗幕: .kotomachi-card::before が通常 rgba 黒、:hover / :focus-visible で opacity:0
   ============================================================ */

.kotomachi-section {
  --kotomachi-bg: #fff7e5ff;
  --kotomachi-text: #333333;
  --kotomachi-label-lab-bg: rgba(255, 210, 120, 0.42);
  --kotomachi-label-project-bg: rgba(195, 228, 198, 0.55);
  --kotomachi-card-overlay: rgba(0, 0, 0, 0.44);
  --section-deco-bg: #ffc433;
  --section-title-en-color: #544631;
  --section-title-ja-color: var(--kotomachi-text);

  background-color: var(--kotomachi-bg);
  padding-block: clamp(2.25rem, 5.5vw, 4rem);
  padding-inline: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .kotomachi-section {
    overflow-x: clip;
  }
}

.kotomachi-section__inner {
  width: 100%;
  max-width: min(100%, 108rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  box-sizing: border-box;
  min-width: 0;
}

@media (min-width: 1440px) {
  .kotomachi-section__inner {
    max-width: min(100%, 112rem);
  }
}

.kotomachi-section__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4.5vw, 3rem);
  /* 80% 幅に合わせつつ狭い画面では 100% 近くまで使う */
  width: min(100%, 80%);
  max-width: 100%;
  margin-inline: auto;
  padding-block: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-inline: clamp(0.75rem, 5vw, 4.375rem);
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 480px) {
  .kotomachi-section__grid {
    width: 100%;
    padding-inline: clamp(0.5rem, 3vw, 1rem);
  }

  .kotomachi-card__title {
    font-size: 20px!important;
  }  
}

/* 1 行: 左ラベル + 右にカード 2 枚 */
.kotomachi-section__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.15rem, 3.2vw, 2rem);
  align-items: stretch;
  min-width: 0;
}

@media (min-width: 768px) {
  .kotomachi-section__row {
    grid-template-columns: minmax(5.5rem, 9.5rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 2.8vw, 2.25rem);
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .kotomachi-section__row {
    grid-template-columns: minmax(6.5rem, 11rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 2.6vw, 2.75rem);
  }
}

@media (min-width: 1200px) {
  .kotomachi-section__row {
    grid-template-columns: minmax(7rem, 11.5rem) minmax(0, 1fr);
    gap: clamp(1.65rem, 2.4vw, 3rem);
  }
}

/* 左ラベル: 大きめ角丸・中央寄せ */
.kotomachi-section__label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3.75rem, 11vw, 5.25rem);
  padding: clamp(0.85rem, 2.2vw, 1.35rem) clamp(0.75rem, 2vw, 1.25rem);
  letter-spacing: 0.14em;
  line-height: 1.2;
  color: var(--kotomachi-text);
  text-align: center;
  box-sizing: border-box;
  height: 100%;

  font-size: 24px;
  font-weight: 600;
}

.kotomachi-section__row--lab .kotomachi-section__label {
  background: #fffcc3ff;
}

.kotomachi-section__row--project .kotomachi-section__label {
  background: #e2f4a7;
}

@media (max-width: 767px) {
  .kotomachi-section__label {
    min-height: clamp(3.25rem, 14vw, 4.25rem);
    letter-spacing: 0.12em;
  }
}

.kotomachi-section__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.85rem, 2.5vw, 1.35rem);
  min-width: 0;
}

.kotomachi-section__row--lab .kotomachi-section__cards {
  background: #fffcc3ff;
  padding: clamp(0.65rem, 2vw, 1rem);
}

.kotomachi-section__row--project .kotomachi-section__cards {
  background: #e2f4a7;
  padding: clamp(0.65rem, 2vw, 1rem);
}

/* 931px 以上のみ 2 列（〜930px は上記 1 列のまま＝カード縦並び） */
@media (min-width: 931px) {
  .kotomachi-section__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.95rem, 2.2vw, 1.5rem);
  }
}

@media (min-width: 1024px) {
  .kotomachi-section__cards {
    gap: clamp(1.1rem, 2vw, 1.75rem);
  }
}

/* ----- 画像リンクカード -----
 * 親が width 80% の .kotomachi-section__grid 内のため、930px 境で縦積み時はやや低めの比率に
 * ----- */
.kotomachi-card {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 0.35rem 1.35rem rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  aspect-ratio: 16 / 10;
  width: 100%;
  min-height: clamp(9rem, 40vmin, 15rem);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

/* 2 列時（親グリッド 80% 内の半分幅に合わせた高さ感） */
@media (min-width: 931px) {
  .kotomachi-card {
    aspect-ratio: 4 / 3;
    min-height: clamp(9.5rem, 19vw, 15.5rem);
  }
}

@media (min-width: 1200px) {
  .kotomachi-card {
    min-height: clamp(10.5rem, 17vw, 17.5rem);
  }
}

/* 通常時の暗幕（hover / focus で透明＝画像の明るさがそのまま見える） */
.kotomachi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--kotomachi-card-overlay);
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.kotomachi-card:hover,
.kotomachi-card:focus-visible {
  box-shadow: 0 0.45rem 1.65rem rgba(0, 0, 0, 0.12);
  transform: translateY(-0.08rem);
}

.kotomachi-card:focus-visible {
  outline: 0.125rem solid var(--kotomachi-text);
  outline-offset: 0.2rem;
}

.kotomachi-card:hover::before,
.kotomachi-card:focus-visible::before {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .kotomachi-card {
    transition: none;
  }

  .kotomachi-card::before {
    transition: none;
  }

  .kotomachi-card:hover,
  .kotomachi-card:focus-visible {
    transform: none;
  }
}

.kotomachi-card__inner {
  position: absolute;
  inset: 0;
  display: block;
}

.kotomachi-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  background: linear-gradient(135deg, #e8e0d4 0%, #ddeee4 100%);
}

.kotomachi-card__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(0.65rem, 2vw, 1rem);
  padding: clamp(0.95rem, 2.8vw, 1.45rem);
  padding-inline-end: clamp(0.85rem, 2.5vw, 1.25rem);
  pointer-events: none;
  box-sizing: border-box;
}

.kotomachi-card__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 0.06rem 0.45rem rgba(0, 0, 0, 0.45);
}

/* 右下寄りの丸＋矢印 */
.kotomachi-card__icon {
  position: relative;
  flex-shrink: 0;
  align-self: flex-end;
  width: clamp(2.4rem, 6.5vw, 3rem);
  height: clamp(2.4rem, 6.5vw, 3rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 0.15rem 0.65rem rgba(0, 0, 0, 0.15);
}

.kotomachi-card__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  border-right: 0.14rem solid #333333;
  border-bottom: 0.14rem solid #333333;
  transform: translate(-58%, -55%) rotate(-45deg);
}