@charset "utf-8";
img{ width:100%; height:auto;}
section{}
.sectionInner{max-width: 1200px;margin:0 auto;width:95%;line-height: 1;padding: 100px 0;}
.pcNone{ display:none;}
.spNone{ display:block;}
body.no_scroll{overflow: hidden;}
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


h3{font-size: 100px;font-weight: 500;line-height: 1; text-align: center; margin-bottom: 0.5em;}
h3 span.en{display: inline-block; position: relative; line-height: 0.9;}
h3 span.en::after{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(to right, #0d79be, #e94709);}
h3 span.jp{font-size: 20%;display: block; margin-top: 0.2em;}

/*header*/
#pageHeader{background:#000;position: sticky;top: 0;z-index: 100;}
#pageHeader .headerInner{padding:0 1%;position: relative;}
#pageHeader .headerInner h1{ float:left;width: 13%;}
#pageHeader .headerInner h1 img{padding:15px 0;}
#pageHeader .headerInner ul{display: flex;justify-content: space-around;float: right;align-items: center;padding: 42px 0 42px 3%;width: 70%;}
#pageHeader .headerInner li{margin: 0 1%;font-size:20px;text-align: center;display: flex;flex-direction: column;justify-content: center; font-weight: bold;}
#pageHeader .headerInner li a{color: #fff;}
#pageHeader .headerInner li a:hover{opacity: 0.8;}


/*中国ダービーとは*/
#aboutSec{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img01.jpg"); background-size: cover; background-position: center; background-attachment: fixed;}
#aboutSec .sectionInner{color: #fff;}
#aboutSec .txt{text-align: center; line-height: 1.5;}

/*通算成績*/
#aboutSec  h4{text-align: center; font-size: 50px; font-weight: bold; border: solid 1px #fff; width: 55%; margin: 0 auto 1em; padding: 0.4em;}
#aboutSec .dataBox{width: 75%; margin: 8em auto 0;}
#aboutSec .dataBox .subttl{font-size: 30px; font-weight: bold; text-align: center; text-decoration: underline; margin-bottom: 1em;}

/*過去の対戦成績*/
#aboutSec .dataBox .totalBox{margin-top: 5em;}
#aboutSec .dataBox .totalBox .flexBox{display: flex; justify-content: space-between;}
#aboutSec .dataBox .totalBox .flexBox li{width: 27%;}
#aboutSec .dataBox .totalBox .flexBox li.pointBox{width: 40%;}
#aboutSec .dataBox .totalBox .pointBox .whiteBox{font-size: 25px; font-weight: bold; background: #fff; color: #000; padding: 0.3em; text-align: center; margin-bottom: 0.5em;}
#aboutSec .dataBox .totalBox .flexBox li.pointBox .shimane{text-shadow: 0 0 40px #1c6faf;}
#aboutSec .dataBox .totalBox .flexBox li.pointBox .hiroshima{text-shadow: 0 0 40px #e84709;}
#aboutSec .dataBox .totalBox .flexBox li.pointBox .point{font-size: 140px;}
#aboutSec .dataBox .totalBox .flexBox li.pointBox .sho{font-size: 50px; font-weight: bold;}
#aboutSec .dataBox .totalBox .flexBox li .team{text-align: center; margin: 1em auto 0; display: block;}

/*直近2試合の対戦成績*/
#aboutSec .dataBox .recentBox{margin-top: 5em;}
#aboutSec .dataBox .recentBox ul{display: flex; justify-content: space-between; align-items: center; width: 50%; margin: 0 auto 2em;}
#aboutSec .dataBox .recentBox ul li .point{font-size: 90px;}
#aboutSec .dataBox .recentBox ul li .date_txt{display: block; text-align: center; background: #fff; color: #000; font-size: 30px; padding: 0.2em 0 0.1em; margin-bottom: 0.2em;}
#aboutSec .dataBox .recentBox ul li .venue_txt{font-size: 25px;}
#aboutSec .dataBox .recentBox ul li.hiroshima,.shimane{position: relative;}
#aboutSec .dataBox .recentBox ul li.hiroshima.Win::before{content: ""; position: absolute; background: url(/files/user/_/lp/chugokuderby25-26/img/icon_01.png) no-repeat; width: 32px; height: 27px; top: 30%; right: -3em;}
#aboutSec .dataBox .recentBox ul li.shimane.Win::before{content: ""; position: absolute; background: url(/files/user/_/lp/chugokuderby25-26/img/icon_01.png) no-repeat; width: 32px; height: 27px; top: 30%; left: -3em;}

/*両クラブの歴史*/
#aboutSec .historyBox{margin: 8em auto 0;}
#aboutSec .historyBox .innerBox{line-height: 1.5;}
#aboutSec .historyBox .innerBox .tac{margin-bottom: 0.2em;}
#aboutSec .historyBox .innerBox ul{display: flex; margin-bottom: 2em; justify-content: space-between; align-items: center;}
#aboutSec .historyBox .innerBox li.shimane{text-align: right; width: 38%;}
#aboutSec .historyBox .innerBox li.hiroshima{width: 38%;}
#aboutSec .historyBox .innerBox li.season{font-size: 25px; background: #fff; color: #000; width: 17%; text-align: center;}
#aboutSec .historyBox .innerBox .txtBox{border: solid 5px; border-image: linear-gradient(90deg, #0d79be, #e94709) 1; background: #000; text-align: center; padding: 2em; margin-top: 5em;}
#aboutSec .historyBox .innerBox .blue{color: #1c6faf; font-weight: bold;}
#aboutSec .historyBox .innerBox .orange{color: #e84709; font-weight: bold;}
#aboutSec .historyBox .innerBox li.shimane .under{background: linear-gradient(transparent 30%, #1c6faf 50%); font-weight: bold;}
#aboutSec .historyBox .innerBox li.hiroshima .under{background: linear-gradient(transparent 30%, #e84709 50%); font-weight: bold;}

/*試合日程*/
#scheduleSec{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img02.jpg"); background-size: cover;}
#scheduleSec .sectionInner{color: #fff;}
#scheduleSec .flexBox{display: flex; justify-content: space-between;}
#scheduleSec .flexBox .shimaneBox{width: 45%;}
#scheduleSec .flexBox .hiroshimaBox{width: 45%;}
#scheduleSec .flexBox .logo{width: 50%; margin: 0 auto;}
#scheduleSec .flexBox .title{font-size: 50px ;text-align: center; margin: 0.6em 0;}
#scheduleSec .flexBox .shimaneBox .title{color: #1c6faf;}
#scheduleSec .flexBox .hiroshimaBox .title{color: #e84709;}
#scheduleSec .flexBox .venue{color: #000; background: #fff; text-align: center; font-weight: bold; padding: 0.7em; margin: 1em 0;}
#scheduleSec .flexBox .btnBox{display: flex; justify-content: space-between; margin-bottom: 1em;}
#scheduleSec .flexBox .btnBox li{width: 48%;}
#scheduleSec .flexBox .btnBox li a{display: inline-block; padding: 1em 1.5em; width: 100%; border-radius: 5px;}
#scheduleSec .flexBox .shimaneBox .btnBox li a{background: #1c6faf;}
#scheduleSec .flexBox .hiroshimaBox .btnBox li a{background: #e84709;}
#scheduleSec .flexBox .btn a{background: #fff; padding: 1.3em; color: #000; font-weight: bold; text-align: center; display: block;}
#scheduleSec .flexBox .txt{line-height: 1.5;}

#scheduleSec .gmBox{margin-top: 5em; display: flex; border: solid 5px; border-image: linear-gradient(90deg, #0d79be, #e94709) 1; padding: 4em; justify-content: space-between;}
#scheduleSec .gmBox .title{font-size: 60px; text-align: center; margin-bottom: 0.4em;}
#scheduleSec .gmBox .shimanegmBox{width: 45%;}
#scheduleSec .gmBox .hiroshimagmBox{width: 45%;}
#scheduleSec .gmBox .shimanegmBox .title{color: #1c6faf;}
#scheduleSec .gmBox .hiroshimagmBox .title{color: #e84709;}
#scheduleSec .gmBox .nameBox{text-align: center; font-size: 50px; font-weight: bold; padding: 0.3em;}
#scheduleSec .gmBox .nameBox span{display: block; font-size: 40%; margin-bottom: 0.2em;}
#scheduleSec .gmBox .shimanegmBox .nameBox{background: linear-gradient(90deg, #1c6faf, #202020);}
#scheduleSec .gmBox .hiroshimagmBox .nameBox{background: linear-gradient(90deg, #e84709, #202020);}
#scheduleSec .gmBox .txt{line-height: 1.5; margin-top: 1em;}
#scheduleSec .gmBox .vs{font-size: 80px; opacity: 0.5; margin-top: 2em;}


/*内部リンク*/
#InnerLinkSec{background: #000;}
#InnerLinkSec .sectionInner{color: #fff;}
#InnerLinkSec .linkBox{display: flex; justify-content: space-between; width: 100%;}
#InnerLinkSec .linkBox li{width: 23%;}
#InnerLinkSec .linkBox li span{display: block; margin-top: 0.5em;}
#InnerLinkSec .linkBox li a{color: #fff; border: solid 3px; border-image: linear-gradient(90deg, #0d79be, #e94709) 1; padding: 1em; font-size: 25px; font-weight: bold; display: block; width: 100%;}

.sideBox{position: relative}
.sideBox::before{content: ""; background: url("/files/user/_/lp/chugokuderby25-26/img/img_side01.png"); position: absolute; top: 0; width: 5%; height: 100%; background-size: 100%; left: 0;}
.sideBox::after{content: ""; background: url("/files/user/_/lp/chugokuderby25-26/img/img_side02.png"); position: absolute; top: 0; width: 5%; height: 100%; background-size: 100%; right: 0;}
/*注目選手*/
#playerSec{background: #202020;}
#playerSec .sectionInner{color: #fff;}
#playerSec ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
#playerSec ul li{display: flex; justify-content: space-between; width: 47%; margin-bottom: 5em;}
#playerSec ul li .imgBox{width: 49%;}
#playerSec ul li .txtBox{width: 49%;}
#playerSec ul li .txtBox .name{font-weight: bold; line-height: 1.2; padding: 0.6em; margin-bottom: 0.5em;}
#playerSec ul li .txtBox .name span{display: block; font-size: 25px;}
#playerSec ul li .txtBox .txt{line-height: 1.5;}
#playerSec ul .leftBox .txtBox{text-align: right;}
#playerSec ul .rightBox .txtBox{text-align: left;}
#playerSec ul .leftBox .txtBox .name{background: linear-gradient(90deg, #202020, #1c6faf);}
#playerSec ul .rightBox .txtBox .name{background: linear-gradient(90deg, #e84709, #202020);}

.bgBox{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img03.jpg"); background-size: cover; background-attachment: fixed;}
/*マスコット*/
#mascotSec .sectionInner{color: #fff;}
#mascotSec .mascotBox{position: relative;}
#mascotSec .mascotBox .shimane{position: absolute; top: -45%; left: -3%;}
#mascotSec .mascotBox .hiroshima{position: absolute; top: -45%; right: -3%;}
#mascotSec ul{font-weight: bold; text-align: center; line-height: 1.5;}
#mascotSec ul li{display: flex; justify-content: center; align-items: center; margin-bottom: 1.5em;}
#mascotSec ul li .ttl{border: solid 3px; border-image: linear-gradient(90deg, #0d79be, #e94709) 1; width: 17%; text-align: center; padding: 0.4em;}
#mascotSec ul li .name{font-size: 25px;}
#mascotSec ul li .name.left{color: #1c6faf;}
#mascotSec ul li .name.right{color: #e84709;}
#mascotSec ul li .left{width: 23%;}
#mascotSec ul li .right{width: 23%;}
#mascotSec ul li.comment{justify-content: space-between; align-items: flex-start;}
#mascotSec ul li.comment .left{width: 39%; text-align: left;}
#mascotSec ul li.comment .right{width: 39%; text-align: left;}

/*チア*/
#cheerSec .sectionInner{color: #fff;}
#cheerSec .cheerBox{display: flex; justify-content: space-between;}
#cheerSec .cheerBox div{width: 47%;}
#cheerSec .cheerBox div .logo{width: 65%; margin: 2em auto;}
#cheerSec .cheerBox div .txt{line-height: 1.5;}

/*イベント*/
#eventSec{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img02.jpg"); background-size: cover;}
#eventSec .sectionInner{color: #fff;}

/*イベントタブ実装*/
#eventSec .tab_box .btn_area {display: flex;justify-content: space-between; align-items: center; margin-bottom: 4em;}
#eventSec .tab_box .tab_btn{background: #202020; width: 23%; border-radius: 5px; padding: 0.5em 3.5em; border: solid 3px #1c6faf; cursor: pointer;}
#eventSec .tab_box .tab_btn.active {background: #1c6faf;}
#eventSec .tab_box .tab_panel {display:none;}
#eventSec .tab_box .tab_panel.active {display:block;}
#eventSec .btn_area .tab_btn.hiroshima.active{background: #e84709;}
#eventSec .btn_area .tab_btn.hiroshima{border: solid 3px #e84709;}
#eventSec .panel_area .tab_panel .imgBox{width: 35%; margin: 0 auto;}


/*グッズ*/
#goodsSec{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img04.jpg"); background-size: cover;}
#goodsSec .sectionInner{color: #fff;}
#goodsSec .imgBox{width: 35%; margin: 0 auto;}

/*方言*/
#dialectSec{background: url("/files/user/_/lp/chugokuderby25-26/img/bg_img05.jpg"); background-size: cover; background-attachment: fixed;}
#dialectSec .sectionInner{color: #fff;}
#dialectSec h3{width: 80%; margin: 0 auto 0.5em;}
#dialectSec .dialectBox{text-align: center; font-weight: bold;}
#dialectSec .dialectBox .title{font-size: 30px;}
#dialectSec .dialectBox .flexBox{display: flex; justify-content: space-between;}
#dialectSec .dialectBox .flexBox p{width: 46%; padding: 0.6em; margin: 1em 0 3em;}
#dialectSec .dialectBox .flexBox p.left{background: linear-gradient(90deg, #202020, #1c6faf);}
#dialectSec .dialectBox .flexBox p.right{background: linear-gradient(90deg, #e84709, #202020);}



/* footer */
#pageFooter{background:#202020; margin-bottom: -9em; position: relative; z-index: 999; text-align: center; color: #fff;}
#pageFooter p{line-height: 1.5;}
#pageFooter .footerInner{width: 95%; max-width: 1200px; margin: 0 auto; padding: 80px 0;}
#pageFooter .flexBox{width: 50%; display: flex; justify-content: space-between; margin: 0 auto;}
#pageFooter .flexBox div{width: 43%;}
#pageFooter .flexBox .logo{width: 80%; margin: 0 auto 3em;}
#pageFooter .flexBox .snslinkBox{display: flex; justify-content: space-between;}
#pageFooter .flexBox .snslinkBox li{width: 15%;}
#pageFooter .flexBox .linkBox{margin: 1em 0 5em; width: 100%;}
#pageFooter .flexBox .linkBox a{display: block; width: 100%; padding: 1em; color: #fff; font-weight: bold; margin-bottom: 1em;}
#pageFooter .flexBox .shimaneBox .linkBox a{border: solid 3px #1c6faf; position: relative;}
#pageFooter .flexBox .hiroshimaBox .linkBox a{border: solid 3px #e84709; position: relative;}
#pageFooter .flexBox .linkBox a::before{content: ""; position: absolute; right: 1em; top: 0; width: 0.8rem; height: 100%;}
#pageFooter .flexBox .shimaneBox .linkBox a::before{background: url("/files/user/_/lp/chugokuderby25-26/img/img_arrow01.png") no-repeat center; background-size: 100% auto;}
#pageFooter .flexBox .hiroshimaBox .linkBox a::before{background: url("/files/user/_/lp/chugokuderby25-26/img/img_arrow02.png") no-repeat center; background-size: 100% auto;}


.scroll_all{position: sticky; right: 3em; bottom: 2em;z-index: 100; text-align: right; margin: 0 0 0 auto;}
.scroll_all.top{width: 20%; max-width: 140px;}
.scroll_all img{margin: 0; padding: 0;}

.ticket{width:97%;padding: 0; margin: 0 auto;}
.ticket .top{width: 10%; max-width: 165px;}
.ticket a{width:20%; max-width: 290px; display: inline-block;}
.ticket img{margin-bottom: 3px; padding-left: 2%; padding-right: 2%;}

@media screen and (max-width: 1200px) and (min-width: 901px){
	#scheduleBox .sectionInner{padding:3em 1em 57em; }
	#scheduleBox .sectionInner .leftBox{width: 45%;}
	#scheduleBox .sectionInner .rightBox{width: 48%;margin-top:7em;}
	#scheduleBox .sectionInner .leftBox::before{transform:rotate(5deg);height:86.5%;right: -31px;bottom: -1px;}
	
	#eventBox .modal-window{width: 40%;}
	#eventBox .btnNext{right: 4%;}
	#eventBox .btnPrev{left: 4%;}
	
	#dataSec .totalBox li.opp .point{margin-left: 15px;}
	#dataSec .totalBox li.hdf .sho{margin-right:15px;}
	
	#midokoroSec .movie iframe{width: 100%;height: 330px;}
	
	#goodsBox .goods_slide{margin: 0 0.5em 1em;}
	#goodsBox .btnNext{right: 4%;}
	#goodsBox .btnPrev{left: 4%;}
	
	#dreamSec .sectionInner{padding: 49% 1em 2%;}
	
	#accessSec .sectionInner{padding:80px 0em; }
	#accessSec .accMap2 .accMapIn2 iframe{width: 100%;}
	
	#linkBox dd img{width: 9.1%;}
}


@media screen and (max-width: 1600px) and (min-width: 901px){
    #eventBox .mascot{display: none;}
    
}