@charset "UTF-8";
/* =========================================================
   【CSS設定案内】assets/css/style.css
   ページ名やセクション名で検索すると、該当する設定を確認できます。
   :root：全ページ共通の色と書体
   同じセレクタが複数ある場合は、後の指定が優先されます。
   ========================================================= */

/* =========================================================
   【全ページ共通】基本設定・ヘッダー・ナビ・ボタン・フォーム
   :root                 色・フォント
   .site-header / .nav   ヘッダー・メニュー
   .hero / .page-hero    ページ上部の画像と見出し
   .btn                  共通ボタン
   .section-title        セクション見出し
   .bottom-cta           ページ下部の申し込み案内
   ========================================================= */

:root {
  --wine: #85071c;
  --wine-dark: #550611;
  --ink: #2d2423;
  --muted: #756967;
  --cream: #fbf7f2;
  --line: #e8d8d0;
  --serif: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS PMincho",serif;
  --sans: "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --shadow: 0 16px 40px rgba(69,30,24,.10);
}
*,*::before,*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .035em;
  overflow-x: hidden;
}
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,input,textarea,select {
  font: inherit;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
h1,h2,h3,h4,p,ul,ol {
  margin-top: 0;
}
h1,h2,h3,h4 {
  font-family: var(--serif);
  line-height: 1.42;
}
p {
  margin-bottom: 1.25em;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid #ce7783;
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  z-index: 200;
  left: 10px;
  top: -90px;
  background: white;
  padding: 10px;
}
.skip-link:focus {
  top: 10px;
}
.container {
  width: min(1140px,calc(100% - 64px));
  margin-inline: auto;
}
.container-narrow {
  width: min(850px,calc(100% - 48px));
  margin-inline: auto;
}
.section {
  padding: 88px 0;
}
.section-small {
  padding: 58px 0;
}
.section-cream {
  background: var(--cream);
}
.section-rose {
  background: linear-gradient(130deg,#fffaf8,#f9eee9);
}
.section-title {
  text-align: center;
}
.section-title h2 {
  font-size: clamp(27px,3.3vw,39px);
  font-weight: 600;
  color: var(--wine-dark);
  letter-spacing: .13em;
  margin: 0;
}
.section-title .en,.en {
  font-family: Georgia,serif;
  font-size: 12px;
  letter-spacing: .27em;
  color: #b58383;
  text-transform: uppercase;
  display: block;
  margin-top: 7px;
}
.section-title p {
  max-width: 730px;
  margin: 17px auto 0;
  color: var(--muted);
  font-size: 14px;
}
.section-title::after {
  content: "";
  display: block;
  margin: 19px auto 0;
  height: 1px;
  width: 78px;
  background: var(--wine);
}
.eyebrow {
  display: block;
  color: var(--wine);
  font-size: 12px;
  letter-spacing: .24em;
  font-weight: 700;
  margin-bottom: 9px;
}
.lead {
  font-family: var(--serif);
  font-size: clamp(17px,2vw,23px);
  line-height: 2;
  color: var(--wine-dark);
}
.small {
  font-size: 12px;
  color: var(--muted);
}
.text-center {
  text-align: center;
}
.accent {
  color: var(--wine);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 49px;
  padding: 12px 24px;
  border: 1px solid var(--wine);
  color: var(--wine);
  background: transparent;
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: .11em;
  font-size: 14px;
  transition: all .25s ease;
  text-align: center;
}
.btn .arrow {
  font: 700 16px Arial,sans-serif;
  transition: transform .2s;
}
.btn:hover {
  color: white;
  background: var(--wine);
  box-shadow: 0 8px 20px #760d1e20;
}
.btn:hover .arrow {
  transform: translateX(3px);
}
.btn-solid {
  color: white;
  background: var(--wine);
}
.btn-solid:hover {
  background: #aa1330;
}
.btn-light {
  color: white;
  border-color: #e1b5b2;
}
.btn-light:hover {
  background: white;
  color: var(--wine);
}
.btn-sm {
  font-size: 12px;
  min-height: 39px;
  padding: 8px 17px;
  gap: 14px;
}
.btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.text-link {
  color: var(--wine);
  font-family: var(--serif);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .07em;
  border-bottom: 1px solid #b37b7b;
  padding-bottom: 4px;
}
.text-link:hover {
  color: #b3152b;
}
/* 【全ページ共通】ヘッダー：ロゴ・横並びナビ・ハンバーガーボタン（全ページ） */
.site-header {
  height: 78px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 13px #2a030610;
  backdrop-filter: blur(12px);
}
.header-inner {
  width: min(1270px,calc(100% - 60px));
  height: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark {
  width: 71px;
  height: 57px;
  object-fit: contain;
  object-position: center;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.brand-name {
  font-family: var(--serif);
  color: var(--wine-dark);
  font-size: 23px;
  font-weight: bold;
  letter-spacing: .055em;
  white-space: nowrap;
}
.brand-sub {
  font-family: Georgia,serif;
  color: #ac7679;
  letter-spacing: .14em;
  font-size: 10px;
  white-space: nowrap;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(9px,1.25vw,20px);
}
.nav-link {
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  letter-spacing: .025em;
  font-weight: 600;
  padding: 5px 0;
  transition: color .2s;
}
.nav-link:hover,.nav-link.active {
  color: var(--wine);
}
.nav-link.active::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: -5px;
  background: var(--wine);
}
.header-cta {
  min-width: 166px;
  font-size: 12px;
  min-height: 43px;
  white-space: nowrap;
  padding: 9px 15px;
}
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  position: relative;
}
.menu-toggle span {
  display: block;
  height: 2px;
  width: 25px;
  background: var(--wine);
  transition: transform .25s,opacity .25s;
}
.menu-backdrop {
  display: none;
}
/* 【トップページのhero】写真は assets/images/hero-mari-stage.webp。
   下層7ページは、後半の「7ページのヒーロー写真」で専用画像を設定しています。 */
.hero {
  min-height: 515px;
  background-color: #180d0e;
  position: relative;
  color: white;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(17,3,9,1) 0%,rgba(22,5,11,.99) 20%,rgba(28,7,13,.91) 36%,rgba(27,7,11,.48) 52%,rgba(17,7,8,.07) 70%,rgba(14,5,6,.16) 100%);
  z-index: 1;
}
.hero-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 58% 42%;
  filter: saturate(1.06) contrast(1.03);
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,#5d091b,#b01b35,#eaa3a3);
  z-index: 2;
}
.hero-content {
  z-index: 3;
  position: relative;
  padding: 74px 0 80px;
}
.hero-kicker {
  font-family: Georgia,serif;
  font-size: 14px;
  letter-spacing: .27em;
  color: #ebc9b2;
  margin: 0 0 15px;
}
.hero h1 {
  font-size: clamp(37px,4.25vw,59px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: .145em;
  margin: 0 0 18px;
  text-shadow: 0 3px 25px #000;
}
.hero .hero-lead {
  font: 400 18px/1.95 var(--serif);
  letter-spacing: .10em;
  margin: 0 0 12px;
}
.hero-script {
  font: italic 27px/1.2 Georgia,serif;
  color: #de9b95;
  letter-spacing: .04em;
  margin: 10px 0 26px;
  transform: rotate(-6deg);
  transform-origin: left;
}
.hero-cta {
  min-width: 267px;
  border-color: #ecbfc0;
  background: var(--wine);
  box-shadow: 0 8px 25px #0006;
  border-radius: 999px;
}
.hero-side-quote {
  position: absolute;
  z-index: 3;
  right: max(5%,calc((100% - 1150px)/2));
  top: 34px;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .14em;
  text-shadow: 0 2px 7px #000a;
  color: #ead7d1;
  text-align: right;
}
.page-hero {
  min-height: 320px;
  position: relative;
  background: #180d0e var(--page-hero-image, url("../images/hero-mari-stage.webp")) 62% 34% / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: white;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,rgba(17,3,9,1) 0%,rgba(22,5,11,.94) 26%,rgba(28,7,13,.70) 42%,rgba(27,7,11,.24) 60%,rgba(17,7,8,.08) 78%,rgba(14,5,6,.18) 100%);
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 68px 0;
}
.page-hero h1 {
  font: 500 clamp(35px,4vw,52px)/1.4 var(--serif);
  letter-spacing: .12em;
  margin: 0 0 8px;
}
/* 【下層ページ共通】英語見出しを日本語のページタイトルの上に配置し、間隔を調整 */
.page-hero .en {
  display: block;
  color: #f0c3ba;
  font-size: 14px;
  margin: 0 0 10px;
}
.page-hero p {
  font-family: var(--serif);
  font-size: 17px;
  margin: 23px 0 0;
  max-width: 600px;
}
/* 下層ページのヒーローでもトップページと同じ申込ボタンを表示 */
.page-hero .hero-cta {
  margin-top: 20px;
}
.breadcrumb {
  background: #fff9f6;
  border-bottom: 1px solid #f2e5e0;
  font-size: 12px;
  color: #82716d;
  padding: 12px 0;
}
.breadcrumb a:hover {
  color: var(--wine);
}
.breadcrumb span {
  padding: 0 10px;
  color: #b9aca8;
}
/* 【トップページ index.html】教室の特徴・花柄ベース・新着情報 */
.flower-bg {
  position: relative;
  overflow: hidden;
}
.flower-bg::before,.flower-bg::after {
  content: "❀";
  font-family: Georgia,serif;
  position: absolute;
  color: #f3e2dc;
  opacity: .65;
  font-size: 230px;
  line-height: 1;
  pointer-events: none;
}
.flower-bg::before {
  left: -95px;
  bottom: -45px;
  transform: rotate(25deg);
}
.flower-bg::after {
  right: -60px;
  top: -80px;
  transform: rotate(-28deg);
}
.flower-bg>.container {
  position: relative;
  z-index: 1;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  margin: 16px 260px 0 0;
}
.feature {
  padding: 10px 25px 6px;
  text-align: center;
  border-right: 1px solid #ead4cf;
}
.feature:last-child {
  border: 0;
}
.feature-icon {
  font-size: 33px;
  font-family: var(--serif);
  color: var(--wine);
  display: block;
  margin-bottom: 7px;
  height: 50px;
}
.feature h3 {
  color: var(--wine);
  font-size: 18px;
  letter-spacing: .07em;
  margin: 0 0 11px;
}
/* 【トップページ index.html／教室の特徴】3項目の説明文は左揃え。マーク・見出しは中央揃え */
.feature p {
  font-size: 13px;
  line-height: 1.85;
  margin: 0;
  color: #564b48;
  text-align: left;
}
.features-layout {
  position: relative;
}
.feature-panel {
  width: 250px;
  position: absolute;
  right: 0;
  top: -6px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 8px solid #fff;
}
.feature-panel img {
  height: 152px;
  width: 100%;
  object-fit: cover;
}
.feature-panel-body {
  padding: 18px;
  background: #fff7f4;
}
.feature-panel h3 {
  font-size: 21px;
  color: var(--wine);
  margin: 0 0 6px;
}
.feature-panel p {
  font-size: 12px;
  margin: 0 0 12px;
}
.news {
  display: grid;
  grid-template-columns: 160px 1fr 155px;
  gap: 25px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 25px;
  margin-top: 38px;
  margin-right: 280px;
}
.news-head h2 {
  color: var(--wine);
  font: 600 23px var(--serif);
  letter-spacing: .1em;
  margin: 0;
}
.news-head .en {
  font-size: 11px;
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid #eee6e3;
  font-size: 12px;
}
.news-date {
  font-size: 11px;
  white-space: nowrap;
  color: #756d68;
}
.news-tag {
  font-size: 10px;
  white-space: nowrap;
  padding: 1px 6px;
  color: white;
  background: var(--wine);
}
.news-list li a:hover {
  text-decoration: underline;
}
.news-more {
  font-size: 12px;
  color: var(--wine);
  white-space: nowrap;
  align-self: start;
  margin-top: 9px;
}
/* =========================================================
   【トップページ index.html】ABOUT FLAMENCO（フラメンコとは）
   対象HTML：#about.about-strip
   ・各列の横幅：.about-strip の grid-template-columns
   ・写真の表示範囲：.about-strip > img の object-position
   ・左写真のグラデーション：.about-strip > img の mask-image
   ・右写真とグラデーション：.about-dark の background
   ・文章と見出しの余白：.about-content
   ========================================================= */
.about-strip {
  display: grid;
  grid-template-columns: 22% 43% 35%;
  min-height: 295px;
  background: #fbf6f3;
  overflow: hidden;
}
.about-strip > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 295px;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 64%, transparent 100%);
}
.about-content {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 25px 20px 25px 10px;
  background: url("../images/flower-decoration.svg") right -75px bottom -65px / 160px auto no-repeat;
}
.about-content h2 {
  font: 600 32px var(--serif);
  letter-spacing: .10em;
  color: var(--wine-dark);
  margin: 0 0 1px;
}
.about-content .eyebrow {
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .23em;
  color: #bf7b83;
  margin: 0 0 10px;
}
.about-content p {
  font-size: 13px;
  line-height: 1.85;
  margin: 0 0 13px;
}
.about-content .btn {
  min-height: 38px;
  padding: 6px 18px;
  font-size: 12px;
}
.about-dark {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  padding: 30px 20px 30px clamp(35px, 5vw, 75px);
  background:
    linear-gradient(90deg,
      #fbf6f3 0%,
      rgba(251, 246, 243, .87) 8%,
      rgba(45, 6, 25, .22) 43%,
      rgba(17, 7, 29, .65) 100%),
    url("../images/about-flamenco-stage.webp") center / cover no-repeat;
}
.about-dark p {
  position: relative;
  font: 400 21px/1.6 var(--serif);
  letter-spacing: .11em;
  text-shadow: 0 2px 7px rgba(0, 0, 0, .55);
  margin-bottom: 14px;
}
.about-dark .script {
  position: relative;
  font: italic 27px Georgia, serif;
  color: #f3b7bc;
  transform: rotate(-6deg);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
/* =========================================================
   【トップページ index.html／教室紹介動画】
   対象HTML：#school-video
   ・文章の編集：index.html の .home-school-video-copy
   ・動画の変更：index.html の iframe src（YouTubeの動画ID）
   ・YouTubeへのリンク：index.html の「YouTubeで動画を見る」の href
   ・動画の比率：.home-school-video-frame の aspect-ratio
   ========================================================= */
.home-school-video {
  background: linear-gradient(125deg, #fffaf7, #f6eae5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-school-video-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  align-items: center;
  gap: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.home-school-video-copy .en {
  margin: 0 0 10px;
}
.home-school-video-copy h2 {
  color: var(--wine-dark);
  font-size: clamp(25px, 2.7vw, 34px);
  letter-spacing: .1em;
  margin: 0 0 15px;
}
.home-school-video-copy p {
  color: #594b47;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 20px;
}
.home-school-video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #170e11;
  box-shadow: var(--shadow);
}
.home-school-video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
@media (max-width: 680px) {
  /* 【トップページ index.html／スマホ】教室紹介文の下に動画を表示 */
  .home-school-video-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .home-school-video-copy h2 {
    font-size: 27px;
  }
  .home-school-video-copy p {
    margin-bottom: 15px;
  }
}

/* =========================================================
   【トップページ index.html】INSTRUCTOR（主宰紹介）
   対象HTML：#mari.profile-band
   ・各列の横幅：.profile-band の grid-template-columns
   ・写真全体の高さ：--profile-photo-height
   ・画像の上端：--profile-photo-top-offset（主宰見出しの上端と合わせる）
   ・写真の間隔：--profile-photo-gap
   ・中央の主宰画像とSNSバナー：.profile-media / .profile-social-links
   ・主宰画像の表示高さ：.profile-media の行構成で調整
   ・右側2枚の画像：.profile-gallery img
   ・見出し・紹介文・ボタン：.profile-text
   画像ファイル名の変更は index.html 内の img の src で行います。
   ========================================================= */
.profile-band {
  --profile-photo-height: 268px;
  --profile-photo-gap: 6px;
  --profile-photo-top-offset: 20px;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 25fr) minmax(0, 31fr);
  column-gap: var(--profile-photo-gap);
  padding: var(--profile-photo-top-offset) 6% 0 0;
  min-height: var(--profile-photo-height);
  background: #fffafa;
  overflow: hidden;
}
.profile-text {
  position: relative;
  align-self: start;
  padding: 0 20px 18px clamp(24px, 7vw, 96px);
}
.profile-text::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -45px;
  bottom: -15px;
  width: 210px;
  height: 220px;
  background: url("../images/flower-decoration.svg") center / contain no-repeat;
  opacity: .35;
  pointer-events: none;
}
.profile-text > * {
  position: relative;
  z-index: 1;
}
.profile-text h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 600 34px var(--serif);
  color: var(--wine-dark);
  margin: 0 0 1px;
}
.profile-text h2 small {
  flex: none;
  font: 400 15px var(--serif);
  color: var(--wine);
}
.profile-name-jp {
  font: 500 20px var(--serif);
  color: #463036;
  white-space: nowrap;
}
.profile-text .eyebrow {
  color: #bd7882;
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: .23em;
  margin-bottom: 9px;
}
.profile-text p {
  max-width: 350px;
  font-size: 13px;
  line-height: 1.85;
  margin: 0 0 10px;
}
.profile-text .btn {
  width: min(100%, 330px);
  min-height: 38px;
  padding: 7px 12px;
  font-size: 12px;
}
/* 【トップページ index.html／主宰画像・SNS】中央列の下段に3つのリンクバナーを配置 */
.profile-media {
  min-width: 0;
  height: var(--profile-photo-height);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  align-self: start;
}
.profile-main-img,
.profile-gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
}
.profile-main-img {
  height: 100%;
  min-height: 0;
  object-position: 50% 33%;
}
.profile-social-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.profile-social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 7px 2px;
  border: 1px solid #e7cdd2;
  border-radius: 4px;
  background: #fff;
  color: var(--wine);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.profile-social-link span {
  font-size: 13px;
}
.profile-social-link:hover,
.profile-social-link:focus-visible {
  background: var(--wine);
  color: #fff;
}
.profile-gallery {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-self: start;
  gap: var(--profile-photo-gap);
  height: var(--profile-photo-height);
}
.profile-gallery img {
  height: calc((var(--profile-photo-height) - var(--profile-photo-gap)) / 2);
}
/* 【トップページ index.html】クラス・ギャラリー・アクセス紹介行 */
.home-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid #eaded7;
}
.home-row-label h2 {
  font: 600 25px var(--serif);
  letter-spacing: .12em;
  color: var(--wine);
  margin: 5px 0 0;
}
.home-row-label .en {
  font-size: 11px;
}
.home-card-row {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.home-class {
  border: 1px solid #ece1da;
  background: white;
  display: grid;
  grid-template-columns: 43% 1fr;
  min-height: 130px;
}
.home-class img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-class div {
  padding: 12px;
}
.home-class h3 {
  font-size: 17px;
  color: var(--wine);
  margin: 0 0 3px;
}
.home-class p {
  font-size: 11px;
  line-height: 1.6;
  margin: 0 0 6px;
}
.home-class .btn {
  padding: 5px 10px;
  min-height: 28px;
  font-size: 10px;
  gap: 7px;
}
/* ============================================================
   【トップページ index.html】GALLERY：公演写真5枚の一覧
   対象HTML：index.html の <div class="home-gallery">
   ・写真の差し替え：index.html 内の5つの img の src
   ・画像の高さ：.home-gallery img の height
   ・写真の間隔：.home-gallery の gap
   ・画像の表示方法：object-fit: cover（枠に合わせてトリミング）
   ・タブレット（930px以下）：3列表示
   ・スマホ（680px以下）：2列表示。5枚目は2列分の幅
   ============================================================ */
.home-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 135px;
  gap: 8px;
  align-items: stretch;
}
.home-gallery > a {
  min-width: 0;
}
.home-gallery > a:not(:last-child) {
  display: block;
  overflow: hidden;
  background: #180b17;
}
.home-gallery img {
  width: 100%;
  height: 116px;
  object-fit: cover;
  object-position: center;
}
.home-gallery > a:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  font-size: 12px;
  text-align: center;
  color: var(--wine);
  padding: 10px;
}
.home-access {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.access-mini {
  display: grid;
  grid-template-columns: 43% 1fr;
  gap: 12px;
  align-items: start;
}
.access-mini img {
  height: 126px;
  width: 100%;
  object-fit: cover;
}
.access-mini h3 {
  color: var(--wine);
  font-size: 18px;
  margin: 2px 0 5px;
}
.access-mini p {
  font-size: 12px;
  margin: 0 0 9px;
}
.access-mini a {
  font-size: 11px;
  color: var(--wine);
  text-decoration: underline;
}
/* 【下層ページ共通】各教室の写真・見出し・料金・FAQ・案内カード */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}
.split-image {
  width: 100%;
  height: 355px;
  object-fit: cover;
  box-shadow: 14px 14px 0 #f3e5df;
}

.h2-accent {
  font-size: clamp(25px,3vw,34px);
  color: var(--wine-dark);
  letter-spacing: .09em;
  margin-bottom: 17px;
}
.blurb {
  font-size: 14px;
  color: #594c47;
}
.pill {
  display: inline-block;
  padding: 4px 13px;
  background: #f4e3e1;
  color: var(--wine);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
}
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.content-card {
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid #f0e4e0;
}
.content-card img {
  width: 100%;
  height: 205px;
  object-fit: cover;
}
.content-card-body {
  padding: 24px 23px;
}
.content-card h3 {
  color: var(--wine-dark);
  font-size: 22px;
  margin: 0 0 9px;
}
.content-card p {
  font-size: 13px;
  color: #685b56;
}
.step-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  counter-reset: steps;
}
.step-list li {
  counter-increment: steps;
  text-align: center;
  position: relative;
  border: 1px solid var(--line);
  padding: 30px 20px;
  background: #fff;
}
.step-list li::before {
  content: counter(steps,decimal-leading-zero);
  font: italic 30px Georgia,serif;
  color: var(--wine);
  display: block;
  margin-bottom: 6px;
}
.step-list strong {
  display: block;
  font: 600 20px var(--serif);
  margin-bottom: 10px;
}
.step-list p {
  font-size: 13px;
  margin: 0;
}
.schedule-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: #fff;
}
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 590px;
}
.schedule-table th,.schedule-table td {
  padding: 15px 20px;
  border-bottom: 1px solid #ece2de;
  text-align: left;
}
.schedule-table tr:last-child>* {
  border-bottom: 0;
}
.schedule-table th {
  background: #f8efeb;
  color: var(--wine-dark);
  font-size: 13px;
  width: 30%;
  white-space: nowrap;
}
.schedule-table td {
  font-size: 14px;
}
.schedule-table thead th {
  background: #79091b;
  color: white;
  width: auto;
}
.schedule-table tbody tr:nth-child(even) {
  background: #fffaf8;
}

/* =========================================================
   【大阪本校 osaka.html／クラス案内・主宰指導クラス料金】
   スマートフォン（680px以下）では表を縦並びのカードに変更。
   クラス案内：曜日・時間を上段に、クラス名を下段に表示。
   料金一覧：クラス名を上段に、月謝を下段に表示。
   PC・タブレットでは元の表形式のままです。
   ========================================================= */
.osaka-mobile-day {
  display: none;
}
@media (max-width: 680px) {
  .osaka-schedule-wrap,
  .osaka-fees-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }
  .osaka-schedule-table,
  .osaka-fees-table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .osaka-schedule-table thead {
    display: none;
  }
  .osaka-schedule-table tbody,
  .osaka-fees-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .osaka-schedule-table tbody tr,
  .osaka-fees-table tbody tr {
    display: block;
    min-width: 0;
    border: 1px solid var(--line);
    background: #fff;
  }
  .osaka-schedule-table tbody tr > th {
    display: none;
  }
  .osaka-schedule-table tbody tr > td,
  .osaka-fees-table tbody tr > th,
  .osaka-fees-table tbody tr > td {
    display: block;
    width: 100%;
    padding: 11px 15px;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .osaka-schedule-table tbody tr > td:first-of-type,
  .osaka-fees-table tbody tr > th {
    background: #f8efeb;
    color: var(--wine-dark);
    font-size: 13px;
  }
  .osaka-schedule-table tbody tr > td:first-of-type {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 14px;
    font-weight: 700;
  }
  .osaka-mobile-day {
    display: inline;
    min-width: 3.5em;
    font-weight: 700;
  }
  .osaka-schedule-table tbody tr > td:last-of-type,
  .osaka-fees-table tbody tr > td {
    font-size: 14px;
    line-height: 1.7;
  }
  .osaka-fees-table tbody tr > td {
    font-weight: 700;
    color: var(--wine-dark);
  }
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}
.price-card {
  padding: 30px 23px;
  background: white;
  border: 1px solid var(--line);
  text-align: center;
  position: relative;
}
.price-card.popular {
  border-color: var(--wine);
  box-shadow: 0 12px 35px #8c09201a;
}
.price-card .tag {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--wine);
  color: white;
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 20px;
}
.price-card h3 {
  font-size: 20px;
  color: var(--wine-dark);
  margin: 8px 0 10px;
}
.price {
  color: var(--wine);
  font: 500 34px Georgia,serif;
  letter-spacing: 0;
}
.price small {
  font: 400 13px var(--sans);
  margin-left: 2px;
}
.price-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}
.notice {
  padding: 19px 22px;
  border-left: 3px solid #b38d88;
  background: #fdf8f5;
  font-size: 13px;
  color: #625654;
}
/* =========================================================
   【大阪本校 osaka.html／料金・体験レッスン案内】
   ・体験時期の案内：.osaka-trial-notice
   ・料金表の小見出し：.osaka-fees-subtitle
   ・フリー受講料金：.osaka-fees-free
   ・入会金・設備費・体験料金：.osaka-fee-summary
   ・割引・振替・受講条件：.osaka-fees-details
   ========================================================= */
.osaka-trial-notice {
  margin-top: 30px;
  border-left-color: var(--wine);
}
.osaka-trial-notice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--wine-dark);
  font-size: 16px;
}
.osaka-trial-notice p {
  margin: 0;
  line-height: 1.8;
}
.osaka-trial-notice p + p {
  margin-top: 8px;
}
.osaka-trial-notice a {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.osaka-fees-subtitle {
  margin: 18px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--wine);
  color: var(--wine-dark);
  font-size: 16px;
}
.osaka-fees-subtitle span {
  font-size: 12px;
  font-weight: 400;
}
.osaka-fees-free {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: #fdf8f5;
}
.osaka-fees-free h4 {
  margin: 0 0 4px;
  font-size: 17px;
  color: var(--wine-dark);
}
.osaka-fees-free p {
  margin: 0;
  font-size: 13px;
}
.osaka-fees-free > strong {
  white-space: nowrap;
  font: 600 26px var(--serif);
  color: var(--wine);
}
.osaka-fees-free > strong span {
  font-size: 13px;
}
.osaka-fees-info-title {
  margin: 30px 0 15px;
}
.osaka-fee-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.osaka-fee-summary-item {
  padding: 20px;
  border: 1px solid var(--line);
  background: #fff;
}
.osaka-fee-summary-item h4 {
  margin: 0 0 6px;
  color: var(--wine-dark);
  font-size: 16px;
}
.osaka-fee-amount {
  margin: 0 0 6px;
  color: var(--wine);
  font: 600 25px var(--serif);
}
.osaka-fee-amount span {
  font-size: 13px;
}
.osaka-fee-summary-item p:last-child,
.osaka-fees-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}
.osaka-fees-caption {
  margin-top: 12px;
}
.osaka-fees-details {
  display: grid;
  gap: 10px;
}
.osaka-fees-details details {
  border: 1px solid var(--line);
  background: #fff;
}
.osaka-fees-details summary {
  padding: 13px 18px;
  color: var(--wine-dark);
  font-weight: 700;
  cursor: pointer;
}
.osaka-fees-details details[open] summary {
  border-bottom: 1px solid var(--line);
  background: #fbf5f2;
}
.osaka-fees-details-body {
  padding: 15px 20px;
  font-size: 13px;
}
.osaka-fees-details-body ul {
  margin: 0;
  padding-left: 1.4em;
}
.osaka-fees-details-body li + li {
  margin-top: 9px;
}
@media (max-width: 680px) {
  .osaka-fees-free {
    flex-direction: column;
    align-items: flex-start;
  }
  .osaka-fee-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .osaka-fee-summary-item {
    padding: 18px;
  }
}

/* 【大阪・入門クラス osaka-beginner.html】体験レッスン時期のお知らせ */
.beginner-trial-notice {
  margin-bottom: 30px;
  border-left-color: var(--wine);
}
.beginner-trial-notice strong {
  display: block;
  margin-bottom: 7px;
  color: var(--wine-dark);
  font-size: 16px;
}
.beginner-trial-notice p {
  margin: 0;
  line-height: 1.8;
}
.beginner-trial-notice p + p {
  margin-top: 4px;
}
/* 【大阪・入門クラス osaka-beginner.html／スケジュール・料金】
   左のスケジュール表と右の月額料金カードの上端・下端を揃える。
   930px以下では縦並びにする。 */
.beginner-fees-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "heading ."
    "schedule price"
    "note .";
  column-gap: 30px;
}
.beginner-fees-grid > .h2-accent {
  grid-area: heading;
}
.beginner-fees-grid > .schedule-wrap {
  grid-area: schedule;
  min-width: 0;
}
.beginner-fees-grid .schedule-table {
  min-width: 0;
  height: 100%;
}
.beginner-fees-grid > .price-card {
  grid-area: price;
}
.beginner-fees-grid > .small {
  grid-area: note;
}
@media (max-width: 930px) {
  .beginner-fees-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "schedule"
      "note"
      "price";
    row-gap: 0;
  }
  .beginner-fees-grid > .price-card {
    margin-top: 30px;
  }
}

/* 【大阪・入門クラス osaka-beginner.html／月額料金カード】
   入会金の区切り線・文字の配置：月額合計の下に表示。
   書体を「月額合計 8,900円」や体験料金と同じ明朝体に統一し、
   5,000円の金額は月額合計と同じワインレッドで表示します。 */
.beginner-enrollment-fee {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 8px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #ead9d4;
  text-align: left;
  font-family: var(--serif);
  font-size: 15px;
}
.beginner-enrollment-fee strong {
  color: var(--wine);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

/* =========================================================
   【大阪・入門クラス osaka-beginner.html／体験レッスン料金】
   ・カード全体の配置と余白：.beginner-trial-fee
   ・料金の文字サイズ：.beginner-trial-fee-price strong
   ・930px以下の画面では、料金と申込ボタンを縦に配置
   ========================================================= */
.beginner-trial-fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
  padding: 24px 26px;
  border: 1px solid var(--wine);
  background: #fff;
}
.beginner-trial-fee-text h3 {
  margin: 0 0 8px;
  color: var(--wine-dark);
  font-size: 20px;
}
.beginner-trial-fee-text h3 span {
  font-size: 14px;
  font-weight: 400;
}
.beginner-trial-fee-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}
.beginner-trial-fee-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.beginner-trial-fee-price > span {
  font-size: 12px;
  color: var(--muted);
}
.beginner-trial-fee-price strong {
  color: var(--wine);
  font: 600 31px var(--serif);
}
.beginner-trial-fee-price small {
  margin-left: 4px;
  font: 400 14px var(--sans);
}
.beginner-trial-fee .btn {
  font-size: 12px;
  padding: 12px 16px;
  gap: 10px;
}
@media (max-width: 930px) {
  .beginner-trial-fee {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .beginner-trial-fee .btn {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .beginner-trial-fee {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
  }
  .beginner-trial-fee-price {
    align-items: flex-start;
  }
  .beginner-trial-fee .btn {
    grid-column: 1;
    width: 100%;
  }
}

/* 【大阪・入門クラス osaka-beginner.html】レッスン内容の項目と文章 */
.beginner-lesson-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0;
  padding: 0;
}
.beginner-lesson-list li {
  padding-left: 14px;
  border-left: 3px solid #d8adad;
}
.beginner-lesson-list strong,
.beginner-lesson-list span {
  display: block;
}
.beginner-lesson-list strong {
  color: var(--wine-dark);
  font-size: 15px;
}
.beginner-lesson-list span {
  color: #594c47;
  font-size: 13px;
  line-height: 1.8;
}
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
.quote {
  position: relative;
  padding: 26px 25px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 2;
}
.quote::before {
  content: "“";
  font: 80px Georgia,serif;
  line-height: .8;
  color: #eed1d0;
  position: absolute;
  top: 10px;
  left: 16px;
  z-index: 0;
}
.quote blockquote {
  position: relative;
  margin: 28px 0 0;
}
.quote cite {
  font: normal 12px var(--sans);
  color: var(--muted);
  display: block;
  text-align: right;
  margin-top: 12px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  padding: 22px 54px 22px 36px;
  font: 600 17px/1.65 var(--serif);
  position: relative;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: "Q";
  position: absolute;
  left: 4px;
  color: var(--wine);
  font: italic 23px Georgia,serif;
  top: 20px;
}
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 7px;
  top: 16px;
  color: var(--wine);
  font: 26px Georgia,serif;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-answer {
  padding: 0 35px 22px;
  font-size: 14px;
  color: #625654;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(17,5,7,.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 65px 22px 48px;
}
.lightbox[aria-hidden="false"] {
  display: flex;
}
.lightbox img {
  max-width: min(1100px,100%);
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 5px 45px #000b;
}
.lightbox-close {
  position: absolute;
  right: 25px;
  top: 16px;
  background: none;
  border: 0;
  color: white;
  font-size: 40px;
  line-height: 1;
}
.lightbox-caption {
  position: absolute;
  bottom: 11px;
  left: 20px;
  right: 20px;
  color: white;
  text-align: center;
  font-size: 14px;
}
.map-link {
  font-weight: 700;
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.location-card {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 30px;
  background: #fff;
  padding: 20px;
  border: 1px solid var(--line);
}
.location-card img {
  height: 270px;
  width: 100%;
  object-fit: cover;
}
.location-card h3 {
  font-size: 24px;
  color: var(--wine-dark);
  margin: 7px 0 11px;
}
.location-card p {
  font-size: 14px;
}

/* =========================================================
   【大阪本校 osaka.html／スタジオ周辺案内図】
   対象HTML：#access-osaka 内の .osaka-access-guide
   ・案内図全体の余白と背景：.osaka-access-guide
   ・画像の表示幅：.osaka-access-guide-image img の max-width
   ・Googleマップのボタン：.osaka-access-guide-button
   ========================================================= */
.osaka-access-guide {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--cream);
  text-align: center;
}
.osaka-access-guide h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-family: var(--serif);
  color: var(--wine-dark);
}
.osaka-access-guide p {
  margin: 0 0 18px;
  font-size: 14px;
}
.osaka-access-guide-image {
  display: block;
  max-width: 547px;
  padding: 15px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
}
.osaka-access-guide-image img {
  display: block;
  width: 100%;
  max-width: 515px;
  height: auto;
  margin: 0 auto;
}
.osaka-access-guide .osaka-access-guide-note {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 12px;
}
.osaka-access-guide-button {
  max-width: 100%;
  text-decoration: none;
}
@media (max-width: 680px) {
  /* 【大阪本校 osaka.html／スマホ】案内図の表示幅と余白 */
  .osaka-access-guide {
    padding: 18px 12px;
  }
  .osaka-access-guide h3 {
    font-size: 20px;
  }
  .osaka-access-guide-image {
    padding: 8px;
  }
  .osaka-access-guide-button {
    width: 100%;
    font-size: 13px;
    padding: 10px;
  }
}

/* =========================================================
   【大阪本校 osaka.html／西三荘駅からの写真付き道順】
   対象HTML：#osaka-walking-route
   ・写真の表示：.osaka-route-photo-link img
   ・PCの列数：.osaka-route-steps の grid-template-columns
   ・画像のリンク先：osaka.html の各 img src と a href
   ========================================================= */
.osaka-route-guide {
  margin-top: 30px;
}
.osaka-route-guide h3,
.osaka-access-international h3 {
  margin: 0 0 10px;
  font: 600 23px/1.5 var(--serif);
  color: var(--wine-dark);
}
.osaka-route-lead {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.9;
}
.osaka-route-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.osaka-route-step {
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
}
/* 【大阪本校 osaka.html／道順写真5枚】表示枠を3:2で統一。各写真を枠いっぱいに表示します。 */
.osaka-route-photo-link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #f8efea;
  text-decoration: none;
}
.osaka-route-photo-link img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.osaka-route-photo-link:hover img {
  opacity: .88;
}
.osaka-route-photo-link:focus-visible {
  outline: 3px solid var(--wine);
  outline-offset: -3px;
}
.osaka-route-photo-label {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 3px;
  background: rgba(40, 12, 18, .8);
  color: #fff;
  font: 600 12px/1.2 Georgia, serif;
  letter-spacing: .07em;
}
.osaka-route-step-text {
  padding: 16px;
}
.osaka-route-step h4 {
  margin: 0 0 8px;
  color: var(--wine-dark);
  font-size: 16px;
  line-height: 1.6;
}
.osaka-route-step p {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

/* =========================================================
   【大阪本校 osaka.html／海外からのアクセス】
   対象HTML：#osaka-international-access
   ・言語の見出し：.osaka-language-panel summary
   ・言語を開いたときの本文：.osaka-language-body
   ・開閉は HTML の details/summary で動作
   ========================================================= */
.osaka-access-international {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
}
/* 【大阪本校 osaka.html／海外からのアクセス】見出し横の英語表記 */
.osaka-international-heading-en {
  display: inline-block;
  margin-left: 12px;
  font: 500 13px/1.6 var(--sans);
  letter-spacing: .04em;
  color: var(--muted);
  vertical-align: middle;
}
.osaka-access-international > p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
}
.osaka-international-languages {
  display: grid;
  gap: 10px;
}
.osaka-language-panel {
  border: 1px solid var(--line);
  background: var(--cream);
}
.osaka-language-panel summary {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 15px 42px 15px 18px;
  font-weight: 700;
  color: var(--wine-dark);
  cursor: pointer;
  list-style: none;
}
.osaka-language-panel summary::-webkit-details-marker {
  display: none;
}
.osaka-language-panel summary::after {
  position: absolute;
  content: "+";
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 23px;
  line-height: 1;
}
.osaka-language-panel[open] summary::after {
  content: "−";
}
.osaka-language-panel summary:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: -3px;
}
.osaka-language-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
.osaka-language-body {
  padding: 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  line-height: 1.85;
}
.osaka-language-body h4 {
  margin: 0 0 7px;
  font-size: 16px;
  color: var(--wine-dark);
}
.osaka-language-body h4:not(:first-child) {
  margin-top: 18px;
}
.osaka-language-body p {
  margin: 0 0 12px;
}
.osaka-language-body ul {
  margin: 0;
  padding-left: 22px;
}
.osaka-language-body li + li {
  margin-top: 10px;
}
.osaka-language-body .osaka-language-note {
  color: var(--muted);
  margin: 18px 0 0;
}
@media (max-width: 930px) {
  /* 【大阪本校／タブレット】道順写真を2列表示 */
  .osaka-route-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  /* 【大阪本校／スマホ】道順写真を1列表示し、外国語案内の余白を調整 */
  .osaka-route-steps {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .osaka-route-guide h3,
  .osaka-access-international h3 {
    font-size: 20px;
  }
  .osaka-access-international {
    padding: 18px 12px;
  }
  /* 【大阪本校 osaka.html／スマホ】英語見出しを日本語見出しの下に表示します。 */
  .osaka-international-heading-en {
    display: block;
    margin: 3px 0 0;
    font-size: 12px;
  }
  .osaka-language-panel summary {
    padding-left: 12px;
    gap: 6px;
  }
  .osaka-language-body {
    padding: 14px 12px;
    font-size: 13px;
  }
}

/* 【お問い合わせ contact.html】フォーム本体・入力欄・レイアウト */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 43px;
  align-items: start;
}
.contact-form {
  background: #fff;
  padding: 30px 34px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.form-intro {
  font-size: 13px;
  color: var(--muted);
}
.form-field {
  margin-bottom: 22px;
}
.form-field>label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
.required {
  font-size: 10px;
  margin-left: 8px;
  padding: 2px 7px;
  background: var(--wine);
  color: white;
  font-weight: 400;
}
.optional {
  font-size: 11px;
  color: #8c7672;
}
.form-control {
  width: 100%;
  min-height: 47px;
  padding: 11px 13px;
  border: 1px solid #d7c7c1;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
}
.form-control:focus {
  border-color: var(--wine);
  outline: 2px solid #9e25362a;
}
.form-control::placeholder {
  color: #a99c98;
}
textarea.form-control {
  min-height: 160px;
  resize: vertical;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}
.form-radio {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.form-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.form-radio input {
  accent-color: var(--wine);
}
.privacy-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  margin: 8px 0 24px;
}
.privacy-check input {
  accent-color: var(--wine);
  margin-top: 7px;
}
.form-submit {
  width: 100%;
  border: 0;
  min-height: 57px;
}

.contact-sidebar {
  padding: 32px;
  background: #fcf6f2;
  border: 1px solid var(--line);
}
.contact-sidebar h3 {
  font: 600 23px var(--serif);
  color: var(--wine-dark);
}
.contact-sidebar a {
  overflow-wrap: anywhere;
}
.contact-sidebar .contact-phone {
  font: 600 24px Georgia,serif;
  color: var(--wine);
}
.contact-sidebar p {
  font-size: 13px;
}
.contact-sidebar hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 25px 0;
}
/* =========================================================
   【お問い合わせ contact.html】ページ上部のLINE事務局・体験レッスンの案内
   ・QR画像：contact.html の contact-line-qr 内にある img の src
   ・QR表示幅：.contact-line-qr img の width
   ・LINEのURL：contact.html 内の2か所の href
   ・案内文：contact.html の .contact-trial-notice
   ========================================================= */
.contact-line-section {
  padding: 30px 0 0;
}
.contact-line-section + .section-cream {
  padding-top: 30px;
}
.contact-line-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 30px;
  align-items: center;
  background: #fff;
  padding: 24px 30px;
  border: 1px solid var(--line);
}
.contact-line-label {
  display: inline-block;
  padding: 1px 12px;
  background: #06c755;
  border-radius: 5px;
  color: #fff;
  font: 700 14px/1.8 Arial, sans-serif;
}
.contact-line-text h2 {
  font-size: clamp(21px, 2.3vw, 27px);
  color: var(--wine-dark);
  margin: 12px 0 8px;
}
.contact-line-text p {
  font-size: 14px;
  margin-bottom: 18px;
}
.contact-line-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 5px;
  background: #06a947;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.contact-line-link:hover,
.contact-line-link:focus-visible {
  background: #078639;
  color: #fff;
}
.contact-line-qr {
  margin: 0;
  text-align: center;
}
.contact-line-qr a {
  display: block;
  width: fit-content;
  margin-inline: auto;
}
.contact-line-qr img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  background: #fff;
}
.contact-line-qr figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.contact-trial-notice {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 30px 0 0;
  padding: 16px 20px;
  background: #fff9f6;
  border-left: 3px solid var(--wine);
  font-size: 14px;
  line-height: 1.8;
}
.contact-trial-notice strong {
  flex: 0 0 auto;
  color: var(--wine-dark);
}
@media (max-width: 680px) {
  .contact-line-guide {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 18px;
  }
  .contact-line-link {
    width: 100%;
  }
  .contact-trial-notice {
    flex-direction: column;
    gap: 6px;
  }
}

/* 【全ページ共通】下部のお申し込み帯・フッター・上に戻るボタン */
.bottom-cta {
  background: linear-gradient(90deg,rgba(30,2,8,.93),rgba(109,5,25,.88)),url("../images/footer-rose.webp") left center/auto 100% no-repeat,#420512;
  color: white;
  padding: 33px 0;
}
.bottom-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.bottom-cta h2 {
  font-size: 24px;
  letter-spacing: .11em;
  font-weight: 500;
  margin: 0 0 7px;
}
.bottom-cta p {
  font-size: 13px;
  margin: 0;
}
.bottom-cta .btn-row {
  flex-shrink: 0;
}
.site-footer {
  background: #160f10;
  color: #e2d5d3;
  padding: 38px 0 20px;
}
.footer-top {
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: center;
}
.footer-brand .brand-name {
  color: #fff;
  font-size: 23px;
}
.footer-brand .brand-sub {
  color: #bca9a8;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  font-size: 11px;
}
.footer-links a:hover {
  color: white;
  text-decoration: underline;
}
.footer-note {
  border-top: 1px solid #3e3332;
  margin-top: 22px;
  padding-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #b6aaa9;
  font-size: 11px;
}

/* =============================================================
   【全ページ共通／フッター】公式SNSリンク
   ・各SNSのURL：HTMLの .footer-social-link の href で変更
   ・ボタンの大きさ／余白：.footer-social-link の padding と gap
   ・色：.footer-social-link と :hover の background／border-color
   ============================================================= */
.footer-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #3e3332;
  margin-top: 24px;
  padding-top: 20px;
}
.footer-social-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-social-en {
  color: #f1d7c6;
  font: 500 13px/1.3 Georgia, serif;
  letter-spacing: .18em;
}
.footer-social-caption {
  color: #bca9a8;
  font-size: 11px;
}
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 122px;
  padding: 10px 15px;
  border: 1px solid #65434b;
  border-radius: 6px;
  background: #28191d;
  color: #f7e8e3;
  font-size: 12px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.footer-social-link svg {
  display: block;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}
.footer-social-link:hover {
  background: #7b1530;
  border-color: #c78c98;
  color: #fff;
  transform: translateY(-2px);
}
.footer-social-link:focus-visible {
  outline: 2px solid #f2c9b9;
  outline-offset: 3px;
}

.back-to-top {
  position: fixed;
  right: 19px;
  bottom: 18px;
  height: 44px;
  width: 44px;
  display: grid;
  place-items: center;
  z-index: 70;
  border: 1px solid #f1d1ce;
  background: #71091d;
  color: #fff;
  box-shadow: 0 5px 18px #23040a44;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width:1150px) {
  .header-inner {
    width: calc(100% - 35px);
    gap: 14px;
  }
  .brand-name {
    font-size: 19px;
  }
  .brand-mark {
    width: 61px;
  }
  .nav {
    gap: 10px;
  }
  .nav-link {
    font-size: 11px;
  }
  .header-cta {
    min-width: 139px;
    font-size: 11px;
  }
  .features-grid {
    margin-right: 235px;
  }
  .feature-panel {
    width: 222px;
  }
  .feature {
    padding-inline: 16px;
  }
  .news {
    margin-right: 245px;
    grid-template-columns: 140px 1fr;
    gap: 12px;
  }
  .news-more {
    grid-column: 2;
    justify-self: end;
  }
  .home-row {
    grid-template-columns: 135px 1fr;
  }
  .home-class {
    grid-template-columns: 42% 1fr;
  }
  .home-class h3 {
    font-size: 14px;
  }
  /* 【index.html GALLERY】1150px以下も写真5枚＋リンクを1列に維持します。 */
  .home-gallery {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 135px;
  }
  .home-gallery > a:last-child {
    grid-column: auto;
    padding: 7px;
  }
}
@media (max-width:930px) {
  .site-header {
    height: 74px;
  }
  .header-inner {
    width: calc(100% - 34px);
  }
  .brand-name {
    font-size: 20px;
  }
  .menu-toggle {
    display: flex;
    z-index: 103;
  }
  .header-cta {
    margin-left: auto;
  }
  .nav {
    position: fixed;
    z-index: 102;
    top: 74px;
    right: 0;
    width: min(390px,85vw);
    height: calc(100dvh - 74px);
    background: #fff;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 23px 29px 45px;
    transform: translateX(105%);
    transition: transform .27s;
    overflow: auto;
    box-shadow: -10px 25px 45px #25071122;
  }
  .menu-open .nav {
    transform: translateX(0);
  }
  .nav-link {
    font: 500 17px var(--serif);
    padding: 16px 4px;
    border-bottom: 1px solid #eee2de;
    letter-spacing: .08em;
  }
  .nav-link.active::after {
    bottom: 0;
  }
  .menu-backdrop {
    position: fixed;
    z-index: 99; /* ヘッダー(100)より背面：開いたメニューを覆わないようにする */
    inset: 74px 0 0;
    background: #15070877;
  }
  .menu-open .menu-backdrop {
    display: block;
  }
  .menu-open .menu-toggle span:first-child {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  .container {
    width: min(100% - 48px,1140px);
  }
  .hero {
    min-height: 460px;
  }
  .hero-image {
    width: 80%;
    object-position: 50% center;
  }
  .hero-side-quote {
    display: none;
  }
  .hero h1 {
    font-size: 47px;
  }
  .features-grid {
    margin-right: 0;
  }
  .features-layout {
    padding-right: 0;
  }
  .feature-panel {
    position: relative;
    margin: 28px auto 0;
    width: min(460px,100%);
    display: grid;
    grid-template-columns: 45% 55%;
  }
  .feature-panel img {
    height: 100%;
    min-height: 160px;
  }
  .news {
    margin-right: 0;
  }
  /* 【トップページ／タブレット】主宰紹介は文章と画像の2列表示 */
  .profile-band {
    --profile-photo-height: 330px;
    --profile-photo-top-offset: 22px;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    padding-right: 0;
  }
  .profile-text {
    grid-row: 1;
    grid-column: 1;
    padding: 0 20px 22px;
  }
  .profile-text h2 {
    gap: 7px;
    font-size: 27px;
  }
  .profile-name-jp {
    font-size: 17px;
  }
  .profile-media {
    grid-column: 2;
    grid-row: 1;
  }
  .profile-gallery {
    display: none;
  }
  .home-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  /* 【index.html GALLERY・タブレット】3列×2段（写真5枚＋案内リンク）。 */
  .home-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-gallery img {
    height: 140px;
  }
  .home-card-row {
    gap: 12px;
  }
  .about-strip {
    grid-template-columns: 36% 64%;
  }
  .about-dark {
    display: none;
  }
  .bottom-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .split {
    gap: 28px;
  }
  .form-layout {
    grid-template-columns: 1fr 250px;
    gap: 20px;
  }
}
@media (max-width:680px) {
  body {
    font-size: 14px;
  }
  .container {
    width: calc(100% - 36px);
  }
  .container-narrow {
    width: calc(100% - 36px);
  }
  .section {
    padding: 59px 0;
  }
  .section-small {
    padding: 42px 0;
  }
  .section-title {
    margin-bottom: 31px;
  }
  .site-header {
    height: 65px;
  }
  .header-inner {
    width: calc(100% - 24px);
    gap: 7px;
  }
  .brand {
    gap: 3px;
  }
  .brand-mark {
    width: 50px;
    height: 49px;
  }
  .brand-name {
    font-size: 16px;
    letter-spacing: 0;
  }
  .brand-sub {
    font-size: 8px;
    letter-spacing: .06em;
  }
  .header-cta {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    font-size: 10px;
    gap: 4px;
    letter-spacing: 0;
  }
  .header-cta .arrow {
    display: none;
  }
  .menu-toggle {
    width: 37px;
  }
  .nav {
    top: 65px;
    height: calc(100dvh - 65px);
  }
  .menu-backdrop {
    inset: 65px 0 0;
  }
  .hero {
    min-height: 610px;
    align-items: flex-end;
  }
  .hero-image {
    width: 100%;
    height: 100%;
    object-position: 47% 35%;
  }
  .hero::before {
    background: linear-gradient(0deg,rgba(15,5,7,.98) 5%,rgba(21,6,7,.85) 38%,rgba(20,7,8,.16) 81%),linear-gradient(90deg,rgba(31,3,7,.45),transparent);
  }
  .hero-content {
    padding: 240px 0 42px;
  }
  .hero h1 {
    font-size: clamp(30px,9.5vw,42px);
    line-height: 1.38;
    margin-bottom: 14px;
    letter-spacing: .1em;
  }
  .hero .hero-lead {
    font-size: 14px;
    line-height: 1.8;
  }
  .hero-script {
    font-size: 22px;
    margin: 7px 0 19px;
  }
  .hero-kicker {
    font-size: 11px;
  }
  .hero-cta {
    width: 100%;
    min-width: 0;
  }
  .page-hero-inner {
    padding: 53px 0;
  }
  .page-hero h1 {
    font-size: 32px;
  }
  .page-hero p {
    font-size: 14px;
  }
  .btn {
    width: 100%;
    padding: 10px 17px;
  }
  .btn-sm {
    width: auto;
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .feature {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px 14px;
  }
  .feature:last-child {
    border-bottom: 0;
  }
  .feature-icon {
    font-size: 30px;
    height: auto;
  }
  .feature h3 {
    font-size: 20px;
  }
  .feature p {
    font-size: 13px;
  }
  .feature-panel {
    grid-template-columns: 42% 58%;
  }
  .feature-panel-body {
    padding: 13px;
  }
  .feature-panel h3 {
    font-size: 18px;
  }
  .feature-panel p {
    font-size: 11px;
  }
  .feature-panel .btn {
    padding: 8px;
    min-height: 37px;
    font-size: 11px;
  }
  .news {
    grid-template-columns: 1fr;
    margin-top: 28px;
    gap: 12px;
  }
  .news-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }
  .news-head .en {
    display: inline;
  }
  .news-more {
    grid-column: 1;
  }
  .news-list li {
    gap: 8px;
    flex-wrap: wrap;
  }
  .news-list li a {
    flex-basis: 100%;
    margin-top: -1px;
  }
  .about-strip {
    display: block;
  }
  .about-strip > img {
    height: 210px;
    min-height: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about-content {
    padding: 29px 22px 32px;
  }
  .about-content h2 {
    font-size: 28px;
  }
  .profile-band {
    --profile-photo-top-offset: 0px;
    display: flex;
    flex-direction: column;
  }
  .profile-text {
    padding: 32px 22px 22px;
    order: 1;
  }
  .profile-media {
    width: 100%;
    height: auto;
    order: 0;
    grid-template-rows: auto auto;
  }
  .profile-main-img {
    height: 250px;
  }
  .profile-social-links {
    padding: 0 12px;
  }
  .profile-text h2 {
    font-size: 30px;
    gap: 9px;
  }
  .profile-name-jp {
    font-size: 18px;
  }
  .home-row {
    padding: 22px 0;
  }
  .home-row-label h2 {
    font-size: 23px;
  }
  .home-card-row {
    grid-template-columns: 1fr;
  }
  .home-class {
    min-height: 135px;
  }
  .home-class h3 {
    font-size: 19px;
  }
  .home-class p {
    font-size: 12px;
  }
  /* 【index.html GALLERY・スマホ】写真を2列表示、5枚目だけ横幅いっぱいに。 */
  .home-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .home-gallery img {
    height: 132px;
  }
  .home-gallery > a:nth-child(5) {
    grid-column: 1 / -1;
  }
  .home-gallery > a:last-child {
    grid-column: 1 / -1;
    min-height: 42px;
  }
  .home-access {
    grid-template-columns: 1fr;
  }
  .split {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .split-image {
    height: 245px;
    box-shadow: 8px 8px 0 #f4e6df;
  }

  .h2-accent {
    font-size: 27px;
  }
  .cards-3, .price-grid, .quote-grid, .step-list {
    grid-template-columns: 1fr;
  }
  .content-card img {
    height: 235px;
  }
  .price-card {
    padding: 23px;
  }
  .quote {
    padding: 18px 20px;
  }
  .location-card {
    grid-template-columns: 1fr;
  }

  .location-card img {
    height: 205px;
  }

  .form-layout {
    grid-template-columns: 1fr;
  }
  .contact-form {
    padding: 24px 18px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .contact-sidebar {
    padding: 24px;
  }
  .bottom-cta {
    padding: 29px 0;
  }
  .bottom-cta h2 {
    font-size: 21px;
  }
  .bottom-cta .btn-row {
    width: 100%;
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-links {
    line-height: 2.5;
  }
  .footer-social {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .footer-social-links {
    justify-content: stretch;
    width: 100%;
  }
  .footer-social-link {
    flex: 1 1 100px;
    min-width: 0;
    padding: 10px 7px;
  }
  .footer-note {
    align-items: flex-start;
    flex-direction: column;
  }
  .brand .brand-sub {
    max-width: 200px;
  }
  .flower-bg::before,.flower-bg::after {
    font-size: 150px;
  }
  .flower-bg::after {
    display: none;
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    transition: none !important;
    animation: none !important;
  }
}
/* 【全ページ共通】画面幅1320px以下：ナビゲーションを開閉式に切り替える */
@media (min-width:931px) and (max-width:1320px) {
  .menu-toggle {
    display: flex;
    z-index: 103;
  }
  .header-cta {
    margin-left: auto;
  }
  .nav {
    position: fixed;
    z-index: 102;
    top: 78px;
    right: 0;
    width: min(390px,85vw);
    height: calc(100dvh - 78px);
    background: #fff;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 23px 29px 45px;
    transform: translateX(105%);
    transition: transform .27s;
    overflow: auto;
    box-shadow: -10px 25px 45px #25071122;
  }
  .menu-open .nav {
    transform: translateX(0);
  }
  .nav-link {
    font: 500 17px var(--serif);
    padding: 16px 4px;
    border-bottom: 1px solid #eee2de;
    letter-spacing: .08em;
  }
  .nav-link.active::after {
    bottom: 0;
  }
  .menu-backdrop {
    position: fixed;
    z-index: 99; /* ヘッダー(100)より背面：開いたメニューを覆わないようにする */
    inset: 78px 0 0;
    background: #15070877;
  }
  .menu-open .menu-backdrop {
    display: block;
  }
  .menu-open .menu-toggle span:first-child {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-open .menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  .menu-open .menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}
/* 【お問い合わせ contact.html】フォームの表示・入力欄
   contact.html は Shift_JIS で保存してください。
   [hidden] は JavaScript の表示切り替えに使用します。 */
.archive-form-extra {
  background: #fff8f4;
  border: 1px solid #ead2ca;
  padding: 20px 20px 5px;
  margin: 0 0 24px;
}
.archive-form-extra[hidden] {
  display: none !important;
}
.archive-form-extra h3 {
  font-size: 19px;
  color: var(--wine-dark);
  margin: 0 0 6px;
}
.archive-form-extra .form-field {
  margin-bottom: 18px;
}
.form-after-note {
  margin: 16px 0 0;
}
@media (max-width:680px) {
  .archive-form-extra {
    padding: 17px 14px 3px;
  }
}

/* ============================================================================
   【全ページ共通】hero画像・縦幅の共通設定 ＋ トップページの花柄
   .hero / .page-hero    トップ・下層ページ共通の写真エリアの高さ
   .hero-image           写真の表示位置（object-position）
   .hero-content         heroの見出し・説明文の位置
   #features.flower-bg   特徴セクションの花柄（左右・透明度）
   ============================================================================ */

/* ------------------------------------------------------------------
   1. ヒーロー画像
   【写真の高さ】PCの基本寸法は以下の .hero と .page-hero で設定しています。
   【スマホ・タブレット】下層7ページは後半の「下層7ページ／スマホ・タブレット」で
       写真を短く、英字・日本語タイトルを写真の下に配置しています。
   【画像の変更】トップページは index.html の hero-image、
       下層7ページは後半の --page-hero-image にあるファイル名を変更します。
   【写真の推奨】横長の画像（約1600px幅）を使用してください。
   ------------------------------------------------------------------
*/
@media (min-width: 931px) {
  .hero,
  .page-hero {
    height: clamp(340px, 28.5vw, 405px);
    min-height: 0;
  }
  .page-hero {
    /* 写真は右側だけに表示し、左の見出しの背景は濃色にする */
    background-size: 68% auto;
    background-position: right 42%;
  }
  .hero-image {
    width: 68%;
    height: 100%;
    top: 0;
    left: auto; /* 【全ページ共通】hero写真の左端位置：right側の写真エリアだけに配置 */
    right: 0;
    object-fit: cover;
    object-position: 50% 44%;
    filter: saturate(1.06) contrast(1.04);
  }
  .hero::before {
    background: linear-gradient(90deg,
      rgba(17,3,9,1) 0%,
      rgba(22,5,11,.99) 20%,
      rgba(28,7,13,.91) 36%,
      rgba(27,7,11,.48) 52%,
      rgba(17,7,8,.07) 70%,
      rgba(14,5,6,.16) 100%);
  }
  .page-hero::before {
    background: linear-gradient(90deg,
      rgba(17,3,9,1) 0%,
      rgba(22,5,11,.94) 26%,
      rgba(28,7,13,.70) 42%,
      rgba(27,7,11,.24) 60%,
      rgba(17,7,8,.08) 78%,
      rgba(14,5,6,.18) 100%);
  }
  .hero-content {
    padding-top: 16px;
    padding-bottom: 20px;
    /* .containerの左右余白を維持する。max-width指定は中央寄せの原因になる */
    max-width: none;
  }
  .hero-kicker {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .hero h1 {
    font-size: clamp(32px, 3vw, 43px);
    line-height: 1.34;
    margin-bottom: 9px;
  }
  .hero .hero-lead {
    font-size: clamp(12px, 1.04vw, 15px);
    line-height: 1.75;
    margin-bottom: 4px;
  }
  .hero-script {
    font-size: 21px;
    margin: 14px 0 16px;
    transform: none;
  }
  .hero-cta {
    min-height: 42px;
    padding: 7px 22px;
  }
  .hero-side-quote {
    top: 37px;
    font-size: 12px;
  }
  .page-hero-inner {
    max-width: none;
    padding: 30px 0;
  }
  .page-hero p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.8;
  }
}
/* 【全ページ共通】タブレット（681～930px）：heroの縦幅390px */
@media (min-width: 681px) and (max-width: 930px) {
  .hero,
  .page-hero {
    height: 390px;
    min-height: 0;
  }
  .page-hero {
    background-size: 75% auto;
    background-position: right 45%;
  }
  .hero-image {
    width: 75%;
    height: 100%;
    left: auto;
    right: 0;
    object-fit: cover;
    object-position: 48% 44%;
  }
  .hero::before {
    background: linear-gradient(90deg,rgba(19,3,9,.98) 0%,rgba(22,5,11,.88) 35%,rgba(22,5,11,.30) 65%,rgba(14,5,7,.05) 100%);
  }
  .page-hero::before {
    background: linear-gradient(90deg,rgba(19,3,9,.95) 0%,rgba(22,5,11,.72) 38%,rgba(22,5,11,.22) 66%,rgba(14,5,7,.06) 100%);
  }
  .hero-content {
    padding: 22px 0;
    max-width: none;
  }
  .hero h1 {
    font-size: clamp(31px, 4.5vw, 40px);
    line-height: 1.35;
  }
  .hero .hero-lead {
    font-size: 14px;
  }
  .hero-script {
    margin-bottom: 14px;
  }
  .page-hero-inner {
    max-width: none;
    padding: 22px 0;
  }
  .page-hero p {
    font-size: 15px;
    margin-top: 12px;
  }
}
/* 【全ページ共通】スマートフォン（680px以下）：写真を上／文字を下に配置 */
@media (max-width: 680px) {
  .hero,
  .page-hero {
    min-height: 650px;
    height: auto;
    display: flex;
    align-items: flex-end;
  }
  .page-hero {
    /* 写真の高さはトップページと共通。文章量による不要な余白だけをなくす */
    min-height: 0;
    background-size: auto 400px;
    background-position: 40% top;
  }
  .page-hero::before {
    /* 高さを詰めても、写真上のグラデーション位置はトップページと共通にする */
    background: linear-gradient(to bottom,
      rgba(20,7,9,0) 0px,
      rgba(18,5,9,0) 260px,
      rgba(18,5,9,.92) 357px,
      rgba(18,5,9,1) 468px,
      #180609 650px);
  }
  .hero::before {
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(20,7,9,0) 40%,
      rgba(18,5,9,.92) 55%,
      rgba(18,5,9,1) 72%,
      #180609 100%);
  }
  .hero-image {
    width: 100%;
    height: 400px;
    top: 0;
    right: 0;
    object-fit: cover;
    object-position: 40% top;
  }
  .hero-content {
    width: 100%;
    padding: 0 0 34px;
    max-width: none;
  }
  .hero .container.hero-content {
    width: min(1140px,calc(100% - 48px));
  }
  .hero h1 {
    font-size: clamp(25px, 7.8vw, 30px);
    line-height: 1.36;
    letter-spacing: .04em;
  }
  .hero .hero-lead {
    font-size: 13px;
    margin: 12px 0 15px;
  }
  .hero-kicker {
    font-size: 9px;
    margin: 0 0 9px;
  }
  .hero-script {
    font-size: 21px;
    margin: 14px 0 16px;
    transform: none;
  }
  .hero-side-quote {
    display: none;
  }
  .page-hero-inner {
    /* 英語ラベルとh1を、トップページのhero見出しと同じ高さに揃える */
    margin-top: 332px;
    padding: 0 0 36px;
    max-width: none;
  }
  .page-hero h1 {
    font-size: 29px;
    line-height: 1.35;
    letter-spacing: .06em;
  }
  .page-hero p {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 14px;
    max-width: none;
  }
}
/* 小さな画面ではトップページの見出しが少し上がるため、下層ページも揃える */
@media (max-width: 360px) {
  .page-hero-inner {
    margin-top: 318px;
  }
}
/* 狭いスマートフォンではヘッダーの申込ボタンがロゴと重なるため、
   申込導線はhero内ボタンとスマホメニューに集約します。 */
@media (max-width: 480px) {
  .site-header .header-cta {
    display: none;
  }
}
/* ------------------------------------------------------------------
   2. 「Mariフラメンコ教室の特徴」の背景に淡い花柄を配置
   【大きさ】width / height を変更
   【透明度】opacityの数値を下げると、花柄がさらに薄くなります。
   【画像】assets/images/flower-decoration.svg
   ※ 文字・写真より後ろに置くため、読みやすさを妨げません。
   ------------------------------------------------------------------
*/
#features.flower-bg::before,
#features.flower-bg::after {
  content: "";
  position: absolute;
  display: block;
  width: 350px;
  height: 460px;
  pointer-events: none;
  z-index: 0;
  font-size: initial;
  /* 【トップページ index.html】特徴セクションの装飾記号を非表示 */
  line-height: normal;
  color: transparent;
  opacity: .66;
  background: url("../images/flower-decoration.svg") center / contain no-repeat;
}
/* 左下から伸びるバラ */
#features.flower-bg::before {
  left: -86px;
  top: 64px;
  bottom: auto;
  right: auto;
  transform: none;
}
/* 右上のバラ：同じ画像を左右反転して使用 */
#features.flower-bg::after {
  right: -82px;
  top: -90px;
  left: auto;
  bottom: auto;
  transform: scaleX(-1) rotate(-7deg);
}
/* 【トップページ index.html／スマホ】特徴セクションの花柄装飾の大きさ・位置・透明度を調整 */
@media (max-width: 680px) {
  #features.flower-bg::before {
    width: 210px;
    height: 290px;
    left: -75px;
    top: 30px;
    opacity: .45;
  }
  #features.flower-bg::after {
    display: block;
    width: 180px;
    height: 260px;
    right: -90px;
    top: 260px;
    opacity: .4;
  }
}

/* ============================================================================
   【アーカイブ動画 online-archive.html】動画一覧・料金・LINE QRコード
   .archive-hero         アーカイブ動画のタイトル（写真と縦幅は全ページ共通）
   .archive-card         基礎テクニカの動画一覧
   .archive-price-grid   料金表示
   .archive-apply-*      お申込みの流れ
   LINE QRの画像はHTML内の assets/images/line-qr-plantatacon.png
   ============================================================================ */

/* 申込ボタンを含めても固定高さのヒーロー内に収まるよう調整 */
.archive-hero .page-hero-inner {
  padding: 32px 0;
}
.archive-hero h1 {
  font-size: clamp(29px,3.9vw,47px);
}
/* ページ内メニュー */
.archive-jump {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.archive-jump-inner {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0;
}
.archive-jump a {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--wine-dark);
  font-weight: 700;
  white-space: nowrap;
}
.archive-jump a:hover {
  background: #f7e9e5;
  color: var(--wine);
}
/* 紹介文と写真 */
.archive-intro-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 56px;
}
.archive-intro-text>p {
  font-size: 14px;
  color: #554947;
}
.archive-intro .lead {
  font-size: 19px;
}
.archive-intro-image {
  margin: 0;
}
.archive-intro-image img {
  width: 100%;
  height: 385px;
  object-fit: cover;
  object-position: center 19%;
  border: 7px solid #fff;
  box-shadow: 12px 12px 0 #f4e2da;
}
.archive-intro-image figcaption {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  margin-top: 14px;
}
.archive-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0;
}
.archive-benefits span {
  border: 1px solid #e4c7c3;
  background: #fff9f7;
  color: var(--wine);
  font-size: 12px;
  padding: 6px 10px;
}
.archive-teacher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 22px 27px;
  background: #fcf6f3;
  border-left: 3px solid var(--wine);
}
.archive-teacher h3 {
  font-size: 20px;
  color: var(--wine-dark);
  margin: 0 0 7px;
}
.archive-teacher h3 small {
  font: 12px Georgia,serif;
  color: #a97779;
}
.archive-teacher p {
  font-size: 13px;
  color: #655854;
  margin: 0;
}
.archive-teacher .text-link {
  white-space: nowrap;
}
/* 振付講座カード */
.archive-level-help {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: -12px 0 25px;
  color: var(--muted);
  font-size: 12px;
}
.choreo-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}
.choreo-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.choreo-card h3 {
  color: var(--wine-dark);
  font-size: 19px;
  margin: 10px 0;
}
.choreo-card p {
  font-size: 13px;
  color: #5e5250;
  flex: 1;
  margin: 0 0 20px;
}
.choreo-level {
  display: inline-block;
  align-self: flex-start;
  color: var(--wine);
  background: #fff0ed;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
}
.choreo-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #efe4e0;
  padding-top: 12px;
}
.choreo-bottom>span {
  font-size: 11px;
  color: var(--muted);
}
.choreo-bottom strong {
  font: 600 21px Arial,sans-serif;
  color: var(--wine);
  white-space: nowrap;
}
.choreo-bottom small {
  font: 11px var(--sans);
}
.choreo-old {
  color: #867674;
  font-size: 11px;
  text-align: right;
}
.archive-under-note {
  margin: 20px 0 0;
  line-height: 1.8;
}
/* 受講生の声 */
.archive-voices {
  background: #fffaf8;
}
.archive-voices h2 {
  text-align: center;
  color: var(--wine-dark);
  font-size: 27px;
  margin: 0 0 22px;
}
.archive-voice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.archive-voice-grid blockquote {
  margin: 0;
  padding: 20px 25px;
  background: #fff;
  border: 1px solid var(--line);
  font: 15px/2 var(--serif);
}
.archive-voice-grid cite {
  display: block;
  text-align: right;
  font: 11px var(--sans);
  color: var(--muted);
  margin-top: 12px;
}
/* 基礎テクニカ55講座 */
.archive-toolbar {
  max-width: 790px;
  margin: 0 auto 22px;
}
.archive-toolbar label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--wine-dark);
  margin-bottom: 8px;
}
.archive-search-box {
  display: flex;
  background: white;
  border: 1px solid #ddc6c2;
}
.archive-search-box:focus-within {
  outline: 2px solid #a94a59;
  outline-offset: 2px;
}
.archive-search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 13px 15px;
  background: white;
  font: 14px var(--sans);
}
.archive-search-box button {
  border: 0;
  border-left: 1px solid #efdfdb;
  background: #fff5f1;
  color: var(--wine);
  padding: 9px 18px;
  font-size: 12px;
}
.archive-count {
  text-align: right;
  color: var(--muted);
  font-size: 12px;
  margin: 7px 0 0;
}
.archive-list {
  max-width: 950px;
  margin: auto;
  display: grid;
  gap: 9px;
}
.archive-card {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #ecdeda;
  background: #fff;
  padding: 15px 20px;
}
.archive-card-num {
  font: italic 28px Georgia,serif;
  color: #ba8587;
  text-align: center;
}
.archive-card h3 {
  font-size: 16px;
  line-height: 1.55;
  color: var(--wine-dark);
  margin: 0 0 6px;
}
.archive-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.archive-length {
  color: #9c454d;
}
.archive-detail {
  font-size: 12px;
  color: var(--wine);
  border-bottom: 1px solid #d09b9c;
  white-space: nowrap;
}
.archive-detail:hover {
  color: #bd1b39;
}
.archive-empty {
  text-align: center;
  background: white;
  padding: 30px;
}
/* 基礎講座料金 */
.archive-price-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px;
}
.price-set-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 21px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.price-set-card>span {
  font-size: 14px;
  font-weight: 700;
  color: var(--wine-dark);
}
.price-set-card strong {
  font: 600 28px Arial,sans-serif;
  color: var(--wine);
}
.price-set-card small {
  color: var(--muted);
  font-size: 12px;
}
.archive-price-notes {
  margin-top: 20px;
}
.archive-price-notes ul {
  padding-left: 20px;
  margin: 9px 0 0;
}
.archive-special {
  background: #fbf3f0;
  border: 1px solid #e5cfcb;
  margin-top: 21px;
  padding: 22px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.archive-special h3 {
  font-size: 21px;
  color: var(--wine-dark);
  margin: 0 0 8px;
}
.archive-special p {
  font-size: 13px;
  margin: 0;
}
.archive-special strong {
  white-space: nowrap;
  color: var(--wine);
  font: 600 27px Arial,sans-serif;
}
.archive-special small {
  font: 11px var(--sans);
}
/* 申込方法 */
.archive-apply-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: stretch;
}
.archive-apply-box,.archive-contact-box {
  background: white;
  border: 1px solid var(--line);
  padding: 30px;
}
.archive-apply-box h3,.archive-contact-box h3 {
  color: var(--wine-dark);
  font-size: 23px;
  margin: 0 0 14px;
}
.archive-apply-box p,.archive-contact-box p {
  font-size: 13px;
}
.archive-apply-box ol {
  padding-left: 25px;
  font-size: 14px;
  margin: 0 0 25px;
}
.archive-apply-box .btn {
  max-width: 100%;
}
.archive-apply-box .small {
  margin: 15px 0 0;
}
.archive-contact-box {
  background: #fff9f7;
}
.archive-contact-email {
  font-weight: bold;
  font-size: 17px !important;
  overflow-wrap: anywhere;
  color: var(--wine);
}

@media (max-width:920px) {
  .archive-intro-grid {
    gap: 26px;
  }
  .choreo-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .archive-price-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}
@media (max-width:680px) {
  .archive-hero .page-hero-inner {
    padding: 0 0 36px;
  }
  .archive-hero h1 {
    font-size: 30px;
  }
  .archive-jump-inner {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 4px;
    padding: 9px 0;
  }
  .archive-jump a {
    font-size: 11px;
    padding: 7px 4px;
    text-align: center;
    white-space: normal;
  }
  .archive-intro-grid,.archive-voice-grid,.archive-apply-grid {
    grid-template-columns: 1fr;
  }
  .archive-intro-image img {
    height: 290px;
  }
  .archive-teacher {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .choreo-grid,.archive-price-grid {
    grid-template-columns: 1fr;
  }
  .choreo-card {
    min-height: 0;
    padding: 20px;
  }
  .archive-card {
    grid-template-columns: 35px 1fr;
    gap: 10px;
    padding: 13px 12px;
  }
  .archive-card-num {
    font-size: 21px;
  }
  .archive-card h3 {
    font-size: 15px;
  }
  .archive-detail {
    grid-column: 2;
    justify-self: start;
  }
  .archive-apply-box,.archive-contact-box {
    padding: 22px 18px;
  }
  .archive-special {
    flex-direction: column;
    align-items: flex-start;
  }
  .archive-voices h2 {
    font-size: 24px;
  }
}
/* 講座検索の非表示属性を優先する */
.archive-card[hidden] {
  display: none;
}
/* ======================================================
   【更新ガイド】LINE申込案内・QRコード
   画像：assets/images/line-qr-plantatacon.png
   QRの表示サイズは .archive-line-qr img の width で調整します。
   ※正しく読み取れるよう、QRの上下左右の白い余白は残してください。
   ======================================================
*/
.archive-line-guide {
  margin-top: 24px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ead8d2;
}
.archive-line-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.archive-line-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  height: 35px;
  background: #06c755;
  color: #fff;
  border-radius: 7px;
  font: 700 14px Arial, sans-serif;
  letter-spacing: 0;
}
.archive-line-header h4 {
  margin: 0 0 2px;
  font: 700 16px/1.5 var(--sans);
  color: var(--wine-dark);
}
.archive-line-header p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.archive-line-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
}
.archive-line-qr img {
  display: block;
  width: 180px;
  height: 180px;
  max-width: 100%;
  object-fit: contain;
  background: #fff;
}
.archive-line-qr figcaption {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.65;
}
@media (max-width: 680px) {
  .archive-line-guide {
    padding: 16px 12px;
  }
  .archive-line-header {
    align-items: flex-start;
  }
  .archive-line-header h4 {
    font-size: 15px;
  }
}

/* ============================================================================
   【全ページ共通】セクション余白・見出し下余白
   --section-space       セクション内の上下余白（PC 30px、スマホ24px）
   --title-space         見出しの下余白（PC26px、スマホ22px）
   .home-row             トップページの紹介行
   .archive-*            オンラインページ内の余白微調整
   ============================================================================ */

:root {
  --section-space: 30px;
  /* 【全ページ共通】各セクションの上下余白 */
  --title-space: 26px;
  /* 【全ページ共通】見出しブロックの下余白 */
}
/* ---------------------------------------------------------------------------
   1. ページの大きなコンテンツ区切り（全ページ共通）
   ---------------------------------------------------------------------------
*/
.section,
.section-small {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}
/* 見出しの下の余白：本文やカードとの間隔 */
.section-title {
  margin-bottom: var(--title-space);
}
/* タイトル・英文・リード文の間隔を少し詰める */
.section-title .en {
  margin-top: 5px;
}
.section-title p {
  margin-top: 10px;
}
.section-title::after {
  margin-top: 12px;
}
/* 【トップページ index.html】セクションの余白調整 */
#features .features-grid {
  margin-top: 12px;
}
#features .news {
  margin-top: 25px;
  /* 「特徴」と「新着情報」の間 */
  padding-top: 18px;
}
.home-row {
  padding-top: 12px;
  padding-bottom: 12px;
}
/* ---------------------------------------------------------------------------
   3. アーカイブ動画ページ（online-archive.html）の追加調整
   ---------------------------------------------------------------------------
*/
.archive-teacher {
  margin-top: 24px;
}
.archive-benefits {
  margin-top: 16px;
  margin-bottom: 16px;
}
.archive-level-help {
  margin-bottom: 20px;
}
.archive-voices h2 {
  margin-bottom: 18px;
}
.archive-apply-box ol {
  margin-bottom: 20px;
}
/* ---------------------------------------------------------------------------
   4. スマートフォン：狭い画面では24pxを基本にする
   PCと同じ30pxにする場合は、下記の24pxを30pxに変更してください。
   ---------------------------------------------------------------------------
*/
@media (max-width: 680px) {
  :root {
    --section-space: 24px;
    --title-space: 22px;
  }
  #features .news {
    margin-top: 20px;
    padding-top: 16px;
  }
  .home-row {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .feature-panel {
    margin-top: 20px;
  }
}

/* 【講師紹介 instructors.html】講師・アーティストの紹介カード
   .teacher-feature     主宰紹介のレイアウト
   .founder-photo       主宰画像の表示サイズ・位置
   .teacher-card        日本人講師カード
   .teacher-card-image  日本人講師画像の表示サイズ
   .guest-feature-card  招聘アーティストカード
   .guest-small-card    過去の招聘講師カード
   ========================================================= */

:root {
  --teacher-wine: #871027;
  /* 見出し・強調色 */
  --teacher-ink: #38262a;
  /* 本文の文字色 */
  --teacher-line: #eadad9;
  /* カードの枠線 */
}
/* 【講師紹介 instructors.html】ページ上部の背景画像と高さ
   画像：後半の body.page-instructors の --page-hero-image に指定されています。
   高さ：このファイルの「hero画像・縦幅の共通設定」および
       「下層7ページ／スマホ・タブレット」をご確認ください。
   講師紹介本文は .teacher-feature 以降の設定で調整します。 */
.teacher-jump {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  padding-bottom: 6px;
}
.teacher-jump a {
  padding: 8px 14px;
  border-radius: 3px;
  text-decoration: none;
  color: var(--teacher-wine);
  background: #f9eeee;
  border: 1px solid #efdede;
  font-size: 13px;
}
.teacher-jump a:hover,.teacher-jump a:focus-visible {
  color: white;
  background: var(--teacher-wine);
}
.founder-photo {
  background: #f6e7e6;
  color: var(--teacher-ink);
}
.teacher-feature-content .eyebrow {
  display: block;
  margin-bottom: 6px;
}
.teacher-feature-content h2 {
  font-size: clamp(30px,4.2vw,48px);
  color: var(--teacher-wine);
  font-family: serif;
  line-height: 1.4;
  margin: 0 0 2px;
  font-weight: 500;
}
.teacher-feature-content h2 em {
  font-family: Georgia,serif;
  font-weight: normal;
  margin-left: 4px;
}
.teacher-kanji {
  font-size: 22px;
  font-weight: bold;
  margin: 4px 0 8px;
  color: var(--teacher-ink);
}
.teacher-kanji span {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: .08em;
  color: #89636b;
}
.teacher-occupation {
  color: var(--teacher-wine);
  font-weight: 600;
  margin-bottom: 14px;
}
/* 【講師紹介 instructors.html／主宰紹介文】段落の行間・段落間の余白 */
.teacher-feature-content p {
  line-height: 1.75;
  margin-bottom: 10px;
}
.teacher-feature-content p:last-of-type {
  margin-bottom: 12px;
}

.teacher-story-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.teacher-story-box {
  background: white;
  border: 1px solid #f1e5e1;
  padding: 25px 28px;
  position: relative;
}
.teacher-story-box h3 {
  color: var(--teacher-wine);
  font-family: serif;
  font-size: 21px;
  margin: 0 0 12px;
}
.teacher-story-box p {
  margin: 0 0 10px;
  line-height: 1.85;
}
.teacher-career-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 940px;
}
.teacher-career-list li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 18px;
  border-bottom: 1px solid var(--teacher-line);
  padding: 17px 5px;
}
.career-year {
  font: 600 19px Georgia,serif;
  color: var(--teacher-wine);
}
.teacher-career-list h3 {
  font-size: 17px;
  color: var(--teacher-ink);
  margin: 0 0 5px;
}
.teacher-career-list p {
  margin: 0;
  line-height: 1.8;
}
.teacher-works-grid {
  padding: 0;
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}
.teacher-works-grid li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 13px;
  padding: 17px 20px;
  border: 1px solid #eddfde;
  background: white;
}
.teacher-works-grid li > span {
  font: 600 19px Georgia,serif;
  color: var(--teacher-wine);
}
.teacher-works-grid h3 {
  font-family: serif;
  font-size: 19px;
  color: var(--teacher-wine);
  margin: 0 0 5px;
}
.teacher-works-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}
/* 【講師紹介】主な舞台・公演作品から公演映像へ */
.teacher-works-grid .teacher-work-video {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  width: fit-content;
  color: var(--teacher-wine);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.teacher-works-grid .teacher-work-video:hover { color: var(--wine); }
.teacher-action {
  text-align: center;
  margin-top: 20px;
}
.teacher-experience-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 23px;
}
.teacher-mini-panel {
  border-left: 3px solid var(--teacher-wine);
  padding: 5px 0 8px 23px;
}
.teacher-mini-panel h2 {
  font-family: serif;
  color: var(--teacher-wine);
  font-size: 23px;
  margin: 4px 0 12px;
}
.teacher-mini-panel p {
  line-height: 1.85;
}
.teacher-muted {
  font-size: 12px;
  color: #796a6b;
}
.teacher-role {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: #a14b5e;
  margin-bottom: 7px;
}
.teacher-card h3 {
  font-family: serif;
  color: var(--teacher-wine);
  line-height: 1.4;
}
.teacher-romaji {
  display: block;
  color: #936f73;
  font: normal 12px Georgia,serif;
  letter-spacing: .07em;
}
.teacher-card p {
  margin: 0 0 10px;
}
.teacher-under-note {
  font-size: 12px;
  color: #756568;
  margin: 16px 0 0;
}
.teacher-section-lead {
  max-width: 900px;
  margin: 0 auto 24px;
  text-align: center;
  line-height: 1.9;
}
/* ============================================================
   【講師紹介 instructors.html】過去に招聘したスペイン人講師
   対象HTML：#past-instructors の6枚のカード
   ・PCの列数：.guest-small-grid の grid-template-columns
   ・画像列の幅：.guest-small-card の grid-template-columns
   ・写真の表示位置：.guest-small-card img の object-position
   ・スマホの列数と画像幅：下のメディアクエリ
   ============================================================ */
.guest-small-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.guest-small-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
  background: #fffdfb;
  border: 1px solid var(--teacher-line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(90, 37, 48, .065);
}
.guest-small-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
  object-position: center 15%;
  background: #f4e8e5;
}
.guest-small-card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px 16px;
}
.guest-small-card h3 {
  color: var(--teacher-wine);
  font: 600 18px/1.45 var(--serif);
  margin: 0 0 11px;
  padding-left: 10px;
  border-left: 3px solid #a44c5a;
}
.guest-small-card p {
  font-size: 12.5px;
  line-height: 1.8;
  margin: 0;
}
@media (max-width: 1120px) {
  .guest-small-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guest-small-card {
    grid-template-columns: 125px minmax(0, 1fr);
    min-height: 190px;
  }
  .guest-small-card img {
    min-height: 190px;
  }
}
@media (max-width: 680px) {
  .guest-small-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .guest-small-card {
    grid-template-columns: 118px minmax(0, 1fr);
    min-height: 177px;
  }
  .guest-small-card img {
    min-height: 177px;
  }
  .guest-small-card > div {
    padding: 14px;
  }
  .guest-small-card h3 {
    font-size: 17px;
    margin-bottom: 7px;
  }
}
@media (max-width: 380px) {
  .guest-small-card {
    grid-template-columns: 106px minmax(0, 1fr);
  }
  .guest-small-card > div {
    padding: 12px;
  }
}

.teacher-closing {
  background: #fff;
}
.teacher-closing-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: space-between;
}
.teacher-closing h2 {
  color: var(--teacher-wine);
  font: normal 28px serif;
  margin: 4px 0 8px;
}
.teacher-closing p {
  margin: 0;
  line-height: 1.8;
}
.teacher-closing .btn {
  white-space: nowrap;
}
/* 【編集】タブレット・スマートフォン表示 */
@media (max-width:900px) {
  .teacher-feature {
    grid-template-columns: 44% minmax(0,1fr);
    gap: 21px;
  }
  .founder-photo {
    height: 420px;
  }
  .teacher-team-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:680px) {
  .teacher-jump {
    justify-content: flex-start;
    gap: 7px;
    padding-top: 14px;
  }
  .teacher-jump a {
    font-size: 12px;
    padding: 7px 10px;
  }
  .teacher-feature {
    grid-template-columns: 1fr;
  }
  .founder-portrait {
    max-width: 460px;
    margin: auto;
    width: 100%;
  }
  .founder-photo {
    height: auto;
    max-height: 500px;
    aspect-ratio: 4/5;
    object-fit: cover;
  }
  .teacher-feature-content h2 {
    font-size: 34px;
  }
  .teacher-story-grid,.teacher-works-grid,.teacher-experience-grid {
    grid-template-columns: 1fr;
  }
  .teacher-story-box {
    padding: 19px;
  }
  .teacher-career-list li {
    grid-template-columns: 75px 1fr;
    gap: 10px;
    padding: 14px 0;
  }
  .teacher-career-list h3 {
    font-size: 16px;
  }
  .career-year {
    font-size: 16px;
  }
  .teacher-card {
    grid-template-columns: 125px 1fr;
  }
  .teacher-card-image,.teacher-card-image img {
    min-height: 235px;
  }
  .teacher-card-text {
    padding: 16px;
  }
  .teacher-card h3 {
    font-size: 18px;
  }

  .teacher-closing-inner {
    display: block;
  }
  .teacher-closing .btn {
    margin-top: 16px;
  }
}
@media (max-width:400px) {
  .teacher-card {
    grid-template-columns: 95px 1fr;
  }
  .teacher-card h3 {
    font-size: 17px;
  }
  .teacher-card-text {
    padding: 12px;
  }

}
/* 【講師紹介 instructors.html】主宰紹介：画像左・文章右
   列幅の比率：.teacher-feature の grid-template-columns
   主宰画像の高さ：.founder-photo の height
   角丸：border-radius */
.teacher-intro-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdfa 0%, #fff9f6 100%);
}
/* 淡い花びら風の背景装飾。文章に重ならないよう薄く表示 */
.teacher-intro-section::before,
.teacher-intro-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 220px;
  height: 220px;
  opacity: .36;
  background: radial-gradient(ellipse 32px 66px at 50% 18%, #efd1d4 0 55%, transparent 57%),
    radial-gradient(ellipse 32px 66px at 50% 82%, #efd1d4 0 55%, transparent 57%),
    radial-gradient(ellipse 66px 32px at 18% 50%, #efd1d4 0 55%, transparent 57%),
    radial-gradient(ellipse 66px 32px at 82% 50%, #efd1d4 0 55%, transparent 57%);
}
.teacher-intro-section::before {
  top: -98px;
  left: -116px;
  transform: rotate(24deg);
}
.teacher-intro-section::after {
  bottom: -120px;
  right: -120px;
  transform: rotate(-17deg);
}
.teacher-feature {
  display: grid;
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  max-width: 1060px;
  border: 1px solid #e8d4d1;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 36px rgba(80, 24, 37, .085);
}
.founder-portrait {
  position: relative;
  margin: 0;
  min-width: 0;
}
.founder-photo {
  display: block;
}
/* 【講師紹介 instructors.html／主宰の紹介文】文章を上下中央に揃え、余白を調整 */
.teacher-feature-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(14px, 1.5vw, 20px) clamp(22px, 3vw, 36px);
  min-width: 0;
  background: linear-gradient(135deg, #ffffff 0%, #fffaf8 100%);
}
.teacher-feature-content .text-link {
  align-self: flex-start;
}
/* 【講師紹介 instructors.html／主宰 Mari】ギャラリーとメディア取材へのリンクを横並び表示。狭い画面では折り返す */
.founder-gallery-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
}
.founder-gallery-links .text-link {
  display: inline-block;
}

.teacher-feature-content::before {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, #8d1934, #c9948b);
  margin-bottom: 17px;
}

/* 【講師紹介 instructors.html】日本人講師カード：画像左・文章右
   画像列の幅：grid-template-columns
   画像の最小高さ：.teacher-card-image の min-height
   カードの間隔：.teacher-team-grid の gap */
.teacher-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 1行につき講師1名 */
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
}
.teacher-card {
  position: relative;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #ead8d5;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 23px rgba(85, 31, 44, .065);
}
.teacher-card::after {
  content: "";
  position: absolute;
  height: 3px;
  top: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent 24%, #a73e55 74%, #cf9a95 100%);
  pointer-events: none;
}
.teacher-card-image {
  min-height: 215px;
  background: #edddda;
}
.teacher-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 215px;
  max-height: 265px;
  object-fit: cover;
}
.teacher-card-text {
  align-self: center;
  min-width: 0;
  padding: 23px 30px;
}
.teacher-card h3 {
  font-size: clamp(21px, 2.3vw, 26px);
  margin: 0 0 11px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0e4e1;
}
.teacher-card p {
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 8px;
}
.teacher-card p:last-child {
  margin-bottom: 0;
}
/* 【講師紹介 instructors.html／タブレット（900px以下）】カードの列幅と画像の表示高さ */
@media (max-width: 900px) {
  .teacher-feature {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    gap: 0;
  }
  /* 【講師紹介 instructors.html／タブレット】主宰紹介文の上下余白と行間 */
  .teacher-feature-content {
    padding: 12px 22px;
  }
  .teacher-feature-content h2 {
    font-size: clamp(30px, 4vw, 38px);
    line-height: 1.25;
  }
  .teacher-kanji {
    font-size: 19px;
    line-height: 1.35;
    margin: 4px 0 8px;
  }
  .teacher-occupation {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .teacher-feature-content p {
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 8px;
  }
  .teacher-card {
    grid-template-columns: 175px minmax(0,1fr);
  }
  .teacher-card-image,.teacher-card-image img {
    min-height: 205px;
  }
  .teacher-card-text {
    padding: 20px 23px;
  }
}
@media (max-width: 680px) {
  .teacher-feature {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .founder-portrait {
    width: 100%;
    margin: 0;
  }
  .founder-photo {
    width: 100%;
    object-position: center 24%;
  }
  .teacher-feature-content {
    padding: 23px 22px;
  }
  .teacher-feature-content h2 {
    font-size: 32px;
  }
  .teacher-card {
    grid-template-columns: 120px minmax(0,1fr);
  }
  .teacher-card-image,.teacher-card-image img {
    min-height: 210px;
  }
  .teacher-card-image img {
    max-height: none;
    object-position: center 15%;
  }
  .teacher-card-text {
    padding: 17px 18px;
  }
  .teacher-card h3 {
    font-size: 19px;
  }
  .teacher-card p {
    font-size: 12.5px;
    line-height: 1.7;
  }
}
@media (max-width: 400px) {
  .teacher-card {
    grid-template-columns: 100px minmax(0,1fr);
  }
  .teacher-card-text {
    padding: 13px;
  }
  .teacher-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .teacher-card p {
    font-size: 12px;
  }
  .teacher-role {
    font-size: 10px;
    letter-spacing: 0;
  }
}

/* 【講師紹介 instructors.html】写真サイズ・配置
   画像の変更：instructors.html の各 img の src
   主宰画像：.founder-photo
   日本人講師画像：.teacher-card-image img
   招聘アーティスト画像：.guest-feature-photo img
   過去の招聘講師画像：.guest-small-grid / .guest-small-card */
/* 【講師紹介 instructors.html／主宰画像】画像を枠の上端に配置し、縦横比を維持して全体を表示 */
.founder-portrait {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #f5eeeb;
}
.founder-photo {
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* 【講師紹介 instructors.html／日本人講師画像】画像の表示位置：object-position（横中央・縦10%） */
.teacher-card-image img {
  object-position: center 10%;
}
/* 【講師紹介 instructors.html／主宰画像のレスポンシブ設定】 */
@media (max-width: 900px) {
  .founder-photo { height: auto; min-height: 0; }
}
@media (max-width: 680px) {
  .founder-photo { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; }
  .founder-portrait { max-width: none; }
}

/* 【下層ページ共通】余白や文字位置を調整する補助クラス
   例：.u-mt-22 は上余白を22pxに設定。 */
.u-mt-12 { margin-top: 12px; }
.u-mt-13 { margin-top: 13px; }
.u-mt-22 { margin-top: 22px; }
.u-mt-26 { margin-top: 26px; }
.u-mt-30 { margin-top: 30px; }
.u-mt-36 { margin-top: 36px; }
.u-soft-rule { border: 0; border-top: 1px solid #ead9d4; margin: 19px 0; }

/* ============================================================================
   【講師紹介 instructors.html】主宰画像下のSNSリンク
   ・Instagram・ブログ・YouTubeのリンク：instructors.html の .founder-social 内の href
   ・配置・間隔：.founder-social の grid-template-columns / gap
   ・リンクの文字・背景色：.founder-social-link
   ・マウスを重ねた際の色：.founder-social-link:hover
   ============================================================================ */
/* 【講師紹介 instructors.html／SNSリンク】画像とボタンの間隔・ボタン下の余白を12pxに統一 */
.founder-social {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 11px 14px 12px;
  background: #f5eeeb;
  border-top: 1px solid #e8d8d7;
}
.founder-social-link {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 5px;
  border: 1px solid #e8cfd0;
  border-radius: 6px;
  background: #fffdfc;
  color: #80203a;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 2px 7px rgba(90, 21, 38, .045);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.founder-social-link svg {
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.founder-social-link:hover {
  background: #891329;
  border-color: #891329;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 13px rgba(90, 21, 38, .16);
}
.founder-social-link:focus-visible {
  outline: 3px solid #b95c72;
  outline-offset: 3px;
}
@media (max-width: 420px) {
  /* 小さなスマホではアイコン＋文字の間隔を少し詰めます。 */
  .founder-social { gap: 6px; padding: 9px 10px 10px; }
  .founder-social-link { gap: 4px; padding: 10px 2px; font-size: 11px; }
  .founder-social-link svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-social-link { transition: none; }
  .founder-social-link:hover { transform: none; }
}

/* 【講師紹介 instructors.html】特別レッスン・ワークショップ（#workshops）
   写真サイズ：.workshop-card-image / .workshop-card-image img
   文章側の余白：.workshop-card-content
   カード間隔：.workshop-list */
.workshop-lead {
  max-width: 850px;
  margin: 0 auto 24px;
  line-height: 1.9;
}
.workshop-list {
  display: grid;
  gap: 20px;
}
.workshop-card {
  display: grid;
  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  overflow: hidden;
  background: #fffdfb;
  border: 1px solid #ead8d2;
  border-radius: 10px;
  box-shadow: 0 7px 22px rgba(70, 23, 35, .07);
}
.workshop-card-image { margin: 0; min-height: 226px; background: #e9ddd8; }
.workshop-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 226px;
  object-fit: cover;
  object-position: center;
}
.workshop-card-content { align-self: center; padding: 22px 26px; }
.workshop-date {
  display: block;
  color: #9b5360;
  font: 600 12px/1.5 Arial, sans-serif;
  letter-spacing: .08em;
}
.workshop-card h3 {
  margin: 7px 0 4px;
  color: #86172e;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.5;
}
.workshop-subtitle { margin: 0 0 12px; font-weight: 700; color: #4f3339; }
.workshop-card-content p:last-child { margin-bottom: 0; line-height: 1.85; }
@media (max-width: 680px) {
  /* スマートフォンは写真を上、文章を下に配置 */
  .workshop-card { grid-template-columns: 1fr; }
  .workshop-card-image { min-height: 0; aspect-ratio: 16 / 9; }
  .workshop-card-image img { min-height: 0; height: 100%; }
  .workshop-card-content { padding: 19px 18px 22px; }
  .workshop-list { gap: 16px; }
}

/* ===========================================================================
   【gallery.html のデザインを調整したいときの目印】
   ※ gallery.htmlの「コピー開始～コピー終了」は掲載内容を増やすための編集場所です。
      色・文字サイズ・列数・余白など「見た目」を変えたいときだけCSSを編集します。

   PHOTO GALLERYのカード：.mari-photo-grid / .mari-photo-card
   公演別フォトアルバム：.performance-album / .performance-album-summary
   公演ポスター・紹介：.gallery-archive-card / .gallery-archive-list
   ヘレス公演特集：.jerez-feature-article / .jerez-feature-photo-grid
   舞台映像：.mari-video-grid / .mari-video-card
   メディア出演：.gallery-media-grid / .gallery-media-card
   雑誌掲載：.gallery-magazine-grid / .gallery-magazine-card
   活動記録の単一一覧：.gallery-history-single / .gallery-history-entries

   CSSは上から順番に適用され、後ろの同じクラス名が設定を上書きする場合があります。
   変更時はクラス名で検索し、スマホ用の@media設定も一緒に確認してください。
   =========================================================================== */

/* 【ギャラリー gallery.html】動画・写真・公演記録
   動画カード：.mari-video-grid / .mari-video-card
   写真カード：.mari-photo-grid / .mari-photo-card
   写真拡大：.mari-gallery-lightbox / .mari-lightbox-nav
   公演予定：.mari-upcoming-card */
.mari-gallery-section { padding-top: 40px; padding-bottom: 47px; }
.mari-gallery-section .section-title { margin-bottom: 25px; }
.mari-gallery-section .section-title h2 { letter-spacing: .085em; }
.mari-gallery-section .section-title p { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 【ギャラリー】動画カード：PCは横3列、スマホは横1列 */
.mari-video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.mari-video-card {
  min-width: 0; background: #fff; border: 1px solid #eddfd7; border-radius: 9px;
  overflow: hidden; box-shadow: 0 10px 24px rgba(69,30,24,.065);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mari-video-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(69,30,24,.12); }
.mari-video-frame { position: relative; aspect-ratio: 16 / 9; background: #261719; overflow: hidden; }
.mari-video-poster { width: 100%; height: 100%; display: block; padding: 0; border: 0; background: #271d20; color: white; position: relative; }
.mari-video-poster img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: transform .3s ease, opacity .3s ease; }
.mari-video-poster:hover img { transform: scale(1.04); opacity: .72; }
.mari-video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(19,4,8,.48) 100%); pointer-events: none; }
.mari-video-play {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(126,5,31,.94); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 22px #14040888;
  transition: background .2s ease, transform .2s ease;
}
.mari-video-poster:hover .mari-video-play { transform: translate(-50%,-50%) scale(1.10); background: #a8102f; }
.mari-video-watch { position: absolute; z-index: 2; bottom: 9px; right: 13px; font-size: 11px; font-weight: bold; color: #fff; }
.mari-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.mari-video-info { padding: 13px 17px 15px; }
.mari-media-eyebrow { color: #a16d65; letter-spacing: .16em; font-size: 10px; font-weight: 700; margin: 0 0 4px; }
.mari-video-info h3 { font: 600 17px/1.55 var(--serif); color: var(--wine-dark); letter-spacing: .035em; margin: 0 0 5px; }
.mari-video-info > p:not(.mari-media-eyebrow) { color: #796763; font-size: 12px; line-height: 1.6; margin: 0 0 8px; }
.mari-media-link { color: var(--wine); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mari-media-link:hover { color: #c21739; }

/* 【ギャラリー】写真カード：カード下に写真の説明が常に表示されます */
.mari-photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.mari-photo-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #eaddd5; border-radius: 8px; background: #fff; box-shadow: 0 10px 20px rgba(69,30,24,.055); }
.mari-photo-button { position: relative; padding: 0; border: none; display: block; width: 100%; background: #261316; overflow: hidden; }
.mari-photo-cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.mari-photo-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, opacity .35s ease; }
.mari-photo-button:hover img { transform: scale(1.055); opacity: .86; }
.mari-photo-zoom { position: absolute; right: 12px; bottom: 12px; padding: 3px 11px; background: rgba(60,11,22,.90); border: 1px solid #ffffff61; border-radius: 4px; font-size: 11px; font-weight: 700; color: white; }
.mari-photo-description { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.mari-photo-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; color: #96655d; margin-bottom: 4px; }
.mari-photo-description h3 { font: 600 16px/1.65 var(--serif); color: var(--wine-dark); margin: 0; letter-spacing: .035em; }

/* 【ギャラリー gallery.html】写真カード下段の「ダイジェスト動画を見る」リンク
   ・写真自体はLightboxで拡大、こちらのリンクはYouTubeを別タブで開きます。
   ・動画のURLは gallery.html の各 mari-photo-video-link の href で変更できます。 */

.mari-photo-description h3 { margin-bottom: 13px; }

/* 【ギャラリー】Lightbox：前へ・次へ・写真枚数を表示 */
.mari-gallery-lightbox { padding: 62px 82px 70px; }
.mari-lightbox-figure { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; max-width: 100%; max-height: 100%; }
.mari-gallery-lightbox img { display: block; width: auto; height: auto; max-height: calc(100vh - 162px); max-width: min(1050px,100%); object-fit: contain; }
.mari-gallery-lightbox .lightbox-caption { position: static; margin-top: 15px; font-size: 14px; line-height: 1.6; max-width: 880px; }
.mari-gallery-lightbox .lightbox-close { z-index: 1; right: 24px; top: 12px; min-width: 48px; min-height: 48px; }
.mari-lightbox-nav { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); width: 48px; height: 58px; background: #ffffff19; border: 1px solid #ffffff55; border-radius: 5px; color: white; font-size: 40px; line-height: 1; }
.mari-lightbox-prev { left: 20px; }
.mari-lightbox-next { right: 20px; }
.mari-lightbox-nav:hover,.mari-lightbox-nav:focus-visible { background: var(--wine); }
.mari-lightbox-counter { position: absolute; right: 30px; bottom: 14px; font-size: 12px; color: #ebd2d2; }

/* 【ギャラリー gallery.html】年別公演記録：年ごとに展開できる一覧表示 */

.mari-photo-button:focus-visible,
.mari-video-poster:focus-visible { outline: 3px solid #c86b64; outline-offset: 3px; }

/* 【ギャラリー】今後の公演：写真と案内文を横並びで紹介 */

@media (max-width: 930px) {
  .mari-video-grid,.mari-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
  .mari-gallery-section { padding-top: 36px; padding-bottom: 42px; }

}
@media (max-width: 680px) {
  .mari-gallery-section { padding-top: 30px; padding-bottom: 35px; }
  /* スマホでも「ギャラリー・公演情報」が1行に収まるよう見出し文字だけ縮小 */
  .mari-gallery-hero h1 { font-size: clamp(24px, 6.55vw, 30px); letter-spacing: .055em; }
  .mari-video-grid { grid-template-columns: 1fr; gap: 16px; }
  .mari-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .mari-video-info { padding: 12px 14px 14px; }
  .mari-photo-description { padding: 9px 10px 12px; }
  .mari-photo-description h3 { font-size: 12px; line-height: 1.55; }
  /* 【ギャラリー】スマートフォン2列表示でも動画リンクを収める */

  .mari-photo-tag { font-size: 10px; }
  .mari-photo-zoom { font-size: 10px; right: 7px; bottom: 7px; padding: 2px 7px; }
  .mari-gallery-lightbox { padding: 75px 52px 82px; }
  .mari-gallery-lightbox img { max-height: calc(100vh - 215px); }
  .mari-lightbox-nav { width: 39px; height: 47px; font-size: 32px; }
  .mari-lightbox-prev { left: 5px; }
  .mari-lightbox-next { right: 5px; }
  .mari-gallery-lightbox .lightbox-caption { font-size: 12px; }

}
@media (prefers-reduced-motion: reduce) {
  .mari-video-card,.mari-video-poster img,.mari-photo-cover img { transition: none; }
}

/* 【全ページ共通】スマホ・タブレットの開閉メニュー
   対象：#globalNav / #menuToggle
   メニューの左右余白：下記 .nav の padding
   ヘッダー直下に画面幅いっぱいで表示します。 */
@media (max-width: 1320px) {
  .site-header {
    --mari-menu-header-height: 78px;
  }
  .site-header .nav {
    /* ヘッダーを基準とした絶対配置。画面外に動かさない */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: calc(100vh - var(--mari-menu-header-height));
    height: calc(100dvh - var(--mari-menu-header-height));
    z-index: 102;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 14px max(24px, calc((100% - 520px) / 2)) 36px;
    margin: 0;
    background: #fffaf7;
    color: #42212a;
    border-top: 1px solid #eedbd5;
    box-shadow: 0 10px 22px rgba(33, 8, 13, .10);
    transform: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body.menu-open .site-header .nav {
    display: flex;
    transform: none;
  }
  .site-header .nav-link {
    display: block;
    width: 100%;
    padding: 15px 4px;
    color: #42212a;
    border-bottom: 1px solid #ead9d4;
    font: 500 17px/1.5 var(--serif);
    letter-spacing: .06em;
    text-align: left;
  }
  .site-header .nav-link:hover,
  .site-header .nav-link.active {
    color: var(--wine);
  }
  .site-header .menu-toggle {
    z-index: 103;
  }
  /* 【全ページ共通／開閉メニュー】メニュー表示中の背景レイヤーを非表示にする */
  .menu-backdrop,
  body.menu-open .menu-backdrop {
    display: none;
  }
}
@media (min-width: 681px) and (max-width: 930px) {
  .site-header {
    --mari-menu-header-height: 74px;
  }
}
@media (max-width: 680px) {
  .site-header {
    --mari-menu-header-height: 65px;
  }
  .site-header .nav {
    padding: 10px 22px 30px;
  }
  .site-header .nav-link {
    padding: 14px 3px;
    font-size: 16px;
  }
}

/* 【大阪入門クラス／タブレット幅】料金カードのラベルも横にはみ出さないようにする */
@media (min-width: 681px) and (max-width: 930px) {
  .price-card .tag {
    left: 0;
    right: 0;
    transform: none;
    white-space: normal;
    padding: 4px 6px;
    line-height: 1.5;
  }
}

/* 【全ページ共通／フッターSNS】狭いスマホのリンク表示 */
@media (max-width: 390px) {
  .footer-social-links {
    gap: 6px;
  }
  .footer-social-link {
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
  }
}

/* ============================================================
   【講師紹介 instructors.html】スペインから招聘したアーティスト
   写真とプロフィール：雑誌の人物紹介をイメージしたすっきりした2列カード
   講習実績：カード下部の帯として全幅に配置（中途半端な左縦線は使用しない）
   ============================================================ */
#guests .guest-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
#guests .guest-feature-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eadad5;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(80, 38, 39, .075);
  transition: box-shadow .25s ease, transform .25s ease;
}
@media (hover: hover) {
  #guests .guest-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 36px rgba(80, 38, 39, .11);
  }
}
#guests .guest-feature-top {
  display: grid;
  grid-template-columns: 39% minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}
#guests .guest-feature-photo {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 280px;
  overflow: hidden;
  background: #efe6e2;
}
#guests .guest-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 27%;
}
#guests .guest-feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 24px 23px 25px;
}
#guests .guest-feature-body .teacher-role {
  display: inline-block;
  margin: 0 0 10px;
  color: #a05260;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
}
#guests .guest-feature-body h3 {
  margin: 0 0 17px;
  color: var(--teacher-wine);
  font: 600 clamp(20px, 2vw, 24px)/1.45 var(--serif);
  letter-spacing: .025em;
}
#guests .guest-feature-body h3 small {
  display: block;
  margin-top: 6px;
  color: #8c6b71;
  font: normal 13px/1.4 Georgia, serif;
  letter-spacing: .04em;
}
#guests .guest-feature-body > p {
  margin: 0;
  color: #554745;
  font-size: 13px;
  line-height: 1.9;
}
#guests .guest-feature-history {
  display: block;
  margin: 0;
  padding: 18px 23px 20px;
  border: 0;
  border-top: 1px solid #ecddd8;
  background: #fbf6f3;
  color: #57494a;
  font-size: 12.5px;
  line-height: 1.85;
}
#guests .guest-feature-history strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  color: var(--teacher-wine);
  font-size: 13px;
  font-weight: 700;
}
#guests .guest-feature-history strong::before {
  content: "";
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 2px;
  background: #a05260;
}
#guests .guest-feature-history span {
  display: block;
}
/* タブレット：カードは1列、写真を左・説明文を右に保持 */
@media (max-width: 900px) {
  #guests .guest-feature-grid {
    grid-template-columns: 1fr;
  }
  #guests .guest-feature-top {
    grid-template-columns: 32% minmax(0, 1fr);
  }
  #guests .guest-feature-photo {
    min-height: 255px;
  }
}
/* スマートフォン：写真を切り詰めず、上に配置してプロフィールを読みやすく */
@media (max-width: 600px) {
  #guests .guest-feature-card {
    border-radius: 14px;
  }
  #guests .guest-feature-top {
    display: flex;
    flex-direction: column;
  }
  #guests .guest-feature-photo {
    height: 250px;
    min-height: 0;
    background: linear-gradient(120deg, #f3ece8, #e6d5d2);
  }
  #guests .guest-feature-photo img {
    object-fit: contain;
    object-position: center;
  }
  #guests .guest-feature-body {
    padding: 20px 20px 22px;
  }
  #guests .guest-feature-body .teacher-role {
    margin-bottom: 8px;
  }
  #guests .guest-feature-body h3 {
    margin-bottom: 12px;
    font-size: 22px;
  }
  #guests .guest-feature-body > p {
    font-size: 13px;
  }
  #guests .guest-feature-history {
    padding: 16px 20px 18px;
  }
}

/* =========================================================
   【小田原校 odawara.html】レッスン・料金・アクセス
   .odawara-lesson-grid  レッスン内容2列
   .odawara-schedule-grid  開催日と時間の案内
   .odawara-fees-table    現金払い・事前払いの料金比較
   .odawara-fee-summary   入会金・初回参加の案内
   .odawara-feature-grid 小田原校の特徴3列
   .odawara-access-links 地図・写真付き道順のボタン
   ※質問と回答は共通の .faq-list / .faq-item を使用
   ========================================================= */
.odawara-page .section-title {
  margin-bottom: 30px;
}
.odawara-lesson-grid,
.odawara-fee-summary {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 30px;
}
.odawara-lesson-card {
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--wine);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 【小田原校 odawara.html／レッスン内容】各クラスの紹介写真：表示比率と上下余白 */
.odawara-lesson-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: center;
  margin-bottom: 20px;
}
.odawara-lesson-card h3 {
  margin: 16px 0 10px;
  font-size: 23px;
  color: var(--wine-dark);
}
.odawara-lesson-card p {
  font-size: 14px;
  color: #625654;
}
.odawara-lesson-time {
  width: 100%;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.odawara-lesson-time span {font-size: 12px; color: var(--muted);}
.odawara-lesson-time strong {font-size: 16px; color: var(--wine-dark);}

/* =========================================================
   【小田原校／オープン基礎クラスの毎月のテーマ】
   この枠の内容は odawara.html の #odawara-monthly-themes にあります。
   ■ .odawara-monthly-themes：説明と月別テーマ全体の囲み
   ■ .odawara-theme-grid：PCは2列、スマホは1列。カード同士の余白30px
   ■ .odawara-theme-card：各回のカード。記事追加時はHTMLを1枚分コピー
   ■ .odawara-theme-card--special：特別クルシージョ用の装飾
   ■ .odawara-theme-booking：通常クラスの予約受付案内
   ■ .odawara-theme-detail-link：外部ブログの詳細リンク
   色や余白を変更する必要がなければCSSは編集せず、HTMLの文章だけ更新できます。
   ========================================================= */
.odawara-monthly-themes {
  margin-top: 30px;
  padding: clamp(22px, 3.4vw, 36px);
  border: 1px solid #e5d8d2;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdfb 0%, #fcf6f2 100%);
}
.odawara-monthly-heading .en { margin-top: 0; }
.odawara-monthly-heading h3 {
  margin: 7px 0 14px;
  color: var(--wine-dark);
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.5;
}
.odawara-monthly-heading p { margin: 0; color: #625654; font-size: 14px; line-height: 1.9; }
.odawara-theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 30px;
}
.odawara-theme-card {
  min-width: 0;
  padding: 26px;
  border: 1px solid #e6d8d3;
  border-top: 4px solid #6a9a91;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.odawara-theme-card--special { border-top-color: #bc8460; background: #fffdfa; }
.odawara-theme-date {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 99px;
  background: #e9f2ef;
  color: #2b6358;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .04em;
}
.odawara-theme-card--special .odawara-theme-date { background: #faede1; color: #935830; }
.odawara-theme-card h4 {
  margin: 14px 0 12px;
  color: var(--wine-dark);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
}
.odawara-theme-card h5 {
  margin: 0 0 16px;
  color: #874b3a;
  font-size: 16px;
  line-height: 1.75;
}
.odawara-theme-description { margin: 0 0 23px; }
.odawara-theme-description p { margin: 0; color: #5c514f; font-size: 14px; line-height: 1.85; }
.odawara-theme-description p + p { margin-top: 12px; }
.odawara-theme-booking {
  width: 100%;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e7ddd8;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 15px;
}
.odawara-theme-booking strong,
.odawara-theme-special-details strong { color: var(--wine-dark); font-size: 13px; }
.odawara-theme-booking span,
.odawara-theme-special-details span { color: #483b39; font-size: 15px; font-weight: 600; }
.odawara-theme-special-details {
  width: 100%;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #e7ddd8;
}
.odawara-theme-special-details p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 15px;
}
.odawara-theme-special-details p + p { margin-top: 8px; }
.odawara-theme-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: #8a3a2e;
  font-weight: 700;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.odawara-theme-detail-link:hover,
.odawara-theme-detail-link:focus-visible { color: var(--wine); }
/* 【小田原校／毎月のテーマ／スマホ】2枚のテーマカードを1列に並べます。 */
@media (max-width: 680px) {
  .odawara-monthly-themes { padding: 22px 16px; }
  .odawara-theme-grid { grid-template-columns: minmax(0, 1fr); }
  .odawara-theme-card { padding: 22px 19px; }
}

.odawara-schedule-grid,
.odawara-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
}
.odawara-schedule-date {
  padding: 24px 18px;
  border: 1px solid var(--line);
  background: var(--cream);
  text-align: center;
}
.odawara-schedule-date span,
.odawara-schedule-date small {display: block; font-size: 13px; color: var(--muted);}
.odawara-schedule-date strong {display: block; font-size: clamp(17px,2.2vw,24px); color: var(--wine-dark); margin: 5px 0;}
.odawara-schedule-notice {margin-top: 30px;}
.odawara-fees-table-wrap {width: 100%;}
.odawara-fees-table {width: 100%; border-collapse: collapse; font-size: 15px; text-align: left;}
.odawara-fees-table caption {font-size: 0; width: 1px; height: 1px; overflow: hidden; position: absolute;}
.odawara-fees-table th,
.odawara-fees-table td {padding: 18px 20px; border-bottom: 1px solid var(--line);}
.odawara-fees-table thead th {background: var(--wine-dark); color: #fff; font-weight: 600;}
.odawara-fees-table tbody th {font-weight: 700; color: var(--wine-dark);}
.odawara-fees-table tbody th small {display: block; font-size: 12px; color: var(--muted); font-weight: 400;}
.odawara-fees-table tbody td {color: var(--wine-dark); font-weight: 700; font-size: 18px; white-space: nowrap;}
.odawara-fee-highlight {background: #fcf3f0;}
.odawara-fees-caption {margin: 14px 0 0; font-size: 13px; color: var(--muted);}
.odawara-fee-summary {margin-top: 30px;}
.odawara-fee-summary-item {padding: 22px 24px; border: 1px solid var(--line); background: #fff;}
.odawara-fee-summary-item h3 {font-size: 17px; color: var(--wine-dark); margin: 0 0 8px;}
.odawara-fee-summary-item > strong {display: block; font-size: 27px; color: var(--wine); font-family: var(--serif);}
.odawara-fee-summary-item > strong.odawara-fee-summary-word {font-size: 22px;}
/* 【小田原校／体験料金】「ブレリア体験 半額2,000円＋基礎 2,700円」を全画面幅で1行表示。
   小さな画面では金額だけ文字サイズを少し抑え、カード内に収めます。 */
.odawara-fee-summary-item > strong.odawara-trial-fee {
  font-size: clamp(15px,1.65vw,19px);
  line-height: 1.6;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .odawara-fee-summary-item:has(.odawara-trial-fee) { padding-left: 16px; padding-right: 16px; }
}
/* 【小田原校／狭いスマホ】320px幅でも体験料金を1行で読めるように調整。 */
@media (max-width: 350px) {
  .odawara-fee-summary-item > strong.odawara-trial-fee {
    font-size: 13.5px;
    letter-spacing: 0;
  }
}
.odawara-fee-summary-item p {margin: 8px 0 0; font-size: 13px; color: var(--muted);}
.odawara-fee-policy-title {margin: 30px 0 15px; font-size: 24px;}
.odawara-fees-details p {margin: 0;}
.odawara-fees-details ul + p {margin-top: 12px;}
.odawara-feature-card {padding: 26px 24px; border: 1px solid var(--line); background: #fff;}
.odawara-feature-number {display: block; color: var(--wine); font: italic 24px Georgia,serif; margin-bottom: 8px;}
.odawara-feature-card h3 {color: var(--wine-dark); font-size: 21px; margin: 0 0 12px;}
.odawara-feature-card p {color: #625654; font-size: 14px; margin: 0;}
.odawara-features-footnote {margin: 30px 0 0; text-align: center; font-size: 13px;}
.odawara-features-footnote a {color: var(--wine); text-decoration: underline; text-underline-offset: 3px;}
.odawara-access-links {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px;}
.odawara-access-links .btn {font-size: 13px; min-width: 0; padding: 11px 15px;}
.odawara-location-card img {object-position: center;}
@media (max-width: 900px) {
  .odawara-lesson-grid,
  .odawara-schedule-grid,
  .odawara-feature-grid {gap: 18px;}
  .odawara-feature-grid {grid-template-columns: repeat(2,minmax(0,1fr));}
}
@media (max-width: 680px) {
  .odawara-lesson-grid,
  .odawara-fee-summary,
  .odawara-schedule-grid,
  .odawara-feature-grid {grid-template-columns: minmax(0,1fr); gap: 18px;}
  .odawara-fees-table thead {display: none;}
  .odawara-fees-table,
  .odawara-fees-table tbody,
  .odawara-fees-table tr,
  .odawara-fees-table th,
  .odawara-fees-table td {display: block; width: 100%;}
  .odawara-fees-table tr {border: 1px solid var(--line); background: #fff; margin-bottom: 18px;}
  .odawara-fees-table tr.odawara-fee-highlight {background: #fcf3f0; border-color: #bd8384;}
  .odawara-fees-table tbody th {padding: 14px 17px; background: #fbf4f0; border-bottom: 1px solid var(--line);}
  .odawara-fees-table tbody td {padding: 10px 17px; font-size: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
  .odawara-fees-table tbody td:last-child {border-bottom: 0;}
  .odawara-fees-table tbody td::before {content: attr(data-label); font-size: 12px; color: var(--muted); font-weight: 400;}
  .odawara-lesson-card {padding: 22px 20px;}
  .odawara-access-links {flex-direction: column;}
  .odawara-access-links .btn {width: 100%; justify-content: center;}
}

/* ===== gallery.html ギャラリー・メディア・活動記録 ===== */
/* 【ギャラリー紹介文の上のタイトル】英語 GALLERY を上、日本語タイトルを下に表示。
   .gallery-intro-title：タイトル全体と紹介文の間を30pxに設定。
   その他のPHOTO GALLERY等の見出しは変更しません。 */
.gallery-intro-title { margin-bottom: 30px; }
.gallery-intro-title .en { margin-top: 0; margin-bottom: 7px; }
/* 【画面幅360px以下】日本語タイトルの最後の1文字だけが改行されないよう調整。 */
@media (max-width: 360px) {
  .gallery-intro-title h2 { font-size: 23px; letter-spacing: .07em; }
}
.gallery-intro-section { background: #fff; padding: 46px 0 38px; }
.gallery-intro-lead { text-align: center; font: 500 clamp(17px,2.2vw,22px)/2 var(--serif); color: var(--wine-dark); letter-spacing: .07em; margin: 0 auto 26px; max-width: 850px; }
.gallery-anchor-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.gallery-anchor-nav a { display:inline-flex; align-items:center; justify-content:center; border: 1px solid #d5b9b4; border-radius: 99px; background:#fff8f6; padding: 9px 18px; color:var(--wine-dark); font-size:12px; font-weight:700; line-height:1.6; }
.gallery-anchor-nav a:hover { color:white; background:var(--wine); }
.gallery-photo-section .mari-photo-grid { gap: 24px; }
.gallery-photo-section .mari-photo-card { border-radius: 12px; }
.gallery-photo-section .mari-photo-cover { aspect-ratio: 4/3; }
.gallery-photo-section .mari-photo-description { padding: 16px 17px 20px; }
.gallery-photo-section .mari-photo-description h3 { margin-bottom:5px; font-size:16px; }

.gallery-media-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.gallery-media-card { display:grid; grid-template-columns: 42% minmax(0,1fr); min-height:240px; background:#fff; border:1px solid #e8d8d0; border-radius:12px; overflow:hidden; box-shadow:0 12px 25px rgba(69,30,24,.07); }
.gallery-media-photo { overflow:hidden; min-height:100%; background: #f1e9e6; }
.gallery-media-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-media-body { padding: 25px 22px 22px; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.gallery-media-date { color:var(--wine); font-size:11px; letter-spacing:.12em; font-weight:800; border-bottom:1px solid #cda2a3; padding-bottom:7px; margin-bottom:14px; }
.gallery-media-body h3 { font:600 20px/1.55 var(--serif); color:var(--wine-dark); margin:0 0 11px; }
.gallery-media-body p { font-size:12px; line-height:1.8; color:#685855; margin:0 0 14px; }
.gallery-media-readmore { margin-top:auto; padding-bottom:2px; color:var(--wine); font-weight:700; font-size:12px; border-bottom:1px solid currentColor; }
.gallery-media-readmore:hover { opacity:.7; }
.gallery-media-other { margin:36px auto 0; max-width:980px; border-top:1px solid #dec8c2; padding:22px 8px 0; }
.gallery-media-other-heading { color:var(--wine-dark); font:600 18px/1.5 var(--serif); margin:0 0 14px; }
.gallery-media-other ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; }
.gallery-media-other li { font-size:12px; line-height:1.75; border-bottom:1px solid #ebded8; padding:7px 0; }
.gallery-media-other li span { display:inline-block; font:700 12px Georgia,serif; color:var(--wine); padding-right:12px; }

@media (max-width:1050px) {
  .gallery-media-grid { gap:18px; }
  .gallery-media-card { grid-template-columns:38% minmax(0,1fr); min-height:230px; }
  .gallery-media-body { padding:19px 16px; }
  .gallery-media-body h3 { font-size:17px; }
}
@media (max-width:760px) {
  .gallery-media-grid { grid-template-columns:1fr; }
  .gallery-media-card { grid-template-columns:42% minmax(0,1fr); min-height:196px; }
  .gallery-media-other ul { grid-template-columns:1fr; }

}
@media (max-width:640px) {
  .gallery-intro-section { padding:29px 0 30px; }
  .gallery-intro-lead br { display:none; }
  .gallery-intro-lead { font-size:16px; text-align:left; }
  .gallery-anchor-nav { gap:8px; }
  .gallery-anchor-nav a { flex:1 1 40%; font-size:11px; padding:8px; }
  .gallery-photo-section .mari-photo-grid { gap:12px; }
  .gallery-photo-section .mari-photo-card { border-radius:8px; }
  .gallery-photo-section .mari-photo-description { padding:10px; }
  .gallery-photo-section .mari-photo-description h3 { font-size:12px; }

  .gallery-media-card { grid-template-columns:36% minmax(0,1fr); min-height:200px; }
  .gallery-media-body { padding:14px 13px; }
  .gallery-media-body h3 { font-size:16px; line-height:1.45; }
  .gallery-media-body p { font-size:11px; line-height:1.7; }
  .gallery-media-date { font-size:10px; margin-bottom:9px; }

}
@media (max-width:390px) {
  .gallery-media-card { grid-template-columns:1fr; }
  .gallery-media-photo { height:185px; min-height:0; }
  .gallery-media-body { padding:18px; }
}

/* ===== gallery.html：PHOTO GALLERY（PC 5列）と雑誌・取材履歴 ===== */
.gallery-photo-section .mari-photo-grid.mari-photo-grid-compact { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.gallery-photo-section .mari-photo-grid-compact .mari-photo-card { border-radius: 9px; box-shadow: 0 6px 18px rgba(69,30,24,.075); }

.gallery-photo-section .mari-photo-grid-compact .mari-photo-description { padding: 9px 10px 11px; }
.gallery-photo-section .mari-photo-grid-compact .mari-photo-tag { font-size: 10px; line-height: 1.4; margin-bottom: 4px; }
.gallery-photo-section .mari-photo-grid-compact .mari-photo-description h3 { font: 600 12px/1.55 var(--sans); margin: 0; min-height: 2.9em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gallery-photo-section .mari-photo-grid-compact .mari-photo-zoom { right: 7px; bottom: 7px; border-radius: 50%; font-size: 15px; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; background: rgba(60,11,22,.78); }
.gallery-media-other li { display: block; }
.gallery-media-other li > strong { display:block; font-size: 14px; color:var(--wine-dark); font-weight:700; margin:3px 0 1px; }
.gallery-media-other li > p { font-size: 12px; line-height:1.8; color:var(--muted); margin:0 0 7px; }
.gallery-media-other li > span { display:block; font-family: var(--sans); }
/* 【gallery.html】雑誌掲載と活動記録の間隔は合計30px（15px + 15px） */
.gallery-magazine-section { padding-top: 54px; padding-bottom: 15px; background:#fff; }
.gallery-history-section { padding-top: 15px; }
.gallery-magazine-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.gallery-magazine-card { display:flex; flex-direction:column; min-width:0; border:1px solid #e8d8d0; border-radius: 12px; overflow:hidden; background:#fff; box-shadow: 0 9px 22px rgba(69,30,24,.06); }
.gallery-magazine-cover { display:flex; justify-content:center; align-items:center; min-height:185px; padding:20px 24px; background:linear-gradient(140deg,#f8f1eb,#eee2dc); }
.gallery-magazine-cover img { display:block; height:164px; max-height:164px; width:auto; max-width:95%; object-fit:contain; box-shadow:0 8px 16px rgba(49,24,29,.19); }
.gallery-magazine-copy { display:flex; flex-direction:column; align-items:flex-start; flex:1; padding:17px 19px 21px; }
.gallery-magazine-copy h3 { font:600 19px/1.5 var(--serif); color:var(--wine-dark); margin:0 0 5px; }
.gallery-magazine-date { font-size:13px; font-weight:700; color:var(--wine); margin:0 0 8px; }
.gallery-magazine-description { font-size:12px; line-height:1.8; color:var(--muted); margin:0 0 12px; }
@media (max-width:950px) {
  .gallery-photo-section .mari-photo-grid.mari-photo-grid-compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .gallery-photo-section .mari-photo-grid.mari-photo-grid-compact { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .gallery-magazine-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:640px) {
  .gallery-photo-section .mari-photo-grid.mari-photo-grid-compact { grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; }
  .gallery-photo-section .mari-photo-grid-compact .mari-photo-description { padding:8px 9px 10px; }
  .gallery-photo-section .mari-photo-grid-compact .mari-photo-description h3 { font-size:11px; }
  .gallery-magazine-cover { min-height:152px; padding:14px; }
  .gallery-magazine-cover img { height:128px; max-height:128px; }
  .gallery-magazine-copy { padding:12px; }
  .gallery-magazine-copy h3 { font-size:16px; }
  .gallery-magazine-date { font-size:11px; }
  .gallery-magazine-description { font-size:11px; }
}
@media (max-width:390px) {
  .gallery-magazine-grid { grid-template-columns: 1fr 1fr; gap:10px; }
  .gallery-magazine-cover { padding:10px; }
  .gallery-magazine-copy { padding:10px; }
}

/* ===== ギャラリー：メディア写真をライトボックスで拡大 ===== */
.gallery-media-photo { position: relative; }
.gallery-media-zoom {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-media-zoom img { transition: transform .3s ease, filter .3s ease; }
.gallery-media-zoom:hover img { transform: scale(1.035); filter: brightness(.9); }
.gallery-media-zoom:focus-visible { outline: 3px solid #c86b64; outline-offset: -3px; z-index: 2; }
.gallery-media-zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(60,11,22,.85);
  color: #fff;
  border-radius: 4px;
  line-height: 1.6;
  font-size: 13px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-media-zoom img { transition: none; }
  .gallery-media-zoom:hover img { transform: none; }
}

/* =========================================================
   【大阪本校 osaka.html／OUR SCHOOL】
   クラス案内直前の写真付き4カード
   画像・説明文：osaka.html の #osaka-our-school
   ========================================================= */
.osaka-our-school {
  border-top: 1px solid #f0e4df;
  border-bottom: 1px solid #f0e4df;
}
.osaka-our-school .section-title { margin-bottom: 34px; }
.osaka-our-school-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
  align-items: stretch;
}
.osaka-our-school-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #edddd8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(69,30,24,.09);
}
.osaka-our-school-photo { margin: 0; background: #f5ebe6; }
.osaka-our-school-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.osaka-our-school-card--motto .osaka-our-school-photo img {
  object-position: 50% 75%;
}
.osaka-our-school-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 24px;
}
.osaka-our-school-card-body .eyebrow {
  color: #aa7c7a;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .2em;
}
.osaka-our-school-card h3 {
  min-height: 3.1em; /* 2行分の高さで本文の開始位置を揃える */
  margin: 7px 0 8px;
  color: var(--wine-dark);
  font-size: clamp(17px, 1.45vw, 20px);
  letter-spacing: .025em;
  line-height: 1.55;
}
.osaka-our-school-card p {
  flex: 1;
  margin: 0;
  color: #625550;
  font-size: 13px;
  line-height: 1.9;
}
@media (max-width: 1024px) {
  .osaka-our-school-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .osaka-our-school-card-body { padding: 22px 22px 26px; }
  .osaka-our-school-card h3 { font-size: 20px; min-height: 3.1em; }
}
@media (max-width: 650px) {
  .osaka-our-school-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 520px;
    margin-inline: auto;
  }
  .osaka-our-school-card-body { padding: 20px 20px 25px; }
  .osaka-our-school-card h3 { min-height: 0; }
}
@media (max-width: 390px) {
  .osaka-our-school-card h3 { font-size: 19px; }
}

/* OUR SCHOOL：英語ラベルを日本語見出しの上へ配置 */
.osaka-our-school .section-title > .en { margin: 0 0 10px; }

/* ============================================================
   【ギャラリー gallery.html／過去の公演案内カード】
   以前の公演・イベントのポスターを左、公演情報を右に配置するカード。
   gallery.html の .gallery-archive-card が共通スタイルを使用します。
   公演案内と写真アルバムは年代別にまとめて掲載しています。
   ============================================================ */
.events-list { display: grid; gap: 30px; max-width: 1100px; margin: 0 auto; }
.events-list-card {
  display: grid;
  grid-template-columns: minmax(0,320px) minmax(0,1fr);
  align-items: stretch;
  border: 1px solid #ead8d1;
  border-radius: 15px;
  background: white;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(69,30,24,.07);
  min-width: 0;
}
.events-list-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  border: 0;
  background: #2b0a11;
  cursor: zoom-in;
}
.events-list-image img {
  display: block;
  width: 100%;
  max-height: 490px;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 23px rgba(0,0,0,.2);
  transition: transform .3s ease;
}
.events-list-image:hover img { transform: scale(1.02); }
.events-poster-zoom { position: absolute; bottom: 12px; right: 12px; color: white; background: rgba(25,5,9,.85); border: 1px solid #ffffff70; border-radius: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; }
.events-list-body { display: flex; flex-direction: column; align-items: flex-start; padding: 27px 32px 30px; min-width: 0; }
.events-list-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.events-list-status { font-size: 11px; font-weight: 700; color: #755052; border: 1px solid #ead7d1; border-radius: 99px; padding: 1px 11px; background: #fff7f4; }
.events-list-meta time { font-family: var(--serif); color: var(--wine-dark); font-weight: 700; font-size: 16px; }
.events-list-body h3 { color: var(--wine-dark); font-size: clamp(22px,2.5vw,29px); line-height: 1.55; margin: 0 0 9px; letter-spacing: .04em; }
.events-list-place { color: var(--wine-dark); font-weight: 700; margin-bottom: 3px; }
.events-time { color: #665250; font-size: 13px; margin: 0 0 8px; }
.events-list-intro { margin: 9px 0 12px; font-size: 14px; line-height: 1.8; }
.events-cast { display: grid; gap: 6px; margin: 5px 0 10px; width: 100%; font-size: 13px; line-height: 1.7; }
.events-fact { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px; border-top: 1px solid #f1e6e2; padding-top: 6px; }
.events-fact dt { color: var(--wine-dark); font-weight: 700; }
.events-fact dd { margin: 0; }
.events-related-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 11px; }
.events-link { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid #b97b7d; border-radius: 5px; color: var(--wine-dark); background: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; transition: background .2s,color .2s; }
.events-link:hover { color: #fff; background: var(--wine); }
.gallery-events-link { text-align: center; margin: 18px 0 25px; }
.gallery-events-link a { display: inline-block; color: var(--wine-dark); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.gallery-events-link a:hover { color: var(--wine); }
@media (max-width: 820px) {
  .events-list-card { grid-template-columns: minmax(0,240px) minmax(0,1fr); }
  .events-list-body { padding: 22px 23px 24px; }
  .events-list-image { padding: 12px; }
  .events-fact { grid-template-columns: 95px minmax(0,1fr); }
}
@media (max-width: 680px) {
  .events-list { gap: 30px; }
  .events-list-card { grid-template-columns: minmax(0,1fr); border-radius: 12px; }
  .events-list-image { height: auto; min-height: 0; padding: 18px; }
  .events-list-image img { width: auto; height: auto; max-width: min(100%,290px); max-height: 360px; }
  .events-list-body { padding: 22px 20px 24px; }
  .events-list-body h3 { font-size: 23px; }
  .events-list-meta time { font-size: 15px; }
  .events-cast { font-size: 12px; }
  .events-fact { grid-template-columns: 94px minmax(0,1fr); gap: 5px; }
  .events-link { padding: 10px 12px; }
}

/* 【ギャラリー内】2019年ヘレス公演と現地取材記事の相互リンク */
#media-la-voz-del-sur-2019 { scroll-margin-top: 112px; }
#media-la-voz-del-sur-2019:target {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(133,7,28,.12), 0 12px 25px rgba(69,30,24,.07);
}
.events-link-internal {
  background: #fff7f3;
  border-color: #b47773;
}

/* 【大阪本校 osaka.html／「大阪本校の魅力」】
   3枚の新しい長めの見出しがタブレット幅で不自然に改行されないよう調整します。
   PC・スマホ・他ページの見出しには影響しません。 */
@media (min-width: 681px) and (max-width: 930px) {
  .osaka-benefit-cards .content-card h3 {
    font-size: 19px;
  }
}

/* =====================================================================
   【大阪入門クラス osaka-beginner.html】写真・料金・キャンペーン
   他ページと共通の見た目は変更せず、入門クラスだけの指定をまとめています。
   ===================================================================== */

/* 【おすすめカード】身体づくり・舞台の写真で顔が切れない表示位置にする */
.beginner-benefit-cards .content-card:nth-child(2) img {
  object-position: center 35%;
}
.beginner-benefit-cards .content-card:nth-child(3) img {
  object-position: center 23%;
}

/* 【入門クラス写真】スタジオ内の人物の頭や腕を見切らせないための表示位置 */
.beginner-welcome-image {
  object-position: center 45%;
}
.beginner-lesson-image {
  object-position: center 22%;
}

/* 【入会金の全額免除案内】直上の入会金表示と書体を揃えます。
   注意書きなので、金額より少し小さい文字サイズにします。 */
.beginner-enrollment-special {
  margin: 10px 0 0;
  color: var(--wine-dark);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  text-align: left;
}

/* 【2027年春のキャンペーン】期限と金額はHTML内の案内文を更新してください */
.beginner-spring-campaign {
  border-left-color: var(--wine);
  background: #fff7f2;
}
.beginner-spring-campaign strong {
  display: block;
  margin-bottom: 4px;
  color: var(--wine-dark);
  font-size: 16px;
}
.beginner-spring-campaign p {
  margin: 0;
  font-size: 14px;
}

/* ============================================================================
   【下層7ページのカラー設定：ここで変更できます】
   対象：入門クラス／大阪本校／小田原校／講師紹介／ギャラリー／オンライン／お問い合わせ
   トップページ（index.html）は従来のワインレッドのままです。
   25周年記念公演（events.html）はトップ画像がないため変更しません。

   ◆ 各ページの色は、「ボタン」「ヒーロー画像下の線」「英字タイトル」と
      「ヘッダー下の線」に使います。人物の照明はページ別の専用画像で変更しています。
      写真上で文字を読みやすくする暗いグラデーションは共通設定です。
   --page-rule-dark    ：画像下の線（左側の濃い色）
   --page-rule-main    ：画像下の線（中央のメイン色）
   --page-rule-light   ：画像下の線（右側の明るい色）
   --page-en-color     ：写真上部の英字タイトル（暗い写真上で見やすい同系色）
   --page-cta-color    ：体験レッスンのボタン（ヘッダーとヒーロー内）
   --page-cta-hover    ：体験レッスンのボタンにマウスを重ねたとき
   --page-cta-border   ：体験レッスンのボタンの枠線
   --event-cta-color   ：25周年記念発表会のボタン
   --event-cta-border  ：25周年記念発表会のボタンの枠線

   ※ 写真・文章・ページの配置や機能は変更しません。
   ※ 黄色のボタンだけは、読みやすいよう濃い茶色の文字を使います。
   ============================================================================ */

/* 【大阪・入門クラス】ターコイズブルー：明るく爽やかな青緑 */
body.page-beginner {
  --page-rule-dark: #064553;
  --page-rule-main: #087E90;
  --page-rule-light: #A0E7E5;
  --page-en-color: #4CD2D7;
  --page-cta-color: #087E90;
  --page-cta-hover: #096B7A;
  --page-cta-border: #ABEAE9;
  --event-cta-color: #075365;
  --event-cta-border: #85D3D4;
}

/* 【大阪本校】フォレストグリーン：落ち着きのある緑 */
body.page-osaka {
  --page-rule-dark: #19482D;
  --page-rule-main: #307247;
  --page-rule-light: #C0E2A9;
  --page-en-color: #90D6A1;
  --page-cta-color: #307247;
  --page-cta-hover: #245B37;
  --page-cta-border: #CEE9B9;
  --event-cta-color: #214F32;
  --event-cta-border: #A4D2A0;
}

/* 【小田原校】ロイヤルブルー：深い青 */
body.page-odawara {
  --page-rule-dark: #263A7B;
  --page-rule-main: #3552A1;
  --page-rule-light: #ADC9F9;
  --page-en-color: #9CB9F2;
  --page-cta-color: #3552A1;
  --page-cta-hover: #263E86;
  --page-cta-border: #BFD4FF;
  --event-cta-color: #273C7B;
  --event-cta-border: #9FB6EB;
}

/* 【主宰・講師紹介】アメジストパープル：華やかな紫 */
body.page-instructors {
  --page-rule-dark: #4F3280;
  --page-rule-main: #7650AA;
  --page-rule-light: #DCC1F5;
  --page-en-color: #C7A6F3;
  --page-cta-color: #7650AA;
  --page-cta-hover: #5B3A88;
  --page-cta-border: #DDC4FA;
  --event-cta-color: #52317F;
  --event-cta-border: #C4A5E7;
}

/* 【ギャラリー・活動記録】サンフラワーイエロー：黄色の線とボタン。
   写真には黄色を重ねず、黄色ボタンの文字は濃い茶色にします。 */
body.page-gallery {
  --page-rule-dark: #BD9118;
  --page-rule-main: #F2CD2F;
  --page-rule-light: #FFF6B5;
  --page-en-color: #F2CD2F;
  --page-cta-color: #F8D23E;
  --page-cta-hover: #FFE277;
  --page-cta-border: #FFF1A4;
  --event-cta-color: #DEB42B;
  --event-cta-border: #FFF0A0;
}

/* 【オンラインレッスン・アーカイブ一覧】ローズピンク：明るいピンク色。
   写真にはピンクのライティング版を使い、ボタンと画像下のラインもピンク系です。
   ボタンは文字が読みやすいよう、濃いピンクを使用します。 */
body.page-archive {
  --page-rule-dark: #9C1E5C;
  --page-rule-main: #EF6AAE;
  --page-rule-light: #FFD5E8;
  --page-en-color: #EF6AAE;
  --page-cta-color: #C02A75;
  --page-cta-hover: #A51C60;
  --page-cta-border: #F9C7DD;
  --event-cta-color: #982457;
  --event-cta-border: #F5B8D4;
}

/* 【お問い合わせ】ビビッドオレンジ：赤茶色ではない、はっきりとしたオレンジ。
   写真にはオレンジのライティング版を使い、ボタンと画像下のラインもオレンジ系です。
   ボタンは白い文字が読みやすい濃いオレンジを使用します。 */
body.page-contact {
  --page-rule-dark: #B94A0C;
  --page-rule-main: #F58220;
  --page-rule-light: #FAD8A9;
  --page-en-color: #F58220;
  --page-cta-color: #C04A08;
  --page-cta-hover: #A63B04;
  --page-cta-border: #FFD5A8;
  --event-cta-color: #A63B04;
  --event-cta-border: #FED0A3;
}

/* 【ヘッダー下の細いライン用の既定色】
   トップページはブランドカラー、25周年記念公演ページは専用の金色系を使用します。
   下層7ページはこの後ろで定義している --page-rule-* をそのまま使います。 */
body {
  --header-rule-dark: #5E0818;
  --header-rule-main: #85071C;
  --header-rule-light: #C98D97;
}
body.page-events {
  --header-rule-dark: #7A5B24;
  --header-rule-main: #B88B42;
  --header-rule-light: #E8D09F;
}
body[class*="page-"]:not(.page-events) {
  --header-rule-dark: var(--page-rule-dark);
  --header-rule-main: var(--page-rule-main);
  --header-rule-light: var(--page-rule-light);
}

/* ========================================================================
   【7ページのヒーロー写真：人物への照明を変更した専用画像】
   各ページの顔・衣装・舞台の写真に、それぞれ異なる舞台照明を付けた写真を設定します。
   画像は assets/images フォルダー内に保存しています。

   ※ この設定はPC・タブレット・スマートフォン共通です。
   ※ トップページと25周年記念公演ページは従来の画像のままです。
   ※ 写真を変更したいときは url(...) 内のファイル名を変更してください。
   ======================================================================== */
body.page-beginner {
  --page-hero-image: url("../images/hero-osaka-beginner-teal-light.webp");
}
body.page-osaka {
  --page-hero-image: url("../images/hero-osaka-main-warm-light.webp");
}
body.page-odawara {
  --page-hero-image: url("../images/hero-odawara-blue-light.webp");
}
body.page-instructors {
  --page-hero-image: url("../images/hero-instructors-purple-light.webp");
}
body.page-gallery {
  --page-hero-image: url("../images/hero-gallery-golden-light.webp");
}
body.page-archive {
  --page-hero-image: url("../images/hero-online-archive-pink-light.webp");
}
body.page-contact {
  --page-hero-image: url("../images/hero-contact-orange-light.webp");
}

/* 【PC表示で人物の顔・髪飾りが見切れないようにする】
   新しい7枚の写真は元画像より縦長のため、PCで画像の上側が
   切り取られすぎないように表示位置だけを少し上へ調整します。
   スマホ・タブレットは前回設定した写真の短い表示高さを維持します。 */
@media (min-width: 931px) {
  body[class*="page-"]:not(.page-events) .page-hero {
    background-position: right 8%;
  }
}

/* ========================================================================
   【7ページの英字タイトル】写真上の「CONTACT / TRIAL LESSON」など
   各ページのメインカラーと同じ色系統で表示します。
   濃い青・緑・紫のページは、写真上でも読めるよう明るめの同系色を使用。
   変更したいときは上の各ページにある --page-en-color の色を変更してください。
   ※ 日本語タイトル・写真・ほかのセクション見出しは変更しません。
   ======================================================================== */
body[class*="page-"] .page-hero .en {
  color: var(--page-en-color, #f0c3ba);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ========================================================================
   【ヒーロー写真の下に入る4pxのライン】
   トップページの赤いラインと同じ太さに、各ページの3段階の色を設定します。
   ・トップページは元の赤いラインのままです。
   ・25周年記念公演ページには追加しません（専用レイアウトを維持）。
   ======================================================================== */
body[class*="page-"] .page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--page-rule-dark),
    var(--page-rule-main),
    var(--page-rule-light));
}

/* ========================================================================
   【ページ上部のボタン】2種類のボタンをページごとの色系統にします。
   ・「体験レッスンを申し込む」：メイン色、白文字
   ・「25周年記念発表会を見る」：同系統の濃い色（詳細設定は下の共通CSS）
   ・ヘッダー右側の「体験レッスン申込」も同じメイン色に統一します。
   ======================================================================== */
body[class*="page-"] .page-hero .hero-cta,
body[class*="page-"]:not(.page-events) .site-header .header-cta {
  background: var(--page-cta-color);
  border-color: var(--page-cta-border);
  color: #FFFFFF;
}
body[class*="page-"] .page-hero .hero-cta:hover,
body[class*="page-"] .page-hero .hero-cta:focus-visible,
body[class*="page-"]:not(.page-events) .site-header .header-cta:hover,
body[class*="page-"]:not(.page-events) .site-header .header-cta:focus-visible {
  background: var(--page-cta-hover);
  border-color: var(--page-cta-border);
  color: #FFFFFF;
}

/* 【ギャラリーページの黄色ボタン】
   黄色地に白文字は読みにくいため、申込・25周年記念ボタンは濃い茶文字にします。
   他ページのボタンの文字色は変えません。 */
body.page-gallery .page-hero .hero-cta,
body.page-gallery:not(.page-events) .site-header .header-cta,
body.page-gallery .page-hero .hero-cta:hover,
body.page-gallery .page-hero .hero-cta:focus-visible,
body.page-gallery:not(.page-events) .site-header .header-cta:hover,
body.page-gallery:not(.page-events) .site-header .header-cta:focus-visible,
body.page-gallery .page-hero .hero-event-cta,
body.page-gallery .page-hero .hero-event-cta:hover,
body.page-gallery .page-hero .hero-event-cta:focus-visible {
  color: #30260B;
}

/* ========================================================================
   【下層7ページのhero：写真とタイトルの基本動作】
   写真にはページ別のライティング画像を使用します。
   英字・日本語タイトルの読みやすさを保つため、共通の暗いグラデーションを重ねます。
   PCでは写真と文字を重ね、タブレット・スマホでは下の追加設定によって
   短い写真の下にタイトル・説明文・ボタンを表示します。
   画像下の4pxカラーラインとヘッダー下の3pxラインは維持しています。
   ======================================================================== */

/* 【下層ページのメニュー】現在位置を示す下線は、トップページと同じ既定色。
   下線の形・位置は従来どおり維持し、ページ別のテーマ色を使いません。 */

/* 【ヘッダー直下の細いライン】
   スマホ・タブレットでもページが切り替わったことが分かりやすいよう、
   ヘッダーのすぐ下に各ページカラーの細いラインを追加します。 */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--header-rule-dark, #5E0818),
    var(--header-rule-main, #85071C),
    var(--header-rule-light, #C98D97));
}

body[class*="page-"] .site-header .nav-link[aria-current="page"]::after {
  height: 3px;
  bottom: -5px;
  border-radius: 3px;
}

/* 【下層ページ／スマホ・タブレットメニュー】開いたメニューでは短い下線 */
@media (max-width: 1320px) {
  body[class*="page-"] .site-header .nav-link[aria-current="page"]::after {
    left: 4px;
    right: auto;
    bottom: 5px;
    width: 76px;
    height: 3px;
  }
}

@media (min-width: 681px) and (max-width: 930px) {
  /* 【下層7ページ／タブレット】
     写真の高さを短くして、下半分にページタイトルが見える構成にします。
     25周年記念公演ページは専用レイアウトのため除外します。 */
  body[class*="page-"]:not(.page-events) .page-hero {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    background: #180609;
    overflow: hidden;
  }
  body[class*="page-"]:not(.page-events) .page-hero::before {
    background:
      linear-gradient(to bottom,
        rgba(20, 7, 9, .10) 0%,
        rgba(18, 5, 9, .22) 52%,
        rgba(18, 5, 9, .70) 100%),
      var(--page-hero-image, url("../images/hero-mari-stage.webp")) center 26% / cover no-repeat;
    inset: 0 0 auto 0;
    height: 220px;
  }
  body[class*="page-"]:not(.page-events) .page-hero-inner {
    margin-top: 0;
    padding: 240px 0 28px;
    max-width: none;
  }
  body[class*="page-"]:not(.page-events) .page-hero h1 {
    font-size: clamp(28px, 4.6vw, 36px);
    line-height: 1.35;
    letter-spacing: .06em;
  }
  body[class*="page-"]:not(.page-events) .page-hero p {
    font-size: 15px;
    line-height: 1.8;
    margin-top: 12px;
  }
}

@media (max-width: 680px) {
  /* 【下層7ページ／スマホ】
     写真を短く見せ、英字タイトルと日本語タイトルがすぐ見えるようにします。 */
  body[class*="page-"]:not(.page-events) .page-hero {
    position: relative;
    display: block;
    min-height: 0;
    height: auto;
    background: #180609;
    overflow: hidden;
  }
  body[class*="page-"]:not(.page-events) .page-hero::before {
    background:
      linear-gradient(to bottom,
        rgba(20, 7, 9, .08) 0%,
        rgba(18, 5, 9, .20) 52%,
        rgba(18, 5, 9, .76) 100%),
      var(--page-hero-image, url("../images/hero-mari-stage.webp")) center 24% / cover no-repeat;
    inset: 0 0 auto 0;
    height: 184px;
  }
  body[class*="page-"]:not(.page-events) .page-hero-inner {
    margin-top: 0;
    padding: 198px 0 32px;
    max-width: none;
  }
  body[class*="page-"]:not(.page-events) .page-hero .en {
    margin-bottom: 8px;
    font-size: 13px;
  }
  body[class*="page-"]:not(.page-events) .page-hero h1 {
    font-size: clamp(25px, 7.4vw, 30px);
    line-height: 1.34;
    letter-spacing: .05em;
  }
  body[class*="page-"]:not(.page-events) .page-hero p {
    font-size: 14px;
    line-height: 1.8;
    margin-top: 12px;
    max-width: none;
  }
}

@media (max-width: 360px) {
  body[class*="page-"]:not(.page-events) .page-hero::before {
    height: 176px;
    background-position: center 22%;
  }
  body[class*="page-"]:not(.page-events) .page-hero-inner {
    padding-top: 190px;
  }
}

/* ========================================================================
   【gallery.html】年代別公演一覧にある開閉式フォトアルバム
   公演ごとに写真をまとめ、開催日の新しい順に配置。詳細は各detailsに記載。
   ・公演名の帯をクリックすると、写真一覧の開閉ができます。
   ・PCは横5列、スマホは横2列。既存の写真カードとライトボックスを再利用。
   ・写真ブロック間の余白は30px（将来複数の公演を並べる場合も同様）。
   ======================================================================== */
.performance-album-section {
  padding-top: 40px;
  padding-bottom: 46px;
  background: #fff;
}
.performance-album-section .section-title { margin-bottom: 25px; }
.performance-album {
  overflow: hidden;
  border: 1px solid #e7d7d2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 9px 22px rgba(69,30,24,.06);
  scroll-margin-top: 105px;
}
.performance-album-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  background: #fff8f6;
}
.performance-album-summary::-webkit-details-marker { display: none; }
.performance-album-summary:hover { background: #fff1ec; }
.performance-album-summary:focus-visible { outline: 3px solid #b04e58; outline-offset: -3px; }
.performance-album[open] > .performance-album-summary { border-bottom: 1px solid #ead9d2; }
/* 【2017年 舞踊団公演「絆」】縦写真2枚は顔や衣装を切らず全体を表示します。
   横写真のカードと同じ縦横比を保ちつつ、背景色で余白をなじませます。 */
.gallery-photo-section .mari-photo-cover.performance-photo-portrait img {
  object-fit: contain;
  background: #261316;
}
/* 【2018年フラメンコの起源】縦写真2枚は上下を切り落とさず、人物全体を見せる。 */
.gallery-photo-section .mari-photo-cover.genesis-photo-portrait img {
  object-fit: contain;
  background: #261316;
}

/* 【ギャラリー／2007年志摩スペイン村・本選】
   写真カードの形（4:3）は揃えたまま、横長写真の端が切れないよう全体を表示します。
   拡大時は従来どおり元の縦横比で表示されます。 */
.gallery-photo-section .mari-photo-cover.performance-photo-full img {
  object-fit: contain;
  background: #261316;
}

.performance-album-thumbnail { flex: 0 0 110px; width: 110px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px; }
.performance-album-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.performance-album-eyebrow { color: #925e57; font: 700 11px/1.5 var(--sans); letter-spacing: .13em; }
.performance-album-heading strong { color: var(--wine-dark); font: 600 clamp(18px,2vw,24px)/1.5 var(--serif); }
.performance-album-meta { font: 500 12px/1.6 var(--sans); color: #73615e; }
.performance-album-toggle { flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #d9beba; border-radius: 50%; display: grid; place-items: center; color: var(--wine); }
.performance-album-toggle::before { content: '+'; font: 500 21px/1 var(--sans); }
.performance-album[open] .performance-album-toggle::before { content: '−'; }
.performance-album-content { padding: 24px 22px 25px; }
.performance-album-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 25px; margin-top: 21px; }
.performance-album-links a { color: var(--wine); text-decoration: underline; text-underline-offset: 4px; font-size: 13px; font-weight: 700; }
.performance-album-links a:hover { color: var(--wine-dark); }
@media (max-width: 640px) {
  .performance-album-section { padding-top: 30px; padding-bottom: 35px; }
  .performance-album-summary { padding: 12px; gap: 11px; }
  .performance-album-thumbnail { flex-basis: 82px; width: 82px; }
  .performance-album-heading strong { font-size: 16px; }
  .performance-album-eyebrow { font-size: 9px; letter-spacing: .06em; }
  .performance-album-meta { font-size: 11px; }
  .performance-album-toggle { flex-basis: 28px; width: 28px; height: 28px; }
  .performance-album-content { padding: 14px 11px 18px; }
  .performance-album-links { gap: 12px 18px; margin-top: 17px; }
}
@media (max-width: 360px) {
  .performance-album-summary { gap: 8px; }
  .performance-album-thumbnail { flex-basis: 66px; width: 66px; }
  .performance-album-heading strong { font-size: 15px; }
  .performance-album-toggle { flex-basis: 26px; width: 26px; height: 26px; }
}

/* =====================================================================
   【ギャラリー：過去の公演・イベント・フォト（gallery.html）】
   過去の公演ポスターを左、開催情報・リンクを右に表示します。
   開催予定の公演（events.html）には影響しない専用スタイルです。
   各カードの間隔は30pxです。
   ===================================================================== */
.gallery-past-events-section {
  padding-top: 30px;
  padding-bottom: 30px;
  background: #fffaf8;
  scroll-margin-top: 100px;
}
.gallery-past-events-section .section-title { margin-bottom: 26px; }
.gallery-archive-list { max-width: 1080px; gap: 30px; }
.gallery-archive-card {
  grid-template-columns: minmax(0, 208px) minmax(0, 1fr);
  box-shadow: 0 6px 22px rgba(69,30,24,.055);
  scroll-margin-top: 106px;
}
.gallery-archive-card .events-list-image {
  padding: 12px;
  background: #31171c;
  min-height: 260px;
  height: 100%;
}
.gallery-archive-card .events-list-image img {
  max-height: 310px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.gallery-archive-card .events-list-body { padding: 20px 26px 22px; }
.gallery-archive-card .events-list-body h3 {
  font-size: clamp(18px,2vw,23px);
  line-height: 1.5;
  margin-bottom: 8px;
}
.gallery-archive-card .events-list-intro {
  margin: 6px 0 9px;
  font-size: 13px;
  line-height: 1.75;
}
.gallery-archive-card .events-list-meta { margin-bottom: 8px; }
.gallery-archive-card .events-list-meta time { font-size: 14px; }
.gallery-archive-card .events-list-place { font-size: 13px; }
.gallery-archive-card .events-related-links { margin-top: 5px; padding-top: 8px; }
.gallery-archive-card .events-link { font-size: 12px; padding: 8px 12px; }
/* 出演者はボタン操作で開く。詳細を閉じてもブログと動画はすぐに見つかります。 */
.gallery-archive-performers { width: 100%; margin-top: 7px; }
.gallery-archive-performers summary {
  display: inline-block;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: var(--wine-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 5px 0;
}
.gallery-archive-performers summary:hover { color: var(--wine); }
.gallery-archive-performers summary::after { content: ' ＋'; }
.gallery-archive-performers[open] summary::after { content: ' −'; }
.gallery-archive-card:target { border-color: var(--wine); box-shadow: 0 0 0 3px rgba(133,7,28,.1); }
.gallery-archive-performers summary:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
.gallery-archive-performers .events-cast {
  margin: 7px 0 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff8f5;
}
@media (max-width: 820px) {
  .gallery-archive-card { grid-template-columns: minmax(0,168px) minmax(0,1fr); }
  .gallery-archive-card .events-list-body { padding: 19px 20px; }
  .gallery-archive-card .events-list-image { padding: 10px; min-height: 230px; }
}
@media (max-width: 620px) {
  .gallery-archive-card { grid-template-columns: minmax(0,1fr); }
  .gallery-archive-card .events-list-image { min-height: 0; padding: 14px; }
  .gallery-archive-card .events-list-image img { width: auto; max-width: 100%; max-height: 275px; }
  .gallery-archive-card .events-list-body { padding: 20px 18px 22px; }
  .gallery-archive-card .events-list-body h3 { font-size: 19px; }
  .gallery-archive-card .events-list-meta { gap: 7px; }
  .gallery-archive-card .events-list-meta time { font-size: 13px; }
}

/* =====================================================================
   【ギャラリー：スペイン・ヘレス公演 特集記事】
   gallery.html の id="archive-jerez-2019" に対応する専用スタイルです。
   ポスターと本文を上段に、移動した舞台写真5枚を下段に掲載します。
   ほかの公演カード・PHOTO GALLERY・他ページのデザインには影響しません。
   ===================================================================== */
.gallery-jerez-feature-jump { margin-top: 12px; font-size: 13px; }
.gallery-jerez-feature-jump a {
  color: var(--wine-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gallery-jerez-feature-jump a:hover { color: var(--wine); }

/* 【記事全体】通常の公演カードとは異なる、シンプルな誌面風の構成 */
.jerez-feature-article {
  min-width: 0;
  background: #fff;
  border: 1px solid #e9dcd8;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(69,30,24,.065);
  scroll-margin-top: 105px;
}
.jerez-feature-article:target { outline: 2px solid rgba(133,7,28,.3); outline-offset: 3px; }
.jerez-feature-inner { padding: clamp(20px,3.2vw,36px); }
.jerez-feature-heading { margin: 0 0 26px; }
.jerez-feature-eyebrow {
  display: block;
  color: var(--wine);
  font: 700 11px/1.6 var(--sans);
  letter-spacing: .12em;
}
.jerez-feature-heading h3 {
  margin: 8px 0 5px;
  color: var(--wine-dark);
  font-size: clamp(24px,3vw,34px);
  line-height: 1.42;
  letter-spacing: .025em;
}
.jerez-feature-subtitle { margin: 0; font-size: 14px; line-height: 1.7; color: #654b4b; }
.jerez-feature-subtitle span { white-space: normal; }

/* 【記事上段】ポスターと本文。PCは2列、スマホは縦並び。 */
.jerez-feature-intro {
  display: grid;
  grid-template-columns: minmax(0,265px) minmax(0,1fr);
  gap: clamp(19px,3.5vw,35px);
  align-items: start;
}
.jerez-feature-poster {
  min-width: 0;
  border-radius: 8px;
  padding: 13px;
  background: #321d23;
}
.jerez-feature-poster-button {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.jerez-feature-poster-button img { display: block; width: 100%; height: auto; max-height: 430px; object-fit: contain; }
.jerez-feature-poster-zoom {
  display: block;
  margin-top: 10px;
  color: #fff;
  font: 600 12px/1.5 var(--sans);
  text-align: center;
}
.jerez-feature-story { min-width: 0; color: #4b3839; font-size: 14px; line-height: 1.95; }
.jerez-feature-story > p { margin: 0 0 12px; }
.jerez-feature-story .jerez-feature-story-lead {
  margin: 0 0 12px;
  color: var(--wine-dark);
  font-weight: 700;
  font-size: clamp(17px,2vw,20px);
  line-height: 1.65;
}
.jerez-feature-facts { margin: 16px 0 0; padding: 8px 0; border-top: 1px solid #ebddda; }
.jerez-feature-facts > div { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid #f0e6e3; }
.jerez-feature-facts dt { color: var(--wine-dark); font-weight: 700; }
.jerez-feature-facts dd { margin: 0; overflow-wrap: anywhere; }
.jerez-feature-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 17px 0 0; }
.jerez-feature-links a { color: var(--wine-dark); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.jerez-feature-links a:hover { color: var(--wine); }

/* 【記事下段】写真5枚。PCでは主役写真を大きく、残り4枚を2×2に表示。 */
.jerez-feature-photos-header {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid #eaddd9;
  margin: 30px 0 16px;
  padding-top: 24px;
}
.jerez-feature-photos-header h4 {
  margin: 6px 0 0;
  color: var(--wine-dark);
  font-size: clamp(16px,2vw,20px);
  line-height: 1.5;
}
.jerez-feature-photos-header > p { margin: 0; color: #765e5e; font-size: 12px; white-space: nowrap; }
.jerez-feature-photo-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.jerez-feature-photo { position: relative; min-width: 0; margin: 0; aspect-ratio: 1.48; border-radius: 6px; overflow: hidden; background: #20191d; }
.jerez-feature-photo:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.jerez-feature-photo-button { display: block; position: relative; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.jerez-feature-photo-button img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.jerez-feature-photo-button:hover img { transform: scale(1.035); }
.jerez-feature-photo-zoom { display: grid; place-items: center; position: absolute; top: 8px; right: 8px; width: 27px; height: 27px; border-radius: 100%; background: rgba(46,16,23,.78); color: white; font-size: 18px; line-height: 1; }
.jerez-feature-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 9px 7px; background: linear-gradient(transparent,rgba(12,6,8,.86)); font-size: 11px; line-height: 1.5; color: #fff; pointer-events: none; }
.jerez-feature-photo:first-child figcaption { font-size: 13px; padding: 30px 14px 12px; }
.jerez-feature-photo-button:focus-visible,.jerez-feature-poster-button:focus-visible { outline: 3px solid #b66b70; outline-offset: 2px; }

/* 【タブレット】本文の幅を確保。 */
@media (max-width: 820px) {
  .jerez-feature-intro { grid-template-columns: minmax(0,200px) minmax(0,1fr); gap: 22px; }
  .jerez-feature-poster { padding: 10px; }
  .jerez-feature-photo-grid { gap: 7px; }
}
/* 【スマートフォン】ポスター・文章は縦並び、写真は横2列。 */
@media (max-width: 620px) {
  .jerez-feature-inner { padding: 19px 16px 22px; }
  .jerez-feature-heading { margin-bottom: 18px; }
  .jerez-feature-heading h3 { font-size: 24px; }
  .jerez-feature-intro { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .jerez-feature-poster { width: min(100%,255px); margin: 0 auto; }
  .jerez-feature-story { font-size: 13px; line-height: 1.9; }
  .jerez-feature-facts > div { grid-template-columns: 55px minmax(0,1fr); gap: 8px; }
  .jerez-feature-photos-header { align-items: start; flex-direction: column; gap: 4px; margin-top: 28px; padding-top: 20px; }
  .jerez-feature-photos-header > p { white-space: normal; }
  .jerez-feature-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .jerez-feature-photo:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 1.65; }
  .jerez-feature-photo:first-child figcaption { font-size: 12px; }
  .jerez-feature-photo figcaption { font-size: 10px; }
}

/* ========================================================================
   【公演情報ページ：Brillante 25周年記念 第18回発表会】
   対象ファイル：events.html のみ（main.brillante-page 以下と専用最下部）
   メインカラー：深い青緑 #083f49 ／ ゴールド #e8c985 ／ エンジ #702c32
   フライヤー画像：assets/images/events/brillante-25th-front-2027.webp と
                 brillante-25th-back-2027.webp
   更新ポイント：
     ・上部の写真・公演名 = .brillante-hero / events.html のヒーロー
     ・出演者カード = .brillante-founder / .brillante-guest-card
     ・演奏家写真   = .brillante-musicians
     ・チケット     = .brillante-tickets
   ※ 他のページへ影響しないよう原則 .brillante- でクラスを統一しています。
   ======================================================================== */
.brillante-page {
  --br-teal: #083f49;
  --br-deep: #082b37;
  --br-aqua: #1d8190;
  --br-gold: #e8c985;
  --br-gold-deep: #b98742;
  --br-cream: #fffaf0;
  --br-burgundy: #662932;
  color: #26353a;
  background: #fffaf3;
}
.brillante-page :is(h1,h2,h3,h4) { overflow-wrap: anywhere; }
.brillante-page :is(a,button) { -webkit-tap-highlight-color: rgba(231,198,132,.23); }
.brillante-section { padding: 75px 0; }
.brillante-section-head { text-align: center; margin-bottom: 36px; }
.brillante-section-head h2 {
  margin: 9px 0 0;
  font-size: clamp(26px,3.4vw,41px);
  letter-spacing: .08em;
  line-height: 1.55;
  font-weight: 600;
  color: var(--br-deep);
}
.brillante-eyebrow, .brillante-mini-label { font: 700 11px/1.5 Georgia,serif; letter-spacing: .21em; color: #a67e3a; }
.brillante-mini-label { font-size: 10px; }
.brillante-rule { margin: 14px auto 0; color: #bf9955; font-size: 17px; letter-spacing: .45em; }
.brillante-section-head-light h2 { color: #fff8e6; }
.brillante-section-head-light .brillante-eyebrow { color: #e5cc9c; }
.brillante-section-head-light .brillante-rule { color: #e9ce97; }
.brillante-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 12px 23px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  line-height: 1.55;
  transition: transform .2s, box-shadow .2s, background .2s;
  text-align: center;
}
.brillante-button span { font-size: 21px; line-height: 1; }
.brillante-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px #0003; }
.brillante-button-gold { background: linear-gradient(135deg,#fff0c4,#e1bc75); color: #283135; border-color: #f3d6a1; }
.brillante-button-outline { color: #fff7e5; border-color: #d3bf92; background: #08313c70; }
.brillante-button-outline:hover { background: #23687680; }
.brillante-button-teal { background: #0f5261; color: white; border-color: #0f5261; }
.brillante-inline-link { display: inline-flex; gap: 14px; font-size: 13px; color: #ffdfad; border-bottom: 1px solid #d9b46c; padding-bottom: 3px; font-weight: 700; }
.brillante-inline-link:hover { color: #fff; }

/* 【1：ヒーロー】背景の光・色、フライヤーと見出しの2列レイアウト */
.brillante-hero {
  isolation: isolate;
  position: relative;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 84% 10%,#75aeb285 0,transparent 31%),
    radial-gradient(ellipse at 10% 85%,#318e9c67 0,transparent 45%),
    radial-gradient(circle at 74% 68%,#17374777 0,transparent 38%),
    linear-gradient(127deg,#051f30,#0a5361 47%,#0e5660 74%,#062b3c);
  color: #fffdf3;
}
.brillante-hero::before {
  content:""; pointer-events:none; position:absolute; inset:-25px;
  background: url('../images/events/brillante-25th-front-2027.webp') center 32%/cover no-repeat;
  filter: blur(24px) saturate(1.25);
  opacity: .19;
  z-index:-2;
}
.brillante-hero::after {
  content:""; pointer-events:none; position:absolute; inset:12px;
  border: 1px solid #c9a96d80;
  border-radius: 2px;
  background:
    radial-gradient(circle at 1% 5%,#fff7c7b8 0 2px,transparent 5px),
    radial-gradient(circle at 96% 19%,#fff1bca6 0 3px,transparent 7px),
    radial-gradient(circle at 17% 91%,#fff7c7b8 0 2px,transparent 5px),
    radial-gradient(circle at 70% 86%,#fff7c7b8 0 2px,transparent 6px);
  z-index:-1;
}
.brillante-glow { pointer-events:none; position:absolute; inset:0; z-index:-1;
  background:
    repeating-radial-gradient(circle at 100% 40%, transparent 0 37px,#f1d99b0d 38px 39px,transparent 40px 65px),
    radial-gradient(circle at 15% 8%,#f9efb12b 0,transparent 14%),
    linear-gradient(165deg, transparent 48%, #e8c9851a);
}
.brillante-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap: clamp(26px,4vw,64px); padding-top: 65px; padding-bottom: 67px; }
.brillante-kicker { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 23px; color:#e6ca8f; font: 700 10px/1.5 Georgia,serif; letter-spacing:.18em; }
.brillante-kicker span { border-left:1px solid #e4c58c99; padding-left:12px; }
.brillante-hero-overline { font-size:clamp(15px,1.7vw,21px); color:#fff7e5; margin:0 0 10px; font-weight:600; letter-spacing:.14em; }
.brillante-hero h1 { font-family: Georgia,"Times New Roman",serif; font-size:clamp(67px,9vw,125px); line-height:1.03; font-weight:400; letter-spacing:-.065em; color:#f8df9f; text-shadow:0 3px 1px #5f421c,0 6px 17px #011824c9,0 0 35px #e0b65b50; margin:0 0 17px; overflow-wrap:normal; }
.brillante-hero-lead { font-family:var(--serif); font-weight:700; font-size:clamp(17px,2vw,23px); color:#fff5e3; letter-spacing:.11em; margin:0 0 14px; }
.brillante-hero-tagline { font-size:14px; line-height:1.95; color:#e7eeee; margin:0 0 24px; }
.brillante-hero-date { display:flex; align-items:baseline; gap:9px; color:#fff7e8; border-top:1px solid #dcc99078; padding-top:17px; max-width:440px; }
.brillante-date-label { font:700 11px Georgia,serif; letter-spacing:.18em; color:#edd7a1; align-self:center; writing-mode:vertical-rl; transform:rotate(180deg); }
.brillante-hero-date strong { font:400 clamp(36px,5vw,62px)/1.1 Georgia,serif; white-space:nowrap; letter-spacing:-.045em; }
.brillante-hero-date strong span { font-size:.55em; margin-right:8px; }
.brillante-date-week { white-space:nowrap; font-size:18px; }
.brillante-hero-hour { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:16px; margin:12px 0 2px; letter-spacing:.07em; }
.brillante-hero-hour strong { font:700 22px Georgia,serif; }
.brillante-hero-hour i { width:1px; height:19px; background:#d9bb83; display:inline-block; margin:0 3px; }
.brillante-hero-place { font-weight:700; font-size:clamp(14px,1.6vw,17px); margin:12px 0 24px; letter-spacing:.055em; }
.brillante-hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.brillante-hero-poster { max-width:382px; width:100%; justify-self:center; padding:7px; border:1px solid #dfbd80bd; box-shadow:0 14px 44px #00141daa,0 0 0 8px #ffffff10; background:#e4c58c22; }
.brillante-flyer-button { display:block; padding:0; border:0; width:100%; position:relative; background:#05313b; color:#fff; }
.brillante-flyer-button img { width:100%; height:auto; }
.brillante-image-hint { position:absolute; bottom:0; right:0; background:#092e3cd9; font-size:11px; padding:7px 13px; }
.brillante-hero-foot { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#d5b77d9c; font:9px Georgia,serif; letter-spacing:.08em; white-space:nowrap; }
.brillante-breadcrumb { background:#082d39; color:#f2deb7; font-size:11px; }
.brillante-breadcrumb a:hover { text-decoration:underline; }

/* 【2：公演概要】左＝紹介、右＝幻想Arabeの紹介カード */
.brillante-intro { background:linear-gradient(155deg,#fffdf7,#fff6e7); }
.brillante-intro-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:30px; align-items:stretch; }
.brillante-intro-copy { max-width:650px; padding:4px 0; font-size:14px; line-height:2.15; }
.brillante-intro-copy p:last-child { margin-bottom:0; }
.brillante-intro-copy .brillante-lead { font:600 clamp(19px,2.25vw,25px)/1.8 var(--serif); color:#155061; margin:0 0 24px; }
.brillante-lead em { font-family:Georgia,serif; font-weight:400; font-size:1.27em; font-style:normal; color:#b6873e; }
.brillante-feature-note { position:relative; text-align:center; padding:43px 29px 35px; background:linear-gradient(150deg,#fdf6e7,#fffdf8); border:1px solid #d9b97c; box-shadow:0 15px 34px #8f6c3714; }
.brillante-feature-note::before { content:""; position:absolute; inset:9px; border:1px solid #d7bd87a1; pointer-events:none; }
.brillante-feature-note h3 { position:relative; margin:15px 0 15px; color:#714336; font-size:clamp(22px,2.4vw,30px); line-height:1.75; }
.brillante-feature-note p { position:relative; font-size:13px; line-height:2; margin:0; color:#62544b; }
.brillante-feature-ornament { display:block; margin:17px auto 0; color:#b08c54; }

/* 【3：出演者カード】フライヤーの写真を利用。顔の上が切れにくい位置を指定 */
.brillante-artists {
  color:#fff5e7;
  background:
    radial-gradient(circle at 93% 12%,#33818b6c,transparent 36%),
    radial-gradient(circle at 7% 84%,#2d696a50,transparent 36%),
    linear-gradient(135deg,#061f2c,#0d4550 61%,#092c39);
}
.brillante-founder { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); min-height:440px; background:#ffffff0b; border:1px solid #d4b57e5e; }
.brillante-founder-photo { position:relative; min-height:430px; overflow:hidden; }
.brillante-founder-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 24%; position:absolute; }
.brillante-founder-content { padding:36px clamp(25px,4vw,53px); align-self:center; }
.brillante-founder-content h3 { font-size:clamp(25px,3vw,35px); color:#f8e6bb; margin:12px 0 18px; }
.brillante-founder-content h3 small { display:block; font:400 17px Georgia,serif; margin-top:3px; color:#e9d3b5; letter-spacing:.025em; }
.brillante-founder-content p { font-size:13px; line-height:2.05; color:#f3eee9; margin:0 0 13px; }
.brillante-founder-content .brillante-role-line { color:#e6c68c; font-weight:700; margin:0 0 18px; }
.brillante-guest-heading { text-align:center; margin:39px 0 24px; }
.brillante-guest-heading span { font:700 11px Georgia,serif; color:#dfc38f; letter-spacing:.25em; }
.brillante-guest-heading h3 { font-size:25px; margin:5px 0; color:#f6ead5; }
.brillante-guest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.brillante-guest-card { display:grid; grid-template-columns:38% minmax(0,1fr); min-width:0; background:#e6edf0e8; color:#26353a; overflow:hidden; }
.brillante-guest-photo { position:relative; min-height:365px; }
.brillante-guest-photo img { width:100%; height:100%; object-fit:cover; object-position:center 32%; position:absolute; }
.brillante-guest-text { padding:24px 22px 23px; }
.brillante-guest-text h4 { font:400 clamp(20px,2.2vw,28px)/1.3 Georgia,serif; margin:9px 0 0; color:#16505b; }
.brillante-guest-kana { font-size:12px; color:#794e3d; font-weight:700; margin:5px 0 16px; }
.brillante-guest-text>p:last-child { font-size:12px; line-height:1.9; margin-bottom:0; }

/* 【4：出演者一覧】写真6枚はPC3列以上、スマホ2列 */
.brillante-cast { background:#fffaf3; }
.brillante-musicians { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; margin-bottom:32px; }
.brillante-musicians figure { margin:0; background:#fff; border:1px solid #ebddca; box-shadow:0 8px 20px #332b2212; min-width:0; }
.brillante-musicians img { width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 25%; }
.brillante-musicians figcaption { display:block; text-align:center; font-size:12px; font-weight:700; color:#255461; line-height:1.4; padding:9px 4px 11px; }
.brillante-musicians figcaption small { display:block; font-size:11px; font-weight:400; color:#8a684f; margin-top:3px; }
.brillante-cast-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 30px; margin:0; }
.brillante-cast-list>div { display:grid; grid-template-columns:137px minmax(0,1fr); align-items:baseline; border-bottom:1px solid #dfd2bf; padding:11px 0; gap:13px; }
.brillante-cast-list dt { font-size:12px; font-weight:700; color:#976a3d; }
.brillante-cast-list dd { margin:0; font-size:13px; line-height:1.8; }

/* 【5：演目】暗い背景＋金色のリスト。演目名はHTML側の li を編集 */
.brillante-program { color:#fff; background: radial-gradient(ellipse at 45% 0,#92505a80,transparent 65%),linear-gradient(140deg,#3d1926,#682e38 48%,#451f2c); }
.brillante-program-wrap { max-width:1080px; }
.brillante-program-lead { text-align:center; font-family:var(--serif); line-height:2; font-size:16px; margin:0 0 30px; }
.brillante-program-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.brillante-program-grid li { display:flex; align-items:center; justify-content:center; border:1px solid #f5d7a75f; background:#ffe8b312; text-align:center; min-height:68px; padding:15px; font-family:var(--serif); font-size:14px; color:#fff4e2; }
.brillante-program-grid li.brillante-program-special { grid-column:1/-1; flex-direction:column; gap:7px; background:#f1dfb017; font-size:14px; }
.brillante-program-special strong { color:#ffdf96; font-size:25px; font-weight:600; }
.brillante-program-note { color:#e7d9d3; text-align:right; font-size:12px; margin:18px 0 0; }

/* 【6：チケット】料金と受付開始日・LINE QRを常に読みやすく表示 */
.brillante-tickets { background:linear-gradient(145deg,#072b39,#0b3c47 57%,#092c3b); color:#fff; }
.brillante-ticket-prices { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; margin-bottom:36px; }
.brillante-ticket-price { background:linear-gradient(135deg,#fffbef,#e9d7a9); border:3px double #af8758; color:#55382b; width:min(100%,260px); padding:20px 25px; text-align:center; box-shadow:0 10px 35px #0002; }
.brillante-ticket-price span { display:block; font-family:var(--serif); font-size:20px; font-weight:700; }
.brillante-ticket-price strong { font:400 43px Georgia,serif; display:block; margin-top:8px; white-space:nowrap; letter-spacing:-.035em; }
.brillante-ticket-price strong small { font:700 19px var(--serif); }
.brillante-ticket-price em { font-style:normal; font-size:12px; }
.brillante-ticket-price-premium { background:linear-gradient(130deg,#104757,#0e2435); color:#fff0cc; border-color:#c7a976; }
.brillante-booking { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:30px; padding:35px; background:#ffffff0c; border:1px solid #dcc2907a; }
.brillante-booking-main h3 { color:#fae5ba; font-size:25px; margin:9px 0 19px; }
.brillante-sales-date { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 16px; border-left:4px solid #e4be77; padding:12px 18px; margin:0 0 21px; background:#ffffff15; }
.brillante-sales-date span { font-size:12px; color:#f8e3b8; font-weight:700; }
.brillante-sales-date strong { font-size:clamp(16px,2.2vw,22px); color:#fff; }
.brillante-booking-main>p,.brillante-steps p { font-size:13px; line-height:2; color:#f2eeec; }
.brillante-steps { counter-reset:step; list-style:none; padding:0; margin:25px 0 22px; display:grid; gap:15px; }
.brillante-steps li { counter-increment:step; position:relative; padding-left:36px; }
.brillante-steps li::before { content:counter(step); display:grid; place-items:center; position:absolute; left:0; top:0; width:26px; height:26px; border:1px solid #dfbc7e; border-radius:50%; font:700 13px Georgia,serif; color:#ffda94; }
.brillante-steps strong { color:#ffdc9a; }
.brillante-steps p { margin:4px 0 0; }
.brillante-booking-contact { margin:19px 0 0; }
.brillante-booking-contact a { text-decoration:underline; text-underline-offset:4px; }
.brillante-booking-contact a:hover { color:#ffda94; }
.brillante-line-qr { background:#fffaf1; border:1px solid #e0c99d; padding:25px 22px; color:#36535b; text-align:center; align-self:start; }
.brillante-line-qr h3 { color:#124c59; font-size:20px; margin:8px 0 19px; }
.brillante-line-qr img { margin:0 auto 17px; max-width:180px; width:100%; height:auto; padding:7px; background:#fff; border:1px solid #ded1bd; }
.brillante-line-qr p { font-size:12px; line-height:1.9; margin:0; }
.brillante-booking-note { margin:20px 0 0; padding:19px 25px; background:#fffdf5; color:#574739; border-left:4px solid #c6a36b; font-size:13px; }
.brillante-booking-note strong { color:#69482b; }
.brillante-booking-note p { margin:4px 0 0; line-height:1.9; }

/* 【7：会場とフライヤー】2枚の写真をクリックすると既存ライトボックスを開く */
.brillante-access { background:linear-gradient(120deg,#fffaf3,#f8efdf); }
.brillante-access-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:45px; }
.brillante-venue { border-top:2px solid #c3a16b; padding-top:23px; }
.brillante-venue h3 { font-size:clamp(25px,3vw,35px); color:#145161; margin:13px 0 20px; }
.brillante-venue p { font-size:14px; line-height:2.1; }
.brillante-venue .brillante-access-small { color:#706359; font-size:12px; margin:16px 0 0; }
.brillante-flyer-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start; }
.brillante-flyer-pair figure { margin:0; min-width:0; }
.brillante-flyer-pair button { position:relative; display:block; padding:5px; width:100%; border:1px solid #c4a66f; background:#fff; box-shadow:0 12px 29px #5d4e3c22; }
.brillante-flyer-pair button img { aspect-ratio:1409/2048; object-fit:contain; width:100%; height:auto; }
.brillante-flyer-pair button>span { position:absolute; bottom:5px; right:5px; padding:5px 12px; background:#082f3ddc; color:#fff; font-size:11px; }
.brillante-flyer-pair figcaption { text-align:center; color:#776450; font-size:12px; margin-top:9px; }

/* 【8：主催とお問い合わせ】長いメールアドレスをスマホで折り返す */
.brillante-organizer { background:linear-gradient(130deg,#081f2b,#0d4450); color:#fff5e9; }
.brillante-organizer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.brillante-organizer-grid>div { border-top:1px solid #d4b57d95; padding:22px 0 0; min-width:0; }
.brillante-organizer-grid h3 { font-size:18px; color:#f8dda7; margin:0 0 12px; }
.brillante-organizer-grid p { font-size:13px; color:#f4ece5; line-height:2.0; overflow-wrap:anywhere; margin:0 0 20px; }
.brillante-organizer-grid a { text-decoration:underline; text-underline-offset:3px; }
.brillante-organizer-grid a:hover { color:#efcc8a; }
.brillante-organizer-grid .brillante-site-links { font-size:12px; }

/* 【公演ページ専用の最下部】チケット案内へ戻るリンク */
.brillante-closing-cta { background:linear-gradient(110deg,#662a36,#8c4650 50%,#5b2833); color:#fff9eb; padding:36px 0; }
.brillante-closing-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.brillante-closing-inner span { color:#ffe3b1; letter-spacing:.19em; font:11px Georgia,serif; }
.brillante-closing-inner h2 { font-size:clamp(21px,2.5vw,28px); margin:7px 0; color:#fff1d1; }
.brillante-closing-inner p { font-size:12px; margin:0; }
.brillante-mobile-only { display:none; }

/* ================================================================
   【公演ページ全体のカード型レイアウト】
   ブラウザーの端まで横長に広げず、中央の1枚のカードのように表示します。
   ・1100px = PCで表示する最大横幅（もう少し細くする場合は変更）
   ・外側の余白 = カードの左右の空き、影 = 浮かんだような見た目
   ・main と公演末尾のお申込み案内を同じ幅にして連続したカードにします。
   ・他のページには影響しないよう body.page-events のみに適用します。
   ================================================================ */
body.page-events { background: #eef2ef; }
.brillante-page {
  width: min(1100px, calc(100% - 64px));
  margin: 32px auto 0;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(7, 35, 42, .18);
}
.brillante-closing-cta {
  width: min(1100px, calc(100% - 64px));
  margin: 0 auto 44px;
  border-radius: 0 0 17px 17px;
  box-shadow: 0 18px 38px rgba(7, 35, 42, .13);
}

/* 【LINEのQRカード】受付開始日時の枠と上端を揃えるための余白。
   左列の「HOW TO RESERVE」と見出し分だけ右列を下げています。
   1列表示になる画面では下のメディアクエリで余白を戻します。 */
.brillante-line-qr { margin-top: 92px; }

@media (max-width: 760px) {
  /* タブレットの縦表示・スマホでもカードの左右に余白を残します。 */
  .brillante-page,
  .brillante-closing-cta { width: calc(100% - 24px); }
  .brillante-page { margin-top: 14px; border-radius: 12px 12px 0 0; }
  .brillante-closing-cta { margin-bottom: 24px; border-radius: 0 0 12px 12px; }
  /* QRカードは申込本文の下に並ぶので上の空白は不要です。 */
  .brillante-line-qr { margin-top: 0; }
}
@media (max-width: 520px) {
  /* 狭いスマホは本文を圧迫しないようカード外側の余白を小さくします。 */
  .brillante-page,
  .brillante-closing-cta { width: calc(100% - 16px); }
  .brillante-page { margin-top: 8px; }
  .brillante-closing-cta { margin-bottom: 16px; }
}

/* 【タブレット】プロフィールやチケットの2列を広さに応じて調整 */
@media (max-width: 980px) {
  .brillante-hero-grid { grid-template-columns: minmax(0,1fr) minmax(0,.77fr); gap:26px; }
  .brillante-hero h1 { font-size:clamp(60px,8.4vw,90px); }
  .brillante-hero-poster { max-width:340px; }
  .brillante-guest-card { grid-template-columns:1fr; }
  .brillante-guest-photo { height:240px; min-height:240px; }
  .brillante-guest-photo img { object-position:center 23%; }
  .brillante-booking { grid-template-columns:minmax(0,1fr) 220px; padding:24px; }
  .brillante-cast-list>div { grid-template-columns:115px minmax(0,1fr); }
}
@media (max-width: 760px) {
  .brillante-section { padding:59px 0; }
  .brillante-hero-grid { grid-template-columns:1fr; padding:47px 0 53px; }
  .brillante-hero-copy { text-align:center; }
  .brillante-kicker { justify-content:center; }
  .brillante-hero-date { justify-content:center; margin-inline:auto; }
  .brillante-hero-actions { justify-content:center; }
  .brillante-hero-poster { max-width:330px; }
  .brillante-hero h1 { font-size:clamp(60px,12vw,100px); }
  .brillante-hero-foot { bottom:15px; }
  .brillante-intro-grid, .brillante-founder, .brillante-access-grid { grid-template-columns:1fr; gap:30px; }
  .brillante-founder-photo { height:370px; min-height:370px; }
  .brillante-founder-photo img { object-position:center 30%; }
  .brillante-guest-grid { gap:18px; }
  .brillante-musicians { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .brillante-cast-list { grid-template-columns:1fr; }
  .brillante-booking { grid-template-columns:1fr; }
  .brillante-line-qr { max-width:400px; width:100%; margin-inline:auto; }
  .brillante-organizer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brillante-closing-inner { flex-direction:column; text-align:center; }
}
/* 【スマホ】横スクロールを防ぎ、QR・写真・日付・文章を縦に並べる */
@media (max-width: 520px) {
  .brillante-page { font-size:14px; }
  .brillante-section { padding:48px 0; }
  .brillante-section-head { margin-bottom:27px; }
  .brillante-section-head h2 { font-size:clamp(24px,7vw,30px); }
  .brillante-hero::after { inset:8px; }
  .brillante-hero-grid { padding:39px 0 53px; }
  .brillante-kicker { font-size:8px; gap:7px; margin-bottom:16px; }
  .brillante-kicker span { padding-left:7px; }
  .brillante-hero-overline { font-size:15px; }
  .brillante-hero h1 { font-size:clamp(54px,15vw,80px); }
  .brillante-hero-lead { font-size:17px; }
  .brillante-hero-tagline { font-size:12px; }
  .brillante-hero-date strong { font-size:clamp(32px,10vw,43px); }
  .brillante-date-week { font-size:14px; }
  .brillante-hero-hour { justify-content:center; }
  .brillante-hero-place { font-size:13px; }
  .brillante-hero-actions { gap:9px; }
  .brillante-hero-actions .brillante-button { padding:11px 13px; min-height:46px; font-size:12px; }
  .brillante-hero-poster { width:min(100%,280px); }
  .brillante-feature-note { padding:32px 20px; }
  .brillante-founder-photo { height:290px; min-height:290px; }
  .brillante-founder-content { padding:27px 22px; }
  .brillante-guest-grid { grid-template-columns:1fr; gap:24px; }
  .brillante-guest-card { grid-template-columns: minmax(0,.48fr) minmax(0,.52fr); }
  .brillante-guest-photo { height:auto; min-height:330px; }
  .brillante-guest-text { padding:20px 13px; }
  .brillante-guest-text h4 { font-size:19px; overflow-wrap:anywhere; }
  .brillante-guest-text>p:last-child { font-size:11px; }
  .brillante-musicians { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .brillante-musicians img { aspect-ratio:1.1; }
  .brillante-cast-list>div { grid-template-columns:111px minmax(0,1fr); gap:8px; }
  .brillante-cast-list dt,.brillante-cast-list dd { font-size:12px; }
  .brillante-program-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .brillante-program-grid li { padding:11px 9px; font-size:12px; min-height:59px; }
  .brillante-program-special strong { font-size:20px; }
  .brillante-ticket-prices { gap:10px; }
  .brillante-ticket-price { width:calc((100% - 10px)/2); padding:14px 4px; }
  .brillante-ticket-price strong { font-size:clamp(25px,8vw,36px); }
  .brillante-ticket-price strong small { font-size:13px; }
  .brillante-ticket-price span { font-size:16px; }
  .brillante-booking { padding:22px 17px; }
  .brillante-sales-date { padding:11px; }
  .brillante-sales-date strong { font-size:16px; }
  .brillante-email { width:100%; padding-inline:8px; }
  .brillante-flyer-pair { gap:12px; }
  .brillante-organizer-grid { grid-template-columns:1fr; gap:15px; }
  .brillante-mobile-only { display:block; }
}

/* ============================================================================
   【下層ページ7ページ共通】25周年記念発表会の案内ボタン（hero内の2つ目のボタン）

   ▼ 掲載ページ
   osaka-beginner / osaka / odawara / instructors / gallery /
   online-archive / contact の7ページ。
   トップページと公演情報ページ（events.html）には表示しません。

   ▼ 変更のしかた
   ・ボタンの文字／リンク先：各HTMLの「hero-event-cta」を検索して変更。
   ・ボタン全体の大きさ／間隔：下の .page-hero .hero-event-cta を編集。
   ・ページごとの色：上の「各ページの色」セクションにある
     --event-cta-color と --event-cta-border を編集します。
   ・「体験レッスンを申し込む」は同じ「各ページの色」セクションで変更します。
   ============================================================================ */

.page-hero .hero-event-cta {
  /* 既存の申込ボタンの下に、控えめな第2ボタンを縦に配置します。 */
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 267px;
  min-height: 44px;
  margin-top: 12px;
  padding: 9px 19px;
  gap: 9px;
  border: 1px solid var(--event-cta-border);
  border-radius: 999px;
  background: var(--event-cta-color);
  color: #fff;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .26);
}
.page-hero .hero-event-cta:hover,
.page-hero .hero-event-cta:focus-visible {
  color: #fff;
  background: var(--event-cta-color);
  filter: brightness(1.16);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .32);
}
.page-hero .hero-event-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.page-hero .hero-event-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
/* スマートフォン：画面幅に合わせた2段ボタンにし、押しやすい高さを確保します。 */
@media (max-width: 680px) {
  .page-hero .hero-event-cta {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin-top: 12px;
    padding: 11px 12px;
  }
}

/* ========================================================================
   【gallery.html】過去の公演・イベント・フォト：年代順に1つの一覧へ統合
   HTMLの .gallery-chronology-year が1年分の外枠、
   .gallery-chronology-items が「公演記事 → 写真アルバム」の並びです。
   通常記事もアルバムも既存のデザイン・ライトボックスをそのまま使用します。
   新しい年を追加しても、見出しや並びが崩れないようにしています。
   ======================================================================== */
.gallery-chronology-section { background: #fffaf8; padding-top: 36px; padding-bottom: 46px; }
.gallery-chronology-section > .container { max-width: 1180px; }
/* 旧ページ内リンクを残すための位置合わせ。画面には表示しません。 */
.gallery-anchor-alias { display: block; height: 0; overflow: hidden; scroll-margin-top: 105px; }
.gallery-chronology-year { max-width: 1080px; margin: 0 auto; }
/* 年の区切りもコンテンツ間隔の基本30pxに統一 */
.gallery-chronology-year + .gallery-chronology-year { margin-top: 30px; }
.gallery-chronology-year-heading {
  display: flex; align-items: baseline; gap: 5px;
  margin: 0 0 22px; padding: 0 0 10px;
  color: var(--wine-dark); border-bottom: 1px solid #d8bcb2;
  font: 600 clamp(23px,3.2vw,29px)/1.3 var(--serif);
  letter-spacing: .035em;
}
.gallery-chronology-year-number { font-variant-numeric: lining-nums tabular-nums; }
.gallery-chronology-year-label { font-size: .64em; }
.gallery-chronology-items { width: 100%; max-width: none; gap: 30px; }
/* 元の「公演別フォトギャラリー」の配置方法を、統合した年別一覧でも使用。 */
.gallery-chronology-items > .performance-album { min-width: 0; }
.gallery-chronology-section .performance-album-content .mari-photo-grid { gap: 14px; }

/* ========================================================================
   【gallery.html】活動記録：年ごとの開閉枠を廃止し、1つの一覧枠にする。
   li（1記録）を増やすと、自動的に1枠の中へ追加されます。
   ======================================================================== */
.gallery-history-single {
  max-width: 990px; margin: 0 auto;
  border: 1px solid #e7d8d0; border-radius: 12px;
  background: #fff; overflow: hidden;
  box-shadow: 0 9px 22px rgba(69,30,24,.055);
}
.gallery-history-entries { list-style: none; margin: 0; padding: 11px 26px; }
.gallery-history-entries li {
  display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 15px;
  align-items: baseline; padding: 11px 3px;
  font-size: 13px; line-height: 1.8; color: #574c4b;
}
.gallery-history-entries li + li { border-top: 1px solid #f0e5df; }
.gallery-history-entry-year { white-space: nowrap; color: var(--wine-dark); font-weight: 700; }
.gallery-history-entry-text { min-width: 0; overflow-wrap: anywhere; }
.gallery-history-entry-text a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .gallery-chronology-year-heading { font-size: 23px; margin-bottom: 18px; }
  .gallery-history-entries { padding: 9px 14px; }
  .gallery-history-entries li { grid-template-columns: 56px minmax(0,1fr); gap: 10px; padding: 10px 1px; font-size: 12px; }
}