@charset "UTF-8";
/* ============================================================
   moi — Responsive XD rebuild
   JS が --scale-pc / --scale-sp / --wrap-h を viewport に
   応じて毎回計算するので、CSS calc の単位曖昧さを回避。
   PC 最大幅 1920px、SP 切替 700px 未満。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #EEEFEA;
  overflow-x: hidden;
}
body {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  min-height: 100vh;
}
.el { box-sizing: border-box; }
img { display: block; max-width: none; }

/* ----- Stage: 原寸固定。JS の --scale で縮小 ----- */
.stage { position: relative; transform-origin: top left; }
.stage--pc { width: 1920px; height: 12970px; background: #EEEFEA; overflow: hidden; }
.stage--sp { width: 390px;  height: 8385px;  background: #EEEFEA; overflow: hidden; }

/* ----- Wrap: 表示時の高さは scale × 原高さ。中央寄せ ----- */
.wrap {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  display: block;
}
.wrap--pc {
  width: var(--wrap-w-pc, 100vw);
  height: var(--wrap-h-pc, 0);
  max-width: 1920px;
}
.wrap--sp {
  width: var(--wrap-w-sp, 100vw);
  height: var(--wrap-h-sp, 0);
  max-width: 100vw;
}
/* 1920超ビューポートで余白を見せたいときは body 背景で見せる */
body { display: flex; flex-direction: column; align-items: center; }

.wrap--pc .stage--pc { transform: scale(var(--scale-pc, 1)); }
.wrap--sp .stage--sp { transform: scale(var(--scale-sp, 1)); }

/* ----- PC/SP 切替 (700px 境界、各々スケールで連続) ----- */
.wrap--sp { display: none; }
.wrap--pc { display: block; }
@media (max-width: 699.98px) {
  .wrap--pc { display: none; }
  .wrap--sp { display: block; }
}

/* ----- ホバー遷移 0.3s ease-out (XD interactions.json 準拠) ----- */
a, button, [data-hover] {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out,
              background-color 0.3s ease-out, color 0.3s ease-out;
}

/* ----- カルーセル: スライドのフェード切替 ----- */
.xd-slide {
  transition: opacity 0.8s ease-in-out;
}
.xd-slide.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.xd-slide.is-active {
  opacity: 1;
  z-index: 5;
}

/* ----- XD interactions: 自動アニメーション(hover) ----- */
[data-xd-hover] {
  transition: transform 0.3s ease-out, opacity 0.3s ease-out, background-color 0.3s ease-out;
  cursor: pointer;
}
[data-xd-hover]:hover {
  transform: scale(1.03);
  opacity: 0.85;
}

/* ----- 固定スクロール要素レイヤー (XD fixed=true 要素) -----
   ハンバーガー・NEWS・カートタグ等、スクロール時に viewport に追随する要素。
   stage と同じスケールで、viewport にfixed配置 */
.fixed-layer {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* 中の要素のみクリック可 */
  transform-origin: top left;
  z-index: 100;
}
.fixed-layer .el { pointer-events: auto; }
.fixed-layer.fixed--pc {
  transform: translateX(var(--fixed-offset-pc, 0)) scale(var(--scale-pc, 1));
  display: block;
}
.fixed-layer.fixed--sp {
  transform: scale(var(--scale-sp, 1));
  display: none;
}
@media (max-width: 699.98px) {
  .fixed-layer.fixed--pc { display: none; }
  .fixed-layer.fixed--sp { display: block; }
}