@charset "utf-8";
@import url('destyle.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

*{
	--text_black 	: #333333;
	--text_blue 	: #0068D0;
	--text_skyblue 	: #00BBF3;
	--text_redorange: #ff7913;
	--text_orange 	: #ff7913;
	--bg_blue 		: #0077F3;
	--bg_liteblue 	: #D2EDFB;
	--bg_darkblue 	: #0068D0;
	--bg_yerrow 	: #ffffe1;
	--l-gray	:#f1f1f1;
	
	@media screen and (max-width: 640px) {
		--nav_text : 3vw;
	}
}
html,body {
	font-family 				: "Noto Sans JP", sans-serif;
	font-feature-settings 		: "palt";
	scroll-behavior: smooth;
	/*user-select: none;*/
}
button {
	pointer-events: all;
}
a {
	text-decoration : underline;
	color 			: blue;
}
mark {
	font-weight 	: 600;
	color 			: var(--text_redorange);
	background      : linear-gradient(transparent 70%, rgb(255,181,51, 0.5) 0%);
	padding 		: 0 0 0.2cqw;
	display 		: inline;
}

/* =============================================

	current-layout

============================================= */

.sc_num {
	position: fixed;
	top 		: 10px;
	right 		: 10px;
	font-size 	: 20px;
	color 		: red;
}

.car_position { /* 検証用　ボーダー */
	/*border 		: solid 1px red;*/
}

.car {
	pointer-events: none;
	position 	: fixed;
	top 		: -200px;
	left 		: -200px;
	z-index 	: 10;
	filter 		: drop-shadow(0.2cqw 0.2cqw 0.1cqw rgba(0, 0, 0, 0.35));
	transform: rotate(0deg);
	& img {
		width 	: 100%;
		height 	: auto;
		transition: width 
	}
}

/* =============================================

	header-layout

============================================= */

header {
		background            : linear-gradient(0deg, #D1ECFB, rgb(0,0,0,0));
}

@media (min-width:640px) {
	header {
		height 		: 100vh;
		min-height 	: 700px; 
		width 		: 100%;
		transition: height 0.3s ease-in-out;
		@media (max-width:1000px) {
			height 	: 70cqw;
			min-height 	: 65cqw;
		}
		& .container {
			background            : url("../images/top/bg_header.png") no-repeat right center / 73%;
			width 			: 100%;
			max-width 		: 1280px;
			margin 			: 0 auto;
			min-height 		: 670px; 
			container-type 	: inline-size;
			position 		: relative;
			display  		: flex;
			flex-direction 	:row-reverse;;
			align-items 	: center;
			column-gap 		: 1vw;
			height 			: 93vh;
			transition 		: height 0.3s ease-in-out;
		
			@media (max-width:1000px) {
				height 		: 66cqw;
				min-height 	: 61cqw;
			}
		}
		& .information {
			background-color: var(--bg_yerrow);
			border-bottom 	: solid 3px var(--bg_blue);
			height 			: 7vh;
			@media (max-width:1000px) {
				height 	 	: 4cqw;
				min-height 	: 4cqw;
				border-bottom 	: solid 0.3cqw #0077F3;
			}
		}
		& .navigation {
			width 		: 25vw;
		}
		& .main {
			width 		: 74vw;
			height 		: 100vh;
			min-height 	: 700px; 
			@media (max-width:1000px) {
				height 	: 65cqw;
				min-height 	: 60cqw;
			}
			display 	: flex;
			align-items : center;
		}
	}
	header .nav_btn {
		display: none;
	}
	header .navigation {
		padding-top: 50px;
		@media (max-width:1280px) {
			padding-top: 4.1cqw;
		}
		& ul {
			margin-bottom: 30px;
			@media (max-width:1280px) {
				margin-bottom: 2.5cqw;
			}
		}
		& li {
			margin-bottom: 15px;
			@media (max-width:1280px) {
				margin-bottom: 1.2cqw;
			}
			& a {
				background-color: #0077F3;
				padding 		: 10px 10px 10px 25px; 
				display 		: block;
				font-size 		: 20px;
				font-weight 	: 600;
				color 			: #fff;
				text-decoration : none;
				border-radius 	: 0 9999px 9999px 0;
				border 			: solid 3px #fff;
				border-left		: none;
				transition 		: filter 0.2s ease-in-out; 
				filter 			: drop-shadow(0.2cqw 0.2cqw 0.1cqw rgba(0, 0, 0, 0.35));
				@media (max-width:1280px) {
					font-size 		: 1.57cqw;
				}
			}
			& a:hover {
				background-color: var(--bg_blue);
				filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
			}
		}
		& .bnr {
			margin 		: 30px 0 0 0px;
			height 		: 70px;
			& img {
				width 	: 100%;
				height 	: auto;
			}
			@media (max-width:1280px) {
				margin 		: 2.5cqw 0 0 0;
				height 		: 5.4cqw;
			}
			& a {
				filter 			: drop-shadow(0.3cqw 0.3cqw 0.1cqw rgba(0, 0, 0, 0.3));
			}
			& a:hover {
				filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
			}
			
			
		}
	}
	header .main {
		position:relative;
		& .title_band {
			width 		: 100%;
			padding 	: 30px !important;
			position 	: absolute;
			right 		: 0;
			@media (max-width:1280px) {
				padding 	: 2.55cqw 20cqw 2.55cqw 10cqw; 
			}
		}
		& .car_position {
			width 		: 14cqw;
			height 		: 14cqw;
			position 	: absolute;
			top 		: 0;
			right 		: 0;
			& img {
				width 	: 100%;
				height 	: auto; 
			}
		}
		& h1 {
			display  	: block;
			text-align 	: center;
			margin-bottom: 25px;
			@media (max-width:1280px) {
				margin-bottom: 2cqw;
			}
			& span {
				display : block;
				width 	: 320px;
				margin 	: 0 auto 10px;
				filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1)); 
				@media (max-width:1280px) {
					width 	: 27cqw;
					margin 	: 0 auto 0.8cqw; 
				}
			}
			& small {
				color 		: #333;
				font-weight : 800;
				filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1)); 
				@media (max-width:1280px) {
					font-size 	:  1cqw;
				}
				& em {
					color 	: var(--text_skyblue);
					font-style: normal;
				}
			}
			& small::before {
				content: "ー ";
			}
			& small::after {
				content: " ー";
			}
		}
		& .copy {
			line-height : 1.4;
			font-size 	: 24px;
			font-weight : 800;
			color 		: var(--text_black);
			text-align 	: center;
			filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1)); 
			@media (max-width:1280px) {
				font-size 	: 2cqw;
			}
			& strong {
				color 	: var(--text_redorange);
			}
			& em {
				font-style  : normal;
				color 		: var(--text_redorange);
			}
		}
	}
	header .information {
		font-size 	: 16px;
		display 	: flex;
		align-items : center;
		justify-content: center;
		@media (max-width:1280px) {
			font-size 	: 1.25cqw;
		}
		
		& dl div {
			overflow 		: hidden;
			display 		: flex;
			gap  			: 15px; 
		}
	}
}

@media (max-width:640px) {
	header {
		width 		: 100%;
		aspect-ratio: 10/9;
		transition: height 0.3s ease-in-out;		
		& .container {
			container-type 	: inline-size;
			background      : url("../images/top/bg_header.png") no-repeat center top 20px / 98%;
			width 			: 100%;
			height 			: 95%;
			margin 			: 0 auto;
			position 		: relative;
			column-gap 		: 1vw;
			transition 		: height 0.3s ease-in-out;
		}
		& .information {
			pointer-events: all;
			background-color: var(--bg_yerrow);
			border-bottom 	: solid 3px var(--bg_blue);
			height 			: 25cqw;
		}
		& .navigation {
			width 		: 100%;
		}
		& .main {
			width 		: 100%;
			margin-top 	: 23cqw;
		}
	}
	header .navigation {
		background 		: rgb(0,0,0,0);
		padding-top 	: 20cqw;
		height 			: 100vh;
		position 		: fixed;
		top 			: 0;
		left 			: 0;
		transition 		: background 0.3s;
		z-index 		: 1000000;
		pointer-events : none;
		& nav{
			pointer-events : none;
			width 			: 100%;
			height 			: 100%;
			position 		: absolute;
			padding-right 	: 20%;
			top 			: 0;
			left 			: -100vw;
			transition 		: left 0.3s;
			overflow-y 		: auto;
		}
		
		&.open_nav {
			left 			: 0vw;
			background 		: rgb(0,0,0,0.75);
			& nav{
				left 			: 0;
			}
		}
		& .nav_btn {
			pointer-events : all;
			background-color: var(--text_blue);
			
			width 		: 13cqw;
			height 		: 13cqw;
			position 	: absolute;
			right 		: 3cqw;
			top 		: 5cqw;
			border 		: solid 2px #fff;
			border-radius: 6px;
			filter 		: drop-shadow(0.3cqw 0.3cqw 0.2cqw rgba(0, 0, 0, 0.35));
			
			& div{
				width 	: 8cqw;
				height 	: 7cqw;
				position: relative;
				top 	: 0;
				left 	: 50%;
				transform: translateX(-50%) translateZ(0);
				cursor: pointer;
			}
			& span {
				position: absolute;
				left 	: 0;
				width 	: 100%;
				height 	: 4px;
				background-color: #fff;
				border-radius: 4px;
			}
			& div,
			& span {
				display : inline-block;
				transition: all .5s;
				box-sizing: border-box;
			}
			& div span:nth-of-type(1) {
				top 	: 0;
			}
			& div span:nth-of-type(2) {
				top 	: 50%;
				transform: translateY(-50%) translateZ(0);
			}
			& div span:nth-of-type(3) {
				bottom 	: 0;
			}
		}
		& .nav_btn div.active {
			& span:nth-of-type(1) {
				top : 50%;
				transform: translateY(-50%) translateZ(0) rotate(315deg);
			}
			& span:nth-of-type(2) {
				opacity  : 0;
			}
			& span:nth-of-type(3) {
				top : 50%;
				transform: translateY(-50%) translateZ(0) rotate(-315deg);
			}
		}
		
		& ul {
			margin-top 		: 20cqw;
			margin-bottom 	: 30px;
		}
		& li {
			margin-bottom: 15px;
			& a {
				pointer-events : all;
				background-color: #0077F3;
				padding 		: 10px; 
				display 		: block;
				font-size 		: 20px;
				font-weight 	: 600;
				color 			: #fff;
				text-decoration : none;
				border-radius 	: 0 9999px 9999px 0;
				border 			: solid 3px #fff;
				border-left		: none;
				transition 		: filter 0.2s ease-in-out; 
				filter 			: drop-shadow(0.2cqw 0.2cqw 0.1cqw rgba(0, 0, 0, 0.35));
			}
			& a:hover {
				background-color: var(--bg_blue);
				filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
			}
		}
		& .bnr {
			pointer-events : all;
			margin 		: 30px 0 0 20px;
			height 		: 80px;
			@media (max-width:400px) {
				height 		: 70px
			}
			text-align: center;
			& img {
				width 	: 100%;
				height 	: auto;
			}
			& a.txt_btn {
				background-color: var(--text_orange);
				font-size 	: 18px;
				padding 	: 10px;
				display 	: block;
				border 		: solid 2px #fff;
				border-radius: 6px;
				filter 			: drop-shadow(0.3cqw 0.3cqw 0.1cqw rgba(0, 0, 0, 0.3));
				text-decoration: none;
				color 		: #fff;
				font-weight : 600;
			}
			& a.txt_btn small {
				font-size 	: 75%;
				display 	: block;
				margin-bottom: -15px;
				text-align 	: center;
			} 
			& a.txt_btn:hover {
				filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
			}
		}
	}
	header .main {
		& .title_band {
			width 		: 100%;
			padding 	: 30px;
			position 	: relative;
		}
		& .car_position {
			width 		: 20cqw;
			height 		: 20cqw;
			position 	: absolute;
			top 		: 0;
			right 		: 0;
			& img {
				width 	: 100%;
				height 	: auto; 
			}
		}
		& h1 {
			pointer-events : none;
			display  	: block;
			text-align 	: center;
			margin-bottom: 26cqw;
			font-size 	: 2.3cqw;
			& span {
				display : block;
				width 	: 55%;
				margin 	: 0 auto 13px;
				filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1));
			}
			& small {
				color 		: #333;
				font-weight : 800;
				filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1));
				& em {
					color 	: var(--text_skyblue);
					font-style: normal;
				}
			}
			& small::before {
				content: "ー ";
			}
			& small::after {
				content: " ー";
			}
		}
		& .copy {
			line-height: 1.6;
			font-size 	: 4cqw;
			font-weight : 800;
			color 		: var(--text_black);
			text-align 	: center;
			filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1));
			& strong {
				color 	: var(--text_redorange);
			}
			& em {
				font-style  : normal;
				color 		: var(--text_redorange);
			}
		}
	}
	header .information {
		font-size 	: 16px;
		display 	: flex;
		align-items : center;
		justify-content: center;
		
		& dl div {
			overflow 		: hidden;
			padding 		: 10px;
		}
		& dl div dt {
			margin-bottom 	: 10px;
			font-size 		: 18px;
		}
		& dl div dd {
			line-height: 1.6;
		}
	}
}



/* =============================================

	main-layout

============================================= */

main {
		container-type 	: inline-size;
}

/* == background
============================================= */

#background {
	padding: 60px 0;
	& .container {
		width 		: 70%;
		max-width 	: 700px;
		min-width 	: 300px;
		margin 		: 0 auto;
		position 	: relative;
		@media (max-width:1000px) {
			width 	: 90%;
		}
	}
	& .car_position {
		width 		: 140px;
		position 	: absolute;
		top 		: -15px;
		left 		: -65px;
		@media (max-width:800px) {
			top 		: -15px;
			left 		: -25px;
		}
		@media (max-width:700px) {
			width 		: 110px;
		}
		@media (max-width:640px) {
			width 		: 110px;
			top 		: -65px;
			left 		: -25px;
		}
	}
	& h2 {
		background: url("../images/top/bg_background_h2.png") no-repeat right bottom / contain;
		padding-right 	: 12cqw;
		font-size 		: 26px;
		font-weight 	: 900;
		color 			: var(--text_orange);
		text-align 		: center;
		margin-bottom 	: 40px;
		display 		: flex;
		align-items 	: center;
		justify-content : center;	
		& span {
			margin: 0 5px;
		}
		& .circle {
			width 			: 100px;
			height 			: 100px;
			aspect-retio 	: 1 / 1;
			border-radius 	: 9999px;
			border 			: solid 2px var(--text_orange);
			display 		: flex;
			align-items 	: center;
			justify-content : center;
		}
		/*
		@media (max-width:1280px) {
			font-size 	 :  2cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:1000px) {
			background: transparent;
			padding-right 	: 0;
			font-size 	 :  3cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:640px) {
			padding-right 	: 0;
			font-size 		: 26px;
			margin-bottom: 40px;
		}
		@media (max-width:530px) {
			width 			: 50px;
			height 			: 50px;
			aspect-retio 	: 1 / 1;
			font-size 		: 16px!important;
		}
		*/
		& img {
			width 	: 70%;
			height 	: auto;
		} 
		@media (max-width:640px) {
			background : none;
			text-align : left;
			padding-right 	: 0;
			& img {
				width 	: 90%;
				height 	: auto;
			}
		}
	}
	& p {
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 30px;
		@media (max-width:1280px) {
			font-size 	:  1.4cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:640px) {
			font-size 	:  20px;
		}
	}
	& figure {
		width 			: 65%;
		max-width 		: 600px;
		min-width 		: 300px;
		margin-bottom 	: 40px;
		text-align 		: center;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		
		& img{
			width 		: 100%;
			height 		: auto;
		}
	}
	& button {
		background-color: #0077F3;
		margin 		: 0 auto;
		font-size 	: 18px;
		font-weight : 600;
		color 		: white;
		padding 	: 15px 20px;
		border-radius: 6px;
		border 		: solid 3px #fff;
		position 	: relative;
		left 		: 50%;
		transform 	: translateX(-50%);
		transition 	: filter 0.2s ease-in-out; 
		filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
		@media (max-width:1280px) {
			font-size 	:  1.5cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:640px) {
			font-size 	:  3.7cqw;
		}
	}
	& button:hover {
		background-color: var(--bg_darkblue);
		filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
	}
}

/* == purpose
============================================= */

#purpose {
	background-color 	: var(--bg_yerrow);
	padding 			: 30px 0 60px;
	& .container {
		width 			: 100%;
		max-width 		: 1030px;
		min-width 		: 300px;
		padding 		: 0 15px;
		margin 			: 0 auto;
		position 		: relative;
		container-type 	: inline-size;
	}
	& .car_position {
		width 		: 120px;
		position 	: absolute;
		top 		: -25px;
		right 		: 40px;
		@media (max-width:640px) {
			width 		: 20cqw;
			top 		: -35px;
			right 		: 5px;
		}
		@media (max-width:540px) {
			width 		: 15cqw;
			top 		: -35px;
			right 		: 5px;
		}
	}
	& h3 {
		background 		: url("../images/top/bg_purpose_h3.png") no-repeat left bottom / contain;
		padding 		: 3cqw 0 3cqw 12cqw;
		text-align 		: center;
		font-size 		: 30px;
		font-weight 	: 800;
		color 			: var(--text_orange);
		margin-bottom 	: 30px;
		display 		: inline-block;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:1280px) {
			font-size 	:  3cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:640px) {
			font-size 	:  25px;
			margin-bottom: 25px;
			padding 	: 3cqw 0 3cqw 16cqw;
			left 		: 0%;
			transform 	: translateX(0%);
		}
	}
	& .leadcopy {
		font-size 		: 18px;
		font-weight 	: 600;
		line-height 	: 1.6;
		color 			: var(--text_black);
		margin-bottom 	: 30px;
		display 		: inline-block;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:1280px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:800px) {
			font-size 	:  2cqw;
		}
		@media (max-width:640px) {
			font-size 		: 18px;
		}
	}
	& ol {
		background-color: #fff;
		color 			: var(--text_black);
		border-radius 	: 1cqw;
		padding 		: 3cqw;
		counter-reset 	: ol_num;
		margin-bottom 	: 40px; 
	}
	& ol > li{
		font-size 		: 18px;
		font-weight 	: 500;
		position 		: relative;
		margin 			: 12px 20px 0 24px;
		padding-left 	: 2em;
		line-height 	: 1.5;
		@media (max-width:1280px) {
			font-size 	: 1.8cqw;
		}
		@media (max-width:800px) {
			font-size 	: 2cqw;
		}
		@media (max-width:640px) {
			font-size 		: 18px;
		}
	}
	& ol > li:before {
		background-color: var(--bg_blue);
		width 			: 18px;
		height 			: 18px;
		font-size 		: 14px;
		color 			: #fff;
		position 		: absolute;
		left 			: 0;
		top 		 	: 3px;
		counter-increment: ol_num;
		content 		: counter(ol_num);
		display 		: flex;
		align-items 	: center;
		justify-content : center;
		border-radius 	: 3px;
		@media (max-width:1280px) {
			width 		: 1.6cqw;
			height 		: 1.6cqw;
			font-size 	: 1.2cqw;
			border-radius: 0.3cqw;
		}
		@media (max-width:800px) {
			width 		: 2cqw;
			height 		: 2cqw;
			font-size 	: 1.6cqw;
			border-radius: 0.3cqw;
		}
		@media (max-width:640px) {
			width 		: 18px;
			height 		: 18px;
			top 		: 5px;
			font-size 	: 16px;
			border-radius: 3px;
		}
	}	
	& figure {
		width 			: 65%;
		max-width 		: 700px;
		min-width 		: 300px;
		margin-bottom 	: 40px;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		& img{
			width 		: 100%;
			height 		: auto;
		}
		& ul {
			margin-top 	: 30px; 
			position 	: relative;
			left 		: 50%;
			transform 	: translateX(-50%);
		}
		& ul li {
			font-size 	: 14px;
			line-height : 1.6;
			text-indent : -2em;
			padding-left: 2em;
			margin-bottom: 5px;
			@media (max-width:1280px) {
				font-size 	:  1.4cqw;
			}
			@media (max-width:800px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 		: 14px;
			}
		}
		@media (max-width:800px) {
			width 			: 80%;
			max-width 		: 800px;
		}
		@media (max-width:640px) {
			width 			: 95%;
		}
	}
	
	& .btn {
		text-align: center;
		& a {
			background-color: var(--bg_blue);
			padding 	: 15px 20px;
			margin 		: 0 auto;
			font-size 	: 18px;
			font-weight : 600;
			color 		: white;
			text-decoration: none;
			border-radius: 6px;
			border 		: solid 3px #fff;
			display 	: inline-block;
			transition 	: filter 0.2s ease-in-out; 
			filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
			@media (max-width:1280px) {
				font-size 	:  1.5cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 	:  3.7cqw;
			}
		}
		& a:hover {
			background-color: var(--bg_darkblue);
			filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
		}
	}
	
	& button {
		background-color: #0077F3;
		margin 		: 0 auto;
		font-size 	: 18px;
		font-weight : 600;
		color 		: white;
		padding 	: 15px 20px;
		border-radius: 6px;
		border 		: solid 3px #fff;
		position 	: relative;
		left 		: 50%;
		transform 	: translateX(-50%);
		transition 	: filter 0.2s ease-in-out; 
		filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
		@media (max-width:1280px) {
			font-size 	:  1.5cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:640px) {
			font-size 	:  3.7cqw;
		}
	}
	& button:hover {
		background-color: var(--bg_darkblue);
		filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
	}
}

/* == participation
============================================= */

#participation {
	padding: 60px 0;
	border-bottom: double 3px #ccc;
	
	& .container {
		width 			: 100%;
		max-width 		: 1030px;
		min-width 		: 300px;
		padding 		: 0 15px;
		margin 			: 0 auto;
		position 		: relative;
		container-type 	: inline-size;
	}
	& .car_position {
		width 			: 120px;
		position 		: absolute;
		top 			: -45px;
		left 			: -10px;
		@media (max-width:900px) {
			width 		: 110px;
		}
		@media (max-width:800px) {
			top 		: -65px;
		}
		@media (max-width:700px) {
			top 		: -95px;
		}
	}
	& h3 {
		padding-bottom 	: 3cqw;
		text-align 		: center;
		font-size 		: 30px;
		font-weight 	: 800;
		color 			: var(--text_orange);
		margin-bottom 	: 30px;
		display 		: inline-block;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:1280px) {
			font-size 	:  3cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:640px) {
			font-size 	:  22px;
			margin-bottom: 22px;
		}
		@media (max-width:530px) {
			font-size 	:  20px;
			margin-bottom: 20px;
		}
	}
	& ul {
		background-color: var(--bg_liteblue);
		padding 		:  3cqw;
		border-radius 	: 1cqw;
		display 		: flex;
		flex-wrap 		: wrap;
		gap 		 	: 15px; 
	}
	& ul > li {
		width 			: calc(50% - 15px);
		font-size 		: 16px;
		font-weight 	: 500;
		color 			: var(text_black);
		@media (max-width:1280px) {
			font-size 	:  1.6cqw;
		}
		@media (max-width:800px) {
			font-size 	:  2cqw;
		}
		@media (max-width:640px) {
			width 			: calc(90% - 15px);
			font-size 		: 16px;
		}
	}
	
}

/* == company_sem
============================================= */

#company_sem {
	background-color: var(--bg_liteblue);
	padding: 60px 0 0;
	position: relative;
	
	& .information {
		background-color: var(--bg_darkblue);
		font-size 		: 16px;
		color 			: #fff;
		padding 		: 5px 10px 8px;
		margin-right 	: 15px; 
		border-radius 	: 0 0 3px 3px;
		position 		: absolute;
		left  			: 10px;
		top 			: 0;
	}
	& .container {
		width 			: 100%;
		max-width 		: 830px;
		min-width 		: 300px;
		padding 		: 0 15px;
		margin 			: 0 auto;
		position 		: relative;
		container-type 	: inline-size;
	}
	& .car_position {
		width 			: 150px;
		position 		: absolute;
		top 			: -75px;
		right 			: 25px;
		@media (max-width:700px) {
			width 		: 110px;
			top 		: -15px;
			right 		: 5px;
		}
		@media (max-width:640px) {
			font-size 	:  5cqw;
			margin-bottom: 22px;
			top 		: -50px;
		}
	}
	& h3 {
		font-size 		: 34px;
		font-weight 	: 700;
		color 			: var(--text_black);
		text-align 		: center;
		line-height 	: 1.4;
		margin-bottom 	: 40px;
		@media (max-width:1280px) {
			font-size 	:  5cqw;
			margin-bottom: 4cqw;
		}
		@media (max-width:640px) {
			margin-bottom: 6cqw;
		}
		& small {
			padding-bottom: 10px;
			margin-bottom: 30px;
			font-size 	: 50%;
			display 	: inline-block;
			color 		: var(--text_blue);
			border-bottom: solid 3px var(--text_blue);
			@media (max-width:640px) {
				font-size: 70%;
				margin-bottom: 10px;
			}
		}
		
		& span {
			display 	: block;
			color 		: var(--text_black);
		}
	}
	
	& h4 {
		width 			: 100%;
		margin-bottom 	: 30px; 
		font-size 		: 20px;
		font-weight 	: 800;
		color 			: var(--text_black);
		line-height 	: 1.4;
		position 		: relative;
		left			: 50%;
		transform 		: translateX(-50%);
		
		& em {
			font-style 	: normal;
			color 		: var(--text_redorange);
		}
		& mark {
			font-size 		: 140%;
		}
	}
	
	& p.txt {
		font-size 		: 18px;
		line-height 	: 1.6;
		position 		: relative;
		left			: 50%;
		transform 		: translateX(-50%);
		margin-bottom 	: 25px;
		@media (max-width:1280px) {
			font-size 	:  2cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  2.2cqw;
		}
		@media (max-width:640px) {
			line-height : 1.8;
			font-size 	:  3.7cqw;
		}
		&.end {
			margin-bottom: 40px;
		}
	}
	
	& h5 {
		width 			: 100%;
		margin-bottom 	: 25px; 
		font-size 		: 24px;
		font-weight 	: 800;
		color 			: var(--bg_darkblue);
		line-height 	: 1.4;
		@media (max-width:640px) {
			text-align 	: center;
		}
		
		& span {
			background-color: var(--bg_blue);
			font-size 		: 16px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
			@media (max-width:640px) {
				display 	: block;
				margin-bottom: 15px;
			}
		}
	}
	
	& dl.features {
		margin-bottom: 50px;
		& div {
			overflow 	: hidden;
			margin-bottom: 25px;
		}
		& dt {
			background-color: #fff;
			padding 	: 20px 70px 20px 50px;
			position 	: relative;
			border-radius: 6px;
			font-size 	: 18px;
			@media (max-width:1280px) {
				font-size 	:  2cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  2.2cqw;
			}
			@media (max-width:640px) {
				line-height : 1.4;
				font-size 	:  3.7cqw;
			}
			& i {
				background-image    : linear-gradient(-30deg, var(--text_blue) 51%, var(--text_blue) 51%);
				width 				: 30px;
				height 				: 30px;
				border-radius 		: 9999px;
				position 			: absolute;
				top 				: 50%;
				right				: 20px;
				transform 			: translateY(-50%);
				filter 				: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
				& .plus {
					position 	: relative;
					display 	: block;
					width 		: 30px;
					height 		: 30px;
					transform-origin: center;
					transition 	: transform 0.3s, width 0.3s ,height 0.3s;
				}
				& .plus:before,& .plus:after {
					background-color: #fff;
					margin 		: auto;
					border-radius: 10px;
					display 	: block;
					content 	: '';
					position 	: absolute;
					top  		: 50%;
					left 		: 50%;
					transform 	: translate(-50%,-50%);
				}
				& .plus:before {
					width 		: 3px;
					height 		: 16px;

				}
				& .plus:after {
					width 		: 16px;
					height 		: 3px;
				}
			}
		}
		& dt span.no {
			background-color: var(--text_blue);
			width  		: 18px;
			height 		: 18px;
			font-size 	: 70%;
			color 		: #fff; 
			border-radius: 0.3cqw;
			position 	: absolute;
			top 		: 22px;
			left 		: 15px;
			display 	: flex;
			align-items : center;
			justify-content: center;
			@media (max-width:1280px) {
				width  		:  2cqw;
			}
			@media (max-width:1000px) {
				width  		:  2.2cqw;
			}
			@media (max-width:640px) {
				line-height : 1.4;
				width  		:  3.7cqw;
			}
		}
		& dd {
			height 		: 0;
			font-size 	: 16px;
			line-height : 1.8;
			padding 	: 0 20px;
			overflow 	: hidden;
		}
	}
	& dl.features div.active {
		& .plus {
			transform 					: rotate(225deg);
			&::before {
				width 				: 3px;
			}
			&::after {
				height 				: 3px;
			}
		}
		
		& dd {
			height 		: 100%;
			display 	: block;
			padding 	: 20px;
		}
		
	}
	
	& ul.img_comp {
		display 			: flex;
		gap 				: 30px;
		margin-bottom 		: 40px;
		@media (max-width:640px) {
			background-color 	: #fff;
			width 				: 100%;
			display 			: block;
			padding 			: 15px;
			border-radius 		: 10px;
		}
	}
	
	& ul.img_comp > li {
		width 			: calc(33cqw - 30px);
		height 			: calc(33cqw - 30px);
		font-size 		: 18px;
		font-weight 	: 800;
		line-height 	: 1.6;
		color 			: var(--text_blue);
		display 		: flex;
		align-items 	: center;
		justify-content : center;
		@media (min-width:640px) {
			background 		:  url("../images/top/bg_company_sem_circle.svg") no-repeat center center / 90%;
		}
		@media (max-width:640px) {
			width 		: 100%;
			height 		: auto;
			font-weight : 600;
			padding-left: 1.2em;
			text-indent : -1.2em;
			margin-bottom: 15px;
			display 	: block;
			color 	: var(--text_blue);
			&::before{
				content : "● ";
				color 	: var(--text_blue);
			}
		}
	}
	& ul.img_comprequest {
		margin-bottom: 40px;
	}
	& ul.img_comprequest > li {
		color 			: var(--text_black);
		font-size 		: 18px;
		font-weight 	: 500;
		line-height 	: 1.6;
		margin-bottom 	: 15px;
		padding-left 	: 1.2em;
		text-indent 	: -1.2em;
		
	}
	& ul.img_comprequest > li::before {
		content : "● ";
		color 			: var(--text_blue);
	}
	& p.note {
		color 			: var(--text_black);
		font-size 		: 14px;
		font-weight 	: 500;
		line-height 	: 1.6;
		padding-left 	: 1.2em;
		text-indent 	: -1.2em;
		margin-bottom 	: 30px; 
	}
	& p.note::before {
		content : "※ ";
	}
	& .sem_schedule {
		background-color: var(--bg_yerrow);
		padding: 30px 0 60px;
		border-bottom: double 3px #ccc;
	}
	& .sem_schedule  h5 {
		width 			: 100%;
		margin-bottom 	: 25px; 
		font-size 		: 24px;
		font-weight 	: 800;
		color 			: var(--text_redorange);
		line-height 	: 1.4;
		@media (max-width:400px) {
			font-size 		: 20px;
		}
		& span {
			background-color: var(--bg_blue);
			font-size 		: 16px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
		}
	}
	& .sem_schedule .text {
		display: block;
		text-align: center;
		margin-top: 40px;
		font-size: 18px;
		@media (max-width:640px) {
			line-height : 1.4;
			font-size 	:  3.7cqw;
		}
	}
	& .schedule {
		margin-bottom 	: 60px;
	}
	& .schedule > li {
		width 			: 100%;
		margin-bottom 	: 15px;
		font-size 		: 18px;
		font-weight 	: 500;
		color 			: var(--bg_black);
		line-height 	: 1.4;
		@media (max-width:400px) {
			font-size 	:  3cqw;
		}
		& span {
			background-color: var(--text_black);
			font-size 		: 14px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
		}
	}
	
	& .btn {
		text-align: center;
		& a {
			background-color: var(--text_redorange);
			padding 	: 15px 40px;
			margin 		: 0 auto;
			font-size 	: 18px;
			font-weight : 600;
			color 		: white;
			text-decoration: none;
			border-radius: 9999px;
			border 		: solid 3px #fff;
			display 	: inline-block;
			transition 	: filter 0.2s ease-in-out,background 0.2s ease-in-out; 
			filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
			@media (max-width:1280px) {
				font-size 	:  1.5cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 	:  3.7cqw;
			}
		}
		& a:hover {
			background-color: #333;
			filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
		}
	}
}

/* == school_sem
============================================= */

#school_sem {
	padding: 60px 0 0;
	position: relative;
	& .information {
		background-color: var(--text_orange);
		font-size 		: 16px;
		color 			: #fff;
		padding 		: 5px 10px 8px;
		margin-right 	: 15px; 
		border-radius 	: 0 0 3px 3px;
		position 		: absolute;
		left  			: 10px;
		top 			: 0;
	}
	& .container {
		width 			: 100%;
		max-width 		: 830px;
		min-width 		: 300px;
		padding 		: 0 15px;
		margin 			: 0 auto 30px;
		position 		: relative;
		container-type 	: inline-size;
	}
	& .car_position {
		width 			: 110px;
		position 		: absolute;
		top 			: -15px;
		left 			: 0px;
		@media (max-width:640px) {
			width 			: 90px;
		}
	}
	& h3 {
		font-size 		: 34px;
		font-weight 	: 700;
		color 			: var(--text_black);
		text-align 		: center;
		line-height 	: 1.4;
		margin-bottom 	: 40px; 
		@media (max-width:640px) {
			font-size 	:  6cqw;
		}
		& small {
			padding-bottom: 10px;
			margin-bottom : 30px;
			font-size 	: 50%;
			display 	: inline-block;
			color 		: var(--text_orange);
			border-bottom: solid 3px var(--text_orange);
		}
		& span {
			display 	: block;
			color 		: var(--text_black);
		}
	}
	& h4 {
		width 			: 100%;
		margin-bottom 	: 30px; 
		padding-left 	: 12cqw;
		font-size 		: 20px;
		font-weight 	: 800;
		color 			: var(--text_black);
		line-height 	: 1.4;
		position 		: relative;
		left			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:640px) {
			padding-left 	: 18cqw;
		}
		& span {
			background-color: var(--text_orange);
			width  		: 10cqw;
			aspect-ratio: 1 / 1;
			color 		: #fff;
			border-radius: 9999px;
			display 	: flex;
			align-items : center;
			justify-content : center;
			position 	: absolute;
			left: 0;
			@media (max-width:640px) {
				width  		: 15cqw;
			}
		}
		& em {
			font-style 	: normal;
			color 		: var(--text_redorange);
		}
		& mark {
			font-size 		: 140%;
		}
	}
	& p.txt {
		font-size 		: 18px;
		line-height 	: 1.6;
		position 		: relative;
		left			: 50%;
		transform 		: translateX(-50%);
		margin-bottom 	: 25px;
		@media (max-width:1280px) {
			font-size 	:  2cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  2.2cqw;
		}
		@media (max-width:640px) {
			line-height : 1.8;
			font-size 	:  3.7cqw;
		}
		&.end {
			margin-bottom: 40px;
		}
	}
	& h5 {
		width 			: 100%;
		margin-bottom 	: 25px; 
		font-size 		: 24px;
		font-weight 	: 800;
		color 			: var(--text_orange);
		line-height 	: 1.4;
		& span {
			background-color: var(--text_orange));
			font-size 		: 16px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
		}
	}
	& dl.overview {
		background-color: var(--bg_liteblue);
		padding: 3cqw;
		border-radius: 6px;
		margin-bottom: 40px;
	}
	
	& dl.overview > div {
		display: flex;
		margin-top: 15px;
		font-size 		: 18px;
		line-height 	: 1.6;
	}
	
	& dl.overview > div:first-of-type {
		margin-top: 0;
	}
	
	& dl.overview dt {
		background-color: var(--bg_blue);
		width 			: 10em;
		padding 		: 2px 10px 4px;
		font-size 		: 16px;
		color 			: #fff;
		text-align 		: center;
		border-radius 	: 3px;
		margin-right 	: 15px;
		@media (max-width:640px) {
			width 		: 30cqw;
			display 	: flex;
			align-items : center;
			justify-content: center;
		}
	}
	
	& ul.img_comprequest > li {
		color 			: var(--text_black);
		font-size 		: 18px;
		font-weight 	: 500;
		line-height 	: 1.6;
		margin-bottom 	: 15px;
		padding-left 	: 1.2em;
		text-indent 	: -1.2em;
		@media (max-width:640px) {
			& small {
				display: block;
			}
		}
	}
	
	& ul.img_comprequest > li::before {
		content : "● ";
		color 			: var(--text_blue);
	}
	
	& p.note {
		color 			: var(--text_black);
		font-size 		: 14px;
		font-weight 	: 500;
		line-height 	: 1.6;
		padding-left 	: 1.2em;
		text-indent 	: -1.2em;
		margin-bottom 	: 30px; 
	}
	
	& p.note::before {
		content : "※ ";
	}
	
	& .sem_schedule {
		background-color: var(--bg_yerrow);
		padding: 30px 0 60px;
		border-bottom: double 3px #ccc;
	}
	
	& .sem_schedule  h5 {
		width 			: 100%;
		margin-bottom 	: 25px; 
		font-size 		: 24px;
		font-weight 	: 800;
		color 			: var(--text_redorange);
		line-height 	: 1.4;
		@media (max-width:640px) {
			font-size 		: 22px;
		}
		@media (max-width:400px) {
			font-size 		: 20px;
		}
		
		& span {
			background-color: var(--text_orange);
			font-size 		: 16px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
			@media (max-width:640px) {
				width 			: 100%;
				display 		: block;
				margin-bottom 	: 10px; 
			}
		}
		@media (max-width:640px) {
			text-align 		: center;
			& small {
				margin-top 	: 3px; 
				display 	: block;
			}
		}
	}
	
	& .schedule {
		margin-bottom 	: 10px;
	}
	
	& .schedule > li {
		width 			: 100%;
		margin-bottom 	: 15px;
		font-size 		: 18px;
		font-weight 	: 500;
		color 			: var(--bg_black);
		line-height 	: 1.4;
		@media (max-width:400px) {
			font-size 	:  4.5cqw;
		}
		& span {
			background-color: var(--text_black);
			font-size 		: 14px;
			color 			: #fff;
			padding 		: 2px 10px;
			border-radius 	: 3px;
			margin-right 	: 15px; 
		}
	}
	
	& .btn {
		text-align: center;
		& a {
			background-color: var(--text_redorange);
			padding 	: 15px 40px;
			margin 		: 0 auto;
			font-size 	: 18px;
			font-weight : 600;
			color 		: white;
			text-decoration: none;
			border-radius: 9999px;
			border 		: solid 3px #fff;
			display 	: inline-block;
			transition 	: filter 0.2s ease-in-out,background 0.2s ease-in-out; 
			filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
			@media (max-width:1280px) {
				font-size 	:  1.5cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 	:  3.7cqw;
			}
		}
		& a:hover {
			background-color: #333;
			filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
		}
	}
}

/* == faq
============================================= */

#faq {
	background-color: var(--bg_liteblue);
	padding: 60px 0;
	position: relative;
	
	& .container {
		width 			: 100%;
		max-width 		: 930px;
		min-width 		: 300px;
		padding 		: 0 15px;
		position: relative;
		margin 			: 0 auto;
	}
	& .car_position {
		width 			: 140px;
		position 		: absolute;
		top 			: -55px;
		right 			: 70px;
		@media (max-width:640px) {
			top 		: -65px;
			right 		: 5px;
		}
		@media (max-width:580px) {
			right 			: 5px;
			width 			: 130px;
		}
	}
	& h3 {
		padding-bottom 	: 3cqw;
		text-align 		: center;
		font-size 		: 36px;
		font-weight 	: 800;
		color 			: var(--text_black);
		margin-bottom 	: 30px;
		display 		: inline-block;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:1280px) {
			font-size 	:  3cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:640px) {
			font-size 	:  30px;
			margin-bottom: 22px;
		}
		@media (max-width:530px) {
			font-size 	:  30px;
			margin-bottom: 20px;
		}
	}
	& dl.faq_accordion {
		margin-bottom: 50px;
		& div {
			overflow 	: hidden;
			margin-bottom: 25px;
			
		}
		& dt {
			background-color: #fff;
			padding 	: 20px 70px 20px 50px;
			position 	: relative;
			border-radius: 6px;
			font-size 	:  20px;
			@media (max-width:1280px) {
				font-size 	:  2cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  2.2cqw;
			}
			@media (max-width:640px) {
				line-height : 1.4;
				font-size 	:  3.7cqw;
			}
			
			& i {
				background-image    : linear-gradient(-30deg, var(--text_blue) 51%, var(--text_blue) 51%);
				width 				: 30px;
				height 				: 30px;
				border-radius 		: 9999px;
				position 			: absolute;
				top 				: 50%;
				right				: 20px;
				transform 			: translateY(-50%);
				filter 				: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.1));
				& .plus {
					position 	: relative;
					display 	: block;
					width 		: 30px;
					height 		: 30px;
					transform-origin: center;
					transition 	: transform 0.3s, width 0.3s ,height 0.3s; 
				}
				& .plus:before,& .plus:after {
					background-color: #fff;
					margin 		: auto;
					border-radius: 10px;
					display 	: block;
					content 	: '';
					position 	: absolute;
					top  		: 50%;
					left 		: 50%;
					transform 	: translate(-50%,-50%);
				}
				& .plus:before {
					width 		: 3px;
					height 		: 16px;

				}
				& .plus:after {
					width 		: 16px;
					height 		: 3px;
				}
			}
		}
		& dt span.question {
			background-color: var(--text_blue);
			width 		: 23px;
			height 		: 23px;
			padding-top : .1em;
			font-size 	: 70%;
			color 		: #fff; 
			border-radius: 3px;
			position 	: absolute;
			top 		: 20px;
			left 		: 15px;
			display 	: flex;
			justify-content: center;
		}
		& dd {
			height 		: 0;
			font-size 	: 18px;
			font-weight : 500;
			line-height : 1.8;
			color 		: var(--text_black);
			padding 	: 0 20px;
			overflow 	: hidden;
			position 	: relative;
			& .answer {
				background-color: var(--text_blue);
				width 	: 22px;
				height 	: 22px; 
				margin-top:  20px;
				color 	: #fff;
				border-radius: 3px;
				position: absolute;
				top 	: 6px;
				left 	: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	& dl.faq_accordion div.active {
		& .plus {
			transform 					: rotate(225deg);
			&::before {
				width 				: 3px;
			}
			&::after {
				height 				: 3px;
			}
		}
		& dd {
			height 		: 100%;
			display 	: block;;
			padding 	: 20px 20px 20px 70px;
		}
	}
}

/* == inquiry
============================================= */

#inquiry {
	padding: 60px 0;
	position: relative;
	
	& .container {
		width 			: 100%;
		max-width 		: 930px;
		min-width 		: 300px;
		padding 		: 0 15px;
		margin 			: 0 auto;
		position 		: relative;
	}
	& .car_position {
		width 			: 120px;
		position 		: absolute;
		top 			: -45px;
		left 			: -25px;
		@media (max-width:700px) {
			top 		: -55px;
			left 		: 5px;
		}
		@media (max-width:580px) {
			width 			: 100px;
		}
	}
	& h3 {
		padding-bottom 	: 3cqw;
		text-align 		: center;
		font-size 		: 36px;
		font-weight 	: 800;
		color 			: var(--text_black);
		display 		: inline-block;
		position 		: relative;
		left 			: 50%;
		transform 		: translateX(-50%);
		@media (max-width:1280px) {
			font-size 	:  3cqw;
			margin-bottom: 3cqw;
		}
		@media (max-width:640px) {
			font-size 	:  22px;
			margin-bottom: 22px;
		}
		@media (max-width:530px) {
			font-size 	:  20px;
			margin-bottom: 20px;
		}
	}
	& p {
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 30px;
		color 			: var(--text_black);
		@media (max-width:1280px) {
			font-size 	:  1.4cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:640px) {
			font-size 	:  20px;
		}
	}
	& p.end {
		margin-bottom: 40px;
	}
	& .btn {
		text-align: center;
		& a {
			background-color: var(--text_blue);
			padding 	: 15px 40px;
			margin 		: 0 auto;
			font-size 	: 18px;
			font-weight : 600;
			color 		: white;
			text-decoration: none;
			border-radius: 9999px;
			border 		: solid 3px #fff;
			display 	: inline-block;
			transition 	: filter 0.2s ease-in-out,background 0.2s ease-in-out; 
			filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
			@media (max-width:1280px) {
				font-size 	:  1.5cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 	:  3.7cqw;
			}
		}
		& a:hover {
			background-color: #333;
			filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
		}
	}
}

/* =============================================

	pagebak-layout

============================================= */

button.page_back {
	background-color 	: rgb(0,120,243,0.7);
	font-weight 		: 700;
	color 				: #fff;
	padding 			: 20px 20px;
	border-radius  		: 10px 0px 0px 10px;
	position 			: fixed;
	bottom  			: -300px;
	right 				: 0;
	transition 			: bottom 0.3s;
	z-index 			: 1000; 
}

/* =============================================

	PopUp-layout

============================================= */

body.no_scrollbar {
	/*pointer-events 				: none;*/
	overflow 					: hidden;
}
.blindfold {
	background 					: rgb(0,0,0,0.7);
	width    					: 0vw;
	height   					: 0vh;
	position 					: fixed;
	top  						: 50%;
	left 						: 50%;
	transform 					: translate(-50%,-50%);
	z-index 					: 10000;
	transition 					: all .5s;
	border-radius 				: 50cqw;
	overflow 					: hidden;
}
.blindfold.fade {
	width    					: 100%;
	height   					: 100%;
    overflow 					: auto;
	border-radius 				: 0;
}

.comment_box {
	pointer-events 		: all;
	background-color 	: #fff;
	width 		 		: 90vw;
	max-width 			: 1000px;
	min-width 			: 300px;
	padding 			: 30px 30px 50px;
	@media (max-width:640px) {
		padding 			: 30px 10px 50px;
	}
	position 			: absolute;
	top  				: 0;
	left 				: 50%;
	transform 			: translateX(-50%);
	filter 				: drop-shadow(0.2cqw 0.2cqw 0.1cqw rgba(0, 0, 0, 0.35));
	& .text_area {
		margin-bottom: 40px;
	}
	& #whats_expo {
		display: none;
		& .header {	
			background  : linear-gradient(0deg, #D1ECFB, rgb(0,0,0,0));
			width: 100%;
			padding: 20px;
			& h3 {
				width: 60%;
				margin: 0 auto 40px;
				@media (max-width:640px) {
					width: 80%;
					margin: 0 auto 20px;
				}
				& small {
					font-size 	:  16px;
					font-weight : 800;
					color 		: #333;
					text-align 	: center;
					margin-top 	: 20px;
					display 	: block;
					filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1)); 
					@media (max-width:1280px) {
						font-size 	:  1.4cqw;
					}
					@media (max-width:640px) {
						font-size 	:  2cqw;
					}
					& em {
						color 	: var(--text_skyblue);
						font-style: normal;
					}
				}
				& small::before {
					content: "ー ";
				}
				& small::after {
					content: " ー";
				}
			}
			& .copy {
				width: 80%;
				margin: 0 auto;
				line-height: 1.4;
				font-size 	: 18px;
				font-weight : 800;
				color 		: var(--text_black);
				text-align 	: center;
				filter 	: drop-shadow(0cqw 0cqw 0.3cqw rgba(255, 255, 255, 1)); 
				@media (max-width:640px) {
					font-size 	: 13px;
					width 		: 100%;
				}
				& em {
					font-style  : normal;
					color 		: var(--text_redorange);
				}
			}
		}
		& .main {
			& h4 {
				&.type_a {
					background-color: var(--text_blue);
					padding : 10px;
					color 	: #fff;
					font-size: 16px;
					font-weight: 600;
				}
				&.type_b {
					position 	: relative;
					font-size 	: 22px;
					font-weight : 600;
					margin-bottom: 25px;
					@media (max-width:640px) {
						& small {
							font-size 	: 70%;
							line-height : 1.6;
							margin-top 	: 6px;
							display 	: block;
						}
					}
				}
				&.type_b::before {
					content: "●";
					margin-right: 10px;
					display: inline-block;
					background 	: linear-gradient(135deg, var(--text_blue) 50%, var(--text_skyblue) 50%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
			& dl.overview {
				padding 		: 15px;
				margin-bottom 	: 15px;
				& div {
					display 	: flex;
					align-items : center;
					margin-top 	: 15px;
				}
				& dt {
					background-color: var(--text_skyblue);
					border-radius: 3px;
					padding 	: 5px;
					margin-right: 15px;
					color 		: #fff;
				}
			}
			& dl.aim {
				background-color: var(--bg_yerrow); 
				padding 		: 15px 20px 20px;
				border 			: solid 2px var(--text_orange);
				position 		: relative;
				margin-bottom 	: 30px;
				line-height 	: 1.6;
				& dt {
					background  : var(--text_orange);
					padding 	: 5px 10px;
					color 		: #fff;
					position 	: absolute;
					top 		: -1em;
					left 		: -2px; 
				}
				& dd {
					padding-left: 1.2em;
					text-indent : -1.2em;
					margin-top: 15px;
					& em {
						font-style  : normal;
						font-weight : 600;
						color 		: var(--text_redorange);
					}
				}
				& dd::before {
					content 	: "● ";
					color  		:var(--text_orange);
				}
			}
			& ol.flow {
				& > li {
					display 			: flex;
					justify-content 	: space-between;
					margin-bottom 		: 40px; 
					border 				: solid 2px var(--text_blue);
					border-radius 		: 9px;
					overflow 			: hidden;
					@media (max-width:640px) {
						display 			: block;
					}
					& h5 {
						background  	: var(--bg_blue);
						width 			: 110px;
						font-size 		: 18px;
						color 			: #fff;
						padding 		: 10px;
						@media (max-width:640px) {
							width 		: 100%;
							text-align  : center; 
							& br.sp_none {
								display: none;
							}
						}
						& span.tt {
							background  : var(--bg_darkblue);
							font-size 	: 70%;
							text-align 	: center;
							padding 	: 5px;
							margin-bottom: 10px;
							display 	: block;
							border-radius: 3px;
						}
					}
					& .textarea {
						width 			: calc(100% - 110px);
						padding 		: 10px;
						@media (max-width:640px) {
							width 		: 100%;
						}
						& .point {
							background: var(--bg_liteblue);
							font-size 	: 14px;
							font-weight : 600;
							padding 	: 5px;
							margin-bottom: 9px;
							display 	: inline-block;
							border-radius: 3px;
						}
						
						& > dl {
							& dt {
								font-size 		: 18px;
								color 			: var(--text_blue);
								position 		: relative;
								padding-left 	: 1.5em;
								line-height 	: 1.6;
								margin-bottom 	: 6px;
								& span.activity {
									font-size 	: 70%;
									padding 	: 1px 10px;
									margin-right: 9px;
									border 		: solid 2px var(--text_blue);
									border-radius: 9999px;
								}
							}
							& dt::before {
								line-height: 1.4;
								content : "";
								background: var(--text_skyblue);
								width  	: 18px;
								font-size : 80%;
								color 	: #fff;
								border-radius: 3px;
								display : flex;
								justify-content: center;
								align-items: center;
								position: absolute;
								top 	: 6px;
								left 	: 0;
							}
							& .no1 dt::before {content : "1";}
							& .no2 dt::before {content : "2";}
							& .no3 dt::before {content : "3";}
							& .no4 dt::before {content : "4";}
							& .no5 dt::before {content : "5";}
							& .no6 dt::before {content : "6";}
							& dd {
								padding-left: 2em;
								font-size 		: 16px;
								line-height 	: 1.6;
								color 			: var(--text_black);
								& ul {
									font-size 	: 85%;
									display 	: flex;
									gap  		: 20px;
									margin 		: 6px 0 15px;
									@media (max-width:640px) {
										display 	: block;
									}
								}
								
								& ul > li::before {
									content 	: "・";
								}
								
								&.photo_right {
									display 	: flex;
									width 		: 100%;
									gap 		: 15px;
								}
							}
							& .no3 dd.photo_right {
								@media (max-width:900px) {
									display : block;
								}
								& .txt_box {
									width 		: 33%;
									@media (max-width:900px) {
										width 	: 100%;
									}
									& .note {
										font-size: 14px;
										color 	: var(--text_orange);
										text-indent: -1.2em;
										padding-left: 1.2em;
									}
									& .note::before {
										content : "★ ";
									}
								}
								& figure {
									width 		: 64%;
									display 	: flex;
									
									@media (max-width:900px) { 
										width 	: 100%;
									}
									@media (max-width:640px) {
									}
									& div {
										width 	: 48%;
										font-size 	: 13px;
										& img {
											width: 100%;
											height: auto;
											margin: 10px;
											filter: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
											&.mini {
												width: 80%;
											}
										}
									}
								}
							}
							& dd.bubble {
								position 		: relative;
								display 		: inline-block;
								margin-top 		: 20px;
								padding 		: 16px;
								border-radius 	: 4px;
								background-color: var(--bg_yerrow);
								text-align 		: left;
								font-size 		: 16px;
								font-weight 	: 500;
								line-height 	: 1.5;
								color 			: var(--text_orange);
								filter 			: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
							}
							& dd.bubble::before {
								content: "";
								position: absolute;
								top: 0;
								left: 50%;
								border-style: solid;
								border-width: 0 10px 20px 10px;
								border-color: transparent transparent  var(--bg_yerrow);
								translate: -50% -100%;
							}
							& .no4 dd .point {
								margin-top: 6px;
							}
							& .picup {
								border : dashed 2px var(--text_orange);
								border-radius : 6px;
								padding: 5px;
								& dd{
									@media (max-width:900px) { 
										display : block;
									}
									@media (max-width:640px) {
									}
								}
								& .txt_box {
									width 		: 80%;
									@media (max-width:900px) {
										width 		: 100%;
										margin-bottom : 10px;
									}
								}
								& figure {
									width 		: 15%;
									font-size 	: 13px;
									margin-top 	: -30px;
									@media (max-width:900px) {
										width 		: 100%;
										text-align 	: center;
										margin-top 	: 0px; 
									}
									& img {
										width: 100%;
										height: auto;
										margin: 3px;
										@media (max-width:900px) {
											width 		: 50%; 
											margin-top 	: 0px; 
										}
									}
								}
								
							}
						}
						
						&.col_2 {
							display 	: flex;
							gap 		: 2%;
							@media (max-width:900px) { 
								display 	: block;
							}
							& dl {
								width 		: 59%;
								@media (max-width:900px) { 
									width 	: 100%;
								}
							}
							& figure {
								width 		: 38%;
								font-size 	: 13px;
								text-align: right;
								@media (max-width:900px) { 
									width 	: 100%;
									text-align: center;
								}
								& img {
									width: 80%;
									height: auto;
									margin: 10px;
									filter: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
									
									@media (max-width:900px) {
										width: 50%;
									}
								}
							}
						}
						
					}
				}
			}
			
			& figure.materials {
				width: 98%;
				margin: 0 auto;
				& ul {
					display: flex;
					flex-wrap: wrap;
					gap : 15px;
					margin-bottom: 30px;
				} 
				& li {
					width: calc(50% - 15px);
					padding-left: 1.2em;
					text-indent : -1.2em;
					@media (max-width:640px) {
						width: 100%;
					}
				} 
				& li::before {
					content : "● ";
					color : var(--text_orange);
				} 
			}
			
			& dl.dl_box {
				background: var(--bg_yerrow);
				width: 70%;
				padding: 30px;
				margin: 0 auto 60px;
				text-align: center;
				@media (max-width:640px) {
					width: 100%;
				}
				
				& dd {
					display: block;
					margin-top: 30px;
				}
				& a {
					text-decoration: none;
					display: inline-block;
					background-color: var(--text_orange);
					margin 		: 0 auto;
					font-size 	: 18px;
					font-weight : 600;
					color 		: white;
					padding 	: 15px 20px;
					border-radius: 6px;
					border 		: solid 3px #fff;
					transition 	: filter 0.2s ease-in-out; 
					filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
					@media (max-width:1280px) {
						font-size 	:  1.5cqw;
					}
					@media (max-width:1000px) {
						font-size 	:  1.8cqw;
					}
					@media (max-width:640px) {
						font-size 	:  2.7cqw;
					}
				}
				& a:hover {
					background-color: var(--text_black);
					filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
				}
				
			}
			
		}
	}
	
	& #reason {
		display: none;
		
		& h3.image {
			width 			: 80%;
			max-width 		: 600px;
			min-width 		: 300px;
			margin-bottom 	: 40px;
			text-align 		: center;
			position 		: relative;
			left 			: 50%;
			transform 		: translateX(-50%);

			& img{
				width 		: 100%;
				height 		: auto;
			}
		}

		& p.txt {
			font-size: 18px;
			line-height: 1.6;
			margin-bottom: 30px;
			color 			: var(--text_black);
			@media (max-width:1280px) {
				font-size 	:  1.4cqw;
			}
			@media (max-width:1000px) {
				font-size 	:  1.8cqw;
			}
			@media (max-width:640px) {
				font-size 	: 16px;
				padding 	: 0 10px;
			}
		}

		& p.end {
			margin-bottom: 40px;
		}

		& dl.introduction > div {
			padding 		: 15px;
			margin-bottom 	: 15px; 
			border 			: solid 2px #ccc;
			border-radius 	: 8px;
		}

		& dl.introduction dt {
			color: var(--text_blue);
			margin-bottom: 15px;
			&::before{
				content : "● ";
				color: var(--text_blue);
			}
		}

		& dl.introduction dd {
			display 			: grid;
			grid-template-columns : 1fr 4fr;
			grid-template-rows 	: 1fr;
			grid-column-gap 	: 15px;
			line-height 		: 1.6;

			@media (max-width : 640px) {
				display 		: block;
				& figure {
					width 		: 200px;
					position 	: relative;
					margin-bottom: 25px;
					left 		: 50%;
					transform 	: translateX(-50%);
					& img {
						width 	: 100%;
						height 	: auto;
					}
				}
			}
		}
	}
	
	& button {
		background-color: #0077F3;
		margin 		: 0 auto;
		font-size 	: 18px;
		font-weight : 600;
		color 		: white;
		padding 	: 15px 20px;
		border-radius: 6px;
		border 		: solid 3px #fff;
		position 	: relative;
		left 		: 50%;
		transform 	: translateX(-50%);
		transition 	: filter 0.2s ease-in-out; 
		filter 		: drop-shadow(0.2cqw 0.2cqw 0.3cqw rgba(0, 0, 0, 0.35));
		@media (max-width:1280px) {
			font-size 	:  1.5cqw;
		}
		@media (max-width:1000px) {
			font-size 	:  1.8cqw;
		}
		@media (max-width:640px) {
			font-size 	:  3.7cqw;
		}
	}
	& button:hover {
		background-color: var(--bg_darkblue);
		filter 			: drop-shadow(0cqw 0cqw 0.1cqw rgba(0, 0, 0, 0.5));
	}
	
}

/* =============================================

	footer-layout

============================================= */


footer {
	
	background: var(--l-gray);
	padding-top: 50px;
	font-size: var(--bodytext);
	font-weight: var(--f-dmbold);
	color: var(--d-black;);
	& img {
		width: 100%;
		height: auto;
	}
	
	/* --------------------------
	 	SP footer layout
	-------------------------- */
	
	@media screen and (max-width: 640px) {
		& .cl_info {
			margin-bottom: 40px;
			& .head_area {
				border-bottom: solid 2px var(--d-black);
				margin: 0 25px;
				padding-bottom: 15px;
				margin-bottom:  15px;
				display: grid;
				grid-template-columns: 10fr 1fr 1fr;
				grid-template-rows: 1fr;
				grid-column-gap: 20px;

				h2{
					padding-right: 30px;
				}
			}
			& address {
				margin: 0 25px;
			}
			& .discription {
				margin: 25px 25px 0;
			}
		}
		& .cl_link {
			margin: 0 25px 100px;
			
			& .site_nav {
				margin-bottom: 45px;
			}
			
			& .site_nav li a {
				background: rgb(255,255,255,0.7);
				border-radius: 3px;
				position: relative;
				display: flex;
				align-items: center;
				margin: auto;
				padding: 10px 25px;
				font-family: var(--notosans);
				font-weight: var(--f-dmbold);
				font-size: var(--nav_text);
				text-decoration: none;
				color: var(--text_black);
				line-height: 1.8;
				transition: 0.3s ease-in-out;
				font-weight: 500;
				margin-bottom: 3px!important;
			}
			& .site_nav li a:after {
				content: "";
				position: absolute;
				top: 50%;
				bottom: 0;
				right: 2rem;
				font-size: 90%;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: right 0.3s;
				width: 6px;
				height: 6px;
				border-top: solid 2px var(--text_black);
				border-right: solid 2px var(--text_black);
				transform: translateY(-50%) rotate(45deg);
			}
			& .site_nav li a:hover {
				background: rgb(255,255,255,0.3);
				color: var(--cl-red);
			}
			& .site_nav li a:hover:after {
			  right: 1.4rem;
			}
			& .certification {
				margin-bottom: 60px;
				text-align: center;
			}
			& .certification li {
				display: inline-block;
				margin-left: 25px;
				margin-bottom: 15px;
			}
			& .certification li img {width: 150px;}
			
		}
		
		& .copylight {
			text-align: center;
		}
	}
	
	/* --------------------------
	 	PC footer layout
	-------------------------- */
	
	@media screen and (min-width: 640px) {
		
		display 		: flex;
		justify-content : space-between;
		flex-wrap 		: wrap;
		
		& .cl_info {
			width 		: 45vw;
			margin-bottom: 50px;
			font-weight : 500;
			& .head_area {
				border-bottom: solid 1px var(--text_black);
				padding-left: calc(45vw - 540px);
				padding-bottom: 15px;
				margin-bottom:  15px;
				display: grid;
				grid-template-columns: 11fr 1fr 1fr;
				grid-template-rows: 1fr;
				grid-column-gap: 12px;
				
				& h2{
					padding-left: 15px !important;
					padding-right: 80px;
					@media screen and (max-width: 1000px) {
						padding-right: 8vw;
					}
				}
			}
			& address {
				padding-left: calc(45vw - 540px);
				margin-bottom:  1em;
				margin-left: 15px;
			}
			& .discription {
				padding-left: calc(45vw - 540px);
				margin-left: 15px;
			}
		}

		& .cl_link {
			padding-right: calc(45vw - 540px);
			text-align: right;
			margin-bottom: 50px;
			font-weight: 500;

			& .site_nav {
				display: inline-block;
				border-right: solid 1px var(--text_black);
				margin-right: 15px;
			}
			& .site_nav li {
				display: inline-block;
				padding: 0px 15px;
				border-left: solid 1px var(--text_black);
			}
			& .site_nav li a{
				color: var(--text_black);
			}
			& .site_nav li a:hover {
				text-decoration: underline;
			}
			& .certification {
				margin-right: 15px;
				position: sticky;
				top: 100vh;
			}
			& .certification li {
				display: inline-block;
				margin-left: 15px;
			}
			& .certification li img {width: 80px;}
		}
	}

	& .copylight {
		display:block;
		background-color: var(--text_black);
		width: 100%;
		padding: 10px 0;

		& small {
			width: calc(100% - 30px);
			max-width : 1170px;
			margin: 0 auto 25px;
			display: block;
			color: #fff;
		}
	}
}