@charset "UTF-8";
/* ==========================================================================
   軽井沢の芽衣 プレオープンイベントLP
   単一CSS（FLOCSS命名：l- / c- / p- / u-）。4月トップ案の配色・書体を継承
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global：変数
   -------------------------------------------------------------------------- */
:root {
  --color-text: #5c4033;        /* 4月案 text-normal / primary */
  --color-text-sub: #6e5245;    /* 補足文用。白地で6.3:1 */
  --color-main: #5c4033;
  --color-bg: #ffffff;
  --color-bg-cream: #f5f1e8;    /* bg-secondary */
  --color-bg-cream-light: #f7f5f3;
  --color-accent: #d4af37;      /* gold */
  --color-crimson: #c41e3a;     /* 4月案 英字見出し */
  --color-green: #6b8e23;
  --color-footer: #5a3e32;      /* 4月テスト環境のフッター */
  --color-bg-beige: #f3efe7;
  --color-line: #e0d6c8;
  --color-placeholder-bg: #fff7e0;
  --color-placeholder-text: #8a6100;
  --color-placeholder-line: #e8c56a;

  --ff-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ff-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-en: "Dancing Script", cursive;

  --pc-inner: 1040px;
  --pc-inner-narrow: 800px;
  --padding-side: clamp(24px, 4vw, 40px);
  --header-padding-side: 80px;  /* ヘッダーは広め。1280px以下は40px */
  --section-gap: clamp(64px, 9vw, 120px);
  --gap-content: clamp(24px, 5vw, 60px);

  --z-header: 100;
  --z-fixed-cta: 90;
}

@media (max-width: 1280px) {
  :root {
    --header-padding-side: 40px;
  }
}

/* --------------------------------------------------------------------------
   Foundation：reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

picture,
img,
a,
span {
  display: inline-block;
}

video,
img,
svg {
  width: 100%;
  height: auto;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

small {
  font-size: 0.875em;
}

@media (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
  }
}

/* 見出し・ロゴ・表示用の大きな文字＝明朝 */
h1,
h2,
h3,
.l-header__logo-ja,
.p-mv__lead,
.p-mv__date,
.p-mv__place,
.p-about__catch,
.p-message__body,
.p-message__sign,
.p-flow__cta-lead,
.p-faq__q,
.p-report__text,
.p-opening__text {
  font-family: var(--ff-serif);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.l-inner {
  width: 100%;
  max-width: calc(var(--pc-inner) + var(--padding-side) * 2);
  margin: 0 auto;
  padding: 0 var(--padding-side);
}

.l-inner--narrow {
  max-width: calc(var(--pc-inner-narrow) + var(--padding-side) * 2);
}

.l-section {
  padding: var(--section-gap) 0;
  background: var(--color-bg);
}

/* header */
.l-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-bg-cream);
  border-bottom: 1px solid var(--color-line);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px var(--header-padding-side);
}

.l-header__logo,
.l-footer__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.l-header__logo-en {
  font-family: var(--ff-en);
  font-size: 17px;
  color: var(--color-text-sub);
}

.l-header__logo-ja {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* ロゴ（ロゴ画像の横にテキストを並べる） */
.l-header__logo-img {
  flex: none;
  width: auto;
  height: 56px;
}

.l-header__logo {
  margin-right: auto;
}

.l-header__label {
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text-sub);
  border: 1px solid var(--color-line);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .l-header__logo-en {
    font-size: 15px;
  }

  .l-header__logo-ja {
    font-size: 20px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  /* SPは幅が足りないため非表示。同じ情報はMVのリード文にある */
  .l-header__label {
    display: none;
  }

  /* SPも「ロゴ → その横にテキスト」の横並びを保つ */
  .l-header__inner {
    gap: 10px;
  }

  .l-header__logo-img {
    height: 44px;
  }
}

/* footer */
.l-footer {
  padding: 0;
  background: var(--color-footer);
  color: #fff;
  text-align: center;
}

.l-footer .l-header__logo-en,
.l-footer .l-header__logo-ja {
  color: #fff;
}

/* メイン（ロゴ＋案内文）に上下の余白を持たせる */
.l-footer__main {
  padding: 56px 0;
}

/* コピーライトは画面の一番下に細く敷く */
.l-footer__bottom {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.l-footer__logo {
  align-items: center;
  margin-bottom: 24px;
}

/* フッターのロゴ画像（濃茶の上なので白一色版） */
.l-footer__logo-img {
  display: block;
  width: auto;
  height: 96px;
  margin: 0 auto 16px;
}

/* フッターのロゴはヘッダーより一回り大きく */
.l-footer__logo .l-header__logo-en {
  font-size: 18px;
}

.l-footer__logo .l-header__logo-ja {
  font-size: 26px;
}

.l-footer__text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}

.l-footer__copy {
  font-size: 10px; /* 読ませる文字ではないので小さく */
  color: rgba(255, 255, 255, 0.7);
}

.l-footer__copy small {
  font-size: inherit;
}

/* --------------------------------------------------------------------------
   Component
   -------------------------------------------------------------------------- */
/* 見出し：英字ラベル（Dancing Script）＋日本語 */
.c-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(32px, 5vw, 48px);
  text-align: center;
}

.c-heading__en {
  font-family: var(--ff-en);
  font-size: clamp(29px, 2.9vw, 35px);
  font-weight: 500;
  color: var(--color-crimson);
  line-height: 1.2;
}

.c-heading__en--green {
  color: var(--color-green);
}

.c-heading__ja {
  position: relative;
  padding-bottom: 16px;
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 改行位置の制御：意味のまとまり単位で折り返す（<br>は使わない） */
.c-heading__unit,
.u-unit {
  display: inline-block;
}

.c-heading__ja::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 52px;
  height: 1px;
  background: var(--color-main);
}

/* ボタン */
.c-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 280px;
  padding: 16px 40px;
  border: 1px solid var(--color-main);
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

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

.c-btn--large {
  min-width: min(100%, 420px);
  padding: 20px 40px;
  font-size: 18px;
}

.c-btn__sub {
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

@media (hover: hover) {
  .c-btn--primary:hover {
    background: var(--color-text-sub);
    border-color: var(--color-text-sub);
  }
}

@media (max-width: 767px) {
  .c-btn {
    min-width: 0;
    width: 100%;
    max-width: 360px;
    padding: 15px 24px;
    font-size: 16px;
  }
}

/* 表 */
.c-table th,
.c-table td {
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
  text-align: left;
}

.c-table th {
  width: 22%;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-cream);
  white-space: nowrap;
}

.c-table small {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .c-table th,
  .c-table td {
    display: block;
    width: 100%;
    padding: 10px 14px;
  }

  .c-table th {
    padding-bottom: 6px;
    border-bottom: none;
  }
}

/* 追従CTA（SPのみ） */
.c-fixed-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-fixed-cta);
  padding: 15px;
  border-radius: 4px;
  background: var(--color-main);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  box-shadow: 0 6px 20px rgba(92, 64, 51, 0.3);
  transition: opacity 0.25s ease, translate 0.25s ease;
}

/* フッター（濃茶）に重なると同化して見えなくなるため、そこで引っ込める */
.c-fixed-cta.is-hidden {
  opacity: 0;
  translate: 0 120%;
  pointer-events: none;
}

@media (min-width: 768px) {
  .c-fixed-cta {
    display: none;
  }
}

/* トップに戻る（PC・SP共通） */
.c-pagetop {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: var(--z-fixed-cta);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(92, 64, 51, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-main);
  box-shadow: 0 2px 10px rgba(92, 64, 51, 0.15);
  cursor: pointer;
  opacity: 0;
  translate: 0 12px;
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.25s ease;
}

.c-pagetop.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.c-pagetop svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 768px) {
  .c-pagetop {
    right: 32px;
    bottom: 32px;
    width: 56px;
    height: 56px;
  }

  .c-pagetop svg {
    width: 26px;
    height: 26px;
  }
}

/* --------------------------------------------------------------------------
   Project
   -------------------------------------------------------------------------- */
/* 1 MV */
.p-mv {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  padding: clamp(72px, 10vw, 140px) var(--padding-side);
  overflow: hidden;
  text-align: center;
}

.p-mv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.p-mv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.p-mv__inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  padding: clamp(32px, 4.5vw, 52px) clamp(24px, 5vw, 72px);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(92, 64, 51, 0.25);
}

.p-mv__lead {
  font-size: clamp(16px, 1.4vw, 17px);
  letter-spacing: 0.2em;
  color: var(--color-text-sub);
  white-space: nowrap;
}

/* 告知ページ：上だけ4px足して、見た目の上下の余白をそろえる（下は注意書きの行間が余白に見えるため） */
.p-mv__inner--event {
  padding-top: calc(clamp(32px, 4.5vw, 52px) + 4px);
}

.p-mv__title {
  margin: 0 0 28px; /* 日付との間を少し広く（10/9ヒロさん） */
  font-size: clamp(28px, 3.2vw, 42px); /* 日付より一段強く（10/9） */
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 「内田康夫生誕記念」はメインタイトルの上に小さく（福永さん赤字10/8） */
.p-mv__pretitle {
  display: block;
  margin-bottom: 0.5em;
  font-size: max(0.55em, 18px); /* タイトルを上げた分、比率を下げて約23pxを保つ */
  letter-spacing: 0.2em;
}

/* 副題「―あの日に戻る―」は改行して少し小さく */
.p-mv__subtitle {
  display: block;
  margin-top: 0.3em;
  font-size: max(0.54em, 15px);
  letter-spacing: 0.16em;
}

.p-mv__date {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: 0.08em;
}

/* 開場・開演の時刻は日付より小さく */
.p-mv__time {
  font-size: clamp(16px, 1.5vw, 18px);
  letter-spacing: 0.06em;
}

.p-mv__place {
  margin-top: 2px; /* 日付に少し寄せる（10/9ヒロさん） */
  font-size: clamp(18px, 1.8vw, 21px); /* 日付より少し小さく（福永さん赤字10/8） */
  color: var(--color-text-sub);
}

.p-mv__btn {
  margin-top: 28px;
}

.p-mv__note {
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
}

@media (max-width: 767px) {
  .p-mv {
    min-height: 0;
  }

  /* 1行に収めるため字間を詰める */
  .p-mv__lead {
    letter-spacing: 0.06em;
  }

  /* タイトル1行目（内田康夫生誕記念）が割れないよう画面幅に合わせて縮める */
  .p-mv__title {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: 0.04em;
  }

  /* スマホは2行に固定し、「―」の分だけ反対側に余白を足して文字の部分を中央にそろえる */
  .p-mv__title-line {
    display: block;
  }

  .p-mv__title-line--first {
    padding-right: 1em;
  }

  .p-mv__title-line--last {
    padding-left: 1em;
  }

  .p-mv__inner {
    padding: 32px 20px;
  }

  .p-mv__inner--event {
    padding-top: 36px;
  }
}

/* 2 About */
.p-about__catch {
  margin-bottom: 0; /* 下の本文を削除したので余白なし（上下中央に） */
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-align: center;
}

/* 「お誕生日に、」で必ず改行する */
.p-about__catch-line {
  display: block;
}

/* 中央が白く、外周へ向かってごく薄いベージュ（本サイトの見せ方に合わせる）
   index の「イベント開催にあたって」と gallery の「開催のご報告とお礼」で共通 */
.p-about,
.p-report {
  background: radial-gradient(ellipse 78% 68% at 50% 45%,
    #ffffff 0%,
    #fdfbf6 42%,
    #f5efe3 78%,
    #ece3d1 100%);
}

/* キャッチだけのセクションなので上下をゆったり（PC 160px／SP 約85px。他セクションの約1.33倍） */
.p-about {
  padding-block: clamp(85px, 12vw, 160px);
}

.p-about__body {
  max-width: var(--pc-inner-narrow);
  margin-inline: auto;
}

.p-about__text p + p {
  margin-top: 1em;
}

@media (max-width: 767px) {
  .p-about__catch {
    letter-spacing: 0.04em;
  }
}

/* 見出しなしの形（「Message」だけ）：英字ラベルとことばを近づける */
.p-message--simple .c-heading {
  margin-bottom: 24px;
}

/* キャッチはメッセージと同じ背景の中で、見出しの上に置く */
.p-message__catch {
  margin-bottom: clamp(56px, 7vw, 96px);
}

/* 3 Message：ページの中心。クリーム背景で切り替える */
.p-message {
  position: relative;
  background: #faf8f4;
}

/* 草花柄は本サイトに合わせてごく薄く敷く */
.p-message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/bg-botanical.webp") center / 1600px auto repeat;
  opacity: 0.26;
  pointer-events: none;
}

.p-message > * {
  position: relative;
}

.p-message__body,
.p-message__portrait {
  background-color: rgba(255, 255, 255, 0.85);
}

/* 肖像＝左・本文＝右（福永さんワイヤーの並び） */
.p-message__layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--gap-content);
  align-items: start;
}

.p-message__portrait {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
}

.p-message__portrait-note {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
}

.p-message__body {
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 2.1;
}

.p-message__body p + p {
  margin-top: 1.4em;
}

.p-message__sign {
  margin-top: 28px;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* 一言だけのメッセージ：白い箱を外し、中央寄せで大きく */
.p-message__body--phrase {
  padding: 0;
  background-color: transparent;
  font-size: clamp(26px, 2.8vw, 32px); /* 見出し（clamp(30px,3vw,36px)）より常に小さく、署名（20px）より大きく */
  line-height: 1.9;
  letter-spacing: 0.12em;
  text-align: center;
}

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

@media (max-width: 767px) {
  .p-message__layout {
    grid-template-columns: 1fr;
  }

  .p-message__portrait {
    width: 200px;
    margin-inline: auto;
  }
}

/* 4 Program */
.p-program__lead {
  margin-bottom: clamp(28px, 4vw, 40px);
  text-align: center;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.p-program__list {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid var(--color-line);
}

.p-program__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-line);
}

.p-program__time {
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.p-program__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.p-program__desc {
  margin-top: 6px;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .p-program__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* 5 Outline */
/* ご案内は白（上のメッセージと色が近いため）。下のお申込みの流れと背景を入れ替え */
.p-outline {
  background: var(--color-bg);
}

.p-flow {
  background: var(--color-bg-cream-light);
}

/* 6 Flow */
.p-flow__lead {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-sub);
}

.p-flow__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}

.p-flow__step {
  position: relative;
  padding: 32px 20px 24px;
  border: 1px solid var(--color-line);
  background: #fff;
  text-align: center;
}

.p-flow__num {
  position: absolute;
  top: -16px;
  left: 50%;
  translate: -50% 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-main);
  color: #fff;
  font-family: var(--ff-en);
  font-size: 18px;
  line-height: 1;
}

.p-flow__name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.p-flow__desc {
  margin-top: 8px;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.p-flow__cta {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(32px, 4vw, 48px) var(--padding-side);
  background: var(--color-bg-cream);
  border: 1px solid var(--color-line); /* 背景と同化しないよう薄いライン */
  text-align: center;
}

.p-flow__cta-lead {
  margin-bottom: 20px;
  font-size: 17px;
}

.p-flow__cta-note {
  margin-top: 16px;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
}

/* 4列に収まらなくなったら2列を挟まず一気に縦1列へ（流れが追えるように） */
@media (max-width: 1023px) {
  .p-flow__list {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
    row-gap: 28px;
  }
}

/* 7 Access：生成り地に薄いシルエット＋半透明の白いカード */
.p-access {
  background: var(--color-bg-beige) url("../img/bg-access-animals.webp") center bottom / cover no-repeat;
}

.p-access__card {
  display: grid;
  grid-template-columns: 6fr 7fr; /* 表を少し広めに */
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 2px 12px rgba(92, 64, 51, 0.06);
}

/* 会場・住所・交通アクセスを横罫線で区切った一覧に（福永さんワイヤーの形） */
.p-access__list > .p-access__row:first-child {
  border-top: 1px solid var(--color-main);
}

.p-access__row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: 16px;
}

.p-access__row dt {
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.p-access__row dd {
  line-height: 1.7;
}

.p-access__map {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-cream-light);
}

.p-access__map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* 1000px以下は縦並び。テキストが上・地図が下 */
@media (max-width: 1000px) {
  .p-access__card {
    grid-template-columns: 1fr;
  }

  .p-access__info {
    order: 1;
  }

  .p-access__map {
    order: 2;
  }

  /* 縦並びのときは表の上の濃い線は不要 */
  .p-access__list > .p-access__row:first-child {
    border-top: none;
  }
}

@media (max-width: 767px) {
  /* SPでもラベルと内容は横並び。項目名は折り返さず1行に保つ */
  .p-access__row {
    grid-template-columns: 8.6em 1fr; /* 一番長い「電車でお越しの方」に合わせて全行そろえる */
    gap: 12px;
  }

  .p-access__row dt {
    white-space: nowrap;
  }
}

/* 600px以下は項目名と内容を縦並びに（内容の幅を確保する） */
@media (max-width: 600px) {
  .p-access__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Opening（index・gallery）：クリーム地＋草花の線画で締める */
.p-opening {
  position: relative;
  background: var(--color-bg-cream);
}

.p-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/bg-botanical.webp") center / 1600px auto repeat;
  opacity: 0.26;
  pointer-events: none;
}

.p-opening > * {
  position: relative;
}

/* 告知ページの一文（現在準備しています。） */
.p-opening__lead {
  font-family: var(--ff-serif);
  font-size: 17px;
  letter-spacing: 0.1em;
  text-align: center;
}

/* 8 FAQ */
.p-faq {
  background: var(--color-bg-cream);
}

.p-faq__item {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-line);
}

.p-faq__item:first-child {
  border-top: 1px solid var(--color-line);
}

.p-faq__q,
.p-faq__a {
  position: relative;
  padding-left: 36px;
}

.p-faq__q::before,
.p-faq__a::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ff-en);
  font-size: 22px;
  line-height: 1.3;
}

.p-faq__q {
  font-size: 20px;
  font-weight: 500;
}

.p-faq__q::before {
  content: "Q";
  color: var(--color-main);
}

.p-faq__a {
  margin-top: 10px;
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
}

.p-faq__a::before {
  content: "A";
  color: var(--color-crimson);
}

/* 9 Contact */
.p-contact {
  background: var(--color-bg-cream-light);
}

.p-contact__box {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--color-line);
  background: #fff;
  text-align: center;
}

.p-contact__lead {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.9;
}

.p-contact__name {
  font-size: 19px;
  font-weight: 500;
}

.p-contact__line {
  margin-top: 10px;
  font-size: 16px;
}

.p-contact__time {
  margin-top: 14px;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
/* 原稿差し替え待ちの箱・語（初稿用。本番前に u-placeholder のスタイルを削除する） */
.u-placeholder {
  padding: 0 4px;
  background: var(--color-placeholder-bg);
  color: var(--color-placeholder-text);
  border-bottom: 1px dashed var(--color-placeholder-line);
  font-family: var(--ff-sans);
  font-weight: 400;
}

.u-placeholder-box {
  padding: 20px 24px;
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-line);
  color: var(--color-placeholder-text);
}

/* --------------------------------------------------------------------------
   Gallery版（gallery.html）
   -------------------------------------------------------------------------- */
/* 終了メッセージ（gallery.html）：枠で一塊にしたカード */
.p-mv__done {
  display: inline-block;
  margin-top: 28px;
  padding: 24px clamp(24px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--color-line);
}

.p-mv__thanks {
  font-family: var(--ff-en);
  font-size: clamp(30px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-green);
}

/* 罫線ではさんだ小さなラベル */
.p-mv__closed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.p-mv__closed::before,
.p-mv__closed::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--color-line);
}

.p-mv__closed span {
  font-family: var(--ff-sans);
  font-size: 11px; /* 読ませる文字ではなく飾りのラベル */
  letter-spacing: 0.2em;
  color: #8a7a5c;
  white-space: nowrap;
}

.p-mv__done-text {
  margin-top: 12px;
  font-size: 16px;
  color: var(--color-text-sub);
}

.p-report__text,
.p-opening__text {
  font-size: clamp(16px, 1.5vw, 17px);
  line-height: 2;
}

.p-report__text p + p,
.p-opening__text p + p {
  margin-top: 1.2em;
}

.p-gallery {
  background: #faf8f4;
}

/* 写真タイル：大小を混ぜたモザイク。dense指定で枚数が変わっても穴が空かない */
.p-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(120px, 12vw, 190px);
  grid-auto-flow: dense;
  gap: 16px;
}

.p-gallery__item {
  overflow: hidden;
}

/* 6枚ごとに大きい枠を2つ混ぜる（1枚目=正方形の大、4枚目=横長） */
.p-gallery__item:nth-child(6n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}

.p-gallery__item:nth-child(6n + 4) {
  grid-column: span 2;
}

.p-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
  display: block;
}

/* 写真が届くまでのグレー枠。img に置き換えたらこの span ごと消す */
.p-gallery__ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #e2ded6;
  border: 1px solid #d3cdc2;
  color: #8a8279;
  font-family: var(--ff-sans);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.p-gallery__note {
  margin-top: 32px;
  text-align: center;
  font-family: var(--ff-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-sub);
}

@media (max-width: 1023px) {
  .p-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .p-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* 日付の数字だけを大きくする（年・月・日はそのまま） */
.u-num {
  font-size: 1.3em;
  letter-spacing: 0.02em;
}

/* 日時ほど目立たせない数字（定員・参加費・申込期間） */
.u-num--sm {
  font-size: 1.15em;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}