@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&display=swap');

html,body,a,p,ul,li,h1,h2,h3,h4,h5,h6,figure,dl,dt,dd{margin:0;padding:0;}

*{
    box-sizing: border-box;
    
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}


@font-face {
	font-family: 'font';
	src: url(../font/font.ttf);
    
}

:root {
  --blue: #50a4af;
    --blue2:#248d9b;
    --blue3:#dff2f4;
    --brown:#655007;
    --gold:#dbbe41;
}

@media screen and (max-width: 896px){
    html{
        font-size: 1vw;
    }
    
}

body{
    overflow-x: hidden;
    -webkit-touch-callout:none;
    font-family: YakuHanJP_Noto,"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    color: #fff;
    font-weight: 400;
}


img{
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
    display: block;
    font-size: 0;
    
}

a{
    color: inherit;
    text-decoration: none;
}


li{
    list-style-type: none;
}


.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;

}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}


.sp{
    display: none;
    
}


@media screen and (max-width: 896px){
    .pc{
        display: none;
    }
    
    .sp{
        display: block;
    }
}



.loading{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: #fff;
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.8s;
}
.loading.load{
    opacity: 0;
    pointer-events: none;
    filter: blur(10px);
}
.wrap:not(.load){
    height: 100svh;
    overflow: hidden;
}


header{
    width: 100%;
    height: 84px;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--blue);
    color: #ffffff;
    font-family: "ff-carina", sans-serif;
font-weight: 600;
font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    z-index: 9999;
    box-shadow: 0 2px 4px rgba(0,0,0,.1)
}



nav ul{
    display: flex;
    gap:24px;
}
header a span{
    display: inline-block;
}
header a.hover span{
    
    animation: hover  0.6s forwards ease;
}


@keyframes hover  {
  0% {
     transform: rotateY(0deg);
  }
   
   
  100% {
   transform: rotateY(360deg);
  }
}

header a span:nth-child(2){
  animation-delay: 0.05s !important;
}
header a span:nth-child(3){
  animation-delay: 0.1s !important;
}
header a span:nth-child(4){
  animation-delay: 0.15s !important;
}
header a span:nth-child(5){
  animation-delay: 0.2s !important;
}
header a span:nth-child(6){
  animation-delay: 0.25s !important;
}

header a span:nth-child(7){
  animation-delay: 0.3s !important;
}

header a span:nth-child(8){
  animation-delay: 0.35s !important;
}

header a span:nth-child(9){
  animation-delay: 0.4s !important;
}

header a span:nth-child(10){
  animation-delay: 0.45s !important;
}

header a span:nth-child(11){
  animation-delay: 0.5s !important;
}

header a span:nth-child(12){
  animation-delay: 0.55s !important;
}

header a span:nth-child(13){
  animation-delay: 0.6s !important;
}

header a span:nth-child(14){
  animation-delay: 0.65s !important;
}

header a span:nth-child(15){
  animation-delay: 0.7s !important;
}

header a span:nth-child(16){
  animation-delay: 0.75s !important;
}

header a span:nth-child(17){
  animation-delay: 0.8s !important;
}

header a span:nth-child(18){
  animation-delay: 0.85s !important;
}

header a span:nth-child(19){
  animation-delay: 0.9s !important;
}

header a span:nth-child(20){
  animation-delay: 0.95s !important;
}

header a span:nth-child(21){
  animation-delay: 1s !important;
}


@media screen and (max-width: 896px){
    header{
        height: 60px;
        font-size:  24px;
    }
    
    .nav-btn {
  width: 60px;
  height: 60px;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 9999;
}


.nav-btn span {
  width:  24px;
  height: 2px;
  position: absolute;
  left: 16px;
  background: #fff;
  transition-duration: 0.2s;
}

.nav-btn span:nth-of-type(1) {
  top: 40px;
}

.nav-btn.close span:nth-of-type(1) {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.nav-btn span:nth-of-type(2) {
  top: 50%;
  margin-top: -1px;
}

.nav-btn.close span:nth-of-type(2) {
  opacity: 0;
  transform: translateX(-20%);
}

.nav-btn span:nth-of-type(3) {
  bottom: 40px;
}

.nav-btn.close span:nth-of-type(3) {
  bottom: calc(50% - 1px);
  transform: translateY(0) rotate(-45deg);
}
     nav{
    position: fixed;
        top:0px;
        left: 0;
        background: var(--blue);
        width: 100%;
         height: 100vh;
        overflow: scroll;
        transform: translateY(-101%);
        transition-duration: 1s;
        opacity: 0;
        
        
}
    
    nav.open{
        transform: translateY(0%);
        opacity: 1;
    }
    .nav-inner{
        padding: 80px 0;
    }
    .nav-logo{
        width: 280px;
        margin: 0 auto 40px;
    }
    
    nav ul{
        flex-flow: column;
        align-items: center;
        gap:28px;
    }
}

main{
    padding-top: 160px;
}

.toppage main{
    padding-top: 128px;
}


@media screen and (max-width: 896px){
    main{
        padding-top: 100px;
    }
}
.inner{
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}
section:not(.hero){
    padding: 80px 0;
}
section.blue{
    background: var(--blue);
    
}


@media screen and (max-width: 896px){
    
  
section:not(.hero){
    padding: 60px 0;
}

    
}


.box01{
    background: var(--blue);
    position: relative;
    padding: 24px;
}
.box01:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height:100%;
    background: url(../img/box01-frame-tate.png) repeat-y;
    background-size: 12px auto;
    background-position: center center;
    
}

.box01:after{
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    right: 0;
    width: 24px;
    height:100%;
    background: url(../img/box01-frame-tate.png) repeat-y;
    background-size: 12px auto;
    background-position: center center;
   
}


.box01 .box-frame:before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 24px;
     background: url(../img/box01-frame-yoko.png) repeat-x;
    background-size: auto 14.4px;
   background-position: center center;
     
}
.box01 .box-frame:after{
    content: "";
    display: block;
    position: absolute;
    bottom:0;
    left: 0px;
    width: 100%;
    height: 24px;
   background: url(../img/box01-frame-yoko.png) repeat-x;
   background-size: auto 14.4px;
    background-position: center center;
    
}
.box01 .box-frame span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}
.box01 .box-frame span:before,.box01 .box-frame span:after{
     content: "";
    display: block;
    position: absolute;
    
    width: 48px;
    height: 48px;
    border: solid 3px var(--blue);
    background-color: #fff;
    background-image: url(../img/box01-ftame-corner.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:20px;
}
.box01 .box-frame span:nth-child(1):before{
    top: 0;
    left: 0;
}
.box01 .box-frame span:nth-child(1):after{
    top: 0;
    right: 0;
}
.box01 .box-frame span:nth-child(2):before{
    bottom: 0;
    left: 0;
}
.box01 .box-frame span:nth-child(2):after{
    bottom: 0;
    right: 0;
}
@keyframes box-anime2 {
from { background-position: 0 center; }
to { background-position: 77px center; }
}

.box-inner{
    border: solid 4px #fff;
    padding: 100px 96px;
}


@media screen and (max-width: 896px){
    
    .box01{
    background: var(--blue);
    position: relative;
    padding: 16px;
}
.box01:before{
    width: 16px;
     background-size: 8px auto;
   
}

.box01:after{
    width: 16px;
    background-size: 8px auto;
    
}

.box01 .box-frame:before{
    height: 16px;
    background-size: auto 10px;
    
}
.box01 .box-frame:after{
    height: 16px;
    background-size: auto 10px;
    
}

.box01 .box-frame span:before,.box01 .box-frame span:after{
    width: 32px;
    height: 32px;
    border: solid 3px var(--blue);
    background-color: #fff;
    background-image: url(../img/box01-ftame-corner.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:12px;
}
    
    
    .box-inner{
    border: solid 3px #fff;
    padding: 40px 20px;
}
    
}
    

.box02{
    border: solid 4px #fff;
    position: relative;
    padding: 64px 180px;
}

.box02:after{
    content: "";
    display: block;
    position: absolute;
    top:6px;
    left:6px;
    width:calc(100% - 12px);
    height:calc(100% - 12px);
    border: solid 3px #fff;
    pointer-events: none;
}

.box02-txt{
    font-size: 16px;
    max-width: 1280px;
    margin: 0 auto;
    line-height: 1.4;
    
}

@media screen and (max-width: 896px){
    .box02{
        padding: 40px 20px;
        
    }
    .box02-txt{
    font-size: 12px;
    
}
}


.title01{
    text-align: center;
    opacity: 0;
    transition-duration: 0.4s;
    margin-bottom: 32px;
}

.title01.on{
    opacity: 1;
}
.ttl-head{
    width: 72px;
    margin: 0 auto 20px;
    position: relative;
}


.ttl-head:before,.ttl-head:after{
    content: "";
    display: block;
    position: absolute;
    width: 240px;
    height: 100%;
    top: 0;
    background: url(../img/ttl-border.svg) no-repeat;
    background-size: 100% auto !important;
}

.white .ttl-head:before,.white .ttl-head:after{
    background: url(../img/ttl-border-white.svg) no-repeat;
}
.ttl-head:before{
    right: calc(100% + 20px);
    background-position: left 60% !important;
    transform: scale(-1,1);
}
.ttl-head:after{
    left: calc(100% + 20px);
    background-position: left 60% !important;
}

.title01 .ttl-txt{
    font-size: 36px;
    font-family: garamond-premier-pro, serif;
    font-weight: 600;
    font-style: normal;
    transition-duration: 0.6s;
    line-height: 0.7;
    color: var(--brown);
    
}
.title01.white .ttl-txt{
    color: #fff;
}
.title01.fade.on .ttl-txt{
    letter-spacing: 0.15em;
    text-indent: 0.15em;
}

.fade .ttl-txt span{
    display: inline-block;
    transform: rotateY(270deg);
    transform-origin: center;
    transition-duration: 1s;
    text-align: center;
   
}

.fade.on .ttl-txt span{
    transform: rotateY(0deg);
}


@media screen and (max-width: 896px){
    
.ttl-head{
    width: 56px;
    margin: 0 auto 12px;
    position: relative;
}


.ttl-head:before,.ttl-head:after{
    width: 100px;
}

.ttl-head:before{
    right: calc(100% + 12px);
}
.ttl-head:after{
    left: calc(100% + 12px);
}

.title01 .ttl-txt{
    font-size: 22px;
}

    
    
}

.title02{
    color: var(--blue);
    position: relative;
    margin: 0 auto 40px;
     opacity: 0;
    transition-duration: 0.4s;
    max-width:960px;
    
}
.title02.on{
    opacity: 1;
}

.title02 .ttl-txt{
    text-align: center;
    font-size: 36px;
    font-family: YakuHanMP,"Noto Serif JP", serif;
    font-weight: 600;
    letter-spacing: -0.2em;
    text-indent: -0.2em;
    line-height: 1;
    width: fit-content;
    margin: 0 auto;
    position: relative;
    z-index: 2;
   background: #fff;
    padding: 0 1em;
}

.title02.fade.on .ttl-txt{
    letter-spacing: 0;
    text-indent: 0;
}

.title02.white .ttl-txt{
    color: #fff;
     background: var(--blue);
}
.title02:before,.title02:after{
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    width: 50%;
    height: 12px;
}

.title02:before{
    left: 0;
    background: url(../img/title02-frame.svg);
    background-size: auto 100%;
    background-position: 9px center;

}
.title02:after{
    right: 0;
    background: url(../img/title02-frame.svg);
    background-size: auto 100%;
    background-position:right 0px center;
}
@keyframes title02-anime {
from { background-position: 0 center; }
to { background-position: 60px center; }
}


@media screen and (max-width: 896px){
    
    .title02 .ttl-txt{
    font-size: 25px;
}
    
}

.title03{
   
    color: #fff;
    position: relative;
    margin: 0 auto  48px;
}
.title03.min{
    max-width: 600px;
}
.title03 .ttl-txt{
    text-align: center;
    font-size: 28px;
    font-family: YakuHanMP,"Noto Serif JP", serif;
    font-weight: 600;
}

.title03:before,.title03:after{
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    width: calc(50% - 108px);
    height: 12px;
}
.title03.min:before,.title03.min:after{
    width: calc(50% - 80px);
    height: 12px;
}
.title03:before{
    left: 0;
     background: url(../img/ttl-border-white.svg) no-repeat;
    background-size: 100% auto;
    background-position: center;
    transform: scale(-1,1);
}
.title03:after{
    right: 0;
   background: url(../img/ttl-border-white.svg) no-repeat;
    background-size: 100% auto;
    background-position: center;
}


@media screen and (max-width: 896px){
    .title03{
        margin-bottom: 24px;
    }
    .title03 .ttl-txt{
        font-size: 20px;
    }
    .title03:before,.title03:after{
    content: "";
    position: absolute;
    top: calc(50% - 1.5px);
    width: calc(50% - 72px);
    height: 3px;
}

}

.fade:not(.hero h1,.title){
    opacity: 0;
}
.fade:not(.hero h1,.title).on{
    opacity: 0;
    animation: fadein 0.6s forwards ease-out;
}

@keyframes fadein {
  0% {
    opacity: 0;
     transform: translateY(18px);
      filter:blur(5px);
  }

  100% {
   opacity: 1;
      transform: translateY(0);
     filter:blur(0px);
  }
}

.hero h1{
    width: 28vw;
    min-width:480px; 
    margin: 0 auto 2%;
    position: relative;
}

.hero h1 img:not(:first-child){
    position: absolute;
    top: 0;
    left: 0;
}

.hero h1 img{
    opacity: 0;
}
.hero h1.on img:nth-child(1){
    animation: h1-anime1 1.4s forwards ease-out;
}
@keyframes h1-anime1 {
  0% {
    opacity: 0;
     transform: translateY(-10%);
      filter: brightness(4);
  }

  100% {
   opacity: 1;
      transform: translateY(0);
      filter: brightness(1);
  }
}
.hero h1.on img:nth-child(2){
    animation: h1-anime2 1.4s forwards ease-out;
}
@keyframes h1-anime2 {
  0% {
    opacity: 0;
     transform:scale(1.6);
      filter: brightness(4);
  }

  100% {
   opacity: 1;
       transform:scale(1)
  }
}
.hero h1.on img:nth-child(3){
    animation: h1-anime3 1.4s forwards ease-out;
}
@keyframes h1-anime3 {
  0% {
    opacity: 0;
      transform: translateY(10%);
   clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
      filter: brightness(4);
  }

  100% {
   opacity: 1;
      transform: translateY(0);
     clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

.copy{
    width: 42vw;
    min-width:680px; 
   
}

.copy img:nth-child(1){
    margin-bottom: 8px;
}

.hero .copy{
    margin: 0 auto 60px;
}


@media screen and (max-width: 896px){
    
    .hero h1{
    width: 64vw;
    min-width:0px; 
}
.copy{
    width: 90vw;
     min-width:0px; 
   
}


}
#about .title{
    margin-bottom:  60px;
}

.kv .slick-slide{
   width: 100vw;
    max-width: 1280px;
    overflow: hidden;
    background: #000;
   
}




@media screen and (min-width: 1280px){
    .kv .slick-slide img{
     opacity: 0.3;
    filter: blur(5px);
    transform: scale(1.02);
}
.kv .slick-slide.slick-active img{
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}
    
}
.about-txt{
    text-align: center;
}

.about-txt h3{
    font-size: 32px;
    font-weight: 600;
    margin-bottom:  60px;
    line-height: 1.6;
}

.about-txt p{
    font-size: 20px;
    line-height: 2;
}


@media screen and (max-width: 896px){
    
    #about .title{
    margin-bottom:  32px;
}

.about-txt h3{
    font-size: 24px;
    margin-bottom:  32px;
}

.about-txt p{
    font-size: 14px;
}
    
    
}

.news-list{
    color: var(--brown);
}
.news-list li{
    background: #fff;
    padding: 12px 28px;
    margin-bottom: 12px;

}
.news-list li:last-child{
    margin-bottom: 0;
}
.news-list a{
    min-height: 96px;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 16px;
}
.news-list a .date{
    width: 120px;
}
.news-list a:after{
   content: "";
   display: block;
   position: absolute;
   top:0;
   left:120px;
   width:1px;
   height:100%;
   background:#000;
    
}

.news-list a .ttl{
   padding-left: 32px;
}

@media screen and (max-width: 896px){
    
    .news-list li{
    background: #fff;
    padding: 12px 18px;
    margin-bottom: 12px;

}
.news-list li:last-child{
    margin-bottom: 0;
}
.news-list a{
    min-height: 0px;
    display: flex;
    flex-flow: column;
    font-size: 12px;
}
.news-list a .date{
    width: 100%;
    margin-bottom: 4px;
}
.news-list a:after{
   display: none;
    
}

.news-list a .ttl{
   padding-left: 0px;
}


}

.x-link{
    text-align: center;
    margin-bottom: 40px;
}

.x-link p{
    color: #fff;
    font-size: 16px;
    margin-top: 16px;
}
.x-link a{
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 16px;
    border-radius: 1000px;
    margin: 0 auto;
}


.page-nav{
    position: sticky;
    top: 84px;
    padding: 20px 0;
    background: rgba(255,255,255,.8);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 999;
}
.page-nav ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 90%;
     max-width: 900px;
    margin: 0 auto;
    gap:8px;
}
.page-nav li{
    width: calc(25% - 6px);
    height: 28px;
}
.page-nav li:last-child{
    margin-right: 0;
}
.page-nav li a{
    width: 100%;
    height: 100%;
    border: solid 2px var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blue);
    font-weight: 500;
    background: #fff;
    font-size: 16px;
}

.page-nav li a.hover{
    background: var(--blue);
    color: #fff;
}

@media screen and (max-width: 896px){
    
    .page-nav{
    position: sticky;
    top: 60px;
}
.page-nav li{
    width: calc(50% - 6px);
    height: 28px;
}

.page-nav li a{
    font-size: 14px;
}

    
}
.outline{
   padding-top: 64px;
    padding-bottom: 84px;
}
.outline-txt{
    color: var(--brown);
    text-align: center;
    font-weight: 600;
}
.outline-txt h3{
    font-size: 36px;
    margin-bottom: 6px;
}

.outline-txt .venue{
    font-size: 28px;
    margin-bottom: 6px;
}
.outline-txt .date{
    font-size: 24px;
    margin-bottom: 10px;
    
}
.outline-txt .notice{
    font-size: 14px;
    margin-bottom: 20px;
}

.outline-txt .contact{
    font-size: 14px;
    font-weight: 500;
}


@media screen and (max-width: 896px){
    
    .outline{
   padding-top: 32px;
    padding-bottom: 40px;
}

.outline-txt h3{
    font-size: 24px;
    margin-bottom: 6px;
}

.outline-txt .venue{
    font-size: 20px;
    margin-bottom: 6px;
}
.outline-txt .date{
    font-size: 18px;
    margin-bottom: 10px;
    
}
.outline-txt .notice{
    font-size: 12px;
    margin-bottom: 20px;
}

.outline-txt .contact{
    font-size: 14px;
    font-weight: 500;
}
    
    
}
footer{
    text-align: center;
    padding-bottom: 60px;
    font-size: 12px;
    background: var(--blue2);
    padding-top: 40px;
    color: #fff;
   
    
}


footer .link{
    max-width: 880px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
}

footer .link .link-logo{
    width: 180px;
    flex-shrink: 0;
    margin-right: 84px;
    
}
footer .link .link-logo img:first-child{
    margin-bottom: 8%;
}
footer .link .link-btn{
    width: 100%;
}
footer .link .link-btn a{
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 2px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}
footer .link .link-btn a:last-child{
    margin-bottom: 0;
}
footer .link .link-btn a.hover{
    background: #fff;
    color: var(--blue);
}
footer .link .link-btn a:after{
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 6px);
    right: 12px;
    width: 12px;
height: 12px;
background-color: #fff;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
    
}
footer .link .link-btn a.hover:after{
    background-color:var(--blue);
}

footer a.contact-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 36px;
    border-radius: 100px;
    background: #fff;
    color: var(--blue2);
    margin: 0 auto 20px;
    font-weight: 700;
    border: solid 1px #fff;
}

footer a.contact-btn.hover{
    color:#fff;
   background: none;
}

footer p{
   
    margin-bottom: 20px;
}
footer small.copyright{
    display: block;
    text-align: center;
}


#contact-modal{
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
}

#contact-modal strong{
    font-size: 120%;
}
#contact-modal p a{
    text-decoration: underline;
}
@media screen and (max-width: 896px){
    
    footer{
        font-size: 10px;
         padding-bottom: 40px;
    }
      
    footer .link{
    display: flex;
    flex-flow: column;
}

footer .link .link-logo{
    width: 120px;
    margin: 0 auto 20px;
    
}
footer .link .link-btn{
    width: 100%;
}
footer .link .link-btn a{
    width: 90%;
   font-size: 14px;
    margin: 0 auto 12px;
}


    
    footer p{
        margin-bottom: 12px;
    }
    
#contact-modal{
    font-size: 12px;
}

}

.ticket-txt{
    text-align: center;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom:  48px;
}
.ticket-txt small{
    font-size: 12px;
}

@media screen and (max-width: 896px){
    
    .ticket-txt{
    font-size: 14px;
    margin-bottom:  20px;
}
  .ticket-txt small{
    font-size: 10px;
}  
}

.ticket-type ul{
    display: flex;
    justify-content: center;
    gap:48px;
}

.ticket-type li{
    width: 33.33%;
    max-width: 180px;
}
.ticket-type li a{
    transition-duration: 0.2s;
}
.ticket-type li a.hover{
    filter: brightness(1.1);
}


@media screen and (max-width: 896px){
    
    .ticket-type ul{
        gap:8px;
    }
    
}

.ticket-notice{
    text-align: center;
    line-height: 2;
    background: var(--blue2);
    max-width: 600px;
    margin: 0 auto 64px;
    font-size: 14px;
    border: solid 1px var(--gold);
    padding: 24px 20px;
}


@media screen and (max-width: 896px){
    
.ticket-notice{
    margin: 0 auto 40px;
    font-size: 12px;
}
    
}


.ticket-table-wrap{
    margin: 0 auto 84px;
    margin-bottom:  84px;
    max-width: 1280px;
    width: 90%;
}
.ticket-table{
     width: 100%;
    margin: 0 auto;
    font-size: 8px;
    
}

table {
  width:100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 3px solid #000;
    
   
}

/* 最初の行の高さだけ90pxに設定 */
table tbody tr:first-child {
    height: 100px;
}

/* それ以外の行の高さは68pxに設定 */
table tbody tr:not(:first-child) {
    height: 72px;
}
tr{
    text-align: center;
}


tr:nth-child(n+3) td:first-child div,tr:nth-child(4) td:nth-child(2) div{
    text-align: left;
    padding: 0 16px;
    background: #fff;
}

tr:nth-child(even):not(:nth-child(2)){
    background: #e4fcff;
}
td {
    border: 2px solid #000;
    padding: 0;
    color: #000;
   
    position: relative;
    overflow: hidden;
}

/* td内のdivに対してFlexboxと絶対配置を適用 */
td > div {
    display: flex;
    justify-content: center; /* 左右中央揃え */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 6px;
    box-sizing: border-box;
    white-space: normal;   /* テキストの折り返しを許可 (行ヘッダーや日付) */
    flex-flow: column;
     font-size: 12px;
   
}

tr:not(:nth-child(1)) td small{
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
}


@media screen and (max-width: 896px){
    
    .ticket-table-wrap{
        width: 100%;
        overflow-x: scroll;
        margin-bottom: 40px;
    }
    .ticket-table{
        padding: 0 5%;
        font-size: 10px;
        width: 980px;
    }
    td > div {
    padding: 4px 4px;
    box-sizing: border-box;
    white-space: normal;   /* テキストの折り返しを許可 (行ヘッダーや日付) */
    flex-flow: column;
     font-size: 10px;
   
}
    tr:nth-child(n+3) td:first-child div,tr:nth-child(4) td:nth-child(2) div{
    text-align: left;
    padding: 0 8px;
    background: #fff;
}

    tr:not(:nth-child(1)) td small{
   font-size: 8px;
}

}
.empty-top-left { /* このクラスだけはHTMLに残しています。nth-childだと複雑すぎるため */
    background-color: #fff;
    border: none;
    position: relative;
    overflow: hidden;
}

.empty-top-left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top right, transparent calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), transparent calc(50% + 1px));
}

.ticket-schedule-list{
    max-width: 1100px;
    margin: 0 auto;
}
.ticket-schedule-list li:not(:last-child){
    margin-bottom: 8px;
}
.ticket-schedule-list li .ticket-schedule-ttl{
    border: solid 3px var(--blue);
    padding: 3px;
    cursor: pointer;
    position: relative;
}

.ticket-schedule-list li .ticket-schedule-ttl:before{
    content: "";
    display: block;
    position: absolute;
    top:calc(50% - 12px);
    right:32px;
    width:24px;
    height:24px;
    background:url(../img/slide-arrow.svg);
    transition-duration: 0.2s;
}

.ticket-schedule-list li.open .ticket-schedule-ttl:before{
    transform: rotate(180deg);
}
.ticket-schedule-list li .ticket-schedule-ttl:after{
    content: "";
    display: block;
    position: absolute;
    top:calc(50% - 16px);
    left:24px;
   width:24px;
    height:32px;
    background:url(../img/head-icon.svg) no-repeat;
}


.ticket-schedule-list li .ticket-schedule-ttl h3{
    background: var(--blue);
    border: solid 2px var(--blue2);
    padding: 16px 60px;
    font-size: 24px;
    font-weight: 500;
}

.ticket-schedule-list li.open .ticket-schedule-ttl:after{
    animation:2s linear infinite rotation;
}

@keyframes rotation{
  0%{ transform:rotateY(0);}
  100%{ transform:rotateY(360deg); }
}




.ticket-schedule-detail{
    padding: 28px 64px 48px;
    background: var(--blue2);
    display: none;
}
.ticket-schedule-detail p{
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 20px;
}

.ticket-type-info dt,.ticket-schedule-info dt{
    font-weight: 500;
    font-size: 20px;
    padding-left: 20px;
    position: relative;
    margin-bottom: 12px;
   
    border-top: double 3px #fff;
    border-bottom: double 3px #fff;
    padding: 12px 20px;
}
.ticket-type-info dt:before,.ticket-schedule-info dt:before{
    content: "";
    display: block;
    position: absolute;
    top:calc(50% - 10px);
    left:0;
    width: 14px;
    height: 20px;
    background: url(../img/head-icon.svg)
}
.ticket-type-info dd,.ticket-schedule-info dd{
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 1.4;
}
.ticket-type-info dd small,.ticket-schedule-info dd small{
    font-size: 16px;
}
.ticket-type-info dd:last-child,.ticket-schedule-info dd:last-child{
    margin-bottom: 0;
}

.ticket-type-info .ticket-tokuten{
    display: flex;
    gap:12px;
}
.ticket-type-info .ticket-tokuten li{
    max-width: 240px;
    text-align: center;
    font-size: 16px;
}
.ticket-type-info .ticket-tokuten li p{
    margin-bottom: 8px;
}
.ticket-schedule-notice{
    background: var(--blue);
    padding: 120px 180px;
}


.ticket-schedule-notice-txt{
    max-width:1280px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
    
}


@media screen and (max-width: 896px){
    
   
.ticket-schedule-list li:not(:last-child){
    margin-bottom: 8px;
}

.ticket-schedule-list li .ticket-schedule-ttl:before{
    top:calc(50% - 8px);
    right:16px;
    width:16px;
    height:16px;
}

.ticket-schedule-list li .ticket-schedule-ttl:after{
    top:calc(50% - 10.1px);
    left:12px;
   width:16px;
    height:21px;
}


.ticket-schedule-list li .ticket-schedule-ttl h3{
    padding: 16px 32px;
    font-size: 16px;
    line-height: 1.2;
}



.ticket-schedule-detail{
    padding: 20px 16px 36px;
}
.ticket-schedule-detail p{
    font-size: 14px;
    margin-bottom: 20px;
}
    
    .ticket-type-info dd small,.ticket-schedule-info dd small{
    font-size: 12px;
}

.ticket-type-info dt,.ticket-schedule-info dt{
    font-size: 14px;
    padding-left: 20px;
}
.ticket-type-info dt:before,.ticket-schedule-info dt:before{
    content: "";
    display: block;
    position: absolute;
    top:calc(50% - 10px);
    left:0;
    width: 14px;
    height: 20px;
    background: url(../img/head-icon.svg)
}
.ticket-type-info dd,.ticket-schedule-info dd{
    margin-bottom: 24px;
    font-size: 14px;
}

.ticket-type-info dd:last-child,.ticket-schedule-info dd:last-child{
    margin-bottom: 0;
}
    
    
.ticket-type-info .ticket-tokuten{
    display: flex;
    gap:8px;
}
.ticket-type-info .ticket-tokuten li{
    font-size: 12px;
}
   
.ticket-type-info .ticket-tokuten li p{
    margin-bottom: 4px;
    line-height: 1;
}
.ticket-schedule-notice{
    background: var(--blue);
    padding: 40px 20px;
}


.ticket-schedule-notice-txt{
    max-width:1280px;
    margin: 0 auto;
    font-size: 12px;
    line-height: 1.6;
    
}

    
}
.note > li{
    padding-left: 1em;
     position: relative;
}
.note > li .mark{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1em;
    text-align: center;
}

.goods-intro{
    margin-top:  48px;
    margin-bottom: 64px;
}
.goods-intro p{
    color: var(--brown);
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 40px;
}
#tokuten-modal p{
    font-size: 20px;
    line-height: 1.6;
    
}
#tokuten-modal p img{
    max-width: 680px;
    margin: 0 auto;
}
#tokuten-modal p small{
    display: block;
    font-size: 12px;
    margin-top: 20px;
}

.close-modal{
    display: none;
}
.modal-close{
    position: fixed;
    right: 16px;
    top: 16px;
    font-size:  48px;
    
}

@media screen and (max-width: 896px){
    
.goods-intro p{
    color: var(--brown);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 28px;
}
       
    #tokuten-modal p{
    font-size: 14px;
        
        
    
}

#tokuten-modal p small{
    display: block;
    font-size: 10px;
    margin-top: 20px;
}
.modal-close{
    position: fixed;
    right: 16px;
    top: 16px;
    font-size:  48px;
    
}

    
    
}

.goods-lineup{
    margin-bottom: 120px;
}
.goods-lineup > ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
}
.goods-lineup > ul > li{
    border: solid 6px var(--blue2);
    background: #fff;
    padding: 8px;
    position: relative;
    
}

.goods-lineup > ul > li a{
    height: 100%;
    display: block;
    background: var(--blue3);
}
.goods-lineup > ul > li:before{
    content: "";
    display: block;
    position: absolute;
    top:5px;
    left:5px;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    border: solid 3px var(--blue2);
    pointer-events: none;
}
.goods-lineup > ul > li .goods-img{
    aspect-ratio: 1 / 1;
}
.goods-lineup > ul > li .goods-info{
    
    padding: 28px 24px;
}

.goods-lineup > ul > li .sales{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:8px;
    margin-bottom: 24px;
    
}

.goods-lineup > ul > li .sales span{
    background: var(--blue);
    text-align: center;
    font-size: 12px;
    height: 20px;
    line-height: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    
}

.goods-lineup > ul > li h4{
    color: #000;
    font-size: 20px;
    margin-bottom: 12px;
    word-break: break-all;
}
.goods-lineup > ul > li h4 span{
    font-size: 80%;
    display: block;
    margin-bottom: 2%;
}

.goods-lineup > ul > li .price{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    gap:4px 8px;
}
.goods-lineup li .price h5{
   color: var(--blue);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border: solid 2px var(--blue);
    width: 100px;
    height: 24px;
    font-weight: 600;
    
    
}
.goods-lineup > ul > li .price p{
    color: #000;
    font-size: 20px;
}
.goods-lineup > ul > li .price p span{
    font-size: 80%
}
.goods-lineup aside{
    display: flex;
    justify-content: center;
    font-size: 12px;
    margin-top: 20px;
    line-height: 1.4;
}

@media screen and (max-width: 896px){
    
    
.goods-lineup{
    margin-bottom: 120px;
}
.goods-lineup > ul{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
.goods-lineup > ul > li{
    border: solid 4px var(--blue2);
    background: #fff;
    padding: 8px;
    position: relative;
    
}

.goods-lineup > ul > li:before{
    top:5px;
    left:5px;
    width:calc(100% - 10px);
    height:calc(100% - 10px);
    border: solid 2px var(--blue2);
}
.goods-lineup > ul > li .goods-info{
    
    padding: 20px 12px;
}

.goods-lineup > ul > li .sales{
    grid-template-columns: 1fr 1fr 1fr;
    gap:4px;
    margin-bottom: 15px;
    
}

.goods-lineup > ul > li .sales span{
    font-size: 10px;
    height: 20px;
    
}

.goods-lineup > ul >li h4{
    font-size: 18px;
    margin-bottom: 8px;
}
.goods-lineup > ul >li .price{
    margin-bottom: 16px;
}
.goods-lineup li .price h5{
    font-size: 10px;
    width: 80px;
    height: 20px;
    
    
}
.goods-lineup > ul >li .price p{
    font-size: 16px;
}

.goods-lineup aside{
    font-size: 10px;
    margin-top: 12px;
}
    
    
}


@media screen and (max-width: 569px){
    .goods-lineup > ul{
    display: grid;
    grid-template-columns: 1fr;
    gap:12px;
}
    
}

.goods-detail{
        display: flex;
        margin-bottom: 40px;
        align-items: flex-start;
    }
    .main-slide{
        margin-bottom: 16px;
        cursor: col-resize;
    }

  
    .thumb-slide .slick-slide{
        opacity: 0.6;
        cursor: pointer;
        margin: 0 8px;
       
    }
    .thumb-slide .slick-center{
        opacity: 1;
    }
    .goods-img-slide{
        width: 50%;
        margin-right: 40px;
        flex-shrink: 0;
        position: sticky;
        top: 0;
    }

.thumb-slide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.thumb-slide .slide-item {
  cursor: pointer;
    border: solid 2px #fff;
}


.thumb-slide .active {
  border: solid 2px #000;
}

.goods-detail .sales{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:8px;
    margin-bottom: 24px;
    
}

.goods-detail .sales span{
    background:#fff;
    color: var(--blue);
    text-align: center;
    font-size: 12px;
    height: 20px;
    line-height: 0;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    
}


    .goods-detail-txt h4{
        font-size: 24px;
        margin-bottom: 24px;
        font-weight: bold;
        line-height: 1.4;
    }

.goods-detail-txt h4 span{
    display: block;
    font-size: 80%;
}
    .goods-detail-txt .price{
        font-size: 28px;
        margin-bottom: 40px;
        font-weight: bold;
    }
    .goods-detail-txt dl{
        display: flex;
        flex-wrap: wrap;
        border-top: solid 1px rgba(255,255,255,.5);
    }
    .goods-detail-txt dt{
        width: 120px;
        border-bottom: solid 1px rgba(255,255,255,.5);
        padding: 20px 0;
        font-size: 14px;
        line-height: 1.8;
    }
    .goods-detail-txt dd{
        width: calc(100% - 120px);
        font-size: 14px;
        border-bottom: solid 1px rgba(255,255,255,.5);
        padding: 20px 0;
        line-height: 1.8;
        word-break: break-all;
    }
.goods-detail-txt dd:last-child{
    font-size: 12px;
   
}
.goods-detail-txt .copylight{
    display: block;
    font-size: 10px;
    margin-top: 12px;
}


@media screen and (max-width: 896px){
    
    .goods-detail{
        display: flex;
        flex-flow: column;
        margin-bottom: 40px;
        align-items: flex-start;
    }
    .main-slide{
        margin-bottom: 8px;
    }

  .thumb-slide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

    .thumb-slide .slick-slide{
        margin: 0 4px;
       
    }
    .thumb-slide .slick-center{
        opacity: 1;
    }
    .goods-img-slide{
        width: 100%;
        margin-right: 0px;
        flex-shrink: 0;
        position: static;
        top: 0;
        margin-bottom: 40px;
    }

.goods-detail .sales{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:8px;
    margin-bottom: 24px;
    
}



    .goods-detail-txt h4{
        font-size: 16px;
        margin-bottom: 24px;
        font-weight: bold;
        line-height: 1.4;
    }

.goods-detail-txt h4 span{
    display: block;
    font-size: 80%;
}
    
     .goods-detail-txt dl{
        display: flex;
        flex-flow: column;
        border-top: solid 1px rgba(255,255,255,.5);
    }
    
    .goods-detail-txt dt{
        width: 100%;
        padding: 20px 0;
        font-size: 14px;
        padding-bottom: 0;
        border: none;
    }
    .goods-detail-txt dd{
        width: 100%;;
        font-size: 12px;
       padding-top: 0
    }
.goods-detail-txt dd:last-child{
    font-size: 10px;
   
}
.goods-detail-txt .copylight{
    margin-top: 12px;
    text-align: center;
}

    
}

#modal-accessory{
    font-size: 16px;
    line-height: 1.6;
}

#modal-accessory h5{
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
}
.sales-info{
    max-width: 900px;
    margin: 0 auto;
}
.sales-info > ul > li:not(:last-child){
   margin-bottom: 80px;
}
.sales-info-head{
    font-size: 20px;
    margin-bottom: 32px;
    
}
.sales-info-detail{
      font-size: 16px;
    line-height: 1.85;
    
}
.sales-info dl{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    
    
}
.sales-info dt{
    width: 100%;
    flex-shrink: 0;
    height: 24px;
    border: solid 1px #fff;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-right: 12px;
    margin-bottom: 10px;
    
   
    
}



.sales-info-notice{
    font-size: 14px;
    line-height: 1.85;
    background: var(--blue2);
    padding: 24px 20px;
    margin-top:  48px;
    
}

.sales-info-notice h4{
    font-size: 20px;
    text-align: center;
    position: relative;
    margin-bottom: 8px;
}

.sales-info-notice h4:before{
    content: "";
    display: block;
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#fff;
}
.sales-info-notice h4 span{
    position: relative;
    z-index: 2;
    background: var(--blue2);
    padding: 0 8px;
}

@media screen and (max-width: 896px){
    
 
    .sales-info-head{
        font-size: 14px;
        line-height: 1.6;
    }

.sales-info > ul > li{
    margin-top: 96px;
}

.sales-info dt{
    height: 32px;
    
}


    .sales-info-detail{
        font-size: 14px;
    }
.sales-info-notice{
    font-size: 12px;
    padding: 32px  24px;
   
    
}

.sales-info-notice h4{
    font-size: 16px;
}

    
    
}
.ex-coming-soon{
    color: var(--brown);
    font-size: 20px;
    height: calc(100vh - 480px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

@media screen and (max-width: 896px){
    
    .ex-coming-soon{
        font-size: 14px;
        
    }
    
}
.stage-intro{
    text-align: center;
    font-size: 28px;
    color: var(--brown);
    font-weight: bold;
    margin-top:  48px;
}

.program-nav{
    display: flex;
    gap:4px;
    margin-bottom: 28px;
}

.program-list{
    display: none;
    
}
.program-list.active{
    display: block;
}
.program-list .date{
    font-size: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
}
.program-list .date span{
    font-size: 28px;
}

.program-list > ul > li{
    background: #fff;
    border: solid 6px var(--blue2);
    position: relative;
    color: var(--brown);
    padding: 36px 28px;
    margin-bottom: 16px;
    
    
}


.program-list > ul > li:last-child{
    margin-bottom: 0;
}
.program-list > ul > li:after{
    content: "";
    display: block;
    position: absolute;
    top:6px;
    left:6px;
    width:calc(100% - 12px);
    height:calc(100% - 12px);
    border: solid 3px var(--blue2);
    pointer-events: none;
}
.program-list > ul > li .time{
    font-size: 24px;
    margin-bottom: 12px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    font-weight: 500;
}
.program-list .time:before{
    content: "";
    display: block;
    width: 0.8em;
    height: 0.8em;
    background:url(../img/time.svg);
    background-position: center;
    margin-right: 0.2em;
}
.program-list > ul > li h3{
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: 500;
    text-align: center;
}

.program-list > ul > li .cast{
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:24px;
}

.program-list > ul > li .cast h4{
    text-align: center;
   background: var(--blue);
    color: #fff;
    margin-bottom: 12px;
    font-size: 16px;
    padding: 8px;
    font-weight: 600;
    position: relative;
}

.program-list > ul > li .cast h4:after{
    content: "";
    display: block;
    position: absolute;
    top:2px;
    left:2px;
    width:calc(100% - 4px);
    height:calc(100% - 4px);
    border: solid 2px #fff;
}
.program-list .cast > div{
   
}
.program-list .cast ul{
   display: flex;
     gap:16px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 60px;
}
.program-list .cast ul.people-full{
    padding: 0 24px;
}
.program-list .cast li{
    width: 160px;
}

.program-list .cast li p{
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
}

.program-list aside{
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}
.stage-notice{
    margin-bottom: 60px;
}


@media screen and (max-width: 896px){
  .stage-intro{
    font-size: 18px;
    margin-top:  20px;
      line-height: 1.6;
}

.program-nav{
    display: flex;
    gap:4px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.program-list .date{
    font-size: 28px;
    margin-bottom: 16px;
}
.program-list .date span{
    font-size: 20px;
}
.program-list > ul > li{
    border: solid 4px var(--blue2);
    padding: 28px 16px;
    margin-bottom: 16px;
    
    
}
.program-list > ul > li:after{
    top:3px;
    left:3px;
    width:calc(100% - 6px);
    height:calc(100% - 6px);
    border: solid 2px var(--blue2);
}
.program-list > ul > li .time{
    font-size: 14px;
    margin-bottom: 4px;
}
.program-list > ul > li h3{
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}

.program-list > ul > li .cast{
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:24px;
}

.program-list > ul > li .cast h4{
    font-size: 12px;
}

.program-list .cast > div{
   
}
.program-list .cast ul{
   display: flex;
     gap:12px 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0px;
}
.program-list .cast ul.people-full{
    padding: 0 0px;
}
.program-list .cast li{
    width: calc(50% - 4px);
}

.program-list .cast li p{
    font-size: 11px;
    font-weight: 600;
    margin-top: 8px;
}
    .program-list aside{
        font-size: 10px;
        margin-top: 12px;
    }
.stage-notice{
    margin-bottom: 40px;
}


}
.btn01{
    background: url(../img/btn01-back.svg) no-repeat;
    background-position: left 20px top !important;
  background-size: calc(100% - 40px) 100% !important;
    max-width: 480px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: relative;
    font-size: 18px;
    font-weight: 600;
}
.btn01:before,.btn01:after{
     content: "";
    display: block;
    position: absolute;
    top:0;
    aspect-ratio: 21 / 64;
    height: 100%;
    background: url(../img/btn01-side.svg) no-repeat;
}
.btn01:before{
    left: 0;
    transform: scale(-1,1);
    
}
.btn01:after{
    right: 0;
    
}
@media screen and (max-width: 896px){
    
    .btn01{
        height: 48px;
        width: 80%;
        font-size: 14px;
    }
    .btn01{
         background-position: left 15px top !important;
  background-size: calc(100% - 30px) 100% !important;
    }
    
}

.btn02{
    background: url(../img/btn02-back.svg) no-repeat;
    background-position: left 14px top !important;
  background-size: calc(100% - 28px) 100% !important;
    max-width: 520px;
    margin: 0 auto;
    height:  48px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: relative;
    font-size: 24px;
    font-family: YakuHanMP,"Noto Serif JP", serif;
    font-weight: 600;
    
    
}
.btn02:before,.btn02:after{
     content: "";
    display: block;
    position: absolute;
    top:0;
    aspect-ratio: 15 / 48;
    height:100%;
    background: url(../img/btn02-side.svg);
}
.btn02:before{
   left: 0;
    transform: scale(-1,1);
    
}
.btn02:after{
    right: 0;
    
}
.btn02 i{
    position: absolute;
    width: 18px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    transition-duration: 0.2s;
}

.btn02.hover i{
    right: 14px;
}
.btn02 span{
    display: block;
    position: relative;
}

.btn02 span:before,.btn02 span:after{
     content: "";
    display: block;
    position: absolute;
    top:calc(50% - 6px);
    width:72px;
    height:12px;
    background: url(../img/title02-frame.svg);
    background-size: auto 100%;
    background-position: right;
}
.btn02 span:before{
   left: calc(100% + 12px);
    transform: scale(-1,1);
    
}
.btn02 span:after{
   right: calc(100% + 12px);
    
}

@media screen and (max-width: 896px){
    .btn02 i{
    width: 14px;
}

.btn02.hover i{
    right: 14px;
}
    .btn02 span:before,.btn02 span:after{
        width: 48px;
        height: 8px;
        top:calc(50% - 4px);
    }

}

.btn03{
    background: url(../img/btn03-back.svg) no-repeat;
    background-position: left 20px top !important;
  background-size: calc(100% - 40px) 100% !important;
    width: 100%;
    margin: 0 auto;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: relative;
    font-size: 20px;
    font-family: YakuHanMP,"Noto Serif JP", serif;
    font-weight: 600;
    
    
    
}
.hover .btn03,.btn03.hover,.btn03.active{
    background: url(../img/btn03-back-hover.svg) no-repeat;
   
}
.btn03:before,.btn03:after{
     content: "";
    display: block;
    position: absolute;
    top:0;
    aspect-ratio: 21 / 40;
    height:100%;
    background: url(../img/btn03-side.svg) no-repeat;
   
   
}
.hover .btn03:before,.btn03.hover:before,.btn03.active:before,.hover .btn03:after,.btn03.hover:after,.btn03.active:after{
    background: url(../img/btn03-side-hover.svg) no-repeat;
    
}
.btn03:before{
    left: 0;
    transform: scale(-1,1);
    
}
.btn03:after{
    right: 0;
    
}


@media screen and (max-width: 896px){
    
    .btn03{
    background-position: left 13px top !important;
  background-size: calc(100% - 26px) 100% !important;
    height: 28px;
    font-size: 14px;
    
    
}
    
}
.btn04{
    background: url(../img/btn04-back.svg) no-repeat;
    background-position: left 13px top !important;
  background-size: calc(100% - 26px) 100% !important;
    max-width: 86.5rem;
    margin: 20px auto 0;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    position: relative;
    font-size: 18px;
   font-weight: 600;
    max-width: 720px;
    
}


.btn04 i{
    position: absolute;
    width: 18px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    transition-duration: 0.2s;
}

.btn04.hover i{
    right: 14px;
}
.btn04:before,.btn04:after{
     content: "";
    display: block;
    position: absolute;
    top:0;
    aspect-ratio: 14 / 56;
     height: 100%;
    background: url(../img/btn04-side.svg) no-repeat;
}

.btn04:before{
    left: 0;
    transform: scale(-1,1);
    
}
.btn04:after{
    right: 0;
    
}
@media screen and (max-width: 896px){
    
    .btn04{
        font-size: 14px;
    }
    
}