@charset "utf-8";
/* CSS Document */

/* common
------------------------------------------------------------------------ */

#wrap a{
	border: none;
	outline:none;
}


#wrap{
	position: relative;
	width: 740px;
	height: 450px;
}
@media (max-width: 767px){
	#wrap{
		margin-top: 30px;
		position: relative;
		width:100%;
		height: auto;
		background-size: contain !important;
	}
	#wrap:after{
		display: block;
		content: "";
		padding-top: 70.8%;
	}

}
#line{
	display: block;
	width: 740px;
	height: 10px;
	margin-bottom: 20px;
}
@media (max-width: 767px) {
	#line{
		max-width: 100%;
	}
}

/* question,answer text
------------------------------------------------------------------------ */

#text{
	width: 385px;
	height: 260px;
	position: absolute;
	top:68px;
	left:107px;
}
@media (max-width: 767px) {
	#text{
		width: calc(100% - 40vw);
		padding-top: 67.5%;
		max-width: 100%;
		height:auto;
		top:5%;
		left:18vw;
		background-size: contain !important;
	}
	.start #text{
		width: 100%;
		max-width: 75%;
		left:9%;
	}
}



/* btns
------------------------------------------------------------------------ */

#btns{
	position: absolute;
	top:238px;
	left:120px;
	width: 403px;
	height: 106px;
}
@media (max-width: 767px) {
	#btns{
		top:50%;
		left: 0;
		width: 100%;
		height:auto;
		display: flex;
		justify-content: center;
		padding-left: 20vw !important;
		padding-right: 20vw !important;
	}
}

#btns li,
#btns li a{
	display: block;
	width: 185px;
	height: 108px;
}
@media (max-width: 767px) {
	#btns li{
		position: relative;
		display: block;
		width: calc(50% - 10px);
		margin-left: 5px;
		margin-right: 5px;
	}
	#btns li a{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-size: 100% auto !important;
	}
	#btns li:before{
		display: block;
		content: "";
		padding-top: 60%;
	}
}

@media (max-width: 320px) {
	#btns li,
	#btns li a{
		display: block;
		width: 80px;
		height: 47px;
		background-size: cover !important;
	}
}

#btns li a:hover{
	background-position: left 4px;
}
@media (max-width: 767px) {
	#btns li a:hover{
		background-position: 0 0 !important;
	}
}
#btns li.btn_a{
	float: left;
}
#btns li.btn_b{
	float: right;
}


#mark{
	position: absolute;
	top: 5px;
	left: 465px;
	width: 180px;
	height: 180px;
}
@media (max-width: 767px) {
	#mark{
		position: absolute;
		top: -30px;
		left: auto;
		right: -10px;
		width: 18vw;
		height: 18vw;
		background-size: cover !important;
	}
}

#balloon{
	position: absolute;
	top: 100px;
	right: 0;
	width: 150px;
	height: 150px;
}
@media (max-width: 767px) {
	#balloon{
		position: absolute;
		top: 18vw;
		right: -5px;
		width: 18vw;
		height: 18vw;
		background-size: cover !important;
	}
}
#human{
	width: 120px;
	height: 245px;
	position: absolute;
	bottom: 20px;
	right: 65px;
}
@media (max-width: 767px) {
	#human{
		width: 20vw;
		height: auto;
		position: absolute;
		top: 50%;
		bottom:auto;
		right:15px;
		background-size: 100% auto !important;
	}
	#human:before{
		display: block;
		content: "";
		width: 100%;
		padding-top: 204.1%;
	}
}
#res_btn  {
	width: 255px;
	height: 50px;
	position: absolute;
	bottom: 20px;
	left: 30px;
}
#res_btn li,
#res_btn li a{
	width: 255px;
	height: 50px;
	display: block;
}

/* start
------------------------------------------------------------------------ */
.start #human{
	width: 240px;
	height: 235px;
}
@media (max-width: 767px) {
	.start #human{
		width: 40vw;
		height: auto;
		background-size: cover !important;
		bottom: -80px;
	}
}

/* Answer - common
------------------------------------------------------------------------ */
#result{
	position: relative;
	width: 740px;
	height: 450px;
}
@media (max-width: 767px){
	#result{
		margin-top: 30px;
		position: relative;
		width:100%;
		height: auto;
		background-size: contain !important;
	}
	#result:after{
		position: relative;
		display: block;
		content: "";
		padding-top: 70.8%;
	}

}
#result h2{
	padding: 75px 0 15px 110px;
}
@media (max-width: 767px) {
	#result h2{
		padding: 8% 20vw 0 12vw;
		/*width: calc(100% - 40vw);*/
		/*padding-top: 67.5%;*/
		/*max-width: 100%;*/
		/*height:auto;*/
		/*top:5%;*/
		/*left:18vw;*/
		/*background-size: contain !important;*/
	}
	#result h2 img{
		max-width: 100%;
		height: auto;
	}

}
#result p{
	padding: 0 0 0 110px;
	width: 360px;
	font-size: 14px;
	}
@media (max-width: 767px) {
	#result p{
		width: auto;
		padding: 0 20vw 0 12vw;
		font-size: 12px;
	}
}
@media (max-width: 375px) {
	#result p{
		font-size: 10px;
	}
}
#result div.btn_result{
	position: absolute;
	left: 110px;
	bottom: 80px;
	z-index: 100;
}
@media (max-width: 767px) {
	#result div.btn_result{
		left: 50%;
		transform: translateX(-50%);
		bottom: 40px;
	}
}
#result div.btn_result a{
	display: block;
	width: 251px;
	height: 42px;
	border-radius: 6px;
	line-height: 42px;
	color: #fff;
	text-align: center;
	transition: opacity 0.4s ease-out;
}
#result div.btn_result a .fa{
	margin-right: 0.4em;
}
#result div.btn_result a:hover{
	text-decoration: none;
	opacity: 0.7;
}
.trumpet #result div.btn_result a{
	background-color: #44bbd6;
}
.fruit #result div.btn_result a{
	background-color: #e2517c;
}
.clarinet #result div.btn_result a{
	background-color: #8fbc21;
}
.sax #result div.btn_result a{
	background-color: #ee7700;
}

.fruit #photo,
.trumpet #photo,
.clarinet #photo,
.sax #photo{
	display: block;
	width: 280px;
	height: 260px;	
	position: absolute;
	bottom: 15px;
	left: 370px;
}

.fruit #human,
.trumpet #human,
.clarinet #human,
.sax #human{
	width: 90px;
	height: 260px;
	position: absolute;
	bottom: 15px;
	right: 55px;
}

.fruit #contents,
.trumpet #contents,
.clarinet #contents,
.sax #contents{
	position: absolute;
	top: 45px;
	left: 95px;
	width: 400px;
	height: 350px;
}



/* Answer - fruit
------------------------------------------------------------------------ */


/* Answer - trumpet
------------------------------------------------------------------------ */

.trumpet #human{
	width: 90px;
	height: 260px;
	position: absolute;
	bottom: 15px;
	right: 55px;
}

/* Answer - clarinet
------------------------------------------------------------------------ */

.clarinet #human{
	width: 90px;
	height: 260px;
	position: absolute;
	bottom: 15px;
	right: 55px;
}

/* Answer - sax
------------------------------------------------------------------------ */
.sax #human{
	width: 90px;
	height: 260px;
	position: absolute;
	bottom: 15px;
	right: 55px;
}

@media (max-width: 767px) {
.fruit #photo,
.trumpet #photo,
.clarinet #photo,
.sax #photo{
	display: block;
	width: 40vw;
	height: 40vw;
	bottom: auto;
	top: 48vw;
	left: auto;
	right: 10vw;
	background-size: contain !important;
}
}
@media (max-width: 320px) {
	.fruit #photo{
		top: 51vw;
	}
}
@media (max-width: 767px) {

.fruit #human,
.trumpet #human,
.clarinet #human,
.sax #human{
	width: 20vw;
	height: 58vw;
	position: absolute;
	top: 24vw;
	right: -15px;
	bottom: auto;
}
}

@media (max-width: 767px) {
	.fruit #mark,
	.trumpet #mark,
	.clarinet #mark,
	.sax #mark{
		right: -15px;
		left: auto;
		background-size: contain !important;
	}
	.fruit #balloon,
	.trumpet #balloon,
	.clarinet #balloon,
	.sax #balloon{
		top: 12vw;
		right: -15px;
		left: auto;
		background-size: contain !important;
	}
}





/* update history
--------------------------------------------------------------------------
03/31/2008 Adjustment of all css files.
mm/dd/yy Added .sample02 module.
mm/dd/yy Deleted .sample03 module.
--------------------------------------------------------------------------



1. display
2. position＇top, right, bottom, left（
3. float
4. clear
5. z-index
6. width＇max-width, min-width（
7. height＇max-height, min-height（
8. margin
9. padding
10. border
11. list-style
12. color
13. background
14. font＇font-style, font-variant, font-weight, font-size, line-height, font-family（
15. text-indent
16. text-align
17. text-decoration
18. vertical-align
19. white-space
20. 上記以外のプロパティ