@charset "utf-8";

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* *
* *  Basic information:
* *  - CSS guideline: FLOCSS
* *  - Created: 2014-12-22
* *  - Last update: 2014-12-22 by Suzuki
* *
* *  Order of discription:
* *  - Object [ project ]
* *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* ==========================================================================
   Object [ project ]
   ========================================================================== */

/* Main
   ----------------------------------------------------------------- */
.u-text10.small-text {
    font-size: 77% !important;
}
   
.title_area {
	float: left;
	width: 620px;
	margin-bottom: 30px;
}
.title_area h3 {
	width: 620px;
	display: block;
	margin-top: 30px;
}
.title_area h3:after {
	width: 100%;
}
.title_area h3 img {
	width: 90%;
	height: auto;
}
.title_area .subtitle {
	width: 100%;
	float: left;
	line-height: 180%;
}
/* play */
.play{
	float:right;
	overflow:hidden;
	width:273px;
	margin:30px 0 20px 0;
	padding:12px 12px 2px;
	background:#007dc5;
	border-radius:5px;
	text-align:center;
	behavior: url(/decoboco-eye/css/PIE.htc);
}
.play .play_title{
	margin-bottom:7px;
	color:#fff;
	font-weight:normal;
	font-size:1em;
}
.play .playList1{
	float:left;
	margin-right:8px;
}
.play .playList2{float:left;overflow: hidden;}
.play .playList1 h2,
.play .playList2 h2{
	line-height:0;
	margin-bottom:2px;
}
.play .playList1 p,
.play .playList2 p{line-height:0;}
.play .movie a{
	display:block;
	width:100%;
	height:119px;
	padding-top:5px;
	background:#fff;
}
.play .movie img{padding-top:10px;}
.play .soon img{height:auto;}

/* qList */
.main__content {
	clear: both;
}
.main__content .qList{
	clear:both;
	overflow:hidden;
}
.main__content .qList dt,
.main__content .qList dd{
	float:left;
	width:300px;
	height:179px;
	margin:0 20px 20px 0;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	overflow: hidden;
}
.main__content .qList dd.qList_right {
	margin-right: 0;
}
.main__content .qList dd a{
	display:block;
	width:100%;
	background:#007dc5;
	text-align:center;
	line-height:0;
}
.main__content .qList dd a img{margin:0 auto;}

/****** question ******/
.main__content .qaBox{
	clear:both;
	overflow:hidden;
}
.main__content .qaBox h1{float:left; background:#007dc5; line-height:0;}
.main__content .qaBox h1 img.sp{display:none;}

/* ansBox */
.main__content .qaBox .ansBox{
	float:right;
	width:646px;
	min-height:227px;
	margin-right:0;
	padding:29px 20px 0 29px;
	border:#007dc5 solid 3px;
}
.main__content .qaBox .ansBox h2{
	margin-right:10px;
	margin-bottom: 10px;
	padding-left:2.5em;
	font-size:18px;
	font-weight: bold;
	line-height:24px;
	vertical-align:top;
	color:#007dc5;
}
.main__content .qaBox .ansBox h2 span{
	display:block;
	float:left;
	margin-left:-1.8em;
	font-size:24px;
}
.main__content .qaBox .ansBox .teacher{
	float:right;
	margin:0 29px 5px;
}
.main__content .qaBox .ansBox figure.fig{clear:both; margin-bottom:25px;}
.main__content .qaBox .ansBox figure.fig img{vertical-align:middle;}

/* Q1 */
.main__content .qaBox.q1 .ansBox .figBox{
	clear:both;
	display:table;
	width:70%;
	margin:0 auto;
	margin-top: 20px;
}
.main__content .qaBox.q1 .ansBox .figBox .fig1,
.main__content .qaBox.q1 .ansBox .figBox .fig2,
.main__content .qaBox.q1 .ansBox .figBox .arrow{
	display:block;
	float: left;
	vertical-align:middle;
}
.main__content .qaBox.q1 .ansBox .figBox .arrow {margin-top: 180px;}
.main__content .qaBox.q1 .ansBox .figBox .fig1,
.main__content .qaBox.q1 .ansBox .figBox .fig2{width:48%;}
.main__content .qaBox.q1 .ansBox .figBox .arrow{width:4%; text-align:center;}
.main__content .qaBox.q1 .ansBox .figBox .arrow img{width:80%; max-width:21px; height:auto; margin:0 auto;}
.main__content .qaBox.q1 .ansBox .figBox .arrow img.sp{display:none;}
.main__content .qaBox.q1 .ansBox .figBox .fig1,
.main__content .qaBox.q1 .ansBox .figBox .fig2{background:#f4f7fc;}
.main__content .qaBox.q1 .ansBox .figBox .fig1 .figbox_title,
.main__content .qaBox.q1 .ansBox .figBox .fig2 .figbox_title{
	margin:0 0 10px;
	background:#007dc5;
	padding:5px 0;
	color:#fff;
	text-align:center;
	vertical-align:top;
}
.main__content .qaBox.q1 .ansBox .figBox .fig1 p,
.main__content .qaBox.q1 .ansBox .figBox .fig2 p{
	width:95%;
	margin:10px auto;
	text-align:center;
	line-height: 150%;
}
.main__content .qaBox.q1 .ansBox .figBox .fig1 figure,
.main__content .qaBox.q1 .ansBox .figBox .fig2 figure{text-align:center;}
.main__content .qaBox.q1 .ansBox .figBox .fig1 figure{margin-left:-25%;}
.main__content .qaBox.q1 .ansBox .figBox .fig1 figure img,
.main__content .qaBox.q1 .ansBox .figBox .fig2 figure img{
	margin:0 auto;
}

/* Q2 */
.main__content .qaBox.q2 .ansBox .figbox_title{
	clear:both;
	display:inline-block;
	margin:20px 0 0;
	padding:5px 20px;
	background:#bad1ed;
	font-size:1.2em;
	color:#007dc5;
}
.main__content .qaBox.q2 .ansBox .figBox{
	overflow:hidden;
	width:96%;
	background:#f4f7fc;
}
.main__content .qaBox.q2 .ansBox .figBox .wrapper{
	display:table;
	margin:20px;
}
.main__content .qaBox.q2 .ansBox .figBox .figText,
.main__content .qaBox.q2 .ansBox .figBox figure{
	display:table-cell;
	vertical-align:middle;
}
.main__content .qaBox.q2 .ansBox .figBox .figText{
	width:70%;
	padding-right:10px;
}
.main__content .qaBox.q2 .ansBox .figBox figure{
	width:30%;
	padding-left:10px;
}
.main__content .qaBox.q2 .ansBox .figBox .figText ul li{
	margin-bottom:10px;
	font-weight:bold;
	border: none;
}
.main__content .qaBox.q2 .ansBox .figBox .hr{
	clear:both;
	display:block;
	height:2px;
	margin:0 20px;
	background:#007dc5;
}
.main__content .qaBox.q2 .ansBox .arrow{
	width:90%;
	margin:20px 0;
	text-align:center;
	line-height:0;
}
.main__content .qaBox.q2 .ansBox .arrow img{margin:0 auto;}
.main__content .qaBox.q2 .ansBox .result,
.main__content .qaBox.q2 .ansBox .result2{
	width:96%;
	background:#f4f7fc;
	text-align:center;
}
.main__content .qaBox.q2 .ansBox .result li{
	display:inline-block;
	margin:10px;
	border: none;
}
.main__content .qaBox.q2 .ansBox .result2 li{
	display:inline-block;
	margin:10px 30px;
	border: none;
}

.main__content .qaBox .ansBox .editorial{
	margin:18px;
	text-align:right;
	line-height: 150%;
}

/* pageLink */
.main__content .pageLink{
	clear:both;
	margin:13px 0px 30px 0;
}
.main__content .pageLink h1{color:#007dc5;}
.main__content .pageLink ul{
	overflow:hidden;
	border-left:#007dc5 solid 1px;
}
.main__content .pageLink ul li{
	box-sizing:border-box;
	float:left;
	width:25%;
	padding:1% 2%;
	min-height:75px;
	border-right:#007dc5 solid 1px;
	line-height: 130%;
}
.main__content .pageLink ul li span{
	display:block;
	width:2.5em;
	background:#007dc5;
	border-radius:3px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	behavior: url(/decoboco-eye/css/PIE.htc);
	margin-bottom: 6px;
}

#mainVisual{display:none;}

.pc_none {
	display: block !important;
}
.sp_none {
	display: none !important;
}

/* = max-width: 946px
-----------------------------------------------------------------------------*/
@media screen and (max-width : 946px) {
	.title_area {
		width: 63%;
	}
	.title_area h3 {
		width: 100%;
	}
	.title_area h3 img {
		width: 90%;
	}
	.main__content .qaBox.q1 .ansBox .figBox .fig1,
	.main__content .qaBox.q1 .ansBox .figBox .fig2{display:block;height: auto;}
	.main__content .qaBox.q1 .ansBox .figBox .arrow{display:block;height: 17px;}
	.main__content .qaBox.q1 .ansBox .figBox .arrow img{display:block;height: 17px;}
	.main__content .qaBox.q1 .ansBox .figBox .arrow {margin: 10px 0;}
	.main__content .qaBox.q1 .ansBox .figBox .fig1,
	.main__content .qaBox.q1 .ansBox .figBox .fig2,
	.main__content .qaBox.q1 .ansBox .figBox .arrow{width:100%;}
	.main__content .qaBox.q1 .ansBox .figBox .arrow img.pc{display:none;}
	.main__content .qaBox.q1 .ansBox .figBox .arrow img.sp{display:block;}
	.play .playList1{
		float:none;
		margin: 0 auto;
		width: 132px;
	}
	.play .playList2{
		float:none;
		margin: 0 auto;
		margin-top: 10px;
		width: 132px;
	}
	.main__content .qaBox.q2 .ansBox .result li img {
		width: auto;
		height: 157px;
	}
	.main__content .qaBox.q2 .ansBox .figBox2 img {
		width: 100%;
		height: auto;
	}
	.title_area .subtitle br {
		display:none
	}
}
@media only screen and (min-width : 641px) and (max-width : 946px) {
	.main__content{
		width:100%;
		margin:15px 0;
		padding:0;
	}
	.main__content img{
		max-width:100%;
		height:auto;
	}
	.main__content dt img{
		width:100%;
		height:auto;
	}
	.main__content header{width:50%;}
	.play {margin-right:0; width:29%;}
	.main__content .qList dt,
	.main__content .qList dd{
		box-sizing:border-box;
		width:32%;
		height:auto;
		margin:0 2% 2% 0;
	}
	.main__content .qList dd.qList_right {
		margin-right: 0;
	}
	.main__content .qList dd:nth-child(4){clear:both;}

	.main__content .qaBox h1{width:30%;}
	.main__content .qaBox .ansBox{
		width:66.5%;
		margin:0 0 0 1%;
		padding:1% 0 0 1%;
	}
	.main__content .qaBox .ansBox h2 br{display:none;}
}

@media only screen and (min-width: 641px) and (max-width: 700px) {
	h3 img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (max-width: 640px) {
	.ie9 .play{
		float:none;
		margin: 10px auto;
		width: 280px;
	}
}


/* = max-width: 568px
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {
	.title_area {
		width: 100%;
		margin-bottom: 10px;
	}
	.title_area .subtitle {
		width: 100%!important;
		float: none;
		padding: 0px 10px;
		box-sizing: border-box;
	}
	.play .playList1{
		float:left;
		margin: 0;
		margin-right: 8px;
		width: 132px;
	}
	.play .playList2{
		float:right;
		margin: 0;
		width: 132px;
	}
	.main__content{
		box-sizing:border-box;
		width:100%;
		margin:0 0 15px 0;
		padding:0 10px;
	}

	/* header */
	.main__content header{
		float:none;
		width:100%;
	}
	.main__content header h1 img.pc{display:none;}
	.main__content header h1 img.sp{
		display:block;
		margin:0 auto 10px;
	}
	.main__content header p br{display:none;}
	.main__content header p span.sp{display:inline;}

	/* play */
	.play{
		float:none;
		margin: 10px auto;
	}
	.play .movie a{width:100%;}

	/* qList */
	.main__content .qList dt,
	.main__content .qList dd{
		float:none;
		width:100%;
		margin:0 0 10px 0;
		text-align:center;
	}
	.main__content .qList dt {
		width: 70%;
		height: auto;
		margin: 0 auto;
	}
	.main__content .qList dt img {
		margin: 20px auto 10px;
		width: 100%;
		height: auto
	}

	/* question */
	.main__content .qaBox{
		float:none;
		width:100%;
		margin:0 auto;
	}
	.main__content .qaBox h1{
		width: 100%;
		float:none;
		text-align:center;
		margin:10px 0;
		background:#007dc5;
	}
	.main__content .qaBox h1 img.pc{display:none;}
	.main__content .qaBox h1 img.sp{display:block;margin: 0 auto;}
	/* ansBox */
	.main__content .qaBox .ansBox{
		float:none;
		box-sizing:border-box;
		width:100%;
		margin-right:0;
		padding:10px 10px 0;
	}
	.main__content .qaBox .ansBox figure.fig{margin-bottom:0;}
	.main__content .qaBox .ansBox h2{padding-left:0; padding-right:80px;}
	.main__content .qaBox .ansBox h2 br{display:none;}
	.main__content .qaBox.q1 .ansBox h2{
		min-height:104px;
		background:url(../images/q1/teacher-sp.png) top right no-repeat;
	}
	.main__content .qaBox.q2 .ansBox h2{
		min-height:102px;
		background:url(../images/q2/teacher-sp.png) top right no-repeat;
	}
	.main__content .qaBox.q3 .ansBox h2{
		min-height:103px;
		background:url(../images/q3/teacher-sp.png) top right no-repeat;
	}
	.main__content .qaBox.q4 .ansBox h2{
		min-height:98px;
		background:url(../images/q4/teacher-sp.png) top right no-repeat;
	}
	.main__content .qaBox.q5 .ansBox h2{
		min-height:103px;
		background:url(../images/q5/teacher-sp.png) top right no-repeat;
	}
	.main__content .qaBox .ansBox h2 span{float:none; margin-left:0;}
	.main__content .qaBox .ansBox .teacher{display:none;}
	.main__content .qaBox .ansBox figure.fig{width:100%; text-align:center;}
	.main__content .qaBox .ansBox figure.fig img{max-width:100%; margin-bottom:10px; margin-right:0;}

	/*Q2*/
	.main__content .qaBox.q2 .ansBox figure.fig img.fig{width:100%;}
	.main__content .qaBox.q2 .ansBox figure.fig img.pc{display:none;}
	.main__content .qaBox.q2 .ansBox figure.fig img.sp{display:inline-block;}

	/* pageLink */
	.main__content .pageLink{margin:13px 0 13px 0;}
	.main__content .pageLink ul{border-left:none;}
	.main__content .pageLink ul li{
		box-sizing:border-box;
		float:none;
		width:100%;
		min-height:1em;
		margin-top:1em;
		padding:0 0 0 3em;
		border-right:none;
	}
	.main__content .pageLink ul li span{
		float:left;
		margin-left:-3em;
	}
	.main__content .qaBox.q2 .ansBox .figBox2 img {
		width: 70%;
		height: auto;
	}

	.main__content .qaBox.q2 .ansBox .figBox2 .figText,
	.main__content .qaBox.q2 .ansBox .figBox2 figure{display:block; width:100%; padding:0;}
	.main__content .qaBox.q2 .ansBox .figBox2 figure{text-align:center;}
	.main__content .qaBox.q2 .ansBox .figBox2 figure img{margin:0 auto; max-width:100%; height:auto;}

	.pc_none {
		display: none !important;
	}
	.sp_none {
		display: block !important;
	}
}