:root{
  /* ===== 背景 ===== */
  --bgBlue: #8fd6ff;
  --bgImg: url("../images/bg_back.png");

  /* ===== 白パネル（不透明） ===== */
  --sheetBg: #ffffff;
  --sheetShadow: 0 18px 45px rgba(0,0,0,.18);

  /* ===== タブバー ===== */
  --tabbarH: 72px;
  --accent: #ff5fa7;

  /* ===== ポップ配色 ===== */
  --popPink: #ff5fa7;
  --popCyan: #35c9ff;
  --popPurple: #b56bff;

  /* ===== モーダル安全余白 ===== */
  --safeTop: 90px;
  --safeSide: 92px;
  --safeBottom: 24px;

  /* 黒文字→指定色 */
  --text: rgb(92, 76, 139);

  /* ===== ホーム調整（ここだけ触れば理想に寄せやすい） =====
     --homeLogoBand : 画像の下に出る「紫パターン帯」の高さ
     --homeOverlap  : 白い枠(=sheet)を上に食い込ませる量（＝ロゴの下から白が始まる量）
  */
  --homeLogoBand: clamp(160px, 22vh, 230px);
  --homeOverlap: clamp(150px, 20vh, 220px);
}

*{ box-sizing:border-box; }

html, body{ height: 100%; }


body{
  margin:0;
  font-family: system-ui, -apple-system, "Noto Sans JP", sans-serif;
  background-color: var(--bgBlue);
  color: var(--text);
  position: relative;
}

/* ===== 背景は「常にビューポート基準」で統一（タブで伸びても縮んでもサイズが変わらない） ===== */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-color: var(--bgBlue);
  background-image: var(--bgImg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  pointer-events: none;
  z-index: -9999;
  transform: translateZ(0);
}


/* 下タブ分の余白 */
.content{
  padding-bottom: calc(var(--tabbarH) + env(safe-area-inset-bottom) + 16px);
}

/* 各タブのページ */
.page{
  display:none;
  padding: 16px;
}
.page.active{ display:block; }

/* ホームだけはトップ画像を全幅にしたいので padding なし */
#page-home{ padding: 0; }

/* 中央白パネル */
.sheet{
  max-width: 980px;
  margin: 16px auto;
  padding: 16px;
  border-radius: 18px;
  background: var(--sheetBg);
  box-shadow: var(--sheetShadow);
}
@media (max-width: 420px){
  .sheet{ margin: 10px; padding: 14px; border-radius: 16px; }
}

/* ===== ホーム以外の上ヘッダー画像 ===== */
.topBanner{
  margin: 2px 0 14px;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  background: rgba(255,255,255,.35);
}
.topBanner img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: contain;
  background: transparent;
}

/* 各ページのトップ見出し：中央＆タブっぽい */
.pageTitle{
  margin: 0 0 14px;
  text-align: center;
  font-size: 20px;
  letter-spacing: .04em;
  font-weight: 900;
  color: var(--accent);
}
.pageTitle::after{
  content:"";
  display:block;
  width: 120px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: rgba(255,95,167,.55);
}

/* =========================================================
   ホーム：理想レイアウト
   ・画像は上
   ・下に紫パターン帯
   ・ロゴは「画像と帯の境界」から下へ押し出して、白枠にも少し乗る
   ・白枠はロゴの半分ちょい下くらいから始まる
   ・ロゴは必ず白枠より前
   ========================================================= */

.homeHero{
  width: 100%;
  position: relative;
  overflow: visible;

  /* ※ z-index を付けない（ここが重要：ロゴが白枠を超えられるようにする） */

  height: calc(100vh - var(--tabbarH) - env(safe-area-inset-bottom));
  height: calc(100svh - var(--tabbarH) - env(safe-area-inset-bottom));
  min-height: 520px;
}
@supports (height: 100dvh){
  .homeHero{
    height: calc(100dvh - var(--tabbarH) - env(safe-area-inset-bottom));
  }
}
/* iPhone Safari は svh を最後に効かせて固定 */
@supports (-webkit-touch-callout: none){
  .homeHero{
    height: calc(100svh - var(--tabbarH) - env(safe-area-inset-bottom));
  }
}

/* 上のイラスト（紫帯を除いた高さまで）
   ★ z-index をマイナスにして「白枠より必ず後ろ」へ */
.homeHero .homeHeroBg{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - var(--homeLogoBand));
  object-fit: cover;
  object-position: center center;
  display: block;
  z-index: -2;
  transform: translateZ(0);
}

/* スマホ縦持ちは「右側を優先」 */
@media (max-width: 900px) and (orientation: portrait){
  .homeHero .homeHeroBg{
    object-position: 85% 52%;
  }
}

/* 下の紫パターン帯（bodyの背景画像をここで見せる）
   ★ これもマイナスにして白枠より後ろへ */
.homeHero::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--homeLogoBand);
  /* 背景は body::before で統一（ここでは塗らない） */
  background: transparent;
  z-index: -1;
}

/* ロゴ：境界(bottom:帯の高さ)に置いて、要素自身の高さ%で下へ押す
   ★ ここは大きい z-index で必ず最前面 */
.homeHero .homeHeroLogo{
  position: absolute;
  left: 50%;
  bottom: var(--homeLogoBand);
  transform: translate(-50%, 56%); /* ←ここを 52〜62% で微調整OK */
  width: min(92vw, 720px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  z-index: 999;
}

/* 白い枠：上へ食い込ませて、ロゴの下から白が始まる */
.homeBody{
  padding: 16px;
  position: relative;

  /* ※ z-index を付けない（ここも重要） */
  margin-top: calc(-1 * var(--homeOverlap));
}

/* ロゴが白枠に乗るぶん、枠の中身は上に余白を足して文字を隠さない */
.homeBody .sheet{
  position: relative;
  z-index: 1; /* 背景(-1/-2)より前に固定 */
  padding-top: max(72px, calc(var(--homeOverlap) - 85px));
}

/* ===== PCのみ：白枠の開始位置を下げて、文字がロゴに隠れないようにする ===== */
@media (min-width: 901px){
  :root{
    /* ここを小さくするほど「白枠が下から始まる」 */
    --homeOverlap: clamp(110px, 12vh, 160px);
  }

  /* 中身も念のため下げる（ロゴが大きいPCで被りやすい） */
  .homeBody .sheet{
    padding-top: clamp(110px, 13vh, 180px);
  }
}

/* セクション見出し（しょうかい / あらすじ） */
.sectionLabel{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0 12px;
  font-weight: 1000;
  letter-spacing: .12em;
  font-size: 15px;
  color: #ffffff;
  text-shadow:
    0 6px 18px rgba(0,0,0,.20),
    0 0 16px rgba(53,201,255,.20);
}
.sectionLabel span{
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,95,167,.95), rgba(53,201,255,.95));
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.55);
}

/* ===== 共通：淡い水色/薄紫の“中身”＋ピンク水色枠 ===== */
.softFrame{
  padding: 16px 14px 20px;
  border-radius: 22px;
  border: 3px solid transparent;
  background:
    linear-gradient(180deg, rgba(214,241,255,.80), rgba(240,224,255,.85)) padding-box,
    linear-gradient(180deg, rgba(255,95,167,.95), rgba(53,201,255,.95)) border-box;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* ===== YouTube：レスポンシブ ===== */
.videoWrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  background:#000;
  margin: 10px 0 46px; /* YouTubeと紹介文の間を広めに */
}
.videoWrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ===== あらすじ：白背景(透過0.8)＆ポップ文字 ===== */
.introBox{
  background: rgba(255,255,255,.80);
  border-radius: 18px;
  padding: 18px 16px 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
  text-align:center;
}
.introTitle{
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 1000;
  line-height: 1.25;
  letter-spacing: .03em;
  background: linear-gradient(90deg, var(--popPink), var(--popCyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* モバイルの線/スジ対策 */
  -webkit-text-stroke: 1px rgba(255,255,255,.65);
  text-shadow:
    0 4px 16px rgba(255,95,167,.25),
    0 4px 16px rgba(53,201,255,.20);
}
.introText{
  margin: 0;
  font-size: 16.5px;
  font-weight: 850;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--text);
  text-shadow: 0 2px 0 rgba(53,201,255,.10);
}
.introText .em{
  color: var(--popPink);
  font-weight: 1000;
}
@media (max-width: 420px){
  .introTitle{ font-size: 20px; }
  .introText{ font-size: 16px; }
}

/* ===== ライブ：3本動画（枠サイズ統一） ===== */
.liveList{
  display:flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}
.liveCard{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
  background: #fff;
}
.liveCardTitle{
  height: 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 12px;
  text-align:center;
  font-weight: 1000;
  font-size: 18px;
  letter-spacing: .06em;
  color:#fff;
  background: linear-gradient(90deg, rgba(255,95,167,.95), rgba(53,201,255,.95));
  text-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.liveCardBody{ padding: 12px; }
.videoWrapLive{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow:hidden;
  background:#000;
}
.videoWrapLive iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ===== カードリスト：☆ごとに枠で囲む ===== */
.rarity{ margin: 18px 0 22px; }

.rarityFrame{
  position: relative;
  padding: 18px 14px 34px; /* ←下側余白を広めに */
  border-radius: 22px;
  border: 4px solid transparent;
  background: linear-gradient(180deg, rgba(255,95,167,.95), rgba(53,201,255,.95)) border-box;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  overflow: hidden;
}
/* 内側（中身の面）だけ別色 */
.rarityFrame::before{
  content:"";
  position:absolute;
  inset: 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(244,236,255,.96), rgba(224,245,255,.96));
  z-index: 0;
}
.rarityFrame > *{
  position: relative;
  z-index: 1;
}
.rarityHeader{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 4px 0 14px;
  padding: 0 10px; /* ←左右に逃げを作る（見切れ防止） */
}
.rarityHeader img{
  width: 100%;
  max-width: 520px;
  height: auto;
  display:block;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

/* ===== カード一覧 ===== */
.grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 700px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}
.cardBtn{
  border:0;
  background: transparent;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* アイコン画像：透過部分は白にする（下地白） */
.thumbWrap{
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow:hidden;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.14);
  outline: 1px solid rgba(0,0,0,.06);
}
.thumb{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  background: transparent;
}

/* ===== モーダル ===== */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.modal.open{ display:flex; }

.modalInner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modalImg{
  max-width: calc(100vw - (var(--safeSide) * 2));
  max-height: calc(100vh - var(--safeTop) - var(--safeBottom));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  background: transparent;
}
.closeBtn{
  position: fixed;
  top: 14px;
  right: 14px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.18);
  color:#fff;
  font-size: 26px;
  line-height: 1;
  cursor:pointer;
  z-index: 10000;
}
.navBtn{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.18);
  color:#fff;
  font-size: 28px;
  cursor:pointer;
  z-index: 10000;
}
.navBtn.left{ left: 16px; }
.navBtn.right{ right: 16px; }

@media (max-width: 420px){
  :root{ --safeSide: 78px; --safeTop: 84px; }
  .navBtn.left{ left: 10px; }
  .navBtn.right{ right: 10px; }
}

/* ===== 下部タブバー ===== */
.tabbar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tabbarH);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  box-shadow: 0 -12px 30px rgba(0,0,0,.14);
  z-index: 9000;
  display:flex;
  align-items: stretch;
}
.tabBtn{
  flex: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  color: #666;
  font-size: 12px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  font-weight: 800;
}
.tabBtn[aria-selected="true"]{ color: var(--accent); }
.tabBtn[aria-selected="true"]::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 3px;
  background: var(--accent);
}

.placeholder{
  padding: 10px;
  color:#333;
  font-size: 14px;
  opacity:.85;
  text-align:center;
}

/* ===== あそびかた（ゲームの流れ） ===== */
/* あそびかた：02だけ透過PNG（枠なし） */
.sheetHowto .flowImgBox--transparent{
  background: transparent;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
  height: auto; /* 固定高を解除 */
}

.sheetHowto .flowImgBox--transparent img{
  width: 100%;
  height: auto;          /* 固定高を解除 */
  object-fit: contain;
  display: block;
  background: transparent;
}

/* 02だけ少し大きく */
.sheetHowto .flowImgBox--big{
  width: min(380px, 96vw);
  max-width: none;
}

.flowWrap{
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.flowStep{
  width: 100%;
  max-width: 860px;
}
.flowImgs{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 10px;
}
/* 枚数に関係なく同じサイズ */
.flowImgBox{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  outline: 1px solid rgba(0,0,0,.06);
  width: min(320px, 84vw);
}
.flowImgBox.small{
  width: min(320px, 84vw);
}


/* Step2: 透過PNGは「枠/影/白背景」を消す（他の画像はそのまま） */
.flowImgBox.flowImgBox--transparent{
  background: transparent;
  box-shadow: none;
  outline: none;
  border-radius: 0;
  overflow: visible;
}

/* 念のため img 側も透明に */
.flowImgBox.flowImgBox--transparent img{
  background: transparent;
}

/* Step2: 02だけ少し大きく */
.flowImgBox.flowImgBox--big{
  transform: scale(1.1);
  transform-origin: center top;
}

.flowImgBox img{
  width: 100%;
  height: auto;
  display:block;
}
.flowText{
  margin: 0;
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(53,201,255,.10);
}

/* あそびかたタブ内の説明文だけ少し小さく */
.sheetHowto .flowText{
  font-size: 13.5px; 
}


.downArrow{
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0 4px;
  font-size: 34px;
  font-weight: 1000;
  line-height: 1;
  background: linear-gradient(180deg, rgba(255,95,167,.98), rgba(53,201,255,.98));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.10));
}
@media (max-width: 420px){
  .introTitle{
    font-size: 20px;
    font-weight: 900; /* 1000だと端末によって崩れやすい */
    -webkit-text-stroke: 0px rgba(0,0,0,0); /* ← 余計な線の主原因を切る */
  }
  .introText{ font-size: 16px; }
}