@charset "utf-8";

/* Reset Style
==================================================*/

* { margin: 0; padding: 0; font-size: 100%; box-sizing: border-box;}
html { height: 100%; margin: 0; padding: 0; line-height: 1.5; zoom: 1;}
body { height: 100%; margin: 0; padding: 0; font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; font-size: 20px; zoom: 1; color: #333333;}

hr { display: none; }
img { border: none; line-height: 0; vertical-align: bottom; }
div, dl, dt, dd, form, input, ul, ol, li, p, select, textarea, span, th, td { margin: 0; padding: 0; }
li { list-style-type: none; border: 0; outline: 0; }
address, th, caption, em, dfn { font-style: normal; font-weight: normal; font-size: 100%; }
strong{font-weight: bold;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; margin: 0; padding: 0; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; font-size: 100%; font-size: inherit; }

a { color: #fff; text-decoration: none;
}
a:link { text-decoration: none;}
a:visited {}
a:hover { text-decoration: underline;opacity: 0.8;}
a:active { text-decoration: underline;}

img{width:100%;height: auto;}
/* clearfix
============================= */
.clearfix:after {
content: "" ;
display: block ;
clear: both ;
height: 0 ;
visibility: hidden ;
font-size: 0.1em;
line-height: 0;
}
.clearfix { min-height: 1px;}
* html .clearfix {height: 1px;}

/*----------------------------------------------------------------------------
 ***                                                                    共通
----------------------------------------------------------------------------*/
.pcNone{ display:none;}
.spNone{ display:block;}
.dispFlex{ display: flex;}
.posiR{ position: relative;}
.posiA{ position: absolute;}

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

.jcont-c{justify-content: center;}
.jcont-sb{justify-content: space-between;}

.contentsBox .contentsInner{max-width: 955px;width: 100%;margin: auto;padding: 50px 0;}
.bgGrey{background: #f2f2f2;}
.f-bold{font-weight: bold;}
.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{position: relative; display: block; width: 100%; background: #e94709; color: #fff; padding: 0.1em 0; font-weight: 600; text-align: center; font-size: 150%; margin-bottom: 1em;}
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);}
h4{text-align: center; font-size: 120%; color: #e94709; font-weight: 800; margin-bottom: 0.5em;}
h5{font-size: 120%; color: #e94709; font-weight: 800; margin: 1.5em 0 0.5em;}
.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);}
.backBtn{display: none; color: #e94709; font-size: 80%; margin-bottom: 1em; border: none; background: none;}
.backBtn:hover{cursor:pointer; opacity: 0.7;}

/*----------------------------------------------------------------------------
 ***                                                                  header
----------------------------------------------------------------------------*/
#pageHeader{background:#e94709; height: 100px; position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{padding:0 80px 0 1%;position: relative;display: flex; justify-content: space-between;}
#pageHeader .headerInner h1{width: 150px; float:left;}
#pageHeader .headerInner h1 img{padding:12px 0;}
#pageHeader .headerInner ul.mainList{display: flex;justify-content: flex-end;float: left;align-items: center;width: 100%;}
#pageHeader .headerInner .mainList li{width: 76px; height: 76px; margin: 14px 4px 10px;}
#pageHeader .headerInner .mainList li a:hover{opacity: 0.8;}

header .headerInner .menuBtn{display:block; right: 7px; top: 13px; width:76px; height: 76px; 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: 14px; background: url("/files/user/_/fanclub25-26/img/menu_close.png")no-repeat; background-size: contain;}
header .headerInner nav.naviBox{width:50%; height:100%; margin:0 auto; padding: 4em; position:fixed; top:0; right:0; background:#e94709; transform:translateX(100%); z-index: 9999; transition:all .6s;}
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: 20px;}
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;}

/*----------------------------------------------------------------------------
 ***                                                                    fvBox
----------------------------------------------------------------------------*/
.fvBox{background: url(/files/user/_/fanclub25-26/img/fv_bg.jpg);background-position: top center;background-repeat: no-repeat;height: 574px;}
.fvBox h2{position: absolute; bottom: 55px; font-size: 50px; color: #fff; font-weight: 600; width: 100%; text-align: center;}
.fvBox p{position: absolute; top: 45px; font-size: 30px; color: #fff; font-weight: 600; width: 100%; text-align: center;}
.fvBox .logo{width: 300px; height: 300px; top: 47%; left: 50%; transform: translate(-50%,-50%);}
/* .back_top{width: 120px; position: fixed; bottom: 2%; right: 2%; z-index: 100;} */

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

/*----------------------------------------------------------------------------
 ***                                                                  changes
----------------------------------------------------------------------------*/
#changes .img02{display: none;}
/* #changes .tableWrap{overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; position: relative; box-sizing: border-box;}
#changes .tableSticky{position: sticky; left: 0; background: #ffe1cc;
  &:before{content: ""; position: absolute; top: -1px; left: -1px; width: 100%; height: 100%; border: 1px solid #000;}}
#changes table{min-width: 955px; border-collapse: collapse; table-layout: fixed;}
#changes th,#changes td{border: #000 solid 1px;}
#changes thead{font-size: 20px; color: #fff;}
#changes thead th:nth-child(odd){background: #e94709; font-weight: 600;}
#changes thead th:nth-child(even){background: #808080; font-weight: 600;}
#changes tbody{font-size: 14px;}
#changes tbody th{padding: 1em; background: #ffe1cc;}
#changes tbody td{padding: 1em; background: #ffe1cc;}
#changes tbody td:nth-child(even){background-color: #e5e5e5;} */

/*----------------------------------------------------------------------------
 ***                                                                     plan
----------------------------------------------------------------------------*/
#plan ul{display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 1em;}
#plan ul li{width: 312px; height: 312px;}
#plan ul li:first-child{position: relative;} 
#plan ul li .full{position: absolute; top: -20px; left: -40px; width: 150px; height: 150px;}

/*----------------------------------------------------------------------------
 ***                                                               membership
----------------------------------------------------------------------------*/
/* #membership .membershipImg{margin-top: 1.5em; overflow-x: auto;} */
/* #membership .membershipImg p{min-width: 955px; min-height: 370px;} */

/*----------------------------------------------------------------------------
 ***                                                                 benefits
----------------------------------------------------------------------------*/
#benefits{width: 100%;}
#benefits .img02{display: none;}

/*----------------------------------------------------------------------------
 ***                                                            aboutBenefits
----------------------------------------------------------------------------*/
#aboutBenefits .cardList{display: flex; flex-wrap: wrap; gap: 20px; margin: 1.5em 0;}
#aboutBenefits .card{display: flex; flex-direction: column; justify-content: space-between; width: 305px; height: 305px; border: #e94709 solid 1px; padding: 0.5em;}
#aboutBenefits .card.noMore{padding-bottom: 1.5em;}
#aboutBenefits .card button{display: block; background: none; border: none; appearance: none; -webkit-appearance: none; line-height: 0; color: #fff; width: 58px; height: 12px; align-self: flex-end; margin: -0.1em;}
#aboutBenefits .card button:hover{cursor: pointer; background: #fff; color: #000; opacity: 0.7;}
#aboutBenefits .card a{display: block; background: none; border: none; appearance: none; -webkit-appearance: none; line-height: 0; color: #fff; width: 58px; height: 12px; align-self: flex-end; margin: -0.1em;}
#aboutBenefits .card a:hover{cursor: pointer; background: #fff; color: #000; opacity: 0.7;}
#aboutBenefits .card a.point-btn{width: 222px; height: 16px;}
#aboutBenefits .card a.ticket-btn{width: 220px; height: 16px;}

#aboutBenefits .ttlArea .cardTtl{display: flex; justify-content: center; align-items: center; height: 3.2em;}
#aboutBenefits .ttlArea .cardTtl h5{line-height: 1.2; text-align: center; font-size: 95%; color: #e94709; font-weight: 800; margin: 0;}
#aboutBenefits .ttlArea .cardIcon{margin: 0 auto; font-size: 70%; font-weight: 600; text-align: center;}
#aboutBenefits .ttlArea .icon_01s{width: 50px; height: 28px;}
#aboutBenefits .ttlArea .icon_02s{width: 100px; height: 28px;}
#aboutBenefits .ttlArea .icon_03s{width: 148px; height: 28px;}
#aboutBenefits .ttlArea .icon_04s{width: 198px; height: 28px;}
#aboutBenefits .ttlArea .icon_05s{width: 246px; height: 28px;}

#aboutBenefits .imgArea{position: relative;}
#aboutBenefits .imgArea .cardTxt{position: absolute; top: -0.3em; left: 50%; transform: translateX(-50%); width: 100%; font-size: 74%; font-weight: 800; text-align: center;}
#aboutBenefits .imgArea .cardImg{margin: 0 -0.5em;}

#aboutBenefits .Inner{display: none; visibility: hidden; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.5); z-index: 999; transition: 1s; opacity:0;}
#aboutBenefits .Inner.open{display: block; visibility: visible; transition: 1s; animation-name: fadeInAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity:0}
#aboutBenefits #close{width: 40px; height: 40px; position: absolute; right: 12px; background:none; color: #404040; font-size: 35px; font-weight: 100; border: none; font-family:'Noto Sans Japanese',"游ゴシック", YuGothic; top: 0;}
body.no_scroll{overflow: hidden;}
@keyframes fadeInAnime{from{opacity: 0;}to {opacity: 1;}}

#aboutBenefits .modal-window{position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; border: 1px solid #000; width: 80%; max-width: 955px; max-height: 80vh; margin: 0; padding: 3em 7em; color: #000; font-size: 15px; box-sizing: border-box; display: flex; flex-direction: column;}
#aboutBenefits .modal-windowInner{overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch;}
#aboutBenefits .modal-window h5{font-size: 150%; margin: 0; text-align: center;}
#aboutBenefits .modal-window img{width: auto; max-width: none;}
#aboutBenefits .modal-window img.spScreen{max-width: 300px;}
#aboutBenefits .modal-window .imgBox1{margin: 1em auto; width: fit-content;}
#aboutBenefits .modal-window .imgBox2{margin: 2em auto; width: fit-content;}
#aboutBenefits .modal-window .cardIcon{margin: 1em auto;}
#aboutBenefits .modal-window .icon_01l{width: 82px; height: 46px;}
#aboutBenefits .modal-window .icon_02l{width: 164px; height: 46px;}
#aboutBenefits .modal-window .icon_03l{width: 243px; height: 46px;}
#aboutBenefits .modal-window .icon_04l{width: 325px; height: 46px;}
#aboutBenefits .modal-window .icon_05l{width: 404px; height: 46px;}
#aboutBenefits .modal-window dl dd + dt{margin-top: 1em;}
#aboutBenefits .modal-window .tableWrap{max-width: 793px; margin: 1em 0;}
#aboutBenefits .modal-window .tableWrap tr th:first-child{width: 9em;}
#aboutBenefits .modal-window .tableWrap th{background: #ccc; border: #000 solid 1px; width: 5em; padding: 0.3em 0; font-weight: 600;}
#aboutBenefits .modal-window .tableWrap td{background: #fff; border: #000 solid 1px; text-align: center;}

/*----------------------------------------------------------------------------
 ***                                                           benefitsTicket
----------------------------------------------------------------------------*/
#benefitsTicket .sectionArea{margin: 1em 0 2em;}
#benefitsTicket .sectionArea:last-child{margin-bottom: 0;}
#benefitsTicket .icon{width: 340px; height: 48px; margin: 0 auto;}
#benefitsTicket .seatLi{display: flex; align-items: center; font-weight: 600; line-height: 1.2; justify-content: center;}
#benefitsTicket .seatLi .area{display: flex; align-items: center;}
#benefitsTicket .seatLi .kakko{font-size: 150%;}
#benefitsTicket .seatLi .color01{display: inline-block; width: 76px; height: 34px;}
#benefitsTicket .seatLi .color02{display: inline-block; width: 44px; height: 34px;}
#benefitsTicket .attentionUl{max-width: 800px; margin: 1em auto; font-size: 74%;}
#benefitsTicket .attentionLi{padding-left: 1em; text-indent: -1em;}
#benefitsTicket .attentionLi a{text-decoration: underline;}
/* #benefitsTicket .seatImg{overflow-x: auto;} */
/* #benefitsTicket .seatImg p{min-width: 955px; min-height: 686px;} */

#benefitsTicket .match p{width: fit-content; font-weight: 600; margin: 0 auto;}

#benefitsTicket .exchange p{text-align: center;}
#benefitsTicket .exchange p .fontBlue{color: #62acab;}
#benefitsTicket .exchange .img02{display: none;}

#benefitsTicket{overflow-x: hidden;}
#benefitsTicket .howto p{width: fit-content; font-weight: 600;}
#benefitsTicket .howto .slideBox{position: relative; width: 100vw; margin: 1.5em calc(50% - 50vw) 0;}
#benefitsTicket .howto .slideBox li{width: 100%; max-width: 600px; height: auto;}
#benefitsTicket .howto .slideBox .txtBox{width: 100%; max-width: 450px; height: 7.5em; margin: 0 auto;}
#benefitsTicket .howto .slideBox .txtBox .txt{font-size: 95%; padding-left: 1em; text-indent: -1em;}
#benefitsTicket .howto .slideBox .txtBox .subTxt{padding-left: 1em; text-indent: -1em; font-size: 68%;}
#benefitsTicket .howto .slideBox .imgBox{position: relative; width: 100%; max-width: 300px; height: auto; border: 12px solid #000; border-radius: 30px; margin: 0 auto; overflow: hidden;}
#benefitsTicket .howto .slideBox .slide-arrow{position: absolute; width: 100px; height: 100px; background-repeat: no-repeat; background-position: center; border: none; z-index: 90; cursor: pointer; top: 50%; transform: translateY(-50%);}
#benefitsTicket .howto .slideBox .left-arrow{background: url("../img/btn_left.png"); left: calc(50% - 350px); background-size: cover;}
#benefitsTicket .howto .slideBox .right-arrow{background: url("../img/btn_right.png"); right: calc(50% - 350px); background-size: cover;}
#benefitsTicket .howto .slideBox .slick-slide{opacity: 0.5;}
#benefitsTicket .howto .slideBox .slick-center{opacity: 1;}
#benefitsTicket .howto .slideBox .slick-disabled{display: none!important;}

#benefitsTicket .attention ul{font-size: 76%;}
#benefitsTicket .attention li{padding-left: 1em; text-indent: -1em;}

#benefitsTicket .QA dt{padding-left: 2em; text-indent: -2em;}
#benefitsTicket .QA dd{padding-left: 2.7em; text-indent: -2.7em; font-size: 75%; margin-bottom: 1em;}
#benefitsTicket .QA dd:last-child{margin-bottom: 0;}

/*----------------------------------------------------------------------------
 ***                                                                    point
----------------------------------------------------------------------------*/
#point .icon{max-width: 410px; margin: 0 auto 1em;}
#point .sectionArea{margin-top: 2em;}
#point .sectionArea h5{background: #e94709; color: #fff; padding: 0.2em 0.4em;}
#point .howtoGet dl{margin: 1em 0;}
#point .howtoCharge dl{margin-bottom: 1em;}
#point .howtoCharge .aboutBooth dd{padding-left: 1em;}
#point .howtoCharge .aboutBooth dd p{padding-left: 2em;}
#point .howtoCharge .aboutBooth .map{margin: 1em 0; padding: 0;}
#point .howtoCharge .aboutBooth .map.map01{max-width: 700px;}
#point .howtoCharge .aboutBooth .map.map02{max-width: 700px;}
#point .howtoCharge .aboutBooth .map.map03{max-width: 700px;}
#point .howtoCharge .aboutBooth .map.map04{max-width: 500px;}
#point .howtoCheck .spImg{width: 160px; margin: 1em auto;}
#point .benefits dt{color: #e94709; margin: 1em 0;}
#point .benefits dt.fontBlue{color: #56adab;}
#point .benefits dt:first-child{margin-top: 0;}
#point .benefits ul{margin-top: 1em;}

/*----------------------------------------------------------------------------
 ***                                                                  payment
----------------------------------------------------------------------------*/
#shipping p{overflow-x: auto;}
#shipping img{min-width: 700px;}

/*----------------------------------------------------------------------------
 ***                                                                  payment
----------------------------------------------------------------------------*/
#payment .btnBox{display: flex;}
#payment .tab-btn{width: 50%; background: #e94709; padding: 1em; border: none; opacity: 0.5;}
#payment .tab-btn img{border: 2px solid #fff;}
#payment .tab-btn.active{opacity: 1;}
#payment .tab-btn .vipIcon{width: 84px; height: 46px;}
#payment .tab-btn .othrerIcon{width: 416px; height: 46px;}
#payment .tab-content h4{margin-top: 1.5em;}
#payment .tab-content h4:first-child{margin-top: 0;}
#payment .tab-content{display: none;}
#payment .tab-content.active{display: block;}
#payment .tab-content .boxArea{width: 100%; text-align: center; margin-top: 1em; padding: 2em; border: #000 solid 1px;}
#payment .tab-content .txtArea{margin-bottom: 1em;}
#payment .tab-content .btn{display: block; max-width: 898px; height: auto; margin: 2em auto 0;}


/*----------------------------------------------------------------------------
 ***                                                                    terms
----------------------------------------------------------------------------*/
#terms a{color: #000; display: block;}
#terms a::after{content: ""; background-image: url(/files/user/_/fanclub25-26/img/icon_link.png); background-repeat: no-repeat; background-size: contain; display: inline-block; width: 1em; height: 1em; vertical-align: middle; margin-left: 0.2em;}
#terms p{margin-top: 1em;}

/*----------------------------------------------------------------------------
 ***                                                                  contact
----------------------------------------------------------------------------*/
#contact a{color: #000; word-break: break-all;}
#contact p{max-width: 690px; margin: 0 auto;}

/*----------------------------------------------------------------------------
 ***                                                                  upgrade
----------------------------------------------------------------------------*/
#upgrade .redBox{position: relative; border: #ff0000 1px solid; padding: 1.2em 1em 1em; margin: 2em auto;}
#upgrade .redBox dt{position: absolute; top: -0.8em; left: 1em;}
#upgrade .txtArea{margin-bottom: 2em;}
#upgrade .txtArea:last-child{margin-bottom: 0;}
#upgrade .txtArea h4{text-align: left;}
#upgrade .txtArea.btn{display: block; max-width: 898px; height: auto; margin: 2em auto;}
#upgrade .flow dd + dt::before{content: "▼"; display: block; margin-left: 1em;}

/*----------------------------------------------------------------------------
 ***                                                                      QA
----------------------------------------------------------------------------*/
#QA a{color: #000;}
#QA dt{margin-top: 2em; color: #e94709; font-weight: 600;}
#QA .chartImg{max-width: 955px; height: auto; margin-top: 1em;}

/*----------------------------------------------------------------------------
 ***                                                                 footer
----------------------------------------------------------------------------*/
/* footer */
#pageFooter{background:#e94709;}
#pageFooter .footerInner{display: flex; justify-content: space-between; align-items: center; padding: 1em;}
#pageFooter dl{width:60%; display: flex; align-items: center; gap: 1em;}
#pageFooter dt{width:7%;}
#pageFooter dd{font-size:70%; color:#FFF;}
#pageFooter  p{font-size:70%; color:#FFF;}

.lineBtn{width: 45%; margin: 1.5em auto 0.8em;}
.lineBtn:hover{opacity: 0.8;}


@media screen and (max-width: 1200px) and (min-width: 951px){
	#pageHeader .headerInner ul{padding: 0px 0 0px 2%;}
	#pageHeader .headerInner li{padding:3% 2%; }
}