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

html,body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
	margin:0;
	padding:0;
	height: 100%;
   /*フォント*/
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',YuGothic,'Yu Gothic','ＭＳ Ｐゴシック','MS PGothic','Arial','Arial Black',sans-serif;
	font-size: 18px;
	line-height:1.5;
	color: #2b2b2b;
}
a:link {
	color: #2b2b2b;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #2b2b2b;
}
a:hover {
	text-decoration: none;
	color: #132b6c;
}
a:active {
	text-decoration: none;
	color: #2b2b2b;
}

hr.kugiri {
	border: none;
	margin: 40px 0!important;
}



/*---------------------------------------------------------------------------
レイアウト
---------------------------------------------------------------------------*/
#wrap {
	width:100%;
	height: 100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
	position: relative;
}

img {
	max-width: 100%;
	width: auto;
	height: auto;
}

img[src$=".svg"] {width: 100%;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
	}
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#wrap {
		width:100%;
		margin:0 auto;
		padding:0;
		box-sizing:border-box;
	}
}

/*-------------------------*/

header,main,footer,div {
	display:block;
	box-sizing:border-box;
}

p,h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

/*-------------------------*/

/*---------------------------------------------------------------------------
header
---------------------------------------------------------------------------*/
header {
	width: 100%;
	border-top: solid 16px #009be4;
	padding: 8px 16px 4px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 1.4;
	background: #fff;
	position: fixed;
	z-index: 99999;
	top: 0;
}
header h1 {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	font-size: 1.25rem;
	line-height: 1.25;
	color: #132b6c;
}
.h_logo {
	display: block;
	width: 160px;
	margin-right: 16px;
}

.h_flex {
	display: flex;
	align-items: center;
	line-height: 1.25;
}
.h_tel {
	font-size: 2rem;
	font-weight: 700;
	margin-right: 16px;
	color: #e50012;
}
.h_btn {width: 240px;}
.h_btn:hover {opacity: .8;}

.f_pcimg {display: block;}
.f_spimg,
.h_flex_sp {display: none;}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	header {padding: 4px 16px;}
	header h1,
	.h_flex {display: block;}
	
	header h1 {
		flex-direction: column;
		font-size: 1rem;
	}
	.h_logo {
		width: 100px;
		margin-right: 0;
		margin-top: 4px;
	}
	
	header h1 br {display: none;}
	
	.h_tel {
		font-size: 1.5rem;
		margin-right: 0;
	}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	header {
		padding: 8px 8px 4px;
		display: block;
		border-top: none;
	}
	header h1 {
		font-size: 1rem;
		padding-bottom: 8px;
		border-bottom: solid 1px #ccc;
	}
	header h1 br {display: none;}
	
	.h_flex {
		margin-top: 8px;
		justify-content: space-between;
	}
	.h_flex p:nth-child(3) {margin-right: 8px;}
		
	.f_pcimg {display: none;}
	.f_spimg {display: block;}
	
	.h_flex_sp {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 8px 8px 4px;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		bottom: 0;
		z-index: 9999;
	}
	.h_flex_sp p:first-child {margin-right: 8px;}
}

@media screen and (max-width:320px) {/*スマートフォン*/
	header h1 {font-size: .75rem;}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
main
---------------------------------------------------------------------------*/
main {margin-top: 100px;}
@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
}
@media screen and (max-width:736px) {/*スマートフォン*/
	main {
		margin-top: 30%;
		border-top: solid 16px #009be4;
	}
}
/*-------------------------*/
#mainimg {
	height: 0;
	padding-top: 81%;
	background: url("img/topimage.jpg") no-repeat top center;
	background-size: 100% auto;
}

#achievements {
	width: 80%;
	margin: 0 auto;
 	margin-top: -12%;
	text-align: center;
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 700;
	position: relative;
	box-shadow: 2px 2px 4px rgba(0,0,0,.3);
	text-shadow: 0 0 2px rgba(0,0,0,.5);
}
#achievements a {
	display: block;
	padding: 8px;
	box-sizing: border-box;
	background: #132b6c;
	color: #fff;
}

#achievements::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 25%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}
#achievements:hover::before {
	animation: shine 0.7s;
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#achievements {
		width: 90%;
		font-size: 1.25rem;
	}
}
/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
footer
---------------------------------------------------------------------------*/
footer {background: #f3f3f3;}
footer h3 {color: #132b6c;}
.f_logo {width: 120px;}
#f_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#f_flex div:nth-child(1) {
	width: 48%;
	padding: 0 40px;
	box-sizing: border-box;
}

.f_tel {
	font-size: 2rem;
	line-height: 1.4;
	font-weight: 700;
	margin-right: 16px;
	color: #e50012;
}

.map {
	width: 50%;
	margin:0;
	position: relative;
	padding-bottom: 24%;
	height: 0;
	overflow: hidden;
	}
.map iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	footer {font-size: 14px;}
	.f_logo {width: 80px;}
	.f_tel {font-size: 1.5rem;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	footer {
		font-size: 14px;
		/*padding-bottom: 48px;*/
	}
	#f_flex {display: block;}
	#f_flex div:nth-child(1),
	.map {width: 100%;}
	#f_flex div:nth-child(1) {
		padding: 16px;
		text-align: center;
	}
	.f_logo {
		width: 80px;
		margin: 0 auto;
	}
	.f_tel {font-size: 1.5rem;}
	.map {padding-bottom: 40%;}

}

/*-------------------------*/
.copy {
	padding: 8px;
	box-sizing: border-box;
	background: #132b6c;
	color: #fff;
	font-size:.75rem;
	text-align:center;
	}

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
FILIOはココが違う！！
---------------------------------------------------------------------------*/
#contents1 {
	max-width: 1000px;
	margin: 0 auto;
}
#contents1 h2 {
	margin: 8px auto;
	text-align: center;
	font-size: 3rem;
	line-height: 1.4;
}
#contents1 h2 span {
	color: #132b6c;
	font-size: 120%;
}
#contents1 ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#contents1 li {
	background: rgba(0,27,97,.96);
	margin-bottom: 16px;
	color: #fff;
}
#contents1 li picture {width: 100%;}

.c1flex {
	display: flex;
	align-items: flex-start;
	font-size: 24px;
}
.c1flex div {
	width: 50%;
	padding: 0 24px 24px;
	box-sizing: border-box;
}

.c1flex h3 {
	text-align: center;
	color: #FFF79A;
}
.c1flex p span {border-bottom: solid 2px #E74E95;}


@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#contents1 {margin: 0 16px;}
	.c1flex div {padding: 0 16px 16px;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#contents1 {margin: 0 16px;}
	#contents1 h2 {font-size: 1.5rem;}
	.c1flex {
		display: block;
		font-size: 1rem;
	}
	.c1flex div {
		width: 100%;
		padding: 0 16px 24px;
	}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
コンテンツ1
---------------------------------------------------------------------------*/
#contents2 {
	max-width: 1000px;
	margin: 16px auto 40px;
}
#contents2 hr {
	border: none;
	margin: 16px 0;
}
#contents2 h3 {
	padding: 8px 16px;
	box-sizing: border-box;
	margin-bottom: 16px;
	font-size: 1.75rem;
	line-height: 1.25;
	color: #132b6c;
	border: solid 1px #132b6c;
}
#contents2 h3 span {
	font-size: 2.5rem;
	display: block;
}

#contents2 h4 {
	padding: 4px 8px;
	box-sizing: border-box;
	margin-bottom: 8px;
	background: #00a0e9;
	color: #fff;
}
#contents2 h4 span {
	padding: 4px 6px;
	background: #fff;
	margin-right: 4px;
	color: #00a0e9;
	border-radius: 50%;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#contents2 {margin: 16px 16px 40px;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#contents2 {margin: 16px 16px 40px;}
	#contents2 h3 {font-size: 1rem;}
	#contents2 h3 span {font-size: 1.25rem;}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
合格実績
---------------------------------------------------------------------------*/
#contents3 {
	background: #e50012;
	color: #fff;
	padding: 8px 0;
	box-sizing: border-box;
}

#contents3 h3 {
	width: 100%;
	padding: 8px 0;
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	color: #2b2b2b;
	font-size: 2.5rem;
	line-height: 1.4;
}

#contents3 ul {
	margin: 0;
	padding: 16px 16px 0;
	box-sizing: border-box;
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
}
#contents3 li {width: 24%;}
#contents3 li:first-child {width: 100%;}

#c3_block {
	padding: 16px 40px 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	line-height: 1.4;
}
#c3_block ul {
	width: 31.6%!important;
	padding: 0;
	font-weight: 700;
}
#c3_block li {
	width: 48%;
	margin-bottom: 16px;
}
#c3_block ul::after {
	display: block;
	content: "";
	width: 48%;
}

#c3_block li:first-child {
	border: solid 1px #fff;
	margin: 4px 0 8px;
}

#c3_block h4 {font-size: 1.16rem;}
#c3_block h5 {
	padding: 2px 0;
	margin-bottom: 4px;
	background: #000;
}

@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	#contents3 h3 {font-size: 2rem;}
	#c3_block {padding: 16px 16px 0;}
	#c3_block h4 {font-size: .75rem;}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	#contents3 h3 {
		padding: 8px;
		font-size: 1.5rem;
		line-height: 1.25;
	}
	#contents3 li {width: 48%;}
	
	#c3_block {padding: 0 16px 0;}
	
	#c3_block ul {width: 100%!important;}
	#c3_block li,
	#c3_block ul::after {width: 32%;}
	
	#c3_block h4 {font-size: 1rem;}
	#c3_block hr {display: none;}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
コース紹介
---------------------------------------------------------------------------*/
#contents4 {
	width: 520px;
	margin: 40px auto;
	padding: 0 0 40px;
	border-bottom: solid 2px #132b6c;
	font-size: 20px;
	line-height: 1.4;
}
#contents4 hr {
	border: none;
	margin: 16px 0;
}
#contents4 h3,
#contents4 h5 {color: #132b6c;}

#contents4 h3 {
	font-size: 2rem;
	text-align: center;
}
#contents4 h4 {
	margin: 16px 0;
	padding: 4px 16px;
	box-sizing: border-box;
	color: #fff;
	background: #132b6c;
	font-size: 1.25rem;
}
#contents4 h5 {font-size: 1rem;}
#contents4 h5 span {
	margin-left: 16px;
	padding: 2px 4px;
	box-sizing: border-box;
	margin-right: 8px;
	font-size: 96%;
	color: #fff;
	background: #132b6c;
	border-radius: 2px;
}

.price {
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
	display: flex;
}
.price span {
	font-size: 150%;
	line-height: 1.25;
}
.price p:first-child{
	padding: 4px 0;
	margin-right: 16px;
}

.price2 {
	padding: 0 16px;
	box-sizing: border-box;
}
.price2 span {
	font-size: 150%;
	line-height: 1.25;
}

.price2 hr {
	border-bottom: dotted 1px #ccc!important;
}

@media screen and (max-width:736px) {/*スマートフォン*/
	#contents4 {width: 90%;}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
お問い合わせボタン
---------------------------------------------------------------------------*/
.contact_btn {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	font-size: .75rem;
}
.contact_btn a:hover {opacity: .8;}

.f_btn {
	width: 240px;
	margin-top: 8px;
}
.f_btn:hover {opacity: .8;}
@media only screen and (min-width:737px) and (max-width:1024px) {/*タブレット*/
	.contact_btn {}
	.f_btn {}
}
@media screen and (max-width:736px) {/*スマートフォン*/
	.contact_btn {width: 90%;}
	.f_btn {margin: 0 auto;}
}
/*-------------------------*/

/*---------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
動画埋め込み
---------------------------------------------------------------------------*/
#tube {
	width: 520px;
	aspect-ratio: 16 / 9;
	margin: 40px auto;
	text-align: center;
}
#tube iframe {
	width: 100%;
	height: 100%;
}

#tube h3,
#tube h4 {
	line-height: 1.25;
	margin-bottom: 8px;
}
#tube h3 {
	padding: 4px;
	box-sizing: border-box;
	color: #fff;
	background: #009be4;
	border-radius: 16px;
	font-size: 1rem;
}
#tube h4 {
	font-size: 1.25rem;
	color: #132b6c;
}

.t_btn {font-weight: 700;}
.t_btn a {
	display: block;
	padding: 8px;
	box-sizing: border-box;
	color: #fff;
	background: #e50012;
	border-radius: 4px;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.t_btn a:hover {opacity: .8;}

@media screen and (max-width:736px) {/*スマートフォン*/
	#tube {width: 90%;}
}
/*---------------------------------------------------------------------------*/