/* =========================================
   千里まつり LP
   色・フォントはデザインデータ到着後に :root で差し替え
   ========================================= */

:root {
  --color-main: #b5491b;      /* 焦げオレンジ（元はピンク #c8326e） */
  --color-sub: #5a3319;       /* こげ茶（元は紺 #2b3a73） */
  --color-accent: #f2b33d;    /* からし色 */
  --color-text: #3b2b20;
  --color-muted: #7a6656;
  --color-bg: #fffaf2;
  --color-bg-alt: #f8ecd8;
  --color-border: #ead8bd;
  --color-insta: #b5491b;     /* 「申し込む」ボタン（元はInstagramのピンク #d62976） */
  --color-adult-bg: #f3e9de;  /* 大人向け枠の背景（こげ茶を薄くしたもの） */
  --color-event: #c8326e;     /* 千里まつりのイベントの色（ヘッダーのロゴ文字） */

  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;

  --radius: 12px;
  --container: 1080px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
}

img {
  max-width: 100%;
  display: block;
}

/* .btn などの display 指定より hidden 属性を優先 */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

.text-center {
  text-align: center;
}

.note {
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--color-event);
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 0.875rem;
}

.global-nav a {
  text-decoration: none;
}

.global-nav a:hover {
  color: var(--color-main);
}

/* PC：申込方法への導線（ヘッダーが固定なので常に表示される） */
.global-nav .header-cta {
  padding: 8px 20px;
  color: #fff;
}

.global-nav .header-cta:hover {
  color: #fff;
}

/* ハンバーガーボタン（PCでは非表示） */
.menu-toggle {
  display: none;
}

/* スマホ用 下部固定メニュー（PCでは非表示） */
.sp-bottom-nav {
  display: none;
}

/* ---------- メインビジュアル ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hero {
  background: var(--color-bg-alt);
}

.hero-image {
  width: 100%;
  height: auto;
}

.hero-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  padding: 16px;
  background: var(--color-sub);
  color: #fff;
}

.hero-info-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

.hero-info-list li + li::before {
  content: "｜";
  margin: 0 8px;
  opacity: 0.6;
}

.hero-info-list strong {
  color: var(--color-accent);
}

.schedule-lead {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--color-muted);
}


/* ---------- セクション共通 ---------- */
.section {
  padding: 72px 0;
}

.section-alt {
  background: var(--color-bg-alt);
}

.section-title {
  margin: 0 0 32px;
  text-align: center;
  font-size: 1.75rem;
  color: var(--color-main);
}

/* ---------- 開催概要・アクセス ---------- */
.outline-list {
  display: grid;
  grid-template-columns: 6em 1fr;
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}

.outline-list dt,
.outline-list dd {
  margin: 0;
  padding: 12px 8px;
  border-bottom: 1px solid var(--color-border);
}

.outline-list dt {
  font-weight: 700;
}

/* ---------- スケジュール ---------- */
.table-wrap {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  table-layout: fixed; /* 土・日の列幅を揃える */
  background: var(--color-bg);
  text-align: center;
}

.schedule-table thead th:first-child {
  width: 7em;
}

.schedule-table th,
.schedule-table td {
  padding: 12px;
  border: 1px solid var(--color-border);
}

.schedule-table thead th {
  background: var(--color-main);
  color: #fff;
}

.schedule-table tbody th {
  font-size: 0.875rem;
  background: var(--color-bg-alt);
}

/* 受付時間（各回の開始30分前） */
.sch-reception {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}

.schedule-table .sch-title {
  font-weight: 700;
}

/* 単語の途中で改行しない（js/main.js で単語ごとに包む） */
.nobr {
  display: inline-block;
}

.program-title,
.sch-title,
.entry-title,
main p,
main li,
main dd,
main summary {
  text-wrap: pretty;
}

/* 本文は文節の切れ目で改行する（lang="ja" 前提。対応していないブラウザでは無視される） */
main p,
main li,
main dd,
main summary,
main .btn {
  word-break: auto-phrase;
}

.sch-title {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sch-org {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-muted);
}

.sch-tag {
  margin-top: 6px;
  font-size: 0.75rem;
}

.schedule-table td.is-adult {
  background: var(--color-adult-bg);
}

/* スマホ：表をやめ、日付ごとの縦リストにする
   （日付は tbody の data-day1/2、時間は各 td の data-time から表示） */
@media (max-width: 767px) {
  .table-wrap {
    overflow: visible;
  }

  .schedule-table,
  .schedule-table tbody {
    display: block;
    min-width: 0;
    background: none;
  }

  .schedule-table tbody {
    display: grid;
    gap: 8px;
  }

  .schedule-table thead,
  .schedule-table tbody th {
    display: none;
  }

  .schedule-table tr {
    display: contents;
  }

  .schedule-table tbody::before,
  .schedule-table tbody::after {
    margin-top: 16px;
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--color-main);
    color: #fff;
    font-weight: 700;
    text-align: center;
  }

  .schedule-table tbody::before {
    content: attr(data-day1);
    order: 0;
    margin-top: 0;
  }

  .schedule-table td:nth-child(2) {
    order: 1;
  }

  .schedule-table tbody::after {
    content: attr(data-day2);
    order: 2;
  }

  .schedule-table td:nth-child(3) {
    order: 3;
  }

  .schedule-table td {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--color-bg);
    text-align: left;
  }

  .schedule-table td.is-adult {
    border-left: 4px solid var(--color-sub);
    background: var(--color-adult-bg);
  }

  .schedule-table td::before {
    content: attr(data-time) "（" attr(data-reception) "）";
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-main);
  }
}

/* ---------- 体験紹介 ---------- */
/* 「両日開催」と日付の間（スマホは改行、PCは少し空ける） */
.program-group-label {
  margin-right: 0.75em;
}

/* 受付の案内（体験スケジュール・申込方法） */
/* 見出し付きの枠：上にピンクの帯「受付について」、四辺をピンクの線で囲む */
.reception-notice {
  max-width: 640px;
  margin: 0 auto 24px;
  padding-bottom: 14px;
  border: 2px solid var(--color-main);
  border-radius: var(--radius);
  background: var(--color-bg);
  line-height: 1.7;
  overflow: hidden; /* 見出しの帯を角丸に合わせる（中にリンクやボタンはない） */
}

.reception-notice p {
  margin: 0;
  padding: 0 16px;
}

.reception-notice .reception-notice-title {
  margin-bottom: 12px;
  padding: 6px 16px;
  background: var(--color-main);
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.reception-notice-main {
  font-weight: 700;
}

.reception-notice-sub {
  margin-top: 6px !important;
  font-size: 0.875rem;
  color: var(--color-text);
}

#entry .reception-notice {
  margin-top: 16px;
}

/* 体験紹介の冒頭の注意（全体験共通） */
.programs-notice {
  max-width: 640px;
  margin: -8px auto 32px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-bg-alt);
  text-align: center;
  font-weight: 700;
  line-height: 1.7;
}

.section-title + .programs-notice + .program-group-title {
  margin-top: 0;
}

.program-group-title {
  margin: 48px 0 16px;
  padding: 6px 16px;
  border-left: 6px solid var(--color-main);
  font-size: 1.25rem;
  color: var(--color-sub);
}

.section-title + .program-group-title {
  margin-top: 0;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.program-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.program-photo {
  width: 100%;
  height: auto; /* img の height 属性より aspect-ratio を優先 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.program-photo.is-empty {
  display: grid;
  place-items: center;
  background: #eee;
  color: var(--color-muted);
  font-size: 0.875rem;
}

.program-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
}

.program-slot {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-sub);
}

.program-reception {
  display: inline-block;
  margin-left: 0.5em;
  font-weight: 400;
  color: var(--color-muted);
}

.program-name {
  margin: 4px 0 2px;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.program-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
}

.program-desc {
  margin: 8px 0 16px;
  font-size: 0.9375rem;
}

.program-meta {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  margin: 0 0 20px;
  font-size: 0.875rem;
}

.program-meta dt,
.program-meta dd {
  margin: 0;
  padding: 4px 0;
}

.program-meta dt {
  font-weight: 700;
}

.program-card > .program-body > .btn {
  margin-top: auto;
}

.tag {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.tag-adult {
  background: var(--color-sub);
  color: #fff;
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.btn-main {
  background: var(--color-main);
  color: #fff;
}

.btn-main:hover {
  opacity: 0.85;
}

.btn-insta {
  background: var(--color-insta);
  color: #fff;
}

.btn-insta:hover {
  opacity: 0.85;
}

.btn.is-disabled {
  background: #e0e0e0;
  color: #595959;
  pointer-events: none;
}

/* 公式LINEは URL を受け取るまで表示しない（受け取ったら is-disabled を外す） */
.btn-line.is-disabled {
  display: none;
}

/* ---------- アクセス ---------- */
/* スマホ：地図 → ボタン → 会場情報の縦並び
   PC：左に地図、右に会場情報とボタンの2カラム */
.access-inner {
  max-width: 640px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .access-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 24px 40px;
    max-width: 960px;
    align-items: start;
  }

  .access-map {
    grid-row: 1 / 3;
  }

  .access-inner .access-info {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .access-inner .access-map-link {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    text-align: left;
  }
}

/* 地図（チラシから抽出した画像） */
.access-map {
  padding: 16px;
  border-radius: var(--radius);
  background: #fff;
}

.map {
  display: block;
  width: 100%;
  height: auto;
}

.access-info {
  margin-top: 32px;
}

/* ---------- お問い合わせ ---------- */
#contact p {
  margin: 0 0 24px;
}

/* ---------- フッター ---------- */
.site-footer {
  padding: 24px 0;
  background: var(--color-text);
  color: #fff;
  text-align: center;
  font-size: 0.875rem;
}

.site-footer p {
  margin: 0;
}

/* サイト制作者のクレジット（主催者の表記より控えめに） */
.site-credit {
  margin-top: 8px !important;
  opacity: 0.75;
}

.site-credit a {
  color: inherit;
}

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* 下部メニューの高さ分 */
  }

  .sp-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s;
  }

  /* 申込方法が画面に入っている間は隠す（「申し込む」ボタンとの押し間違い防止。js/main.js） */
  .sp-bottom-nav.is-hidden {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.25s, visibility 0s 0.25s;
  }

  .sp-bottom-nav-item {
    display: grid;
    place-items: center;
    height: 48px;
    border: 2px solid var(--color-main);
    border-radius: 999px;
    color: var(--color-main);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
  }

  .sp-bottom-nav-item.is-primary {
    background: var(--color-main);
    color: #fff;
  }

  /* ハンバーガーメニュー：ボタンで開閉し、ヘッダーの下に縦に並べる */
  .menu-toggle {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .menu-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-main);
    transition: transform 0.2s, opacity 0.2s;
  }

  /* 開いているときは × にする */
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .global-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 16px 16px;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    font-size: 1rem;
  }

  .global-nav.is-open {
    display: flex;
  }

  .global-nav a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
  }

  /* 申込ボタンは下部に常時表示しているので、メニューには出さない */
  .global-nav .header-cta {
    display: none;
  }

  .section {
    padding: 56px 0;
  }

  .access-map {
    padding: 8px;
  }
}

/* ---------- 体験カード（写真2枚・プロフィール・申込ボタン） ---------- */
.program-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.program-photos .program-photo {
  aspect-ratio: 1 / 1;
}

/* 写真が1枚だけのときは横幅いっぱい（2枚並びと同じ高さ） */
.program-photos .program-photo:only-child,
.program-photos .program-photo.is-empty {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}

.program-profile {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg-alt);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.program-profile p {
  margin: 0;
}

.program-profile .program-profile-title {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--color-sub);
}

.program-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.btn-line {
  background: #06c755; /* LINEの公式の緑（元は濃い緑 #04803a。ユーザーの判断で一般的なLINEの緑に） */
  color: #fff;
}

.btn-line:hover {
  opacity: 0.85;
}

.program-desc p {
  margin: 0 0 8px;
}

.program-desc p:last-child {
  margin-bottom: 0;
}

.tag-kids {
  background: var(--color-accent);
  color: var(--color-text);
}

.program-box {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.program-box p {
  margin: 0;
}

.program-box .program-box-title {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--color-sub);
}

.program-box ul {
  margin: 0 0 4px;
  padding-left: 1.2em;
}

/* ---------- 子どもたちへのメッセージ ---------- */
.message {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 2;
}

.message p {
  margin: 0 0 20px;
}

.message-lead {
  margin: 0 0 20px;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  font-weight: 700;
  color: var(--color-sub);
  line-height: 1.6;
}

.message .message-strong {
  margin: 32px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-main);
  line-height: 1.7;
}

.sp-only {
  display: none;
}

/* ---------- 体験カード：一覧では概要だけ表示 ---------- */
.program-grid .program-desc,
.program-grid .program-meta,
.program-grid .program-box,
.program-grid .program-profile,
.program-grid .program-actions {
  display: none;
}

.program-card {
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.program-card.is-adult {
  border-top: 4px solid var(--color-sub);
}

.program-card.is-adult::before {
  content: "大人向け";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--color-sub);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.program-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 12px 0 20px;
  font-size: 0.875rem;
}

/* 2行目：参加費／定員 */
.program-summary-meta {
  flex-basis: 100%;
}

.program-summary-meta > span + span::before {
  content: "／";
  margin: 0 6px;
  color: var(--color-muted);
}

/* 参加費が複数あるときは、参加費と定員を別の行にする（区切りの「／」は出さない） */
.program-summary-meta.is-stacked > span {
  display: block;
}

.program-summary-meta.is-stacked > span + span::before {
  content: none;
}

.tag-empty {
  background: #eee;
  color: var(--color-muted);
}

.program-open {
  margin-top: auto;
  padding: 10px 24px;
  border: 2px solid var(--color-main);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* カード全体をクリック可能にする */
.program-open::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* キーボード操作時のフォーカス枠（ピンクのボタン上でも見えるよう白の縁を重ねる） */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-sub);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* キーボード操作時はカード全体に枠を出す */
.program-card:has(.program-open:focus-visible) {
  outline: 3px solid var(--color-main);
  outline-offset: 3px;
}

.program-open:focus-visible {
  outline: none;
}

.program-card:hover .program-open {
  background: var(--color-main);
  color: #fff;
}

/* ---------- 体験詳細モーダル ---------- */
.program-modal {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  overflow-y: auto;
}

.program-modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* モーダル表示中はページをその位置で固定（top は js/main.js で設定） */
.is-modal-open {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden;
}

/* モーダル内のスクロールが端まで行っても、背景に伝わらないようにする */
.program-modal {
  overscroll-behavior: contain;
}

.modal-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin: 12px 12px -56px 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.modal-content .program-photos .program-photo {
  aspect-ratio: 4 / 3;
}

.modal-content .program-body {
  padding: 24px;
}

.modal-content .program-desc {
  font-size: 1rem;
}

.modal-content .program-meta {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg-alt);
  font-size: 0.9375rem;
}

.modal-content .program-profile,
.modal-content .program-box {
  font-size: 0.875rem;
}

/* 申込ボタンはスクロールしても下部に表示 */
.modal-content .program-actions {
  position: sticky;
  bottom: 0;
  margin: 0 -24px -24px;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.modal-content .program-actions .btn {
  width: 100%;
}

/* ---------- 申込方法：各体験の Instagram ---------- */
.entry-jump {
  margin: 0 0 24px;
  text-align: center;
  font-weight: 700;
}

/* 控えめなテキストリンク（各体験の申込先へ・Googleマップ） */
.text-link {
  color: var(--color-main);
  font-weight: 700;
}

/* キッズかかしの例文は折りたたみ（見た目は共通の例文と同じ。見出しの行全体を押して開く） */
details.dm-example-sub {
  padding: 0; /* overflow: hidden は付けない（見出しのフォーカス枠が切れるため） */
}

details.dm-example-sub > :not(summary) {
  margin-right: 16px;
  margin-left: 16px;
}

/* 開いたときの下の余白は共通の例文（padding 16px）と同じに */
details.dm-example-sub[open] {
  padding-bottom: 16px;
}

summary.dm-example-title {
  border-radius: calc(var(--radius) - 2px); /* フォーカス枠を外枠の角丸に合わせる */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  list-style: none; /* 既定の ▶ を消す */
  cursor: pointer;
}

summary.dm-example-title::-webkit-details-marker {
  display: none;
}

details.dm-example-sub[open] summary.dm-example-title {
  margin-bottom: 12px;
}

.dm-toggle-hint {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
}

details.dm-example-sub[open] .dm-toggle-hint {
  display: none;
}

/* ＋（閉じているとき）／ −（開いているとき） */
.dm-toggle-icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-main);
}

.dm-toggle-icon::before,
.dm-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.2s;
}

.dm-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

details.dm-example-sub[open] .dm-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.sub-title {
  margin: 48px 0 16px;
  text-align: center;
  font-size: 1.375rem; /* セクション見出し（1.75rem）の一段下 */
  color: var(--color-sub);
}

.entry-steps {
  display: grid;
  gap: 8px;
  max-width: 640px;
  margin: 24px auto 16px;
  padding: 0;
  list-style: none;
}

.entry-steps li {
  display: flex;
  align-items: flex-start; /* 番号は文章の1行目にそろえる */
  gap: 12px;
  font-weight: 700;
}

.entry-step-note {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted);
}

.entry-step-num {
  flex: none;
  margin-top: -2px; /* 1行目（高さ約29px）の中央に番号（32px）の中央を合わせる */
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-main);
  color: #fff;
}

.dm-example {
  max-width: 640px;
  margin: 0 auto 16px;
  padding: 16px;
  border: 2px dashed var(--color-main);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.dm-example-lead {
  margin: 0 0 8px;
  font-size: 0.875rem;
}

.dm-example-title {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--color-main);
}

.dm-example pre {
  user-select: all; /* タップで例文全体を選択できるように */
  -webkit-user-select: all;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.8;
  white-space: pre-wrap;
}

.dm-copy-status {
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--color-main);
}

.dm-copy-status:empty {
  display: none;
}

/* 白地にピンクの枠線のボタン（例文コピー・Googleマップ） */
.dm-copy,
.btn-outline {
  border: 2px solid var(--color-main);
  background: var(--color-bg);
  color: var(--color-main);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.entry-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.entry-links li {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entry-links li.is-adult {
  border-top: 4px solid var(--color-sub);
}

.entry-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1;
}

/* 出展者名は体験名の補足として控えめに */
.entry-name {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* 申込ボタンはパネルの一番下に横幅いっぱい（対象タグと見分けやすく） */
.entry-links .btn {
  width: 100%;
  margin-top: auto;
  padding: 12px 16px;
}

/* 申込先の一覧では、公式LINEの体験（まちでざ。）のボタンもほかと同じ色にそろえる */
.entry-links .btn-line {
  background: var(--color-insta);
}

.entry-slot {
  font-size: 0.8125rem;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .sp-only {
    display: inline;
  }

  .message {
    font-size: 1rem;
  }

  .modal-content .program-body {
    padding: 20px 16px;
  }

  .modal-content .program-actions {
    margin: 0 -16px -20px;
    padding-right: 16px;
    padding-left: 16px;
  }
}

.entry-links li {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--color-bg);
}

/* 体験名は1行ずつブロックにし、折り返すときは行の長さをそろえる */
.entry-title-line {
  display: block;
  text-wrap: balance;
}

.entry-title {
  margin-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
}

/* スマホ：余白を少し詰める */
@media (max-width: 767px) {
  .entry-links {
    gap: 8px;
    margin-top: 24px;
  }

  .entry-links li {
    padding: 14px;
  }

  .entry-title {
    font-size: 0.9375rem;
  }
}

/* ---------- よくある質問・アクセス補足 ---------- */
.access-map-link {
  margin: 24px 0 0;
}

.faq-list {
  display: grid;
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.faq-item summary {
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
}

.faq-item summary::before {
  content: "Q. ";
  color: var(--color-main);
}

.faq-item p {
  margin: 0;
  padding: 0 16px 14px;
}

/* ---------- 企画・運営（お問い合わせの最後に置く Spotlight の紹介） ---------- */
.organizer {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 40em;
  margin: 56px auto 0;
  padding-top: 48px;
  border-top: none;
}

/* お問い合わせの見出し（.section-title）と同じ大きさ・色 */
.organizer-role {
  margin: 0;
  color: var(--color-main);
  font-size: 1.75rem;
}

.organizer-name {
  margin: 0;
  line-height: 1;
}

.organizer-name img {
  width: clamp(200px, 46vw, 280px);
  height: auto;
}

.organizer-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.9375rem;
  text-align: left;
}

/* ---------- メインビジュアル直下：会場（i.shi.no.ta）の紹介 ---------- */
.hero-info.is-venue {
  display: grid;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #f8ead2;
  color: #4f2a17;
}
.venue-intro {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px 20px;
  background: linear-gradient(#7a3a18, #5f2d13);
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.venue-intro p { margin: 0; }
.venue-intro .venue-intro-copy { margin-top: 8px; }
.venue-intro-label {
  padding: 1px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #4f2a17;
  font-size: .8125rem;
  font-weight: 700;
  text-shadow: none;
}
.venue-intro-name {
  font-family: "DM Serif Display", serif;
  font-size: clamp(2.5rem, 11vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: .01em;
}
.venue-intro-ruby { font-size: .875rem; font-weight: 700; }
.venue-intro-copy {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  font-size: .9375rem;
  font-weight: 700;
}
.venue-intro-copy em { font-style: normal; color: var(--color-accent); }
.hero-info-sub {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
  padding: 16px;
}
.hero-info.is-venue .hero-info-list strong { color: var(--color-main); }
@media (max-width: 767px) {
  .venue-intro-sep { display: none; }
  .venue-intro-ruby .nobr { display: block; }
  .hero-info-sub { flex-direction: column; gap: 10px; }
}
.hero-info.is-venue .hero-info-list li + li::before { opacity: .4; }
@media (min-width: 768px) {
  .hero-info.is-venue { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .venue-intro {
    grid-template-columns: auto 1fr;
    justify-items: start;
    align-items: center;
    gap: 4px 28px;
    padding: 24px 32px;
    text-align: left;
  }
  .venue-intro-label { grid-column: 1; grid-row: 1; }
  .venue-intro-name { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .venue-intro-ruby { grid-column: 2; grid-row: 1 / 3; align-self: end; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .5); }
  .venue-intro .venue-intro-copy { grid-column: 2; grid-row: 3; margin-top: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .5); }
  .hero-info-sub { flex-direction: column; gap: 14px; }
}