/*
Theme Name: Mytheme
Author: 松山
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&family=Cormorant+Garamond:ital@1&display=swap');

/* =========================
   BASE
========================= */
* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #e6e6ff;
  background:
    radial-gradient(circle at top, rgba(0,0,0,0.45), rgba(0,0,0,0.94)),
    url("images/TOP3.png") center / cover fixed no-repeat;
}

/* =========================
   HEADER
========================= */
.site-header {
  position: relative;
  padding: 24px 20px;
  text-align: center;
  z-index: 9999;
}

.logo-float {
  width: 460px;
  max-width: 80vw;
  margin: 0 auto;
}

/* =========================
   MENU（満月ハンバーガー統合版）
========================= */
.menu-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: radial-gradient(circle at top, #fff5c8, #ffd87a 60%, #f0c75e);
  box-shadow:
    0 0 18px rgba(255,216,122,0.9),
    0 0 40px rgba(255,216,122,0.5);

  transition: all 0.6s ease;
  z-index: 10020;
}

/* 三本線 */
.menu-icon span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: #2b2b2b;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: all 0.5s ease;
}
.menu-icon span:nth-child(1) { top: 18px; }
.menu-icon span:nth-child(2) { top: 25px; }
.menu-icon span:nth-child(3) { top: 32px; }

/* 開いたとき：発光＆× */
body.menu-open .menu-icon {
  box-shadow:
    0 0 18px rgba(255,230,160,0.9),
    0 0 48px rgba(255,210,120,0.6);
}
body.menu-open .menu-icon span:nth-child(1) {
  top: 25px;
  transform: translateX(-50%) rotate(45deg);
}
body.menu-open .menu-icon span:nth-child(2) { opacity: 0; }
body.menu-open .menu-icon span:nth-child(3) {
  top: 25px;
  transform: translateX(-50%) rotate(-45deg);
}

/* メニュー本体 */
.menu-content {
  position: fixed;
  top: 90px;
  right: 20px;
  width: 260px;
  padding: 24px;
  border-radius: 20px;

  background: radial-gradient(
    circle at top right,
    rgba(255,230,160,0.18),
    rgba(20,20,40,0.96) 60%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    0 0 40px rgba(255,216,122,0.25),
    0 20px 60px rgba(0,0,0,0.8);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;

  z-index: 10010;
}
body.menu-open .menu-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 10000;
}
body.menu-open .overlay {
  opacity: 1;
  visibility: visible;
}

/* nav menu structure */
.menu-content ul { list-style: none; margin: 0; padding: 0; }
.menu-content li { margin: 0; padding: 0; }

/* メニュー文字 */
.menu-content a {
  text-decoration: none;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: rgba(230,225,255,0.8);
  display: block;
  margin: 0;
  line-height: 1.4;
  padding: 18px 0 8px;
  pointer-events: auto;
}

.menu-content a:hover {
  color: #ffffff;
  letter-spacing: 0.16em;
  text-shadow:
    0 0 6px rgba(210,190,255,0.6),
    0 0 18px rgba(160,140,255,0.4);
}

.menu-content .current-menu-item > a,
.menu-content .current-menu-ancestor > a {
  color: #ffd87a;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 6px rgba(255,216,122,0.7),
    0 0 16px rgba(255,216,122,0.45);
}

/* ふわっと順番に出る（ul > li の構造に合わせる） */
.menu-content .menu-list { list-style: none; margin: 0; padding: 0; }
.menu-content .menu-list > li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.menu-open .menu-content .menu-list > li { opacity: 1; transform: translateY(0); }
body.menu-open .menu-content .menu-list > li:nth-child(1) { transition-delay: 0.10s; }
body.menu-open .menu-content .menu-list > li:nth-child(2) { transition-delay: 0.18s; }
body.menu-open .menu-content .menu-list > li:nth-child(3) { transition-delay: 0.26s; }
body.menu-open .menu-content .menu-list > li:nth-child(4) { transition-delay: 0.34s; }
body.menu-open .menu-content .menu-list > li:nth-child(5) { transition-delay: 0.42s; }
body.menu-open .menu-content .menu-list > li:nth-child(6) { transition-delay: 0.50s; }

/* STAR FALL EFFECT */
.menu-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 10%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, rgba(200,220,255,0.9), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(180,200,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,230,180,0.9), transparent);
  opacity: 0;
  transform: translateY(-20px);
}
body.menu-open .menu-content::before { animation: star-fall 1.6s ease-out forwards; }

@keyframes star-fall {
  0% { opacity: 0; transform: translateY(-30px); }
  40% { opacity: 1; }
  100% { opacity: 0.6; transform: translateY(0); }
}

/* =========================
   SLIDER FRAME
========================= */
.slider-frame {
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 36px 32px;
  background: rgba(10,10,20,0.92);
  border-radius: 28px;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.85),
    inset 0 0 40px rgba(255,255,255,0.03);
}

/* SWIPER */
.slider-frame .swiper {
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.slider-frame .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition-timing-function: linear !important;
}
.slider-frame .swiper-slide {
  width: 420px !important;
  flex-shrink: 0 !important;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.slider-frame .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   CONCEPT / EFFECT
========================= */
.effect-card-section {
  max-width: 1200px;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}

.effect-title {
  font-size: 3.1rem;
  line-height: 1.8;
  margin-bottom: 28px;
  color: #e6ddff;
  text-shadow:
    0 0 8px rgba(210,180,255,0.7),
    0 0 24px rgba(190,150,255,0.5),
    0 0 48px rgba(120,180,255,0.3);
}

.effect-title span {
  display: block;
  margin-top: 6px;
  font-size: 1.5rem;
  color: #cfd8ff;
  opacity: 0.9;
}

/* 説明文 */
.concept-lead p {
  font-size: 0.95rem;
  line-height: 2.2;
  color: #cfe4ff;
}

/* 強調行 */
.concept-lead .highlight-line {
  display: inline-block;
  margin-top: 28px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffe6a8;
  text-shadow:
    0 0 10px rgba(255,220,160,0.9),
    0 0 28px rgba(255,200,120,0.7),
    0 0 60px rgba(255,180,90,0.45);
}

/* =========================
   CARD GRID
========================= */
.effect-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}
.effect-card:nth-child(1),
.effect-card:nth-child(2) { grid-column: span 6; }

.effect-card:nth-child(3),
.effect-card:nth-child(4),
.effect-card:nth-child(5) { grid-column: span 4; }

.effect-card {
  background: linear-gradient(180deg, rgba(20,20,40,0.92), rgba(10,10,20,0.92));
  border-radius: 28px;
  padding: 40px 34px;
  border: 1px solid rgba(180,160,255,0.18);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.85),
    inset 0 0 30px rgba(255,255,255,0.04);
}
.effect-card h3 {
  font-size: 2.2rem;
  margin-bottom: 18px;
  color: #f2ecff;
  text-shadow:
    0 0 10px rgba(200,180,255,0.85),
    0 0 30px rgba(180,150,255,0.6);
}
.effect-card p {
  font-size: 1.2rem;
  line-height: 2;
  color: #dbe6ff;
}

/* =========================
   RESERVE CTA
========================= */
.reserve-cta-section {
  max-width: 900px;
  margin: 120px auto 100px;
  padding: 72px 44px;
  text-align: center;
  background: radial-gradient(circle at top, rgba(70,90,160,0.28), rgba(10,10,20,0.94) 70%);
  border-radius: 38px;
  box-shadow:
    0 45px 140px rgba(0,0,0,0.9),
    inset 0 0 70px rgba(180,200,255,0.1);
}

.reserve-message {
  font-size: 1.05rem;
  line-height: 2.4;
  color: #e6ecff;
  margin-bottom: 46px;
  text-shadow:
    0 0 10px rgba(180,200,255,0.4),
    0 0 26px rgba(120,160,255,0.3);
}

.reserve-button {
  display: inline-block;
  padding: 22px 76px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7d4, #ffd87a);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow:
    0 0 40px rgba(255,216,122,0.7),
    0 0 110px rgba(255,216,122,0.45);
  transition: all 0.4s ease;
}

.reserve-button:hover {
  transform: translateY(-4px);
  box-shadow:
    0 0 60px rgba(255,216,122,1),
    0 0 160px rgba(255,216,122,0.75);
}

.reserve-note {
  display: block;
  margin-top: 22px;
  font-size: 0.8rem;
  color: #cfd8ff;
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(150,180,255,0.35);
}

/* =========================
   SNS / QR ICONS（全ページ共通）
   - .reserve-icons（TOP等）
   - .qr-wrap（お知らせ/各固定ページ等）
   すべて「3つ横並び」に統一
========================= */

.reserve-icons,
.qr-wrap {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;

  justify-items: center;
  align-items: start;

  /* 3枚が綺麗に入る幅 */
  max-width: 420px;
  margin: 32px auto 0 !important;

  padding: 0 14px;
}

/* 「3つ目だけ横に伸びる」系の span 指定を潰す */
.reserve-icons > *,
.qr-wrap > * {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ul > li 構造にも対応 */
.qr-wrap li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード（a が直下 / li の中 / div の中 どれでもOK） */
.reserve-icons > a,
.qr-wrap > a,
.qr-wrap > li > a,
.qr-wrap > div > a {
  width: 100% !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 16px 12px;
  border-radius: 22px;
  background: #ffffff;
  text-decoration: none;

  box-shadow: 0 20px 55px rgba(0,0,0,0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.reserve-icons > a:hover,
.qr-wrap > a:hover,
.qr-wrap > li > a:hover,
.qr-wrap > div > a:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 30px rgba(180,200,255,0.8),
    0 0 90px rgba(180,200,255,0.55),
    0 28px 70px rgba(0,0,0,0.7);
}

/* QR画像 */
.reserve-icons img,
.qr-wrap img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  background: #fff;
}

/* ラベル */
.reserve-icons .qr-label,
.qr-wrap .qr-label {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: rgba(20,20,20,0.85);
}

/* =========================
   FOOTER
========================= */
.site-footer {
  text-align: center;
  padding: 24px 0 32px;
  color: #cfd8ff;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.site-footer p { margin: 0; }

/* =========================
   OTHER FIX
========================= */
.news-soft-text {
  color: rgba(210,225,255,0.9);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(180,200,255,0.35);
}

/* 予約ページ：左側のページタイトル「ご予約」を非表示 */
.schedule-page > .page-title { display: none; }
.schedule-page { padding-top: 0; }
.schedule-page .luvena-booking { margin-top: 0; }

/* =========================
   RESPONSIVE（ここだけに集約）
========================= */

/* iOS/スマホで background fixed を無効化 */
@media (max-width: 1024px) {
  body { background-attachment: scroll; }
}

@media (max-width: 900px) {
  .effect-title { font-size: 2.4rem; }
  .effect-title span { font-size: 1.25rem; }
  .effect-card h3 { font-size: 1.8rem; }
  .effect-card p { font-size: 1.05rem; }
  .effect-card { padding: 32px 26px; }
}

/* ★スマホ最重要：effect-card span を完全解除して 1カラムに固定 */
@media (max-width: 600px) {

  .logo-float { width: 320px; }

  .menu-icon {
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
  }
  .menu-icon span:nth-child(1) { top: 16px; }
  .menu-icon span:nth-child(2) { top: 22px; }
  .menu-icon span:nth-child(3) { top: 28px; }

  .menu-content {
    top: 74px;
    right: 12px;
    width: min(92vw, 320px);
    padding: 18px;
    border-radius: 18px;
  }

  .slider-frame {
    padding: 22px 16px;
    border-radius: 22px;
    margin-bottom: 48px;
  }
  .slider-frame .swiper { height: 200px; }
  .slider-frame .swiper-slide {
    width: 78vw !important;
    border-radius: 18px;
  }

  .effect-card-section {
    max-width: 100%;
    margin: 64px auto;
    padding: 0 14px;
  }

  .effect-title {
    font-size: 2.0rem;
    line-height: 1.55;
    margin-bottom: 20px;
  }
  .effect-title span {
    font-size: 1.05rem;
    margin-top: 10px;
  }

  .concept-lead p { font-size: 0.92rem; line-height: 2.0; }

  .effect-grid {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .effect-grid > .effect-card {
    grid-column: 1 / -1 !important;
  }

  .effect-card {
    padding: 22px 18px;
    border-radius: 22px;
  }
  .effect-card h3 {
    font-size: 1.55rem;
    margin-bottom: 12px;
    line-height: 1.35;
  }
  .effect-card p {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .reserve-cta-section {
    margin: 80px 14px 80px;
    padding: 46px 18px;
    border-radius: 26px;
  }
  .reserve-message {
    font-size: 0.98rem;
    margin-bottom: 28px;
    line-height: 2.1;
  }
  .reserve-button {
    padding: 18px 44px;
    font-size: 1.05rem;
  }

  /* QR：3列は維持しつつ、サイズだけ少し下げる */
  .reserve-icons,
  .qr-wrap {
    gap: 14px !important;
    max-width: 360px;
    margin-top: 28px !important;
  }
  .reserve-icons img,
  .qr-wrap img {
    width: 64px;
    height: 64px;
  }

  .site-footer { padding: 18px 0 26px; font-size: 0.75rem; }
}

/* option-list（価格ページ等のズレ対策） */
@media (max-width: 600px) {
  .option-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
  }
  .option-list li {
    width: 100%;
    margin: 0;
  }
}
/* =========================
   CONTACT PAGE：QRだけ見た目が違う対策
   - .reserve-icons 自体に付いてる「白背景/角丸/影」を無効化
========================= */

/* 外側（3つを包んでる面）を透明に戻す */
.contact-page .reserve-icons{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
}

/* もし親（署名エリア等）に白い面が付いてる場合も潰す */
.contact-page .page-signature,
.contact-page .page-signature *{
  background: transparent;
}

/* QRカード（各a）は今の共通デザインを強制 */
.contact-page .reserve-icons > a{
  background: #ffffff !important;
  border-radius: 22px !important;
  box-shadow: 0 20px 55px rgba(0,0,0,0.6) !important;
}