/* === Reset Lite (modern, a11y-friendly) === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { padding: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #005fcc; outline-offset: 2px; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }


/* ===== Motion Vars（調整用） ===== */
:root {
  --ease: cubic-bezier(.2,.6,.2,1);
  --lux-duration: 2.2s;   /* フェードイン時間 */
  --fade-distance: 20px;  /* 下からの初期距離 */
}

/* ===== Top（SP=最大750px / PC=最大1440px） ===== */
.hero {
  display: grid;
  place-items: center;
  width: 100%;
  background-color: #FFFAB9; /* ← PCで画像が足りない部分を埋める色 */
}
.hero picture,
.hero img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 750px;   /* SPの最大幅 */
}
@media (min-width: 1024px), (orientation: landscape) {
  .hero picture,
  .hero img {
    max-width: 1500px; /* PC・横向きの最大幅 */
  }
}

/* ===== 背景フル + 中央に1.png ===== */
:root {
  --band-img-sp: 300px; /* SPサイズ */
  --band-img-pc: 300px; /* PCサイズ */
}

.band {
  width: 100%;
  display: grid;
  place-items: center;

  /* --- 1) PNGフォールバック（必ず出る） --- */
  background-color: #fff; /* 任意の下地色 */
  background-image: url(".././images/background-sp.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  /* --- 2) iOS Safari 用 -webkit-image-set --- */
  background-image: -webkit-image-set(
    url(".././images/background-sp.webp") type("image/webp") 1x,
    url(".././images/background-sp.png") type("image/png") 1x
  );

  /* --- 3) 標準 image-set --- */
  background-image: image-set(
    url(".././images/background-sp.webp") type("image/webp") 1x,
    url(".././images/background-sp.png") type("image/png") 1x
  );
}

.band__inner {
  width: 100%;
  display: grid;
  place-items: center;
}

.band__inner img {
  width: 100%;
  max-width: var(--band-img-sp);
  height: auto;
}

@media (min-width: 1024px), (orientation: landscape) {
  .band {
    /* --- 1) PNGフォールバック --- */
    background-image: url(".././images/background-pc.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* --- 2) iOS Safari 用 -webkit-image-set --- */
    background-image: -webkit-image-set(
      url(".././images/background-pc.webp") type("image/webp") 1x,
      url(".././images/background-pc.png") type("image/png") 1x
    );

    /* --- 3) 標準 image-set --- */
    background-image: image-set(
      url(".././images/background-pc.webp") type("image/webp") 1x,
      url(".././images/background-pc.png") type("image/png") 1x
    );
  }

  .band__inner img {
    max-width: var(--band-img-pc);
  }
}



/* ===== 通常セクション（SP=750px / PC・横向き=600px） ===== */
.inner {
  width: 100%;
  margin: 0 auto;
  max-width: 750px; /* デフォルト SP */
}
.inner picture,
.inner img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 1024px), (orientation: landscape) {
  .inner {
    max-width: 600px; /* PC・横向きスマホ共通 */
  }
}

.inner2 {
  width: 100%;
  margin: 0 auto;
  max-width: 750px; /* デフォルト SP */
}
.inner2 picture,
.inner2 img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 1024px), (orientation: landscape) {
  .inner2 {
    max-width: 1000px; /* PC・横向きスマホ共通 */
  }
}

/* ===== 背景色セクション（PC・横向きのみ全幅） ===== */
.bg-yellow,
.bg-pink,
.bg-white,
.bg-mint {
  width: 100%;
}
.bg-mint   { background-color: #DCF9F3; }

@media (min-width: 1024px), (orientation: landscape) {
  .bg-yellow { background-color: #FFFAB9; }
  .bg-pink   { background-color: #FFBEBE; }
  .bg-white  { background-color: #FFFFFF; } /* ホワイト */
  .bg-mint   { background-color: #DCF9F3; } /* ミント系 */
  .bg-beige { background-color: #f5eddc; }
}


/* ===== フッター ===== */
.site-footer {
  margin: 40px auto 0;
  padding: 24px 16px;
  border-top: 1px solid #e6e6e6;
  text-align: center;
  color: #333;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 8px;
}
.footer-nav a {
  color: #333;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}
.copyright {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

/* ===== Intro（テキストレイアウト） ===== */
.intro {
  max-width: 750px;
  margin: 0 auto;
  padding: 48px 20px;
  color: #3A3A3A;
  line-height: 1.9;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
/* 日付 */
.intro h1 {
  text-align: center;
  margin: 0 0 20px;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 600;
  color: #3A3A3A;
}

/* メインキャッチコピー */
.highlight {
  display: block;
  text-align: center;
  font-weight: 800;
  line-height: 1.3;
  margin: 24px 0;
  font-size: clamp(24px, 7vw, 48px); /* スマホで幅いっぱい、PCで最大48px */
  white-space: normal;
}

/* サブコピー（最後の段落）だけ調整 */
.highlight:last-of-type {
  font-weight: 600;
  font-size: clamp(16px, 4.5vw, 24px); /* 少し落として余韻を出す */
  color: #3A3A3A;
}

/* ===== Fade-in (透明→クリア) ===== */
.fadein,
.fadein.lux,
.fadein.lux-list {
  opacity: 0;
  transform: translateY(var(--fade-distance)) scale(.96);
  will-change: opacity, transform;
}

/* .inviewが付与されたら発火 */
.fadein.lux.inview,
.fadein.lux-list.inview {
  animation: luxSimpleFade var(--lux-duration) var(--ease) forwards;
}

/* リスト全体にベールをかけたい場合（不要なら削除） */
.fadein.lux-list {
  background: rgba(255,255,255,.6);
  border-radius: 12px;
  padding: 14px 16px;
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .fadein.lux-list { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* キーフレーム：透明→クリア */
@keyframes luxSimpleFade {
  0%   { opacity: 0; transform: translateY(var(--fade-distance)) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 動きを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
  .fadein, .fadein.lux, .fadein.lux-list {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== CTA（ヘッダー直下の申込みボタン） ===== */
/* ※ bg-yellow がPCのみ色適用のため、
   このセクションに限りスマホでも必ず色が付くように上書き */
   .cta.bg-yellow { background-color: #FFFAB9; }

   .cta {
     width: 100%;
     padding: 28px 16px;        /* 上下余白。お好みで調整 */
   }
   .cta__inner {
     max-width: 600px;          /* 本文幅に合わせる */
     margin: 0 auto;
     display: flex;
     justify-content: center;
   }
   
   /* ===== 最終申込みCTA ===== */
   .final-cta{
     padding: clamp(40px, 8vw, 72px) 16px;
   }
   .final-cta__inner{
     max-width: 760px;
     margin: 0 auto;
     text-align: center;
     color: var(--c-ink, #2b2b2b);
   
     /* 縦並びで中央寄せ（ここで .cta__inner の横並びを上書き） */
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
   }
   .final-cta__catch{
     font-size: clamp(20px, 6vw, 40px);
     font-weight: 800;
     letter-spacing: .02em;
     margin: 0 0 8px;
   }
   .final-cta__sub{
     font-size: clamp(14px, 4.8vw, 18px);
     margin: 0 0 clamp(14px, 4vw, 22px);
     opacity: .92;
   }
   
   /* 画像ボタンのサイズ感（.shiny_btn03 を再利用） */
   .final-cta__btn{
     width: min(92vw, 560px) !important; /* 幅100%指定を上書き */
     max-width: 100%;
     border-radius: 20px;      /* 角丸を少し大きめに */
     overflow: hidden;         /* 角丸適用 */
     display: inline-block;
   }
   
   /* PCでは少し“浮かせる” */
   @media (min-width: 1024px){
     .final-cta__btn{
       box-shadow: 0 18px 48px rgba(0,0,0,.16);
       transition: transform .25s ease, box-shadow .25s ease;
     }
     .final-cta__btn:hover{
       transform: translateY(-2px);
       box-shadow: 0 24px 60px rgba(0,0,0,.20);
     }
   }
   
   /* スマホは幅いっぱいに（フルブリード） */
   @media (max-width: 640px){
     .final-cta{ padding-left: 0; padding-right: 0; }
     .final-cta__inner{ padding: 0 16px; }
     .final-cta__btn{
       width: 100vw !important;
       max-width: none;
       border-radius: 0;
       margin-left: calc(50% - 50vw);
       margin-right: calc(50% - 50vw);
       box-shadow: none;
     }
   }
   
   
   /*-------------------------------------------
  ボタン（レスポンシブ調整）
-------------------------------------------*/
.shiny_btn02 {
  display: inline-block;
  width: 100%;               /* PCで画面幅の半分 */
  padding: 1em 0;           /* 横幅が%管理になるので左右paddingは調整 */
  text-decoration: none;
  border-radius: 50px;
  color: #fff;
  background: linear-gradient(270deg, #06dd3c, #02c032, #06dd3c);
  background-size: 600% 600%;
  border-bottom: solid 4px #00751d;
  position: relative;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  animation: gradientMove 15s ease infinite, pulse 3s ease-in-out infinite;
  overflow: hidden;
  white-space: nowrap;       /* 改行させない */
  margin: 0 auto;            /* 中央寄せ */
}

/* スマホ */
@media screen and (max-width: 480px) {
  .shiny_btn02 {
    width: 80%;              /* スマホでは画面幅の8割 */
    max-width: none;         /* 幅制限解除（スマホ優先） */
    font-size: 1rem;
    padding: 0.8em 0;
  }
}


/* 光のライン（細く縦方向に落ちる） */
.shiny_btn02::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 50%;
  width: 100%; /* ← 細く */
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 80%
  );
  transform: translateX(-50%); /* 中央揃え */
  animation: shine 4s infinite;
}

/* グラデーションがゆっくり動く */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 光が上から下に落ちる */
@keyframes shine {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* 少し膨らむアニメーション */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.shiny_btn02:hover {
  filter: brightness(1.2);
}

/* 画像を“ボタン化”＋背景/光アニメを重ねる */
.shiny_btn03 {
  display: inline-block;
  width: 100%;
  max-width: 400px;           /* PCでの最大幅 */
  padding: 0;                 /* 画像をそのまま表示 */
  text-decoration: none;
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  background-size: 600% 600%;
  border-bottom: solid 4px #00751d;
  animation: gradientMove 15s ease infinite, pulse 3s ease-in-out infinite;
}

.shiny_btn03 .cta-image {
  display: block;
  width: 100%;
  height: auto;
}

/* 画像の上を走る“光の帯” */
.shiny_btn03::before {
  content: "";
  position: absolute;
  top: -120%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translateX(-50%) rotate(20deg); /* 斜めに走らせて強調 */
  background: linear-gradient(
    0deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 80%
  );
  animation: shine 3.8s infinite;
  pointer-events: none;       /* クリックを邪魔しない */
  mix-blend-mode: screen;     /* 画像の緑に自然にハイライトを重ねる */
}

/* ホバー時：少し明るく＆拡大感を強める */
.shiny_btn03:hover {
  filter: brightness(1.08);
}
.shiny_btn03:hover .cta-image {
  transform: translateZ(0);   /* レンダリング最適化の小技 */
}

/* スマホ */
@media screen and (max-width: 480px) {
  .shiny_btn03 { max-width: 90%; }
}

/* 既存アニメを流用/調整 */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shine {
  0%   { top: -120%; }
  100% { top: 120%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}




.sp-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

/*　カーテン演出　 */
/* === Curtain (once) === */
/* 時間の合成（文字表示の遅延 = 開き始めの遅延 + 開く時間） */
:root{
  --curtain-color:#940C04;
  --curtain-speed:1.1s;
  --curtain-delay:.35s;
  --curtain-ease:cubic-bezier(.2,.6,.2,1);
  --curtain-content-delay: calc(var(--curtain-delay) + var(--curtain-speed) * .45);
}

/* カーテンを前面に、本文は背面に（重なり順の修正） */
.curtain__inner{
  position: relative;
  z-index: 1;            /* ← 低めに */
}

.curtain-section::before,
.curtain-section::after{
  z-index: 10;           /* ← カーテンを最前面に */
}

/* カーテン閉時は本文を非表示、開いたら遅れてフェードイン */
.curtain-section:not(.open) .curtain__inner{
  opacity: 0;
}

.curtain-section.open .curtain__inner{
  opacity: 1;
  transition: opacity .45s var(--curtain-ease) var(--curtain-content-delay);
  /* 開ききったタイミング（delay + speed）でふわっと表示 */
}

/* 動きを減らす設定のときは常に表示 */
@media (prefers-reduced-motion: reduce){
  .curtain-section:not(.open) .curtain__inner{
    opacity: 1 !important;
    transition: none !important;
  }
}

.curtain-section{
  position: relative;
  overflow: hidden;          /* 擬似要素がはみ出さない */
  min-height: 52vh;          /* ほどよい高さ。必要に応じて調整 */
  display: grid;
  place-items: center;
  background: #fff;          /* 背景は任意で変更可 */
}

/* 中身（上に載せる） */
.curtain__inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(40px, 8vw, 100px) 20px;
}

/* 左右カーテン：初期は閉じている */
.curtain-section::before,
.curtain-section::after{
  content:"";
  position:absolute;
  top:0;
  width:50%;
  height:100%;
  background: var(--curtain-color);
  z-index: 1;
  transition: width var(--curtain-speed) var(--curtain-ease) var(--curtain-delay),
              visibility 0s linear calc(var(--curtain-speed) + var(--curtain-delay));
}
.curtain-section::before{ left:0; }
.curtain-section::after { right:0; }

/* open で一度だけ開く（閉じない） */
.curtain-section.open::before,
.curtain-section.open::after{
  width:0;
  visibility:hidden; /* クリック遮り防止 */
}

/* モーションを減らす設定 */
@media (prefers-reduced-motion: reduce){
  .curtain-section::before,
  .curtain-section::after{
    transition: none !important;
    width:0 !important;
    visibility:hidden !important;
  }
}

.curtain-section.bg-white {
  background: #fff;
  padding: 48px 20px;
}

.curtain__inner {
  max-width: 750px;
  margin: 0 auto;
  text-align: left;
  color: #222;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

.curtain__inner h2 {
  font-size: clamp(22px, 6vw, 36px);
  font-weight: 700;
  margin-bottom: 12px;
  text-align: center;
}

.curtain__inner p {
  margin: 14px 0;
  font-size: clamp(15px, 4.5vw, 18px);
}

.curtain__inner .highlight {
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 700;
  margin: 24px 0;
  text-align: center;
  line-height: 1.4;
}

/* ▼ もう順番フェードは使わないので、seq-itemの初期隠しを解除 */
#bp-hero .seq-item{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ▼ ハイライトの文字は“後から”出す（親<p>は表示のまま） */
#bp-hero .seq-pulse{
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0; /* アニメ開始まで隠すのは子spanだけ */
}

/* ズームドロップ（上から大きく → 収束して着地） */
#bp-hero .seq-pulse.zoomdrop{ animation: bpZoomDrop 1.1s … 0s both; }
@keyframes bpZoomDrop{ … 100% { opacity: 1; } }



  /* =========================
   shelikes風 カラーテーマ適用（追記用）
   ※ 既存CSSはそのままでOK。色だけ置き換えます。
   ========================= */
   :root{
    /* パレット */
    --c-bg:#FFF7F5;       /* ベース：淡ピンクベージュ */
    --c-blush:#F7E3E1;    /* ブランシュピンク（黄の代わり） */
    --c-mint:#DDEFEA;     /* ミントニュアンス */
    --c-sand:#EDE6DE;     /* サンド/グレージュ（必要なら使う） */
    --c-ink:#3A3A3A;      /* 本文テキスト */
    --c-accent:#73B2A4;   /* アクセント：青緑 */
    --c-accent-2:#C98E7E; /* 差し色：くすみテラコッタ */
  }
  /* 全体文字色＆背景のトーン */
  body{ background: var(--c-bg); color: var(--c-ink); }
  
  /* ヒーロー下地（PCで画像が足りない端の色） */
  .hero{ background-color: var(--c-blush); }
  
  /* 既存の bg-* をニュアンスカラーに置き換え */
  .bg-mint   { background-color: var(--c-mint) !important; }
  .bg-yellow { background-color: var(--c-blush) !important; } /* “黄”を淡ピンクに */
  .bg-pink   { background-color: var(--c-blush) !important; } /* 同系統で統一 */
  .bg-white  { background-color: #fff !important; }
  /* 追加したいとき用：.bg-sand { background: var(--c-sand) !important; } */

  .bg-mint-s {
    position: relative;
    background: #DCF9F3; /* ミント背景 */
    clip-path: polygon(
      0 5%,     /* 左上 少し下げる */
      100% 0,   /* 右上 */
      100% 95%, /* 右下 少し上げる */
      0 100%    /* 左下 */
    );
  }
  

  
  /* フッターの色味を全体と揃える */
  .site-footer{
    border-top-color: rgba(0,0,0,.08);
    color: var(--c-ink);
  }
  .footer-nav a{ color: var(--c-ink); }
  
  /* CTAボタンのグラデを上品トーンへ（緑→ニュアンス） */
  .shiny_btn02{
    background: linear-gradient(270deg, var(--c-accent), var(--c-accent-2), var(--c-accent));
    background-size: 400% 400%;
    border-bottom-color: rgba(0,0,0,.12);
  }
  .shiny_btn02:hover{ filter: brightness(1.08); }
  
  /* 画像ボタン版も同トーンへ */
  .shiny_btn03{
    background-size: 400% 400%;
    border-bottom-color: rgba(0,0,0,.12);
  }
  
  /* カーテンセクションの文字色も統一（必要なら） */
  .curtain__inner{ color: var(--c-ink); }
/* shelikesトーンで全カーテンの色を上書き（サイト全体） */
.curtain-section{
  --curtain-color: var(--c-accent-2); /* = FFF7F5（くすみテラコッタ） */
}
  
/* カーテン色を淡いピンクに変更 */
.curtain-section {
  --curtain-color: #FDE2E4; /* 好みに合わせて色コード調整 */
}

/* ===== 背景設定 ===== */
/* セクション背景：淡いピンク */
.guest-section.pink {
  width: 100%;
  min-height: 100vh;
  background-color: #ffeef5; /* 淡いピンク */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
}

/* 見出しエリア */
.guest-heading {
  margin: 80px 0 50px;
  color: #7a3e3e; /* ピンクに合うブラウン系 */
  text-shadow: 0 2px 6px rgba(255,255,255,0.6);
  text-align: center;
}

.guest-heading h2 {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

.guest-heading p {
  display: inline-block;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;       /* 改行禁止 */
  font-size: min(6vw, 56px); /* 画面幅に応じて縮小 */
  line-height: 1.2;
}

/* ゲスト画像：常に縦並び */
/* スマホ：縦中央配置 */
.guest-container{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center; /* 中央寄せ */
}

/* 各画像は中央 */
.guest img{
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  background-color: #FFF7F5; /* 背景色に馴染ませる */
  border-radius: 20px;       /* 角を丸く */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* 影で浮き上がらせる */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* ===== PC時の寄せ方を変更 ===== */
@media (min-width: 1024px) {
  .guest-container{
    align-items: stretch; /* stretch に戻す（左右寄せ可能に） */
  }

  .guest{
    display: flex;
    width: 100%;
  }

  /* 上画像は左寄せ */
  .guest:first-child{
    justify-content: flex-start;
  }

  /* 下画像は右寄せ */
  .guest:last-child{
    justify-content: flex-end;
  }

  .guest img{
    max-width: 800px; /* PCではちょっと絞るとバランス◎ */
  }
}
/* 画像の上に置くインパクト文章 */
.guest-intro{
  width: 100%;
  max-width: 800px;           /* 画像と同じ上限幅 */
  margin-bottom: 18px;        /* 画像との間隔 */
  padding: 16px 18px;
  color: #2b2b2b;
  line-height: 1.8;
  text-align: center;         /* スマホは中央 */
  font-weight: 600;
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  backdrop-filter: blur(2px); /* 対応ブラウザで上品に */
}

.guest-intro p{ margin: 0; }
.guest-intro .em{
  font-weight: 800;
  color: #7a3e3e;             /* 見出しとトーンを合わせる */
}

/* 既存：各画像スタイル（そのままでOK）
   .guest img { ... } は元のまま活かしてください */

/* ===== PC時の寄せ方（縦積みのまま、左右寄せだけ制御） ===== */
@media (min-width: 1024px) {

  /* ここを“列方向”に固定しておくのが崩れないコツ */
  .guest{
    display: flex;
    flex-direction: column;   /* ← 重要：縦積み固定（文章→画像） */
    width: 100%;
  }

  /* 上（1枚目）ブロックは左寄せに */
  .guest:first-child{
    align-items: flex-start;  /* ← 左寄せ */
  }
  .guest:first-child .guest-intro{
    text-align: left;
  }

  /* 下（2枚目）ブロックは右寄せに */
  .guest:last-child{
    align-items: flex-end;    /* ← 右寄せ */
  }
  .guest:last-child .guest-intro{
    text-align: right;
  }

  /* PC表示時だけフォントサイズを大きくする */
@media (min-width: 1024px) {
  .guest-intro {
    font-size: 18px;   /* 好みで調整（例: 20〜22px） */
    line-height: 1.9;  /* 余白を広めにして読みやすく */
  }

  .guest-intro .em {
    font-size: 22px;   /* 強調部分はさらに大きめ */
  }
}

@media (min-width: 1024px) {
  /* 奇数番目（1,3,5…）は左寄せ */
  .guest:nth-child(odd){
    align-items: flex-start;
  }

  /* 偶数番目（2,4…）は右寄せ */
  .guest:nth-child(even){
    align-items: flex-end;
  }
} 
}


/* 共通 */
.guest-heading-img{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 6vw, 56px) 16px;
}
.guest-heading-img img{
  display: block;
  width: min(92vw, 1000px); /* PCで広がりすぎない */
  height: auto;
}

/* PC：角丸＋浮いた感じ */
@media (min-width: 1024px){
  .guest-heading-img img{
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
  }
}

/* スマホ：幅いっぱい（フルブリード）＆角丸/影ナシ */
@media (max-width: 640px){
  .guest-heading-img{ padding: 0; } /* 余白を除去して端まで広げる */
  .guest-heading-img img{
    width: 100vw;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    /* ビューポート端まで出すテクニック（親の左右paddingを無視） */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}




/* === Impact Section === */
.impact-section {
  background: #ffe6ec; /* 淡いピンク */
  padding: clamp(80px, 12vw, 0px) 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.impact__inner {
  max-width: 900px;
  margin: 0 auto;
  color: #2b2b2b;
  line-height: 1.8;
}

.impact__inner h2 {
  font-size: clamp(18px, 5vw, 36px);
  font-weight: 600;
  margin-bottom: 24px;
  white-space: nowrap;   /* 強制的に1行 */
}

.impact__inner .highlight {
  font-size: clamp(20px, 6vw, 56px); /* 可変で縮む */
  font-weight: 800;
  color: #c2185b;
  margin: 20px 0 40px;
  white-space: nowrap;   /* 強制的に1行 */
}

.impact__inner p {
  font-size: clamp(16px, 4.2vw, 22px);
  margin: 14px 0;
}

/* === Why Now (直前インパクトセクション) === */
/* === Why Now (直前インパクトセクション) === */
.why-now {
  background: #ffe6ec; /* 淡いピンク（背景帯） */
  padding: clamp(72px, 12vw, 160px) 20px;
  text-align: center;
}
.why-now__inner {
  max-width: 750px;       /* 既存と馴染む幅。もっと広くしたければ 900px などに */
  margin: 0 auto;
  color: #2b2b2b;
  line-height: 1.9;
}

/* 大きく強い見出し */
.why-now__title {
  font-size: clamp(20px, 6vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 20px;
  color: #c2185b;
}

/* リード群：1行ずつしっかり大きく */
.why-now__lead {
  font-size: clamp(18px, 5vw, 28px);
  margin: 12px 0;
}
.why-now__lead .em {
  color: #c2185b;           /* 目を引く濃ピンク */
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 小見出し */
.why-now__sub {
  font-size: clamp(18px, 4.8vw, 26px);
  font-weight: 700;
  margin: clamp(28px, 6vw, 48px) 0 14px;
}

/* チェックリスト（カード風） */
.why-now__checks {
  display: grid;
  gap: 12px;
  text-align: left;
  background: rgba(255,255,255,.65);
  border-radius: 14px;
  padding: clamp(14px, 4vw, 20px);
  /* 既存の .lux-list のぼかしが効く環境で半透明ベール */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.why-now__checks li {
  position: relative;
  padding: 12px 12px 12px 40px;
  font-size: clamp(15px, 4.4vw, 18px);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.why-now__checks li::before {
  content: "✔";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: #2e7d32; /* 深いグリーンで肯定感 */
}

/* 実績・保証ブロック */
.why-now__proof {
  margin: clamp(28px, 7vw, 56px) auto 0;
  padding: clamp(16px, 4.5vw, 24px);
  background: #ffffff;         /* 白ベース */
  border: 2px solid #f3d6df;   /* 薄ピンクで縁取り */
  border-radius: 14px;
  text-align: left;
}
.why-now__proof h4 {
  font-size: clamp(18px, 4.8vw, 24px);
  margin: 0 0 8px;
  font-weight: 800;
}
.why-now__proof p {
  font-size: clamp(15px, 4.2vw, 18px);
}

/* PCで少し整列をタイトに */
@media (min-width: 1024px) {
  .why-now__checks {
    grid-template-columns: 1fr 1fr; /* 2列カード */
  }
}
/* Why Now セクション内の fadein を無効化（常に表示） */
.why-now .fadein,
.why-now .fadein.lux,
.why-now .fadein.lux-list{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}


/* === Event Detail Section === */
.event-detail {
  background: #fff;
  padding: clamp(72px, 12vw, 140px) 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.event-detail__inner {
  max-width: 850px;
  margin: 0 auto;
  color: #222;
  line-height: 1.9;
}

/* タイトル */
.event-detail__title {
  font-size: clamp(22px, 6vw, 42px);
  font-weight: 800;
  margin-bottom: 32px;
  color: #c2185b;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* リスト部分 */
.event-detail__list {
  text-align: left;
  margin: 0 auto 48px;
  padding: 0;
  list-style: none;
  font-size: clamp(16px, 4.5vw, 20px);
  background: #fff7f5;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.event-detail__list li {
  margin: 14px 0;
  line-height: 1.6;
}
.event-detail__list .icon {
  margin-right: 6px;
}

/* メッセージ部分 */
.event-detail__message {
  margin-top: 40px;
  font-size: clamp(16px, 4.5vw, 20px);
  color: #333;
}
.event-detail__message strong {
  color: #c2185b;
  font-weight: 800;
}

.event-detail__message .catch {
  margin: 40px 0 20px;
  font-size: clamp(20px, 6vw, 32px);
  font-weight: 800;
  color: #c2185b;
}

/* 2カラム用コンテナ */
.two-column {
  display: flex;
  flex-direction: column; /* デフォは縦並び（スマホ用） */
  gap: 20px;
  margin-top: 40px; /* villanti との間隔 */
  padding-bottom: 80px;
}

/* PCでは横並び */
@media (min-width: 768px) {
  .two-column {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
  .two-column picture {
    flex: 1;
    max-width: 50%;
  }
}
body {
  font-family: "游ゴシック体", "Yu Gothic", "游ゴシック", "YuGothic",
               "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
               "Meiryo", sans-serif;
}

:root{
  --ink:#fff;      /* 文字色（白） */
  --bg:#000;       /* 背景（黒）   */
  --maxw:1100px;   /* イントロ最大幅 */
}

/* オーバーレイ本体（既存 #intro とは別ID） */
#intro-pen{
  position:fixed; inset:0; background:var(--bg); color:var(--ink);
  display:grid; place-items:center; z-index:9999;
  transition:opacity .7s ease; overflow:hidden;
}
#intro-pen.fade-out{ opacity:0; pointer-events:none; }

#intro-pen .intro-wrap{ width:min(92vw,var(--maxw)); }
#Mysvg-pen{ width:100%; height:auto; display:block; }
#Mysvg-pen path{
  fill:none; stroke:currentColor; stroke-width:3; /* ペン太さ 2〜3 が目安 */
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-miterlimit:2;
}

/* スマホ（幅600px以下）だけ細く */
@media (max-width: 600px) {
  #Mysvg-pen path {
    stroke-width: 2; /* スマホ用に細め */
  }
}


/* ====== Highlight（Book & Pen の1行だけ）====== */
/* ===== bp-hero 専用：順番フェード ===== */

/* ズームドロップ（上から大きく → 収束して着地） */
#bp-hero .seq-pulse{
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  opacity: 0; /* 開始まで非表示 */
}
#bp-hero .seq-pulse.zoomdrop{
  animation: bpZoomDrop 1.1s cubic-bezier(.2,.7,.2,1) 0s both; /* both=最終状態保持 */
}
@keyframes bpZoomDrop{
  0%   { opacity: 0; transform: translateY(-40vh) scale(2.2); }
  55%  { opacity: 1; transform: translateY(0)     scale(0.96); }
  80%  { opacity: 1; transform: translateY(0)     scale(1.03); }
  100% { opacity: 1; transform: translateY(0)     scale(1.00); } /* ★ここが重要 */
}



#bp-hero .seq-item{
  opacity: 0;
  transform: translateY(10px);
}

/* 合図（.seq-start）が来たら、上から順にフェードイン */
#bp-hero .curtain__inner.seq-start .seq-item{
  animation: bpFadeInUp var(--fade-dur, 0.9s) cubic-bezier(.2,.7,.2,1) var(--delay, 0s) forwards !important;
}

@keyframes bpFadeInUp{
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

/* ===== ハイライトの“もう一度ふわっ”は子 span だけに適用（opacityは触らない） ===== */
#bp-hero .seq-pulse{
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#bp-hero .seq-pulse.pulsing{
  animation: bpPulse 1.1s cubic-bezier(.2,.7,.2,1) 0s both;
}

@keyframes bpPulse{
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); } /* 強くしたい時は 1.08〜1.10 */
  100% { transform: scale(1); }
}

/* モバイル改行 */
.sp-only{ display:none; }
@media (max-width: 640px){ .sp-only{ display:inline; } }

/* 動きを控える設定 */
@media (prefers-reduced-motion: reduce){
  #bp-hero .seq-item{ opacity:1 !important; transform:none !important; animation:none !important; }
  #bp-hero .seq-pulse.pulsing{ animation:none !important; }
}

/* 公式LINE CTAセクション */
.line-cta{
  width: 100%;
  background: var(--c-mint, #DDEFEA); /* 既存トーンがあればそれを使用 */
  padding: clamp(48px, 10vw, 96px) 20px;
}
.line-cta__inner{
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  color: var(--c-ink, #2b2b2b);
  line-height: 1.9;
}
.line-cta__title{
  font-size: clamp(20px, 5.2vw, 36px);
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--c-accent-2, #C98E7E);
}
.line-cta__lead{
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 700;
  margin: 6px 0 2px;
}
.line-cta__sub{
  font-size: clamp(14px, 4.2vw, 18px);
  opacity: .92;
  margin: 0 0 clamp(18px, 4vw, 26px);
}

/* 画像ボタン（既存の .shiny_btn03 を再利用） */
.line-cta__btn{
  display: inline-block;
  width: min(92vw, 520px);
  border-radius: 18px;     /* 既存の .shiny_btn03 の角丸を少しマイルドに */
  overflow: hidden;        /* 角丸を適用 */
}

/* PCは少し浮かせる */
@media (min-width: 1024px){
  .line-cta__btn{
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .line-cta__btn:hover{

  }
}


/* SP=フルブリード、PC=中央寄せ 最大幅 */
.hero-band{
  --hero-max: 1400px; /* PC時の最大幅は好みで */
  width: 100%;
}
.hero-band__media,
.hero-band__media img{ display:block; width:100%; height:auto; }

/* スマホ：画面端まで（親のpadding無視） */
@media (max-width: 767px){
  .hero-band__media{
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* PC：中央に、最大幅で */
@media (min-width: 768px){
  .hero-band__media{
    width: min(100%, var(--hero-max));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== 申込みページ Section ========== */
/* ========== Pricing Section ========== */
/* ===== base reset (必要最小限) ===== */
/* ===== Reset (minimal) ===== */
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{text-decoration:none}

/* ===== Theme ===== */
:root{
  --ink:#2b2b2b;
  --muted:#666;
  --line:#e9e9e9;
  --accent:#ff4081;      /* 早割・通常 CTA */
  --accent-deep:#c2185b; /* 応援席 CTA・装飾 */
  --premium:#ff9800;     /* 特別体験 CTA・装飾 */
  --bg:#fff;
  --card:#fff;
  --radius:16px;
  --shadow:0 3px 12px rgba(0,0,0,.06);
  --shadow-strong:0 10px 28px rgba(0,0,0,.12);
}

/* ===== Layout ===== */
.pricing{
  background:var(--bg);
  padding:clamp(56px,8vw,112px) 20px;
  text-align:center;
}
.pricing__inner{max-width:800px;margin:0 auto}
.pricing__title{
  font-size:clamp(20px,4vw,32px);
  font-weight:800; color:var(--ink);
  margin-bottom:36px;
}
.pricing__grid{
  display:grid; gap:24px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .pricing__grid{ grid-template-columns:1fr 1fr; }
}
.pricing__note{
  margin-top:22px; color:var(--muted);
}
.pricing__note a{
  color:var(--accent-deep);
  text-decoration:underline; text-underline-offset:.2em;
}

/* ===== Card ===== */
.plan{
  position:relative;
  background:var(--card);
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:28px;                         /* 余白拡大 */
  text-align:left;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* リボン：本文と重ならないよう、上に逃がす＋上余白を確保 */
.plan[data-ribbon]{ padding-top:54px; }
.plan[data-ribbon]::before{
  content:attr(data-ribbon);
  position:absolute; top:-12px; left:16px;    /* 枠外に浮かせる */
  background:#999; color:#fff;
  font-weight:800; font-size:13px;
  padding:6px 12px;
  border-radius:10px;
  z-index:1;
}

/* Hover */
.plan:hover{ transform:translateY(-2px); box-shadow:var(--shadow-strong); }

/* Variants */
.plan--featured{ border-color:var(--accent); } /* 早割 */
.plan--highlight{
  border-color:var(--accent-deep);
  background: linear-gradient(180deg,#fff7fb 0%,#fff0f5 100%);
  box-shadow: 0 8px 22px rgba(194,24,91,.12);
}
.plan--premium{
  /* ゴールド風の縁取り（グラデの二重枠） */
  border: 2px solid transparent;
  background:
    linear-gradient(#fffdf7,#fff7e9) padding-box,
    linear-gradient(135deg,#ffd37a,#ffb84d) border-box;
  box-shadow: 0 10px 26px rgba(255,152,0,.18);
}
/* リボン色をプラン別に */
.plan--featured[data-ribbon]::before{ background:var(--accent); }
.plan--highlight[data-ribbon]::before{ background:var(--accent-deep); }
.plan--premium[data-ribbon]::before{ background:var(--premium); }

/* Texts */
.plan__title{
  font-size:clamp(16px,2.2vw,20px);
  font-weight:800; color:var(--ink);
  letter-spacing:.01em;
}
.plan__desc{ font-size:14px; line-height:1.8; color:var(--ink); }
.plan__list{ font-size:14px; line-height:1.9; margin-top:4px; }
.plan__list li{
  position:relative; padding-left:22px; margin:5px 0;
}
.plan__list li::before{
  content:"✔"; position:absolute; left:0; top:.2em;
  color:#2e7d32; font-weight:800;
}

/* CTA */
.btn{
  display:inline-block; width:100%; text-align:center;
  font-size:15px; font-weight:800; color:#fff;
  background:var(--accent);
  padding:14px 16px; border-radius:12px;
  box-shadow:0 2px 0 rgba(0,0,0,.06);
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(.97) }
.btn:focus-visible{ outline:3px solid rgba(233,64,129,.35); outline-offset:2px; border-radius:12px; }

/* CTA variants */
.btn--accent{
  background: linear-gradient(180deg,#d63a77,#c2185b);
  box-shadow:0 6px 14px rgba(194,24,91,.22);
}
.btn--premium{
  background: linear-gradient(180deg,#ffad33,#ff9800);
  box-shadow:0 6px 14px rgba(255,152,0,.22);
}

/* SOLD OUT（.plan に is-soldout を付与） */
.plan.is-soldout{ opacity:.55; filter: grayscale(.05); }
.plan.is-soldout::after{
  content:"SOLD OUT";
  position:absolute; right:12px; bottom:12px;
  background:#555; color:#fff; font-size:12px; font-weight:800;
  padding:6px 10px; border-radius:8px;
}
.plan.is-soldout .btn{
  pointer-events:none; background:#bdbdbd; box-shadow:none; cursor:not-allowed;
}
/* ペア割（3列目）：落ち着いたティール系で差別化 */
:root{
  --pair:#26a69a; /* teal */
}

.plan--pair{
  border-color: var(--pair);
  background: linear-gradient(180deg,#f0fbfa 0%, #e9f7f5 100%);
  box-shadow: 0 8px 22px rgba(38,166,154,.14);
}
.plan--pair[data-ribbon]::before{ background: var(--pair); }

.btn--pair{
  background: var(--pair);
}
.btn--pair:hover{
  filter: brightness(.97);
  transform: translateY(-1px);
}

/* オンライン席（配信カラー：ブルー系） */
:root{
  --online:#1e88e5; /* 追加：オンラインのキーカラー */
}
.plan--online{ border-color: var(--online); background: linear-gradient(180deg,#f3f9ff 0%,#eaf4ff 100%); }
.plan--online[data-ribbon]::before{ background: var(--online); }
.btn--online{ background: var(--online); }
.btn--online:hover{ filter: brightness(.97); transform: translateY(-1px); }



/* ========== 申込みページ Section ========== */
/* ========== Pricing Section ========== */