/* ==========================================================
   プリリン生息地
   デザインカンプ 2560×1440 を基準に、すべて % 指定で配置。
   → PC でもスマホでも「そのままのデザイン」で拡大縮小されます。
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #2b4a2f;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

/* ---------- 共通：ステージ（16:9 の基準ボックス） ---------- */
.sec { position: relative; width: 100%; }

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* ステージ内の絶対配置：--x / --y / --w / --h は build.py が % で出力 */
.p,
.hot,
.hit,
.cal-trigger,
.qn,
.qp {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
}
.hot, .hit, .cal-trigger { height: var(--h); }

/* ---------- 背景（固定） ----------
   各ブロックごとに背景が切り替わる */
.bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.bg--present  { background-image: url("../img/bg_present.png"); }
.bg--mission  { background-image: url("../img/bg_mission.png"); }
.bg--quest    { background-image: url("../img/bg_quest.png"); }
.bg--subevent { background-image: url("../img/bg_subevent.png"); }

.logo{
  position: absolute;
  z-index: 1;
  padding: 1rem;
}

/* ---------- FV ---------- */
.sec--fv img { width: 100%; }

/* ---------- 出席：ホバーで説明ボックス ---------- */
.hot { cursor: help; outline: none; }
.hot img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .2s ease;
}
.hot:hover img,
.hot:focus img { opacity: 1; }

/* 透明なリンク／ボタン領域 */
.hit {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.hit--btn {
  cursor: pointer;
  border-radius: 1.2vw;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.hit--btn:hover,
.hit--btn:focus-visible {
  outline: none;
}
a.hit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


.game-link {
  display: block;
  width: 238px;
  height: 238px;
  background: url(./../img/site-link_off.png) 0 0 no-repeat;
  position: fixed;
  bottom: 0;
  right: 0;
  transition: all 0.3s;
  z-index: 100;
}

.game-link:hover {
  background: url(./../img/site-link_on.png) 0 0 no-repeat;
  transition: all 0.3s;
}

.game-link a {
  width: 238px;
  height: 238px;
  display: block;
}

.game-link-deco {
  display: block;
  position: fixed;
  bottom: 205px;
  right: 104px;
  z-index: 101;
}

/* ---------- クエスト ---------- */
.qn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* タップしやすいように当たり判定を広げる */
.qn::after { content: ""; position: absolute; inset: -50% -3%; }
.qn--sub::after { inset: -25% -3%; }

.qn img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .15s ease; }
.qn__on { opacity: 0; }
.qn:hover .qn__on,
.qn:focus-visible .qn__on,
.qn.is-active .qn__on { opacity: 1; }
.qn:hover .qn__off,
.qn:focus-visible .qn__off,
.qn.is-active .qn__off { opacity: 0; }
.qn:focus-visible { outline: 2px solid #c75a10; outline-offset: 2px; }

.qp {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.qp.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

/* ---------- サブイベント：カレンダー ---------- */
.cal-trigger {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.cal-trigger:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.cal {
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(.5%);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.stage:has(.cal-trigger:hover) .cal,
.stage:has(.cal-trigger:focus-visible) .cal,
.stage.is-cal-open .cal {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;

}

.qtip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  cursor: help;
  outline: none;
}
.qtip img {
  position: absolute;
  left: -84.54%;  
  top: 0;
  width: 181.64%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.qtip:hover img,
.qtip:focus img { opacity: 1; }

/* ---------- 全体報酬リスト モーダル ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 3vh 3vw;
  background: rgba(20, 30, 15, .72);
  overflow: auto;
  animation: fadeIn .2s ease;
}
.modal[hidden] { display: none; }
.modal__inner { position: relative; }
.modal__inner img {
  width: min(1114px, 94vw, calc(94vh * 1114 / 1182));
  height: auto;
}
.modal__close {
  position: absolute;
  top: -.4em;
  right: -2.4em;
  width: 2.4em;
  height: 2.4em;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: clamp(14px, 1.6vw, 24px);
  line-height: 1;
  cursor: pointer;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 右サイドナビ（画像） ----------
   menu_df を土台に、項目ごとの帯だけ menu_on を重ねる */
.side {
  position: fixed;
  top: 50%;
  right: .4vw;
  z-index: 50;
  width: clamp(84px, 6.17vw, 158px);   /* 2560px 幅で原寸(158px) */
  aspect-ratio: 158 / 328;
  transform: translateY(-50%);
}
.side__base { width: 100%; height: 100%; }
.side ul { margin: 0; padding: 0; list-style: none; }
.side__link {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--t) 0 var(--b) 0);   /* 当たり判定もこの帯だけ */
  -webkit-tap-highlight-color: transparent;
}
.side__link img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .15s ease;
}
.side__link:hover img,
.side__link:focus-visible img,
.side__link.is-current img { opacity: 1; }
.side__link:focus-visible { outline: none; }

/* ---------- セクションごとにスナップするスクロール（PCのみ） ----------
   動きは js/main.js。JS が html.snap-on を付けた時だけ有効 */
.snap-on { scroll-behavior: auto; }   
.snap-on .sec {
  display: flex;
  align-items: center;                
  min-height: 100vh;
      flex-direction: column;

}
.snap-on .sec > * { flex: 1 1 100%; min-width: 0; }

li {
  list-style-type: none;
}
a {
  text-decoration: none;
}
ul {
  padding-left: 0;
}

.btn_sns {
  color: #fff;
  fill: #fff;
  display: block;
  width: 32px;
  height: 32px;
}

.btn_fx {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btn_fx ul li {
  transform: translate3d(0, 0, 0);
  transition: 1s;
}

.btn_fx ul li:hover {
  transform: scale(1.1, 1.1);
  transition: 0.5s all;
}

.btn_fx ul {
  display: flex;
  width: 400px;
  justify-content: space-evenly;
}

.btn_fx ul:last-child {
  width: 100px;
}

.btn_footer a {
  color: #fff;
  display: block;
}

.btn_footer {
  font-size: 14px;
  padding: 10px 0;
  width: 180px;
  border-radius: 10px;
  font-weight: 600;
}

.btn_id {
  background-color: #1cbb76;
}

.btn_site {
  background-color: #f75b92;
}


.footer {
  bottom: 0;
  left: 0;
  padding: 3rem 0;
  top: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 12px;
  color: #fff;
  background-color: #03032e;
  width: 100vw;
}
@media screen and (min-width: 1024px) {
  .footer {
    padding: 3rem 0;
  }
}
.footer__copyText {
  color: #fff;
  display: block;
  text-align: center;
}
.footer__inner {
  margin-top: 1rem;
}

.copy-white {
  color: #fff;
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- タイトルの光（Photoshop のスクリーン合成を再現） ----------
   glow.png は「黒＝透明」として背景に加算される。
   ※ 親要素に opacity / transform / filter / isolation を付けると合成が切れるので注意 */
.glow {
  mix-blend-mode: screen;
  pointer-events: none;
}
@media screen and (max-width: 850px) {
    .game-link,
  .game-link-deco {
    display: none;
  }
  .logo a img{
      max-width: 50px;
  }
}