:root{
  --stage-w: 1920;
  --stage-h: 1080;
  --stage-scale: 1;
  --ui-scale: min(calc(100vw / var(--stage-w)),calc(100vh / var(--stage-h)));
  --sp-ui-scale: 1.6;
  --tab-ui-scale: 2.2;
  --mini-ui-scale: 1.28;
  --sp-badge-scale: 1.6;
  --sp-margin-scale: 1.36842105;
}
:root{
  --logo-grad: linear-gradient(
    135deg,
    #e6c86e 0%,
    #ff4db3 35%,
    #0077ff 100%
  );
}
html,body{
  height: 100dvh;
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  min-height: 810px;
}
body { 
  font-family: "Kosugi Maru", "Helvetica Neue", "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
  text-align: left;
  font-weight: 400;
  font-size:0.875em;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
}
.stage{
  position: fixed;
  left: 50%;
  top: 50%;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform: none;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
  overflow: visible;
  pointer-events: auto;
  z-index: 50;
  opacity: 0;
  transition:opacity .8s ease;
}
.stage.show {
  opacity: 1;
}
#logo {
  position: fixed;
  top: calc(40 * var(--ui-scale));
  left: calc(66 * var(--ui-scale));
  width: calc(152 * var(--ui-scale));
  height: auto;
}
.hide {
    display: none;
}
.show {
    display: initial;
}
/* 好みで色や余白を変えたいときはここだけ修正 */
.hamburger{
  --bar-w: 72px;      /* 幅 */
  --bar-h: 10px;      /* 太さ */
  --bar-gap: 12px;    /* 線と線の隙間 */
  --bar-color: #fff;  /* 色 */
  --transition: .25s cubic-bezier(.2,.9,.2,1);

  position: fixed;
  width: var(--bar-w);
  height: calc(var(--bar-h) * 3 + var(--bar-gap) * 2);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  top: calc(35 * var(--ui-scale));
  right: calc(36 * var(--ui-scale));
  transform-origin: top right;
  transform: scale(var(--stage-scale));
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
body.load-complete .hamburger {
  opacity: 1;
  pointer-events: auto;
}

/* 3本線（上: ::before, 中: .bar, 下: ::after） */
.hamburger::before,
.hamburger .bar,
.hamburger::after{
  content: "";
  position: absolute;
  left: 0; right: 0;               /* 中央寄せ */
  width: var(--bar-w);
  height: var(--bar-h);
  background: var(--bar-color);
  border-radius: 9999px;           /* 角丸（完全なカプセル形） */
  box-shadow: 0 0 0 3px #b1870f;
  /* ▲これで外側に3pxの枠線が付く */
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

/* 各バーの縦位置（等間隔） */
.hamburger::before{ top: 0; }
.hamburger .bar{     top: calc(var(--bar-h) + var(--bar-gap)); }
.hamburger::after{   top: calc(var(--bar-h) * 2 + var(--bar-gap) * 2); }

/* ちょっとしたホバー効果（任意） */
.hamburger:hover::before,
.hamburger:hover .bar,
.hamburger:hover::after{
  background: #fff;
}

.hamburger .hit{
  position: absolute;
  inset: -14px; 
  display: block;
}

/* === ここから「×」に変形するトグル（.is-active を付けるだけ） === */
/* 中線は消す・上下線は中央に寄せて回転 */
.hamburger.is-active .bar{
  opacity: 0;
  transform: scaleX(0.6);
}
.hamburger.is-active::before{
  transform:
    translateY(calc(var(--bar-h) + var(--bar-gap))) /* 中央へ移動 */
    rotate(45deg);
}
.hamburger.is-active::after{
  transform:
    translateY(calc(-1 * (var(--bar-h) + var(--bar-gap)))) /* 中央へ移動 */
    rotate(-45deg);
}

/* オーバーレイ */
.menu-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 900;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.menu-overlay.show{ opacity: 1; pointer-events: auto; }

 /* 右側ドロワー */
.menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 85vw);
  height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  z-index: 901;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
}

.menu-panel.open {
  transform: translateX(0);
}

/* ヘッダー */
.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.menu-title {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
}

.menu-close {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.menu-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

/* メニューリスト */
.menu-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
  list-style: none;
}

.menu-list::-webkit-scrollbar {
  width: 6px;
}

.menu-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.menu-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.menu-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.menu-list li {
  margin: 4px 16px;
}

.menu-list a {
  display: block;
  padding: 16px 20px;
  color: #e0e6ed;
  text-decoration: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.menu-list a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.menu-list a:hover::before {
  opacity: 1;
}

.menu-list a.is-active {
  background: #000;
  color: #dbeafe;
  border-color: #3b82f6;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* レスポンシブ */
@media (max-width: 480px) {
  .menu-panel {
    width: 90vw;
  }

  .menu-head {
    padding: 16px 20px;
  }

  .menu-title {
    font-size: 16px;
  }

  .menu-list a {
    padding: 14px 16px;
    font-size: 14px;
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .menu-panel {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  }
}
.copyright {
  position: fixed;
  right: calc(35 * var(--ui-scale));
  bottom: calc(20 * var(--ui-scale));
  font-size: calc(30 * var(--ui-scale));
  margin: 0;
  color: #000;
  z-index: 20;
}

/* キャンペーン */
.cp-btn {
  position: fixed;
  width: calc(450 * var(--ui-scale));
  right: calc(175 * var(--ui-scale));
  top: calc(40 * var(--ui-scale));
  z-index: 60;
  opacity: 0;
  transition: opacity .3s;
}
body.load-complete .cp-btn {
  opacity: 1;
  pointer-events: auto;
}
.cp-btn img {
  width: 100%;
  height: auto;
  -webkit-transition:-webkit-transform .1s ease-out;
  transition:transform .1s ease-out;

}
.cp-btn:hover img {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

/*extend confetti*/

#confetti {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1000;
}
.effect-container {
  position: fixed;
  top: 0;
  left: 0;
  width:100vw;
  height:100vh;
  pointer-events: none;
}
.effect-container.confetti {
  /*box-shadow: 0 0 100px rgba(252, 28, 143, 1) inset;*/
}
/* Loader ------------------------------------------------------------------ */
html.loading-lock,
body.loading-lock{
  overflow: hidden;          /* 縦横スクロール不可 */
  overscroll-behavior: none; /* iOS/Android のバウンス抑止 */
  height: 100%;
}
#loader{
  position:fixed;inset:0;background:#fff;display:grid;
  place-items:center;
  z-index:200;
  transition:opacity .6s ease,visibility .6s ease;
  touch-action: none;
}
#loader::before{
  content:'';
  position:absolute; inset:0;
  z-index:-1;              /* ローダー内容の背面だが画面上には見える */
  background:var(--logo-grad);
  background-size:400% 400%;
  animation:bgShift 12s linear infinite;
}
@keyframes bgShift{
  0%  {background-position:0 0;}
  50% {background-position:100% 100%;}
  100%{background-position:0 0;}
}
#loader.hide {
  opacity:0;
  visibility:hidden;
}
.spinner{
  width:128px;
  height:128px;
  border:12px; solid #ccc;    /* 8 × 1.5 */
  border-top-color:#333;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#progress-text{margin-top:1rem;font-size:1.25rem;color:#333}

/* ローダー内の中央ロゴ */
#loader .loading-title{
  position:absolute;
  top:25%; left:50%;
  transform:translate(-50%,-50%);
  width:calc(1008 * var(--ui-scale));
  height:auto;
  pointer-events:none;
  z-index: 202;
}

/* ❶ キャラ列：画面中央寄り・横幅いっぱい・少し重ねる ------------------ */
/* ローダー専用の 1920×1080 ステージを中央に */
.loader-stage{
  position: fixed;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  overflow: visible;
  transform-origin: center;
  left: 50%;
  top: 50%;
}
#loader .char-bounce{
  position:absolute; 
  pointer-events:none;
  inset:0;
}
#loader.hide .char-bounce{
  display:none;
}
#loader .spinner{ display:none; }
#loader .char-bounce .char {                                                                                                                 
  position: absolute;
  height: auto;
  opacity: 0;
}
.animate__animated{ opacity:1 !important; }

#loader .char-bounce .im     { bottom:-6px;   left:1504px; width:502px; }
#loader .char-bounce .funky  { bottom:-156px; left:1312px; width:530px; }
#loader .char-bounce .my     { bottom:-95px;  left:1063px; width:498px; }
#loader .char-bounce .happy  { bottom:-174px; left:879px;  width:474px; }
#loader .char-bounce .gogo   { bottom:-23px;  left:618px;  width:558px; }
#loader .char-bounce .girls  { bottom:-75px;  left:-147px; width:589px; }
#loader .char-bounce .mister { bottom:-283px; left:497px;  width:600px; }
#loader .char-bounce .ultra  { bottom:-201px; left:66px;   width:658px; }

/* ❹ ロード完了で列ごと下へフェードアウト ------------------------------ */
#loader.hide .char-bounce{
  animation:slideOut .8s forwards;
}
@keyframes slideOut{
  to{transform:translate(-50%,100%);opacity:0;}
}

/* ❺ 他 UI のフェードイン（既存 body.load-complete と連携） ----------- */
body.load-complete .slider-wrapper,
body.load-complete #page-title,
body.load-complete .info-icon,
body.load-complete .badge-back,
body.load-complete .badge-txt{
  animation:screenIn .8s .2s both;
}
@keyframes screenIn{from{opacity:0;}to{opacity:1;}}

/* Title image ------------------------------------------------------------- */
#page-title{
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  width:504px;
  height:auto;
  object-fit:contain;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
  z-index:150;
}
#page-title.show{opacity:1}

/* Background cross-fade layers ------------------------------------------- */
.bg-layer{
  position:fixed;inset:0;
  background-size:cover;background-position:center;
  pointer-events:none;opacity:0;
  transition:opacity 1s ease;z-index:-1;
}
.bg-layer.show{opacity:1;}

/* Wrapper ----------------------------------------------------------------- */
.slider-wrapper{
  position:relative;
  max-width:1280px;
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  overflow:visible;
  z-index: 60;
}

/* Swiper ------------------------------------------------------------------ */
.slider-container{width:100%;height:100%;position:relative;}
.slider-container.swiper{overflow:hidden;}

/* Slides ------------------------------------------------------------------ */
.swiper-slide{
  display:flex;justify-content:center;align-items:center;
  color:#fff;
}

/* Slide-internal content -------------------------------------------------- */
.slide-inner{text-align:center;}
.slide-inner h2 img{
  width:auto;
  height:57px;
}
.slide-inner h2{
  line-height:0;
  margin: 0;
  position: absolute;
  top: 190px;
  left: 0;
  right: 0;
}
/* Slide badge -------------------------------------------------------------- */
.badge-box img {
  max-width: 100%;
  height: auto;
}
.badge-image {
  position: absolute;
  width: 545px;
  top: 285px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.funky .badge-image {
  width: 562px;
}
.badge-image .badge-layer{
  position: absolute;
  inset: 0;
  margin: 0 auto;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .5s ease; /* フェード時間は好みで */
}
.badge-image .badge-layer.show{
  opacity: 1;
}
.my .badge-image {
  width: 309px;
  top: 360px;
}
.girls .badge-image {
  width: 484px;
  top: 255px;
}
.my .badge-base {
  position: absolute;
  width: 650px;
  top: 244px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.badge-txt {
  position:relative;
  width: 542px;
  top: 610px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}
.my .badge-txt {
  position:relative;
  width: 347px;
  top: 547px;
}
.badge-txt .txt{
  position:absolute;
  inset:0;
  opacity:0;
  top:0;
  left:0;
  margin: 0 auto;
  transition:opacity 1s ease;
}
.badge-frame {
  position: absolute;
  width: 623px;
  top: 568px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.my .badge-frame {
  width: 390px;
  top: 509px;
}
.badge-character {
  position: absolute;
  width: 251px;
  top: 446px;
  right: 110px;
}
.nim .badge-character {
  position: absolute;
  width: 288px;
  top: 445px;
  right: 72px;
}
.funky .badge-character {
  width: 265px;
  top: 489px;
}
.my .badge-character {
  width: 249px;
  top: 480px;
  right: 98px;
}
.happy .badge-character {
  width: 237px;
  top: 542px;
  right: 104px;
}
.gogo .badge-character {
  width: 279px;
  top: 508px;
  right: 86px;
}
.girls .badge-character {
  width: 294px;
  top: 399px;
  right: 69px;
}
.mister .badge-character {
  width: 300px;
  top: 482px;
  right: 63px;
}
.ultra .badge-character {
  width: 329px;
  top: 454px;
  right: 63px;
}

/* Nav buttons ------------------------------------------------------------- */
.nav-btn{
  position:absolute;
  top:547px;
  transform:translateY(-50%);
  width:135px;
  height:auto;
  background:transparent;border:none;cursor:pointer;z-index:100;
  -webkit-transition:-webkit-transform .1s ease-out;transition:transform .1s ease-out;
}
.nav-btn:hover {
  -webkit-transform: translateY(-50%) scale(1.05);
  transform: translateY(-50%) scale(1.05);
}
.nav-btn.prev{left:-68px;}
.nav-btn.next{right:-68px;}
.nav-btn img{width:100%;height:100%;object-fit:contain;pointer-events:none;}

/* Vertical circle buttons ------------------------------------------------- */
.slide-inner{position:relative;height:100%;}
.side-buttons{
  position:absolute;
  left:100px;
  top:341px;
  display:flex;
  flex-direction:column;
  gap:17px;
  z-index:50;
}
.circle-btn{
  position:relative;
  width:126px;
  height:126px;
  border-radius:50%;background:#fff;
  border:6px solid #e6c86e;
  outline:6px solid #000;
  cursor:pointer;overflow:hidden;
}
.circle-btn img{
  position:absolute;
  top: 54%;
  left: 51%;
  width:98px;
  height:auto;                   /* 49 × 1.5 */
  object-fit:contain;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.circle-btn:hover,
.circle-btn.selected{background:#e6c86e;border-color:#fff;}

.circle-btn:not(.selected)::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:126px;
  height:126px;
  border-radius:50%;
  background:rgba(255,230,100,.5);
  transform:translate(-50%,-50%) scale(0);opacity:.7;
  transition:transform .6s,opacity .6s;
}
.circle-btn:not(.selected):hover::after{
  transform:translate(-50%,-50%) scale(2.5);
  opacity:0;
}
.circle-btn:not(.selected):active{
  animation:jelly .4s;
}
@keyframes jelly{
  0%,100%{transform:scale(1);}
  25%    {transform:scale(.9,1.1);}
  50%    {transform:scale(1.1,.9);}
  75%    {transform:scale(.95,1.05);}
}

/* Bottom gradient --------------------------------------------------------- */
.bottom-fade{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:calc(530 * var(--ui-scale));
  pointer-events:none;
  background:linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 100%);
  z-index:10;
}

/* Centered badge ---------------------------------------------------------- */
.badge-back{
  position:absolute;
  top:77px;
  left:0;
  right:0;
  margin: 0 auto;
  pointer-events:none;
  z-index:45;
  width:886px;
  height:auto;
}

/* Info icon ----------------------------------------------------------------*/
.info-icon{
  position:absolute;
  top:816px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;z-index:55;
  width:1009px;
  height:auto;
}

/* Input area -------------------------------------------------------------- */
.input-container{
  position:absolute;
  top:888px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  gap:8px;
}
.input-box-wrapper {
  margin-left:240px;
}
.input-box{
  background-repeat:no-repeat;
  background-image:url(../images/input_box.png);
  background-position:top center;background-size:contain;
  margin:0 auto 10px;
  padding:0;
  width:550px;
}
.input-box input{
  font-family:"Kosugi Maru","Helvetica Neue","Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Arial,"メイリオ",Meiryo,sans-serif;
  height:123px;
  width:100%;
  font-size:43px;
  background-color:transparent;
  text-transform:uppercase;border:0;text-align:center;
  background:url(../images/input_txt.png) center 27px no-repeat;
  background-size:360px auto;
}
.input-box input.not-empty{background-image:none;}
html.ios_safari .input-box input,
html.ios_chrome .input-box input{margin-left:-0.5em;}
.input-box input:focus{outline:none;}

.prohibition{
  text-align: center;
  position: absolute;
  top: -10px;
  left: 0;
  margin: 0 auto;
  right: 0;
}
.input-container .submit{
  display:inline-block;
  width:232px;
  height:122px;
  margin-top:0;background-repeat:no-repeat;
  background-image:url(../images/create_btn_off.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position:center center;background-size:contain;
  -webkit-transition:-webkit-transform .1s ease-out;transition:transform .1s ease-out;
}
.input-container .submit.valid:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}
.input-container .submit img{
  opacity: 0;
  width:100%;
  height:auto;
}
.input-container .submit.valid img{
  opacity: 1;
  cursor: pointer;
}
.rainbow {
  position: absolute;
  top: 131px;
  left: 0;
  right: 0;
  cursor: pointer;
  display: none;
  width:fit-content;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 11px;
  transition:transform .3s,box-shadow .3s;
}
.rainbow.show {
  display: flex;
}
.rainbow:hover {
  transform:translateY(-3px);
}
.rainbow img {
  width: 265px;
}
.rainbow .check-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #fff;
  border: 2px solid #666;
  outline: 4px solid #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, border-color .3s;
}

/* チェックマーク */
.rainbow .check-btn::after{
  content: "";
  position: absolute;
  width: 10px; /* 少し太く見せるため幅大きめ */
  height: 18px;
  border-right: 5px solid transparent;  /* 線を太めに */
  border-bottom: 5px solid transparent;
  transform: rotate(45deg);
  top: 0px; /* ← 少し上に調整 */
  opacity: 0;
  transition: opacity .3s;
}

/* hover時（任意） */
.rainbow .check-btn:hover{
  border-color: #b1870f;
}

/* 選択時：背景色変更＋レ点表示 */
.rainbow.selected .check-btn{
  background: #e6c86e;
  border-color: #b1870f;
}
.rainbow.selected .check-btn::after{
  border-color: #000; /* レ点の色 */
  opacity: 1;
}
.probability {
  position: absolute;
  width: 351px;
  top: 286px;
  left: 49px;
  z-index: 10;
}
/* レスポンシブ */
@media (max-width: 768px) {
  #logo {
    position: fixed;
    top: calc(40 * var(--ui-scale) * var(--sp-ui-scale));
    left: calc(66 * var(--ui-scale) * var(--sp-ui-scale));
    width: calc(152 * var(--ui-scale) * var(--sp-ui-scale));
  }
  .hamburger{
    --bar-w: calc(72px * var(--sp-ui-scale));      /* 幅 */
    --bar-h: calc(10px * var(--sp-ui-scale));      /* 太さ */
    --bar-gap: calc(12px * var(--sp-ui-scale));    /* 線と線の隙間 */
    top: calc(35 * var(--ui-scale) * var(--sp-ui-scale));
  right: calc(36 * var(--ui-scale) * var(--sp-ui-scale));
  }
  /* 3本線（上: ::before, 中: .bar, 下: ::after） */
  .hamburger::before,
  .hamburger .bar,
  .hamburger::after{
    box-shadow: 0 0 0 calc(3px * var(--sp-ui-scale)) #b1870f;
  }
  .hamburger .hit{
    inset: calc(-14px * var(--sp-ui-scale));
  }
  .cp-btn {
    right: calc(50 * var(--ui-scale));
    top: calc(230 * var(--ui-scale));
  }
  .copyright {
    right: calc(35 * var(--ui-scale) * var(--sp-ui-scale));
    bottom: calc(20 * var(--ui-scale) * var(--sp-ui-scale));
    font-size: calc(30 * var(--ui-scale) * var(--sp-ui-scale));
  }
  #page-title {
    width:calc(504px * var(--sp-ui-scale));
    top: calc(-10px - ((186px * var(--sp-ui-scale)) - 186px));
  }
  .slide-inner h2 {
    top: calc(190px - ((57px * var(--sp-ui-scale)) - 57px));
  }
  .slide-inner h2 img {
    height: calc(57px * var(--sp-ui-scale));
  }
  .info-icon{
    width:calc(1009px * var(--mini-ui-scale));
  }
  .side-buttons {
    top: 320px;
    gap: calc(23px * var(--sp-ui-scale));
  }
  .circle-btn{
    width:calc(126px * var(--sp-ui-scale));
    height:calc(126px * var(--sp-ui-scale));
    border:calc(6px * var(--sp-ui-scale)) solid #e6c86e;
    outline:calc(6px * var(--sp-ui-scale)) solid #000;
  }
  .circle-btn img{
    width:calc(98px * var(--sp-ui-scale));
  }
  .circle-btn:hover,
  .circle-btn.selected{background:#e6c86e;border-color:#fff;}

  .circle-btn:not(.selected)::after{
    width:calc(126px * var(--sp-ui-scale));
    height:calc(126px * var(--sp-ui-scale));
  }
  .input-container {
    top: 915px;
    display: block;
  }
  .input-box-wrapper {
      margin-left: 0;
      text-align: center;
  }
  .input-box {
    width:calc(550px * var(--sp-ui-scale));
  }
  .input-box input {
    height: calc(123px * var(--sp-ui-scale));
    font-size: calc(43px * var(--sp-ui-scale));
    background-position: center calc(27px * var(--sp-ui-scale));
    background-size: calc(360px * var(--sp-ui-scale)) auto;
  }
  .input-container .submit {
    width:calc(232px * var(--sp-ui-scale));
    height:calc(122px * var(--sp-ui-scale));
    display: block;
    margin: 10px auto 0;
  }
  .input-container .submit.rainbow-set {
    margin: 80px auto 0;
  }
  .rainbow {
    top: 220px;
    gap: calc(11px * var(--sp-ui-scale));
  }
  .rainbow .check-btn {
    position: relative;
    width: calc(32px * var(--sp-ui-scale));
    height: calc(32px * var(--sp-ui-scale));
    border-radius: calc(4px * var(--sp-ui-scale));
    border: calc(2px * var(--sp-ui-scale)) solid #666;
    outline: calc(4px * var(--sp-ui-scale)) solid #000;
  }
  .rainbow .check-btn::after{
    width: calc(10px * var(--sp-ui-scale)); /* 少し太く見せるため幅大きめ */
    height: calc(18px * var(--sp-ui-scale));
    border-right: calc(5px * var(--sp-ui-scale)) solid transparent;  /* 線を太めに */
    border-bottom: calc(5px * var(--sp-ui-scale)) solid transparent;
  }
  .rainbow img {
    width: calc(265px * var(--sp-ui-scale));
  }
  .prohibition img {
    width: calc(330px * var(--sp-ui-scale));
  }
}
@media (max-width: 430px) and (min-height: 600px) {
  html, body{
    height: 100svh;            /* ← 100dvh だと大きく出ることがある */
    min-height: 100svh;
  }
  .stage{
    position: fixed;           /* Swiperなどの“PCレイヤー”運用を維持 */
    top: 0;                    /* ← ここを 0 に */
    left: 50%;
    width: calc(var(--stage-w) * 1px);
    height: calc(var(--stage-h) * 1px);
    transform: translateX(-50%) scale(var(--stage-scale));  /* ← Yの -50% をやめる */
    transform-origin: top center;  /* ← 原点を上に */
  }
  #page-title {
    width: calc(400px * var(--sp-ui-scale));
    top: calc(5px * var(--sp-ui-scale));
  }
  .badge-back {
    top: 125px;
    width: 1450px;
  }
  .slider-wrapper {
    margin: calc(32px * var(--sp-ui-scale)) auto 0;
    min-height: 1400px;
    max-width: 1400px;
  }
  .slide-inner h2 {
    top: calc(115px * var(--sp-ui-scale));
  }
  .slide-inner h2 img {
    height: calc(42px * var(--sp-ui-scale));
  }
  .badge-image {
    width: calc(545px * var(--sp-badge-scale));
    top: calc(325px * var(--sp-margin-scale));
  }
  .girls .badge-image {
    width: calc(484px * var(--sp-badge-scale));
    top: calc(295px * var(--sp-margin-scale));
  }
  .my .badge-image {
      width: calc(280px * var(--sp-badge-scale));
      top: calc(410px * var(--sp-badge-scale));
  }
  .funky .badge-image {
    width: calc(562px * var(--sp-badge-scale));
  }
  .badge-txt {
    width: calc(542px * var(--sp-badge-scale));
    top: calc(703px * var(--sp-margin-scale));
  }
  .my .badge-txt {
    width: calc(321px * var(--sp-badge-scale));
    top: calc(659px * var(--sp-margin-scale));
  }
  .badge-frame {
    width: calc(623px * var(--sp-badge-scale));
    top: calc(657px * var(--sp-margin-scale));
  }
  .my .badge-frame {
    width: calc(370px * var(--sp-badge-scale));
    top: calc(632px * var(--sp-margin-scale));
  }
  .info-icon {
      top: calc(1018px * var(--sp-margin-scale));
  }
  .input-container {
    top: calc(1100px * var(--sp-margin-scale));
  }
  .input-container .submit {
    margin: 40px auto 0;
  }
  .input-container .submit.rainbow-set {
      margin: 110px auto 0;
  }
  .probability {
    width: 400px;
    top: 293px;
    left: 25px;
  }
  .nav-btn {
    top: 805px;
    width: 175px;
  }
  .nav-btn.prev {
    left: 0;
  }
  .nav-btn.next {
    right: 0;
  }
  .badge-txt img,
  .badge-frame img,
  .probability img,
  .badge-character img,
  .my .badge-base img {
    width: 100%;
  }
  .nim .badge-character {
    width: 272px;
    top: 990px;
    right: 0;
  }
  .ultra .badge-character {
    width: 277px;
    top: 1046px;
    right: 0;
  }
  .mister .badge-character {
    width: 282px;
    top: 1027px;
    right: 0;
  }
  .girls .badge-character {
    width: 294px;
    top: 939px;
    right: 0;
  }
  .gogo .badge-character {
    width: 270px;
    top: 1056px;
    right: 0;
  }
  .happy .badge-character {
    width: 272px;
    top: 1072px;
    right: 14px;
  }
  .my .badge-character {
    width: 237px;
    top: 1033px;
    right: 0;
  }
  .funky .badge-character {
    width: 256px;
    top: 1039px;
    right: 26px;
  }
  .im .badge-character {
    width: 247px;
    top: 989px;
    right: 16px;
  }

  .my .badge-base {
    width: calc(630px * var(--sp-badge-scale));
    top: calc(328px * var(--sp-margin-scale));
  }
  
  .side-buttons {
    left: initial;
    right: 35px;
    top: 278px;
    flex-direction: initial;
    gap: 35px;
  }
  .girls .side-buttons {
    top: 249px;
  }
  .my .side-buttons {
    top: 267px;
  }
  .circle-btn{
    width:180px;
    height:180px;
  }
  .circle-btn img{
    width: 140px;
  }
  .cp-btn {
    top: initial;
    right: 0;
    left: 0;
    top:  calc(1250 * var(--ui-scale) * var(--tab-ui-scale));
    bottom: initial;
    margin: 0 auto;
    width: calc(450 * var(--ui-scale) * var(--tab-ui-scale));

  }
  .cp-btn.rainbow-set {
    top:  calc(1290 * var(--ui-scale) * var(--tab-ui-scale));
    bottom: initial;
  }
}

/* キーボード表示中は重なりを確実に最前面＆クリック可に */
body.kb-open .input-container,
body.kb-open .submit,
body.kb-open .hamburger,
body.kb-open .nav-btn{
  z-index: 10000 !important;
  pointer-events: auto !important;
}

/* “見えてるけど透明”な被さり要素がクリックを奪わないように */
body.kb-open .menu-overlay,
body.kb-open #loader,
body.kb-open .overlay{
  pointer-events: none !important;
}

/* result  ----------------------------------------------------------------*/
.generate {
  background-size:cover;
  background-position:center;
  background-repeat: no-repeat;
}
.generate .body-inner {
  display: none;
}
.generate.load-complete .body-inner {
  display: initial;
}
.generate .badge-back{
  z-index: 0;
}
.generate .bottom-fade {
  z-index:-1;
}
.generate .stage {
  transition: initial;
  opacity: 1;
}
#concat-canvas {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: scale(1.1);
}
.container-warp h2 {
  line-height: 0;
  margin: 0;
  position: absolute;
  top: 190px;
  left: 0;
  right: 0;
  text-align: center;
}
.generate .canvas-warp {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 186px;
}
.generate .caption-warp {
  position: absolute;
  top: 814px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.generate .btn-box {
  display: flex;
  position: absolute;
  justify-content: center;
  gap: 12px;
  top: 889px;
  width: 100%;
}
.generate .btn-box .save,
.generate .btn-box .retry {
  cursor: pointer;
  -webkit-transition:-webkit-transform .1s ease-out;transition:transform .1s ease-out;
}
.generate .btn-box .save:hover,
.generate .btn-box .retry:hover {
  -webkit-transform: scale(1.03);
  transform: scale(1.03);
}

.chara-character {
  position: absolute;
}

.nim .chara-character {
  width: 354px;
  left: 315px;
  top: 462px;
}
.im .chara-character {
  width: 350px;
  left: 382px;
  top: 461px;
}
.funky .chara-character {
  width: 280px;
  left: 437px;
  top: 514px;
}
.my .chara-character {
  width: 297px;
  left: 377px;
  top: 488px;
}
.happy .chara-character {
  width: 250px;
  left: 434px;
  top: 540px;
}
.gogo .chara-character {
  width: 282px;
  left: 397px;
  top: 488px;
}
.girls .chara-character {
  width: 162px;
  left: 477px;
  top: 235px;
}
.girls .chara-character.c2 {
  width: 155px;
  right: 477px;
  left: initial;
  top: 235px;
}
.mister .chara-character {
  width: 302px;
  left: 385px;
  top: 483px;
}
.ultra .chara-character {
  width: 284px;
  left: 409px;
  top: 456px;
}

.generate .swiper-button-next,
.generate .swiper-button-prev {
  position:absolute;
  transform:translateY(-50%);
  width:135px;
  height:auto;
  background:transparent;border:none;cursor:pointer;z-index:100;
  -webkit-transition:-webkit-transform .1s ease-out;transition:transform .1s ease-out;
}
.generate .swiper-button-next:hover,
.generate .swiper-button-prev:hover {
  -webkit-transform: translateY(-50%) scale(1.05);
  transform: translateY(-50%) scale(1.05);
}
.generate .swiper-button-prev{
  left: 263px;
  top: 510px;
}
.generate .swiper-button-next{
  right: 252px;
  top: 510px;
}
.generate .swiper-button-next img,
.generate .swiper-button-prev img {
  width:100%;height:100%;
  object-fit:contain;
  pointer-events:none;
}
.generate .swiper-button-prev:after, .generate .swiper-button-next:after {
  content: '';
}
.generate .color-select {
  position: absolute;
  width: 163px;
  top: 463px;
  right: 389px;
}
.generate .color-select.disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

/* 直径（px）はお好みで調整 */
:root {
  --mask-d: 384px;
  --mask-h: 352px;
  --canvas-scale: 0.6;
}
/* ========== Swiper（生成ページ用） ========== */
/* コンテナ自体をマスク直径に合わせて確定。オーバーフローを隠す */
.generate.my .frame-container{
  position: relative;
  width: var(--mask-d);           /* すでに設定済み */
  height: var(--mask-d);          /* ← 追加：高さも固定 */
  margin: 0 auto;
}

/* Swiperのコンテナ（v6の .swiper-container クラスを想定） */
.generate .swiper-container{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;               /* ← これが無いと複数枚見える */
}

/* ラッパ（.swiper-wrapper = .canvas-list）はそのままでOK
   ※ 既存の mask 指定は残してOK */

/* スライドをコンテナ幅にフィットさせ、1枚だけ表示に固定 */
.generate .swiper-slide {
  flex: 0 0 100%;                 /* 1枚ぶんの幅で固定 */
  width: 100% !important;         /* 念のため */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* キャンバスを中央に見せたい場合（任意） */
.generate .swiper-slide > canvas{
  margin:0 auto;
  transform: scale(var(--canvas-scale));
  transform-origin: 332px 312px;
  display:block;
}

.generate .frame-cover {
  position: absolute;
  width: 650px;
  top: 240px;
  left: 636px;
}

.generate .slider-mask {
  position: relative;
  width: var(--mask-d);
  height: var(--mask-h); 
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  top: 321px;
  left: 3px;
}

.generate .frame-select {
  display: flex;
  gap: 26px;
  position: absolute;
  top: 1022px;
  left: 593px;
  align-items: center;
}
.generate .frame-select .yes-warp,
.generate .frame-select .no-warp {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
}

.generate .frame-select .check-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #fff;
  border: 2px solid #666;
  outline: 4px solid #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, border-color .3s;
}

/* チェックマーク */
.generate .frame-select .check-btn::after{
  content: "";
  position: absolute;
  width: 10px; /* 少し太く見せるため幅大きめ */
  height: 18px;
  border-right: 5px solid transparent;  /* 線を太めに */
  border-bottom: 5px solid transparent;
  transform: rotate(45deg);
  top: 0px; /* ← 少し上に調整 */
  opacity: 0;
  transition: opacity .3s;
}

/* hover時（任意） */
.generate .frame-select .check-btn:hover{
  border-color: #b1870f;
}

/* 選択時：背景色変更＋レ点表示 */
.generate .frame-select .yes-warp.selected .check-btn,
.generate .frame-select .no-warp.selected .check-btn {
  background: #e6c86e;
  border-color: #b1870f;
}
.generate .frame-select .yes-warp.selected .check-btn::after,
.generate .frame-select .no-warp.selected .check-btn::after{
  border-color: #000; /* レ点の色 */
  opacity: 1;
}
.generate #frame-canvas {
  display: none;
}
.generate .rare-badge {
  position: absolute;
  width: 343px;
  top: 253px;
  right: 341px;
  z-index: 10;
}
/* レスポンシブ */
@media (max-width: 768px) {
  .generate #page-title {
    top: calc(-30px - ((186px * var(--sp-ui-scale)) - 186px));
  }
  .container-warp h2 {
    top: calc(180px - ((57px * var(--sp-ui-scale)) - 57px));
  }
  .container-warp h2 img {
    height: calc(57px * var(--sp-ui-scale));
  }
  .generate .caption-warp {
    top: 827px;
  }
  .generate .caption-warp img {
    width: calc(973px * var(--mini-ui-scale));
    height: auto;
  }
  .generate .btn-box {
    gap: calc(12px * var(--mini-ui-scale));
    top: 920px;
  }
  .generate .btn-box img {
    width: calc(407px * var(--mini-ui-scale));
    height: auto;
  }
  .generate .frame-select {
    left: 50%;
    transform: translateX(-50%); /* 横方向だけ移動 */
    gap: calc(26px * var(--sp-ui-scale));
    top: 1100px;
  }
  .generate .frame-select .check-btn{
    width: calc(32px * var(--sp-ui-scale));
    height: calc(32px * var(--sp-ui-scale));
    border-radius: calc(4px * var(--sp-ui-scale));
    border: calc(2px * var(--sp-ui-scale)) solid #666;
    outline: calc(4px * var(--sp-ui-scale)) solid #000;
  }
  .generate .frame-select .check-btn::after{
    width: calc(10px * var(--sp-ui-scale)); /* 少し太く見せるため幅大きめ */
    height: calc(18px * var(--sp-ui-scale));
    border-right: calc(5px * var(--sp-ui-scale)) solid transparent;  /* 線を太めに */
    border-bottom: calc(5px * var(--sp-ui-scale)) solid transparent;
  }
  .generate .frame-select img {
    width:calc(93px * var(--sp-ui-scale));
  }
  .generate .frame-select .yes-warp img {
    width:calc(44px * var(--sp-ui-scale));
  }
  .generate .frame-select .no-warp img {
    width:calc(48px * var(--sp-ui-scale));
  }
  .generate .frame-select .yes-warp,
  .generate .frame-select .no-warp {
    gap: calc(13px * var(--sp-ui-scale));
  }
}
@media (max-width: 430px) and (min-height: 600px) {
  :root {
    --mask-d: 492px;
    --mask-h: 465px;
    --canvas-scale: 0.78;
  }
  .generate #page-title {
    width: calc(400px * var(--sp-ui-scale));
    top: calc(5px * var(--sp-ui-scale));
  }
  .container-warp h2 {
    top: calc(172px * var(--sp-margin-scale));
  }
  .container-warp h2 img {
    height: calc(42px * var(--sp-ui-scale));
  }
  #concat-canvas {
    transform: scale(1.7);
  }
  .generate .canvas-warp {
    top: calc(300px * var(--sp-margin-scale));
  }
  .generate .caption-warp {
    top: calc(853px * var(--sp-margin-scale));
  }
  .generate.girls .caption-warp {
    top: calc(883px * var(--sp-margin-scale));
  }
  .nim .chara-character {
    width: 324px;
    left: 297px;
    top: 387px;
  }
  .ultra .chara-character {
    width: 269px;
    left: 319px;
    top: 403px;
}
  .mister .chara-character {
    width: 276px;
    left: 303px;
    top: 422px;
  }
  .girls .chara-character {
    width: 148px;
    left: 303px;
    top: 443px;
  }
  .girls .chara-character.c2 {
    width: 142px;
    right: 336px;
    top: 443px;
  }
  .gogo .chara-character {
    width: 280px;
    left: 318px;
    top: 401px;
  }
  .happy .chara-character {
    width: 272px;
    left: 334px;
    top: 421px;
  }
  .my .chara-character {
    width: 263px;
    left: 293px;
    top: 857px;
  }
  .funky .chara-character {
    width: 260px;
    left: 294px;
    top: 630px;
  }
  .im .chara-character {
    width: 333px;
    left: 290px;
    top: 449px;
  }
  .chara-character img {
    width: 100%;
    height: auto;
  }
  .generate .btn-box {
    top: calc(940px * var(--sp-margin-scale));
  }
  .generate.girls .btn-box {
    top: calc(970px * var(--sp-margin-scale));
  }
  .generate .frame-select {
    top: calc(1087px * var(--sp-margin-scale));
  }
  .generate .slider-mask {
    top: 470px;
  }
  .generate .frame-cover {
    width: 860px;
    top: 370px;
    left: 531px;
  }
  .generate .frame-cover img {
    width: 100%;
    height: auto;
  }
  .generate .swiper-button-next,
  .generate .swiper-button-prev {
    top: 710px;
  }
  .generate .swiper-button-next {
    right: 275px;
}
  .generate .color-select {
    width: 163px;
    top: 663px;
    right: 410px;
  }
  .generate .cp-btn {
    top: calc(990 * var(--ui-scale) * var(--tab-ui-scale));
  }
}