@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{}
#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 #topRead{ max-width:570px; margin:2% 11.64% 0 47.64%; position:absolute; top:0; left:0; z-index:100; }
#headers #topSubTitle{ max-width:700px; margin:20.99% 9.35%  0 40.64% ; position:absolute; top:0; left:0; z-index:100; }
#headers #topTitleandDay{ max-width:942px; margin:44.20% 15.78%  0 16.92% ; position:absolute; top:0; left:0; z-index:150; }
#headers #topTitleandDay h1{ font-size: 0; }
#headers #topGiftMsg{ max-width:331px; margin:34.13% 18.28% 0 58.07% ; position:absolute; top:0; left:0;  z-index:150;}
#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; }

#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; }
.flexBox{width:100%; max-width:960px; display: flex; }

/*  about  */
#about{width:100%; max-width:1000px; margin:0 auto; position:relative; }
#about:before{ content: ""; display: block; padding-top:56%; }
#about #aboutChara{ max-width:285px; margin:0 63% 0 10%; position:absolute; top:0; left:0; z-index:150; }
#about #aboutText{ max-width:540px; margin:0 5% 0 41%; position:absolute; top:0; left:0; z-index:150; }
#about #aboutBoder{ max-width:1000px; margin:0; position:absolute; bottom:5%; left:0; z-index:100; }

#twitterArea{ margin-bottom:3%; }
#twitterArea #twitterDisp{ width:95%; height:100%; max-height:500px; margin:0 auto; background:#fff; 
overflow-y: scroll;}
#twitterArea #more{ max-width:327px; margin:2rem auto;}

#awardArea{ margin-bottom:3%; }
#awardArea #episodeAward,
#awardArea #etcAward{ margin:0 3.05%; }
#awardArea #luckyAward{ margin:2% 9.85% 0 3.05%; }

#attentionArea{ margin-bottom:3%;}
#attentionArea .read{ width:90%; margin:0 auto; margin-bottom:1%; }

#entryArea{ }
#entryArea #step1:after{ content: ""; display: block; clear: both;}
#entryArea #step1 #step1Box{ width:57%; float:left; margin-left:3%;}
#entryArea #step1 #step1Chara{ width:37%; float:right; margin-right:3%; }
#entryArea #step1 #btnFollow{ max-width:520px; margin:1rem auto;}

#entryArea #step2:after{ content: ""; display: block; clear: both;}
#entryArea #step2 .read{ width:95%; margin:0 auto; margin-bottom:1%;}
#entryArea #step2 #step2Box{ width:57%; float:left; margin-left:3%; }
#entryArea #step2 #step2Box #entryText{ height:15rem; width:99%; padding:1rem; resize:none; outline:none; border-radius:20px; border:solid 3px #300; font-size:calc(1.1rem + ((1vw - 0.64rem) * 1.2));}
#entryArea #step2 #btnTweet{ max-width:520px; margin:1rem auto;}
#entryArea #step2 #step2Chara{ width:37%; float:right; margin-right:3%; }
/*
.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 #aboutChara{ display:none;}
#about #aboutText{ width:90%; margin:0 auto; padding:0; position:static;}
#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;}
#headers #mainImgSp{width:100%; display:block; margin:0%; position:absolute; top:0; left:0; z-index:150;}
#headers #mainImg,
#headers #topROlogo,
#headers #topWebMoneyLogo,
#headers #topRead,
#headers #topSubTitle,
#headers #topTitleandDay,
#headers #topGiftMsg,
#headers #topDeco,
#headers #coverBox{ display:none;}
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%;}
	#entryArea #step1{ width:100%; margin:0 auto}
	#entryArea #step1 #step1Box{ width:100%; margin-left:0;}
	#entryArea #step1 #step1Box p{ margin:0 2%;}
	#entryArea #step1 #step1Chara{ display:none; }
	#entryArea #step1 #btnFollow{ max-width:520px; margin:1rem auto;}
	#entryArea #step2{ width:100%; margin:0 auto}
	#entryArea #step2 #step2Box{ width:100%; margin-left:0;}
	#entryArea #step2 #step2Chara{ display:none; }
	#entryArea #step2 #step2Box #entryText{ height:15rem; width:90%; font-size:1.8rem; margin:0 1%;}
	#entryArea #step2 #btnTweet{ max-width:520px; margin:1rem auto;}

}