/* ============================================================
 * はなの芽 ギャラリーページ専用CSS
 * Design: editorial × organic / soft pastel
 *  - 雑誌の特集ページ風 非対称グリッド
 *  - 和文ディスプレイ書体 (Shippori Mincho) で見出し・縦組タイトル
 *  - くすみクリーム背景 + 和紙風 grain + 舞う花弁
 * ============================================================ */

/* ──────────────── ローカル変数 ──────────────── */
:root {
  --font-display: 'Shippori Mincho', 'Yu Mincho', serif;
  --grain-bg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ──────────────── SWELLコンテナ制御（フルワイド） ──────────────── */
body.page-template-page-gallery #content.l-content {
  max-width: none;
  padding: 0;
}
body.page-template-page-gallery .l-mainContent {
  max-width: none;
  padding: 0;
}
body.page-template-page-gallery .post_content {
  margin: 0;
  padding: 0;
}

/* 和紙風 grain（全面に薄く） */
body.page-template-page-gallery::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: var(--grain-bg);
  background-size: 200px 200px;
  opacity: .045;
  mix-blend-mode: multiply;
}

/* ベース背景 */
.page-gallery-main {
  background: var(--bg-cream);
  color: var(--text-main);
  overflow: hidden;
}

/* reveal-delay ヘルパー（既存 .reveal を流用） */
.reveal-delay-1 { transition-delay: .12s; animation-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; animation-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; animation-delay: .36s; }
.reveal-delay-4 { transition-delay: .48s; animation-delay: .48s; }

/* HERO 内の reveal は初期から表示し、フェードイン演出のみ */
.page-hero .reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn .9s ease-out forwards;
}
.page-hero .reveal.reveal-delay-1 { animation-delay: .15s; }
.page-hero .reveal.reveal-delay-2 { animation-delay: .35s; }
.page-hero .reveal.reveal-delay-3 { animation-delay: .55s; }
@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
 * PAGE HERO（雑誌表紙風）
 * ============================================================ */
.page-hero {
  position: relative;
  padding: clamp(60px, 9vw, 110px) 24px clamp(80px, 10vw, 130px);
  background:
    radial-gradient(ellipse 70% 55% at 80% 20%, rgba(247, 214, 224, .35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(232, 245, 226, .55), transparent 70%),
    var(--bg-cream);
  overflow: hidden;
}

.page-hero__deco-butterfly {
  position: absolute;
  top: 8%;
  right: 8%;
  z-index: 2;
  animation: floatButterfly 7s infinite ease-in-out;
}

/* 舞う花弁（Differentiation） */
.page-hero__petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.petal {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 60% 30% 60% 30% / 50% 60% 40% 50%;
  background: radial-gradient(circle at 30% 30%, #f7d6e0, #e8a0b8);
  opacity: .45;
  top: -20px;
  filter: blur(.3px);
}
.petal.p1 { left:  8%; animation: petalFallSlow 14s linear infinite; }
.petal.p2 { left: 24%; animation: petalFallSlow 18s linear infinite 3s; }
.petal.p3 { left: 55%; animation: petalFallSlow 20s linear infinite 6s; }
.petal.p4 { left: 72%; animation: petalFallSlow 16s linear infinite 9s; }
.petal.p5 { left: 88%; animation: petalFallSlow 22s linear infinite 12s; }

@keyframes petalFallSlow {
  0%   { transform: translateY(-40px) rotate(0deg);   opacity: 0;   }
  10%  { opacity: .55; }
  90%  { opacity: .45; }
  100% { transform: translateY(720px) rotate(540deg); opacity: 0;   }
}

/* HERO 2カラム */
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.page-hero__text {
  position: relative;
}

.page-breadcrumb {
  font-size: .78rem;
  color: var(--text-sub);
  margin-bottom: 24px;
  letter-spacing: .06em;
}
.page-breadcrumb a {
  color: var(--text-sub);
  text-decoration: none;
  transition: color .25s;
}
.page-breadcrumb a:hover { color: var(--green-accent); }
.page-breadcrumb__sep {
  margin: 0 8px;
  color: var(--green-mid);
}

.page-hero__en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  letter-spacing: .25em;
  color: var(--green-accent);
  font-weight: 600;
  margin-bottom: 18px;
}

.page-hero__title {
  display: block;
  margin: 0 0 28px;
  line-height: 1.25;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: .08em;
  color: var(--text-main);
}
.page-hero__title .line-1,
.page-hero__title .line-2 {
  display: block;
}
.page-hero__title .line-2 {
  color: var(--green-accent);
  margin-top: .15em;
}

.page-hero__lead {
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  line-height: 2;
  color: var(--text-sub);
  margin: 0 0 32px;
  letter-spacing: .04em;
}

.page-hero__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.page-hero__quick-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-main);
  background: var(--white);
  border: 1.5px solid var(--green-base);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: color .35s, border-color .35s;
  z-index: 1;
}
.page-hero__quick-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--green-light), var(--pink-soft));
  transform: translateX(-101%);
  transition: transform .35s ease;
  z-index: -1;
}
.page-hero__quick-item:hover { color: var(--green-accent); border-color: var(--green-mid); }
.page-hero__quick-item:hover::before { transform: translateX(0); }
.page-hero__quick-item .emoji { font-size: 1rem; }

/* HERO主役写真 */
.page-hero__cover {
  margin: 0;
  position: relative;
}
.page-hero__cover img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius);
  box-shadow:
    0 30px 60px -20px rgba(58, 90, 58, .28),
    0 8px 20px rgba(58, 90, 58, .08);
  display: block;
}
.page-hero__cover figcaption {
  font-family: var(--font-display);
  letter-spacing: .12em;
  color: var(--text-sub);
  margin-top: 16px;
  font-size: .82rem;
  text-align: right;
}


/* ============================================================
 * セクション共通
 * ============================================================ */
.section-instructor-works,
.section-classroom-works,
.section-anniversary,
.section-events,
.section-portraits {
  padding: clamp(70px, 10vw, 120px) 24px;
  position: relative;
}

.section-instructor-works { background: var(--bg-cream); }
.section-classroom-works  { background: linear-gradient(180deg, var(--bg-cream) 0%, #f8f4e8 100%); }
.section-anniversary      { background:
  radial-gradient(ellipse 80% 50% at 50% 30%, rgba(247, 214, 224, .4), transparent 70%),
  var(--bg-cream); }
.section-events           { background: var(--bg-cream); }
.section-portraits        { background: linear-gradient(180deg, var(--bg-cream) 0%, #fbf6e8 100%); }

.gallery-container {
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

/* セクション見出し（雑誌風・大きな英ラベル） */
.gallery-section-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
  position: relative;
}
.section-label {
  display: block;
  font-family: var(--font-en);
  font-size: .82rem;
  letter-spacing: .3em;
  color: var(--green-accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.section-label--display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 4.2rem);
  color: rgba(61, 122, 61, .1);
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: 8px;
  text-transform: none;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .06em;
  line-height: 1.6;
  margin: -10px 0 16px;
  position: relative;
  z-index: 1;
}
.section-sub {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--text-sub);
  margin: 0;
  letter-spacing: .03em;
}


/* ============================================================
 * 講師作品（タブ廃止 / 4カード 2x2 グリッド・高さ統一）
 * ============================================================ */
.works-grid--quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px;
  margin: 0 auto;
}

.work-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(58, 58, 42, .06);
  transition: box-shadow .4s, transform .4s;
  display: flex;
  flex-direction: column;
}
.work-card:hover {
  box-shadow: 0 14px 40px rgba(58, 58, 42, .14);
  transform: translateY(-3px);
}
.work-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.work-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .55s ease, filter .55s ease;
}
.work-card:hover .work-card-image img {
  transform: scale(1.05);
  filter: sepia(.06) saturate(1.05);
}

/* 個別の object-position 調整（顔と作品が見える位置に） */
.work-card-image img[src*="work-exhibition-02"] { object-position: center 35%; }
.work-card-image img[src*="anniversary-10th-04"]{ object-position: center 25%; }
.work-card-image img[src*="exhibition-venue"]   { object-position: center 25%; }

/* 葉物作品: 全体が見えるよう contain 表示にする */
.work-card-image:has(img[src*="work-leaf"]) {
  background: var(--bg-cream);
}
.work-card-image img[src*="work-leaf"] {
  object-fit: contain;
  padding: 14px;
}

.work-card-meta {
  padding: 22px 26px 26px;
  background: var(--white);
  border-top: 1px solid #f0ead8;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.work-no {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--green-mid);
  font-weight: 700;
  margin-bottom: 8px;
}
.work-card-meta h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
  letter-spacing: .04em;
  line-height: 1.5;
}
.work-card-meta p {
  font-size: .88rem;
  color: var(--text-sub);
  line-height: 1.85;
  margin: 0 0 14px;
  flex: 1;
}
.caption-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-en);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--green-accent);
  border: 1px solid var(--green-base);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--green-light);
}


/* ============================================================
 * 教室の作品・レッスン風景（masonry + キャプション overlay）
 * ============================================================ */
.classroom-masonry {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
}
.classroom-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.classroom-item:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.classroom-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.classroom-item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.classroom-item:nth-child(5) { grid-column: span 2; grid-row: span 1; }

.classroom-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(58, 58, 42, .08);
  margin: 0;
}
.classroom-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform .55s ease, filter .55s ease;
}
.classroom-item:hover img {
  transform: scale(1.05);
}
/* 教室画像の個別 object-position 調整 */
.classroom-item img[src*="teacher-arranging-kuwayama"] { object-position: center 20%; }
.classroom-item img[src*="student-arranging-01"]       { object-position: center 30%; }
.classroom-item img[src*="student-arranging-02"]       { object-position: center 30%; }
.classroom-item img[src*="classroom-matsuei-02"]       { object-position: center 25%; }
.classroom-item img[src*="classroom-matsuei-03"]       { object-position: center 30%; }
.classroom-item img[src*="classroom-matsuei-04"]       { object-position: center 25%; }
.classroom-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(58, 58, 42, .82), rgba(58, 58, 42, 0));
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.classroom-item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.classroom-highlight {
  margin-top: 56px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--white);
  padding: 26px 32px;
  border-radius: var(--radius-sm);
  border-left: 5px solid var(--green-mid);
  box-shadow: 0 6px 20px rgba(90, 158, 90, .08);
}
.classroom-highlight-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
.classroom-highlight-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.95;
  color: var(--text-sub);
}
.classroom-highlight-text strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-main);
  letter-spacing: .04em;
}


/* ============================================================
 * 10周年ストーリー
 * ============================================================ */
.anniversary-lead {
  text-align: center;
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  line-height: 2.1;
  color: var(--text-sub);
  margin: 0 0 48px;
  letter-spacing: .04em;
}

.anniversary-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 260px 220px;
  gap: 14px;
  margin-bottom: 56px;
}
.anniversary-tile:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.anniversary-tile:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.anniversary-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.anniversary-tile:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.anniversary-tile:nth-child(5) { grid-column: span 1; grid-row: span 1; }

.anniversary-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(58, 58, 42, .1);
  margin: 0;
}
.anniversary-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform .55s ease;
}
.anniversary-tile:hover img {
  transform: scale(1.05);
}
/* 10周年タイル画像の個別 object-position 調整 */
.anniversary-tile img[src*="anniversary-10th-01"]  { object-position: center 22%; }
.anniversary-tile img[src*="anniversary-10th-02"]  { object-position: center 28%; }
.anniversary-tile img[src*="anniversary-10th-03"]  { object-position: center 22%; }
.anniversary-tile img[src*="anniversary-10th-04"]  { object-position: center 22%; }
.anniversary-tile img[src*="anniversary-10th-05"]  { object-position: center 25%; }
.anniversary-tile figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(58, 58, 42, .82), rgba(58, 58, 42, 0));
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.anniversary-tile:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

.anniversary-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  line-height: 2.1;
  letter-spacing: .08em;
  color: var(--text-main);
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
  padding: 32px 24px;
  position: relative;
  border: none;
}
.anniversary-quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -8px;
  font-size: 4rem;
  color: var(--green-base);
  font-family: serif;
  line-height: 1;
  opacity: .8;
}
.anniversary-quote::after {
  content: '"';
  position: absolute;
  right: 0;
  bottom: -32px;
  font-size: 4rem;
  color: var(--green-base);
  font-family: serif;
  line-height: 1;
  opacity: .8;
}


/* ============================================================
 * イベント・活動（4カード、KIDSは2枚見せ）
 * ============================================================ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.event-card {
  background: var(--white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid #efe8d8;
  box-shadow: 0 6px 20px rgba(58, 58, 42, .06);
  transition: transform .35s, box-shadow .35s;
  display: flex;
  flex-direction: column;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(58, 58, 42, .12);
}
.event-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform .55s ease;
}
.event-card:hover .event-card-image img {
  transform: scale(1.05);
}
/* イベントカード画像の個別 object-position 調整 */
.event-card-image img[src*="work-exhibition-02"]   { object-position: center 32%; }
.event-card-image img[src*="anniversary-10th-04"]  { object-position: center 22%; }
.event-card-image img[src*="anniversary-10th-02"]  { object-position: center 28%; }
.event-card-image img[src*="classroom-matsumoto"]  { object-position: center 35%; }
.event-card-image img[src*="classroom-matsuei-01"] { object-position: center 30%; }
.event-card-image--dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.event-card-image--dual img {
  height: 100%;
}
.event-card-body {
  padding: 22px 26px 26px;
}
.event-card-tag {
  display: inline-block;
  font-family: var(--font-en);
  font-size: .65rem;
  letter-spacing: .25em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.tag-exhibition { color: var(--green-accent); background: rgba(61, 122, 61, .12); }
.tag-demo       { color: #a86a14;             background: rgba(247, 184, 100, .2); }
.tag-party      { color: #c25b80;             background: rgba(247, 214, 224, .55); }
.tag-kids       { color: var(--green-dark);   background: rgba(139, 197, 139, .22); }

.event-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 12px;
  letter-spacing: .04em;
  line-height: 1.5;
}
.event-card-text {
  font-size: .88rem;
  line-height: 1.85;
  color: var(--text-sub);
  margin: 0;
}


/* ============================================================
 * 講師の素顔（17枚 不規則モザイク）
 * ============================================================ */
.portraits-intro {
  text-align: center;
  margin-bottom: 48px;
}
.portraits-intro .copy {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.95;
  color: var(--text-main);
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.portraits-intro p {
  font-size: .92rem;
  line-height: 2;
  color: var(--text-sub);
  margin: 0;
  letter-spacing: .03em;
}

.portraits-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 12px;
}
.portrait-tile.size-l { grid-column: span 3; grid-row: span 2; }
.portrait-tile.size-m { grid-column: span 2; grid-row: span 2; }
.portrait-tile.size-s { grid-column: span 2; grid-row: span 1; }
.portrait-tile.size-w { grid-column: span 3; grid-row: span 1; }

.portrait-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(58, 58, 42, .08);
}
.portrait-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform .55s ease, filter .55s ease;
}
.portrait-tile:hover img {
  transform: scale(1.06);
}
/* 素顔タイル画像の個別 object-position 調整 */
.portrait-tile img[src*="instructor-marilyn"]         { object-position: center 25%; }
.portrait-tile img[src*="instructor-kimono-01"]       { object-position: center 25%; }
.portrait-tile img[src*="instructor-wings-nagasaki"]  { object-position: center 35%; }
.portrait-tile img[src*="instructor-armor"]           { object-position: center 12%; }
.portrait-tile img[src*="instructor-castle-gate"]     { object-position: 80% 60%; }
.portrait-tile img[src*="instructor-torii"]           { object-position: center 25%; }
.portrait-tile img[src*="instructor-kimono-02"]       { object-position: center 25%; }
.portrait-tile img[src*="instructor-shooting"]        { object-position: center 25%; }
.portrait-tile img[src*="travel-himeji-castle"]       { object-position: 35% 25%; }
.portrait-tile img[src*="travel-kyoto-temple"]        { object-position: 75% 35%; }
.portrait-tile img[src*="travel-huistenbosch-01"]     { object-position: center 30%; }
.portrait-tile img[src*="event-nebuta-festival"]      { object-position: center 30%; }
.portrait-tile img[src*="event-kanto-festival"]       { object-position: center 70%; }
.portrait-tile img[src*="event-expo-01"]              { object-position: center 30%; }
.portrait-tile img[src*="event-cherry-picking"]       { object-position: center 30%; }
.portrait-tile img[src*="event-matsuri-yagura"]       { object-position: center 35%; }
.portrait-tile img[src*="garden-flowers"]             { object-position: center 25%; }
.portrait-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(58, 58, 42, .85), rgba(58, 58, 42, 0));
  color: #fff;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .06em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.portrait-tile:hover .portrait-tile__caption {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
 * CTA
 * ============================================================ */
.gallery-cta {
  padding: clamp(60px, 8vw, 90px) 24px;
  background: linear-gradient(135deg, var(--green-light) 0%, var(--yellow-warm) 50%, var(--pink-soft) 100%);
}
.gallery-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(58, 58, 42, .1);
}
.gallery-cta__icon {
  font-size: 2.6rem;
  margin-bottom: 18px;
}
.gallery-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .06em;
  line-height: 1.7;
  margin: 0 0 22px;
}
.gallery-cta__text {
  font-size: .95rem;
  line-height: 2;
  color: var(--text-sub);
  margin: 0 0 30px;
}
.gallery-cta__btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.gallery-cta__btns .btn-primary,
.gallery-cta__btns .btn-secondary {
  display: inline-block;
  padding: 12px 26px;
  font-size: .9rem;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.gallery-cta__btns .btn-primary {
  background: var(--green-accent);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(61, 122, 61, .3);
}
.gallery-cta__btns .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(61, 122, 61, .4);
}
.gallery-cta__btns .btn-secondary {
  background: var(--white);
  color: var(--green-accent);
  border: 1.5px solid var(--green-accent);
}
.gallery-cta__btns .btn-secondary:hover {
  background: var(--green-light);
  transform: translateY(-2px);
}


/* ============================================================
 * ライトボックス
 * ============================================================ */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(40, 40, 30, .92);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s;
}
.gallery-lightbox.open {
  display: flex;
  opacity: 1;
}
.gallery-lightbox__inner {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gallery-lightbox__img {
  max-width: 92vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  transform: scale(.96);
  transition: transform .4s ease;
}
.gallery-lightbox.open .gallery-lightbox__img {
  transform: scale(1);
}
.gallery-lightbox__caption {
  font-family: var(--font-display);
  color: #fff;
  font-size: .92rem;
  letter-spacing: .08em;
  text-align: center;
  margin: 0;
}
.gallery-lightbox__close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, transform .25s;
}
.gallery-lightbox__close:hover {
  background: rgba(255, 255, 255, .3);
  transform: rotate(90deg);
}


/* ============================================================
 * レスポンシブ
 * ============================================================ */
@media (max-width: 960px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
  }
  .page-hero__cover img {
    aspect-ratio: 4 / 3;
  }
  .page-hero__title { gap: 8px; }
  .page-hero__title .vert {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
  }

  .works-grid--quad {
    gap: 20px;
  }

  .classroom-masonry {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
  }
  .classroom-item:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .classroom-item:nth-child(2) { grid-column: span 4; grid-row: span 2; }
  .classroom-item:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .classroom-item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .classroom-item:nth-child(5) { grid-column: span 4; grid-row: span 1; }

  .anniversary-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 180px 180px;
  }
  .anniversary-tile:nth-child(1) { grid-column: span 4; grid-row: span 1; }
  .anniversary-tile:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .anniversary-tile:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .anniversary-tile:nth-child(4) { grid-column: span 2; grid-row: span 1; }
  .anniversary-tile:nth-child(5) { grid-column: span 2; grid-row: span 1; }

  .events-grid { grid-template-columns: 1fr; }

  .portraits-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
  }
  .portrait-tile.size-l { grid-column: span 4; grid-row: span 2; }
  .portrait-tile.size-m { grid-column: span 2; grid-row: span 2; }
  .portrait-tile.size-s { grid-column: span 2; grid-row: span 1; }
  .portrait-tile.size-w { grid-column: span 4; grid-row: span 1; }
}

@media (max-width: 600px) {
  .page-hero {
    padding: 56px 18px 70px;
  }
  .page-hero__title .vert {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
    letter-spacing: .15em;
  }
  .page-hero__quick {
    gap: 8px;
  }
  .page-hero__quick-item {
    padding: 8px 14px;
    font-size: .76rem;
  }

  .section-instructor-works,
  .section-classroom-works,
  .section-anniversary,
  .section-events,
  .section-portraits {
    padding: 56px 18px;
  }

  .section-label--display {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .works-grid--quad {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .classroom-masonry {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 10px;
  }
  .classroom-item:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .classroom-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }

  .anniversary-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 200px;
    grid-auto-rows: 160px;
    gap: 10px;
  }
  .anniversary-tile:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .anniversary-tile:nth-child(n+2) { grid-column: span 1; grid-row: span 1; }

  .portraits-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
    gap: 8px;
  }
  .portrait-tile.size-l { grid-column: span 2; grid-row: span 2; }
  .portrait-tile.size-m { grid-column: span 1; grid-row: span 2; }
  .portrait-tile.size-s { grid-column: span 1; grid-row: span 1; }
  .portrait-tile.size-w { grid-column: span 2; grid-row: span 1; }

  .classroom-item figcaption,
  .anniversary-tile figcaption,
  .portrait-tile__caption {
    opacity: 1;
    transform: translateY(0);
    font-size: .72rem;
    padding: 8px 10px;
  }
}


/* ============================================================
 * a11y - prefers-reduced-motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .petal { animation: none !important; opacity: 0 !important; }
  .reveal,
  .reveal-hop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .deco-float {
    animation: none !important;
  }
}