@charset "utf-8";

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}

body { overflow-x: hidden;font-family:"M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; font-variant-east-asian: proportional-width;/*  font-feature-settings: "palt"; */font-weight: 400;font-style: normal;}
ul { list-style: none; }
fieldset,img { border: 0; vertical-align: middle; overflow: hidden; }
a{color: #fff;  cursor: pointer;}
a[href]:hover { color: #000; }
.tuline { text-decoration: underline; }
.clear { clear: both; display: block; height: 0; overflow: hidden; }
img{ max-width:100%; height:auto;}

.hop08{transition: opacity 0.4s;}
.hop08:hover{ opacity: 0.8; }

.color_whi{ color:#ffffff;}
.color_red02{ color:#a20303;}
.color_red{ color:#ff3200;}
.color_ered{color: #e5001b;}
.color_pink{ color: #ec6d74;}
.color_yellow{ color: #f6e400;}
.color_inblue{ color: #1d4282;}
.color_upblue{ color: #00b1d4;}
.color_green{ color: #009754;}
.color_egreen{color: #8cca8e;}
.color_orge{ color: #ca9500;}
.color_cucu{ color: #852a8a;}
.color_gray{ color: #8b8c8b;}

.fs80{font-size:0.8em; line-height: 1.6;}
.fs90{font-size:0.9em; line-height: 1.6;}
.fs110{font-size:1.1em; line-height: 1.6;}
.fs120{font-size:1.2em; line-height: 1.5;}
.fs140{font-size:1.4em; line-height: 1.5;}
.fs150{font-size:1.5em; line-height: 1.4;}
.fs160{font-size:1.6em; line-height: 1.4;}
.fs180{font-size:1.8em; line-height: 1.3;}
.fs200{font-size:2em; line-height: 1.3;}


.align_center{text-align: center;}
.fwb{ font-weight: bold;}

.an_scl{ opacity: 1; }
.pc_none{ display: none; }
.sp_none{ display: block; }


.wf-PO{font-family: "Potta One", system-ui;font-weight: 400;font-style: normal;}

.ytb_mob{ padding:0 0 3% 0;width:900px; max-width: 100%; margin:0 auto;box-sizing: border-box;}
.ytb_inst{ width: 100%; padding-bottom: 52.6%; position: relative;}
.ytb_inst iframe{ position: absolute; top: 0; left:0; width: 100%; height: 100%; }

:root{
  --htf: 100px;
  --bdf: 0.2rem;
  --blnum:100px;
  --mob-maxW:90%;
  --postop:0.5rem;/*btn_l*/
  --poslr:0.5rem;/*btn_l*/
  --maincolor: #ca9500;
  --color-Schedule: #ff9600;
  --color-Ticket:#d87bff;
  --color-Goods:#4dc2ff;
  --color-News:#cfb000;
  --color-Special:#74cf4c;
  --color-Information:#8ca1ff;
  --titcl: #fff;
}


/******************************************************************/
html{ font-size:var(--htf);overflow-x: hidden; overflow-y: auto;}
html.is-loading{overflow: hidden;}
html.visible{overflow-x: hidden; overflow-y: auto;}
body{font-size:var(--bdf);line-height: 1.7; }
.headmob{ position: relative;  background:#0065e2 url("../images/top_bg.jpg") center 0 no-repeat; background-size: 100% auto; padding: 0.5rem 0 0 0; }
  .toplogo{ width: 34%; max-width: 66%; position: relative; margin: 0 auto;animation:cloud-float 18s ease-in-out infinite,cloud-breathe 21s ease-in-out infinite; z-index: 20;}

  @keyframes cloud-float {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-0.2rem);}
  }
  @keyframes cloud-drift {
    0%, 100% {translate: -0.3rem 0;}
    50% {translate: 0.3rem 0;}
  }
  @keyframes cloud-breathe {
    0%, 100% {scale: 1 1;}
    50% {scale: 1.02 1.02;}
  }

  .top_p_tx{ position: absolute; z-index:2; top: 0; left:1%; width: 61.7%;}
  .logo{ position:relative; z-index:1; width: 100%; height: auto; padding-top:7.8125%;}
  .toptext{ padding:10vw 0 1.8rem 0; text-align: center; font-size:1.5em; line-height:1.8; color: #fff; max-width: 80%; margin: 0 auto; font-weight: 700; position: relative; z-index: 5;}

  .posball{ position: absolute; top:var(--tY);left: calc(50% - var(--lX)); z-index: 12; height: auto; animation:ballshow 1.2s ease-out both; animation-delay: var(--ad,0s); z-index:1 ; opacity: 0;}
  .pos_ball01{--tY:4.23rem; --lX:4.65rem; --at:11s;--ad:1s; width: 0.65rem;}
  .pos_ball02{--tY:6.33rem; --lX:7.3rem; --at:10s;--ad:2s; width: 0.9rem;}
  .pos_ball03{--tY:9rem; --lX:5.9rem; --at:9s;--ad:1.5s; width: 0.96rem;}
  .pos_ball04{--tY:12.18rem; --lX:7.77rem; --at:11s;--ad:0s; width: 0.81rem;}

  .pos_ball05{--tY:4.9rem; --lX:-3.9rem; --at:11s;--ad:1.6s; width: 0.78rem;}
  .pos_ball06{--tY:7.68rem; --lX:-6rem; --at:10s;--ad:0s; width: 0.96rem;}
  .pos_ball07{--tY:9.3rem; --lX:-4.3rem; --at:12s;--ad:1.3s; width: 0.65rem;}
  .pos_ball08{--tY:12.8rem; --lX:-7.1rem; --at:10s;--ad:0.5s; width: 1.1rem;}
  .pos_gc01{--tY:6.12rem; --lX:-5.35rem; --at:11s;--ad:2s; width: 0.78rem;}
  .pos_gc02{--tY:10.4rem; --lX:-6.47rem; --at:11s;--ad:1.2s; width: 1.4rem;}

  @keyframes ballshow {
    from {opacity: 0; transform: scale(0.9);}
    to {opacity: 1; transform: scale(1);}
  }
  /* @keyframes ballshow {
    0% {top:3rem;left: 50%; opacity: 0;transform: scale(0.8,0.8);}
    2% {opacity: 1;transform: scale(0.5,0.5);}
    5%{top:0;left: calc(50% - var(--lX) / 2);opacity: 1;}
    10% {top:var(--tY);left: calc(50% - var(--lX));opacity: 1;transform: translate(0,0)  scale(1,1);}
    40% {transform: translate(0.1em,0.2em);}
    60% {transform: translate(0.05em,-0.1em);}
    80% {top:var(--tY);left: calc(50% - var(--lX));opacity: 1;transform: translate(-0.15em,0);}
    85% {top:var(--tY);left: calc(50% - var(--lX));opacity: 0;transform: translate(0,0);}
    90% {top:var(--tY);left: calc(50% - var(--lX));opacity: 0;}
    100% {top:var(--tY);left: calc(50% - var(--lX));opacity: 0;}
  } */


/* menu z-index: 300 */
.menu_mob{width: 100%;margin: 0 auto; padding:0; z-index: 300; position: absolute; top:45.5vw;left: 0; width: 100%;  }
.ban_tpnsc{display:none;}

.menu_mob.pfix{ position: fixed; left: 0; top: 0;bottom:auto; z-index: 300;height: auto; }
  .inner_mb{width: 100%;  margin: 0 auto; top: 0;display: flex; justify-content: center; align-items: center;}
  .menu_mob ul{ display: flex; justify-content: center;font-size: 1.25em;line-height: 1; position: relative; }
  .menu_mob.pfix ul{ animation: msslid 0.45s both; }
  .menu_mob ul::before{ content: ""; display: block; position: absolute; top: calc(50% - 0.12em);left: 3em; width: calc(100% - 6em); height: 0.24em; background-color: #fff;}

  .inner_mb ul li{ position: relative; z-index:310; margin:0.1em; perspective: 200px;}
  .menu_inlist a{--adt:0.6s;--td:0s;--cl:#000;--bdbg:#000;--bg:#ff9600; position:relative; display:block; color:var(--cl)!important;  padding:0.75em 1em;border-radius: 20em; text-decoration: none; transition: all 0.3s ease-in-out; box-sizing: border-box; 
    perspective: 200px;
  }
  .menu_inlist a::before,.menu_inlist a::after{content: ""; display: block; position: absolute; inset: 0; backface-visibility: hidden;box-shadow:inset 0 0.16em 0px var(--bdbg),inset 0 -0.16em 0px var(--bdbg),inset 0.16em 0 0px var(--bdbg),inset -0.16em 0 0px var(--bdbg),inset -0.12em -0.12em 0px var(--bdbg),inset 0.12em -0.12em 0px var(--bdbg),inset -0.12em 0.12em 0px var(--bdbg),inset 0.12em 0.12em 0px var(--bdbg);background: var(--bg); border-radius: 20em;border: 0.24em solid #fff; z-index: -1; transition: transform 0.6s ease;transform-style: preserve-3d;z-index: 300;}
  .menu_inlist a::after{transform: rotateX(180deg);--cl:#ff9600;--bg:#000;}
  .menu_inlist a span{ display: block; position: relative; transition: transform 0.5s ease,color 0.5s ease;transform-style: preserve-3d; z-index: 310;}
  .menu_inlist a:hover,.menu_inlist .sel a{--cl:#ff9600;}
  .menu_inlist a:hover::before,.menu_inlist .sel a::before{transform: rotateX(180deg);}
  .menu_inlist a:hover::after,.menu_inlist .sel a::after{transform: rotateX(360deg);}
  .menu_inlist a:hover span,.menu_inlist .sel a span{transform: rotateX(360deg);}

  .goodsnav .bmn-Goods a{--bg:#ff8a00!important;}
  .ticketnav .bmn-Ticket a{--bg:#ff8a00!important;}
/* menu */

/**/
@keyframes msslid {
  0%{ transform: translateY(60%); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}
}
@keyframes msrotateX01 {

  0%{ transform: rotateX(0deg);}
  20%{transform: rotateX(90deg);}
  50%{transform: rotateX(180deg);}
  100%{transform: rotateX(180deg);}
}
@keyframes msrotateX02 {
  0%{ transform: rotateX(180deg);}
  20%{transform: rotateX(270deg);}
  50%{transform: rotateX(360deg);}
  100%{transform: rotateX(360deg);}
}
@keyframes msrotateX03 {
  0%{ transform: rotateX(0deg);color:#000;}
  20%{transform: rotateX(180deg);color:#ff9600;}
  50%{transform: rotateX(360deg);color:#ff9600;}
  100%{transform: rotateX(360deg);color:#ff9600;}
}

@keyframes msslid {
  0%{ transform: translateY(60%); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}
}

@keyframes lineus {
  0%{ transform: scale(1, 1);}
  50%{ transform: scale(1.3, 1.3);}
  100%{transform: scale(1, 1);}
}

.fadeIn{ animation: fadeIn 0.7s ease-out both; }
@keyframes fadeIn {
  0%{ opacity: 0;}
  100%{opacity: 1;}

}
.fadeUp{ animation: fadeUp 0.7s ease-out both; }
@keyframes fadeUp {
  0%{ transform: translateY(0.28rem); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}

}
.fadeInfo{animation:fadeInfo 0.6s ease-out both;}
@keyframes fadeInfo {
  0%{transform:translateY(0.18rem); opacity:0;}
  100%{transform:translateY(0); opacity:1;}
}

.btn_l{ position: fixed; top:var(--postop); left:var(--poslr); width:min(1rem, 5.1vw); z-index: 20;}
.btn_r{position: fixed; top:var(--postop); right:var(--poslr); width:min(1rem, 5.1vw); z-index: 20;}
.btn_01{position: fixed; top:min(9.25rem, calc(var(--postop) + 43vw)); right:calc(var(--poslr) * 0.9); width:min(1rem, 5.67vw); z-index: 20; transition: opacity 0.4s; }
.btn_01:hover{opacity: 0.7!important;}

.wrap{ position: relative; }
.mob_inner{ position: relative; color:#fff;border-top:0.14rem solid #000;padding-bottom: 2.2rem; background:var(--monbg,#ff9600) url("../images/bg.png") center 0 repeat; background-size:4.06vw auto;background-attachment: fixed;}
.Schedule_mob{border:0;}
  .fly_op02{ position: relative; top: -1.7rem;}
  .title_h2{--h2higeh:1.57rem; position: relative; height:var(--h2higeh); text-align: center; top:calc(0px - var(--h2higeh) * 0.6); z-index: 10; margin-bottom: -0.3rem;}
  .Schedule_mob .title_h2{ top:calc(0px - var(--h2higeh) * 0.56);}
  .title_h2 img{height: 100%;}
  .title_h3{text-align: center; display: flex; justify-content: center; align-items: center; font-size:2.5em; line-height: 1.2; color:var(--titcl);padding:2em 0 1em 0;letter-spacing: 0.15em; }
  .smtitle_h3{font-size:1.5em; line-height: 1.3;}
  .title_h3::before{content: "";display: block; width:0.2em; height: 0.2em; border: 0.18em solid var(--titcl);border-radius: 100%;margin-right:0.5em; }
  .title_h3::after{content: "";display: block; width:0.2em; height: 0.2em; border: 0.18em solid var(--titcl);border-radius: 100%;margin-left:0.5em; }

  


  /* -mobbgline- */
  .mobbgline{ position: absolute; top:-11.1vw; left: 0;height:22.2vw; width: 100%; display: flex;align-items: center;  z-index: 7; overflow: hidden;}
  .bgline_m{width: 4.25rem;}
  .bgline_l{flex: 1;height: 100%;background:#000;clip-path: polygon(0 0,100% 50%,0 100%); position: relative;}
  .bgline_r{flex: 1;height: 100%;background:#000;clip-path: polygon(0 50%,100% 0,100% 100%);position: relative;}
  .bgline_l::before,.bgline_r::before{content: "";display: block;position: absolute;top:0; height: 200%; width: 200%; background-image: linear-gradient(to right,#8ca1ff 0%,#74cf4c 10%,#cfb000 20%,#4dc2ff 30%,#d87bff 40%,#ff9600 50%,#d87bff 60%,#4dc2ff 70%,#cfb000 80%,#74cf4c 90%,#8ca1ff 100%); background-size: 50% 100%; background-repeat: repeat-x;animation: bgpos 5s linear infinite; z-index: 7;}
   .bgline_l::before{clip-path: polygon(0 0,100% 50%,0 100%); transform: translate(-0.12rem,-25%);right:0;}
   .bgline_r::before{clip-path: polygon(0 50%,100% 0,100% 100%); transform: translate(0.12rem,-25%);left: 0;animation-direction: reverse;}
   .bgline_l::after,.bgline_r::after{content: "";display: block;position: absolute; inset: 0; z-index: 8;}
   .bgline_l::after{background-image: linear-gradient(to left,var(--bgimg,#000));}
   .bgline_r::after{background-image: linear-gradient(to right,var(--bgimg,#000));}
    @keyframes bgpos {
      0%{background-position: 100% 0;}
      100%{background-position: 0 0;}
    }
  /* -mobbgline- */


  .mobin_con{ position: relative; z-index: 10; width:100%; box-sizing:border-box; width: 1100px; max-width:var(--mob-maxW); margin:0 auto;  }
  .pic_mob img{ display: block;}
    .mob01_text{ line-height: 2.5; }
      .time_tx{font-size:1.7em; line-height: 1.1; font-weight: 700; padding-bottom:1.3em; letter-spacing: 0.15em; display: flex; align-items: center; justify-content: center;}
      .ico_text{ font-size: 0.7em;display: inline-block; padding: 0.1em 0.2em; background-color: #fff; color: #ff9600;border-radius: 0.4em; letter-spacing: 0; margin-left:0.3em;}
    
    .textbox_border{--fn:6em; display: inline-block; position: relative; border: 0.04rem solid #fff; padding:1.5em 2em 2em 2em;min-width: 26em; border-radius: 0.34rem;box-sizing: border-box;}
      .textbox_tit{ display: flex; justify-content: center; align-items: center; font-size: 1.9em; line-height: 1.2; font-weight: bold; padding: 0 0.5em;}
    .flexmob{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 0.4em;}
    .comingsood{padding: 5em 0 3em 0;}


  .Schedule_mob{--monbg:var(--color-Schedule);--hovercolor:var(--color-Schedule);}
  .Schedule_mob .title_h2{margin-bottom: -1rem;}
    .cast_p01{padding-bottom: 0.5rem;}
    .cast_p02{padding-bottom: 0.5rem;}
    .cast_p03{padding-bottom: 0.3rem;}

  .Ticket_mob{--monbg:var(--color-Ticket);--hovercolor:var(--color-Ticket);}
    .mob02_pic{ display:grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.2rem; width: 1550px; max-width: var(--mob-maxW); margin: 0 auto;}
    .mob02_pic .picinner{}
    .mob02_pic .picinner img{ border-radius: 0.2rem;overflow: hidden;}
    .picintx{ text-align:center; padding-top: 0.2em; font-size: 1.2em;}
    .pic_ico{grid-column: 1 / -1;text-align: right; font-size: 0.8em;}
    

  .Goods_mob{--monbg:var(--color-Goods);--hovercolor:var(--color-Goods);}


  .News_mob{--monbg:var(--color-News);--hovercolor:var(--color-News);}
    .n_list li{ margin: 0 auto;}  
    .n_list li{ max-width: 960px; font-size: 1.2em; padding: 1.6em 0; border-bottom: 2px solid rgba(255,255,255,0.6);}
    .n_list li span{ display: block; width: 100px; margin: 0 auto 0.5em; text-align: center; font-size: 0.8em; background-color: #fff; color: var(--color-News); border-radius: 0.4em; padding: 0.1em 0.4em;}
    .n_list li:last-child{ border-bottom: none;}
    .youtube{ position: relative; width: calc(100% - 0.2rem); max-width: 960px; margin: 0.3em auto 0; background-color: #000; border-radius: 0.2rem; border: 0.1rem solid #fff; aspect-ratio: 16 / 9; }
    .youtube iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 0.2rem; }


  .Special_mob{--monbg:var(--color-Special);--hovercolor:var(--color-Special);}
  .Information_mob{--monbg:var(--color-Information);--hovercolor:var(--color-Information);}


  .link_inmob{ padding-bottom: 0.6rem;}
    .title_logo{ width: 400px; max-width:78%; margin: 0 auto; padding:0.5rem 0 0 0;}
      .logo_in{ width: 100%;}
    .tit04{text-align: center; font-weight: 500; font-size:1.5em; line-height: 1.6; letter-spacing: 0.4em; }
    .sns_inner{--snsw:4em; padding: 0.6rem 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
      .ban_sns{ width: var(--snsw); height: var(--snsw); background-color: #fff; border-radius: 100%; padding: calc(var(--snsw) * 0.2); box-sizing: border-box; transition: all 0.4s;}
      .ban_sns:hover{ transform: scale(1.1,1.1); }
      .ban_bandai{height: 4em; display: inline-block;}
      .ban_bandai img{height:100%; width: auto;}
      
    .ban_testmob{ padding: 0.3rem 0 0.7rem 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
      .ban_testbox{ font-size: 1em; line-height: 1; font-weight: bold; padding:0.6em 0.7em; background-color:transparent; color: #fff; border: 0.02rem solid #fff; border-radius: 0.5em; margin: 0.6em; text-decoration: none; transition: all 0.4s; text-align: center;}
      .ban_testmob .ban_testbox{ min-width: 17em;}
      .ban_testbox[href]:hover{ background-color:var(--hvbg,#fff); color:var(--hovercolor,#ff9600);}
    
    .ban_listmob{padding: 0.3rem 0 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
      .ban_listin{ border-radius: 0.5em; overflow: hidden; width: 2.55rem;margin:0 0.2rem 0.2rem 0;box-sizing: border-box; transition: all 0.4s;}
      .ban_listin img{ width: 100%;}
    
      .ban_listin:hover{ transform: translate(0px,-2px); box-shadow: 0px 3px 4px #9e5d00;}



footer{ position: relative;  width: 100%; font-size: 12px; line-height: 1.6; background-color: #000;}
.foot{ padding:40px 0; color: #fff; text-align: center;  }


.pgtp{position: fixed; bottom: 0.3rem; right:0.45rem; width: 0.7rem; height: 0.7rem; padding: 0.12rem; text-align: center; text-decoration: none; border-radius:100%;box-sizing: border-box; background-color: #000; display:block; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s; z-index: 30;}
.pgtp img{max-width:auto; max-height: 100%; transition: all 0.4s; position: relative; top: 0;}
.pgtp.is-visible{opacity:1; visibility:visible; pointer-events:auto;}
.pgtp:hover img{top:-0.15rem;transform: scale(1.2,1.2);}




.ban_more{ margin: 5%; text-align: center; }
.ban_more a{ display: inline-block; font-size:0.26rem;  padding: 0.5em 1.5em; line-height: 100%; text-decoration: none;  transition:all 0.4s; color:#fdfff2; background-color: #000; border-radius: 0.5em; font-weight: 500; }
.ban_more a:hover{ color:#fff;background-color:var(--maincolor);}


@media screen and (max-width:1920px) {
  .headmob{background-size: 110% auto; }
  .toplogo{width: 46vw;}
  .menu_mob{top:calc(58.5vw + 1.5em);}
  .toptext{padding-top: 11.5%;}

}

@media screen and (max-width:1380px) {
  /* :root{
    --postop:0.25rem;
    --poslr:0.2rem;
  } */
  .menu_mob ul{font-size: 1.1em;}
}


@media screen and (max-width:1200px) {
  :root{
    --htf: 8.33vw;
  }
  /* .headmob{background-size: 160% auto; } */
  
}


@media screen and (max-width:768px) {

  :root{
    --htf: 13.02vw;
    /* Continuous body scale, meeting desktop size at 768px. */
    --bdf: clamp(12px, calc(11.24px + 0.203vw), 12.795px);
    --mob-maxW:90%;
    --postop:0.65rem;/*btn_l*/
    --poslr:0.2rem;/*btn_l*/

  }

html,body{ width: 100%; overflow-x: hidden; }

.pc_none{ display: block; }
.sp_none{ display: none; }

.headmob{background-size: 174% auto; }
.toplogo{width: 66vw;}
 .toptext{padding: 2rem 0 1.2rem 0; line-height: 1.5;}
 .posball{display: none; animation: none;}



/* menu */
.menu_mob{padding: 0; font-size:1.4em;border:0;top:93.8vw; }
  .menu_mob::before{content: "";height:0.14rem; width: 100%; z-index: 301; position: absolute; bottom:-0.14rem;left: 0; transition: height 0.4s,bottom 0.4s; }
  .ban_tpnsc{ display:block; text-align: center; height: 0.4rem; position: absolute; bottom: 0rem; left: 0; width: 100%;}
  .ban_op{--lineH:4px;--TBn:calc(50% - 0.2rem); display:inline-block; background:#000; border-radius: 999px; border:0.06rem solid #fdfff2;  line-height: 0; position: relative; padding:0.41rem 0.19rem; width: 1rem;height: 1rem; box-sizing:border-box; z-index: 351; transform: scale(1.2); cursor:pointer;}
  .ban_op::before{content: "";display: block; width:0.5rem; height:var(--lineH);background:var(--opcls,#fdfff2); position:absolute; top:var(--TBn); left:0.19rem; transition:all 0.3s; transform-origin: 0 100%; border-radius: 99px; }
  .ban_op::after{ content: ""; display: block; width:0.5rem; height:var(--lineH);background:var(--opcls,#fdfff2); position:absolute; bottom:var(--TBn); left:0.19rem;transition:all 0.3s;  transform-origin: 0 0; border-radius: 99px;}
  .ban_op span{ display: block;width:0.5rem; height:var(--lineH); background:var(--opcls,#fdfff2);transition:all 0.3s; border-radius: 99px; }
  .ban_op.sel::before{transform: rotate(45deg) translateX(0);transform-origin: 50% 50%;
      top: 0.425rem;}
  .ban_op.sel::after{transform: rotate(-45deg) translateX(0);transform-origin: 50% 50%;
      top: 0.425rem;bottom:auto;}
  .ban_op.sel span{ opacity:0;}
  .menuopen .ban_op{ position: fixed; right: 0.3rem;top: 0.2rem;}
  .menuopen .ban_op.sel{background:none; border: 0; --opcls:#fff;}
    .menuopen .ban_op.sel::before{ width: 0.8rem;}
    .menuopen .ban_op.sel::after{ width: 0.8rem;}

  .inner_mb{width: 100%;max-height:100vh;max-height: 100dvh; overflow-y: auto; padding:0.4rem 0; display: none; position:absolute; z-index: 301;  }
  .inner_mb.is-open{display:block; animation:menuOpen 0.4s ease-out both;}
  @keyframes menuOpen {
    0%{opacity:0; transform:translateY(-0.15rem);}
    100%{opacity:1; transform:translateY(0);}
  }
  .inner_mb ul{padding:1rem 0 0.4rem 0; background: none; font-size: 1em; }
  .menuopen .inner_mb ul{position:relative; top:0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
  .menu_mob ul::before{display: none;}

  .inner_mb ul li{ width:70%; box-sizing:border-box; margin:2% 4%; }
  .menu_inlist a{text-align: center; padding: 1.2em 1em}

  .pfix .ban_tpnsc{position:static;}
  /* .pfix .inner_mb{position:absolute;top:100%; left: 0;} */
  .menu_mob.pfix ul{ animation:none; }
  .menu_mob.pfix{padding:0.1rem 0 0 0; background: #000; }
  .menu_mob.pfix .inner_mb ul{padding:1rem 0;}

  .menuopen .menu_mob{position: fixed; top: 0; left: 0; height: 100vh; background-color: #000;}
  .menuopen .menu_mob::before{ height:110vh;top:0; bottom: auto;
    background-size: 120% auto;}
  /* menu */

  .btn_l{ width:8.2vw;}
  .btn_r{width: 8.2vw;}
  .btn_01{width: 8.677vw;top:5.9rem;}

  .mob_inner{padding-bottom:1.6rem;background-size:8.86vw auto;}
    .fly_op02{top: -2.1rem;}
    .time_tx{padding:0.5em 0 1em 0;}
    .title_h2{margin-bottom: -0.4rem;--h2higeh:1.2rem;top: calc(0px - var(--h2higeh) * 0.62);}
    .title_h3{font-size: 2.2em; letter-spacing: 0.1em; padding-bottom:0.5em;}
    .smtitle_h3{text-align: left; display: block; font-size: 1.9em; letter-spacing: 0;}
    .smtitle_h3::before,.smtitle_h3::after{display: none; }
    .mobbgline{height: 16vw; top: -8vw;}
    .bgline_m{width: 3.25rem;}
    .textbox_border{border-radius: 0.2rem;}
    .mob02_pic{grid-template-columns: repeat(1, 1fr);}
    .pic_ico{text-align: center;}
    .picintx{ font-size: 1.3em;}


    .cast_p01{padding-bottom: 0.3rem;}
    .cast_p02{padding-bottom: 0.3rem;}
    .cast_p03{padding-bottom: 0.1rem;}

    .Information_mob{ padding-bottom:0.8rem;}
    .Information_mob .infotxin{text-align: left; font-size:1.1em;}
    .fs80{font-size:1.1em;}
    .ban_listmob{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0.3rem; padding-bottom: 0.2em;}
    .ban_listin{ width: auto;margin: 0;}
    .ban_listmob > :last-child:nth-child(odd) { grid-column: span 2;justify-self: center;width: calc(50% - 0.1rem);}
    .ban_listmob > :last-child:nth-child(odd).ban_bandai { width:66%;height: auto;}
    .ban_listmob .ban_bandai img { width: 100%;}
    .ban_testmob .ban_testbox{ font-size: 1.5em;max-width: 100%;}

    .link_inmob{padding-bottom:0.8rem;}
    .sns_inner{--snsw: 6em;}

  .pgtp{right:0.2rem}
  .foot{ width: 100%;font-size:1em; position: relative; }
}

@media screen and (max-width:480px) {


  .ban_op{--lineH:3px;--TBn:calc(50% - 0.2rem);}
  .menu_inlist a{}


  .title_h3{letter-spacing: 0;}



}


@media ( prefers-reduced-motion : reduce){
  *,* ::before ,* ::after { animation-duration :.01ms !important ; animation-iteration-count : 1 !important ; transition-duration :.01ms !important ; scroll-behavior :auto !important ;}
}

/* Keep navigation usable when JavaScript is unavailable. */
@media screen and (max-width:768px) {
  html:not(.menu-ready) .menu_mob{position:static; padding-top:0.4rem;}
  html:not(.menu-ready) .ban_tpnsc{display:none;}
  html:not(.menu-ready) .inner_mb{display:block; position:static; max-height:none;}
  html:not(.menu-ready) .inner_mb ul{flex-wrap:wrap; padding:0;}
}

/* Playful effects: animate artwork, keeping the copy still. */
@media (prefers-reduced-motion: no-preference) {
  .btn_01 img {animation: ticket-jackpot 5s ease-in-out infinite;}
  .btn_01:hover, .btn_01:focus-visible {opacity:1!important;}
  .btn_01:hover img, .btn_01:focus-visible img {animation: ticket-jackpot 1.3s ease-in-out infinite;}
  .toplogo.sparkle-hit .logo {animation: logo-hit 650ms ease-out;}
}

@keyframes ticket-jackpot {
  0%,65%,100% {filter:drop-shadow(0 0 0 transparent);}
  72%,84% {filter:drop-shadow(0 0 9px #ffe55c);}
  78%,90% {filter:drop-shadow(0 0 13px #fff6bc);}
}
@keyframes logo-hit {
  0%,100% {filter:drop-shadow(0 0 0 transparent);}
  35% {filter:drop-shadow(0 0 18px #ffe270);}
}
.coin-burst {position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:400; contain:strict;}
.coin-burst i {position:absolute; left:var(--burst-x); top:var(--burst-y); width:var(--coin-size,64.8px); aspect-ratio:218 / 177; background:url("../images/gc.png") center / contain no-repeat; filter:drop-shadow(0 1px 3px rgba(255,198,45,.6)); animation:coin-fly 1100ms cubic-bezier(.08,.65,.2,1) both;}
@keyframes coin-fly {
  0% {opacity:0; transform:translate(-50%,-50%) rotate(0deg) scale(.65);}
  12% {opacity:1;}
  70% {opacity:1;}
  100% {opacity:0; transform:translate(calc(-50% + var(--coin-x)),calc(-50% + var(--coin-y))) rotate(var(--coin-spin)) scale(1);}
}
/* Keep the user-triggered coin burst available with reduced motion enabled. */
@media (prefers-reduced-motion: reduce) {.coin-burst i {animation-duration:1100ms !important;}}

/* Hero depth: independent translate preserves existing reveal/scale animations. */
.headmob {background-position:center var(--hero-bg-y, 0px);}
.toplogo {translate:0 var(--hero-logo-y, 0px);}
.posball {translate:0 calc(var(--hero-scroll-y, 0px) * var(--ball-depth, -.18));}
/* Smaller balls recede; larger balls move faster in the foreground. */
.pos_ball01, .pos_ball07 {--ball-depth:.18;}
.pos_ball05 {--ball-depth:.08;}
.pos_ball04 {--ball-depth:.04;}
.pos_ball02 {--ball-depth:-.08;}
.pos_ball03, .pos_ball06 {--ball-depth:-.18;}
.pos_ball08 {--ball-depth:-.3;}
.pos_gc01, .pos_gc02 {translate:0 var(--hero-coin-y, 0px);}
.headmob::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 18% 22%,rgba(235,255,255,.95) 0%,rgba(30,225,255,.85) 12%,transparent 43%),radial-gradient(ellipse at 82% 32%,rgba(255,235,255,.9) 0%,rgba(255,65,220,.8) 13%,transparent 43%),radial-gradient(ellipse at 50% 58%,rgba(255,255,225,.85) 0%,rgba(255,205,65,.65) 10%,transparent 36%);
  background-size:125% 125%; mix-blend-mode:screen; opacity:var(--hero-light-level,.24);
}
@media (prefers-reduced-motion:no-preference) {
  .headmob::before {animation:hero-light-drift 12s ease-in-out infinite alternate; transition:opacity var(--hero-light-fade,350ms) ease-in-out;}
}

@keyframes hero-light-drift {
  from {background-position:0% 0%;}
  to {background-position:100% 70%;}
}
@media (prefers-reduced-motion:reduce) {
  .headmob {background-position:center 0;}
  .toplogo, .posball {translate:none;}
  .headmob::before {opacity:.18;}
}

/* Keep desktop goods inside the fixed ticket banners. */
@media screen and (min-width:769px) {
  .mob02_pic {
    --goods-side-space:calc(var(--poslr) + min(1rem, 5.67vw) + 0.2rem);
    max-width:min(var(--mob-maxW), calc(100% - var(--goods-side-space) - var(--goods-side-space)));
  }
}

@media screen and (max-width:768px) {
  .wrap {--sp-side-space:calc(var(--poslr) + 8.677vw + 0.12rem);}
  .mob_inner {--mob-maxW:calc(100% - var(--sp-side-space) - var(--sp-side-space));}
  .mob_inner > .title_h3 {max-width:var(--mob-maxW); margin-left:auto; margin-right:auto;}
  .mobin_con {overflow-wrap:anywhere;}
  .textbox_border {min-width:0; width:100%; max-width:100%; padding:1.5em 1em 2em;}
  .textbox_tit {max-width:100%; box-sizing:border-box; font-size:1.6em;}
  .link_inmob {--mob-maxW:90%;}
  .ban_testmob .ban_testbox {min-width:0; box-sizing:border-box; line-height:1.4;}
  .btn_l, .btn_r, .btn_01 {
    filter:opacity(1);
    transition:filter .3s ease, visibility 0s;
  }
  body.sponsor-area-visible .btn_l,
  body.sponsor-area-visible .btn_r,
  body.sponsor-area-visible .btn_01 {
    filter:opacity(0); visibility:hidden; pointer-events:none;
    transition:filter .3s ease, visibility 0s .3s;
  }
}

.keep-together {display:inline-block; white-space:nowrap;}

/* Goods photos open above the fixed ticket controls. */
.goods-zoom {display:block; cursor:zoom-in;}
.goods-zoom:focus-visible {outline:3px solid #fff; outline-offset:5px; border-radius:.2rem;}
html.goods-zoom-open {overflow:hidden;}
.goods-dialog {position:fixed; inset:0; margin:auto; padding:48px 12px 14px; border:0; border-radius:16px; width:max-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); box-sizing:border-box; background:#fff; color:#111;}
.goods-dialog::backdrop {background:rgba(0,0,0,.82);}
.goods-dialog img {display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 130px); margin:auto; object-fit:contain;}
.goods-dialog p {margin:10px 0 0; text-align:center; font-size:16px; line-height:1.5;}
.goods-dialog-close {position:absolute; right:8px; top:6px; width:40px; height:40px; border:0; border-radius:50%; background:#111; color:#fff; font-size:28px; line-height:1; cursor:pointer;}

.goods-dialog-nav {position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:2px solid #fff; border-radius:50%; background:rgba(0,0,0,.8); color:#fff; font-size:36px; line-height:1; cursor:pointer;}
.goods-dialog-prev {left:4px;}
.goods-dialog-next {right:4px;}
.goods-dialog button:focus-visible {outline:3px solid #ff9600; outline-offset:2px;}

/* A small pair of balls frames the mobile logo without covering the banners. */
@media screen and (max-width:768px) {
  .pos_ball01, .pos_ball05 {
    display:block; pointer-events:none; width:4.8vw;
    animation:ballshow 1.2s ease-out both;
    animation-delay:var(--ad);
    --ball-depth:.04;
  }
  .pos_ball01 {left:12%; top:76vw; --ad:.3s;}
  .pos_ball05 {left:84%; top:27vw; width:4.2vw; --ad:.6s; --ball-depth:.07;}
}

/* Mobile accents in the empty space beside the menu and introduction. */
@media screen and (max-width:768px) {
  .pos_ball02, .pos_ball04, .pos_ball06, .pos_ball08 {
    display:block; pointer-events:none; width:4.8vw;
    animation:ballshow 1.2s ease-out both;
    animation-delay:var(--ad);
    --ball-depth:.025;
  }
  .pos_ball02 {left:21%; top:95vw; width:7.5vw; --ad:.8s;}
  .pos_ball06 {left:75%; top:99vw; width:4vw; --ad:1s;}
  .pos_ball04 {left:3%; top:auto; bottom:16%; --ad:1.2s;}
  .pos_ball08 {left:auto; right:2%; top:auto; bottom:9%; width:8vw; --ad:1.4s;}
}

/* Mobile coins occupy the gaps above and below the introduction. */
@media screen and (max-width:768px) {
  .pos_gc01, .pos_gc02 {
    display:block; pointer-events:none;
    animation:ballshow 1.2s ease-out both;
    animation-delay:var(--ad);
    translate:0 calc(var(--hero-scroll-y, 0px) * .025);
  }
  .pos_gc01 {left:66%; top:87vw; width:8vw; rotate:18deg; --ad:1s;}
  .pos_gc02 {left:18%; top:auto; bottom:4%; width:9vw; rotate:-18deg; --ad:1.3s;}
}
@media screen and (max-width:768px) and (prefers-reduced-motion:reduce) {
  .pos_gc01, .pos_gc02 {translate:none;}
}

.ticket-price-unit {font-size:.8em;}