@charset "UTF-8";
/*
 oapresent.css（ファイル名変更可）
 本サイト各ページ用CSS
*/
.oapresent-area{
	margin: 0;
}
.oapresent-area .oapresent-inner{
	padding: 0 10px;
}
.oapresent-area .d-box-title.oapresent{
	text-indent: -9999px;
	width: 54.48%;
	padding: 0;
	padding-top: 19.3%;
	margin-left: 23.36%;
	background: url(../images/oapresent/oapresent-title-pc.png) no-repeat;
	background-size:cover;
	height: 0;
}
.oapresent-area .d-box-body{
	border: 2px solid #d4b79b;
	background: #fbeeda;
	border-radius: 5px;
	padding: 4.59% 0 8%;
}
.oapresent-area .oapresent-box-midashi{
	text-indent: -9999px;
	width: 75.43%;
	padding-top: 25.9%;
	height: 0;
	margin: 0 auto 3.67%;
	background: url(../images/oapresent/oapresent-midashi-pc.png) no-repeat;
	background-size: cover;
}
.oapresent-area .oapresent-box-inner{
	padding: 0 7.34%;
}
.oapresent-area .oapresent-box-detail{
	display: flex;
	justify-content: space-between;
	margin-bottom: 5%;
}
.oapresent-area .oapresent-box-detail .oapresent-box-txt{
	width: 46%;
	font-size: 18px;
	margin-top: 10%;
}
.oapresent-area .oapresent-box-detail .oapresent-box-img{
	width: 46.15%;
	text-align: center;
}
.oapresent-area .oapresent-box-detail .oapresent-box-img .img_midashi{
	text-indent: -9999px;
	width: 63%;
	height: 0;
	padding-top: 16.4%;
	background: url(../images/oapresent/oapresent-img_midashi-pc.png) no-repeat;
	background-size: cover;
	margin:0 auto 5.2% 28.64%;
}
.oapresent-area .oapresent-box-detail .oapresent-box-img .present_detail{
	font-weight: bold;
	margin-top: 2%;
	font-size: 16px;
}
.oapresent-area .oapresent-box-movie-title{
	background: #2980b9;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 2%;
}
.oapresent-area .oapresent-box-movie-iframe{
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	margin-bottom: 5%;
}
.oapresent-area .oapresent-box-movie-iframe iframe,
.oapresent-area .oapresent-box-movie-iframe img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.oapresent-area .oapresent-box-apply{
	text-align: center;
	margin-bottom: 4%;
}
.oapresent-area .oapresent-box-apply.quiz{
	font-weight: bold;
	margin-bottom: 3.6%;
}
.oapresent-area .oapresent-box-apply .apply_btn_close{
	color:#000;
	background-color:#ccc;
	font-size:22px;
	display:inline-block;
	padding:10px 15px;
	border-radius:4px;
}
.oapresent-area .oapresent-box-apply .apply_btn_caution{
	font-size: 20px;
	margin-top: 2%;
}
.oapresent-area .oapresent-box-apply.quiz .apply_btn_caution{
	font-size: 28px;
	margin-top: 0;
}
.oapresent-area .oapresent-box-apply .apply_btn_caution.red{
	color: red;
}
.oapresent-area .oapresent-box-apply .apply_btn{
	color:#fff;
	background-color:#f39c12;
	font-size:22px;
	display:inline-block;
	padding:10px 15px;
	text-decoration:none;
	border-radius:4px;
}
.oapresent-area .oapresent-box-apply .apply_end{
	font-weight: bold;
	font-size: 24px;
	margin-bottom:2%;
}
.oapresent-area .oapresent-box-apply .apply_end span{
	background-color: #ffff99;
}
.oapresent-area .oapresent-box-apply .apply_answer{
	display: inline-block;
	background: #fff;
	border: 1px solid #000;
}
.oapresent-area .oapresent-box-apply .apply_answer .apply_answer_title{
	background: #2980b9;
	color: #fff;
	font-weight: bold;
	padding: 5px 10px;
	font-size: 20px;
}
.oapresent-area .oapresent-box-apply .apply_answer .apply_answer_txt{
	padding: 5px 10px;
	font-weight: bold;
	font-size: 16px;
}
.oapresent-area .oapresent-box-caution{
	line-height: 2;
	font-size: 12px;
	margin-bottom: 5%;
}
.oapresent-area .reload_btn {
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px 10px;
    border: none;
    outline: none;
    background: #ffa200;
    color: #000;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
}
.oapresent-area .reload_btn:hover{
	opacity: .7;
}
.oapresent-area .oapresent-box-select{
}
.oapresent-area .oapresent-box-select .oapresent-box-select-inner{
	border:2px solid #ffc95c;
	padding: 6.97% 0 6.37%;
}
.oapresent-area .oapresent-box-select input[type=radio] {
	display: none;
}
.oapresent-area .oapresent-box-select label{
	display: block;
	cursor: pointer;
	background: #ffc100;
	font-size: 34px;
	font-weight: bold;
	border-radius: 8px;
	line-height: 1;
	padding: 3.6% 0 3.6% 4.32%;
	box-shadow:0px 7px 0px 0px #e7af01;
	outline: none;
	width: 64.0625%;
	margin: 0 auto;
}
.oapresent-area .oapresent-box-select label~label{
	margin-top: 4.8%;
}
.oapresent-area .oapresent-box-select input[type="radio"]:checked + label{
	background: #ff8400;
    box-shadow: none;
    border: 3px solid #ff7a00;
}
.oapresent-area .oapresent-box-select .submit_btn{
	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 3%;
    border: none;
    outline: none;
    background: #ffb400;
    box-shadow:0px 7px 0px 0px #d89901;
    color: #000;
    font-size: 36px;
    border-radius: 4px;
    cursor: pointer;
    width: 64.0625%;
	margin: 4.8% auto 0;
	display: block;
	font-weight: bold;
	line-height: 1;
}
.oapresent-area .oapresent-box-result{
	text-align: center;
	color: #005a9b;
	padding-top: 7.93%;
	font-weight: bold;
}
.oapresent-area .oapresent-box-result .oapresent-box-result-answer{
	font-size: 120px;
	line-height: 1;
	padding-bottom: 9%;
}
.oapresent-area .oapresent-box-result .oapresent-box-result-txt{
	font-size: 28px;
}
.oapresent-area .oapresent-box-correct{
	padding-top: 4.2%;
}
.oapresent-area .oapresent-box-correct-sample{
	width: 54.8%;
	margin: 0 auto 4.8%;
}
.oapresent-area .oapresent-box-correct-sample img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.oapresent-area .oapresent-box-correct-btn{
	display: block;
	width: 54.8%;
	margin: 0 auto 9%;
	background: #005a9b;
	color: #fff;
	font-weight: bold;
	text-align: center;
	border-radius: 8px;
	font-size: 36px;
	padding: 1.2% 0;
}
.oapresent-area .oapresent-box-correct-txt{
	text-align: center;
	color: #005a9b;
	font-size: 25px;
	font-weight: bold;
}
.oapresent-area .oapresent-box-correct-terminal{
	font-weight: bold;
	color: #005a9b;
	width: 76.68%;
	font-size: 22px;
	margin: 4.2% auto 0;
}
.oapresent-area .oapresent-box-correct-terminal dt{
	background: #005a9b;
	color: #fff;
	width: 125px;
	text-align: center;
	border-radius: 8px;
	margin-bottom: 2.35%;
	font-size: 32px;
	height: 50px;
	line-height: 50px;
}
.oapresent-area .q_back{
	display: block;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #2980b9;
	margin-top: 12%;
	font-size: 32px;
	font-weight: bold;
	padding: 1.4% 0;
}
.backnumber-area {
    width: 100%;
    padding: 0 11px;
    margin: 8% auto 56px;
}
.backnumber-area .drama-box-subTitle {
	background: url(../images/story/story-backnumber-title-pc.png) no-repeat;
	background-size: cover;
	width: 50.02%;
	padding-top: 4.1%;
	margin-bottom: .81%;
}
.backnumber-area .drama-box-subTitle span{
	display: none;
}
.backnumber-area .drama-article-body{
	border: 2px solid #d4b79b;
	background: #fbe8bf;
	border-radius: 5px;
	padding: 2.88% 1.33% 1.35%;
}
.backnumber-list {
    width: 100%;
    counter-reset: num;
}
.backnumber-list:after { content: ''; display: block; clear: both; }
.backnumber-list-item a {
	display: block;
}
.backnumber-list-item {
	width: 24%;
	margin-left: 1.333%;
	margin-top: 0.8%;
	margin-bottom: 2%;
	position: relative;
	float: left;
}
.backnumber-list-item:nth-child(4n+1) {
	margin-left: 0;
}
.backnumber-list-item-img {
	width: 100%;
	padding-top: 56.25%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border: 2px solid #d4b79b;
	border-radius: 3px;
}

/* ---------------------------------
 SP用
--------------------------------- */
@media only screen and (max-width: 600px) {
	.oapresent-area{
		background: linear-gradient(to bottom, rgb(242, 192, 124) 0%,rgba(240,199,130,1) 26%,rgba(244,203,100,1) 72%,rgba(255,211,160,1) 100%);
	}
	.oapresent-area .d-box-body{
		margin-bottom: 5%;
	}
	.oapresent-area .oapresent-inner{
		padding: 0 4.0625% 12.5%;
	}
	.oapresent-area .d-box-title.oapresent{
		width: 89.26%;
		padding: 0;
		padding-top: 30.6%;
		margin-left: 4.42%;
	}
	.oapresent-area .oapresent-box-midashi{
		width: 90%;
		padding-top: 30.8%;
		height: 0;
		margin: 0 auto 5%;
	}
	.oapresent-area .oapresent-box-inner{
		padding: 0 5%;
	}
	.oapresent-area .oapresent-box-detail{
		display: block;
		margin-bottom: 10%;
	}
	.oapresent-area .oapresent-box-detail .oapresent-box-txt{
		width: 100%;
		font-size: 3.75vw;
		margin: 0 0 7%;
	}
	.oapresent-area .oapresent-box-detail .oapresent-box-img{
		width: 100%;
	}
	.oapresent-area .oapresent-box-detail .oapresent-box-img .present_detail{
		font-size: 4.0625vw;
	}
	.oapresent-area .oapresent-box-movie-title{
		font-size: 4.375vw;
	}
	.oapresent-area .oapresent-box-movie-iframe{
		margin-bottom: 10%;
	}
	.oapresent-area .oapresent-box-apply,
	.oapresent-area .oapresent-box-apply.quiz{
		margin-bottom: 8%;
	}
	.oapresent-area .oapresent-box-apply .apply_btn_close{
		font-size:5vw;
	}
	.oapresent-area .oapresent-box-apply .apply_btn_caution,
	.oapresent-area .oapresent-box-apply.quiz .apply_btn_caution{
		font-size: 3.75vw;
	}
	.oapresent-area .oapresent-box-apply .apply_btn{
		font-size:5vw;
	}
	.oapresent-area .oapresent-box-apply .apply_end{
		font-size: 4.6875vw;
		margin-bottom: 4%;
	}
	.oapresent-area .oapresent-box-apply .apply_answer{
		width: 100%;
	}
	.oapresent-area .oapresent-box-apply .apply_answer .apply_answer_title{
		font-size: 4.6875vw;
	}
	.oapresent-area .oapresent-box-apply .apply_answer .apply_answer_txt{
		font-size: 3.90625vw;
	}
	.oapresent-area .oapresent-box-caution{
		font-size: 3.28125vw;
		margin-bottom: 8%;
	}
	.oapresent-area .reload_btn{
		font-size: 4.6875vw;
	}
	.oapresent-area .reload_btn:hover{
		opacity: 1;
	}
	.oapresent-area .oapresent-box-select .oapresent-box-select-inner{
		padding: 10% 0;
	}
	.oapresent-area .oapresent-box-select label{
		font-size: 4.4vw;
		width: 80%;
		box-shadow: 0px 4px 0px 0px #e7af01;
	}
	.oapresent-area .oapresent-box-select label~label{
		margin-top: 8%;
	}
	.oapresent-area .oapresent-box-select .submit_btn{
		font-size: 6.4vw;
		width: 80%;
		box-shadow: 0px 4px 0px 0px #e7af01;
	}
	.oapresent-area .oapresent-box-result .oapresent-box-result-answer{
		font-size: 21.33vw;
	}
	.oapresent-area .oapresent-box-result .oapresent-box-result-txt{
		font-size: 5.33vw;
	}
	.oapresent-area .oapresent-box-correct-sample{
		width: 100%;
	}
	.oapresent-area .oapresent-box-correct-btn{
		width: 100%;
		font-size: 6.4vw;
	}
	.oapresent-area .oapresent-box-correct-txt{
		font-size: 4.8vw;
	}
	.oapresent-area .oapresent-box-correct-terminal{
		width: 100%;
		font-size: 4.8vw;
	}
	.oapresent-area .oapresent-box-correct-terminal dt{
		font-size: 6.4vw;
		height: auto;
		line-height: 1;
		width: 35%;
		padding: 2% 0;
	}
	.oapresent-area .q_back{
		font-size: 3.75vw;
	}
	.backnumber-area {
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    .backnumber-area .drama-box-subTitle {
    	margin-bottom: 2%;
    	width: 98%;
    	padding-top: 8%;
	}
    .backnumber-area .drama-article-body {
        padding: 0;
    }
    .backnumber-list {
        width: 100%;
        padding: 4% 3% 2%;
    }
    .backnumber-list-item {
        display: inline-block;
        width: 47%;
        position: relative;
        vertical-align: bottom;
        float: none;
        margin-left: 0;
        margin-bottom: 3%;
    }
    .backnumber-list-item:not(:nth-of-type(2n+1)) {
        margin-left: 3%;
    }
    .backnumber-list-item-img {
        width: 100%;
        padding-top: 56.25%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

/* ---------------------------------
 PC用
--------------------------------- */
@media screen and (min-width: 993px) {
}

/* ---------------------------------
 tablet FONT用
--------------------------------- */
@media screen and (min-width : 601px){

}