@charset "UTF-8";


	
	
/* pagetitle
--------------------- */
#pagetitle.questionnaire .text {
	text-align: left;
	padding-bottom: calc(80 * var(--vw-ratio));
}

#pagetitle.questionnaire .txt-16 {
	position: absolute;
	top: calc(50 * var(--vw-ratio));
	right: calc(150 * var(--vw-ratio));
}

#pagetitle.questionnaire .swiper-wrapper {
	transition-timing-function: linear;
}
	#pagetitle.questionnaire .swiper-wrapper .swiper-slide {
		width: calc(400 * var(--vw-ratio));
		margin-right: calc(10 * var(--vw-ratio));
	}
@media screen and (max-width: 767px) {
	#pagetitle.questionnaire .text {
		text-align: center;
		padding-bottom: calc(30 * var(--vw-ratio));
	}

	#pagetitle.questionnaire .txt-16 {
		position: static;
		padding-bottom: calc(40 * var(--vw-ratio));
	}

	#pagetitle.questionnaire .swiper-wrapper {
		transition-timing-function: linear;
	}
		#pagetitle.questionnaire .swiper-wrapper .swiper-slide {
			width: calc(300 * var(--vw-ratio));
		}
}


	
	
/* questionnaire
--------------------- */
.questionnaire .area {
	position: relative;
}
.questionnaire .gesture {
	position: absolute;
}
.questionnaire .gesture01 {
	width: calc(90 * var(--vw-ratio));
	top: calc(100 * var(--vw-ratio));
	left: 40%;
}
.questionnaire .gesture02 {
	width: calc(80 * var(--vw-ratio));
	bottom: calc(150 * var(--vw-ratio));
	right: calc(0 * var(--vw-ratio));
}
.questionnaire .gesture03 {
	width: calc(170 * var(--vw-ratio));
	top: calc(150 * var(--vw-ratio));
	left: calc(-85 * var(--vw-ratio));
}
.questionnaire .gesture04 {
	width: calc(120 * var(--vw-ratio));
	top: calc(-70 * var(--vw-ratio));
	left: calc(550 * var(--vw-ratio));
}
.questionnaire .gesture05 {
	width: calc(110 * var(--vw-ratio));
	top: calc(-50 * var(--vw-ratio));
	right: calc(430 * var(--vw-ratio));
}
.questionnaire .gesture06 {
	width: calc(150 * var(--vw-ratio));
	top: calc(-50 * var(--vw-ratio));
	right: calc(260 * var(--vw-ratio));
}

.questionnaire .ttl.vertical {
	margin-bottom: calc(30 * var(--vw-ratio));
	text-align: center;
}
.questionnaire .ttl.beside {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: calc(40 * var(--vw-ratio));
	position: relative;
}
	.questionnaire .ttl.vertical .head {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-bottom: calc(10 * var(--vw-ratio));
	}
		.questionnaire .ttl .head .number {
			font-size: calc(70 * var(--vw-ratio));
			font-weight: 400;
			line-height: calc(45 * var(--vw-ratio));
		}

		.questionnaire .ttl .head .txt-12 {
			font-weight: 500;
			line-height: 1.2em;
			text-align: left;
			padding-left: calc(12 * var(--vw-ratio));
		}
		.questionnaire .ttl.beside .head .txt-12 {
			padding-left: 0;
			position: absolute;
			top: calc(-8 * var(--vw-ratio));
			left: calc(105 * var(--vw-ratio));
		}
		#questionnaire10 .ttl.beside .head .txt-12 {
			left: calc(127 * var(--vw-ratio));
		}

	.questionnaire .ttl h2 {
		font-size: calc(34 * var(--vw-ratio));
		font-weight: 700;
		line-height: 1.3em;
	}
	.questionnaire .ttl.beside h2 {
		padding-top: calc(5 * var(--vw-ratio));
		padding-left: calc(10 * var(--vw-ratio));
	}

.questionnaire .row {
	padding: calc(50 * var(--vw-ratio)) calc(100 * var(--vw-ratio));
}
.questionnaire .area .row {
	padding-top: 0;
	padding-bottom: 0;
}
	.questionnaire .row .graph {
		margin-bottom: calc(40 * var(--vw-ratio));
	}
	.questionnaire .row .graph.mb0 {
		margin-bottom: 0;
	}

.questionnaire ul.voice.column2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: calc(60 * var(--vw-ratio));
	row-gap: calc(40 * var(--vw-ratio));
}
	.questionnaire ul.voice li {
		border: solid 1px #ddd;
		background: #fff;
		padding: calc(15 * var(--vw-ratio)) calc(20 * var(--vw-ratio));
		position: relative;
	}
		.questionnaire ul.voice li .en {
			width: calc(20 * var(--vw-ratio));
			padding: calc(8 * var(--vw-ratio)) 0;
			-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
			position: absolute;
			top: -1px;
			left: calc(-20 * var(--vw-ratio));
		}

#questionnaire0102 .box {
	width: 50%;
	padding: calc(100 * var(--vw-ratio)) 0;
}
#questionnaire0102 .box:nth-last-child(1) {
	border-left: solid 1px #ddd;
}

#questionnaire06 .graph {
	width: 30%;
	position: absolute;
	top: calc(-100 * var(--vw-ratio));
	right: calc(150 * var(--vw-ratio));
}
#questionnaire06 .ttl {
	margin-top: calc(100 * var(--vw-ratio));
}
#questionnaire06 ul.voice {
	width: 50%;
	margin-bottom: calc(100 * var(--vw-ratio));
}
@media screen and (max-width: 767px) {
	.questionnaire .gesture01 {
		width: calc(45 * var(--vw-ratio));
		top: calc(50 * var(--vw-ratio));
		left: auto;
		right: calc(25 * var(--vw-ratio));
	}
	.questionnaire .gesture02 {
		width: calc(40 * var(--vw-ratio));
		bottom: calc(120 * var(--vw-ratio));
		right: calc(0 * var(--vw-ratio));
	}
	.questionnaire .gesture03 {
		width: calc(80 * var(--vw-ratio));
		top: calc(110 * var(--vw-ratio));
		left: calc(-40 * var(--vw-ratio));
	}
	.questionnaire .gesture04 {
		width: calc(60 * var(--vw-ratio));
		top: calc(20 * var(--vw-ratio));
		left: auto;
		right: calc(30 * var(--vw-ratio));
	}
	.questionnaire .gesture05 {
		width: calc(60 * var(--vw-ratio));
		top: calc(30 * var(--vw-ratio));
		right: calc(20 * var(--vw-ratio));
	}
	.questionnaire .gesture06 {
		width: calc(70 * var(--vw-ratio));
		top: calc(40 * var(--vw-ratio));
		right: calc(20 * var(--vw-ratio));
	}

	.questionnaire .ttl.beside {
		display: block;
		margin-bottom: calc(30 * var(--vw-ratio));
		text-align: center;
	}
		.questionnaire .ttl.vertical .head,
		.questionnaire .ttl.beside .head {
			display: flex;
			justify-content: center;
			align-items: flex-end;
			margin-bottom: calc(10 * var(--vw-ratio));
		}
			.questionnaire .ttl.beside .head .txt-12 {
				padding-left: calc(12 * var(--vw-ratio));
				position: static;
			}

		.questionnaire .ttl h2 {
			font-size: calc(26 * var(--vw-ratio));
		}

	.questionnaire .row {
		padding: calc(30 * var(--vw-ratio)) calc(25 * var(--vw-ratio));
	}
		.questionnaire .row .graph {
			margin-bottom: calc(30 * var(--vw-ratio));
		}
		.questionnaire .row .graph.mb0 {
			margin-bottom: 0;
		}

	.questionnaire ul.voice.column2 {
		display: block;
	}
		.questionnaire ul.voice.column2 li {
			margin-bottom: calc(20 * var(--vw-ratio));
		}
		.questionnaire ul.voice.column2 li:nth-last-child(1) {
			margin-bottom: 0;
		}

	#questionnaire0102 .area {
		display: block;
	}
		#questionnaire0102 .box {
			width: 100%;
			padding: calc(60 * var(--vw-ratio)) 0;
		}
		#questionnaire0102 .box:nth-last-child(1) {
			border-left: none;
			border-top: solid 1px #ddd;
		}

	#questionnaire06 .graph {
		width: 80%;
		margin: 0 auto;
		position: static;
	}
	#questionnaire06 .ttl {
		margin-top: 0;
	}
	#questionnaire06 ul.voice {
		width: 100%;
		margin-top: calc(30 * var(--vw-ratio));
		margin-bottom: 0;
	}
}


	
	
/* read
--------------------- */
#read .gesture {
	width: calc(140 * var(--vw-ratio));
	position: absolute;
	top: calc(-80 * var(--vw-ratio));
	right: calc(270 * var(--vw-ratio));
}

#read h2 {
	font-size: calc(30 * var(--vw-ratio));
	font-weight: 700;
	text-align: center;
	line-height: 1.4em;
	margin-bottom: calc(20 * var(--vw-ratio));
}

#read .txt-16 {
	text-align: center;
}
@media screen and (max-width: 767px) {
	#read .gesture {
		width: calc(80 * var(--vw-ratio));
		position: absolute;
		top: calc(-40 * var(--vw-ratio));
		right: calc(10 * var(--vw-ratio));
	}

	#read h2 {
		font-size: calc(24 * var(--vw-ratio));
		margin-bottom: calc(15 * var(--vw-ratio));
	}

	#read .txt-16 {
		text-align: left;
	}
}


	
	
/* flow
--------------------- */
#flow .gesture {
	width: calc(90 * var(--vw-ratio));
	position: absolute;
	top: calc(-200 * var(--vw-ratio));
	left: calc(150 * var(--vw-ratio));
}

#flow .txt-16.center {
	text-align: center;
}

#flow .flow-list {
	margin-top: calc(60 * var(--vw-ratio));
	padding-bottom: calc(60 * var(--vw-ratio));
}
	#flow .flow-list .cont {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: solid 1px #ddd;
		padding: calc(50 * var(--vw-ratio)) calc(100 * var(--vw-ratio));
		position: relative;
	}
	#flow .flow-list .cont:after {
		content: "";
		width: calc(20 * var(--vw-ratio));
		height: calc(20 * var(--vw-ratio));
		border-radius: 50%;
		background: #925DD2;
		position: absolute;
		top: 50%;
		left: calc(241 * var(--vw-ratio));
		margin-top: calc(-10 * var(--vw-ratio));
	}
	#flow .flow-list .cont:before {
		content: "";
		width: calc(2 * var(--vw-ratio));
		height: 100%;
		background: #925DD2;
		position: absolute;
		top: 0;
		left: calc(250 * var(--vw-ratio));
	}
	#flow .flow-list .cont:nth-child(1):before {
		top: auto;
		bottom: 0;
		height: 50%;
	}
	#flow .flow-list .cont:nth-last-child(1):before {
		height: 50%;
	}
		#flow .flow-list .cont .year {
			width: 20%;
		}
			#flow .flow-list .cont .year .txt-18 {
				font-weight: 700;
				line-height: 1.3em;
			}

		#flow .flow-list .cont .text {
			width: 80%;
		}
			#flow .flow-list .cont .text h3 {
				font-size: calc(24 * var(--vw-ratio));
				font-weight: 700;
				line-height: 1.3em;
				margin-bottom: calc(15 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#flow .gesture {
		width: calc(45 * var(--vw-ratio));
		top: calc(-100 * var(--vw-ratio));
		left: calc(50 * var(--vw-ratio));
	}

	#flow .txt-16.center {
		text-align: left;
	}

	#flow .flow-list {
		margin-top: calc(40 * var(--vw-ratio));
		padding-bottom: 0;
	}
		#flow .flow-list .cont {
			display: block;
			padding: calc(30 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(75 * var(--vw-ratio));
		}
		#flow .flow-list .cont:after {
			width: calc(16 * var(--vw-ratio));
			height: calc(16 * var(--vw-ratio));
			top: calc(37 * var(--vw-ratio));
			left: calc(30 * var(--vw-ratio));
			margin-top: 0;
		}
		#flow .flow-list .cont:before {
			width: calc(2 * var(--vw-ratio));
			left: calc(37 * var(--vw-ratio));
		}
		#flow .flow-list .cont:nth-child(1):before {
			height: 100%;
		}
		#flow .flow-list .cont:nth-last-child(1):before {
			height: 100%;
		}
			#flow .flow-list .cont .year {
				width: 100%;
			}
				#flow .flow-list .cont .year .txt-18 {
					font-size: calc(16 * var(--vw-ratio));
				}

			#flow .flow-list .cont .text {
				width: 100%;
			}
				#flow .flow-list .cont .text h3 {
					font-size: calc(22 * var(--vw-ratio));
					margin-bottom: calc(12 * var(--vw-ratio));
				}
}


	
	
/* training
--------------------- */
#training {
	overflow: hidden;
}
	#training .gesture {
		width: calc(170 * var(--vw-ratio));
		position: absolute;
		top: calc(10 * var(--vw-ratio));
		right: calc(-85 * var(--vw-ratio));
	}

	#training .txt-16.center {
		text-align: center;
	}

	#training .txt-13.center {
		text-align: center;
		margin-top: calc(30 * var(--vw-ratio));
	}

	#training table.table-layout {
		width: 100%;
		border-collapse: collapse;
		margin-top: calc(30 * var(--vw-ratio));
	}
		#training table.table-layout th {
			width: 28%;
			background: #282828;
			padding: calc(15 * var(--vw-ratio)) calc(10 * var(--vw-ratio));
			border-right: solid 1px #939393;
			font-weight: 700;
			line-height: 1.3em;
			text-align: center;
		}
		#training table.table-layout th:nth-child(1) {
			width: 16%;
		}
		#training table.table-layout th:nth-last-child(1) {
			border-right: none;
		}

		#training table.table-layout td {
			padding: calc(10 * var(--vw-ratio));
			border-bottom: solid 1px #ddd;
		}
		#training table.table-layout td.head {
			border-right: solid 1px #ddd;
			font-weight: 500;
			line-height: 1.3em;
			text-align: center;
		}
		#training table.table-layout td.cont {
			position: relative;
		}
		#training table.table-layout td.cont:before {
			content: "";
			width: 1px;
			height: 100%;
			background: #ddd;
			position: absolute;
			top: 0;
			left: 33.3%;
			z-index: -1;
		}
		#training table.table-layout td.cont:after {
			content: "";
			width: 1px;
			height: 100%;
			background: #ddd;
			position: absolute;
			top: 0;
			right: 33.3%;
			z-index: -1;
		}
			#training table.table-layout td.cont .stage {
				display: flex;
				align-items: center;
				margin-bottom: calc(10 * var(--vw-ratio));
			}
			#training table.table-layout td.cont .stage:nth-last-child(1) {
				margin-bottom: 0;
			}
				#training table.table-layout td.cont .stage a.modaal {
					display: flex;
					justify-content: center;
					align-items: center;
					height: calc(50 * var(--vw-ratio));
					border-radius: calc(4 * var(--vw-ratio));
					background: #fff;
					font-weight: 500;
					line-height: 1.1em;
					color: #F06400;
					text-align: center;
					border: solid 1px #F06400;
					margin-right: calc(10 * var(--vw-ratio));
				}
				#training table.table-layout td.cont .stage a.modaal:nth-last-child(1) {
					margin-right: 0;
				}
				#training table.table-layout td.cont .stage a.modaal:hover {
					background: #F06400;
					color: #fff;
				}
				#training table.table-layout td.cont .stage a.modaal.none {
					opacity: 0;
					pointer-events: none;
				}

			#training table.table-layout td.cont .stage01 {
				justify-content: center;
			}
				#training table.table-layout td.cont .stage01 a.modaal {
					width: 32%;
				}

			#training table.table-layout td.cont .stage02 {
				justify-content: flex-end;
			}
				#training table.table-layout td.cont .stage02 a.modaal {
					width: 32%;
				}

			#training table.table-layout td.cont .stage03 {
				justify-content: center;
			}
				#training table.table-layout td.cont .stage03 a.modaal {
					width: 15.4%;
				}

			#training table.table-layout td.cont .stage04 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage04 a.modaal {
					width: 7.1%;
				}

			#training table.table-layout td.cont .stage05 {
				justify-content: center;
			}
				#training table.table-layout td.cont .stage05 a.modaal {
					width: 15.4%;
				}

			#training table.table-layout td.cont .stage06 {
				justify-content: center;
			}
				#training table.table-layout td.cont .stage06 a.modaal {
					width: 76%;
				}

			#training table.table-layout td.cont .stage07 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage07 a.modaal {
					width: 54%;
					margin-left: 12%;
				}

			#training table.table-layout td.cont .stage08 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage08 a.modaal.txt-11 {
					width: 7.1%;
				}
				#training table.table-layout td.cont .stage08 a.modaal.txt-14 {
					width: 57.8%;
				}

			#training table.table-layout td.cont .stage09 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage09 a.modaal {
					width: 42%;
					margin-left: 34%;
				}

			#training table.table-layout td.cont .stage10 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage10 a.modaal.txt-11 {
					width: 7.1%;
				}
				#training table.table-layout td.cont .stage10 a.modaal.txt-14 {
					width: 57.8%;
				}

			#training table.table-layout td.cont .stage11 {
				justify-content: flex-start;
			}
				#training table.table-layout td.cont .stage11 a.modaal.txt-11 {
					width: 7.1%;
				}
				#training table.table-layout td.cont .stage11 a.modaal.txt-14 {
					width: 57.8%;
				}
@media screen and (max-width: 767px) {
	#training .gesture {
		width: calc(80 * var(--vw-ratio));
		top: calc(5 * var(--vw-ratio));
		right: calc(-40 * var(--vw-ratio));
	}

	#training .txt-16.center {
		text-align: left;
	}

	#training .js-scrollable {
		width: -webkit-calc(100% + calc(50 * var(--vw-ratio)));
		width: calc(100% + calc(50 * var(--vw-ratio)));
		margin-left: calc(-25 * var(--vw-ratio));
		margin-bottom: calc(20 * var(--vw-ratio));
	}
		#training table.table-layout {
			width: calc(1000 * var(--vw-ratio));
			margin-top: calc(35 * var(--vw-ratio));
			margin-bottom: 0;
		}
}


	
	
/* system
--------------------- */
#system .gesture {
	width: calc(150 * var(--vw-ratio));
	position: absolute;
	top: calc(300 * var(--vw-ratio));
	left: calc(-50 * var(--vw-ratio));
}

#system .txt-16.center {
	text-align: center;
}

#system .list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: calc(40 * var(--vw-ratio));
	row-gap: calc(40 * var(--vw-ratio));
	margin-top: calc(60 * var(--vw-ratio));
}
	#system .list .box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: calc(30 * var(--vw-ratio));
	}
		#system .list .box .icon {
			width: 30%;
		}

		#system .list .box .text {
			width: 65%;
		}
			#system .list .box .text h3 {
				line-height: 1.3em;
				margin-bottom: calc(10 * var(--vw-ratio));
			}
			#system .list .box .text .txt-14 {
				line-height: 1.5em;
			}

.hide-area {
	display: none;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
.modaal-content-container {
    padding: calc(50 * var(--vw-ratio));
}
	.modaal-content-container h2 {
		font-size: calc(28 * var(--vw-ratio));
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: calc(15 * var(--vw-ratio));
	}
@media screen and (max-width: 767px) {
	#system .gesture {
	width: calc(70 * var(--vw-ratio));
	top: calc(300 * var(--vw-ratio));
	left: calc(-25 * var(--vw-ratio));
	}

	#system .txt-16.center {
		text-align: left;
	}

	#system .list {
		display: block;
		margin-top: calc(30 * var(--vw-ratio));
	}
		#system .list .box {
			padding: calc(20 * var(--vw-ratio));
			margin-bottom: calc(20 * var(--vw-ratio));
		}
		#system .list .box:nth-last-child(1) {
			margin-bottom: 0;
		}
			#system .list .box .text h3 {
				margin-bottom: calc(8 * var(--vw-ratio));
			}
			#system .list .box .text .txt-14 {
				line-height: 1.4em;
			}
	
	.modaal-content-container {
		padding: calc(30 * var(--vw-ratio));
	}
		.modaal-content-container h2 {
			font-size: calc(24 * var(--vw-ratio));
			margin-bottom: calc(12 * var(--vw-ratio));
		}
}


	
	
/* marquee
--------------------- */
ul.marquee {
	display: flex;
	width: 100%;
	overflow: hidden;
	position: absolute;
	top: calc(120 * var(--vw-ratio));
	left: 0;
	z-index: 0;
}
	ul.marquee .marquee__item {
		flex: 0 0 auto;
		overflow: hidden;
		font-size: calc(150 * var(--vw-ratio));
		font-weight: 500;
		color: #F0F0F0;
		white-space: nowrap;
		line-height: 1;
		padding-right: calc(20 * var(--vw-ratio));
	}
	ul.marquee .marquee__item:nth-child(odd) {
		animation: loop 280s -140s linear infinite;
	}
	ul.marquee .marquee__item:nth-child(even) {
		animation: loop2 280s linear infinite;
	}
	@keyframes loop {
		0% {
			transform: translateX(100%);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes loop2 {
		0% {
			transform: translateX(0);
		}
		to {
			transform: translateX(-200%);
		}
	}
@media screen and (max-width: 767px) {
	ul.marquee {
		top: calc(100 * var(--vw-ratio));
	}
		ul.marquee .marquee__item {
			font-size: calc(80 * var(--vw-ratio));
		}
}


	
	
/* kv
--------------------- */
#kv .text {
	width: calc(470 * var(--vw-ratio));
	padding-top: calc(200 * var(--vw-ratio));
}
	#kv .text .txt-20 {
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: calc(2 * var(--vw-ratio));
	}

	#kv .text h1 {
		font-size: calc(50 * var(--vw-ratio));
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: calc(2 * var(--vw-ratio));
	}

	#kv .text .en {
		margin-bottom: calc(20 * var(--vw-ratio));
	}

#kv .pht {
	width: calc(700 * var(--vw-ratio));
	height: calc(600 * var(--vw-ratio));
	margin-top: calc(-40 * var(--vw-ratio));
	margin-right: calc(-150 * var(--vw-ratio));
}
	#kv .pht img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
@media screen and (max-width: 767px) {
	#kv {
		overflow: hidden;
	}
		#kv .inner {
			display: block;
		}
			#kv .text {
				width: 100%;
				padding-top: calc(100 * var(--vw-ratio));
			}
				#kv .text .txt-20 {
					font-size: calc(17 * var(--vw-ratio));
					font-weight: 700;
					line-height: 1.3em;
					margin-bottom: calc(2 * var(--vw-ratio));
				}

				#kv .text h1 {
					font-size: calc(42 * var(--vw-ratio));
					font-weight: 700;
					line-height: 1.3em;
					margin-bottom: calc(2 * var(--vw-ratio));
				}

				#kv .text .en {
					margin-bottom: calc(15 * var(--vw-ratio));
				}

			#kv .pht {
				width: -webkit-calc(100% + calc(50 * var(--vw-ratio)));
				width: calc(100% + calc(50 * var(--vw-ratio)));
				height: calc(300 * var(--vw-ratio));
				margin-top: calc(30 * var(--vw-ratio));
				margin-left: calc(-25 * var(--vw-ratio));
			}
}


	
	
/* facility
--------------------- */
.facility .gesture {
	position: absolute;
}
.facility .gesture01 {
	width: calc(80 * var(--vw-ratio));
	top: calc(20 * var(--vw-ratio));
	left: calc(300 * var(--vw-ratio));
}
.facility .gesture02 {
	width: calc(170 * var(--vw-ratio));
	bottom: calc(200 * var(--vw-ratio));
	left: calc(320 * var(--vw-ratio));
}
.facility .gesture03 {
	width: calc(220 * var(--vw-ratio));
	top: calc(-70 * var(--vw-ratio));
	right: calc(450 * var(--vw-ratio));
}
.facility .gesture04 {
	width: calc(90 * var(--vw-ratio));
	top: calc(60 * var(--vw-ratio));
	right: calc(100 * var(--vw-ratio));
	z-index: 2;
}
.facility .gesture05 {
	width: calc(120 * var(--vw-ratio));
	top: calc(-80 * var(--vw-ratio));
	right: calc(150 * var(--vw-ratio));
}

.facility .text {
	width: calc(420 * var(--vw-ratio));
}
	.facility .text .head {
		font-size: calc(100 * var(--vw-ratio));
		font-weight: 500;
		color: #F0F0F0;
		line-height: 0.9;
	}

	.facility .text h2 {
		font-size: calc(36 * var(--vw-ratio));
		font-weight: 700;
		line-height: 1.4em;
		margin-bottom: calc(20 * var(--vw-ratio));
	}

	.facility .text .txt-14 {
		line-height: 1;
		margin-bottom: calc(30 * var(--vw-ratio));
	}


#facility01 .text {
	padding-top: calc(70 * var(--vw-ratio));
	margin-bottom: calc(170 * var(--vw-ratio));
}

#facility01 .pht01 {
	width: calc(580 * var(--vw-ratio));
	position: absolute;
	top: 0;
	right: calc(120 * var(--vw-ratio));
}
#facility01 .pht02 {
	width: calc(460 * var(--vw-ratio));
	margin-left: calc(260 * var(--vw-ratio));
}


#facility02 .text {
	margin: 0 auto calc(130 * var(--vw-ratio)) auto;
}

#facility02 .pht01 {
	width: calc(240 * var(--vw-ratio));
	position: absolute;
	top: 0;
	left: calc(120 * var(--vw-ratio));
}
#facility02 .pht02 {
	width: calc(350 * var(--vw-ratio));
	margin-left: calc(230 * var(--vw-ratio));
}
#facility02 .pht03 {
	width: calc(380 * var(--vw-ratio));
	position: absolute;
	top: calc(110 * var(--vw-ratio));
	right: 0;
}


#facility03 .text {
	margin-left: calc(680 * var(--vw-ratio));
	margin-bottom: calc(280 * var(--vw-ratio));
}

#facility03 .pht01 {
	width: calc(730 * var(--vw-ratio));
	position: absolute;
	top: 0;
	left: 0;
}
#facility03 .pht02 {
	width: calc(370 * var(--vw-ratio));
	margin-left: calc(420 * var(--vw-ratio));
}
#facility03 .pht03 {
	width: calc(240 * var(--vw-ratio));
	position: absolute;
	bottom: calc(150 * var(--vw-ratio));
	right: calc(100 * var(--vw-ratio));
}
@media screen and (max-width: 767px) {
	.facility .gesture01 {
		width: calc(60 * var(--vw-ratio));
		top: calc(-10 * var(--vw-ratio));
		left: calc(200 * var(--vw-ratio));
	}
	.facility .gesture02 {
		width: calc(140 * var(--vw-ratio));
		bottom: calc(120 * var(--vw-ratio));
		left: calc(-50 * var(--vw-ratio));
	}
	.facility .gesture03 {
		width: calc(90 * var(--vw-ratio));
		top: calc(-10 * var(--vw-ratio));
		right: calc(165 * var(--vw-ratio));
	}
	.facility .gesture04 {
		width: calc(50 * var(--vw-ratio));
		top: auto;
		bottom: calc(80 * var(--vw-ratio));
		right: calc(20 * var(--vw-ratio));
	}
	.facility .gesture05 {
		width: calc(80 * var(--vw-ratio));
		top: calc(-50 * var(--vw-ratio));
		right: calc(150 * var(--vw-ratio));
	}

	.facility .text {
		width: 80%;
		margin: 0 auto;
	}
		.facility .text .head {
			font-size: calc(80 * var(--vw-ratio));
		}

		.facility .text h2 {
			font-size: calc(30 * var(--vw-ratio));
		}


	#facility01 .text {
		padding-top: calc(20 * var(--vw-ratio));
		margin-bottom: calc(40 * var(--vw-ratio));
	}

	#facility01 .pht01 {
		width: 92%;
		margin-left: calc(40 * var(--vw-ratio));
		position: relative;
		top: auto;
		right: auto;
	}
	#facility01 .pht02 {
		width: 65%;
		margin-top: calc(-40 * var(--vw-ratio));
		margin-left: calc(-25 * var(--vw-ratio));
	}


	#facility02 .text {
		margin: calc(30 * var(--vw-ratio)) auto calc(60 * var(--vw-ratio)) auto;
	}

	#facility02 .pht01 {
		width: 45%;
		margin-left: calc(-25 * var(--vw-ratio));
		position: relative;
		top: auto;
		left: auto;
	}
	#facility02 .pht02 {
		width: 35%;
		margin-left: 0;
		position: absolute;
		top: calc(-40 * var(--vw-ratio));
		right: 0;
	}
	#facility02 .pht03 {
		width: 40%;
		position: absolute;
		top: auto;
		bottom: calc(115 * var(--vw-ratio));
		right: calc(50 * var(--vw-ratio));
	}


	#facility03 .text {
		margin-left: auto;
		margin-top: calc(20 * var(--vw-ratio));
		margin-bottom: calc(40 * var(--vw-ratio));
	}

	#facility03 .pht01 {
		width: 75%;
		margin-left: calc(-25 * var(--vw-ratio));
		position: relative;
		top: auto;
		left: auto;
	}
	#facility03 .pht02 {
		width: 30%;
		margin-left: 0;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	#facility03 .pht03 {
		width: 17%;
		top: calc(30 * var(--vw-ratio));
		bottom: auto;
		right: 0;
	}
}


	
	
/* number
--------------------- */
#number .gesture {
	width: calc(170 * var(--vw-ratio));
	position: absolute;
	top: calc(-100 * var(--vw-ratio));
	left: calc(-85 * var(--vw-ratio));
}

#number .list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(20 * var(--vw-ratio));
	row-gap: calc(20 * var(--vw-ratio));
}
	#number .list .box {
		padding: calc(30 * var(--vw-ratio)) 0;
		text-align: center;
	}
		#number .list .box h3 {
			display: inline-block;
			font-weight: 700;
			line-height: 1.3em;
			padding-bottom: calc(5 * var(--vw-ratio));
			margin-bottom: calc(25 * var(--vw-ratio));
			border-bottom: solid 2px #0A9BCD;
		}

		#number .list .box .number {
			font-size: calc(40 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1;
		}
			#number .list .box .number .en {
				font-size: calc(80 * var(--vw-ratio));
				font-weight: 500;
			}
@media screen and (max-width: 767px) {
	#number .gesture {
		width: calc(100 * var(--vw-ratio));
		top: calc(-20 * var(--vw-ratio));
		left: calc(-50 * var(--vw-ratio));
	}

	#number .list {
		grid-template-columns: repeat(2, 1fr);
	}
		#number .list .box {
			padding: calc(25 * var(--vw-ratio)) 0;
		}
			#number .list .box h3 {
				font-size: calc(16 * var(--vw-ratio));
				letter-spacing: 0;
				margin-bottom: calc(15 * var(--vw-ratio));
			}

			#number .list .box .number {
				font-size: calc(24 * var(--vw-ratio));
			}
				#number .list .box .number .en {
					font-size: calc(56 * var(--vw-ratio));
				}
}


	
	
/* various
--------------------- */
#various .gesture {
	position: absolute;
}
#various .gesture02 {
	width: calc(160 * var(--vw-ratio));
	bottom: calc(650 * var(--vw-ratio));
	right: calc(0 * var(--vw-ratio));
}
#various .gesture03 {
	width: calc(80 * var(--vw-ratio));
	bottom: calc(-200 * var(--vw-ratio));
	left: calc(50 * var(--vw-ratio));
	z-index: 1;
}

#various .row {
	padding-bottom: calc(50 * var(--vw-ratio));
	margin-bottom: calc(60 * var(--vw-ratio));
	border-bottom: dashed 1px #ddd;
}
#various .row:nth-last-child(1) {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
	#various .row h3 {
		font-size: calc(26 * var(--vw-ratio));
		font-weight: 700;
		line-height: 1.3em;
		text-align: center;
		margin-bottom: calc(30 * var(--vw-ratio));
	}

	#various .row .list {
		display: grid;
		column-gap: calc(30 * var(--vw-ratio));
		row-gap: calc(30 * var(--vw-ratio));
	}
	#various .row .list.column3 {
		grid-template-columns: repeat(3, 1fr);
	}
	#various .row .list.column4 {
		grid-template-columns: repeat(4, 1fr);
	}
		#various .row .list .box .icon {
			padding: calc(20 * var(--vw-ratio)) 0;
			text-align: center;
		}
			#various .row .list .box .icon img {
				width: calc(100 * var(--vw-ratio));
			}

		#various .row .list .box .txt-14 {
			text-align: center;
			line-height: 1;
			margin-top: calc(-7 * var(--vw-ratio));
			margin-bottom: calc(8 * var(--vw-ratio));
		}

		#various .row .list .box h4 {
			text-align: center;
			line-height: 1.3em;
		}
@media screen and (max-width: 767px) {
	#various .gesture02 {
		width: calc(80 * var(--vw-ratio));
		bottom: calc(550 * var(--vw-ratio));
		right: calc(-10 * var(--vw-ratio));
	}
	#various .gesture03 {
		width: calc(40 * var(--vw-ratio));
		bottom: calc(-100 * var(--vw-ratio));
		left: calc(250 * var(--vw-ratio));
		z-index: 1;
	}

	#various .row {
		padding-bottom: calc(35 * var(--vw-ratio));
		margin-bottom: calc(40 * var(--vw-ratio));
	}
		#various .row h3 {
			font-size: calc(22 * var(--vw-ratio));
			margin-bottom: calc(20 * var(--vw-ratio));
		}

		#various .row .list {
			column-gap: calc(20 * var(--vw-ratio));
			row-gap: calc(25 * var(--vw-ratio));
		}
		#various .row .list.column3 {
			grid-template-columns: repeat(2, 1fr);
		}
		#various .row .list.column4 {
			grid-template-columns: repeat(2, 1fr);
		}
			#various .row .list .box .icon {
				padding: calc(20 * var(--vw-ratio)) 0;
				text-align: center;
			}
				#various .row .list .box .icon img {
					width: calc(100 * var(--vw-ratio));
				}

		#various .row .list .box .txt-14 {
			font-size: calc(12 * var(--vw-ratio));
			margin-top: calc(-5 * var(--vw-ratio));
		}

			#various .row .list .box h4 {
				font-size: calc(16 * var(--vw-ratio));
			}
}


	
	
/* photos-list
--------------------- */
#photos-list .row {
	margin-bottom: calc(100 * var(--vw-ratio));
}
#photos-list .row:nth-last-child(1) {
	margin-bottom: 0;
}
	#photos-list .row .text {
		padding-top: calc(35 * var(--vw-ratio));
		width: 40%;
	}
		#photos-list .row .text h2 {
			font-size: calc(30 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1.3em;
		}

		#photos-list .row .text .txt-14 {
			margin-top: calc(10 * var(--vw-ratio));
			margin-bottom: calc(20 * var(--vw-ratio));
			line-height: 1;
		}

		#photos-list .row .text .btn {
			margin-top: calc(30 * var(--vw-ratio));
		}

	#photos-list .row .pht {
		width: 55%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}
		#photos-list .row .pht img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
@media screen and (max-width: 767px) {
	#photos-list .row {
		display: block;
		margin-bottom: calc(60 * var(--vw-ratio));
	}
		#photos-list .row .text {
			width: 100%;
			padding-top: 0;
			margin-top: calc(15 * var(--vw-ratio));
		}
			#photos-list .row .text h2 {
				font-size: calc(26 * var(--vw-ratio));
				text-align: center;
			}

			#photos-list .row .text .txt-14 {
				text-align: center;
				margin-bottom: calc(12 * var(--vw-ratio));
			}

			#photos-list .row .text .btn {
				margin-top: calc(20 * var(--vw-ratio));
			}

		#photos-list .row .pht {
			width: 100%;
		}
}


	
	
/* recommend
--------------------- */
#recommend {
	display: grid;
	padding: calc(10 * var(--vw-ratio));
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(10 * var(--vw-ratio));
	row-gap: calc(10 * var(--vw-ratio));
}
	#recommend a {
		display: block;
		overflow: hidden;
		position: relative;
		background: #000;
	}
	#recommend a.active {
		pointer-events: none;
	}
		#recommend a .pht {
			width: 100%;
			height: 100%;
			aspect-ratio: 1 / 1;
			opacity: 0.9;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#recommend a:hover .pht {
			opacity: 0.6;
		}
		#recommend a.active .pht {
			opacity: 0.4;
		}
			#recommend a .pht img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

		#recommend a .en {
			line-height: 1;
			position: absolute;
			top: calc(20 * var(--vw-ratio));
			left: calc(20 * var(--vw-ratio));
		}

		#recommend a h3 {
			font-size: calc(22 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1.3em;
			position: absolute;
			bottom: calc(20 * var(--vw-ratio));
			left: calc(20 * var(--vw-ratio));
		}
@media screen and (max-width: 767px) {
	#recommend {
		grid-template-columns: repeat(3, 1fr);
	}
		#recommend a .en {
			font-size: calc(12 * var(--vw-ratio));
			top: calc(12 * var(--vw-ratio));
			left: calc(12 * var(--vw-ratio));
		}

		#recommend a h3 {
			font-size: calc(14 * var(--vw-ratio));
			bottom: calc(12 * var(--vw-ratio));
			left: calc(12 * var(--vw-ratio));
		}
}