/*
 * MYPページ (ID: 10649) 専用のスタイルシートです。
 * ここに、固定ページ編集画面のCSS用コード欄に記述していたCSSを貼り付けてください。
 */

/* ===== TOP Swiper レイアウト & ロック ===== */
.myp-swiper,
.myp-swiper .swiper-slide {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.myp-swiper.is-locked .swiper-slide:nth-child(n + 2) {
  display: none;
}

/* ── 矢印ナビ：上側がデフォルト、スクロールダウン時は下側に吸着 ── */
.swiper-nav-pc {
  position: fixed;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 0;
  width: 160px;
  z-index: 1000;
}
.swiper-nav-pc.at-bottom {
  top: auto;
  bottom: 180px;
} /* ← 追加クラス */
.swiper-nav-pc img {
  width: 80px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s;
}
.swiper-nav-pc img:hover {
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .swiper-nav-pc {
    display: none;
  }
}
.myp-swiper.is-locked + .swiper-nav-pc {
  display: none;
}

/* ── ドット：同様に上下切替 ── */
.swiper-pagination-holder {
  position: fixed;
  top: 200px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  transition: opacity 0.3s;
  opacity: 0;
  z-index: 1000;
}
.swiper-pagination-holder.at-bottom {
  top: auto;
  bottom: 150px;
} /* ← 追加クラス */
.swiper-pagination-holder .swiper-pagination {
  position: static !important;
}
.swiper-pagination-holder .swiper-pagination-bullet {
  background: #999;
  opacity: 1;
}
.swiper-pagination-holder .swiper-pagination-bullet-active {
  background: #fff;
}

/* トップボタン & メニュー（既存をそのまま） */
.Top-tgl {
  margin-top: 50px; /* ← この数値で上からの位置を調整 */
  --img-un: url('/wp-content/uploads/2025/05/myp-top-unselect.png');
  --img-on: url('/wp-content/uploads/2025/05/myp-top-selected.png');
  position: relative;
  width: 90%;
  max-width: 390px;
  margin-left: 10%;
  aspect-ratio: 1668/334;
  overflow: hidden;
  z-index: 10;
}
@media (max-width: 768px) {
  .Top-tgl {
    width: 60%;
    margin-right: 40%;
  }
}
.Top-label {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}
.Top-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--img-un) no-repeat center/cover;
  mask: linear-gradient(to bottom, #000 50%, transparent 50%) bottom/100% 200% no-repeat;
  animation: mask-slide 0.05s ease-out forwards;
}
.Top-label:hover ~ .Top-bg,
#toggle-top:checked ~ .Top-bg {
  background: var(--img-on) no-repeat center/cover;
  mask-position: top;
}
#toggle-top:checked ~ .Top-label {
  pointer-events: none;
}

.Menu-tgl {
  --bg-default: url('/wp-content/uploads/2025/05/myp-menu-bg.png');
  position: relative;
  display: none;
  margin-top: 70px;
  margin-left: 35%;
  width: 65%;
  max-width: 450px;
  aspect-ratio: 1663/1659;
  overflow: hidden;
  z-index: 10;
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
@media (max-width: 768px) {
  .Menu-tgl {
    margin-left: 33%;
    width: 67%;
  }
}
.Menu-area {
  position: absolute;
  left: 0;
  width: 100%;
  cursor: pointer;
  z-index: 2;
}
.Menu-area:nth-child(1) {
  top: 5%;
  height: 14%;
}
.Menu-area:nth-child(2) {
  top: 19%;
  height: 12%;
}
.Menu-area:nth-child(3) {
  top: 31%;
  height: 16%;
}
.Menu-area:nth-child(4) {
  top: 47%;
  height: 13%;
}
.Menu-area:nth-child(5) {
  top: 60%;
  height: 14%;
}
.Menu-area:nth-child(6) {
  top: 74%;
  height: 12%;
}
.Menu-area:nth-child(7) {
  top: 86%;
  height: 14%;
}
.Menu-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-default) center/cover no-repeat;
  mask: linear-gradient(to bottom, #000 50%, transparent 50%) bottom/100% 200% no-repeat;
  animation: mask-slide 0.05s ease-out forwards;
}
@keyframes mask-slide {
  to {
    mask-position: top;
  }
}

/* スプラッシュ全体 */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

/* ロゴ画像のアニメーション */
.splash-screen img {
  width: 30%; /* 画像を親要素の50%の幅に */
  height: auto; /* アスペクト比を維持 */
  opacity: 0;
  animation: splashAnimation 2s forwards;
}
@keyframes splashAnimation {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Swiper がロック中は 2 枚目以降を非表示＆スワイプ禁止 */
#myp-top-swiper.is-locked .swiper-slide:nth-child(n + 2) {
  display: none;
}

/* 100vh 全画面表示など任意で */
#myp-top-swiper,
#myp-top-swiper .swiper-slide {
  width: 100%;
  height: 100vh; /* フルスクリーンにしたい場合 */
}

#header {
  display: none;
}
.c-infoBar {
  display: none;
}
.l-fixHeader__inner {
  display: none;
}

/* --------------------------------------------------
   タブ全体のスタイル
-------------------------------------------------- */
.tabs {
  font-family: sans-serif;
}

/* --------------------------------------------------
   タブボタン
-------------------------------------------------- */
.tab-buttons {
  display: flex;
  border-bottom: 1px solid #ccc;
  position: relative; /* ← 追加: インジケーター配置の基準 */
}

.tab-buttons button {
  padding: 0.5em 1em;
  border: none;
  background: none;
  cursor: pointer;
  color: #d9d9d9; /* 通常時の文字色 */
  transition: color 0.2s; /* 色の変化を滑らかに */
}

.tab-buttons button:hover {
  color: #fff; /* ホバー時の文字色 */
}

.tab-buttons button.active {
  font-weight: bold;
  color: #fff; /* アクティブ時の文字色 */
  /* 下の border-bottom はインジケーターに任せる */
  border-bottom: none;
}

/* --------------------------------------------------
   インジケーター（動くアンダーバー）
-------------------------------------------------- */
.tab-buttons .tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #0099c4;
  transition:
    left 0.3s ease,
    width 0.3s ease;
  will-change: left, width;
}

/* --------------------------------------------------
   タブコンテンツ（初期は非表示）
-------------------------------------------------- */
.tab-content {
  display: none;
  padding: 1em 0;
}

.tab-content.active {
  display: block;
}

body,
#body_wrap {
  background-color: #000000 !important;
  color: #ffffff !important;
}

#footer {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.slide-padded {
  padding-top: 10vh;
  box-sizing: border-box;
}

.slide-centered-content {
  display: flex;
  justify-content: center;
}