@charset "utf-8";
/* CSS Document */
header{height: 0;}
section{padding: 60px 0;}


/* 共通 */
.btn a{background: #e84709;color: #fff;font-weight: bold;position: relative;padding: 0.3em 2em;filter: drop-shadow(0px 5px 0px #ffbdb0);display: inline-block;margin: 1em auto 0;border-radius: 50vw;position: relative;}
.btn a:hover{opacity: 0.8;}
.btn a::after{content:"" ;border: 10px solid transparent;border-left: 17px solid #fff;position: absolute;right: 5%;top: 33%;}
#contentAll .TtlBox{margin: 0 auto 2em;}
#contentAll h2{font-size:35px ;line-height: 1.4;color: #333;}
#contentAll h2 span{display: inline-block;border-bottom: 3px solid #00aeac;color: #00aeac;font-size:30px ;padding: 0 1em;line-height: 0.6;}

#topMain{border-top: 10px solid #e84709;background: url(/fanclub/images/img_bg01_pc.jpg)no-repeat;background-position: top center;background-size: 100% auto;}
#topMain #mainSec{background: url(/fanclub/images/img_bg02_pc.png)no-repeat;position: relative;padding: 4em 0 0;background-size: 100% 100%;}
#topMain #mainSec::before{content: "";background: url(/fanclub/images/img_bg03_pc.png)no-repeat;position: absolute;right: 2em;top: 2em;width:103px ;height: 86px;}

#topMain #mainSec .mainTxtBox{margin: auto;position: relative;padding-bottom: 5em;}
#topMain #mainSec .mainTxtBox .subTtl{filter:drop-shadow(5px 5px 6px #999);}
#topMain #mainSec .mainTxtBox .mainTtl{margin-top: -3em;}

#topMain #mainSec .illustBox{position: relative;max-width: 1800px;width: 100%;margin: auto;}
#topMain #mainSec .illustBox .player{position: absolute;bottom: 0}
#topMain #mainSec .illustBox .player.player-left{left: 7em;}
#topMain #mainSec .illustBox .player.player-right{right: 7em;}

#topMain #mainSec .mainTxtBox a{font-size: 185%;}

/*コンテンツ部分*/
#overviewSec{background: #ceeae8;}
#overviewSec .overview-all .overview p{font-size: 18px;margin-bottom: 20px;;}
#overviewSec .overview-all .overview p.text-bold{font-weight: bold;font-size: 24px;color: #e84709;}

#periodSec .period-all .period p{font-size: 26px;font-weight: bold;}
#periodSec .period-all .period p span{display: inline-block;background: linear-gradient(transparent 50%, #ceeae8 50%);padding: 0 5px;}

#planSec{background: #ceeae8;}
#planSec .plan-all{max-width:600px;margin: auto;}
#planSec .planInner{display: flex;flex-wrap: wrap;justify-content: center;align-items: stretch;gap: 4em;}
#planSec .planInner .planBox{background: #fff;width: 45%;}
#planSec .planInner .planBox a:hover{opacity: 0.7;}
#planSec .planInner .planBox .planTtlBox{padding: 0.8em 0 1.2em;clip-path: polygon(100% 0%, 100% 70%, 50% 100%, 0 70%, 0 0, 50% 0);margin: -1px -1px 0 -1px;border-radius: 5px 5px 0 0;}
#planSec .planInner .planBox .planTtlBox h3{color:#fff;font-size:30px;font-weight: bold;text-align: center;}
#planSec .planInner .planBox .priceBox{padding: 0.5em 0 0.7em;}
#planSec .planInner .planBox .priceBox .nenkaihi{font-size:20px ;font-weight: bold;}
#planSec .planInner .planBox .priceBox .priceTxt{font-size:60px;line-height: 1;text-indent: 15px;}
#planSec .planInner .planBox .priceBox .priceTxt .tax{font-size:18px;font-weight: bold;text-indent: -5px;display: inline-block;}
#planSec .planInner .planBox .priceBox .more{position: relative;font-weight: bold;margin-top:12px;font-size: 15px;line-height: 1;text-indent: -15px;}
#planSec .planInner .planBox .priceBox .more::after{content: "";border: 10px solid transparent;position: absolute;top: 1px;}

#planSec .planInner .generalBox{border: 3px solid #e84709;border-radius: 10px;}
#planSec .planInner .generalBox .planTtlBox{background: #e84709;}
#planSec .planInner .generalBox .priceBox .more{color: #e84709;}
#planSec .planInner .generalBox .priceBox .more::after{border-top: 12px solid #e84709 ;}

#planSec .planInner .juniorBox{border: 3px solid #00aeac;border-radius: 10px;}
#planSec .planInner .juniorBox .planTtlBox{background: #00aeac;}
#planSec .planInner .juniorBox .priceBox .more{color: #00aeac;}
#planSec .planInner .juniorBox .priceBox .more::after{border-top: 12px solid #00aeac ;}
#planSec .juniar-aten{text-align: end;font-size: 16px;}

#benefitSec .benefitInner{max-width: 800px;width: 95%;margin: auto;}
#benefitSec .benefit-aten{font-size: 16px;}
#benefitSec .benefit-Ul{display: flex;flex-wrap: wrap;justify-content:space-between;align-items: stretch;margin-top: 2em;gap: 2em;}
#benefitSec .benefit-Ul .benefit-Li{border: 2px solid #e84709;background: #fff;width: calc(96% / 2);}
#benefitSec .benefit-Ul .benefit-Li .benefit-TtlBox{background: #e84709;color: #fff;margin: 0;padding: 0.5em;}
#benefitSec .benefit-Ul .benefit-Li .benefit-TtlBox h3{font-size: 24px;font-weight: bold;text-align: center;}
#benefitSec .benefit-Ul .benefit-Li .benefit-contentBox{padding: 0 1em 1em;}
#benefitSec .benefit-Ul .benefit-Li .benefit-contentBox .benefit-Txt{font-size:16px;}
#benefitSec .benefit-Ul .benefit-Li .benefit-contentBox .benefit-img{max-width: 185px;margin: auto;}

#benefitSec .benefit-Ul .benefit-Li .popup{margin-top: 10px;cursor: pointer;}
#benefitSec .benefit-Ul .benefit-Li .popup span{border:3px solid #00aeac;color: #00aeac;font-weight: bold;text-align: center;border-radius: 50vw;font-size: 16px;padding: 0.2em 1.5em;display: inline-block;}
#benefitSec .benefit-Ul .benefit-Li .popup span:hover{background: #fff;}

#benefitSec .benefit-aten{margin-top: 1em;}

#benefitSec .popupStyle{box-sizing:border-box; width:600px; height:auto; position:fixed; z-index:999999; padding:2em; display:none; box-shadow:2px 2px 8px 2px rgba(0,0,0,0.4);background: #fff;border: 4px solid #00aeac;}
#benefitSec .popupStyle .pop-Ttl{text-align: center;font-weight: bold;font-size: 25px;}
#benefitSec .popupStyle .benefit-img{width:40% ;margin: auto;}
#benefitSec .popupStyle .shousai p{margin-bottom: 0.3em;font-size: 16px;padding-left: 13px;position: relative;}
#benefitSec .popupStyle .shousai p span{font-weight: bold;}
#benefitSec .popupStyle .shousai p::before{content: "・";position: absolute;left: 0;}
#benefitSec .popupStyle .shousai table{margin-top:1em;width: 100%;}
#benefitSec .popupStyle .shousai table th,
#benefitSec .popupStyle .shousai table td{border: 1px solid #000;padding: 5px;text-align: center;vertical-align: middle;font-weight: bold;font-size: 16px;}
#benefitSec .popupStyle .shousai table .table-Ttl{font-weight: bold;background:#ffbdb0;}
#benefitSec .popupStyle .shousai table .table-Ttl td{background: #ceeae8;}

#benefitSec .popupStyle .btnClose{width:30px; position:absolute; top:15px; right:15px; cursor:pointer;}
#modal-overlay{z-index: 999;display: none;position: fixed;top: 0;left: 0;width: 100%;height: 120%; background-color: rgba(0, 0, 0, 0.65);}


#attentionSec{background: #ceeae8;}
#attentionSec .attentionBox{background: #fff;max-width: 800px;margin: auto;width: 90%;padding: 2em;}
#attentionSec .attentionBox p{margin-bottom: 0.8em;line-height: 1.5em;font-size: 16px;}
#attentionSec .attentionBox .btn_terms{margin: 0.5em 0 0;}
#attentionSec .attentionBox .btn_terms a{display: inline-block;background:#00aeac;color: #fff;font-size: 18px;font-weight: bold;padding: 0.8em 2em;border-radius: 50vw;}
#attentionSec .attentionBox .btn_terms a:hover{opacity: 0.8;}

#endSec{background: #00aeac;padding: 0;}
#endSec .endInner{background: url(/fanclub/images/img_end01.png)no-repeat;background-position: left top;background-size: auto 100%;padding: 60px 0;}
#endSec .endInner .endBox .end-ttl{filter: drop-shadow(5px 5px 5px #666);margin-bottom: 2em;}
#endSec .endInner .endBox .sub-btntxt{color: #fff;font-size: 35px;font-weight: bold;}
#endSec .endInner .endBox .btn a{font-size: 30px;margin: 0.2em 0 0;}


@media (min-width: 768px) and (max-width: 1300px) {
  #topMain #mainSec .mainTxtBox .subTtl{width: 60%;margin: auto;}
  #topMain #mainSec .mainTxtBox .mainTtl{width: 80%;margin: -2em auto 0;}
  #topMain #mainSec .mainTxtBox .season{max-width:80% ;margin: auto;}
  #topMain #mainSec .illustBox .player{width: 35%;}
  #topMain #mainSec .illustBox .player.player-left{left: 0;}
  #topMain #mainSec .illustBox .player.player-right{right:0;}
}

@media screen and (max-width: 767px) {
  section{padding:30px 10px; }
  #contentAll h2{font-size: 7vw;}
  #contentAll h2 span{font-size: 85%;border-bottom: 2px solid #00aeac;}
  #contentAll .TtlBox{margin: 0 auto 1em;}
  #topMain #mainSec::before{background-size: 100%;width: 14%;right: 2vw;top: 2vw;}
  #topMain #mainSec .mainTxtBox{padding-bottom: 25vw;}
  #topMain #mainSec .mainTxtBox .subTtl{max-width: 60%;margin: auto;}
  #topMain #mainSec .mainTxtBox .mainTtl{max-width: 90%;margin: -2% auto 0;}
  #topMain #mainSec .mainTxtBox .season{max-width:80% ;margin: auto;}
  #topMain #mainSec .illustBox .player{width: 37%;}
  #topMain #mainSec .illustBox .player.player-left{left: 3vw;}
  #topMain #mainSec .illustBox .player.player-right{right: 3vw;}
  #topMain #mainSec .mainTxtBox a{font-size: 5vw;}
  .btn a::after{border: 2.5vw solid transparent;border-left:3.5vw solid #fff ;top: 26%;}

  #overviewSec .overview-all .overview p{font-size:4vw ;text-align: left;margin-bottom: 10px;}
  #overviewSec .overview-all .overview p.text-bold{font-size: 4.5vw;}
  #periodSec .period-all .period p{font-size: 5.5vw;}


  #planSec .planInner{gap: 1em;}
  #planSec .planInner .planBox .planTtlBox h3{font-size:4.5vw ;}
  #planSec .planInner .planBox .priceBox .nenkaihi{font-size:4vw ;}
  #planSec .planInner .planBox .priceBox .priceTxt{font-size:10vw ;}
  #planSec .planInner .planBox .priceBox .priceTxt .tax{font-size: 3vw;}
  #planSec .planInner .planBox .priceBox .more{font-size: 3vw;}
  #planSec .planInner .planBox .priceBox .more::after{border:2vw solid transparent ;top: 0.3vw;}
  #planSec .planInner .generalBox .priceBox .more::after{border-top: 2vw solid #e84709;}
  #planSec .planInner .juniorBox .priceBox .more::after{border-top: 2vw solid #00aeac}
  #planSec .juniar-aten{font-size:3.5vw ;}

  #benefitSec .benefit-aten{font-size: 3.5vw;}
  #benefitSec .benefit-Ul{gap: 1em 0.5em;top: 1em;}
  #benefitSec .benefit-Ul .benefit-Li .benefit-TtlBox{height: 13vw;display: flex;justify-content: center;align-items: center;}
  #benefitSec .benefit-Ul .benefit-Li .benefit-TtlBox h3{font-size: 4vw;line-height: 1.2;}
  #benefitSec .benefit-Ul .benefit-Li .benefit-contentBox{padding: 0 0.5em 1em;}
  #benefitSec .benefit-Ul .benefit-Li .benefit-contentBox .benefit-Txt{font-size: 3.5vw;text-align: left;}
  #benefitSec .benefit-Ul .benefit-Li .popup span{font-size: 3.5vw;}
  #benefitSec .popupStyle{width: 90%;padding: 1em;}
  #benefitSec .popupStyle .pop-Ttl{font-size: 5vw;}
  #benefitSec .popupStyle .benefit-img{width: 50%;}
  #benefitSec .popupStyle .shousai p{font-size: 3.5vw;margin-bottom: 0.5em;line-height: 1.3;}
  #benefitSec .popupStyle .shousai table .table-Ttl{list-style: 1.2;}
  #benefitSec .popupStyle .shousai table th,
  #benefitSec .popupStyle .shousai table td{font-size: 3.5vw;}
  #benefitSec .popupStyle .btnClose{width: 20px;}
  
  #attentionSec .attentionBox p{font-size:3.5vw ;}
  #endSec .endInner .endBox .end-ttl{max-width: 90%;margin: 2em auto;}
  #endSec .endInner .endBox .sub-btntxt{font-size:7vw ;}
  #endSec .endInner .endBox .btn a{font-size: 6vw;}
  #endSec .endInner .endBox .btn a::after{top: 3.5vw;}
}