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

/*--------------------------------------------------------------
	CSSカスタムプロパティ
--------------------------------------------------------------*/
:root{
/* 文字サイズ */
	--text_size: 16px;
	--ttl_01: 40px;
	--ttl_02: 30px;
	--ttl_h4: 18px;
	--note_size: 14px;

/* 色 */
	--color01: #448ac9;
	--color02: #fff;
	--linkcolor: #448ac9;
	--bg01: #448ac9;
	--bg02: #dbe8f5;
	--bg03: #ebebeb;
	--bg04: #4b89b2;

/* コンテナーサイズ */
	--container01_size: 1200px;
	--container02_size: 1120px;
}

@media (max-width:768px) {
	:root{
		/* 文字サイズ */
		--text_size: 3.5vw;
		--ttl_01: 5.5vw;
		--ttl_02: 5vw;
		--ttl_h4: 4.5vw;
		--note_size: 3vw;
	}
}

/*--------------------------------------------------------------
	Base
--------------------------------------------------------------*/
html, body{
	position: relative;
	width: 100vw;	
	height: 100vh;
	box-sizing : border-box;
	overflow-x: hidden;
}
html{
	scroll-behavior: smooth;
}
.container_01{
	width: var(--container01_size);
	margin: 0 auto;
}
.container_02{
	width: var(--container02_size);
	margin: 0 auto;
}

@media (min-width:769px) {
	.sp{
		display:none !important;
	}
}
@media (max-width:768px) {
	.pc{
		display:none !important;
	}
	.container01{
		width: 100%;
	}
	.container_02{
		width: calc(100% - 1rem);
		padding: 0 0.5rem;
	}
	img{
		width: 100%;
		height: auto;
	}
}


/*--------------------------------------------------------------
	Link
--------------------------------------------------------------*/
a{
	color: var(--linkcolor);
	text-decoration: none;
	transition: .3s;
}
a:hover{
	opacity: .7;
}


/*--------------------------------------------------------------
	Header
--------------------------------------------------------------*/

@media (max-width:768px) {
	header img{
		width: 100vw;
	}
}


/*--------------------------------------------------------------
	Main
--------------------------------------------------------------*/
main{
	font-size: var(--text_size);
}
h2{
	margin-bottom: 10vh;
}

@media (max-width:768px) {
	h2{
		margin-bottom: 3vh;
	}
	}

	/*--------------------------------------------------------------
		Main - section01
	--------------------------------------------------------------*/
	.sec01{
		padding-block: 10vh;
	}
	.sec01_flex{
		display: flex;
		justify-content: space-between;
		margin-bottom: 5vh;
	}
	.sec01_flex:nth-of-type(even){
		flex-direction: row-reverse;
	}
	.sec01_flex .flex_left{
		width: 35%;
	}
	.sec01_flex .flex_left img{
		width: 100%;
	}
	.sec01_flex .flex_right{
		width: 65%;
		padding-left: 1.5rem;
	}
	.sec01_flex:nth-of-type(even) .flex_right{
		padding-left: 0;
		padding-right: 1.5rem;
	}
	.sec01 h3{
		color: var(--color01);
		font-size: var(--ttl_01);
		font-family: 'Noto Sans JP', sans-serif;
		margin-bottom: 1.5rem;
	}
	.sec01 h3 span{
		font-size: 70px;
		font-family: 'Roboto', sans-serif;
		padding-right: 1rem;
	}


	@media (max-width:768px) {
		.sec01{
			padding-block: 5vh 2.5vh;
		}
			.sec01_flex{
			flex-direction: column;
			margin-bottom: 5vh;
		}
		.sec01_flex:nth-of-type(even){
			flex-direction: column;
		}	
		.sec01_flex .flex_left,
		.sec01_flex .flex_right{
			width: 100%;
		}
		.sec01_flex .flex_right{
			padding-left: 0;
		}
		.sec01 h3{
			margin-block: 1rem;
		}	
		.sec01 h3 span{
			font-size: 12vw;
			padding-right: 0.5rem;
		}	
		
	}


	/*--------------------------------------------------------------
		Main - section02
	--------------------------------------------------------------*/
	.sec02{
		background: var(--bg01);
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding: 5vh 0;
	}
	.sec02_flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.sec02_flex .flex_left,
	.sec02_flex .flex_right{
		width: 50%;
	}
	.sec02_flex .flex_right li{
		color: var(--color02);
		font-size: var(--ttl_02);
		font-weight: bold;
	}
	.sec02_flex .flex_right li dl{
		display: flex;
	}
	.sec02_flex .flex_right li dt{
		font-size: var(--ttl_01);
		font-family: 'Roboto', sans-serif;
		margin-right: 1rem;
	}


	@media (max-width:768px) {
		.sec02_flex{
			flex-direction: column;
		}
		.sec02_flex .flex_left,
		.sec02_flex .flex_right{
			width: 100%;
		}
		.sec02_flex .flex_right{
			margin-top: 3vh;
		}

	}

	/*--------------------------------------------------------------
		Main - section03
	--------------------------------------------------------------*/
	.sec03{
		padding-block: 10vh;
	}
	.sec03_flex{
		display: flex;
		justify-content: space-between;
	}
	.flex_teacher{
		position: relative;
	}
	.flex_teacher div{
		color: var(--color02);
		background: var(--bg01);
		width: 320px;
		min-height: 300px;
		padding: 1rem;
		box-sizing: border-box;
		position: relative;
		top: -1rem;
		left: 1rem;
	}
	.flex_teacher h3{
		font-size: var(--ttl_02);
		font-family: 'Noto Sans JP', sans-serif;
		line-height: 2rem;
		margin-bottom: 1.5rem;
	}
	.flex_teacher h3 span{
		font-size: var(--text_size);
	}
	.flex_teacher p{
		font-size: var(--text_size);
	}

	@media (max-width:768px) {
		.sec03{
			padding-block: 5vh;
		}	
		.sec03_flex{
			flex-wrap: wrap;
		}
		.flex_teacher{
			width: calc(100% / 2);
		}
		.flex_teacher h3{
			line-height: 1.2rem;
			margin-bottom: 0.8rem;
		}	
		.flex_teacher img{
			width: 40vw;
		}
		.flex_teacher div{
			width: 42vw;
			min-height: 45vh;
			top: -1rem;
			left: 0.5rem;
		}
		.flex_teacher:last-child{
			margin-right: auto;
		}
		.flex_teacher p{
			line-height: 1.2rem;
		}
	
	}


	/*--------------------------------------------------------------
		Main - section04
	--------------------------------------------------------------*/
	.sec04{
		background: var(--bg02);
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding: 10vh 0 5vh;
	}
	.sec04_flex{
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 5vh;
	}
	.sec04_flex .flex_left{
		width: 30%;
	}
	.sec04_flex .flex_left img{
		width: 100%;
	}
	.sec04_flex:nth-of-type(even){
		flex-direction: row-reverse;
	}
	.sec04_flex:first-of-type .flex_left{
		margin-right: 1.5rem;
	}
	.sec04_flex:last-of-type .flex_left{
		margin-left: 1.5rem;
	}
	.sec04_flex .flex_right{
		width: 70%;
	}
	.sec04_flex .flex_right h3{
		color: var(--color02);
		font-size: var(--ttl_02);
		background: var(--bg01);
		line-height: 2.2rem;
		padding: 0.5rem 2rem;
		margin-bottom: 1.5rem;
		box-sizing: border-box;
	}
	.sec04 p{
		font-size: var(--text_size);
	}

	@media (max-width:768px) {
		.sec04{
			padding: 5vh 0 2.5vh;
		}	
		.sec04_flex,
		.sec04_flex:nth-of-type(even){
			flex-direction: column;
		}
		.sec04_flex .flex_left,
		.sec04_flex .flex_right{
			width: 100%;
		}
		.sec04_flex .flex_left{
			text-align: center;
		}
		.sec04_flex .flex_left img{
			width: 70%;
		}	
		.sec04_flex:first-of-type .flex_left,
		.sec04_flex:last-of-type .flex_left{
			margin-right: 0;
			margin-left: 0;
		}
		.sec04_flex .flex_right{
			margin-top: 3vh;
		}
		.sec04_flex .flex_right h3{
			line-height: 1.2rem;
			padding: 0.5rem;
			margin-bottom: 1rem;
		}
		.sec04 p{
			line-height: 1.2rem;
		}
			
	}


	/*--------------------------------------------------------------
		Main - section05
	--------------------------------------------------------------*/
	.sec05{
		padding-block: 10vh;
	}
	.sec05 table{
		width: 100%;
	}
	.sec05 th{
		color: var(--color01);
		width: 20%;
		vertical-align: top;
		padding-bottom: 1rem;
	}
	.sec05 th span{
		color: #f00;
		margin-left: 0.5rem;
	}
	.sec05 td {
		width: 75%;
		padding-bottom: 1rem;
	}
	.sec05 input, .sec05 textarea {
		padding: 0.2rem 1rem;
		height: 2.5rem;
		box-sizing: border-box;
		border: 1px solid #20a7cf;
	}
	.sec05 .input_half{
		width: 45%;
		margin-right: 1rem;
	}
	.sec05 .input_half:last-of-type{
		margin-right: 0;
	}
	.sec05 .input_full{
		width: 95%;
	}
	input[type="radio"]{
		width: 1rem;
		position: relative;
		top: 0.8rem;
		margin-inline: 3rem 1rem;
	}
	input[type="radio"]:first-of-type{
		margin-left: 0;
	}
	.submit_wrap{
		text-align: center;
		margin-block: 5vh;
	}
	.submit_btn{
		color: var(--color02);
		font-size: var(--ttl_01);
		font-family: 'Noto Sans JP', sans-serif;
		background: var(--bg01);
		width: 30vw;
		height: 10vh !important;
		cursor: pointer;
	}
	.notes{
		font-size: var(--note_size);
		text-align: center;
	}

	@media (max-width:768px) {
		.sec05{
			padding-block: 5vh;
		}	
		.sec05 th{
			width: 30%;
		}	
		.input_tell{
			width: 19vw;
		}
		.submit_btn{
			width: 60vw;
			height: 8vh !important;
		}	
	}



/*--------------------------------------------------------------
	以下フロントページのCSS引用
--------------------------------------------------------------*/
	#access {
		background-color: #669cbe;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
	}
	#access .contents_inner {
		padding: 120px 0;
		color: #fff;
		max-width: 1000px;
		width: 95%;
		margin: 0 auto;

	}
	#access .flex_wrap {
		display: flex;
		align-items: center;
	}
	#access h2{
		margin-bottom: 40px;
	}
	#access h2 img{
		height: auto;
	}
	.map {
		max-width: 48%;
		margin: 20px auto 0;
		width: 100%;
		position: relative;
		padding-top: 46.25%;
	}
	.map iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	#access .flex_box {
		width: 50%;
		padding-left: 60px;
	}
	
	#access p {
		font-size: 1.2rem;
		font-weight: 700;
		line-height: 1.6;
	}
	
	.list_sns {
		display: flex;
		margin-top: 40px;
		align-items: center;
	}
	.list_sns li {
		margin-left: 40px;
	}
	.list_sns li:first-of-type {
		margin-left: 0;
	}
	
	/*--Retina--*/
	@media screen and (max-width: 750px) {
		#access .contents_inner {
		padding: 10.667vw 0;
		}
		#access .flex_wrap {
		display: block;
		}
		.map {
		max-width: 80%;
		margin: 0 auto;
		width: 80%;
		position: relative;
		padding-top: 80%;
		}
		.mt40 {
			margin-top: 5.333vw!important;
		}
		#access .flex_box {
		width: 100%;
		padding: 0;
		margin: 2.667vw auto 0;
		text-align: center;
		}
		#access .ttl_area {
		margin: 5.333vw auto 0;
		max-width: 80%;
		}
		#access p {
		font-size: 1.1rem;
		line-height: 1.4;
		}
		.list_sns {
		margin-top: 5.333vw;
		justify-content: center;
		}
		.list_sns li {
		margin-left: 5.333vw;
		}
	}
	
	/*--footer----------------------------------------------------------*/
	footer {
		width: 100%;
		padding: 80px 0;
		text-align: center;
	}
	
	.footer_logo {
		display: flex;
		justify-content: center;
	}
	.footer_logo li {
		margin: 0 40px;
	}
	
	footer address {
		font-weight: 700;
		font-size: 1rem;
		font-style: normal;
		margin-top: 70px;
	}