
/**メインビジュアル**/
.mv {
	height: 40rem;
	background-image: url("../images/mv_bg.png");
    background-position: center center;
    background-repeat: repeat-x;
	background-size: auto 100%;
	background-color: #ebe6db;
	color: inherit;
	padding: 0;
	font-family: 'Kosugi Maru', sans-serif;
	position: relative;
}
.mv::before {
	content: '';
	display: block;
	background: #ebe6db;
	position: absolute;
	top: 0;
	left: 4rem;
	z-index: 1;
	width: 100vw;
	height: 100%;
	transform: translate(-100%,0) skewX(-30deg);
}
/* .mvのmarginの設定は以下へ ログイン前 */
/* layout.header.user.css */

/* .mvのmarginの設定は以下へ ログイン後 */
/* layout.header.member.css */

.mv > .container {
	height: 100%;
	background-image: url("../images/mv_illust01.png");
    background-position: left 50% bottom 1.25rem;
    background-repeat: no-repeat;
    background-size: auto 37%;
	position: relative;
	z-index: 5;
}
@media only screen and (max-width: 568px){
	.mv {
		height: auto;
		padding: 0 0.5rem;
	}
	.mv::before {left: 0;}
	.mv > .container {
		height: auto;
		background-image: url("../images/mv_illust01_sp.png");
		background-position: left 50% bottom 25vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		padding-bottom: 1rem;
	}
}

.mv_text {
	padding: 3rem 0 0;
}
.mv_text_main {
	max-width: 920px;
	margin: 0 auto 1rem;
}
.mv_text_main img {
	width: 100%;
	height: auto;
}
.mv_text_lead {
	max-width: 288px;
	margin: 0 auto 1.5rem;
}
.mv_text_lead img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 568px){
	.mv_text {padding: 1.5rem 0 0;}
	.mv_logo {padding: 1rem 2.5rem;}
	.mv_text_main {max-width: 288px;}
	.mv_text_lead {max-width: 168px;}
}

.mv_nav {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 8px;
	background: #fff;
	padding: 1.25rem 2rem;
}
.mv_nav > dt {
	position: relative;
	width:28%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1;
}
.mv_nav > dt > small {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: #f00;
	color: #fff;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1;
	transform: translate(0,-125%) rotate(-5deg);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.mv_nav > dt > span {}
.mv_nav > dd {
	width: 72%;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}

.mv_btn_register {
	display: block;
	border: solid 3px #f8b62b;
	background: #f8b62b;
	color: #fff;
	border-radius: 8px;
	padding: 1.5rem 0;
	width: calc( 50% - 0.5rem );
}
.mv_btn_register > span {
	font-size: 1.5rem;
	line-height: 1.5rem;
}
.mv_btn_register:focus,
.mv_btn_register:hover {
	color: #fff;
	opacity: 0.5;
}

.mv_btn_about {
	display: block;
	border: solid 3px #f00;
	background: #fff;
	color: #f00;
	border-radius: 8px;
	padding: 1.5rem 0;
	width: calc( 25% - 0.5rem );
}
.mv_btn_about:focus,
.mv_btn_about:hover {
	color: #f00;
	opacity: 0.5;
}
.mv_btn_about > i {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 6rem;
	height: 1.5rem;
}
.mv_btn_about > i img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	width: 100%;
	height: auto;
}
.mv_btn_about > span {
	display: inline-block;
	vertical-align: middle;
	font-size: 1.125rem;
	line-height: 1.5rem;
}

.mv_btn_login {
	display: block;
	border: solid 3px #f00;
	background: #f00;
	color: #fff;
	border-radius: 8px;
	padding: 1.5rem 0;
	width: calc( 25% - 0.5rem );
}
.mv_btn_login:focus,
.mv_btn_login:hover {
	color: #fff;
	opacity: 0.5;
}
.mv_btn_login > i {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 2.5rem;
	height: 1.5rem;
}
.mv_btn_login > i img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	width: 100%;
	height: auto;
}
.mv_btn_login > span {
	display: inline-block;
	vertical-align: middle;
	font-size: 1.5rem;
	line-height: 1.5rem;
}

@media only screen and (max-width: 568px){
	.mv_nav {
		margin-top: 10rem;
		padding: 1rem;
	}
	.mv_nav > dt {
		width: 100%;
		font-size: 1.25rem;
		text-align: center;
		margin: 0 0 0.75rem;
	}
	.mv_nav > dt > small {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1rem;
		transform: translate(0,-66.66%) rotate(-5deg);
	}
	.mv_nav > dd {width: 100%;}
	.mv_btn_register {
		padding: 1rem 0;
		width: 100%;
		margin: 0 0 0.75rem;
	}
	.mv_btn_register > span {
		font-size: 1rem;
		line-height: 1rem;
	}
	.mv_btn_about {
		padding: 1rem 0;
		width: calc( ( 100% - 0.75rem ) / 2 );
	}
	.mv_btn_about > i {
		width: 5rem;
		height: 1rem;
	}
	.mv_btn_about > span {
		font-size: 1rem;
		line-height: 1rem;
	}
	.mv_btn_login {
		padding: 1rem 0;
		width: calc( ( 100% - 0.75rem ) / 2 );
	}
	.mv_btn_login > i {
		width: 1.5rem;
		height: 1rem;
	}
	.mv_btn_login > span {
		font-size: 1rem;
		line-height: 1rem;
	}
}



.top_merit {
	padding: 5rem 0;
}
@media only screen and (max-width: 767px){
    .top_merit {
	padding: 2.5rem 0;
}
}

.top_merit_list {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.top_merit_list > dl {
	width: calc( ( 100% - 8rem ) / 3 );
	background: #fff;
	padding: 2rem 1rem 1rem;
	border-radius: 12px;
}
@media only screen and (max-width: 768px){
	.top_merit_list {padding: 0 0 0 1rem;}
	.top_merit_list > dl {width: 100%;}
	.top_merit_list > * + dl {margin-top: 2rem;}
}

.top_merit_list > dl > dt {
	position: relative;
	float: none;
	width: auto;
	font-weight: 700;
	font-family: 'Kosugi Maru', sans-serif;
	margin: 0 0 1.5rem 3rem;
}
.top_merit_list > dl > dt > label {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	overflow: hidden;
	background-color: #fff;
	text-align: center;
	padding: 0.5rem;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	transform: translate(-100%,-50%);
}
.top_merit_list > dl > dt > label > span {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-image: url("../images/top_merit_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-color: #fff;
	height: 100%;
}
.top_merit_list > dl > dt > label > span > b {
	display: block;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: #f29600;
	width: 100%;
	padding: 0.25rem 0;
}
.top_merit_list > dl > dt > label > span > i {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: #f29600;
	transform: skewX(-5deg);
	width: 100%;
}
.top_merit_list > dl > dt > em {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}
@media only screen and (max-width: 768px){
	.top_merit_list > dl > dt {margin: 0 0 1rem 2rem;}
	.top_merit_list > dl > dt > label {transform: translate(-90%,-66%) scale(0.66);}
	.top_merit_list > dl > dt > em {font-size: 1rem;}
}

.top_merit_list > dl > dd {
	float: none;
	width: auto;
	padding: 0 0 0 1rem;
}
.top_merit_list > dl > dd p {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.5rem;
}
.top_merit_list > dl > dd p + p {margin-top: 1rem;}

@media only screen and (max-width: 768px){
	.top_merit_list > dl > dd p {
		font-size: 1rem;
		line-height: 1.5rem;
	}
	.top_merit_list > dl > dd p + p {margin-top: 1rem;}
}


.top_search_area {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	max-width: 830px;
	margin: 0 auto;
}
.top_search_area > dt {
	padding: 0 0.75rem;
	margin: 0 0 0.25rem;
	width: 7.5rem;
	min-height: 3rem;
	float: none;
	background: #009bb9;
	color: #fff;
	border: solid 1px #006076;
	font-size: 1rem;
	line-height: 1rem;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.top_search_area > dt > label {margin-right: 0.5rem;}
.top_search_area > dt > label > input {
	margin-right: 0.5rem;
	vertical-align: middle;
}
.top_search_area > dt > label > span {vertical-align: middle;}
.top_search_area > dd {
	padding: 0 0.75rem;
	margin: 0 0 0.25rem;
	background: #fff;
	color: #006076;
	font-size: 0.875rem;
	line-height: 1rem;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: calc( 100% - 7.5rem );
	min-height: 3rem;
	float: none;
	border-style: solid;
	border-width: 1px;
	border-color: #006076 #006076 #006076 transparent;
}
.top_search_area > dd > label {margin-right: 0.5rem;}
.top_search_area > dd > label > input {
	margin-right: 0.5rem;
	vertical-align: middle;
}
.top_search_area > dd > label > span {vertical-align: middle;}

@media only screen and (max-width: 768px){
	.top_search_area > dt,
	.top_search_area > dd {padding: 0.75rem 0.75rem 0;}
	.top_search_area > dt > label,
	.top_search_area > dd > label {margin-bottom: 0.75rem;}
}

.top_search_select {
	max-width: 830px;
	margin: 0 auto;
}
.top_search_select .select {}
.top_search_select .select > span {
	display: block;
}
.top_search_select .select > span > select {
	width: 100%;
	height: 3rem;
	color: #006076;
	border: solid 1px;
}
.top_search_select .select > span > select option {color: inherit;}

.top_merit .box_btn,
.top_ceo .box_btn,
.top_search .box_btn {font-size: 1.125rem;}
