@charset "UTF-8";

img{ width:100%;}
html { font-size:62.5%;}
body { font-size:1.4rem; line-height:1.5; background:linear-gradient(to bottom, rgba(164,164,35,0.8) 0%, rgba(175,173,70,0.8) 35%, rgba(121,123,3,0.8) 65%, rgba(38,32,0,0.8) 100%), url(/special/episodecp2019/_img/bodyBg.jpg);}

/*========================[ common  ]========================*/
/*-----  Font 設定 -------*/
h1{ font-size: 36px; font-size: calc(2.4rem + ((1vw - 0.64rem) * 2));  /* 24px~36pxで可変*/ line-height: 1.3; color:#300;}
h2{ font-size: 24px; font-size: calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* 22px~24pxで可変*/ font-weight:bold; line-height: 1.3; color:#fff;}
h3{ font-size: 20px; font-size: calc(1.1rem + ((1vw - 0.64rem) * 1.2));/* 18px~20pxで可変*/ font-weight:bold; line-height: 1.3; color:#300;}
/* calc( 基準サイズ ((1vm -  [ビューポートの幅の最小値/100] ) * [100 * フォントサイズの差 / ビューポートの幅の差] ) ) */

@media (min-width: 75em) {/* 1200px以上でフォントサイズを固定*/
	h1{ font-size: 36px;}
	h2{ font-size: 24px;}
	h3{ font-size: 20px;}
}
h3{ position: relative; display:block; padding: 0 0 0 35px; width:90%; margin:1rem auto; border-bottom: solid 3px #300;}
h3:after{}
h3:before{ content: ''; position: absolute; top: 53%; left:-3px; display: inline-block; width: 40px; height: 2px; background-color:#300; -webkit-transform: rotate(-40deg); transform: rotate(-40deg);}

h2{position: relative; display:block; text-align:center;}
h2:before{ content: ""; display: block; padding-top:11.94%;}
h2 img{position: absolute; top:0; left:0; z-index:100;}
h2 p{ width:100%; position: absolute; top:0; left:0; z-index:150; text-align:center; padding-top:2%;}
.indictText{display:none;}

ul.dotsterList{ width:90%; margin:0 auto; margin-bottom:3%; background:#e9ddc2; border:dashed 2px #9e0000; border-radius:9px; padding:0.5em 0.5em 0.5em 2em; }
ul.dotsterList li{ position:relative; line-height:1.5; padding:0; }
ul.dotsterList li:after{ display:block; content:'※'; position:absolute; top:0; left:-1em; width:8px; height:3px; }
.f-red{ color:#f00;}

/*========================[ seciton  ]========================*/
header{}
/*
#btn{ width:100%; margin:0 auto; background:linear-gradient(to bottom, rgba(175,173,70,0.8) 0%, rgba(121,123,3,0.8) 100%);}
#innerRight{ width:100%; max-width:1000px; margin:0 auto; display: flex; justify-content:flex-end;}
#inner a{flex-direction: row; }
*/
#headers{ width:100%; max-width:1400px; height:auto; max-height:795px; margin:0 auto; position:relative; }
#headers:before{ content: ""; display: block; padding-top:56.78%;}
#headers h1{display:none;}
#headers #mainImg{ width:100%; max-width:1320px; height:100%; margin:0 2.85%; position:absolute; top:0; left:0; z-index:100; }
#headers #mainImgSp{ display:none;}
#headers #topROlogo{ max-width:303px; margin:0.5% 65.21% 0 13.14%; position:absolute; top:0; left:0; z-index:100;}
#headers #topWebMoneyLogo{ max-width:70px; margin:9.69% 73.71% 0 21.28% ; position:absolute; top:0; left:0; z-index:100; }
#headers #topDeco{ max-width:1400px; margin-top:42%; position:absolute; top:0; left:0;  z-index:100;}
#headers #coverBox{width:71.42%; max-width:1000px; margin:52% 14.28% 0; padding-top:5%; position:absolute; top:0; left:0; z-index:50; background:#e0cfa8; }

/*---2019.12.10 --------------*/
#headers #topSubTitleResult{ max-width:700px; margin:5% 9.35%  0 40.64% ; position:absolute; top:0; left:0; z-index:100; }
#headers #topIlast{ max-width:331px; margin:18% 18.28% 0 58.07% ; position:absolute; top:0; left:0;  z-index:150;}
#headers #topMsg{ max-width:942px; margin:44.20% 15.78%  0 16.92% ; position:absolute; top:0; left:0; z-index:150; }

/*---2020.06.15 --------------*/
#headers #topEntry{ max-width:300px; margin:1% 27.14% 0 50%; position:absolute; top:0; left:0; z-index:100;}
#headers #topLogin{ max-width:172px; margin:1% 14.85% 0 72.85%; position:absolute; top:0; left:0; z-index:100;}
#innerCent{ width:100%; margin:0 auto 0; padding-bottom:3rem; display: flex; justify-content:center;}
.login{ max-width:267px; padding:1% 0 0 2%;}
.ent{ max-width:464px; padding:1% 0 0 0;}

#headers #topEntry a:hover,
#headers #topLogin a:hover,
#innerCent a:hover{opacity:0.7;}

/*#headers #topMsg2{ max-width:500px; margin:44.20% 15.78%  0 0 ; position:absolute; top:0; left:0; z-index:150; }*/

#main{ max-width:1400px; margin:0 auto; padding:0 14.28%; }
#main #content{width:100%; max-width:1000px; margin:0; padding:0; background:#e0cfa8; }

@media screen and (min-width: 87.5rem) {/* 1400px以上*/
	#main{ margin:0 auto; padding:0 14.28%; }
	#main #content{ margin:0 auto; padding:0; }
}

footer{ background: linear-gradient(rgba(81,17,18,1) , rgba(108,32,33,1) );}
footer .o-contents__inner{max-width:1000px; margin:0 auto; }

/*  about  */
#about{width:100%; max-width:1000px; margin:0 auto; position:relative; }
#about:before{ content: ""; display: block; padding-top:1%; }
#about #aboutText{ max-width:1000px; margin:0; position:absolute; top:0; left:0; z-index:150; }
#about #aboutRed{ width:90%; margin:0 auto; }
#about #webmoneyCP{ max-width:500px; margin:1% 25% 2%;}
#about #infoIllust{ max-width:939px; margin:0 6.1%}
#about #aboutBoder{ max-width:1000px; margin:0; }

#awardArea{ margin-bottom:3%; }
#awardArea #roEpisodeTitle{ max-width:832px; margin:0% 14.8% 1% 2%;}
#awardArea #etcEpisodeTitle{ max-width:573px; margin:0% 40.7% 1% 2%; }
#awardArea .roEpisode{ max-width:940px; margin:5% 6% 1%; }

.episodeBox{ max-width:940px; display: flex; align-items: top; margin:0 auto;}
.episodeBox .half{ width:48%; margin:0 auto;}

.dotsterAward{ width:90%; margin:0 auto; margin-bottom:3%; background:#efeecd; border:dashed 2px #565900; border-radius:9px; padding:0.5em 0.5em 0.5em 2em; }
.award{color:#565900; border-bottom: solid 3px #565900;}
.award:after{ background-color:#565900;}

.dotsterAwardEtc{ width:90%; margin:0 auto; margin-bottom:3%; background:#e8f2f8; border:dashed 2px #445c6d; border-radius:9px; padding:0.5em 0.5em 0.5em 2em; }
.awardEtc{ color:#445c6d; border-bottom: solid 3px #445c6d;}
.awardEtc:after{ background-color:#445c6d;}

.dotsterRo{ width:90%; margin:0 auto; margin-bottom:3%; background:#e9ddc2; border:dashed 2px #9e0000; border-radius:9px; padding:0.5em 0.5em 0.5em 2em; }

hr{ border-top:solid 2px #565900; width:95%}



.fukidashi{max-width:116px;}
.o-footer__about{color:#fff;}
.o-contents__inner a picture img{max-width:498px;}
.o-footer__entry{ margin:2rem;}
.copy{ padding-bottom:2rem; text-align:center; color:#fff; }
.pickupTitle{display:none;}
#pickup h2:before{display:none;}

/*--------------------------*/
@media screen and (max-width: 51rem) {/* 736px以下*/
	ul.dotsterList{ width:85%;}
	h2{ font-size: 20px;}
	h3{ font-size: 18px;}
	#about{position:static; }
	#about:before{ content: ""; display: auto; padding-top:0; }
	#about #aboutBoder{ width:100%; margin:0 auto; position:static;}
	#main{width:100%; margin:0 auto; padding:0;}
	#main #content{max-width:100%; margin:0 auto; padding:0;}
	footer .pickupTitle{width:100%; height:1rem; display:block;}
	footer #pickup{ width:auto;}
	#pickup h2{display:none;}
	#pickup li{ display:block;}
	#pickup ul{ width:100%;}
}

@media screen and (max-width: 26rem) {/* 416px以下*/
	h2{position:static ; display:auto; text-align:center; background:#5e2a05;}
	h2:before{ display: auto; padding-top:0;}
	h2 img{ display:none;}
	h2 p{ width:100%; position:static; text-align:center; padding-top:2%;}
}