@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 {font-family: "Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif; overflow-x:hidden; }
ul,ol,li,dl,dt,dd{list-style: none;}
fieldset,img { border: 0; vertical-align: middle; overflow: hidden; }
img{ max-width:100%; box-sizing: border-box;}
a { color:inherit; text-decoration:none; transition:opacity 0.4s; }
a:hover { color:#00a0ff;}
.hop08:hover { opacity: 0.8;}

.cl_blu{ color:#00a0ff;}
.cl_cyan{ color:#84c9d9;}
.cl_pnk{ color:#e4007f;}
.cl_red{ color:#e8374a;}
.cl_gly{ color:#838d98;}
.cl_wht{ color:#fff;}
.cl_blk{ color:#000;}

.fs15{ font-size: 15px; font-size: 0.15rem; line-height:1.5;  }


.fb08{ font-size: 0.8em; line-height:1.67; }
.fb09{ font-size: 0.9em; line-height:1.4; }
.fb11{ font-size: 1.1em; line-height:1.6; }
.fb12{ font-size: 1.2em; line-height:1.6; }
.fb13{ font-size: 1.3em;}
.fb13_7{ font-size: 1.375em;}
.fb17{ font-size: 1.7em;}
.fb19{ font-size: 1.9em;}
.fb20{ font-size: 2em;}

.fws{ font-weight:400;}
.fwb{ font-weight:bold;}
.palt{ font-feature-settings:"palt";-moz-font-feature-settings:"palt";-webkit-font-feature-settings:"palt";}

.fw-sm{font-family: "Shippori Mincho", serif;font-style: normal;}
.fw-fc{font-family: "Fira Sans Condensed", sans-serif;font-style: normal;}
.fw-zkg{font-family: "Zen Kaku Gothic Antique", sans-serif;font-style: normal;font-weight: 500;}

.pd_t10{ padding-top: 0.1rem; }
.pd_t20{ padding-top: 0.2rem; }
.pd_t30{ padding-top: 0.3rem; }
.pd_t40{ padding-top: 0.4rem; }
.pd_t50{ padding-top: 0.5rem; }
.pd_t70{ padding-top: 0.7rem; }
.pd_t80{ padding-top: 0.8rem; }
.pd_b10{ padding-bottom: 0.1rem; }
.pd_b20{ padding-bottom: 0.2rem; }
.pd_b30{ padding-bottom: 0.3rem; }
.pd_b40{ padding-bottom: 0.4rem; }
.pd_b50{ padding-bottom: 0.5rem; }
.pd_b70{ padding-bottom: 0.7rem; }
.pd_b80{ padding-bottom: 0.8rem; }

.align_center{text-align: center;}

.palt{font-variant-east-asian: proportional-width; font-feature-settings: "palt";}



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


.inpv{ text-align: center; width: 800px; max-width: 100%;margin: 0 auto;}
.YoutubeWrapper{position:relative;padding-bottom:56.25%;overflow: hidden; display: inline-block; width: 750px; max-width: 100%;}
.YoutubeWrapper iframe {position:absolute;top:0;left:0;height:100%;width:100% ;}

:root{
  --hf:100px;
  --bf: 0.2rem;
  --headbg: #e71f10;
}

/******************************index************************************************/
html{ font-size:var(--hf);overflow: hidden;}
body{ font-size:var(--bf); position:relative; background: #e8f6f4;--bgtime: 3s;overflow: hidden;}
  .bgcl01{--bgcl:rgba(49, 123, 103, 0.8);--lkcl:#317b67;--ftbg:rgba(0,0,0,0.2);}
  .bgcl02{--bgcl:rgba(175, 97, 34, 0.8);--lkcl:#8c6c01;--ftbg:rgba(0,0,0,0.2);}
  .bgcl03{--bgcl:rgba(98, 61, 133, 0.8);--lkcl:#5c199c;--ftbg:rgba(0,0,0,0.2);}
  .bgcl04{--bgcl:rgba(238, 119, 45, 0.8);--lkcl:#8a4113;--ftbg:rgba(0,0,0,0.2);}
  .bgcl05{--bgcl:rgba(134, 41, 128, 0.8);--lkcl:#680f62;--ftbg:rgba(0,0,0,0.2);}


.loading{ position: fixed; top: 0; left: 0; width: 100%; height:100dvh; z-index: 300; background:var(--headbg); }
.loading_logo{ position: absolute; top: 50%; left: 50%; width: 7rem; max-width: 80%; transform: translate(-50%, -50%);}

  .overin .loading{opacity:0; width: 0; height: 0; transition: opacity 0.4s 0.5s,width 0.01s 0.9s,height 0.01s 0.9s; z-index: 19;}
  .overin .loading_logo{opacity:0; transition: opacity 0.5s;}




.overin{overflow-x:hidden; overflow-y: auto;}
.overout{overflow: hidden;}




.warp{ position:relative; z-index:10; min-height:100%; }


/* menu */

#menumob{font-size:1em;--andelay: 0.4s;--antime:0.6s; position: fixed; top: 0; right: 0; width:100%; z-index: 100; transition: all var(--andelay) ease-in-out; transform: translate(102%, 0); transition-delay: var(--andelay); }
  .menuinner{height:100vh; background: #e71f10;box-sizing: border-box;padding: 1rem 0.3rem 0.95rem 0.3rem; display: flex; justify-content: center; align-items: center;align-content: center; text-align: center; flex-wrap: wrap;}
  .menulist{ width: 1000px; max-width:100%;font-size: 1.5em; line-height: 1;
     opacity: 0;transform: translateX(1rem);transition: all calc(var(--andelay) - 0.2s);transition-delay: 0s;
  }
  .menulogo{ width: 100%; width: 5rem; max-width: 90%; display: inline-block; margin-bottom: 0.5rem; }
  .menulist a{ display: block;padding:1em 0em 1.05em 0em;  color: #fff; width: 5rem; max-width: 90%;margin: 0 auto; box-sizing: border-box; background: linear-gradient(to left,transparent 0%,#fff 50%,transparent 100%) 0 bottom no-repeat; background-size: 100% 2px; transition: all 0.4s;}
  .menulist a:hover{ letter-spacing: 0.3em; width:100%; }
  .menulist a.sel{letter-spacing: 0.3em; width:100%; }

  .ban_close{ position: fixed; top: 0.45rem; right: 0.45rem; z-index: 200; }
    #nav-icon {cursor: pointer; width: 0.74rem; height: 0.3rem; /* transition: all 0.3s ease;transform-origin:100% 50%; */}
    .line {fill: white;transform-origin: center;transition: all 0.3s ease;transform-origin:100% 50%;transform: scale(0.4, 1); width: 100%; height: 2px;}
    /* #nav-icon:hover{transform: scale(1.2, 1);} */
    #nav-icon:hover .line{transform: scale(1, 1);}
    .line-top {transition-delay: 0;}
    .line-middle {transition-delay: 0.1s;}
    .line-bottom {transition-delay: 0.2s;}
    /* .x-icon {fill: black;opacity: 0;transition: opacity 0.3s ease;} */
    #nav-icon.active{}
    #nav-icon.active .line-top {transform: rotate(35deg) translate(0px, 14px);transform-origin:50% 50%;}
    #nav-icon.active .line-middle {opacity: 0;}
    #nav-icon.active .line-bottom {transform:rotate(-35deg) translate(0px, -14px);transform-origin:50% 50%;}
    /* #nav-icon.active .x-icon {opacity: 1;} */

.menushow #menumob{transform: translate(0, 0);transition-delay: 0s;}
.menushow .menulist{transform: translate(0, 0); opacity: 1; transition-delay:calc(0.1s + var(--andelay));}



/* menu */

header{width: 100%; height:100dvh; padding-bottom: env(safe-area-inset-bottom);box-sizing: border-box; background:var(--headbg); position: relative;}
  .header_inner{ width: 1200px; max-width: 100%;height: 100%; margin: 0 auto; position: relative; padding: 0.8rem 0 0.2rem 0;box-sizing: border-box;}
  .headinpre{ height: 100%;text-align: center; display: flex; justify-content: center;align-items: center; }
  .headinpre img{max-width: 96%; max-height: 100%;object-fit: cover;}
  .top_logo{ position: absolute; top:0.4rem; left:0.4rem; width:3.1rem; z-index: 20; transform: translate(0%, 0%);}
  .top_tx01{ position: absolute; top: 0.4rem; left: calc(50% - 2.95rem); width: 5.9rem; }
  .top_tx02{ position: absolute; bottom:8.4%; left:0; width:100%; }
  .top_scroll{ position: absolute; bottom: 0.5rem; right: 0.5rem; writing-mode: sideways-rl; color: #fff; font-size: 12px; line-height: 1; overflow: hidden;}
    .tsx{ position: relative; padding-top: 7em; display: block;animation: linedw 1.5s linear infinite; }
    .tsx::before{ content: ""; position: absolute; top: 0; left:calc(50% - 0.5px); width: 1px; height: 6em; background: #fff;  }
    @keyframes linedw {
      from {transform: translateY(-50%); opacity: 0;}
      40% {opacity: 1;}
      80% {opacity: 1;}
      to {transform: translateY(0%);opacity: 0;}
    }
    @keyframes linees {
      from { height: 0em;}
      to { height: 6em; }
    }


.main{position: relative; background:var(--bgcl,rgba(49, 123, 103, 0.8)); color: #fff; transition: background var(--bgtime);}

  .main::before{content: ""; position:absolute; top: 0; left: 0;display: block; width: 100%; height: 100vh; z-index: -1;  background: url("../images/bg.jpg") 0 0 no-repeat; background-size: 100% auto;}
  .scrollbg::before{ position: fixed;}
.main .innermob{  position: relative; padding: 0.5rem 0 0.7rem 0;}
    .inner_con{width:1200px; max-width:calc(100% - 0.8rem); margin: 0 auto; padding: 0 0.4rem;}
      .title_h{font-size: 2.4em; line-height: 1.4; text-align: center; color: #fff; position: relative;margin: 0.7rem 0;}
      .titinner{ position: relative; display: inline-block; }
      .title_h::before{content: ""; display: block;height: 2px; width:calc(50% - var(--tw) / 2 - 0.4em); background: linear-gradient(to right,transparent 0%,#fff 100%); position: absolute; top:50%;left: 0%;}
      .title_h::after{content: ""; display: block;height: 2px;  width:calc(50% - var(--tw) / 2 - 0.4em); background: linear-gradient(to left,transparent 0%,#fff 100%); position: absolute; top:50%;right: 0%;}
      .inpv{ text-align: center; width:1200px; max-width:100%; margin:0 auto; border: 0.2rem solid rgba(255, 255, 255, 0.5); line-height: 0; box-sizing: border-box;}
      .YoutubeWrapper{position:relative;padding-bottom:56.25%;overflow: hidden; display: inline-block; width:100%; max-width: 100%;}
      .YoutubeWrapper iframe {position:absolute;top:0;left:0;height:100%;width:100% ;}
      .pv_tx01{text-align: center; font-size:1.2em; line-height: 2; color: #fff; padding-top: 1.5em; font-weight: 300;}

      .artistmob{ display: flex; flex-wrap: wrap; justify-content: center; }
        .artist_inners{width: 33.333%; position: relative; overflow: hidden;margin-bottom: 0.2rem;}
          .artph{overflow: hidden;}
          .artist_inners img{transition:transform 0.5s;}
          .artist_inners:hover img{transform: scale(1.1,1.1);}

        .artname{ font-size: 1.3em; line-height: 2; text-align: center; color: #fff; }

      .contx01{font-size: 1.5em; line-height: 1.6;}
        .ico_ri{display: inline-block; padding-right: 2em; position: relative;}
        .ico_ri::after{content:" "; position: absolute; right: 0.3em; top:calc(50% - 0.15em); border: 0.3em solid transparent; border-left: 0.6em solid #fff;}

        .link_cs01{display: inline-block; padding: 0.2em 0.8em; background: #fff; border-radius: 999px; color:var(--lkcl);transition:background 0.3s,color 0.3s;}
          .link_cs01 svg{vertical-align: middle; width:1em; height: 1.2em; padding-bottom: 0.2em}
              .drescl{fill: var(--lkcl);}
          .link_cs01:hover{background:rgba(255,255,255,0.8); color:var(--lkcl);}
        .link_cs02{display: inline-block; line-height: 1.2; padding: 0.1em 0.8em;margin: 0.2em 0; background: #fff; border-radius: 999px; color:var(--lkcl);transition:background 0.3s,color 0.3s;}
          .link_cs02:hover{background:rgba(255,255,255,0.8);color:var(--lkcl);}
        .pv_tx02{ font-size: 0.8em; line-height: 1.8; text-align: center; }



      .ticket_insmob{display: flex; flex-wrap: wrap; padding: 0.85rem; background: rgba(255,255,255,0.15);}
        .ticker_tit{width:28%; border-right: 1px solid #fff; box-sizing: border-box; font-size: 1.7em; line-height: 1.3; letter-spacing: 0.1em; font-weight:600;}
        .ticker_con{width: 72%;box-sizing: border-box; padding-left: 2em; }

      .insmob{padding: 0.85rem; background: rgba(255,255,255,0.15);}






.ban_mbs01{ width: 100%; }
  .ban_mbs01_ins{letter-spacing: 0.1em; display: inline-block; padding: 1em 1.7em 1em 1.3em; box-sizing: border-box; width: 100%; border-radius: 99em; background: linear-gradient(to right,#06a0ff 0%,#fe7bb3 50%,#81c2d3 100%); background-size: 220% 100%; color: #fff; text-align: left; position: relative; transition:background 0.3s ;}
    .ban_mbs01_ins::after{content: ""; display: block; width: 0.7em; height: 0.7em; border-top: 0.14em solid #fff;border-right: 0.14em solid #fff; transform:rotate(45deg) skew(-7deg,-7deg); position: absolute; top: calc(50% - 0.5em); right: 1.8em;z-index: 10;}
  .ban_mbs01_ins:hover{color: #fff; background-position: 100% 100%;}

.ban_snup{ padding-top:3em; }
  .ban_snup .ban_mbs01_ins{padding: 1.5em 2em 1.5em 2em;}

.textl01 li{padding-left: 1em; text-indent: -1em;}


.ban_entry{ position: fixed; bottom: 0;right: calc(50% - 600px);text-align: right; cursor: pointer; }
.ban_entry a{display:block; width:5.02em; padding-bottom: 0.3rem; transition: padding 0.2s; transition: all 0.4s;transition-timing-function: cubic-bezier(0.76, -0.67, 0.23, 1.52);}
.ban_entry a:hover{ transform: scale(.95,.95); }
.ban_entry.scend{position: absolute; bottom:100%;}
.ban_entry.scend a{padding-bottom: 0.1rem;}


  .banpagetop{ position:fixed;bottom:-1rem;right:0.3rem; width: 0.8rem; transition: opacity 0.4s,bottom 0.1s 0.4s,padding 0.4s; opacity: 0; z-index: 50; }
  .banpagetop:hover{padding-bottom: 0.1rem;}
  .scrollbg .banpagetop{ opacity: 1;bottom:0.3rem; transition: opacity 0.4s 0.2s,bottom 0.1s 0s,padding 0.4s; }
  .cls-1{fill:#fff;}
  .cls-2{fill:var(--ftbg); transition:fill var(--bgtime);}

.footmob{ padding:0.6rem 0 0.6rem 0;position: relative; background:var(--ftbg); transition:background var(--bgtime); }
  .logolist{text-align: center; }
    .logolist a img{ height: 100%;}
    .logolist a:hover{ opacity: 0.6; }
    .logolist a.ban_bandai{display: inline-block; height: 0.6rem; margin: 0 1.25em;}
    .logolist a.ban_lantis{display: inline-block; height: 0.33rem; margin: 0 1.25em;}




/* animation 
.headinpre{opacity: 0; animation: fup 1s 2.5s ease-in-out forwards;}
.top_time{opacity: 0; animation: fup 1s 3s ease-in-out forwards;}
.innermob,.footmob{opacity: 0; animation: fup 1s 3s ease-in-out forwards;}

@keyframes fup {
  to {opacity: 1;}
}
 */

.js_scrollani {opacity: 0;animation-duration: 1s;animation-fill-mode: both; }
.fadeIn{ animation-name: fadeIn; }
.fadeInUp{ animation-name: fadeInUp; }
.fade-in-blur {opacity: 0;filter: blur(1em); animation-name: fadeInBlur;}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ZoomIn {
  from {
    opacity: 1;
    transform: scale(0, 0);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(1em); 
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* animation */
@media screen and (max-width:1440px){


}

@media screen and (max-width:1320px){
  .top_logo{left: 0.3rem; width: 2.6rem;}
  .top_tx02{ width: 86%;left: 7%}
}





@media screen and (max-width:1200px){
  :root{
    --hf:8.333vw;
  }


}

@media screen and (max-width: 750px){
  :root{
    --hf:13.333vw;
    --bf: 0.24rem;
  }

  body{ }

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


    #menumob{--andelay: 0.3s;--antime:0.6s;}
    #nav-icon:hover .line{transform: scale(0.4, 1);}
    #nav-icon.active .line-top {transform: rotate(35deg) translate(0px, 14px);transform-origin:50% 50%;}
    #nav-icon.active .line-middle {opacity: 0;}
    #nav-icon.active .line-bottom {transform:rotate(-35deg) translate(0px, -14px);transform-origin:50% 50%;}



  header{}
    .header_inner{padding:0;}
    .headinpre{}
    .headinpre img{}
    /* .top_logo{left:calc(50% - 3rem);width:6rem; transform: translate(0, -50%);  } */
    .top_logo{top:1rem; left:calc(50% - 3rem); width:6rem;  }
    .top_tx01{ position: absolute; top:2.6rem; left: calc(50% - 2.9rem); width: 5.8rem; }
    .top_tx02{ bottom:0.4rem; left:calc(50% - 3.35rem); width:100%; width: 6.7rem; }
    .top_scroll{display: none;}


.main{}
  .main .innermob{padding: 0.3rem 0 0.2rem 0;}
  .artistmob{padding: 0 0.4rem;}
    .artist_inners{width:100%; position: relative;margin-bottom: 0.3rem;}
    .artname{ font-size: 1.5em; line-height: 2; }

  .title_h{font-size: 2.1em; font-weight: 500;}
    .ticket_insmob{padding: 0.3rem;}
      .ticker_tit{width:100%; border-right:0;border-bottom: 1px solid #fff;font-size: 1.7em; line-height: 1.3; letter-spacing: 0.1em; text-align: center; padding-bottom: 0.8em;}
      .ticker_con{width: 100%;padding-left: 0;padding-top: 1.5em; }

    .insmob{padding: 0.3rem; }


  .banpagetop{bottom:-1rem;right:0.2rem; width: 0.6rem; }
  .scrollbg .banpagetop{ bottom:0.2rem;}

}