﻿
/* ----------------------------------------------------------------------------- */
/* -- TOP css -- */


main {
	/*background: rgb(251,254,255);
background: linear-gradient(42deg, rgba(251,254,255,1) 0%, rgba(220,241,247,1) 100%);*/
	background: rgb(209,237,245);
background: linear-gradient(30deg, rgba(209,237,245,1) 0%, rgba(177,223,250,1) 100%);
}
.top_main {
	padding: 160px 0 0;
	background-image:url(../images/top_bg_line.png);
	background-repeat:no-repeat;
	background-position:0 5vw;
	background-size:100%;
}
.top_main dl.text {
	width: 100%;
	max-width:1160px;
	padding-top: 32px;
	padding-bottom: 80px;
	padding-left: 64px;
	margin: 0 auto;
	background-image:url(../images/top.png);
	background-repeat:no-repeat;
	background-position:91% 2vw;
	background-size: 38%;
}
.top_main dl.text dt {
	width: 50%;
	margin-left: -10px;
	padding-top: 40px;
}
.top_main dl.text dt img {
	width: 100%;
}
.top_main dl.text dd {
	font-size: 120%;
	line-height: 180%;
	padding: 1vw 0 0;
}

.main_info {
	width: 100%;
	max-width:1160px;
	margin: 0px auto 0;
	background-color: rgba(255,255,255,0.8);
	border: 1px solid #E9E9E9;
	border-radius: 20px;
}
.main_info .mi_inner {
	/*background: rgb(255,170,68);
background: linear-gradient(90deg, rgba(255,170,68,0.4) 0%, rgba(239,110,36,0.4) 100%);*/
background: rgb(255,255,255,0.6);
	border-radius: 22px;
}

.main_info .title {
	position: relative;
	text-align: center;
	padding: 56px 0 48px;
}
.main_info .title h1 {
	font-size: 190%;
	font-weight: 900;
	color: #ff7f50;
}
.main_info .title .copy {
	font-size: 110%;
	line-height: 160%;
	padding-top: 24px;
}
.main_info .title .fuki {
	position: absolute;
	top: 40px;
	left: 60px;
	display: table;
	width: 140px;
	height: 140px;
	background-color: #ff7f50;
	border-radius: 100px;
	box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
}
.main_info .title .fuki p {
	display: table-cell;
	vertical-align: middle;
	font-size: 110%;
	line-height: 160%;
	color: #FFF;
	text-indent: -0.5em;
	padding-left: 0.5em;
	font-weight: 900;
}
.main_info .title .fuki p span {
	font-size: 150%;
	vertical-align: text-bottom;
	position: relative;
}/*
.main_info .title .fuki p span:before {
	position: absolute;
	bottom: -40px;
	right: -70px;
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 0 40px;
	border-color: transparent transparent transparent #F00;
}*/

.link {
	width: 80%;
	padding-bottom: 40px;
	margin: 0 auto;
}
.link:after {
	content: ""; clear: both; height: 0; display: block; visibility: hidden;
}
.link .linkbox {
	width: 30%;
	float: left;
}
.link .linkbox:nth-child(n+2) {
	margin-left: 5%;
}
.link .linkbox p.icon {
	display: table;
	width: 150px;
	height: 150px;
	border-radius: 100px;
	margin: 0 auto;
	background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	position: relative;
}
.link .linkbox p.icon:before {
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	content: "";
	width: 123px;
	height: 123px;
	border: 4px solid #ff7f50;
	border-radius: 100px;
	opacity: 0.2;
}
.link .linkbox p.icon span {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	text-align: center;
}
.link .linkbox p.icon span img {
	width: 45%;
	transition: .2s;
}
.link .linkbox:nth-child(3) p.icon span img {
	width: 40%;
}
.link h2 {
	font-size: 140%;
	color: #000;
	font-weight: 900;
	text-align: center;
	text-shadow: 2px 2px 0px #FFF;
	padding: 24px 0;
	transition: .2s;
}
.link .setumei {
	font-size: 110%;
	line-height: 160%;
	color: #000;
	padding: 16px 0 24px 8px;
}
.link .linkbox:hover p.icon span img {
	opacity: 0.7;
}
.link .linkbox:hover h2 {
	color: #ff7f50;
}

.entry_btn {
	width: 80%;
	max-width: 760px;
	margin: 40px auto;
}
.entry_btn a {
	display: block;
	background: rgb(255,188,94);
background: linear-gradient(90deg, rgba(255,188,94,1) 0%, rgba(236,78,55,1) 100%);
	border-radius: 100px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	transition: .2s;
}
.entry_btn span {
	display: block;
	font-size: 200%;
	color: #FFF;
	font-weight: 900;
	text-align: center;
	text-shadow: 2px 2px 3px #BB4600;
	padding: 24px 16px 28px;
	background-image:url(../images/btn_bg.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size: cover;
	border-radius: 100px;
}
.entry_btn a:hover {
	opacity: 1; transform: scale(1.1,1.1);
}


.main_bnr {
	width: 100%;
	max-width:1160px;
	padding-bottom: 160px;
	margin: 80px auto 0;
}
.main_bnr:after {
	content: ""; clear: both; height: 0; display: block; visibility: hidden;
}
.main_bnr .bnr {
	display: block;
	width: 50%;
	float: left;
	height: 240px;
	position: relative;
	background-repeat:no-repeat;
	background-position:center center;
	background-size: 100%;
	transition: .5s;
}
.main_bnr .bnr:nth-child(2) {
	float: right;
}
.main_bnr .bnr div {
	position: absolute;
	bottom: -30%;
	left: 10%;
	display: block;
	width: 80%;
	padding: 4px 0 24px;
	background-color: rgba(255,255,255,0.9);
	transition: .5s;
}
.main_bnr .bnr:hover div {
	background-color: rgba(255,255,255,0.9);
}
.main_bnr .bnr h3 {
	display: block;
}
.main_bnr .bnr h3 span {
	display: block;
	font-size: 150%;
	color: #000;
	text-align: center;
	font-weight: 900;
	padding: 20px 16px 16px;
	transition: .3s;
}
.main_bnr .bnr:hover  {
	background-size: 120%;
}
.main_bnr .bnr:hover h3 span {
	text-shadow: none;
}
.main_bnr .bnr:hover h3 span {
	color:#ff7f50;
}
.main_bnr .bnr.course {
	background-image:url(../images/bnr_bg1.png);
}
.main_bnr .bnr.faq {
	background-image:url(../images/bnr_bg2.png);
}
.main_bnr .bnr p {
	display: block;
	width: 40%;
	margin: 0 auto;
	color: #FFF;
	background: rgb(255,188,94);
background: linear-gradient(90deg, rgba(255,188,94,1) 0%, rgba(236,78,55,1) 100%);
	border-radius: 100px;
	transition: .5s;
}
.main_bnr .bnr p span {
	display: block;
	font-size: 100%;
	text-align: center;
	font-weight: 900;
	padding: 10px 16px 14px;
	background-image:url(../images/btn_bg2.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size: 140%;
	border-radius: 100px;
	transition: .5s;
}
.main_bnr .bnr:hover p {
	opacity: 0.7;
}
.main_bnr .bnr h4 {
	color: #666;
	text-align: center;
	padding-bottom: 24px;
	margin: 0 auto;
}



/* PC small ------------------------------------------------------------------ */
@media screen and (min-width: 1025px) and (max-width: 1210px) {

.top_main dl.text {
	padding-top: 16px;
	padding-bottom: 56px;
}
.main_info {
	width: 94%;
	max-width: 94%;
}
.main_info .title .fuki {
	top: 50px;
	left: 20px;
	width: 120px;
	height: 120px;
}
.main_info .title .fuki p {
	font-size: 100%;
}
.main_bnr {
	width: 94%;
	max-width: 94%;
}


}


/* TABLET ------------------------------------------------------------------ */
@media screen and (min-width: 641px) and (max-width: 1024px) {

main {
	background-position:0 -15vw;
	background-size: 120%;
	margin-top: 72px;
}
.top_main {
	padding: 0;
	background-position:0 4vw;
	background-size: 130%;
}
.top_main dl.text {
	padding: 0.5vw 0 3.5vw 6%;
	background-size: 35%;
}
.top_main dl.text dt {
	width: 43%;
}
.main_info {
	width: 94%;
	max-width:94%;
	margin: 0 auto 0;
}
.main_info .title h1 {
	font-size: 4.3vw;
	line-height: 140%;
}
.main_info .title .copy {
	font-size: 2vw;
	line-height: 180%;
	text-align: left;
	padding: 3vw 5% 0;
}
.entry_btn {
	width: 70%;
	max-width: 70%;
	margin: 2vw auto;
}
.main_bnr {
	width: 94%;
	max-width:94%;
	padding-bottom: 10vw;
	margin: 5vw auto 0;
}

.main_bnr .bnr p {
	width: 60%;
}
.main_bnr .bnr p span {
	font-size: 100%;
	padding: 10px 16px 14px;
	background-size: 140%;
}

.main_info .title .fuki {
	top: 45px;
	left: 20px;
	width: 110px;
	height: 110px;
}
.main_info .title .fuki p {
	font-size: 90%;
}

}

/* SMARTPHONE ------------------------------------------------------------------ */
@media screen and (max-width: 640px) {

main {
	background-position:0 -15vw;
	background-size: 120%;
	margin-top: 64px;
}
.top_main {
	padding:0;
	background-position:0 10vw;
	background-size: 130%;
}
.top_main dl.text {
	width: 100%;
	max-width:100%;
	padding: 5vw 0 5vw 3%;
	background-position: 90% 5vw;
	background-size: 38%;
}
.top_main dl.text dt {
	width: 50%;
	padding-top: 0;
	margin-left: 4.5%;
}
.top_main dl.text dd {
	font-size: 70%;
	line-height: 160%;
	padding: 2.5vw 0 0 5%;
}

.main_info {
	width: 90%;
	max-width:90%;
	margin: 0vw auto 0;
}
.main_info .title {
	padding: 8vw 0 4vw;
}
.main_info .title h1 {
	font-size: 7vw;
	line-height: 150%;
}
.main_info .title .copy {
	font-size: 3.5vw;
	line-height: 150%;
	text-align: left;
	padding: 4vw 5%;
}
.main_info .title .fuki {
	display: none;
}

.link {
	width: 90%;
	padding-bottom: 4vw;
}
.link .linkbox {
	display: block;
	width: 100%;
	float: none;
}
.link .linkbox:after {
content: ""; clear: both; height: 0; display: block; visibility: hidden;
}
.link .linkbox:nth-child(n+2) {
	margin-left: 0;
	padding-top: 6vw;
}
.link .linkbox p.icon {
	display: table;
	width: 80px;
	height: 80px;
	float: left;
}
.link .linkbox p.icon:before {
	top: 5px;
	left: 5px;
	width: 66px;
	height: 66px;
	border: 2px solid #ff7f50;
}
.link h2 {
	float: left;
	font-size: 5vw;
	text-align: left;
	padding: 6vw 0 6vw 5%;
	border-bottom: none;
	transition: .2s;
}
.link .setumei {
	float: left;
	font-size: 4vw;
	padding: 3vw;
}

.entry_btn {
	width: 90%;
	max-width: 90%;
	margin: 5vw auto;
}
.entry_btn span {
	font-size: 5vw;
	padding: 5vw 0 7vw;
	background-size: cover;
}

.main_bnr {
	width: 90%;
	max-width:90%;
	padding-bottom: 20vw;
	margin: 15vw auto 0;
}
.main_bnr .bnr {
	display: block;
	width: 100%;
	float: none;
	height: 50vw;
}
.main_bnr .bnr div {
	
}
.main_bnr .bnr:nth-child(2) {
	float: none;
	margin-top: 18vw;
}
.main_bnr .bnr h3 span {
	font-size: 6vw;
	padding: 2vw 5% 3vw;
}

.main_bnr .bnr p {
	display: block;
	width: 80%;
	margin: 0 auto;
	color: #FFF;
	border-radius: 100px;
	transition: .5s;
}
.main_bnr .bnr p span {
	font-size: 4vw;
	padding: 7px 16px 10px;
}
.main_bnr .bnr h4 {
	font-size: 4vw;
	padding-bottom: 4vw;
}


}



/* ###################### PRINT CSS ###################### */
@media print {



}