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

/*--------------------------------------------------
	CSSカスタムプロパティ
--------------------------------------------------*/
:root{
/* 色 */
	--color01: #798c9c; 
	--color02: #3e9ae1;
	--color03: #c8a09b;
	--color04: #026883;
	--white: #fff;
	--black: #0c0c0c;
	--gray: #f1f5f8;

/* コンテナーサイズ */
	--container_size: 1000px;
	--container_size_big: 1280px;

}

@media (max-width:768px) {
}

/*--------------------------------------------------
	Base
--------------------------------------------------*/
html, body{
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	width: 100vw;
	/* height: 100vh; */
	overflow-x: hidden;
}
html{
	scroll-behavior: smooth;
}
body{
	font-family: "Sawarabi Mincho";
}
.container{
	width: var(--container_size);
	margin: 0 auto;
}
.container_big{
	width: var(--container_size);
	margin: 0 auto;
}


@media screen and (min-width:769px) and ( max-width:1023px){
	.container,
	.container_big{
		width: calc(100% - 1rem);
		padding-inline: 0.5rem;
	}
}
@media (min-width:769px) {
	.sp{
		display:none !important;
	}
}
@media (max-width:768px) {
	.container,
	.container_big{
		width: calc(100% - 1rem);
		padding-inline: 0.5rem;
	}

	.pc{
		display:none !important;
	}
	img{
		width: 100%;
	}
}



/*--------------------------------------------------
	Base - よく使うやつ
--------------------------------------------------*/
a{
	color: var(--color02);
	transition: .3s;
}
	a:hover{
		opacity: .7;
	}
button{ /* リセット */
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
p{
	line-height: 1.7;
}

/* Box内のマージン調整 */
.stack_1remh > * + * {
	margin-top: 1.5rem;
}
.stack_3rem > * + * {
	margin-top: 3rem;
}
.stack_6rem > * + * {
	margin-top: 6rem;
}




/*--------------------------------------------------
	Header
--------------------------------------------------*/
header{
	position: fixed;
	width: 100vw;
	padding-block: 1.5rem;
	z-index: calc(infinity);
}
	header .container_big{
		display: flex;
		justify-content: flex-start;
	}
		header .container_big .logo{
			flex-grow: 3;
		}
	header .icon{
		display: flex;
		margin-right: 1.5rem;
	}
		header .icon li{
			margin-inline: 1rem;
		}
.change_color{
	background-color: rgba(0, 0, 0, .2);
	transition: 0.5s;
}


@media screen and (min-width:769px) and ( max-width:1280px){
	header .icon{
		margin-right: 5rem;
	}
}
@media (max-width:768px) {
	header h1 img{
		width: 30vw;
	}
	header .icon {
		margin-right: 4.5rem;
	}
		header .icon li {
			margin-inline: 0.5rem;
		}
			header .icon img{
				width: 7vw;
			}


}


	/*--------------------------------------------------
		HBM
	--------------------------------------------------*/
	.hbmenu_full_fade {
		position: relative;
		z-index: 3;
		top: -0.8rem;
	}
		.hbmenu_full_fade .toggle {
			position: absolute;
			z-index: 3;
			top: 0;
			left: 0;
			width: 10vw;
			height: 6vh;
			cursor: pointer;
			opacity: 0;
		}
			.hbmenu_full_fade .toggle:checked + .hamburger > span {
				-webkit-transform: rotate(135deg);
				transform: rotate(135deg);
			}
				.hbmenu_full_fade .toggle:checked + .hamburger > span:before,
				.hbmenu_full_fade .toggle:checked + .hamburger > span:after {
					top: 0;
					-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
				}
				.hbmenu_full_fade .toggle:checked + .hamburger > span:after {
					opacity: 0;
				}
			.hbmenu_full_fade .toggle:checked ~ .menu {
				visibility: visible;
				pointer-events: auto;
			}
				.hbmenu_full_fade .toggle:checked ~ .menu > div {
					transition-duration: 0.75s;
					-webkit-transform: scale(1);
					transform: scale(1);
				}
					.hbmenu_full_fade .toggle:checked ~ .menu > div > ul {
						opacity: 1;
					}
						.hbmenu_full_fade .toggle:checked ~ .menu > div > ul li{
							transition-delay: 0.4s;
						}
				.hbmenu_full_fade .toggle:hover + .hamburger {
					box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
				}
					.hbmenu_full_fade .toggle:checked:hover + .hamburger > span {
						-webkit-transform: rotate(225deg);
						transform: rotate(225deg);
						background: var(--color04);
					}
					.hbmenu_full_fade .toggle:checked + .hamburger > span {
						background: var(--color04);
					}
		.hbmenu_full_fade .hamburger {
			position: absolute;
			z-index: 2;
			top: 0;
			left: 0;
			display: block;
			height: 6vh;
			padding: 0.5em 1em;
			cursor: pointer;
			transition: box-shadow 0.4s ease;
			border-radius: 0 0.12em 0.12em 0;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
			.hbmenu_full_fade .hamburger > span {
				position: relative;
				top: 50%;
				display: block;
				width: 2.5vw;
				height: 2px;
				transition: all 0.4s ease;
				background: var(--white);
			}
				.hbmenu_full_fade .hamburger > span:before,
				.hbmenu_full_fade .hamburger > span:after {
					position: absolute;
					z-index: 3;
					top: -15px;
					left: 0;
					display: block;
					width: 2.5vw;
					height: 2px;
					content: '';
					transition: all 0.4s ease;
					background: inherit;
				}
				.hbmenu_full_fade .hamburger > span:after {
					top: 15px;
				}
		.hbmenu_full_fade .menu{
			position: fixed;
			top: 0;
			right: 0;
			z-index: 1;
			width: 100vw;
			height: 100vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(255,255,255 ,0.95);
		}
			.hbmenu_full_fade .menu > ul {
				display: block;
				max-height: 100vh;
				margin: 0;
				padding: 0 1em;
				list-style: none;
				transition: opacity 0.4s ease;
				text-align: center;
			}
			.hbmenu_full_fade .menu .menu_item{
				display: block;
				position: relative;
				padding: 2rem 0;
			}
				.hbmenu_full_fade .menu .menu_item::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					display: inline-block;
					width: 50px;
					height: 1px;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					background-color: var(--white);
				}
				.hbmenu_full_fade .menu .menu_item:nth-last-of-type(1)::after {
					width: 0;
					height: 0;
					background: rgba(255,255,255,.0);
				}
			.hbmenu_full_fade .menu .menu_item a {
				position: relative;
				display: inline;
				cursor: pointer;
				transition: color 0.4s ease;
				text-decoration: none;
			}
				.hbmenu_full_fade .menu .menu_item a:after {
					position: absolute;
					z-index: 1;
					bottom: -0.15em;
					left: 0;
					width: 0;
					height: 2px;
					content: '';
					transition: width 0.4s ease;
					background: var(--white);
				}
	/*----------------------------
	* アニメーション部分
	*----------------------------*/
	.menu{
		pointer-events: none;
		opacity: 0;
		transition: opacity .3s linear;
	}
		.menu.is-active{
			pointer-events: auto;
			opacity: 1;
		}
	
	@media screen and (min-width:769px) and ( max-width:1279px){
		.hbmenu_full_fade {
			top: -1rem;
			right: 10vw;
			}	
			.hbmenu_full_fade .hamburger > span,
			.hbmenu_full_fade .hamburger > span:before,
			.hbmenu_full_fade .hamburger > span:after {
				width: 2rem;
			}
		}			
	@media (max-width:768px) {
		.hbmenu_full_fade {
		top: -1rem;
		right: 14vw;
		}
		.hbmenu_full_fade .hamburger > span,
		.hbmenu_full_fade .hamburger > span:before,
		.hbmenu_full_fade .hamburger > span:after {
			width: 8vw;
		}
		.hbmenu_full_fade .menu .menu_item {
			padding: 1.2rem 0;
		}
		.hbmenu_full_fade img{
			width: 8vw !important;
		}
	}




/*--------------------------------------------------
	MV
--------------------------------------------------*/
.mv_wrap{
	background: url(../images/webp/mv_bg.webp);
	background-size: cover;
	height: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	animation-name: fadein;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
	.mv_wrap p{
		color: var(--white);
		font-size: 16px;
	}
	.mv_wrap p.catch{
		font-size: 48px;
		margin-top: 500px;
	}
	.mv_wrap p.sub_catch{
		font-family: sans-serif;
	}

	@keyframes fadein {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

@media screen and (min-width:769px) and ( max-width:1023px){

}
@media (max-width:768px) {
	.mv_wrap{
		background: url(../images/webp/mv_bg.webp);
		background-size: cover;
		background-position: 20%;
		height: 50vh;
	}
	
	.mv_wrap p{
		font-size: 3vw;
	}
	.mv_wrap p.catch{
		font-size: 5vw;
		margin-top: 25vh;
	}

}



/*--------------------------------------------------
	Main
--------------------------------------------------*/
main section{
	padding-block: 15vh;
}


@media screen and (min-width:769px) and ( max-width:1023px){

}
@media (max-width:768px) {
	main section{
		padding-block: 8vh;
	}	
}


	/*----------------------------------------------
		Main - button
	----------------------------------------------*/
	.btn_wrap{
		margin-block: 8vh 5vh;
	}
		a.btn{
			position: relative;
		}
			a.btn::before{
				content: '';
				display: inline-block;
				position: absolute;
			}
			a.btn::after{
				content: '';
				display: inline-block;
				position: absolute;
			}

	a.btn_white button{
		font-size: 32px;
		font-family: "Sawarabi Mincho";
		color: var(--white);
	}
		a.btn_white::before{
			background-image: url(../images/webp/btn_line_lw.webp);
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			width: 260px;
			height: 33px;
			top: 1.2rem;
			right: 1.5rem;
		}
		a.btn_white::after{
			background-image: url(../images/webp/btn_line_rw.webp);
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			width: 260px;
			height: 33px;
			top: -3rem;
			left: 1.5rem;
		}
		a.btn_white:hover::before{
			right: 3.5rem;
			transition: .3s;
		}
		a.btn_white:hover::after{
			left: 3.5rem;
			transition: .3s;
		}

	a.btn_blue button{
		font-size: 32px;
		font-family: "Sawarabi Mincho";
		color: var(--color04);
	}
		a.btn_blue::before{
			background-image: url(../images/webp/btn_line_lb.webp);
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			width: 260px;
			height: 33px;
			top: 1.2rem;
			right: 7rem;
		}
		a.btn_blue::after{
			background-image: url(../images/webp/btn_line_rb.webp);
			background-repeat: no-repeat;
			background-size: contain;
			vertical-align: middle;
			width: 260px;
			height: 33px;
			top: -3rem;
			left: 7rem;
		}
		a.btn_blue:hover::before{
			right: 9rem;
			transition: .3s;
		}
		a.btn_blue:hover::after{
			left: 9rem;
			transition: .3s;
		}

		@media (max-width:768px) {
			.btn_wrap{
				margin-block: 5vh;
			}		
			a.btn_white button,
			a.btn_blue button{
				font-size: 4.5vw;
			}
				a.btn_white::before{
					width:50vw;
					top: 1rem;
					right: -1.5rem;
				}
				a.btn_white::after{
					width:50vw;
					top: -2rem;
					left: -1.5rem;
				}
				a.btn_white:hover::before{
					right: 0.5rem;
					transition: .3s;
				}
				a.btn_white:hover::after{
					left: 0.5rem;
					transition: .3s;
				}
	
				a.btn_blue::before{
					width:50vw;
					top: 1rem;
					right: 1.5rem;
				}
				a.btn_blue::after{
					width:50vw;
					top: -2rem;
					left: 1.5rem;
				}
					a.btn_blue:hover::before{
						right: 3rem;
						transition: .3s;
					}
					a.btn_blue:hover::after{
						left: 3rem;
						transition: .3s;
					}
		}


	/*----------------------------------------------
		Main - section01
	----------------------------------------------*/
	#sec01{
		background: var(--gray);
		text-align: center;
	}
		#sec01 .text p{
			font-size: 16px;
			margin-bottom: 1.5rem;
		}
	
	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#sec01 h2 img{
			width: 80vw;
		}
		#sec01 .text p{
			font-size: 3.5vw;
		}
	}
	
		
	

	/*----------------------------------------------
		Main - section02
	----------------------------------------------*/
	#sec02{
		text-align: center;
		padding-bottom: 5vh;
	}
		#sec02 .bg_ttl{
			padding-bottom: 20vh;
		}
		#sec02 .bg_grad{
			background: -moz-linear-gradient(80deg, #3e9ae1, #c8a09b); 
			background: -webkit-linear-gradient(80deg, #3e9ae1, #c8a09b); 
			background: linear-gradient(80deg, #3e9ae1, #c8a09b); 
			padding-block: 0 8vh;
			position: relative;
		}
		#sec02 .img{
			position: relative;
			top: -15vh;
			z-index: 2;
			margin-bottom: -10vh;
		}
		#sec02 .text p{
			font-size: 16px;
			color: var(--white);
		}



	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#sec02 h2 img{
			width: 75vw;
		}
		#sec02 .bg_ttl{
			padding-bottom: 15vh;
		}
		#sec02 .img{
			width: 50vw;
			top: -12vh;
			margin-inline: auto;
		}
		#sec02 .text p{
			font-size: 3.5vw;
		}


	}
	
		
	
	/*----------------------------------------------
		Main - section03
	----------------------------------------------*/
	#sec03{
		background: var(--gray);
		text-align: center;
	}
		#sec03 p{
			font-size: 16px;
		}
		#sec03 .achievement_wrap{
			background: var(--color01);
			color: var(--white);
			text-align: left;
			padding: 1.5rem;
			box-sizing: border-box;
		}
			#sec03 .achievement_wrap h3{
				font-size: 24px;
				font-weight: 100;
				margin-bottom: 0.8rem;
			}
				#sec03 .achievement_wrap h3::before{
					content: "【";
				}
				#sec03 .achievement_wrap h3::after{
					content: "】";
				}


	@media screen and (min-width:769px) and ( max-width:1023px){
		#sec03 .achievement_wrap{
			width: 90vw;
			margin-inline: auto;
		}

	}
	@media (max-width:768px) {
		#sec03 h2 img{
			width: 65vw;
		}
		#sec03 p{
			font-size: 3.5vw;
		}
		#sec03 .achievement_wrap{
			width: 80vw;
			margin-inline: auto;
		}
			#sec03 .achievement_wrap h3{
				font-size: 5vw;
			}


	}
	
		
	
	/*----------------------------------------------
		Main - section04
	----------------------------------------------*/
	#sec04{
		text-align: center;
		padding-bottom: 0;
	}
		#sec04 table{
			width: 750px;
			margin-inline: auto;
		}
			#sec04 th,
			#sec04 td{
				border-bottom: 1px solid var(--color04);
				font-size: 16px;
				padding-block: 1rem;
			}
			#sec04 th{
				width: 12rem;
				text-align: center;
			}
			#sec04 td{
				text-align: left;
			}
	#sec04 .map{
		margin-top: 6vh;
		margin-bottom: -5px;
	}
		#sec04 .map iframe{
			width: 100vw;
			aspect-ratio: 16/9;
		}


	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#sec04 h2 img{
			width: 65vw;
		}
		#sec04 table{
			width: 90vw;
		}
			#sec04 th,
			#sec04 td{
				font-size: 3.5vw;
			}
			#sec04 th{
				width: 8rem;
			}

	}
	
		
	
	/*----------------------------------------------
		Main - section05
	----------------------------------------------*/
	#sec05{
		background: url(../images/webp/sec05_bg.webp) no-repeat;
		width: 100vw;
		height: 600px;
		text-align: center;
		padding-bottom: 5vh;
	}
		#sec05 p{
			font-size: 16px;
			padding-bottom: 5vh;
		}


	@media screen and (min-width:769px) and ( max-width:1023px){

	}
	@media (max-width:768px) {
		#sec05{
			height: 30vh;
			background-size: cover;
			background-position: 85%;
		}
			#sec05 p{
				font-size: 3.5vw;
				padding-bottom: 0;
			}
		#sec05 h2 img{
			width: 70vw;
		}
	}



/*--------------------------------------------------
	Footer
--------------------------------------------------*/
footer{
	background: var(--black);
	padding-block: 1.5rem;
}
	footer p{
		color: var(--white);
		font-size: 16px;
		text-align: center;
	}



@media screen and (min-width:769px) and ( max-width:1023px){

}
@media (max-width:768px) {
	footer p{
		font-size: 3vw;
	}

}