/* visual */
@media only screen and (min-width:1300px) {
	#visual { height: 600px; }
}
#visual p { width: 45%; font-weight: 600; text-shadow: 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF; }
#visual p span { display: block; font-size: 16px; line-height: 30px; margin-top: 20px; text-shadow: 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF, 0 0 5px #FFF; }


@media only screen and (max-width:768px) {
	#visual p { width: 50%; }
	#visual p span { font-size: 2.5vw; line-height: 1.5em; margin-top: 10px; }
}



/* #information */
#information { clear: both; padding: 80px 0; background: #1E3D96; }
#information .wrap { position: relative; }
#information h3 { color: #FFF; font-size: 40px; font-weight: 900; line-height: 60px; }
#information h3 small { color: #FFF9; font-size: 32px; margin: 0 0 0 1em; }

#information p a { position: absolute; top: 20px; right: 0; color: #FFF; font-size: 16px; }
#information p a i { color: #EB6D9D; margin: 0 0 0 0.5em; }

#information ul { margin: 20px 0 0; }
#information li a { display: flex; background: #FFF; color: #000; line-height: 20px; margin: 0 0 1px; padding: 20px 40px; }
#information li a time { width: 150px; font-size: 14px; font-weight: 600; }
#information li a p { width: 100px; font-size: 14px; font-weight: 600; }
#information li a h4 { color: #1E3D96; font-size: 16px; font-weight: 600; }

@media only screen and (max-width:768px) {
	#information { clear: both; padding: 40px 20px; }
	#information .wrap { }
	#information h3 { font-size: 24px; line-height: 40px; }
	#information h3 small { font-size: 16px; line-height: 20px; margin: 0; display: block; }

	#information p a { font-size: 14px; }

	#information ul { margin: 20px 0 0; }
	#information li a { line-height: 25px; margin: 0 0 1px; padding: 10px; flex-wrap: wrap; }
	#information li a time { width: 120px; font-size: 14px; font-weight: 600; }
	#information li a p { width: 100px; font-size: 14px; font-weight: 600; }
	#information li a h4 { color: #1E3D96; font-size: 16px; font-weight: 600; }

}

/* #banner */
#banner { clear: both; padding: 80px 0 40px; }
#banner .wrap { display: flex; justify-content: center; }
#banner figure { width: 480px; max-width: 100%; margin: 0 20px 40px; }

@media only screen and (max-width:768px) {
	#banner { clear: both; padding: 40px 20px 20px; }
	#banner .wrap { display: block; }
	#banner figure { margin: 0 0 20px; }
}

/* #about */
#about { clear: both; padding: 80px 0; }
#about .wrap { }
#about h3 { border-bottom: solid 5px #EB6D9D; font-size: 40px; font-weight: 900; line-height: 80px; padding: 0; position: relative ; }
#about h3:after { content: ""; position: absolute; bottom: -5px;  left: 0; width: 40px; border-bottom: solid 5px #0096D9;  }
#about section { display: flex; justify-content: space-between; }
#about section div { width: 680px; }
#about section div p { font-size: 20px; font-weight: 600; line-height: 40px; padding: 40px 0 0; }
#about section div p b { font-size: 25px; font-weight: 900; line-height: 50px; color: #1E3D96; }

@media only screen and (max-width:768px) {
	#about { padding: 40px 20px; }
	#about .wrap { }
	#about h3 { font-size: 20px; line-height: 30px; }
	#about section { display: block; }
	#about section div { width: 100%; }
	#about section div p { font-size: 16px; line-height: 25px; padding: 20px 0; }
	#about section div p b { font-size: 20px; line-height: 30px; }
}

/* #reason */
#reason { clear: both; padding: 80px 0; }
#reason .wrap { }
#reason h3 { display: inline-block; border-left: solid 10px #A76273; background: #EB6D9D; color: #FFF; font-size: 40px; font-weight: 900; line-height: 60px; padding: 0 40px 0 30px; }
#reason ul { display: flex; justify-content: space-between; margin: 40px 0 0; }
#reason li { width: 270px; }
#reason li h4 { font-size: 20px; font-weight: 900; line-height: 20px; color: #0096D9; text-align: center; }
#reason li figure  { margin: 20px 0; }
#reason li p { font-size: 16px; font-weight: 600; line-height: 30px; }

@media only screen and (max-width:768px) {
	#reason { clear: both; padding: 40px 20px; }
	#reason .wrap { }

	#reason h3 { border-left: solid 5px #A76273; font-size: 20px; line-height: 40px; padding: 0 20px 0 15px; display: block; }
	#reason ul { display: block; margin: 0; }
	#reason li { width: 100%; margin: 40px 0 0; }
	#reason li h4 { }
	#reason li figure  { margin: 20px 0; text-align: center; }
	#reason li p { font-size: 16px; line-height: 25px; }

}

/* #skill */
#skill { clear: both; padding: 80px 0; }
#skill .wrap { }
#skill h3 { display: inline-block; border-left: solid 10px #A76273; background: #EB6D9D; color: #FFF; font-size: 40px; font-weight: 900; line-height: 60px; padding: 0 40px 0 30px; }
#skill section { display: flex; justify-content: space-between; margin: 40px 0 0; }
#skill section figure { width: 480px; order: 2; margin: 0; }
#skill section div { width:680px; }
#skill section.reading div, 
#skill section.listening div{ order: 2; }
#skill section div h4 { font-size: 24px; font-weight: 900; line-height: 50px; color: #0096D9; border-bottom: solid 4px #0096D9; display: inline-block; }
#skill section div p { font-size: 20px; font-weight: 600; line-height: 40px; }

#skill section.top div { width: 100%; }
#skill section.top div p img { float: right; margin: 0 0 0 40px; }

@media only screen and (max-width:768px) {
	#skill { clear: both; padding: 40px 20px; }
	#skill .wrap { }
	#skill h3 { border-left: solid 5px #A76273; font-size: 20px; line-height: 40px; padding: 0 20px 0 15px; display: block; }

	#skill section { display: block; margin: 40px 0 0; }
	#skill section figure { width: 100%; text-align: center; }
	#skill section div { width: 100%; }
	#skill section div h4 { font-size: 20px; line-height: 40px; ; margin: 10px 0 0; display: block; text-align: center; }
	#skill section div p { font-size: 16px; line-height: 25px; }

}


/* #interview */
#interview { clear: both; padding: 80px 0; background: #E5F4FB; }
#interview .wrap { }
#interview h3 { border-bottom: solid 5px #EB6D9D; font-size: 40px; font-weight: 900; line-height: 80px; padding: 0; position: relative ;}
#interview h3:after { content: ""; position: absolute; bottom: -5px;  left: 0; width: 40px; border-bottom: solid 5px #0096D9;  }
#interview ul { display: flex; justify-content: space-between; margin: 40px 0 0; flex-wrap: wrap; }
#interview li { width: 560px; display: flex; justify-content: space-between; background: #FFF; border-radius: 20px; margin: 0 0 40px; padding: 20px; box-sizing: border-box; }
#interview li a { width: 100%; display: flex; justify-content: space-between; color: #000; }
#interview li a figure { width: 120px; margin: 0; }
#interview li a div { width: 100%;  }
#interview li a h4 { font-size: 20px; font-weight: 900; line-height: 35px; color: #0096D9; }
#interview li a p { font-size: 16px; font-weight: 600; line-height: 30px; }
#interview li a time { font-size: 14px; line-height: 25px; background: #EB6D9D; border-radius: 4px; color: #FFF; display: inline-block; padding: 0 10px; }
@media only screen and (max-width:768px) {
	#interview { clear: both; padding: 40px 20px; }
	#interview .wrap { }
	#interview h3 { font-size: 24px; line-height: 40px; }

	#interview ul { display: block; margin: 40px 0 0; }
	#interview li { width: 100%; border-radius: 10px; margin: 0 0 20px; padding: 10px; }
	#interview li a { }
	#interview li a figure { width: 80px; margin: 0; }
	#interview li a div { width: calc(100% - 90px); }
	#interview li a h4 { font-size: 16px; line-height: 25px; }
	#interview li a p { font-size: 14px; line-height: 25px; }

}