@charset "utf-8";

/* 基礎レイアウト
========================================================= */

img { width: 100%; height: auto; vertical-align: top; }

#contentsheader { overflow: hidden; display: block; width: 100%; height: 360px; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; }
#contentsheader p.icon { width: 55px; height: 55px; background: url(/images/h1_special2_icon.svg) no-repeat left top; margin: 120px auto 25px; }
#contentsheader h1 { color: #ffffff; font-size: 48px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 1199px) {
	#contentsheader { height: 320px; }
	#contentsheader p.icon { margin-top: 100px; }
}

@media screen and (max-width: 992px) {
	#contentsheader { height: 280px; }
	#contentsheader p.icon { margin-top: 80px; }
}

@media screen and (max-width: 768px) {
	#contentsheader { height: 240px; }
	#contentsheader p.icon { width: 44px; height: 44px; margin-top: 60px; margin-bottom: 22px; }
	#contentsheader h1 { font-size: 36px; }
}

@media screen and (max-width: 480px) {
	#contentsheader { height: 160px; }
	#contentsheader p.icon { width: 33px; height: 33px; margin-top: 40px; margin-bottom: 16px; }
	#contentsheader h1 { font-size: 24px; }
}



/* 汎用パーツ
========================================================= */

/* pageNav */

.pageNav { display: table; width: 100%; background-color: #ffffff; font-size: 36px; line-height: 46px; text-align: center; }
.pageNav div { display: table-cell; width: 50%; box-sizing: border-box; border: solid 4px #00b4ed; color: #00b4ed; }
.pageNav a { display: table-cell; width: 50%; box-sizing: border-box; border-style: solid; border-color: #c3c3c3; color: #c3c3c3; vertical-align: middle; text-decoration: none; }
.navType2,.navType4 { margin-top: 120px; }
.navType1 a,.navType2 a { border-width: 4px 4px 4px 0; }
.navType3 a,.navType4 a { border-width: 4px 0 4px 4px; }
.navType1 div,.navType3 div,.navType1 a,.navType3 a { padding-top: 3.72727272727273%; padding-bottom: 3.18181818181818%; }
.navType2 div,.navType4 div,.navType2 a,.navType4 a { padding-top: 9.18181818181818%; padding-bottom: 8.63636363636364%; }

@media screen and (max-width: 1100px) {
	.pageNav { font-size: 26px; line-height: 36px; }
}

@media screen and (min-width: 769px) {
	.pageNav a:hover { background-color: #00b4ed; border-color: #00b4ed; color: #000000; }
}

@media screen and (max-width: 768px) {
	.pageNav { font-size: 20px; line-height: 30px; }
	.pageNav div,.pageNav a { padding-top: 20px; padding-bottom: 20px; }
	.navType2,.navType4 { margin-top: 50px; }
}

@media screen and (max-width: 767px) {
	.pageNav { display: block; font-size: 18px; line-height: 28px; }
	.pageNav div { display: none; }
	.pageNav a { position: relative; display: block; width: 100%; border: solid 2px #00b4ed; color: #00b4ed; font-weight: bold; padding-top: 15px; padding-bottom: 15px; }
	.navType1 a:before,.navType2 a:before { position: absolute; top: 0; right: 30px; bottom: 0; width: 30px; height: 30px; border-top: 2px solid #00b4ed; border-right: 2px solid #00b4ed; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: auto; margin-bottom: auto; content: ""; }
	.navType3 a:before,.navType4 a:before { position: absolute; top: 0; left: 30px; bottom: 0; width: 30px; height: 30px; border-top: 2px solid #00b4ed; border-right: 2px solid #00b4ed; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-top: auto; margin-bottom: auto; content: ""; }
}

@media screen and (max-width: 374px) {
	.pageNav.navType1 a,.pageNav.navType2 a { padding-right: 15px; }
	.pageNav.navType3 a,.pageNav.navType4 a { padding-left: 15px; }
	.navType1 a:before,.navType2 a:before { right: 20px; width: 25px; height: 25px; }
	.navType3 a:before,.navType4 a:before { left: 20px; width: 25px; height: 25px; }
}



/* linkBtn */

.linkBtn1,
.linkBtn2 { margin-top: 15px; }
.statusIcon + .linkBtn1 { margin-top: 20px; }
.linkBtn1 a,.linkBtn2 a { display: inline-block; box-sizing: border-box; border-radius: 4px; font-size: 15px; line-height: 24px; text-align: center; text-decoration: none; padding: 6px 36px 5px; }
.linkBtn1 a { background-color: #ffffff; }
.linkBtn2 a { background-color: #2e2e2e; color: #ffffff; }
.linkBtn1 a:hover,.linkBtn2 a:hover { background-color: #fe8781; }

@media screen and (max-width: 860px) { .linkBtn1 a,.linkBtn2 a { display: block; padding-right: 5px; padding-left: 5px; } }
@media screen and (max-width: 768px) { .linkBtn1 a,.linkBtn2 a { padding-top: 5px; } }
@media screen and (max-width: 767px) { .linkBtn1 a,.linkBtn2 a { width: 80%; margin-right: auto; margin-left: auto; } }



/* switchingImg */

.switchingImg1 { display: none; }

@media screen and (max-width: 767px) {
	.switchingImg1 { display: block; }
	.imgCaption + .switchingImg1 { margin-top: 3.5%; }
	.switchingImg2 { display: none; }
}



/* レイアウトスタイル
========================================================= */

#sportsMain { background: url(/images/special/04/main_bg.gif) no-repeat center top; }
#sportsMain .mainInnner { width: 1100px; margin-right: auto; margin-left: auto; }
#sportsMain .mainInnner div { margin-bottom: 18px; }
#sportsMain .mainInnner p { font-size: 17px; line-height: 30px; text-align: center; margin-bottom: 8px; }

#snsArea { margin-bottom: 40px; }

#sportsBar { background: url(/images/special/04/bar_bg.gif) repeat center top; background-size: 12px 50px; }
#sportsBar div { width: 1100px; margin-right: auto; margin-left: auto; }

#sportsContnt { background: url(/images/special/04/background.gif) repeat center -15px; padding-top: 80px; padding-bottom: 120px; }
#sportsContnt .contentInnner { width: 1100px; margin-right: auto; margin-left: auto; }

.pageLead { font-size: 17px; line-height: 30px; color: #1a76cc; text-align: center; margin-top: 55px; margin-bottom: 55px; }

@media screen and (max-width: 1199px) {
	#sportsMain {  background: none; }
	#sportsMain .mainInnner { width: 100%; }
	#sportsMain .mainInnner p { width: 95%; margin-right: auto; margin-left: auto; }
	
	#sportsBar { background: none; }
	#sportsBar div { width: 100%; height: 50px; background: url(/images/special/04/bar_icon.gif) no-repeat center top; background-size: cover; }
	#sportsBar div img { display: none; }
	
	#sportsContnt .contentInnner { width: 95%; }
}

@media screen and (max-width: 768px) {
	#sportsContnt { background-size: 800px; padding-top: 40px; padding-bottom: 60px; }
}

@media screen and (max-width: 767px) {
	#sportsMain .mainInnner p { font-size: 15px; line-height: 26px; text-align: left; }
	#sportsMain .mainInnner p br { display: none; }
	
	#sportsBar div { height: 25px; }
	
	.pageLead { font-size: 16px; line-height: 26px; text-align: left; margin-top: 35px; margin-bottom: 35px; }
	.pageLead br { display: none; }
}



.listBlock .blockArea { overflow: hidden; }
.listBlock .blockArea + .blockArea { margin-top: 9.09090909090909%; }

.listBlock .blockArea .areaData { overflow: hidden; width: 91.81818181818182%; box-sizing: border-box; padding: 3.63636363636364% 3.63636363636364% 24.18181818181818%; }
.listBlock .blockArea:nth-child(even) .areaData { margin-left: 8.18181818181818%; }
.listBlock .blockArea.areaColor1 .areaData { background-color: #008ccf; }
.listBlock .blockArea.areaColor2 .areaData { background-color: #44af35; }
.listBlock .blockArea.areaColor3 .areaData { background-color: #e5002d; }
.listBlock .blockArea.areaColor4 .areaData { background-color: #7c509d; }
.listBlock .blockArea.areaColor5 .areaData { background-color: #ef8200; }
.listBlock .blockArea .areaData .dataInfo { float: left; width: 63.44086021505376%; box-sizing: border-box; border-right: solid 1px #ffffff; padding-right: 4.3010752688172%; }
.listBlock .blockArea .areaData .dataInfo .infoName { font-weight: bold; padding-left: 70px; margin-bottom: 28px; }
.listBlock .blockArea .areaData .dataInfo .infoName.infoMap1 { background: url(/images/special/04/map_icon1.png) no-repeat left top; background-size: 60px; }
.listBlock .blockArea .areaData .dataInfo .infoName.infoMap2 { background: url(/images/special/04/map_icon2.png) no-repeat left top; background-size: 60px; }
.listBlock .blockArea .areaData .dataInfo .infoName.infoMap3 { background: url(/images/special/04/map_icon3.png) no-repeat left top; background-size: 60px; }
.listBlock .blockArea .areaData .dataInfo .infoName.infoMap4 { background: url(/images/special/04/map_icon4.png) no-repeat left top; background-size: 60px; }
.listBlock .blockArea .areaData .dataInfo .infoName.infoMap5 { background: url(/images/special/04/map_icon5.png) no-repeat left top; background-size: 60px; }
.listBlock .blockArea .areaData .dataInfo .infoName dt { font-size: 14px; line-height: 16px; color: #ffffff; margin-bottom: 9px; }
.listBlock .blockArea .areaData .dataInfo .infoName dd { font-size: 30px; line-height: 40px; color: #fffc23; }
.listBlock .blockArea .areaData .dataInfo .infoTxt { color: #ffffff; margin-bottom: -8px; }
.listBlock .blockArea .areaData .dataInfo .infoTxt dt { font-size: 18px; line-height: 24px; font-weight: bold; margin-bottom: 9px; }
.listBlock .blockArea .areaData .dataInfo .infoTxt dd { font-size: 15px; line-height: 28px; }
.listBlock .blockArea .areaData .dataStatus { float: left; width: 36.55913978494624%; box-sizing: border-box; border-left: solid 1px #ffffff; padding-left: 3.2258064516129%; margin-left: -1px; }
.listBlock .blockArea .areaData .dataStatus .statusIcon { overflow: hidden; }
.listBlock .blockArea .areaData .dataStatus .statusIcon li { float: left; width: 35px; }
.listBlock .blockArea .areaData .dataStatus .statusIcon li + li { margin-left: 5px; }
.listBlock .blockArea .areaData .dataStatus .statusAdd { font-size: 13px; line-height: 22px; color: #ffffff; margin-top: 17px; }
.listBlock .blockArea .areaData .dataStatus .statusAdd + .statusAdd { margin-top: 9px; }
.listBlock .blockArea .areaData .dataStatus .statusAdd a { color: #ffffff; }
.listBlock .blockArea .areaData .dataStatus .statusAdd table tr th { text-align: left; white-space: nowrap; }
.listBlock .blockArea .areaPhoto1 { width: 91.81818181818182%; margin-top: -19.63636363636364%; }
.listBlock .blockArea .areaPhoto2 { width: 59.09090909090909%; margin-top: -19.63636363636364%; }
.listBlock .blockArea:nth-child(odd) .areaPhoto1 { margin-left: 8.18181818181818%; }
.listBlock .blockArea:nth-child(odd) .areaPhoto2 { margin-left: 40.90909090909091%; }

.listBlock .blockArea .imgFrame .frameBlock { overflow: hidden; }
.listBlock .blockArea.areaColor1 .imgFrame .frameBlock { background-color: #008ccf; }
.listBlock .blockArea.areaColor2 .imgFrame .frameBlock { background-color: #44af35; }
.listBlock .blockArea.areaColor3 .imgFrame .frameBlock { background-color: #e5002d; }
.listBlock .blockArea.areaColor4 .imgFrame .frameBlock { background-color: #7c509d; }
.listBlock .blockArea.areaColor5 .imgFrame .frameBlock { background-color: #ef8200; }
.listBlock .blockArea .imgFrame .frameBlock dl dt { font-size: 16px; line-height: 26px; color: #fffc23; font-weight: bold; margin-top: -4px; margin-bottom: 8px; }
.listBlock .blockArea .imgFrame .frameBlock dl dd { line-height: 26px; color: #ffffff; }

.listBlock .blockArea .areaImg1 { position: relative; overflow: hidden; width: 100%; margin-top: -4.54545454545455%; }
.listBlock .blockArea .areaImg1 .imgFrame { background-color: #ffffff; box-sizing: border-box; padding: 3.63636363636364%; }
.listBlock .blockArea:nth-child(even) .areaImg1 .imgFrame { float: right; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 { overflow: hidden; width: 95.45454545454545%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList1 { float: left; width: 37.11340206185567%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList2 { float: left; width: 37.11340206185567%; margin-left: 1.03092783505155%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList3 { float: right; width: 20.61855670103093%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock { padding: 2.06185567010309%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList1 { float: left; width: 26.88172043010753%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList2 { float: left; width: 34.40860215053763%; margin-left: 3.2258064516129%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList3 { float: left; width: 34.40860215053763%; margin-left: 1.03092783505155%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern2 { width: 40%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 { overflow: hidden; width: 73.63636363636364%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 div { float: left; width: 49.31506849315068%; }
.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 div + div { margin-left: 1.36986301369863%; }

.listBlock .blockArea .areaImg2 { position: relative; overflow: hidden; margin-top: -66.18181818181818%; }
.listBlock .blockArea .areaImg2 .imgFrame { width: 40%; background-color: #ffffff; box-sizing: border-box; padding: 3.63636363636364%; }
.listBlock .blockArea:nth-child(even) .areaImg2 .imgFrame { float: right; margin-right: 8.18181818181818%; }
.listBlock .blockArea .areaImg2 .imgFrame .frameBlock { padding: 5.55555555555556%; }
.listBlock .blockArea .areaImg2 .imgFrame .frameBlock dl { margin-bottom: 3.75%; }
.listBlock .blockArea .areaImg2 .imgFrame .frameBlock div + div { margin-top: 3.125%; }
.listBlock .blockArea .areaImg2 .imgFrame .frameBlock + div,
.listBlock .blockArea .areaImg2 .imgFrame div + .frameBlock { margin-top: 5.55555555555556%; }

.listBlock .blockArea .frameColumn { overflow: hidden; width: 83.63636363636364%; background-color: #ffffff; box-sizing: border-box; border: solid 8px #666666; padding: 2.90909090909091%; margin-top: 9.09090909090909%; margin-right: auto; margin-left: auto; }
.listBlock .blockArea .frameColumn .columnTxt { float: left; width: 46.42857142857143%; }
.listBlock .blockArea .frameColumn .columnTxt dl { margin-bottom: 11px; }
.listBlock .blockArea .frameColumn .columnTxt dl dt { background-color: #f0ee28; padding: 5px 10px 1px; margin-bottom: 10px; }
.listBlock .blockArea .frameColumn .columnTxt dl dd { font-size: 24px; line-height: 34px; color: #6fba2c; font-weight: bold; }
.listBlock .blockArea .frameColumn .columnTxt p { font-size: 15px; line-height: 28px; margin-bottom: 15px; }
.listBlock .blockArea .frameColumn .columnTxt div { font-size: 13px; line-height: 22px; }
.listBlock .blockArea .frameColumn .columnImg { float: right; width: 46.42857142857143%; }

.listBlock .blockArea .imgCaption { font-size: 12px; line-height: 22px; margin-top: 6px; margin-bottom: -6px; }
.listBlock .blockArea .frameBlock .imgCaption { color: #ffffff; }

@media screen and (max-width: 768px) {
	.listBlock .blockArea .areaData .dataStatus .statusAdd { line-height: 20px; }
	
	.listBlock .blockArea .imgFrame .frameBlock dl dt { line-height: 22px; margin-top: -2px; margin-bottom: 4px; }
	.listBlock .blockArea .imgFrame .frameBlock dl dd { line-height: 22px; }
	
	.listBlock .blockArea .frameColumn { width: 100%; }
}

@media screen and (max-width: 767px) {
	.listBlock .blockArea .areaData { width: 100%; padding: 5%; }
	.listBlock .blockArea:nth-child(even) .areaData { margin-left: 0; }
	.listBlock .blockArea .areaData .dataInfo { float: none; width: 100%; border-right: none; padding-right: 0; }
	.listBlock .blockArea .areaData .dataInfo .infoName { padding-left: 55px; margin-bottom: 12px; }
	.listBlock .blockArea .areaData .dataInfo .infoName.infoMap1,
	.listBlock .blockArea .areaData .dataInfo .infoName.infoMap2,
	.listBlock .blockArea .areaData .dataInfo .infoName.infoMap3,
	.listBlock .blockArea .areaData .dataInfo .infoName.infoMap4,
	.listBlock .blockArea .areaData .dataInfo .infoName.infoMap5 { background-size: 45px; }
	.listBlock .blockArea .areaData .dataInfo .infoName dt { font-size: 13px; margin-bottom: 8px; }
	.listBlock .blockArea .areaData .dataInfo .infoName dd { font-size: 20px; line-height: 25px; }
	.listBlock .blockArea .areaData .dataInfo .infoTxt { margin-bottom: 15px; }
	.listBlock .blockArea .areaData .dataInfo .infoTxt dt { font-size: 16px; line-height: 22px; margin-bottom: 8px; }
	.listBlock .blockArea .areaData .dataInfo .infoTxt dd { font-size: 14px; line-height: 20px; }
	.listBlock .blockArea .areaData .dataStatus { float: none; width: 100%; border-left: none; padding-left: 0; margin-left: 0; }
	.listBlock .blockArea .areaData .dataStatus .statusIcon li { width: 30px; }
	
	.listBlock .blockArea .areaPhoto1,.listBlock .blockArea .areaPhoto2 { width: 100%; box-sizing: border-box; padding-right: 3.5%; padding-bottom: 3.5%; padding-left: 3.5%; margin-top: 0; }
	.listBlock .blockArea.areaColor1 .areaPhoto1,.listBlock .blockArea.areaColor1 .areaPhoto2 { background-color: #008ccf; }
	.listBlock .blockArea.areaColor2 .areaPhoto1,.listBlock .blockArea.areaColor2 .areaPhoto2 { background-color: #44af35; }
	.listBlock .blockArea.areaColor3 .areaPhoto1,.listBlock .blockArea.areaColor3 .areaPhoto2 { background-color: #e5002d; }
	.listBlock .blockArea.areaColor4 .areaPhoto1,.listBlock .blockArea.areaColor4 .areaPhoto2 { background-color: #7c509d; }
	.listBlock .blockArea.areaColor5 .areaPhoto1,.listBlock .blockArea.areaColor5 .areaPhoto2 { background-color: #ef8200; }
	.listBlock .blockArea .areaPhoto2 .imgCaption { color: #ffffff; }
	.listBlock .blockArea:nth-child(odd) .areaPhoto1,.listBlock .blockArea:nth-child(odd) .areaPhoto2 { margin-left: 0; }
	
	.listBlock .blockArea .imgFrame .frameBlock dl dt { font-size: 16px; line-height: 26px; color: #fffc23; font-weight: bold; margin-top: -4px; margin-bottom: 8px; }
	.listBlock .blockArea .imgFrame .frameBlock dl dd { line-height: 26px; color: #ffffff; }
	
	.listBlock .blockArea .areaImg1 { margin-top: 0; }
	.listBlock .blockArea .areaImg1 .imgFrame { padding: 3.5%; }
	.listBlock .blockArea:nth-child(even) .areaImg1 .imgFrame { float: none; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 { width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList1 { float: none; width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList2 { float: none; width: 100%; margin-top: 3.5%; margin-left: 0; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameList3 { float: none; width: 100%; margin-top: 3.5%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock { padding: 4%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList1 { float: none; width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList2 { float: none; width: 100%; margin-left: 0; margin-top: 3.5%;}
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern1 .frameBlock .blockList3 { float: none; width: 100%; margin-left: 0; margin-top: 3.5%;}
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern2 { width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 { width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 div { float: none; width: 100%; }
	.listBlock .blockArea .areaImg1 .imgFrame.imgPattern3 div + div { margin-left: 0; margin-top: 3.5%; }
	
	.listBlock .blockArea .areaImg2 { margin-top: 0; }
	.listBlock .blockArea .areaImg2 .imgFrame { width: 100%; padding: 3.5%; }
	.listBlock .blockArea:nth-child(even) .areaImg2 .imgFrame { float: none; margin-right: 0; }
	.listBlock .blockArea .areaImg2 .imgFrame .frameBlock { padding: 4%; }
	.listBlock .blockArea .areaImg2 .imgFrame .frameBlock + div,
	.listBlock .blockArea .areaImg2 .imgFrame div + .frameBlock { margin-top: 3.5%; }
	.listBlock .blockArea .areaImg2 .imgFrame .switchingImg2 + .frameBlock { margin-top: 0; }
	
	.listBlock .blockArea .frameColumn { border: solid 4px #666666; padding: 2.90909090909091%; margin-top: 3%; }
	.listBlock .blockArea .frameColumn .columnTxt { float: none; width: 100%; }
	.listBlock .blockArea .frameColumn .columnTxt dl { margin-bottom: 5px; }
	.listBlock .blockArea .frameColumn .columnTxt dl dt { padding: 3px 8px 2px; }
	.listBlock .blockArea .frameColumn .columnTxt dl dd { font-size: 20px; line-height: 30px; }
	.listBlock .blockArea .frameColumn .columnTxt p { font-size: 14px; line-height: 22px; margin-bottom: 12px; }
	.listBlock .blockArea .frameColumn .columnImg { float: none; width: 100%; margin-top: 5%; }
	
	.listBlock .blockArea .imgCaption { margin-bottom: 0; }
}

@media screen and (max-width: 374px) {
	.listBlock .blockArea .areaPhoto1,
	.listBlock .blockArea .areaPhoto2 { padding-top: 1%; }
}



/* plusIssue
========================================================= */

.plusIssue { padding: 0 calc( 15 / 320 * 100% ); margin: 50px 0 0 0; }
.plusIssue p { text-align: center; margin: 0 auto; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.plusIssue ul { display: table; font-size: 13px; line-height: 20px; margin: 15px auto 0; }
.plusIssue li { display: table-cell; vertical-align: top; }

@media screen and (max-width: 767px) {
	.plusIssue { margin: 30px 0 0 0; }
}