/* ========================================
   JCB THE CLASS - スタイルシート
   ======================================== */

/* ========================================
   デザイントークン（一括変更用）
   ======================================== */
:root {
  /* カラー */
  --color-bg-dark: #1a1a1a;
  --color-bg-mid: #2d2d2d;
  --color-accent-gold: #b59a5d;
  --color-accent-gold-light: #c9b07a;
  --color-text: #ffffff;
  --color-text-sub: #cccccc;
  --color-border: rgba(181, 154, 93, 0.4);

  /* フォントサイズ */
  --font-size-hero: clamp(2rem, 5vw, 3.5rem);
  --font-size-h1: clamp(1.75rem, 4vw, 2.5rem);
  --font-size-h2: clamp(1.5rem, 3vw, 2rem);
  --font-size-body: clamp(0.9375rem, 1.2vw, 1rem);
  --font-size-lead: clamp(1rem, 1.5vw, 1.125rem);

  /* 余白・間 */
  --space-section: clamp(4rem, 10vw, 8rem);
  --space-block: clamp(2rem, 5vw, 4rem);
  --space-inline: clamp(1.5rem, 3vw, 2.5rem);

  /* 文字間隔（ラグジュアリー用） */
  --letter-spacing-wide: 0.12em;
  --letter-spacing-medium: 0.08em;

  /* FVカード・光の周回軌道（vwで画面幅に連動・範囲を広めに） */
  --mv-glow-orbit-x: min(280px, 58vw);
  --mv-glow-orbit-y: min(175px, 36vw);

  /* Concept / Benefits セクションの高さ（同一に揃える） */
  --section-block-height: 70vh;
}

/* ========================================
   スプラッシュ（読み込み時メッセージ）
   ======================================== */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-mid) 100%);
  transition: opacity 0.6s ease;
}
.splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* スプラッシュテキスト：ふわっと浮かび上がる */
@keyframes splash-text-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.splash-text {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: bold;
  color: var(--color-accent-gold);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 2;
  text-align: center;
  margin: 0;
  padding: var(--space-inline);
  opacity: 0;
  animation: splash-text-in 1.2s ease-out 0.2s forwards;
}

/* スプラッシュ表示中はメインコンテンツを非表示 */
body.splash-visible .main-content {
  opacity: 0;
  pointer-events: none;
}
.main-content {
  position: relative;
  z-index: 1;
  transition: opacity 0.7s ease;
  min-height: 100vh;
}

/* ========================================
   リセット・ベース
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: var(--font-size-body);
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-mid) 100%);
  line-height: 1.8;
  letter-spacing: var(--letter-spacing-medium);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-gold); text-decoration: none; }
a:hover { color: var(--color-accent-gold-light); }

/* ========================================
   共通コンテナ・見出し
   ======================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-inline);
  padding-right: var(--space-inline);
}
.section-title {
  font-size: var(--font-size-h2);
  font-weight: normal;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text);
  margin: 0 0 var(--space-block);
  text-align: center;
}
.section-title .en {
  display: block;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.6em;
  color: var(--color-accent-gold);
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
}

/* ゴールドの線（装飾） */
.gold-line {
  width: 60px;
  height: 1px;
  background: var(--color-accent-gold);
  margin: 1.5rem auto;
}

/* ゴールドボタン（READ MORE等） */
.btn-gold {
  display: inline-block;
  padding: 0.9em 5.2em;
  background: transparent;
  color: var(--color-accent-gold);
  border: 1px solid var(--color-accent-gold);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.btn-gold:hover {
  background: var(--color-accent-gold);
  color: var(--color-bg-dark);
}

/* ========================================
   Main Visual（メインビジュアル）
   ======================================== */
.mv {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-section) var(--space-inline);
  overflow: hidden;
}

/* フェードスライダー（自動切り替え・操作不可） */
.mv-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-bg-dark);
}
.mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.mv-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.mv-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* オーバーレイ（暗いグラデーション・FV画像がなるべく見えるよう控えめに） */
.mv-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26,26,26,0.25) 0%, rgba(26,26,26,0.55) 100%);
  pointer-events: none;
}
.mv .container { position: relative; z-index: 2; }

/* FV左上ロゴ */
.mv-head-logo {
  position: absolute;
  top: var(--space-inline);
  left: var(--space-inline);
  z-index: 2;
  margin: 0;
}
.mv-head-logo-img {
  display: block;
  height: auto;
  max-height: 48px;
  width: auto;
  max-width: 180px;
  vertical-align: top;
}

/* カード＋白い光彩のラッパー */
.mv-card-wrap {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto var(--space-block);
  padding: 1rem;
}
/* 白い円形の光がカード裏側で周回するグローエフェクト */
.mv-card-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  margin-left: -80px;
  margin-top: -80px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.7) 25%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    transparent 100%
  );
  box-shadow:
    0 0 50px rgba(255, 255, 255, 0.5),
    0 0 100px rgba(255, 255, 255, 0.25),
    0 0 150px rgba(255, 255, 255, 0.1);
  filter: blur(20px);
  animation: mv-glow-orbit 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* 軌道は :root の --mv-glow-orbit-x / --mv-glow-orbit-y で変更可能 */
@keyframes mv-glow-orbit {
  0%     { transform: translate(var(--mv-glow-orbit-x), 0); }
  6.25%  { transform: translate(calc(var(--mv-glow-orbit-x) * 0.924), calc(var(--mv-glow-orbit-y) * 0.383)); }
  12.5%  { transform: translate(calc(var(--mv-glow-orbit-x) * 0.707), calc(var(--mv-glow-orbit-y) * 0.707)); }
  18.75% { transform: translate(calc(var(--mv-glow-orbit-x) * 0.383), calc(var(--mv-glow-orbit-y) * 0.924)); }
  25%    { transform: translate(0, var(--mv-glow-orbit-y)); }
  31.25% { transform: translate(calc(var(--mv-glow-orbit-x) * -0.383), calc(var(--mv-glow-orbit-y) * 0.924)); }
  37.5%  { transform: translate(calc(var(--mv-glow-orbit-x) * -0.707), calc(var(--mv-glow-orbit-y) * 0.707)); }
  43.75% { transform: translate(calc(var(--mv-glow-orbit-x) * -0.924), calc(var(--mv-glow-orbit-y) * 0.383)); }
  50%    { transform: translate(calc(var(--mv-glow-orbit-x) * -1), 0); }
  56.25% { transform: translate(calc(var(--mv-glow-orbit-x) * -0.924), calc(var(--mv-glow-orbit-y) * -0.383)); }
  62.5%  { transform: translate(calc(var(--mv-glow-orbit-x) * -0.707), calc(var(--mv-glow-orbit-y) * -0.707)); }
  68.75% { transform: translate(calc(var(--mv-glow-orbit-x) * -0.383), calc(var(--mv-glow-orbit-y) * -0.924)); }
  75%    { transform: translate(0, calc(var(--mv-glow-orbit-y) * -1)); }
  81.25% { transform: translate(calc(var(--mv-glow-orbit-x) * 0.383), calc(var(--mv-glow-orbit-y) * -0.924)); }
  87.5%  { transform: translate(calc(var(--mv-glow-orbit-x) * 0.707), calc(var(--mv-glow-orbit-y) * -0.707)); }
  93.75% { transform: translate(calc(var(--mv-glow-orbit-x) * 0.924), calc(var(--mv-glow-orbit-y) * -0.383)); }
  100%   { transform: translate(var(--mv-glow-orbit-x), 0); }
}
.mv-card {
  position: relative;
  z-index: 1;
  width: 100%;
  /* background: var(--color-bg-dark); */
  border-radius: 12px;
  overflow: hidden;
}
.mv-card img {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  object-fit: contain;
  object-position: center;
}
.mv-logo {
  font-family: "Jost", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: var(--font-size-hero);
  font-weight: normal;
  letter-spacing: 0.2em;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}
.mv-logo .gold { color: var(--color-text); }
.mv-catch {
  font-size: var(--font-size-lead);
  color: var(--color-text-sub);
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}

/* ========================================
   Invitation Letter（招待状）
   ======================================== */
.invitation {
  position: relative;
  z-index: 1;
  min-height: 70vh;
  padding: var(--space-section) var(--space-inline);
  background-image: url("/event/jcb-class/images/bg_invitation.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}
@media (min-width: 1200px) {
  .invitation { min-height: 85vh; }
}
@media (min-width: 1600px) {
  .invitation { min-height: 100vh; }
}
/* タブレット（768px〜1024px・iPad mini / iPad Airなど）：MVの高さ調整 */
@media (min-width: 768px) and (max-width: 1024px) {
  .mv {
    min-height: 46vh;
  }
}
/* タブレット：スプラッシュテキストを画面中央に */
@media (min-width: 768px) and (max-width: 1024px) {
  .splash {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .splash-text {
    margin: auto;
  }
}
.invitation-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.invitation-txt-wrap {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  max-width: 50%;
}
.invitation-txt-wrap.is-inview {
  opacity: 1;
  transform: translateY(0);
}
.invitation-txt-wrap picture {
  display: block;
  width: 100%;
}
.invitation-txt-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* スクロールでふんわりフェードイン（汎用）
 * .fade-in-on-scroll を付けた要素がビューポートに入ったら .is-inview で表示
 */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}
.fade-in-on-scroll.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   Concept（コンセプト）
   ======================================== */
/* 背景はセクションに付与（スクロールと一体・FVと干渉しない） */
.concept {
  position: relative;
  min-height: var(--section-block-height);
  padding: var(--space-section) var(--space-inline);
  background-image: url("/event/jcb-class/images/bg_concept.png");
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}
.concept .container {
  position: relative;
  z-index: 1;
  text-align: center;
}
.concept .section-title {
  position: relative;
  font-size: 35px;
  z-index: 2;
  color: var(--color-text);
  font-weight: bold;
}
/* タブレット・PCでは span（読点）と br を非表示 */
@media (min-width: 768px) {
  .concept .section-title span,
  .concept .section-title br {
    display: none;
  }
}
.concept-card-wrap {
  position: relative;
  z-index: 0;
  text-align: center;
  /* margin-top: var(--space-block); */
  padding: 1.5rem 0 0;
  display: inline-block;
  --concept-glow-x: 200px;
  --concept-glow-y: 0px;
}
/* 黄金の円形光がカード周りを周回（スクロール連動・FVと同系統） */
.concept-card-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(198, 168, 100, 1) 0%,
    rgba(181, 154, 93, 0.75) 30%,
    rgba(181, 154, 93, 0.35) 55%,
    rgba(181, 154, 93, 0.08) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 45px rgba(181, 154, 93, 0.5),
    0 0 90px rgba(181, 154, 93, 0.25),
    0 0 130px rgba(181, 154, 93, 0.12);
  filter: blur(18px);
  transform: translate(var(--concept-glow-x), var(--concept-glow-y));
  pointer-events: none;
  z-index: 0;
  transition: transform 0.5s ease-out;
}
.concept-card-img {
  position: relative;
  z-index: 1;
  max-width: min(100%, 520px);
  height: auto;
  display: block;
  margin: 0 auto;
  vertical-align: top;
  background: var(--color-bg-dark);
  border-radius: 12px;
}

/* ========================================
   Benefits（特典・縦並び＋背景画像）
   ======================================== */
.benefits {
  padding: 0;
  background: var(--color-bg-dark);
}
.benefits .container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}
.benefits .section-title,
.benefits .gold-line {
  padding-left: var(--space-inline);
  padding-right: var(--space-inline);
}
.benefits-list {
  /*margin-top: var(--space-block);*/
  display: flex;
  flex-direction: column;
  gap: 0;
}
.benefit-card {
  position: relative;
  min-height: var(--section-block-height);
  padding: var(--space-block) var(--space-inline);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* .benefit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.5) 0%, rgba(26, 26, 26, 0.85) 100%);
  pointer-events: none;
} */
.benefit-card--concierge { background-image: url("/event/jcb-class/images/img_conciergedesk.png"); }
.benefit-card--gourmet  { background-image: url("/event/jcb-class/images/img_gourmetbenefit.png"); }
.benefit-card--members  { background-image: url("/event/jcb-class/images/img_menbersselection.png"); }
.benefit-card--priority { background-image: url("/event/jcb-class/images/img_prioritypass.png"); }
.benefit-card-inner {
  position: relative;
  z-index: 1;

}
.benefit-card h3 {
  font-family: "Jost", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 51px;
  font-weight: normal;
  margin: 0 0 0.5rem;
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.5;
  color: var(--color-text);
}
.benefit-card .en {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: var(--color-text-sub);
  letter-spacing: var(--letter-spacing-medium);
  margin-bottom: 0.75rem;
  display: block;
}
.benefit-card .text-sub {
  color: var(--color-text-sub);
  font-size: 0.9em;
  margin: 0 0 1rem;
}
/* READ MOREボタン（Benefits用：背景色・角丸・ホバー半透明） */
.benefit-card .btn-gold {
  margin-top: 0.5rem;
  background-color: #b2985b;
  color: #fff;
  border: none;
  border-radius: 9999px;
  transition: background-color 0.3s, opacity 0.3s;
}
.benefit-card .btn-gold:hover {
  background-color: #b2985b;
  opacity: 0.75;
}

/* モーダル */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0.3s ease-out;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.modal-dialog {
  position: relative;
  z-index: 1;
  max-width: 90vw;
}
.modal-inner {
  position: relative;
  max-height: 90vh;
  background: var(--color-bg-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.modal-close {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.5rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
}
.modal-content {
  /* padding: 2rem; */
  max-height: 85vh;
  overflow: auto;
}
.modal-img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* ========================================
   Closing / Summary（まとめ）
   ======================================== */
.closing {
  padding: var(--space-section) var(--space-inline);
  background: linear-gradient(to bottom right, #2f3135, #242529);
}
.closing-lead {
  text-align: center;
  font-size: 27px;
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-medium);
  line-height: 1.9;
  margin: 0 0 var(--space-block);
  padding: 0 var(--space-inline);
}
.closing-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-block);
  max-width: 1000px;
  margin: 0 auto;
}
.closing-card {
  flex: 0 0 auto;
  width: min(42%, 380px);
  margin-left: 0;
  margin-right: 0;
}
.closing-card-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}
.closing-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.closing-heading {
  margin: 0 0 0.75rem;
  flex-shrink: 0;
}
.closing-heading-img {
  max-width: 55%;
  height: auto;
  display: block;
  vertical-align: top;
}
.closing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto;
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
}
.closing-list li {
  padding: 1.25em 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.closing-list .label { color: var(--color-text-sub); }
.closing-list .value { color: var(--color-text); font-size: var(--font-size-lead); }
.closing-note {
  flex: 0 0 100%;
  margin: 0;
  margin-top: 0.5rem;
  font-size: 11px;
  color: var(--color-text-sub);
}

/* ========================================
   Footer（フッター・closingの上に画像を被せる）
   ======================================== */
.footer {
  margin-top: -100px;
  padding: 120px var(--space-inline) 0;
  padding-bottom: 10rem;
  background-image: url("/event/jcb-class/images/img_footer.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  z-index: 1;
}
.footer-logo-wrap {
  margin: 0 0 1rem;
  padding-top: 2.5rem;
}
.footer-logo-img {
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.footer-legal {
  font-size: 0.65rem;
  line-height: 1.6;
  color: var(--color-text-sub);
  opacity: 0.9;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}
.footer-legal br {
  display: none;
}

/* 固定CTA（資料請求） */
.fixed-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem var(--space-inline);
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-accent-gold);
  z-index: 100;
  text-align: center;
}
.fixed-cta .btn-cta {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  padding: 1em 2em;
  background: var(--color-accent-gold);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--letter-spacing-wide);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.fixed-cta .btn-cta:hover {
  background: var(--color-accent-gold-light);
  color: #fff;
}

/* iPad mini / iPad Air 用（768px〜1024px）※ベースより後に配置して確実に適用 */
@media (min-width: 768px) and (max-width: 1024px) {
  .mv-card-wrap {
    width: min(100%, 375px);
    /* 光の周回範囲を狭く */
    --mv-glow-orbit-x: min(120px, 26vw);
    --mv-glow-orbit-y: min(75px, 16vw);
  }
  .concept .section-title {
    font-size: 3.4vw;
  }
  .concept-card-wrap {
    width: 46%;
    /* 光の動く範囲を狭く */
    --concept-glow-x: 100px;
    --concept-glow-y: 0;
  }
  .benefit-card,
  .concept {
    min-height: 57vw;
  }
  .closing-note {
    margin-bottom: 40px;
  }
  .benefit-card .en {
    font-size: 2.4vw;
  }
  .benefit-card h3 {
    font-size: 5vw;
  }
  .closing-lead {
    font-size: 2.8vw;
  }
  .modal-close {
    top: -5vw;
    margin-left: -0.5rem;
  }
}

/*
 * タブレット〜iPad Pro（横持ち 1025px〜1366px 含む）
 * 招待・コンシェルジュはタブ用アセット＋幅100%基準。concept はベースの cover のまま。
 */
@media (min-width: 768px) and (max-width: 1366px) {
  .invitation {
    background-image: url("/event/jcb-class/images/tab_bg_invitation.png");
    background-position: center top;
    background-repeat: no-repeat;
  }
  .benefit-card--concierge {
    background-image: url("/event/jcb-class/images/tab_img_conciergedesk.png");
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .invitation {
    min-height: 60vh;
  }
}

/* iPad Pro 1024px：招待テキストを右に50px余白 */
@media (min-width: 1024px) and (max-width: 1025px) {
  .invitation-txt-wrap {
    margin-right: 50px;
  }
}

/* ========================================
   モバイル用メディアクエリ
   ======================================== */
@media (max-width: 767px) {
  :root {
    --mv-glow-orbit-x: min(180px, 38vw);
    --mv-glow-orbit-y: min(112px, 24vw);
  }
  body,
  .main-content { overflow-x: hidden; }
  .benefit-card { min-height: 35vh; }
  .benefit-card--concierge { background-image: url("/event/jcb-class/images/sp_img_conciergedesk.png"); }
  .benefit-card--gourmet  { background-image: url("/event/jcb-class/images/sp_img_gourmetbenefit.png"); }
  .benefit-card--members  { background-image: url("/event/jcb-class/images/sp_img_menbersselection.png"); }
  .benefit-card--priority { background-image: url("/event/jcb-class/images/sp_img_prioritypass.png"); }
  .benefit-card .en { font-size: 3.3vw; }
  .benefit-card h3 { font-size: 7vw; }
  .concept { min-height: 35vh; }
  /* スマホのみ：見出しの span（読点）と br を表示 */
  .concept .section-title { font-size: 5vw; }
  .concept .section-title span { display: inline; }
  .concept .section-title br { display: block; }
  .concept-card-wrap {
    width: 80%;
    padding: 0;
  }
  .concept-card-wrap::after {
    width: 110px;
    height: 110px;
    margin-left: -55px;
    margin-top: -55px;
  }
  .mv { min-height: 80vh; padding-top: 3rem; padding-bottom: 3rem; }
  .closing-lead { font-size: 3.6vw; padding: 0; }
  .closing-note { padding-bottom: 50px; font-size: 2.8vw; }
  .closing-heading { text-align: center;margin: 0 0 30px;}
  .closing-heading-img { margin-left: auto; margin-right: auto; }
  .invitation {
    background-image: url("/event/jcb-class/images/sp_bg_invitation.png");
    min-height: auto;
    align-items: flex-start;
    padding-bottom: 73vw;
    background-position: top;
        padding-bottom: 78.5vw;
  }
  .invitation-inner { justify-content: center; align-items: flex-start; }
  .invitation-txt-wrap { max-width: 90%; margin-top: 0; padding-top: 0; }
  .invitation-txt-img { max-width: 100%; object-fit: contain; }
  .closing-inner { flex-direction: column; }
  .closing-card { width: 65%; max-width: 320px; margin-left: auto; margin-right: auto; }
  .closing-list li { flex-direction: column; align-items: flex-start; }
  .footer { margin-top: -50px; padding-top: 90px; padding-bottom: 9rem; background-image: url("/event/jcb-class/images/sp_img_footer.png"); }
  .footer .container { padding-left: 0; padding-right: 0; }
  .footer-logo-wrap { padding-top: 2rem; }
  .footer-logo-img { max-width: 140px; }
  .footer-legal { font-size: 0.6rem; }
  .footer-legal br { display: block; }
  /* モーダル×ボタン：狭い画面では枠の上に配置 */
  .modal-close { left: auto; right:-7vw; top: -2rem; margin-left: 0;background: none; }
}

@media (max-width: 480px) {
  :root {
    --space-section: 3rem;
    --space-block: 1.5rem;
    --space-inline: 1.25rem;
  }
  .mv-logo { letter-spacing: 0.1em; font-size: 1.75rem; }
}