@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: 'Noto Sans JP', "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:#e83567;}

:root{
  --htf: 100px;
  /* Body text scales independently of the rem-based layout (375px: 12px, 1100px: 18px). */
  --bdf: clamp(12px, calc(8.896551724px + 0.827586207vw), 18px);
  --mobbw:0;
  --maincolor: #2c3b7c;
  --sccolor: #e83567;
}

.cl_blu{ color:var(--maincolor);}
.cl_pink{ color:var(--sccolor);}
.cl_red{ color:var(--sccolor);}
.cl_gly{ color:#838d98;}
.cl_wht{ color:#fff;}
.cl_blk{ color:#000;}

.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.6;}
.fs130{font-size:1.3em; line-height: 1.6;}
.fs150{font-size:1.5em; line-height: 1.6;}
.fs180{font-size:1.8em; line-height: 1.5;}
.fs200{font-size:2em; line-height: 1.6;}
.fs290{font-size:2.9em; line-height: 1.3;}

.fws{ font-weight:400;}
.fwb{ font-weight:bold;}
.fsm{ font-size: 80%;}
.ffp{ font-feature-settings:"palt";-moz-font-feature-settings:"palt";-webkit-font-feature-settings:"palt";}

.wf-Mon{ font-family: "Montserrat", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;}

.align_center{text-align: center;}

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


.inpv{ text-align: center; width: 100%; max-width: 100%;margin: 0 auto;}
.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% ;}



/******************************index************************************************/
html{ font-size:var(--htf);overflow-x:hidden;}
body{font-size:var(--bdf);line-height: 1.5; position:relative;overflow-x:hidden; background: #f4f5f8 url("../images/topbg.jpg") 50% 0 no-repeat; background-size: 100% auto; }
.headmob{  position: relative; z-index: 20; }
  .toplogo{ text-align: center; padding: 12.9% 0 9.4% 0;}
  /* Enlarge the logo at intermediate widths, tapering to the original size at 750px and 1600px. */
  .toplogo img{
    /* Preserve the artwork size, excluding the previous 3% padding. */
    width: calc(55.8% + clamp(0px, min(8vw, calc(100vw - 750px), calc(1600px - 100vw)), 100px));
    /* English line center: x=235.42 in the SVG's 360.84-wide viewBox. */
    transform: translateX(-15.242213%);
  }

/* menu */
.menu_mob{
    font-size: 0.18rem;
    position:fixed;top: 0; right: 0; 
    width: 0; max-width: 100%; height: 100dvh;padding-top:1.5rem;
    box-sizing: border-box;
    transition: width 1s;
  }
  .ban_tpnsc{
    --win:1.1rem;--hin:calc(var(--win) * 2.6);--bgcl:#e83567;--linebg:#ffffff; 
    position: fixed; right: 0; top:0.3rem; z-index: 50; 
    width:var(--win); height:var(--hin); padding-right:calc(var(--win) * 0.05);
    display: flex; align-items: center; justify-content: flex-end;box-sizing: border-box;
    transition: width 0.4s linear,height 0.4s linear;
    
  }
    .ban_tpnsc::before{ content: ""; 
      position: absolute; top: 0; left: 0;
      display: block; width: 100%;height: 50%;
      background:var(--bgcl) ;clip-path: polygon(100% 0, 0 100%, 0 100%, 100% 100%);
      transition: all 0.6s linear;
    }
    .ban_tpnsc::after{ content: ""; 
      position: absolute; top:calc(50% - 1px); left: 0;
      display: block;  width: 100%;height: 50%;
      background:var(--bgcl) ;clip-path: polygon(100% 0, 0 0, 0 0, 100% 100%);
      transition: all 0.6s linear;
    }
    .ban_op{
      --mobw:calc(var(--win) * 0.62);--mobh:calc(var(--win) * 0.5); --lineW:calc(var(--win) * 0.26);--lineH:0.05rem;
      display:block;border:0;width:var(--mobw);height:var(--mobh); padding: 0 var(--mobh) 0 0;
      background:url("../images/ban_mbg.png") 0 0 no-repeat; background-size: 100% auto;
      position: relative;  z-index: 351; cursor:pointer;
    }
      .ban_op::before{content: "";
        position:absolute; top:calc(var(--mobh) + var(--lineH) * 1); left:calc(var(--mobw) / 2 - var(--lineW) / 2); 
        display: block; width:var(--lineW); height:var(--lineH);
        background:var(--linebg,#fff); 
        transition:all 0.3s; transform-origin: 0 100%; border-radius: 99px;
      }
      .ban_op::after{ content: "";
        position:absolute;top:calc(var(--mobh) + var(--lineH) * 3); left:calc(var(--mobw) / 2 - var(--lineW) / 2);
        display: block; width:var(--lineW); height:var(--lineH);
        background:var(--linebg,#fff);
        transition:all 0.3s;transform-origin: 0 0; border-radius: 99px;
      }
      .ban_op span{
        position:absolute;top:calc(var(--mobh) + var(--lineH) * 5); left:calc(var(--mobw) / 2 - var(--lineW) / 2);
        display: block;width:var(--lineW);height:var(--lineH);
        background:var(--linebg,#fff);
        transition:all 0.3s; border-radius: 99px;
      }
      .ban_op:hover{--lineW:calc(var(--win) * 0.36);}
      .ban_tpnsc.sel{--linebg:#2c3b7c;}
      .ban_tpnsc.sel .ban_op::before{
        transform: rotate(45deg) translateX(0);transform-origin: 50% 50%;
        top:calc(var(--mobh) * 0.5);;
      }
      .ban_tpnsc.sel .ban_op::after{
        transform: rotate(-45deg) translateX(0);transform-origin: 50% 50%;
        top:calc(var(--mobh) * 0.5);;
      }
      .ban_tpnsc.sel .ban_op span{ opacity:0;}
      /*       */
  .menulistmob{
    position:absolute; top: 0; left: 0;
    padding:0.5rem 0;margin: 1rem 0; max-height: 100dvh; width: 100%;
    box-sizing: border-box; overflow-y: auto; z-index: 100;
    visibility: hidden; opacity: 0; pointer-events: none;transition: opacity 0.5s, visibility 0s 0.5s;
  }
  .bmn-TOP{
    width: 60%;
    padding:0 16% 5% 0%;margin: 0 auto;
  }
  
  .menu_mob ul{
    font-family: "Montserrat", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;
    font-size: 1.2em; line-height: 1.2;
    display: flex; justify-content: center; flex-wrap: wrap;
  }
  .menu_inlist li{ 
    position: relative;
    width: 60%;margin:0.1em;padding:0.8em;
    text-align: center; line-height: 1;
  }
  .menu_inlist a{--cl:#fff;
    position:relative;
    display:block; padding:0.1em 0em;
    color:var(--cl)!important;text-decoration: none; transition: color 0.3s ease-in-out;
  }

  /* sns */
  .snsmob{
    display: flex;justify-content: center;
    padding-top: 1em;
  }
    .snsmob a{width:0.4rem; height:0.4rem;background:url("../images/icon_sns.png") 0 0 no-repeat; background-size: 1.21rem;margin:0.1rem; }
    .snsmob .ban_fb{ background-position: 50% 0; }
    .snsmob .ban_line{ background-position: 100% 0;}
    .ban_twi:hover{ background-position: 0 bottom; }
    .ban_fb:hover{ background-position: center bottom; }
    .ban_line:hover{ background-position: right bottom; }
  /* sns */

  .menuopen .menu_mob{
    width: 600px;
    background-color: var(--sccolor);
    transition: width 0.6s,background-color 0.01s 0.6s;
  }
  .menuopen .ban_tpnsc::before,.menuopen .ban_tpnsc::after{ 
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
  .menuopen .menulistmob{
    visibility: visible;
    opacity: 1; pointer-events: auto;transition: opacity 0.3s 0.5s, visibility 0s;
  }
  .menuopen .ban_tpnsc{ width: 100%;height: 100%; top: 0;}
  .menuopen .ban_op{position: absolute; top: 0.2rem;right: 0.1rem;}
  .menuopen .menu_mob.pfix .ban_tpnsc{top: 0rem;}
  .menu_mob.pfix .ban_tpnsc{top: 0.3rem;}
  .menu_inlist a:hover,.menu_inlist .sel a{--cl:var(--maincolor);}

/* menu */


.wrap{ position:relative; z-index:10; min-height:100%; }
.main{}
  .innermob{ color:var(--maincolor); position: relative; padding:0 0 0.4rem 0;}
  .mob_hbg{--borw:2rem; color: #fff; background:var(--maincolor); margin:var(--borw) 0;}
  .fly_op02{position: relative; top: -0.2rem;}
  .flym{position: relative; top: -0.5rem;}

    .mob_hbg::before{content: "";
      position: absolute; bottom:calc(100% - 1px); left: 0;
      display: block;width: 0; height: 0;
      border-bottom:var(--borw) solid var(--maincolor); border-left:50vw solid transparent;border-right:50vw solid transparent;
      z-index: 0;
    }
    .mob_hbg::after{content: "";
      position: absolute; top:calc(100% - 1px); left: 0;
      display: block;width: 0; height: 0;
      border-top:var(--borw) solid var(--maincolor); border-left:50vw solid transparent;border-right:50vw solid transparent;
      z-index: 0;
    }
    .topinfo{display: block; padding: 0 6.35%;}
    .picmob{display: grid;grid-template-columns: repeat(4, minmax(100px, 1fr));gap: 4px; padding: 0 var(--mobbw);}
    .title{text-align: center; padding: 1rem 0 0.7rem 0;max-width: 80%; margin: 0 auto;}
      .title_ph img{width: auto; max-height:0.58rem;}

    .title.title_artist{padding-top: 0; margin-top: -0.3rem;}
    .title.title_ticket{ padding: 0 0.2rem; background-color:var(--maincolor) ; transform: translateY(-50%);}

    .inner_content{ width: 1000px; max-width:100%; margin: 0 auto;box-sizing: border-box; padding:0 var(--mobbw);}

  /* news */
  .newsmob{padding-bottom: 1rem;}
    .news_in{ position: relative; border:0.1rem double #a38b78; background: #fff; padding:4% 6% 6% 6%; }
    .newsinlistmob .news_in{margin:0 5%; padding:4% 6% 2.8% 6%;}
    .news_in .ban_readmore{ display: block; width: 1rem; height: 0.8rem; position: absolute; bottom:-0.4rem; left: calc(50% - 0.5rem);}
    .news_in .newslist li{ padding: 0 0 0.4em 1.1em; background:url('../images/ic_y.png?0805') 0 0.45em no-repeat; background-size: 0.9em;  font-weight: bold; }
    .news_in .newslist li a:hover{ color: #e60021;}
    .news_inners{ padding-bottom: 5%; position: relative; font-weight: 500; font-size: max(13px, var(--bdf)); }
    .news_inners a{color:#e60021; font-size: clamp(13px, calc(7.908045977px + 0.735632184vw), 16px);}
    .news_inners a:hover{ text-decoration: underline; }
    .news_inners .news_innerti{ padding-bottom: 0.6em;color: #e60021; font-weight: 700; }
    .news_inners .news_time{ font-size: 12px; color: #ce9b5b; display: block; }
    .ban_back{ text-align: center;  margin-bottom: 40px; margin-top: 1.2em; }
    .ban_back a{ display: inline-block; padding: 0.5em 1.5em; font-size:0.24rem; line-height: 100%; text-decoration: none; background: #006fb7;border:2px solid #fff; border-radius:2000px; font-weight: bold; transition:all 0.1s; color: #fff }
    .ban_back a:hover{ background: #fff;border:2px solid #006fb7; color: #006fb7; }
    .tx_ind01{text-indent: -1em;padding-left: 1em; display: block;}


      .ban_mob{text-align: center; padding-top: 0.5rem;}
        .ban_more{ display: inline-block; color: #fff; background-color: #00bfdb; letter-spacing: 0.35em; border-radius: 30em; padding: 0.11em 2em; transition: background 0.4s;}
        .ban_more:hover{ background-color: #db0067;color: #fff; }

    .picmob02{display: grid;grid-template-columns: repeat(4, minmax(100px, 1fr));gap:0.3rem; padding: 0 3%;}
      .prename{ text-align: center; font-size: 1.1em; line-height: 1.3; font-weight: bold; letter-spacing: 0.3em; padding:1.1em 0;}

    .textbox{ line-height: 1.8; padding:0 2.5em 2.5em 2.5em; border:0.02rem solid #fff; color: #fff; margin:1rem 0.4rem 0 0.4rem;}
      .tit_ins{ background-color:var(--sccolor); font-weight: 400; padding: 0.2em;box-sizing: border-box;margin: 0.5em 0;}

    .soldout02{position: relative; padding: 0.5em 0;}
      .soldout02::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(0, 0, 0, 0.3);}
      .soldout02::after{content: ""; background:url("../images/tx_out.png") 0 0 no-repeat; position: absolute; top:calc(50% - 0.9em); left:calc(50% - 4.5em);  z-index: 12;width: 9em; height: 1.8em; background-size: 100% auto;}

    .inph_two{display: grid;grid-template-columns: repeat(2, 1fr);gap:0.4rem; margin: 0.3rem 0; }










.footmob{}
.foot{ padding:0.65rem 0 0.6rem 0; border-top:0.1rem solid var(--maincolor) }
.banlogo{ display: inline-block; width: 240px; width: 2.4rem; }
.ft_ioc{ font-size:0.6em; line-height: 120%; padding: 0.5em 0 0 0 ; font-weight: bold;}
.pageTop{position: fixed; bottom: 0.3rem; right:0; width:1rem; max-width:15.5vw; overflow: hidden; z-index: 70; opacity: 0; pointer-events: none; transition: bottom 0.6s; }
.pageTop:hover{bottom: 0.4rem;}
.pageTop.is-visible{pointer-events:auto; opacity: 1;}

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

  :root{
    --htf: 100px;
  }


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

  :root{
    --htf: 9vw;
  }

  .menu_inlist a{ --lh:3em;}


}
@media screen and (max-width: 750px){
  :root{
    --htf: 13.33vw;
    --mobbw:0.3rem;
  }

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

  .headmob{ height:auto;}
  /**/
    .ban_op:hover{
      --lineW:calc(var(--win) * 0.26);
    }
    .menuinner.is-open .menu_ins{pointer-events: auto; opacity: 1;height: 100dvh; overflow-y: auto; transition: height 0.4s ease;}
    .menuinner.is-open .ban_tpnsc{top: var(--lws);}
  /**/

  .mob_hbg{--borw:1.4rem;}
  .picmob{grid-template-columns: repeat(2, minmax(100px, 1fr));}
  .picmob02{grid-template-columns: repeat(2, minmax(100px, 1fr));}
    .textbox{  margin:1rem 0 0 0;}
      .title_ph img{max-height:0.48rem;}


}








.fadeIn{ animation: fadeIn 1s 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.3rem); opacity: 0;}
  100%{transform: translateY(0); opacity: 1;}

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




@keyframes showdw {
  0% {
    opacity: 0;
    transform: translate(0,-60%);
  } 100% {
    opacity: 1;
    transform: translate(0,0%);
  }
}
@keyframes UpIn {
  0% {
    opacity: 0;
  } 100% {
    opacity: 1;
  }
}




/* Semantic headings that preserve the existing visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
h3.tit_ins { font-size: 1em; }

/* Keep news text clear of the viewport edges and floating controls. */
.inner_content.news-detail-content {
  /* Reserve the 1.1rem menu width plus 8px on each side. */
  max-width: min(80%, calc(100% - 2.2rem - 16px));
  padding-inline: 0;
  overflow-wrap: anywhere;
}

/* Align the home news frame with the hero image gutters. */
.inner_content.news-summary-content {
  max-width: 87.3%;
  padding-inline: 0;
}

/* Keep wrapped news titles aligned after the date column. */
.news_in .newslist li {
  display: grid;
  grid-template-columns: 5.2em minmax(0, 1fr);
  column-gap: 0.35em;
  align-items: start;
}
.news_in .newslist li > span {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.news_in .newslist li > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Separate each performance into readable lines on phones. */
@media screen and (max-width: 750px) {
  .tour-schedule {
    text-align: left;
    font-size: max(14px, 1em);
    line-height: 1.8;
  }
  .tour-performance {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: 0.65em 0;
  }
  .tour-performance + .tour-performance {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
  }
  .tour-performance > .tour-separator,
  .tour-datetime > .tour-separator { display: none; }
  .tour-area { font-weight: 700; }
  .tour-date, .tour-times > span { white-space: nowrap; }
  .tour-datetime {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.6em;
    font-size: max(12px, 0.9em);
  }
  .tour-times { white-space: nowrap; }
}

.tour-venue a { text-decoration: underline; text-underline-offset: 0.2em; }
.external-link-icon {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.3em;
  vertical-align: baseline;
}

@media screen and (max-width: 750px) {
  .intro-closing {
    display: block;
    padding-inline: 4%;
    font-size: 0.9em;
    line-height: 1.7;
  }
}

@media screen and (max-width: 750px) {
  .inner_content.news-detail-content {
    width: auto;
    max-width: none;
    margin-left: 16px;
    margin-right: calc(1.1rem + 8px);
  }
}

/* Keep right-side controls separate on short viewports. */
.menu_mob .ban_tpnsc {
  max-height: calc(100dvh - 1.3rem - 24px);
}
.menuopen .menu_mob .ban_tpnsc { max-height: none; }
.menuopen .pageTop { visibility: hidden; pointer-events: none; }
.menu_mob.fadeInfo { animation-name: fadeInfoRight; }
@keyframes fadeInfoRight {
  from { transform: translateX(0.18rem); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Temporarily hide the back-to-top button. Remove this rule to restore it. */
.pageTop { display: none; }

/* Enlarge the phone logo while preserving its optical center. */
@media screen and (max-width: 750px) {
  .toplogo img { width: 70%; }
}

.home-intro { padding-top: 3%; }
@media screen and (max-width: 750px) {
  .home-page .toplogo { padding-bottom: 7%; }
  .home-intro { padding-top: 6%; }
}

/* Artist photo links: subtle lift and brightness on pointer hover. */
.picmob02 .top_pic > a {
  display: block;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.picmob02 .top_pic > a > img { display: block; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .picmob02 .top_pic > a:hover {
    transform: translateY(-4px);
    filter: brightness(1.08);
  }
}
.picmob02 .top_pic > a:focus-visible {
  outline: 3px solid var(--sccolor);
  outline-offset: 4px;
  filter: brightness(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .picmob02 .top_pic > a { transition: none; }
  .picmob02 .top_pic > a:hover { transform: none; }
}

.about-section { padding-bottom: calc(0.4rem + clamp(48px, 8vw, 112px)); }

/* Soft floating light particles within the existing pastel background artwork. */
.background-sparkles {
  position: absolute;
  inset: 0 0 auto;
  height: 38vw;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mask-image: linear-gradient(#000 0%, #000 65%, transparent 100%);
}
.background-sparkles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.8) 18%, rgba(215,227,255,.3) 45%, transparent 72%);
  animation: background-float calc(var(--duration) * 1.35) ease-in-out var(--delay) infinite;
}
.background-sparkles i:nth-child(3n+1) { --drift: 12px; }
.background-sparkles i:nth-child(3n+2) { --drift: -10px; }
.background-sparkles i:nth-child(3n) { --drift: 5px; }
@keyframes background-float {
  0% { opacity: 0; transform: translate(0, 12px); }
  20% { opacity: .55; }
  50% { opacity: .85; transform: translate(var(--drift), -6px); }
  75% { opacity: .35; }
  100% { opacity: 0; transform: translate(0, -24px); }
}
@media screen and (max-width: 750px) {
  .background-sparkles i { width: calc(var(--size) * .75); height: calc(var(--size) * .75); }
  .background-sparkles i:nth-child(n+23) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .background-sparkles { display: none; }
  .background-sparkles i { animation: none; }
}