@charset "utf-8";
/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
body{font-size: 16px;}

.pcNone{ display:block;}
.spNone{ display:none;}
.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

.tac{ text-align:center;}
.tar{ text-align:right;}
.tal{ text-align:left;}

.txtColorWh{ color: #ffffff;}
.txtColorOr{ color: #E84709;}
.txtColorBl{ color: #0C3484;}
.txtColorGld{ color: #E2B41E;}
.bgColorWh{ background-color: #ffffff;}
.bgColorOr{ background-color: #E84709;}
.bgColorGr{ background-color: #F7F7F7;}
.bgColorBl{ background-color: #0C3484}
.bgColorGld{ background-color: #E2B41E;}

.radius10{ border-radius: 10px;}

.floatR{ float:right;}
.floatL{ float:left;}
.imgfloatR{ float:right;}
.imgfloatL{ float:left;}

.contentsBox .contentsInner{width: 100%;margin: auto;padding: 2em 1em;}
.bgGrey{background: #f2f2f2;}
.f-size80{font-size: 80%;}
.f-size120{font-size: 120%;}
.m-t1{margin-top: 1em;}
.m-b1{margin-bottom: 1em;}
.indent{text-indent: -1em; padding-left: 1em;}
.underLine{color: #000; text-decoration: underline!important;}
.fontRed{color: #ff0000;}
.center{margin-left: auto; margin-right: auto; width: fit-content;}

h3{padding: 0.3em 0; font-size: 130%;}
h3::before{content: ""; position: absolute; left: -1px; bottom: -1px; width: 14px; height: 14px; background: #fff; clip-path: polygon(0 100%, 0 0, 100% 100%);}
h3::after{content: ""; position: absolute; right: -1px; top: -1px; width: 14px; height: 14px; background: #fff; clip-path: polygon(100% 100%, 0 0, 100% 0);}
.bgGrey h3::before{content: ""; position: absolute; left: -1px; bottom: -1px; width: 14px; height: 14px; background: #f2f2f2; clip-path: polygon(0 100%, 0 0, 100% 100%);}
.bgGrey h3::after{content: ""; position: absolute; right: -1px; top: -1px; width: 14px; height: 14px; background: #f2f2f2; clip-path: polygon(100% 100%, 0 0, 100% 0);}

/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
#pageHeader{height: fit-content; position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{position: relative;display: flex; justify-content: space-between; padding: 0.1em 0.5em; align-items: center;}
#pageHeader .headerInner h1{width: 75px;}
#pageHeader .headerInner h1 img{padding:12px 0;}

#pageHeader .headerInner ul.mainList{display: flex;justify-content: flex-end;float: left;align-items: center;width: 100%;margin-bottom: 1em;border-bottom: 1px solid #fff;}
#pageHeader .headerInner .mainList li{margin: 1em 0 0; padding: 0px;}

header .headerInner .menuBtn{display:block; right: 7px; top: 4px; width:60px; height: 60px; cursor:pointer; margin:0; z-index:10000; position:absolute; background: url("/files/user/_/fanclub25-26/img/menu_open.png")no-repeat; background-size: contain;}
header .headerInner .menuBtn.active{top: 4px; background: url("/files/user/_/fanclub25-26/img/menu_close.png")no-repeat; background-size: contain;}
header .headerInner nav.naviBox{width:100%; height:100%; margin:0 auto; padding: 4em 2em 0;}
header .headerInner nav.naviBox.active{transform: translateX(0%);overflow-y:scroll;-ms-overflow-style:none;/* IE, Edge 対応 */scrollbar-width:none;}
header .headerInner nav.naviBox.active::-webkit-scrollbar{ display:none;}
header .headerInner nav.naviBox ul{font-size: 1em;}
header .headerInner nav.naviBox li{margin-bottom: 1.8em;}
header .headerInner nav.naviBox li ul.listInner li{font-size: 80%; margin: 0.8em 0 0 1.5em;}

.scroll_all{position: sticky;bottom: 1em;width: 260px;z-index: 5;margin: 0 10px 0 auto;}

/*----------------------------------------------------------------------------
 ***                                                                    fvBox
----------------------------------------------------------------------------*/
.fvBox h2{font-size: 200%; bottom: 60px;}
.fvBox p{font-size: 150%; top: 60px;}
.fvBox .logo{width: 220px; height: 220px; top: 47%; left: 50%; transform: translate(-50%,-50%);}

/*----------------------------------------------------------------------------
 ***                                                                  changes
----------------------------------------------------------------------------*/
#changes .scroll_ImgBox{position: relative;overflow: hidden;}
#changes .scroll_ImgBox .scroll_ImgBoxInner{width: 100%; overflow-y: auto;}
#changes .scroll_ImgBox .imgBox{display: flex; align-items: flex-start; position: relative; min-width: 650px;}
#changes .img01{position: sticky; left: 0; top: 0; margin-right: -100%; z-index: 1; clip-path: inset(0 83.3% 0 0);}
#changes .img02{display: block;}

/*----------------------------------------------------------------------------
 ***                                                                      fee
----------------------------------------------------------------------------*/
#fee .price{margin: 1em 0; line-height: 1.8;}
#fee .cansel p{margin: 1em 0 0.5em;}

/*----------------------------------------------------------------------------
 ***                                                                     plan
----------------------------------------------------------------------------*/
#plan ul{gap: 1em; margin: 1em auto;}
#plan ul li{max-width: 150px; max-height: 150px;}
#plan ul li .full{top: -10px; left: -30px; width: 75px; height: 75px;}

/*----------------------------------------------------------------------------
 ***                                                                  benefits
----------------------------------------------------------------------------*/
#benefits{width: 100%;}
#benefits .scroll_ImgBox{position: relative;overflow: hidden;}
#benefits .scroll_ImgBox .scroll_ImgBoxInner{width: 100%; overflow-y: auto;}
#benefits .scroll_ImgBox .imgBox{display: flex; align-items: flex-start; position: relative; min-width: 650px;}
#benefits .img01{position: sticky; left: 0; top: 0; margin-right: -100%; z-index: 1; clip-path: inset(0 70.8% 0 0);}
#benefits .img02{display: block;}

/*----------------------------------------------------------------------------
 ***                                                            aboutBenefits
----------------------------------------------------------------------------*/
#aboutBenefits .cardList{justify-content: center; margin: 0 0 1.5em;}
#aboutBenefits .modal-window{width: 90%; max-height: 90%; padding: 3em 2em 2em;}
#aboutBenefits .modal-window h5{font-size: 130%;}
#aboutBenefits .modal-window img{width: auto; max-width: 100%;}
#aboutBenefits .modal-window .sp50{width: 50%;}
#aboutBenefits .modal-window .icon_01l{width: 41px; height: 23px;}
#aboutBenefits .modal-window .icon_02l{width: 87px; height: 23px;}
#aboutBenefits .modal-window .icon_03l{width: 122px; height: 23px;}
#aboutBenefits .modal-window .icon_04l{width: 163px; height: 23px;}
#aboutBenefits .modal-window .icon_05l{width: 202px; height: 23px;}
#aboutBenefits .modal-window img.spScreen{width: 100%; max-width: 200px;}

/*----------------------------------------------------------------------------
 ***                                                           benefitsTicket
----------------------------------------------------------------------------*/
#benefitsTicket .icon{width: 170px; height: 24px;}
#benefitsTicket .seatLi{flex-direction: column; margin-bottom: 1em;}
#benefitsTicket .howto .slideBox .imgBox{width: 80%;}
#benefitsTicket .howto .slideBox .slide-arrow{width: 50px; height: 50px;}
#benefitsTicket .howto .slideBox .left-arrow{background: url("../img/btn_left.png"); left: 0.5em; background-size: 100%; background-repeat: no-repeat;}
#benefitsTicket .howto .slideBox .right-arrow{background: url("../img/btn_right.png"); right: 0.5em; background-size: 100%; background-repeat: no-repeat;}
#benefitsTicket .howto .slideBox .txtBox{padding: 0 1em; height: 7.5em;}

#benefitsTicket .exchange p{text-align: left;}
#benefitsTicket .exchange .scroll_ImgBox{position: relative;overflow: hidden;}
#benefitsTicket .exchange .scroll_ImgBox .scroll_ImgBoxInner{width: 100%; overflow-y: auto;}
#benefitsTicket .exchange .scroll_ImgBox .imgBox{display: flex; align-items: flex-start; position: relative; min-width: 700px;}
#benefitsTicket .exchange .img01{position: sticky; left: 0; top: 0; margin-right: -100%; z-index: 1; clip-path: inset(0 81.3% 0 0);}
#benefitsTicket .exchange .img02{display: block;}
/*----------------------------------------------------------------------------
 ***                                                                    point
----------------------------------------------------------------------------*/
#point .icon{max-width: 205px;}

/*----------------------------------------------------------------------------
 ***                                                                  payment
----------------------------------------------------------------------------*/
#payment .tab-btn{padding: 0.5em;}
#payment .tab-btn .vipIcon{width: 42px; height: 23px;}
#payment .tab-btn .othrerIcon{width: 208px; height: 23px;}
#payment .tab-content .boxArea{padding: 2em 1em;}
#payment .tab-btn img{border: 1px solid #fff;}

/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/
/* footer */
#pageFooter{ }
#pageFooter .footerInner{flex-direction: column;}
#pageFooter dl{width:100%; justify-content: space-between; padding-right: 0.5em;}
#pageFooter dt{width:15%;}
#pageFooter  p{margin-top: 1em;}


@media screen and (max-width: 950px) and (min-width: 500px){
	#sponsor ul:nth-of-type(2) li img{width: 100%;}
}