/* --------------------------------
	global
-------------------------------- */

@import url("default.css");

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}

html { overflow: auto; font-size: 625%; line-height: 1;}
@media (max-width: 1080px) {
	html { font-size: 600%;}
}
@media (max-width: 767px) {
	html { font-size: 565%!important;}
}
@media (max-width: 480px) {
	html { font-size: 530%!important;}
}

body {
	font-size: .14rem; line-height: 1.7; letter-spacing: .13em; overflow-x: hidden; background-color: #fff; color:@bl; font-family: "fot-cezanne-pron" , sans-serif;
	@media all and (-ms-high-contrast: none){
		font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "小塚ゴシック Pro R", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "KozGoPro-Regular", "Meiryo", "MS PGothic", "MS UI Gothic", Osaka, sans-serif;
	}
	@media (max-width: 767px){
		padding-top: 60px;
	}
	@media (max-width: 400px) {
		padding-top: 50px;
	}
}
.container-fluid { max-width: 1030px; padding-left: 15px; padding-right: 15px;}
figure { margin-bottom: 0;}
.mv_base { opacity: 0; transition: all 1s; transform: translate(0px,120px) scale(1.1);}
.mv {  opacity: 1; transform: translate(0px,0px) scale(1);}
.mv_base .container-fluid { opacity: 0;}
.mv .container-fluid { opacity: 1; transition: 2s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-duration: 1.6s; transition-duration: 1.6s; -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1); transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);}
.visible-sp { display: none;}
.page-navi-wrap { margin-top: 65px; text-align: center;}
.wp-pagenavi { text-align: center; margin-top: .25rem;}
.wp-pagenavi .pages { display: none;}
.wp-pagenavi span, .wp-pagenavi a { background: #1F5AB2; color: #fff; border: none!important; padding: 9px 10px!important; width: 42.5px; height: 42.5px; display: inline-block; vertical-align: middle; margin: 5px!important; text-align: center;}
.wp-pagenavi a:hover, .wp-pagenavi span.current { border: none; background: #E8233C!important;}
.wp-pagenavi .current { color: #fff; border-color: #E8233C!important;}
@media only screen and ( min-width: 768px) {
	a[href*="tel:"] { pointer-events: none;}
}
@media only screen and ( max-width: 767px) {
	.visible-sp { display: block;}
	.visible-pc { display: none;}
	.sp-none { display: none;}
	.sp-text-left { text-align: left!important;}
}

#panel-btn{ display: inline-block; position: relative; width: 40px; height: 40px; margin: 20px 0 10px; border-radius: 50%; background: #fff;}
#panel-btn:hover{ background: #fafafa;}
#panel-btn-icon{ display: block; position: absolute; top: 50%; left: 50%; width: 25px; height: 2px; margin: -1px 0 0 0px; background: @b-blue; transition: .2s;}
#panel-btn-icon:before, #panel-btn-icon:after{ display: block; content: ""; position: absolute; top: 50%; left: 0; width: 25px; height: 2px; background: @b-blue; transition: .3s;}
#panel-btn-icon:before{ margin-top: -9px;}
#panel-btn-icon:after{ margin-top: 7px;}
#panel-btn .close{ background: transparent;}
#panel-btn .close:before, #panel-btn .close:after{ margin-top: 0;}
#panel-btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
#panel-btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}


/* --------------------------------
	font
-------------------------------- */
.cezanne { font-family: "fot-cezanne-pron",sans-serif;}
.tsuku { font-family: "fot-tsukuardgothic-std", sans-serif;}

/* --------------------------------
	color
-------------------------------- */
@bl: #231815;
@gr: #898989;
@b-blue: #1F5AB2;
@d-blue: #001845;
@red: #E8233C;


/* --------------------------------
	common
-------------------------------- */
.c-red { color: @red;}
a.linktext {
	text-decoration: underline;
	i {
		margin-right: 5px;
	}
	&:hover {
		color: @red;
	}
}
.t-ttl {
	display: block; padding: .8rem 0 .6rem; text-align: center;
	img {
		margin-bottom: .15rem;
	}
	p {
		font-weight: bold; font-size: .15rem; letter-spacing: 0.1em; margin-right: -.4em; line-height: 1.8;
	}
	@media (max-width: 767px) {
		padding: .5rem 0 .4rem;
	}
}
figure {
	overflow: hidden;
	img {
		-moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear;
	}
	&:hover {
		img {
			-webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);
		}
	}
	&.noscale {
		img {
			transform: scale(1)!important; -ms-transform: scale(1)!important;
		}
	}
	&.noscale:hover {
		img {
			transform: scale(1)!important; -ms-transform: scale(1)!important;
		}
	}
}
ul.news_list li a { background: #fff; padding: 15px 25px; margin-bottom: 10px; position: relative; display: block; font-size: .15rem; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; }
ul.news_list li a:hover { color: #1F5AB2; text-decoration: none;}
ul.news_list li:last-child a { margin-bottom: 0; }
ul.news_list li .arrow { padding-left: 10px;}
ul.news_list li time { font-weight: 500; padding-right: 20px;}
ul.news_list li span.category { margin-right: 10px; font-size: .14rem; color: #fff; background: #1F5AB2; width: auto; padding: 1px 5px; text-align: center; letter-spacing: 0.1em; display: inline-block; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; min-width:71.61px; text-align: center;}
ul.news_list li a:hover > .category { background: @red; color: #fff;}
ul.news_list li a span.topick:after { content: url("../images/common/news_arrow.svg"); position: absolute; top: 0; bottom: 0; margin: auto; right: 30px; height: 17px; -moz-transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s;}
ul.news_list li a:hover span.topick:after { content: url("../images/common/news_arrow-hover.svg");}
@media (max-width: 520px) {
	ul.news_list li a span.topick { display: block; margin-top: 5px;}
	ul.news_list li a span.topick:after { right: 10px; bottom: 5px; top: auto;}
}
.default-btn {
	text-align: center; display: block; margin-top: 25px;
	a {
		background: #1F5AB2; color: #fff; position: relative; min-width: 162px; text-align: center; padding: 7px 20px; display: inline-block;
		&:hover {
			background: @red;
		}
	}
	&.active {
		a { background: @red;}
	}
}
.btn-cut {
	position: relative; padding-left: 20px; padding-right: 20px; transition: .3s;
	&:after {
		content: ""; position: absolute; width: 10px; height: 10px; background-image: url(../images/common/btn-cut.svg); background-position: center; background-size: cover; right: 3px; bottom: 3px;
	}
}
.hero-block {
	background-position: center; background-size: cover; position: relative; align-items: center; display: flex; justify-content: center; height: 300px; padding: 0 30px;
	img {
		position: relative; z-index: 1;
	}
	&:after {
		content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(../images/top/slick-bg.svg);
	}
	@media (max-width: 767px) {
		height: 200px;
	}
}
.blue-mask {
	position: relative;
	&:after {
		content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #1F5AB2; opacity: 0.2; transition: 0.3s;
	}
}
.scroll-top {
	position: fixed; right: 25px; bottom: 25px; width:100px; height: 150px; z-index: 998;
	@media (max-width: 767px) {
		width: 70px; height: 104px; right: 15px; bottom: 15px;
	}
}
.blue-bg {
	/*background-image: url(../images/common/blue-bg.svg);*/ background-position: top; background-size: cover; height: 160px; text-align: center; margin-top: 30px;
}
.b-crumb { text-align: right; max-width: 1030px; margin: auto;
	.breadcrumb { background: none; padding: .2rem .1rem; float: right; margin-bottom: 0;
		.breadcrumb-item {
			&:before { padding-right: .08rem;}
			&.active { padding-left: .08rem; color: @b-blue;
				&:before { content: ">";}
			}
		}
	}
}
.bg_stack {position: relative; padding-bottom: 1rem; background: #EAEFF4; z-index: -3;
	&:before {  content: ""; background-image: url("../images/top/slick-bg.svg")no-repeat; background-size: cover; width: 100%; height: 600px; position: absolute; top: 0; left: 0; right: 0; margin: auto; background-color: rgba(6, 0, 45, 0.4); z-index: -1;}
	&:after{ content: ""; background: url("../images/about/bg_block.jpg")no-repeat; background-size: cover; width: 100%; height: 600px; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: -2;}
}
ul.card-wrap {
	li {
		> span {
			display: block; position: relative;
			&:after {
				content: ""; position: absolute; right: -12px; bottom: -12px; width: 100%; height: 100%; background-image: url(../images/top/slick-bg.svg); background-color: #d3deef;
			}
			.card {
				border-radius: 0; margin-bottom: 40px; border: none; position: relative; z-index: 1;
				.triangle {
					text-align: center; color: #fff; position: absolute; top: -30px; left: 0; right: 0; margin: auto; width: 100%; line-height: 1.3; z-index: 1;
					small {
						display: block; position: relative; z-index: 1; font-size: 13px;
					}
					strong {
						display: block; position: relative; z-index: 1; font-size: 23px;
					}
					&:before {
						content: ""; border-right: 60px solid transparent; border-top: 60px solid #F98219; border-left: 60px solid transparent; margin: auto; position: absolute; left: 0; right: 0; top: -3px; width: 120px; transition: .3s;
					}
				}
				figure {
					img {
						width: 100%;
					}
				}
				.card-body {
					padding: .2rem .15rem; text-align: center;
					.card-title {
						font-size: .2rem; line-height: .26rem; margin-bottom: .15rem; font-weight: bold; transition: .3s; position: relative; display: inline-block; font-family: "fot-tsukuardgothic-std", sans-serif;
						span {
							position: relative; z-index: 1;
						}
						&:after {
							content: ""; left: -3%; width: 0; height: 8px; bottom: -3px; background: #FFE000; position: absolute; transition: .3s;
						}
					}
					.card-text {
						font-size: .13rem; line-height: .18rem; letter-spacing: .05em;
					}
					.btn {
						font-size: .16rem; line-height: .2rem; letter-spacing: .1em; color: #fff; background: #1F5AB2; border-radius: 0; max-width: 160px; width: 100%; margin-top: .2rem; padding: .05rem .15rem;
					}
				}
			}
			&:hover {
				.card {
					.triangle {
						&:before {
							border-top: 60px solid @red;
						}
					}
					.card-body {
						.card-title {
							color: @red;
							&:after {
								width: 106%;
							}
						}
						.btn {
							background: @red;
						}
					}
				}
			}
		}
	}
}
ul.car-list { position: relative; padding-bottom: 25px;
	li {
		a { display: block; background: @b-blue; padding: 10px; margin-bottom: .2rem; position: relative; /*transition: all .3s;*/ overflow: hidden;
			ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; text-align: left; align-items: center;
				li { font-size: .22rem; line-height: 1.4; letter-spacing: .05em; color: #fff; font-weight: bold; font-family: "fot-tsukuardgothic-std", sans-serif;
					&:nth-child(1) { -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%;}
					&:nth-child(2) { -ms-flex: 0 0 70%; flex: 0 0 70%; max-width: 70%; display: inline-block; vertical-align: middle; padding-left: 15px;}
				}
			}
			&:after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #ffffff transparent;}
			&:hover { background: @red;}
		}
	}
	@media (max-width: 767px) {
		> li {
			-ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important;
			a {
				margin-bottom: .05rem;
			}
		}
	}
}
.box-shadow {
	img { box-shadow: 4px 4px 10px -5px #cccccc;}
}
.sp-visible { display: none;}
@media (max-width:767px) {
	.sp-none { display: none;}
	.sp-visible { display: inline-block;}
}
.lightbox { padding-top: 40px;}
.lb-data .lb-number { display: none!important;}
.lb-dataContainer { width: 1300px; position: absolute; top: 0; left: 0; right: 0;}
.lb-outerContainer { width: 95%!important; height: auto!important; max-width: 1300px;}
.lb-outerContainer .lb-image { width: 100%!important; height: auto!important; max-width: 1300px;}


/* --------------------------------
	header
-------------------------------- */
header { padding-top: 30px; padding-bottom: 52px; position: relative;
	.container-fluid { padding-bottom: .2rem;
		.head-menu-area { float: right; padding-bottom: .2rem;
			.form-area {
				width: 200px; display: inline-block; padding-right: 25px; position: relative; vertical-align: bottom;
				.search {
					position: relative; height: 28px; width: 100%; border: none; background: none; font-size: .12rem; letter-spacing: 0.12em; border-bottom: 1px solid @bl;
				}
				.submit-btn {
					position: absolute; top: 0px; right: 0; background-image: url(../images/common/search_icon.svg); background-position: center 8px; background-repeat: no-repeat; height: 25px; width: 25px; border: none; border-radius: 2px; cursor: pointer;
				}
			}
			.text-sizing {
				padding-left: 25px; display: inline-block;
				li { display: inline-block; font-size: .13rem; line-height: 1; vertical-align: middle;
					&:not(.text) { font-size: .12rem; line-height: .15rem; background: #EAEFF4; border-radius: 50%; color: @gr; text-align: center; padding: 3px; vertical-align: middle;
						span { position: relative; left: 1px;}
					}
					&.size:not(.active) {
						cursor: pointer;
					}
				}
				li.size.active { background: @b-blue; color: #fff;}
			}
		}
		ul.list-inline { float: right;
			li {
				display: inline-block; padding-left: 15px; vertical-align: bottom;
				a {
					display: block;
					svg {
						display: block;
						* { transition: .3s;}
						&:hover {
							.cls-1 { fill: @red;}
							.cls-3  { stroke: @red;}
						}
					}
				}
				&:nth-child(2) { padding-left: 12px;}
				&:nth-child(3) { padding-left: 20px; vertical-align: bottom;}
			}
		}
	}
	.gnav {
		position: absolute; bottom: 0; left: 0; width: 100%;
		.container-fluid {
			padding-bottom: 0;
			ul { display: block; font-size: 0; letter-spacing: 0; width: 100%; border-top: 1px solid @gr; padding: .15rem 0; font-size: 0; line-height: 0;
				li { font-size: 15px; line-height: 21px; display: inline-block; text-align: center; position: relative;
					a { font-weight: bold; position: relative; transition: .3s; overflow: hidden;
						&:after {
							content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: @red; transition: .3s;
						}
						&:hover {
							color: @red;
							&:after {
								width: 100%;
							}
						}
					}
					&:before {
						content: ""; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background: @gr; width: 1px; height: 17px;
					}
					&:last-child:before {
						content: ""; background: none;
					}
				}
			}
		}
		&.is-fixed {
			position: fixed; left: 0; top: 0; width: 100%; background: #fff; height: 52px;
			.container-fluid {
				ul {
					border: none;
				}
			}
		}
	}
	@media (max-width:911px) {
		.container-fluid {
			.top_wrap { padding-bottom: 15px;
				.col-md-7 {
					ul.list-inline { display: inline-flex;
						li { padding-left: 5px;}
					}
				}
			}
		}
	}
	@media (max-width:767px) {
		.container-fluid {
			.navbar-brand {
				padding: 0;
			}
			.top_wrap {
				.col-md-7 {
					.head-menu-area { display: none;}
					ul.list-inline { display: block;
						li { padding-left: 5px; display: none;
							&:nth-child(3) { display: block;}
						}
					}
				}
			}
		}
	}
}

.navbar-expand-md>.container,
.navbar-expand-md>.container-fluid { padding-left: 15px; padding-right: 15px; width: 100%;
	.row { width: 100%; margin: auto;}
}

.navbar { padding: .05rem .15rem;}
.navbar-toggler { padding: 10px; font-size: .125rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: .025rem; position: absolute; top: 15px; right: 35px;
	&:focus { outline: none;}
	@media (max-width: 400px) {
		top: 9px; right: 33px;
	}
}
.navbar-header { background: #fff; border: none;}
.navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 0; padding-right: 5px; padding-left: 15px; font-size: .125rem; line-height: inherit; white-space: nowrap; display: inline-block;
	img {
		height: 35px; position: absolute; left: 0; top: 8px;
		@media (max-width: 400px) {
			height: 27px;
		}
	}
}
.telnum {
	position: absolute; display: block; right: 67px; width: 170px; top: 16px;
	@media (max-width: 400px) {
		right: 64px; width: 130px; top: 10px;
	}
}
#navbarNavAltMarkup {
	position: absolute; left: 0; right: 0; top: 55px; background: @b-blue;
	@media (max-width: 400px) {
		top: 45px;
	}
}
.navbar-default { border: none;
	.navbar-toggle { background: #639089; border: none; margin-top: 15px;
		.icon-bar { background-color: #fff;}
	}
}
.form-inline.col-6 { padding-left: 5px; padding-right: 0px; position: relative; top: 4px;}
.navbar { max-height: 90vh;
	.navbar-nav { background: @b-blue; flex-direction: unset!important; align-items: center; justify-content: center;
		li { position: relative; text-align: center; font-size: .18rem; min-height: 58px; padding: 15px 0 10px; position: relative; border-bottom: 1px solid #08499e;
			&:nth-child(1):after,
			&:nth-child(3):after,
			&:nth-child(5):after { content: ""; position: absolute; right: 0; bottom: 0; top: 0; margin: auto; border-right: 1px dotted #fff; height: 60%;}
			&:last-child { width: 100%!important; -ms-flex: 0 0 100%!important; flex: 0 0 100%!important; max-width: 100%!important; text-align: center;}
			a {
				color: #fff; display: inline-block; vertical-align: middle; font-size: .18rem; line-height: 1.8; font-weight: bold;
				@media (max-width: 400px) {
					font-size: .15rem;
				}
			}
			p { display: inline-block;}
		}
	}
	.link-th { padding: 25px 0 15px; text-align: center;
		a { display: inline-block; width: auto; padding: 0 10px; text-align: center; position: relative; color: #fff;
			&:after { display: block; content: ""; position: absolute; right: 0; height: 100%; top: 0; border-right: 1px solid #fff;}
			&:last-child:after { display: none;}
		}
	}
	.sns { max-width: 130px; margin: auto; padding: 10px 0px;
		li { width: 50%; float: left; text-align: center; font-size: .17rem;
			img { width: 30px;}
		}
	}
	.form-area { width: 100%; display: inline-block; padding: 15px 15px 50px;
		form { position: relative; width: 85%;
			.search { position: relative; height: 50px; width: 98%; border: none; background: #eaeaea; padding: 6px 15px 5px 15px; font-size: .17rem; letter-spacing: 0.12em;
				&:focus { outline: none;}
			}
		}
		.submit { position: absolute; top: 0px; right: -20%; background-image: url(../images/common/icon-search.png); background-position: center 19px; background-repeat: no-repeat; height:50px; width: 20%; border: none; border-radius: 2px; background-color: @red;}
	}
}

@media (max-width:767px) {
	header { padding: 0;
		.container-fluid { padding-bottom: 0;}
	}
	.fixed-top { padding-left: 0; padding-right: 0; height: 60px; background: #fff;
		.container-fluid {
			position: relative;
		}
	}
}
@media (max-width: 400px) {
	.fixed-top {
		height: 50px;
	}
}


/* --------------------------------
	footer
-------------------------------- */
footer {
	a { color: #fff!important;}
	.fot {
		background: @b-blue; padding: 50px 0 45px;
		@media (max-width: 767px) {
			padding: 30px 0 25px;
		}
		.container-fluid {
			max-width: 870px; margin: auto;
			.logo-area {
				.f-logo {
					margin-bottom: .15rem;
				}
				ul {
					li {
						font-size: .14rem; line-height: .241rem; letter-spacing: .025em; color: #fff;
						@media (max-width: 991px) {
							&:last-child {border-bottom: 1px solid #fff; margin-bottom: 10px; padding-bottom: 10px;}
						}
					}
				}
			}
			.nav-area {
				.f-nav {
					float: right; width: 100%;
					@media (max-width: 991px) {
						margin: 0;
					}
					> li {
						padding-left: .1rem; border-left: 1px solid #fff; font-family: "fot-tsukuardgothic-std", sans-serif;
						&:nth-child(1) {
							-ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%;
						}
						&:nth-child(2) {
							-ms-flex: 0 0 29%; flex: 0 0 29%; max-width: 29%;
						}
						&:nth-child(3) {
							-ms-flex: 0 0 36%; flex: 0 0 36%; max-width: 36%;
						}
						ul {
							li {
								font-size: .14rem; line-height: .25rem;
								a {
									color: #fff; transition: .3s;
									&:before {
										content: url("../images/common/l_arrow.svg"); padding-right: 4px;
									}
									&:hover {
										color: @red;
									}
									&.t-blank:after {
										content: url("../images/common/t_brank.svg"); padding-left: 5px;
									}
								}
							}
						}
					}
					@media (max-width: 991px) {
						float: none;
						> li {
							border-left: none; border-bottom: 1px solid #fff; padding: 0; margin-bottom: 10px; padding-bottom: 10px;
							&:nth-child(1) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							&:nth-child(2) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							&:nth-child(3) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							ul {
								font-size: 0; letter-spacing: 0; margin: 0 -5px;
								li {
									width: 33.333%; display: inline-block; font-size: .14rem; letter-spacing: .05em; padding: 0 5px;
									a {
										display: block;
									}
								}
							}
						}
					}
					@media (max-width: 767px) {
						float: none;
						> li {
							border-left: none; border-bottom: 1px solid #fff; padding: 0; margin-bottom: 10px; padding-bottom: 10px;
							&:nth-child(1) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							&:nth-child(2) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							&:nth-child(3) {
								-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
							}
							ul {
								font-size: 0; letter-spacing: 0; margin: 0 -5px;
								li {
									width: 50%; display: inline-block; font-size: .12rem; letter-spacing: .05em; padding: 0 5px;
									a {
										display: block;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.copyright { background: @d-blue;
		p { font-size: .12rem; line-height: .29rem; letter-spacing: -.025em; color: #fff; text-align: center; padding: 5px 0;}
	}
}


/* --------------------------------
	home
-------------------------------- */
#home {
	.fv {
		.rel {
			position: relative; max-width: 1160px;
			.bt-scroll {
				position: absolute; left: -15px; bottom: 15px; z-index: 2; animation: key1 1s ease infinite alternate;
				@keyframes key1{
					0% {transform: translateY(0px);}
					100% {transform: translateY(-10px);}
				}
			}
			.fv-contact {
				position: absolute; right: 15px; top: -100px; bottom: 0; margin: auto; z-index: 3;
				.contact-cls-1 {
					transition: .3s;
				}
				&:hover {
					.contact-cls-1 {
						fill: @red;
					}
				}
				@media (max-width: 767px) {
					display: none;
				}
			}
		}
		.slick-list {
			overflow: visible;
			.slick-slide {
				position: relative;
				span {
					width: 39.4%; height: 40.703%; background-repeat: no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0; z-index: 1;
				}
			}
			&:before {
				content: ""; width: 39.4%; height: 40.703%; background-image: url(../images/top/main-left.svg); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top: 0; z-index: 1;
			}
		}
		.slick-dotted.slick-slider {
			margin-bottom: 0; overflow: visible;
		}
		.slick-next {
			background-image: url(../images/top/slick-bg.svg); background-color: #d3deef; top: 0; bottom: 0; left: 100%; right: auto; width: 100%; height: 100%; transform: none; z-index: 1;
			&:before {
				content: ""; background-image: url(../images/top/slick-right.svg); background-size: cover; width: 35px; height: 36px; display: block; margin-left: 15px;
			}
		}
		.slick-prev {
			background-image: url(../images/top/slick-bg.svg); background-color: #d3deef; top: 0; bottom: 0; right: 100%; left: auto; width: 100%; height: 100%; transform: none; z-index: 1;
			&:before {
				content: ""; background-image: url(../images/top/slick-left.svg); background-size: cover; width: 35px; height: 36px; display: block; margin-right: 15px; margin-left: auto;
			}
		}
		.slick-dots {
			bottom: .2rem;
			li {
				margin: 0 2px;
				button {
					&:before {
						color: #fff; opacity: 1;
					}
				}
				&.slick-active {
					button {
						&:before {
							color: #1F5AB2;
						}
					}
				}
			}
			@media (max-width: 767px) {
				bottom: .1rem;
			}
		}
	}
	.f-news {
		a {
			display: block; color: #fff; background: @b-blue; padding: .15rem 0; transition: all .3s;
			@media (max-width: 767px) {
				padding: .1rem 0;
			}
			&:hover {
				background: @red;
			}
			span.container-fluid {
				display: block; max-width: 1040px; margin: auto;
				h3 {
					font-size: .16rem; line-height: .16rem; color: #fff; letter-spacing: .025em; display: inline-block; padding: 5px 0; padding-right: .25rem; border-right: 1px solid #fff;
					&:after {
						content: ""; position: static; width: 0; height: 0; background: none;
					}
				}
				span {
					display: inline-block;
				}
				time {
					display: inline-block; padding-left: .2rem; padding-right: .4rem;
				}
				span.category {
					padding: 0px 5px; font-size: .12rem; letter-spacing: .025em; color: #fff; position: relative; top: -1px;
				}
				span.category.topics {
					background: #F98219; margin-right: .1rem;
				}
				span.title {
					font-size: .15rem;
				}
				@media (max-width: 767px) {
					time {
						padding-right: .2rem;
					}
					.float-right {
						display: none!important;
					}
				}
			}
		}
	}
	.information {
		background: #EAEFF4; padding-bottom: 50px;
		ul {
			li {
				.wrapper {
					display: block; position: relative;
					&:after {
						content: ""; position: absolute; right: -12px; bottom: -12px; width: 100%; height: 100%; background-image: url(../images/top/slick-bg.svg); background-color: #d3deef;
					}
					.card {
						border-radius: 0; margin-bottom: 40px; border: none; position: relative; z-index: 1;
						.triangle {
							text-align: center; color: #fff; position: absolute; top: -30px; width: 100%; line-height: 1.3; z-index: 1;
							small {
								display: block; position: relative; z-index: 1; font-size: 13px;
							}
							strong {
								display: block; position: relative; z-index: 1; font-size: 23px;
							}
							&:before {
								content: ""; border-right: 60px solid transparent; border-top: 60px solid #F98219; border-left: 60px solid transparent; margin: auto; position: absolute; left: 0; right: 0; top: -3px; width: 120px; transition: .3s;
							}
						}
						figure {
							img {
								width: 100%;
							}
						}
						a {
							color: #fff!important;
						}
						.card-body {
							padding: .2rem .15rem; text-align: center;
							.card-title {
								font-size: .2rem; line-height: .26rem; margin-bottom: .15rem; font-weight: bold; transition: .3s; position: relative; display: inline-block; font-family: "fot-tsukuardgothic-std", sans-serif;
								span {
									position: relative; z-index: 1;
								}
								&:after {
									content: ""; left: -3%; width: 0; height: 8px; bottom: -3px; background: #FFE000; position: absolute; transition: .3s;
								}
							}
							.card-text {
								font-size: .13rem; line-height: .18rem; letter-spacing: .05em;
							}
							.btn {
								font-size: .16rem; line-height: .2rem; letter-spacing: .1em; color: #fff; background: #1F5AB2; border-radius: 0; max-width: 160px; width: 100%; margin-top: .2rem; padding: .05rem .15rem;
							}
						}
					}
					&:hover {
						.card {
							.triangle {
								&:before {
									border-top: 60px solid @red;
								}
							}
							.card-body {
								.card-title {
									color: @red;
									&:after {
										width: 106%;
									}
								}
								.btn {
									background: @red;
								}
							}
						}
					}
				}
			}
		}
	}
	.training {
		background-image: url(../images/top/slick-bg.svg); position: relative; margin-bottom: 50px;
		.whitebg {
			display: block; position: absolute; bottom: 0; width: 100%;
			img {
				width: 100%;
			}
		}
		.hero {
			background-image: url(../images/top/training-bg.jpg); background-position: center; background-size: cover; padding: 70px 15px 30px; text-align: center; color: #fff;
		}
		ul {
			font-size: 0; letter-spacing: 0; margin: 0 -7px; padding-bottom: 50px;
			li {
				width: 20%; display: inline-block; font-size: .14rem; position: relative; margin-top: 50px; padding: 0 7px; vertical-align: top;
				> a {
					 display: block; background: #fff; padding: 35px 5px 0; position: relative; box-shadow: 3px 3px 10px #a5a5a5;
					 .icon {
						 position: absolute; width: 55px; height: 55px; border-radius: 50%; border: 2px solid #fff; background: #F98219; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: -25px; margin: auto; transition: .3s;
					 }
					 span {
						 width: 80%; background: #1F5AB2; color: #fff; display: block; text-align: center; font-weight: bold; padding: 5px 10px; position: relative; top: 15px; margin: auto; transition: .3s; font-family: "fot-tsukuardgothic-std", sans-serif;
						 &:before {
							 content: ""; border-right: 10px solid transparent; border-bottom: 15px solid @red; border-left: 10px solid transparent; position: absolute; left: 0; right: 0; width: 15px; top: -15px; margin: auto; opacity: 0; transition: .3s;
						 }
					 }
					 &:hover {
						 .blue-mask {
							 &:after {
								 opacity: 0;
							 }
						 }
						 .icon {
							 background: @red;
						 }
						 span {
							 background: @red;
							 &:before {
								 opacity: 1;
							 }
						 }
					 }
				}
				@media (max-width: 991px) {
					width: 33.33333%;
					figure {
						img {
							width: 100%;
						}
					}
				}
				@media (max-width: 520px) {
					width: 50%;
				}
			}
		}
		.btn-area {
			position: relative; bottom: -16px; z-index: 1;
		}
	}
	.pickup {
		.pdb60 { padding-bottom: 60px!important; }
		.t-ttl {
			padding-bottom: 20px;
		}
		.bg {
			img {
				width: 100%;
			}
		}
		.importwrapper {
			margin-bottom: 30px;
			.ttl {
				display: flex; background: #1F5AB2; justify-content: space-between; border-radius: 10px 10px 0 0; padding: 15px; font-weight: bold;
				.name { color: #fff; }
				.links a {
					 color: #fff!important;
				 }
			}
			ul {
				padding: 0; border: 2px solid #1F5AB2; border-top: none; background: #fff;
			}
		}
		.bubble-bg {
			background-image: url(../images/top/slick-bg.svg); padding-bottom: 25px;
			.container-fluid.mw900 {
				max-width: 900px;
			}
			.nmg {
				font-size: 0; letter-spacing: 0; margin: -20% -25px 0;
				li {
					width: 50%; font-size: .23rem; display: inline-block; text-align: center; padding: 0 25px; margin-bottom: 30px;
					> a {
						position: relative; display: block;
						&:before {
							content: ""; position: absolute; right: -12px; bottom: -12px; width: 100%; height: 100%; background-image: url(../images/top/slick-bg.svg); background-color: #d3deef;
						}
						.card-block {
							position: relative; z-index: 1; background: #fff; padding: 12px 12px 25px; position: relative;
							&:after {
								content: ""; border-bottom: 15px solid #1F5AB2; border-left: 15px solid transparent; margin: auto; position: absolute; right: 5px; bottom: 5px; width: 15px; transition: .3s;
							}
							.label {
								width: 70px; height: 70px; position: absolute; background-image: url(../images/top/pickup-label.svg); background-position: center; background-size: cover; left: -10px; top: -10px; z-index: 1;
							}
							figure {
								margin-bottom: 20px; position: relative;
								&:after {
									content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #1F5AB2; opacity: 0.2; transition: .3s;
								}
							}
							.ttl {
								font-weight: bold; color: #1F5AB2; position: relative; display: inline-block; transition: .3s; font-family: "fot-tsukuardgothic-std",sans-serif;
								span {
									position: relative; z-index: 1;
								}
								&:before {
									content: ""; position: absolute; bottom: -4px; height: 8px; width: 101%; background: #FFE000; margin: auto; left: -1%;
								}
							}
						}
						&:hover {
							.card-block {
								&:after {
									border-bottom: 15px solid @red;
								}
								.label {
									background-image: url(../images/top/pickup-label-hover.svg);
								}
								figure {
									&:after {
										opacity: 0;
									}
								}
								.ttl {
									color: @red;
								}
							}
						}
					}
					@media (max-width: 767px) {
						width: 100%;
					}
				}
			}
			.news-area {
				.t-ttl {
					img { margin-bottom: 0;}
				}
			}
		}
	}
	.access {
		.t-ttl {
			padding-top: 1rem; padding-bottom: .2rem; margin-bottom: 0; position: relative;
			&:before {
				content: ""; border-right: 30px solid transparent; border-top: 30px solid #fff; border-left: 30px solid transparent; position: absolute; top: 100%; left: 0; right: 0; margin: auto; width: 55px;
			}
			@media (max-width: 767px) {
				padding-top: .5rem;
			}
		}
		iframe {
			display: block;
		}
	}
}


/* --------------------------------
	safety
-------------------------------- */
#safety {
	.container-fluid {
		max-width: 1160px;
		.slider { max-width: 900px; margin: auto;
			.slick-slide:focus { outline: none;}
		}
	}
	.p1 {
		.t-ttl {
			padding-top: .25rem;
		}
	}
	.slide-wrap {
		padding: 50px 0; background-image: url(../images/top/slick-bg.svg); background-color: #1F5AB2;
		.slick-slide {
			padding: 5px;
		}
		.slick-prev {
			left: -50px;
			&:before {
				content: ""; background-image: url(../images/top/slick-left.svg); background-size: cover; width: 35px; height: 36px; display: block; margin-left: auto;
			}
		}
		.slick-next {
			right: -35px;
			&:before {
				content: ""; background-image: url(../images/top/slick-right.svg); background-size: cover; width: 35px; height: 36px; display: block;
			}
		}
	}
	.p2 {
		.gray-block {
			background: #EAEFF4;
			.hero-block {
				height: 400px; padding-bottom: 160px;
			}
			.slide-wrap {
				background: none; padding: 0; margin-top: -165px;
			}
			p {
				text-align: center; font-size: .18rem; letter-spacing: .075em; margin-top: 50px; font-weight: bold;
			}
		}
	}
}


/* --------------------------------
	about
-------------------------------- */
#about {
	.p1 {
		.container-fluid {
			h3 { padding-top: .2rem; padding-bottom: .75rem;
				img { margin-bottom: .3rem;}
				strong { margin-bottom: .1rem;}
				p { font-size: .16rem; line-height: 1.75;}
			}
		}
	}
	.p2 { position: relative; padding-bottom: 1rem; background: #EAEFF4; z-index: -3;
		&:before {  content: ""; background-image: url("../images/top/slick-bg.svg")no-repeat; background-size: cover; width: 100%; height: 600px; position: absolute; top: 0; left: 0; right: 0; margin: auto; background-color: rgba(6, 0, 45, 0.4); z-index: -1;}
		&:after{ content: ""; background: url("../images/about/bg_block.jpg")no-repeat; background-size: cover; width: 100%; height: 600px; position: absolute; top: 0; left: 0; right: 0; margin: auto; z-index: -2;}
		.container-fluid {
			h3 { padding: .7rem 0 .2rem;}
			.table-wrap {
				dl { width: 100%; border-bottom: 2px solid #EAEFF4; background: #fff; display: table;
					dt { font-size: .18rem; line-height: 1.445; letter-spacing: .1em; color: @b-blue; width: 151px; padding: .25rem; vertical-align: middle; display: table-cell; background: #C7D6EC;}
					dd { font-size: .18rem; line-height: 1.445; letter-spacing: .075em; font-weight: 500; display: block; vertical-align: middle; display: table-cell; text-align: left; padding-left: .45rem;
						&:after{ display: block; content: ""; clear: both;}
					}
				}
			}
		}
	}
	@media (max-width:767px) {
		.p2 {
			.container-fluid {
				.table-wrap {
					dl { display: block;
						dt { width: 100%; display: block;}
						dd { width: 100%; display: block; padding-left: .25rem; margin-left: 0; padding:.25rem;}
					}
				}
			}
		}
	}
}


/* --------------------------------
	privacy
-------------------------------- */
#privacy {
	.p1 {
		.container-fluid {
			h3 { padding-top: .2rem; padding-bottom: .7rem;
				img { margin-bottom: .4rem;}
			}
		}
	}
	.p2 { background: #EAEFF4; padding: 1rem .15rem 1.05rem;
		.container-fluid { max-width: 930px; margin: auto;
			> ul { background: #fff; padding: .65rem .55rem;
				> li { padding-bottom: .45rem;
					h4 { font-size: .22rem; line-height: 1.8; color: @b-blue; font-weight: bold; padding-bottom: .1rem;}
					p { font-size: .16rem; line-height: 1.85; letter-spacing: .065em;}
					ul { padding-top: .2rem;
						li { font-size: .16rem; line-height: 1.95; letter-spacing: .065em;}
					}
				}
			}
		}
	}
	@media (max-width:767px) {
		.p2 {
			.container-fluid {
				> ul { padding: .3rem .2rem;}
			}
		}
	}
}


/* --------------------------------
	lesson
-------------------------------- */
#lesson {
	.p1 { padding-bottom: 30px;
		.container-fluid {
			h3 { margin-bottom: .15rem; position: relative;
				&:before { content: ""; width: 100%; height: 1px; position: absolute; top: 43px; left: 0; right: 0; background: #333;}
				img { margin-bottom: .2rem; background: #fff; z-index: 1; position: relative;}
				p { font-size: .2rem; line-height: .28rem; letter-spacing: .1em; font-weight: bold;
					.c-red { color: @red;}
				}
			}
			> ul { position: relative; padding-bottom: 25px;
				&:after { content: ""; width: calc(100% - 20px); height: 1px; margin: auto; background: #333; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
			}
		}
	}
	.p2 { padding-top: 35px; padding-bottom: 35px;
		h3 {
			img { margin-bottom: .3rem;}
			p { font-size: .16rem; line-height: .28rem; letter-spacing: .065em; font-weight: bold;}
		}
	}
	.p3 { padding-bottom: 0;
		&.bg_stack { z-index: 1;}
		&.bg_stack:after { background: url(../images/lesson/bg_block.jpg) no-repeat; background-size: cover;}
		.container-fluid {
			h3 { padding-bottom: 70px;
				img { margin-bottom: .25rem;}
				p { font-size: .16rem; line-height: .28rem; letter-spacing: .055em; color: #fff;}
			}
			.row {
				.col-12 { margin-bottom: .3rem;
					.card { padding: 25px;
						.card-body { padding: 0; padding-top: .25rem;
							.row { max-width: 790px; margin: auto;
								.col-md-6 {
									.card-title { font-size: .21rem; line-height: 1.4; letter-spacing: 0; color: @b-blue; padding-top: 0;
										&:after { content: ""; background: none; width: 0;}
									}
									p { font-size: .18rem; line-height: 1.3; letter-spacing: .05em; font-weight: 500;}
								}
							}
						}
					}
				}
				.col-md-4 {
					.card { padding: 10px;
						.card-body { padding: 0; padding-top: .25rem; padding-bottom: .25rem;
							.card-title { font-size: .21rem; line-height: 1.6; letter-spacing: 0; color: @b-blue;
								&:after { background: none; width: 0;}
							}
							p { font-size: .2rem; line-height: 1.3; letter-spacing: .05em; font-weight: 500;}
						}
					}
				}
			}
		}
		.pdf-wrap { position: relative; width: 100%; z-index: 1;
			.pdf-b { max-width: 720px; margin: auto; background: #fff; margin-top: .55rem;
				h5 { background: @b-blue; font-size: .26rem; line-height: .47rem; color: #fff; text-align: center;}
				> ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; text-align: left; padding-top: 20px; padding-bottom: 20px;
					li { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 35px; padding-right: 35px;
						&:first-child { border-right: 1px dotted #333;}
						ul { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; text-align: center; max-width: 270px; margin: auto;
							li { padding-left: 0; padding-right: 0; border: none; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%;
								&:first-child { border: none;}
								strong {
									display: inline-block; font-size: 0.15rem; line-height: 0.27rem; letter-spacing: 0.05em; color: #fff; background: #1F5AB2; padding: 2px 10px 3px; margin-bottom: .35rem;
									&.mgb0 {
										background-color: @red;
									}
								}
								a {
								}
								&:nth-child(2) {
									a {
										strong { background: @red;}
									}
								}
							}
							@media (max-width: 767px) {
								li {
									strong {
										margin-bottom: 0; width: 90%; margin: auto; display: block;
									}
								}
							}
						}
						p { font-size: .18rem; line-height: .25rem; letter-spacing: .1em;}
					}
				}
			}
			&:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: url("../images/lesson/triangle1.svg")no-repeat; background-size: cover; width: 100vw; height: 50px; z-index: -1;}
			&:after { content: ""; position: absolute; top: 240px; bottom: 0; left: 0; right: 0; margin: auto; background: #8FACD8; z-index: -1; height: 200px;}
		}
	}
	.p4 { padding-top: 85px; padding-bottom: 150px; background: #8FACD8;
		.container-fluid { max-width: 930px; margin: auto;
			h3 { margin-bottom: .25rem; position: relative; z-index: 1;}
			> ul { margin-left: -7.5px; margin-right: -7.5px;
				> li { padding-left: 7.5px; padding-right: 7.5px;
					.wrap { padding: 30px 25px 35px; background: #fff; margin-bottom: 15px;
						h4 { font-size: .23rem; line-height: .27rem; letter-spacing: 0; text-align: center; color: @b-blue; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #333;}
						p { font-size: .14rem; line-height: .22rem; letter-spacing: .05em; padding-top: 10px;
							a { word-break: break-all; display: inline-block;}
							small { display: block; font-size: .12rem; line-height: .16rem; letter-spacing: .03em; padding-top: 10px; color: @b-blue; font-feature-settings: "palt";}
						}
					}
				}
			}
		}
	}

	@media (max-width:767px) {
		.p3 {
			.col-md-4 { margin-bottom: 40px;
				&:last-child { margin-bottom: 0;}
			}
			.pdf-wrap {
				.pdf-b {
					> ul {
						li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 35px; padding-right: 35px; border-right: none!important; padding-bottom: 15px;
							&:nth-child(2) { padding-bottom: 0;}
							ul {
								li {  -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;
									p { padding-top: .15rem;}
								}
							}
						}
					}
				}
			}
		}
		.p4 {
			.container-fluid {
				> ul.row {
					li {
						.wrap { text-align: center;
							img { display: block; margin: auto;}
							p { text-align: left;}
						}
					}
				}
			}
		}
	}
}


/* --------------------------------
	car-list
-------------------------------- */
#car-list {
	.p1 {
		.container-fluid {
			h3 { margin-bottom: .15rem; position: relative;
				&:before { content: ""; width: 100%; height: 1px; position: absolute; top: 43px; left: 0; right: 0; background: #333;}
				img { margin-bottom: .2rem; background: #fff; z-index: 1; position: relative;}
				p { font-size: .2rem; line-height: .28rem; letter-spacing: .1em; font-weight: bold;
					.c-red { color: @red;}
				}
			}
			> ul { position: relative; padding-bottom: 25px;
				&:after { content: ""; width: calc(100% - 30px); height: 1px; margin: auto; background: #333; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;}
			}
		}
	}
	.p2 { margin-top: .55rem;
		.container-fluid {
			.l-border { border-bottom: 1px solid #333; padding-bottom: .4rem; margin-bottom: .55rem;
				&:last-child { border-bottom: 0;}
				.wrap { padding-top: .45rem;
					&:nth-child(even) {
						> ul.row { background: url(../images/top/slick-bg.svg); z-index: 0;
							li {
								h3 { color: #000; border-color: #000;}
								ul {
									li { color: #000;}
								}
							}
						}
					}
					ul { justify-content: center; align-items: center; background: @b-blue; margin-left: 0; margin-right: 0;
						> li {
							&.nopad { padding: 0;
								img { object-fit: cover; width: 100%;}
							}
							&:not(.nopad) { max-width: 425px; margin: auto; position: relative;}
							h3 { font-size: .28rem; line-height: .3rem; letter-spacing: .025em; font-weight: bold; text-align: center; color: #fff; position: relative; padding-bottom: .1rem; border-bottom: 1px solid #fff; max-width: 415px; margin: auto;}
							ul { padding-top: .2rem; background: none;
								li { font-size: .16rem; line-height: 1.9; letter-spacing: .05em; font-weight: 500; color: #fff; text-indent: -1.5em; padding-left: 1.5em;}
								&.mw285 { max-width: 300px; margin: auto;}
							}
							a.l-btn { display: block; max-width: 190px; margin: auto; margin-top: .3rem; line-height: 34px; height: 34px; background: #F98219; font-size: .16rem; letter-spacing: .1em; text-align: center; color: #fff; transition: all .3s; position: relative;
								&:hover { background: @red;}
								&:after { content: ""; position: absolute; right: 3px; bottom: 3px; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #ffffff transparent;}
							}
						}
					}
					.l-wrap { margin-top: .1rem;}
				}
			}
		}
	}

	@media (max-width:767px) {
		.container-fluid {
			.l-border {
				.wrap {
					ul {
						> li {
							&.col-12:not(.nopad) {
								padding-top: 25px; padding-bottom: 30px;
							}
						}
					}
				}
			}
		}
	}
}


/* --------------------------------
	initiatives
-------------------------------- */
#initiatives { background: #EAEFF4; padding-bottom: 35px;
	section { padding-top: 25px; padding-bottom: 105px;
		h3.ttl-triangle { margin-bottom: .4rem;
			.ttl { padding-left: 0; padding-top: 10px; line-height: 1.6;}
		}
		div.img-wrap { margin-bottom: .2rem;}
		p { font-size: .16rem; line-height: 1.83; letter-spacing: .02em; font-weight: 500;}
	}
	.p1 { padding-bottom: 50px;
		h3 {
			img { margin-bottom: .2rem;}
			p { font-size: .18rem; line-height: 1.4; letter-spacing: .02em;}
		}
	}
	@media (max-width:767px){
		section { padding-bottom: 50px;
			p {
				br { display: none;}
			}
		}
	}
}


/* --------------------------------
	access
-------------------------------- */
#access {
	a.l-btn { max-width: 235px; height: 50px; line-height: 47px; margin: auto; background: @b-blue; display: block; text-align: center; position: relative; transition: all .3s;
		&:hover { background: @red;}
		&:after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #ffffff transparent;}
	}
	.p1 { padding-bottom: .85rem;
		h3 {
			img { margin-bottom: .3rem;}
			strong {
				img { margin-bottom: .35rem;}
			}
		}
		p { font-size: .163rem; line-height: 1.8; letter-spacing: .075em; font-weight: 500; margin-bottom: .3rem; }
	}
	.p2 { padding-top: .75rem; padding-bottom: .85rem; background: url(../images/access/access-bg.jpg)no-repeat; background-size: cover;
		h3 { margin-bottom: .25rem;}
		.bg-w { background: #fff;
			ul {
				li { padding: .3rem .45rem; border-bottom: 1px solid #EAEFF4;
					&:last-child { border-bottom: 0;}
					strong { font-size: .1772rem; line-height: 1.3; font-weight: bold; color: @b-blue;}
					p { font-size: .16rem; line-height: 1.5; letter-spacing: .075em; padding-left: 1.3em; padding-top: 5px;
						.c-red { color: @red;}
					}
				}
			}
		}
	}
	.p3 { padding-top: 1rem;
		h3 { margin-bottom: .2rem;}
		.gmap { position: relative; font-size: 0;
			&:after { content: ""; position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 32.5px 31.5px 0 31.5px; border-color: #ffffff transparent transparent transparent;}
			iframe { width: 100%;}
		}
		.l-btn {
			margin-bottom: .3rem; max-width: 420px; padding-left: 20px; padding-right: 20px;
		}
	}
	@media (max-width:767px) {
		.p1 { padding-bottom: .4rem;}
		.p2 { padding-top: .35rem; padding-bottom: .4rem;}
		.p3 {
			padding-top: .5rem;
			.l-btn {
				margin-bottom: .3rem; max-width: 300px;
			}
		}
	}
}


/* --------------------------------
	entering
-------------------------------- */
#entering { background: #EAEFF4;
	.p1 { padding-bottom: .85rem;
		.container-fluid {
			h3 {
				img { margin-bottom: .3rem;}
				strong {
					img { margin-bottom: .45rem;}
				}
				& + p { padding-bottom: .15rem; font-size: .15rem;}
			}
			.border-icon { margin-bottom: .5rem; position: relative;
				&:after { content: ""; height: 1px; width: 100%; background: @b-blue; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 0;}
				img { position: relative; z-index: 1;}
			}
			ul.card-wrap { margin-left: -20px; margin-right: -20px;
				li { padding-left: 20px; padding-right: 20px;
					> span {
						&:hover {
							.card {
								.triangle {
									&:before { border-top: 60px solid #F98219!important;}
								}
								.card-body {
									.card-title { color: #1F5AB2;
										&:after { width: 106}
									}
								}
							}
						}
						.card {  min-height: 255px;
							.card-body {  padding-top: .45rem;
								.card-title { color: #1F5AB2;
									&:after { width: 0; display: none;}
								}
								p { text-align: left; padding-left: 10px; padding-right: 10px; padding-bottom: .2rem; font-size: .15rem;}
							}
						}
					}
				}
			}
		}
	}
	.p2 { background: #5783C5; padding: 1.05rem 0 .5rem; position: relative;
		&:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: url(http://dev.cloudserver-1.com/u_school_html/images/top/slick-bg.svg); z-index: 0;}
		.container-fluid {
			h3 { margin-bottom: .2rem; position: relative; z-index: 0;}
			.bg-w { background: #fff; margin-bottom: .3rem; position: relative; z-index: 0;
				&:last-child { margin-bottom: 0!important;}
				h4 { background: @b-blue; font-size: .27rem; line-height: 1.9; color: #fff; font-weight: bold; text-align: center; padding-top: 10px; padding-bottom: 10px;}
				.wrap { padding: .35rem .15rem .4rem;
					p { font-size: .2rem; line-height: 1.4; letter-spacing: .1em; text-align: center; font-weight: 500;
						small { font-size: .14rem; line-height: 1.98; letter-spacing: .05em;}
					}
					.t-number { padding-top: .25rem;
						p { padding-bottom: .05rem; font-size: .18rem; line-height: 1.8; letter-spacing: .1em; font-weight: bold;}
					}
				}
				.pb10 { padding-bottom: 5px; padding-top: 5px;}
				ul.wrap { padding: 0;
					li { padding: .35rem .45rem; border-bottom: 1px solid #EAEFF4;
						strong { font-size: .18rem; line-height: 1.4; letter-spacing: .2em; color: @b-blue; font-weight: bold;}
						p { font-size: .16rem; line-height: 1.8; text-align: left; padding-left: 1.3em;}
						dl { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: flex-start; align-items: center; text-align: left; width: 100%;
							dt { font-size: .18rem; line-height: 1.9; color: @b-blue; min-width: 170px;}
							dd { font-size: .16rem; line-height: 1.65;
								&.pl30 { padding-left: .3rem;}
								&.pl80 { padding-left: .8rem; color: @b-blue; font-size: .18rem; line-height: 1.6; letter-spacing: .2em; font-weight: bold;}
							}
						}
					}
				}
			}
		}
	}
	.s-l { background: url(../images/entering/fot_area.svg)no-repeat; background-color: #C7D6EC; background-size: contain; background-position: center top; width: 100%; padding-top: 0;
		.bottom_b { position: relative; padding-top: .2rem;
			&:after { content: ""; position: absolute; top: 0; left: 0; right: 0; margin: auto;}
			a.l-btn { display: block; background: @b-blue; color: #fff; font-size: .187rem; line-height: 1.7; padding: 15px 0; max-width: 285px; margin: auto; position: relative; transition: all .3s;
			}
		}
	}
	.p3 { padding: .8rem 0 1.2rem; background: #C7D6EC;
		.container-fluid {
			.fakeContainer {
				margin: 0 0 20px;
				width: 1000px;
				height: 600px;
				overflow: hidden;
			}
			.side-table-scroll {
				position: relative;
				@media (max-width: 767px) {
					overflow: scroll;
				}
				.length-table-scroll {
					width: 1000px; height: 400px; overflow: scroll; -ms-overflow-style:none;
					table.timetable {
						thead {
							visibility: hidden;
							@media (max-width: 767px) {
								visibility: visible;
							}
						}
					}
					@media (max-width: 767px) {
						height: auto; overflow: visible;
					}
				}
				.fixed-head {
					top: 0; left: 0; height: 73px; overflow: hidden; position: absolute;
					@media (max-width: 767px) {
						display: none;
					}
				}
				table.timetable { background: #C7D6EC; border-spacing: 2px; margin-bottom: 2px; width: 1000px; margin-left: 0;
					thead {
						tr {
							th { background: @b-blue; color: #fff; font-size: 10px; line-height: 1.2; padding: 4px;}
							&:first-child {
								th { font-size: .18rem; line-height: 1.4; letter-spacing: .05em;}
							}
						}
					}
					tbody {
						tr {
							td { text-align: center; color: @b-blue; font-weight: bold; font-size: .25rem;
								&.t-left { text-align: center; font-size: .15rem; line-height: 1.74; letter-spacing: .05em; color: #000; padding-left: 13px;}
								&:last-child { font-size: .14rem; line-height: 1.3; letter-spacing: .05em; color: #000; font-weight: 400; text-align: left;}
							}
						}
					}
				}
			}
			.fot-table { margin-top: .2rem;
				table { background: #C7D6EC; width: 100%; border-collapse: separate; border-spacing: 2px; margin-bottom: 2px;
					tr {
						th { background: @b-blue; font-size: .18rem; line-height: 1.4; color: #fff; font-weight: bold; text-align: center; padding: .3rem .15rem; min-width: 170px;}
						td { background: #fff; font-size: .15rem; line-height: 1.25; letter-spacing: 0; padding: .3rem .25rem; vertical-align: middle; position: relative;
							span { display: inline-block; width: 105px; font-size: .19rem; line-height: 1.2; font-weight: bold; border-right: 1px solid #000;}
							p.t-number { font-size: .23rem; line-height: .19rem; font-weight: bold; display: inline-block; padding-left: .25rem;
								small { font-size: .15rem; line-height: .15rem;}
							}
						}
					}
				}
			}
		}
	}
	@media (max-width:767px) {
		.p1 {
			.container-fluid {
				ul.card-wrap {
					li {
						> span {
							.card { min-height: auto;}
						}
					}
				}
			}
		}
		.p2 {
			.container-fluid {
				.bg-w {
					.wrap { font-size: .18rem; line-height: 1.3;
						p {
							small { display: block;}
						}
					}
					ul.wrap {
						li { padding: .25rem;
							dl {
								dd {
									&.pl80 { padding-left: 0;}
									&.pl30 { padding-left: 0;}
								}
							}
							p { padding-left: 0;}
						}
					}
				}
			}
		}
		.p3 {
			.container-fluid {
				.table-scroll { overflow: scroll;
					table.timetable { width: 767px;}
				}
				.fot-table { overflow: scroll;
					table { width: 767px;}
				}
			}
		}
	}
}

#benefit {
	 background: #EAEFF4;
	 .btn-area {
		 position: relative; z-index: 1; top: 0.3rem; margin-top: -.3rem;
		 .default-btn {
			 &:before {
				 content: ""; display: block; width: .2rem; height: .2rem; border-bottom: 2px solid @b-blue; border-left: 2px solid @b-blue;
				 transform: rotate(-45deg); left: 0; right: 0; margin: 0 auto 15px;
			 }
			 a {
				 color: #fff; font-size: .26rem; letter-spacing: .09em; font-weight: bold; max-width: 480px; width: 100%;
				 &:after {
					 display: none;
				 }
				 &:hover {
					 background: @b-blue;
				 }
			 }
		 }
		 @media (max-width: 767px) {
			 .default-btn {
				 a {
					 font-size: .16rem;
				 }
			 }
		 }
	 }
	 .whitebg {
		 display: block; position: absolute; bottom: -1px; width: 100%;
		 img {
			 width: 100%;
		 }
	 }
	.p1 {
		position: relative;
		.t-ttl {
			padding: .1rem 0 .3rem;
		}
		dl {
			margin-bottom: .1rem;
			dt {
				background: @b-blue; font-size: .27rem; letter-spacing: .09em; color: #fff; text-align: center; padding: 3px 5px;
			}
			dd {
				background: #fff; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; align-items: center; padding: .35rem; min-height: 225px; font-size: .19rem; letter-spacing: .02em; line-height: 1.4;
				&.tac {
					letter-spacing: .1em; font-weight: bold;
					small {
						font-size: .14rem; letter-spacing: .05em;
					}
				}
			}
		}
	}
	.p2 {
		background: #C7D6EC; position: relative; padding: 1rem 0 0;
		.default-btn {
			a {
				max-width: 600px!important; letter-spacing: .05em;
			}
		}
		table {
			background-color: #C7D6EC; margin-bottom: 0;
			th {
				position: relative; font-size: .2rem; letter-spacing: .01em; padding: .25rem .05rem;
				img {
					position: absolute; left: 0; right: 0; bottom: -12px; margin: 0 auto; z-index: 1;
				}
			}
			td {
				text-align: left; font-size: .16rem; font-weight: normal; letter-spacing: .05em; background: #fff!important;
			}
		}
		.white {
			background: #fff; padding: .3rem .5rem; margin-bottom: .25rem;
			li {
				color: #1F5AB2; font-size: .21rem; letter-spacing: .09em; display: inline-block; padding-right: .25rem;
			}
			p {
				font-size: .15rem; letter-spacing: .015em; padding-top: .1rem;
			}
		}
		.redbtn {
			margin-bottom: .2rem;
			span {
				display: inline-block; background: @red; color: #fff; padding: .2rem 1rem; font-size: .21rem; line-height: 1; letter-spacing: .2em; font-weight: bold;
			}
			+p {
				text-align: center; font-size: .16rem; letter-spacing: .05em;
			}
		}
		@media (max-width: 767px) {
			padding-top: .6rem;
			table {
				th {
					font-size: .16rem;
				}
			}
		}
	}
	.p3 {
		padding-top: 1rem; position: relative;
		.container-fluid {
			> p {
				text-align: center; font-size: .19rem;
			}
			dl {
				position: relative; background: @b-blue; margin-bottom: .3rem;
				&:nth-child(6) {
					margin-bottom: 5px;
				}
				dt {
					position: absolute; right: 0; width: 34%; height: 100%; background-position: center; background-size: cover;
				}
				dd {
					margin-right: 34%; padding: .3rem;
					p {
						color: #fff;
					}
					table {
						background: @b-blue; table-layout: fixed;
						td,
						th {
							background: #fff; font-size: .15rem;
						}
						tbody {
							tr {
								&:first-child {
									td,
									th {
										background: #C7D6EC;
									}
								}
								.c-blue {
									color: @b-blue;
								}
								.c-red {
									background: #FFFDDF;
								}
								.bg-gray {
									background: #EAEFF4;
								}
							}
						}
					}
				}
				@media (max-width: 767px) {
					background: #fff; padding-top: 10px;
					dt {
						width: 50%; position: static; margin: 0 auto 10px; height: 220px; width: 320px;
					}
					dd {
						background: @b-blue; width: 100%; margin-right: 0; padding: .1rem;
					}
				}
			}
		}
	}
}

#faq {
	.p1 {
		.t-ttl {
			padding-top: 0;
		}
	}
	.p2 {
		padding: .7rem 0 1rem; background: #BCCDE8; position: relative;
		.icon {
			position: absolute; top: -.25rem; left: 0; right: 0; margin: 0 auto;
		}
		.container-fluid {
			max-width: 930px;
		}
		.tab_parent {
			background: @b-blue; color: #fff; font-size: .3rem; letter-spacing: .1em; text-align: center; font-weight: bold;
			@media (max-width: 767px) {
				font-size: .22rem;
			}
		}
		.tab_child {
			dl {
				background: #fff;
				dt,dd {
					font-size: .2rem; position: relative; padding: .2rem .7rem .2rem 1.3rem;
					@media (max-width: 767px) {
						font-size: .16rem; position: relative; padding: .2rem .2rem .2rem .7rem;
					}
				}
				dt {
					transition: .3s;
					&:before {
						color: #1F5AB2; font-size: 0.23rem; position: absolute; left: 0.60rem; top: 0.26rem; line-height: 1; font-weight: bold;
						@media (max-width: 767px) {
							font-size: 0.2rem; left: 0.1rem; top: 0.22rem;
						}
					}
					&:after {
						content: ""; border-right: 10px solid transparent; border-top: 10px solid #BCCDE8; border-left: 10px solid transparent; transform: rotate(-45deg); margin: auto; position: absolute; right: 0; bottom: 6px; width: 10px; transition: 0.3s;
					}
					&.open {
						background: #E8233C!important; color: #fff;
						&:before {
							color: #fff;
						}
						&:after {
							border-top: 10px solid #fff;
						}
						+ dd {
							min-height: 90px; height: 100%; padding: .2rem .7rem .2rem 1.3rem;
							@media (max-width: 767px) {
								padding: .2rem .2rem .2rem .7rem;
							}
						}
					}
				}
				dd {
					background-color: #FFFEE7; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: .3s;
					&:before {
						content: ""; display: block; width: 42px; height: 48px; background-image: url(../images/faq/a.svg); background-size: cover; position: absolute; left: .7rem; top: .2rem;
						@media (max-width: 767px) {
							left: .16rem; width: 36px; height: 41px;
						}
					}
					&:after {
						content: ""; border-right: 10px solid transparent; border-top: 10px solid #E8233C; border-left: 10px solid transparent; transform: rotate(-45deg); margin: auto; position: absolute; right: 0; bottom: 6px; width: 10px; transition: 0.3s;
					}
				}
				&:nth-child(even) {
					dt {
						background: #EAEFF4;
					}
				}
				&:nth-child(1) { dt:before { content: "Q01.";}}
				&:nth-child(2) { dt:before { content: "Q02.";}}
				&:nth-child(3) { dt:before { content: "Q03.";}}
				&:nth-child(4) { dt:before { content: "Q04.";}}
				&:nth-child(5) { dt:before { content: "Q05.";}}
				&:nth-child(6) { dt:before { content: "Q06.";}}
				&:nth-child(7) { dt:before { content: "Q07.";}}
				&:nth-child(8) { dt:before { content: "Q08.";}}
				&:nth-child(9) { dt:before { content: "Q09.";}}
				&:nth-child(10) { dt:before { content: "Q10.";}}
				&:nth-child(11) { dt:before { content: "Q11.";}}
				&:nth-child(12) { dt:before { content: "Q12.";}}
				&:nth-child(13) { dt:before { content: "Q13.";}}
				&:nth-child(14) { dt:before { content: "Q14.";}}
				&:nth-child(15) { dt:before { content: "Q15.";}}
				&:nth-child(16) { dt:before { content: "Q16.";}}
				&:nth-child(17) { dt:before { content: "Q17.";}}
				&:nth-child(18) { dt:before { content: "Q18.";}}
				&:nth-child(19) { dt:before { content: "Q19.";}}
				&:nth-child(20) { dt:before { content: "Q20.";}}
			}
		}
	}
}

.grecaptcha-badge { opacity: 0; }