@charset "UTF-8";

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
	font-family:"M PLUS Rounded 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

 }
* { margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
 }

html,body {
	position: relative;
	width: 100%;
	height:100%;
	color: #442e00;
	background: #000;
	}

.fade {
	cursor: pointer;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

.fade:hover {
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
	cursor: pointer;
}

.coverArea {
	display: block;
	position:fixed;
	width:100%;
	height: 100%;
	z-index: 10000;
	background: #fff;
}
.coverArea .cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 170px;
	height: 170px;
	text-align: center;
	font-size: 12px;
	color: #bbb;
	font-family: 'Bellefair', serif;
}
.coverArea .cover img {
	width: 100%;
}
.off {
	opacity: 0;
	display: none;
}


.bgImg {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/bg.jpg') 50% 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	opacity: 1;
	z-index: 0;
}

.wrap {
	position: relative;
	width: 500px;
	margin: 0 auto;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/wrap_bg_loop.png') 50% 0/100% repeat-y;
	z-index: 1;
}
.wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	min-height: 4vw;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/wrap_bg_top.png') 50% 0/100% no-repeat;
	z-index: 2;
}
.wrap:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	min-height: 6vw;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/wrap_bg_bottom.png') 50% 100%/100% no-repeat;
	z-index: 2;
}

h1.mainLogo {
	position: relative;
	width: 100%;
	margin-bottom: -18%;
	z-index: 10;
}
h1.mainLogo img {
	width: 100%;
	height: auto;
}
.imgFull {
	width: 100%;
}
.imgFull img {
	width: 100%;
	height: auto;
}
.shiroLogo {
	width: 30%;
	margin: 3% auto 0;
}
.shiroLogo img {
	width: 100%;
	height: auto;
}
.copyright {
	position: relative;
	margin-top: 5%;
	padding: 0 0 4%;
	text-align: center;
	font-size: 10px;
	color: #533;
	z-index: 10;
}



.cpArea {
	font-size: 0;
}
.cpArea .cpNotice {
	padding:3% 6%;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/cp_bg_loop.png') 50% 10%/cover repeat-y;
}
.cpArea .cpNotice p {
	font-size: 12px;
	line-height: 1.3;
	padding: 1% 0;
	color: #f5f5f5;
}

.cpArea .cpCount {
	position: relative;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/cp_bg_loop.png') 50% 10%/cover repeat-y;
}
.cpArea .cpCount .count {
	position: absolute;
	top: 6%;
	left: 0;
	padding:3% 6%;
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #fffedf;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
	z-index: 10;
}
.cpArea .cpCount .count span {
	font-size: 70px;
	font-weight: 700;
	font-style: italic;
}
.cpArea .cpCount .date {
	position: absolute;
	top: 61%;
	left: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	z-index: 10;
}
.cpArea .cpCount .date span {
	display: inline-block;
	width: 50%;
	margin: 0 auto;
	padding: 1%;
	background: #1e1402;
	border-radius: 3px;
	font-size: 11px;
	color: #fafafa;
	line-height: 1.4;
	text-align: center;
}
.cpArea .clearList {
	border-radius: 0 0 4px 4px;
	overflow: hidden;
}

.graphArea {

}
.graphArea dl {
	display: inline-block;
}
.graphArea dt {
	display: inline-block;
}
.graphArea dd {
	display: inline-block;
}
.graphArea .point {
	width: 10%;
	background: #f00;
}
.graphArea .barWrap {
	width: 80%;
	background: #ff0;
}
.graphArea .percent {
	width: 10%;
	background: #00f;
}



/* 壁紙 */
.presentArea * {
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.presentArea {
	margin: 0 4%;
}
.presentArea .openBtn a {
	display: inline-block;
	width: 100%;
	margin: 8% 0 8%;
	padding: 6% 0;
	font-size: 28px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #ef0769;
	border-radius: 4px;
	border: none;
	box-shadow: 0 5px  0 #a4033f, 0 4px 5px rgba(0, 0, 0, .3);
}

.presentArea .openBtn :hover {
	margin: 9% 0 7%;
	box-shadow: 0 0px  0 #a4033f, 0 1px 0px rgba(0, 0, 0, .3);
}
.presentArea .openBtn.on{
	display: inline-block;
}


.presentArea .wpWrap {
	padding-top: 24%;
}
.presentArea h3 {
	width: 55%;
	margin: 8% auto 0;
	padding: 3%;
	text-align: center;
	color: #fff;
	font-size: 18px;
	background: #b0a15a;
	border-radius: 4px;
}
.presentArea .dltext {
	line-height: 1.3;
}
.presentArea ul {
	margin:20px 0 0;
	overflow: hidden;
	font-size: 0;
	text-align: center;
}
.presentArea li {
	display: inline-block;
	width: 25%;
	padding:3% 1% 0;
}
.presentArea li img {
	width: 100%;
}
.presentArea li p {
	text-align: center;
	font-size: 12px;
	font-family:"M PLUS Rounded 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.presentArea li .link {
	padding-top: 5px;
}

.presentArea li a {
	display: inline-block;
	width: 100%;
	margin:4px 0;
	padding: 10px 0;
	background: #584932;
	border-radius: 2px;
	text-align: center;
	font-size: 11px;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 0 0 1px #bcad84, 0 0 0 2px #584932;
}

.eveBnr {
	margin: 5% auto;
	width: 90%;
}
.eveBnr img {
	width: 100%;
	height: auto;
}

.appNotice {
	margin: 2% 3% 0;
	padding: 2%;
	background: #f2dfb7;
	border-radius: 4px;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
}
.appNotice ul {
	display: inline-block;
	margin: 10px;
	padding:10px 3%;
	background: #342616;
	border-radius: 4px;
	line-height: 1.5;
	font-size: 10px;
}
.appNotice li {
	margin: 0 0 1% 4%;
	list-style-type: disc;
	line-height: 1.5;
}
.appNotice li:last-child {
	margin-bottom: 0;
}



.pointRate{

}
.pointRate h3{
	margin: 3% auto 0;
	padding: 2%;
	width: 92%;
	background: #edd7a8;
	border-radius: 4px;
	text-align: center;
	
	font-size: 1.2em;
}
.pointRateList{
	margin: 0 auto;
	padding: 1em 0;
	width: 92%;
}

.pointRateList li{
	position: relative;
	padding: 1% 0%;
	width: 70%;
	box-sizing: border-box;
}

.pointRateList li.myPoint:before{
	content: 'あなたの正解数';
	position: absolute;
	top: 50%;
	right: -44%;
	padding: 0.8em 0.9em;
	width: 17%;
	font-size: 0.4em;
	text-align: center;
	color : #fff;
	background-color: #f95a6c;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: .6em;
}

.pointRateList li span{
	position: absolute;
	top:0.2em;
	left: 3.2em;
	display: inline-block;
	padding: 0.2% 0;
	text-align: right;
	box-sizing: border-box;
	color : #fff;
	background: #dfb521;
	background: -webkit-linear-gradient(90deg, #dfb521, #bc9200);
	background: linear-gradient(90deg, #dfb521, #bc9200);
	border-radius: 2px;
}
.pointRateList li.myPoint span{
	background: #ff829a;
	background: -webkit-linear-gradient(90deg, #ff829a, #f95a6c);
	background: linear-gradient(90deg, #ff829a, #f95a6c);
}


.cpArea .cpVoice {
	padding:3% 6%;
	background: url('/shironekoproject/lp/chaguma_exam/2018/common/img/cp_bg_loop.png') 50% 10%/100% repeat-y;

}
.cpArea .cpVoice .title {
	padding-bottom: 2%;
}
.cpArea .cpVoice li {
	display: inline-block;
	width: 50%;
	margin: 1% auto;
}
.cpArea .cpVoice li img {
	width: 100%;
	height: auto;
}
.cpArea .cpVoice .attention {
	padding: 3% 3%;
	font-size: 12px;
	line-height: 1.3;
	color: #f0f0f0;
}

.cpArea .cpVoice .nicoArea {
	padding: 3% 3%;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
	color: #f0f0f0;
	background: #584932;
	box-shadow: 0 0 0 1px #bcad84, 0 0 0 2px #584932;
	border-radius: 2px;
}
.cpArea .cpVoice .nicoArea h3 {
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}
.cpArea .cpVoice .nicoArea h3 span {
	font-size: 26px;
	background: rgba(0, 0, 0, .3);
	border-radius: 3px;
	padding: 1% 3%;
	line-height: 2;
}
.cpArea .cpVoice .nicoArea p {
	padding: 3% 0;
	font-size: 16px;
	text-align: center;
}

.cpArea .cpVoice .nicoArea a {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 6% 0;
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #ef0769;
	border-radius: 4px;
	border: none;
	box-shadow: 0 5px  0 #a4033f, 0 4px 5px rgba(0, 0, 0, .3);
}

.cpArea .cpVoice li.no {
	opacity: .5;
	pointer-events: none;
}


/*===============================================

@media screen max-width

===============================================*/
@media screen and (max-width: 640px){

	html{
		font-size: 100%;
		font-size: 4vw;
	}
	html * {
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}

	.wrap {
		width: 100%;
	}

	.cpArea .cpNotice p {
		font-size: 2.5vw;
	}
	.cpArea .cpCount .count {
		top: 1vw;
		left: 0;
		padding:3% 6%;
		font-size: 14px;
	}
	.cpArea .cpCount .count span {
		font-size: 14vw;
	}
	.cpArea .cpCount .date {
		top: 19vw;
		left: 0;
	}
	.cpArea .cpCount .date span {
		width: 71%;
		width: 70vw;
		padding: 1%;
		font-size: 11px;
	}

	.presentArea .openBtn  {
		font-size: 6vw;
	}

	.pointRateList li.myPoint:before{
		font-size: 2.4vw
	}

	.cpArea .cpVoice .attention {
		font-size: 2.5vw;
	}



	.cpArea .cpVoice .nicoArea h3 {
		font-size: 7.5vw;
	}
	.cpArea .cpVoice .nicoArea h3 span {
		font-size: 5vw;
	}
	.cpArea .cpVoice .nicoArea p {
		font-size: 5vw;
		line-height: 1.3;
	}

	.cpArea .cpVoice .nicoArea a {
		font-size: 8vw;
	}



}/* /max-width */