@charset "UTF-8";


	
	
/* top-title
--------------------- */
.top-title {
	position: relative;
}
	.top-title h2 {
		font-size: calc(64 * var(--vw-ratio));
		font-weight: 900;
		line-height: calc(80 * var(--vw-ratio));
	}
@media screen and (max-width: 767px) {
	.top-title h2 {
		font-size: calc(38 * var(--vw-ratio));
		font-weight: 900;
		line-height: calc(46 * var(--vw-ratio));
	}
}


	
	
/* bg-movie
--------------------- */
#bg-movie {
	width: 100%;
	height: 100vh;
	background: url("../img/load_title.svg") no-repeat center bottom -2px / 100%;
	position: relative;
}
	#bg-movie .movie {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -10;
	}
@media screen and (max-width: 767px) {
}


	
	
/* kv
--------------------- */
#fv {
	width: 100%;
	height: calc(800 * var(--vw-ratio));
	position: relative;
}
#fv:before {
	content: "";
	width: 100%;
	height: 100%;
	background: url("../common/img/bg_gr.webp") no-repeat center top / cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -5;
}
	#fv .vertical-txt {
		font-size: calc(170 * var(--vw-ratio));
		line-height: calc(136 * var(--vw-ratio));
		-ms-writing-mode: sideways-rl;
		writing-mode: sideways-rl;
		position: absolute;
		top: calc(110 * var(--vw-ratio));
		left: calc(-5 * var(--vw-ratio));
		z-index: 4;
	}
		#fv .vertical-txt span {
			font-size: calc(136 * var(--vw-ratio));
		}

	#fv .main-movie {
		width: calc(700 * var(--vw-ratio));
		position: absolute;
		top: calc(145 * var(--vw-ratio));
		left: calc(350 * var(--vw-ratio));
		z-index: 3; 
		overflow: hidden;
	}

	#fv .sub-movie02 {
		width: calc(400 * var(--vw-ratio));
		position: absolute;
		top: 0;
		right: calc(180 * var(--vw-ratio));
		z-index: -3;
		overflow: hidden;
		opacity: 0.5;
	}
	#fv .sub-movie03 {
		width: calc(456 * var(--vw-ratio));
		position: absolute;
		bottom: calc(60 * var(--vw-ratio));
		right: 0;
		z-index: -3;
		overflow: hidden;
		opacity: 0.5;
	}
		#fv video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	#fv .text {
		width:  calc(550 * var(--vw-ratio));
		position: absolute;
		bottom: calc(70 * var(--vw-ratio));
		left: calc(310 * var(--vw-ratio));
		z-index: 3;
	}
		#fv .text h1 {
			padding: calc(12 * var(--vw-ratio)) 0;
			margin-top: calc(25 * var(--vw-ratio));
			border-top: solid 2px #000;
			border-bottom: solid 2px #000;
			font-size: calc(26 * var(--vw-ratio));
			font-weight: 900;
			line-height: 1;
			text-align: center;
		}
@media screen and (max-width: 767px) {
	#fv {
		height: calc(700 * var(--vw-ratio));
		overflow: hidden;
	}
		#fv .vertical-txt {
			font-size: calc(50 * var(--vw-ratio));
			line-height: calc(44 * var(--vw-ratio));
			top: calc(90 * var(--vw-ratio));
		}
			#fv .vertical-txt span {
				font-size: calc(40 * var(--vw-ratio));
			}

		#fv .main-movie {
			width: calc(380 * var(--vw-ratio));
			top: calc(280 * var(--vw-ratio));
			left: calc(60 * var(--vw-ratio));
		}

		#fv .sub-movie02 {
			width: calc(200 * var(--vw-ratio));
			top: 0;
			right: calc(30 * var(--vw-ratio));
		}
		#fv .sub-movie03 {
			width: calc(256 * var(--vw-ratio));
			bottom: auto;
			right: auto;
			left: 0;
			top: calc(150 * var(--vw-ratio));
		}

		#fv .text {
			width: 80%;
			top: auto;
			left: 10%;
			bottom: calc(60 * var(--vw-ratio));
		}
			#fv .text h1 {
				font-size: calc(22 * var(--vw-ratio));
			}
}


	
	
/* message
--------------------- */
#message {
	background: rgba(255 255, 255, 0.5);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	position: relative;
    z-index: 2; 
}
	#message .text {
		width: calc(800 * var(--vw-ratio));
		margin: 0 auto;
	}
		#message .text .top-title .en {
			font-size: calc(60 * var(--vw-ratio));
			font-family: "Noto Serif JP", serif;
			font-weight: 700;
			line-height: 1;
			padding-top: calc(30 * var(--vw-ratio));
			margin-bottom: calc(10 * var(--vw-ratio));
		}
		#message .text .top-title h2 {
			font-size: calc(54 * var(--vw-ratio));
			font-family: "Noto Serif JP", serif;
			margin-bottom: calc(60 * var(--vw-ratio));
		}

		#message .text .read {
			font-size: calc(40 * var(--vw-ratio));
			font-family: "Noto Serif JP", serif;
			font-weight: 900;
			line-height: calc(56 * var(--vw-ratio));
			margin-top: calc(35 * var(--vw-ratio));
		}

		#message .text a.linkbox {
			display: block;
			margin-top: calc(55 * var(--vw-ratio));
		}
			#message .text a.linkbox .pht {
				position: relative;
			}
			#message .text a.linkbox .pht:before {
				content: "";
				width: calc(100 * var(--vw-ratio));
				height: calc(100 * var(--vw-ratio));
				background: url("../img/btn_movie01.svg") no-repeat center / 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: calc(-50 * var(--vw-ratio));
				margin-left: calc(-50 * var(--vw-ratio));
				z-index: 2;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#message .text a.linkbox:hover .pht:before {
				width: calc(90 * var(--vw-ratio));
				height: calc(90 * var(--vw-ratio));
				margin-top: calc(-45 * var(--vw-ratio));
				margin-left: calc(-45 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#message .text {
		width: 100%;
	}
		#message .text .top-title .en {
			padding-top: 0;
			font-size: calc(40 * var(--vw-ratio));
		}
		#message .text .top-title h2 {
			font-size: calc(24 * var(--vw-ratio));
			margin-bottom: calc(40 * var(--vw-ratio));
		}
	
		#message .text .read {
			font-size: calc(22 * var(--vw-ratio));
			line-height: calc(34 * var(--vw-ratio));
			margin-top: calc(30 * var(--vw-ratio));
		}

		#message .text a.linkbox {
			margin-top: calc(35 * var(--vw-ratio));
		}
			#message .text a.linkbox .pht:before {
				width: calc(80 * var(--vw-ratio));
				height: calc(80 * var(--vw-ratio));
				margin-top: calc(-40 * var(--vw-ratio));
				margin-left: calc(-40 * var(--vw-ratio));
			}
			#message .text a.linkbox:hover .pht:before {
				width: calc(70 * var(--vw-ratio));
				height: calc(70 * var(--vw-ratio));
				margin-top: calc(-35 * var(--vw-ratio));
				margin-left: calc(-35 * var(--vw-ratio));
			}
}


	
	
/* point
--------------------- */
#point {
	background: url("../img/point_bg.webp") no-repeat center top / cover;
	overflow: hidden;
	position: relative;
    z-index: 2; 
}
	#point .contents .row {
		border-top: solid 2px #2E2E2E;
		margin-top: calc(100 * var(--vw-ratio));
		position: relative;
	}
		#point .contents .row .head {
			font-size: calc(90 * var(--vw-ratio));
			line-height: 0.65;
			margin-bottom: calc(40 * var(--vw-ratio));
		}
		#point .contents .row:nth-child(2n) .head {
			text-align: right;
		}

		#point .contents .row:nth-child(odd) .text {
			margin-left: calc(390 * var(--vw-ratio));
		}
		#point .contents .row:nth-child(2) .text {
			width: calc(584 * var(--vw-ratio));
		}
			#point .contents .row .text h3 {
				font-size: calc(40 * var(--vw-ratio));
				font-weight: 900;
				line-height: 1.3em;
				margin-bottom: calc(20 * var(--vw-ratio));
				position: relative;
			}
				#point .contents .row .text h3 span {
					font-size: calc(20 * var(--vw-ratio));
					font-weight: 400;
					line-height: 1;
					position: absolute;
					top: calc(10 * var(--vw-ratio));
					left: calc(-30 * var(--vw-ratio));
				}

		#point .contents .row dl.area {
			position: absolute;
			bottom: 0;
			right: 0;
		}
			#point .contents .row dl.area dt {
				width: calc(110 * var(--vw-ratio));
				height: calc(28 * var(--vw-ratio));
				background: #FFF;
				text-align: center;
				line-height: calc(28 * var(--vw-ratio));
				margin-bottom: calc(12 * var(--vw-ratio));
			}
			#point .contents .row dl.area dd {
				line-height: calc(36 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#point .contents .row {
		margin-top: calc(50 * var(--vw-ratio));
	}
		#point .contents .row .head {
			font-size: calc(42 * var(--vw-ratio));
			margin-bottom: calc(30 * var(--vw-ratio));
		}

		#point .contents .row:nth-child(odd) .text {
			margin-left: 0;
		}
		#point .contents .row:nth-child(2) .text {
			width: 100%;
		}
			#point .contents .row .text h3 {
				font-size: calc(28 * var(--vw-ratio));
				margin-bottom: calc(15 * var(--vw-ratio));
			}
				#point .contents .row .text h3 span {
					font-size: calc(16 * var(--vw-ratio));
					top: calc(7 * var(--vw-ratio));
					left: calc(-22 * var(--vw-ratio));
				}
	
			#point .contents .row .text .txt-18 {
				line-height: calc(32 * var(--vw-ratio));
			}

		#point .contents .row dl.area {
			margin-top: calc(22 * var(--vw-ratio));
			position: static;
		}
			#point .contents .row dl.area dd {
				line-height: calc(32 * var(--vw-ratio));
			}
}


	
	
/* area
--------------------- */
#area {
	overflow: hidden;
	background: url("../common/img/bg.webp") repeat center top / 100%;
	position: relative;
    z-index: 2; 
}
	#area .top-title .en {
		font-size: calc(150 * var(--vw-ratio));
		line-height: calc(130 * var(--vw-ratio));
		margin-bottom: calc(50 * var(--vw-ratio));
		pointer-events: none;
		position: relative;
		z-index: 1;
	}

	#area .top-title h2 .c-blue {
		display: inline-block;
		padding: calc(2 * var(--vw-ratio)) calc(8 * var(--vw-ratio)) calc(10 * var(--vw-ratio)) calc(8 * var(--vw-ratio));
		background: #000;
		line-height: 1;
	}

	#area .text {
		width: calc(360 * var(--vw-ratio));
		margin-top: calc(40 * var(--vw-ratio));
		pointer-events: none;
		position: relative;
		z-index: 1;
	}
		#area .text h3 {
			margin-bottom: calc(15 * var(--vw-ratio));
		}


	#area .map {
		margin-top: calc(-490 * var(--vw-ratio));
		margin-left: 25%;
		position: relative;
		z-index: 0;
	}
    .map-wrapper {
      position: relative;
      width: 100%;
    }

    /* ── SVG area groups ── */
    .area-group {
      cursor: pointer;
      transition: filter 0.18s ease, transform 0.18s ease;
      transform-origin: center;
    }
    .area-group:hover {
      filter: brightness(1.15) drop-shadow(0 4px 12px rgba(0,114,188,0.35));
    }
    .area-group:hover path,
    .area-group:hover rect {
      opacity: 0.88;
    }
    .area-group:active {
      filter: brightness(1.3) drop-shadow(0 2px 6px rgba(0,114,188,0.5));
    }

    /* ── Tooltip ── */
    #tooltip {
      position: fixed;
      background: #fff;
      font-size: calc(14 * var(--vw-ratio));
      font-weight: 700;
      padding:  calc(6 * var(--vw-ratio)) calc(14 * var(--vw-ratio));
      border-radius: calc(20 * var(--vw-ratio));
      box-shadow: 0 calc(4 * var(--vw-ratio)) calc(20 * var(--vw-ratio)) rgba(0,60,120,0.18);
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
      z-index: 1000;
      border: 1.5px solid #d0e8f8;
    }
    #tooltip.show {
      opacity: 1;
      transform: translateY(0);
    }
    #tooltip::after {
      content: '';
      position: absolute;
      bottom: calc(-7 * var(--vw-ratio));
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #fff;
      border-bottom: none;
      filter: drop-shadow(0 2px 2px rgba(0,60,120,0.08));
    }

    /* ── Area legend ── */
    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: calc(10 * var(--vw-ratio)) calc(18 * var(--vw-ratio));
      justify-content: center;
      margin-top: calc(32 * var(--vw-ratio));
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: calc(6 * var(--vw-ratio));
      font-size:  calc(14 * var(--vw-ratio));
      color: #3a5a78;
      cursor: pointer;
      padding: calc(4 * var(--vw-ratio)) calc(10 * var(--vw-ratio));
      border-radius: calc(20 * var(--vw-ratio));
      transition: background 0.15s;
    }
    .legend-item:hover { background: rgba(0,114,188,0.08); }
    .legend-dot {
      width:  calc(12 * var(--vw-ratio));
      height: calc(12 * var(--vw-ratio));
      border-radius: 50%;
      flex-shrink: 0;
    }
@media screen and (max-width: 767px) {
	#area .top-title .en {
		font-size: calc(56 * var(--vw-ratio));
		line-height: calc(50 * var(--vw-ratio));
		margin-bottom: calc(20 * var(--vw-ratio));
		margin-left: -10.5%;
	}

	#area .top-title h2 .c-blue {
		padding: calc(6 * var(--vw-ratio)) calc(8 * var(--vw-ratio)) calc(8 * var(--vw-ratio)) calc(8 * var(--vw-ratio));
	}

	#area .text {
		width: 100%;
		margin-top: calc(25 * var(--vw-ratio));
	}
		#area .text h3 {
			width: 80%;
			margin-bottom: calc(10 * var(--vw-ratio));
		}

	#area .map {
		margin-top: calc(-20 * var(--vw-ratio));
		margin-left: 0;
	}
	
    .legend {
      gap: calc(10 * var(--vw-ratio)) 0;
      margin-top: calc(12 * var(--vw-ratio));
    }
    .legend-item {
      font-size:  calc(12 * var(--vw-ratio));
    }
}


	
	
/* known
--------------------- */
#known {
	background: #27292B;
	position: relative;
	overflow: hidden;
    z-index: 2; 
}
	#known .top-title .en {
		font-size: calc(200 * var(--vw-ratio));
		line-height: 1;
		opacity: 0.1;
		position: absolute;
		top: calc(-70 * var(--vw-ratio));
		right: 0;
	}

	#known .swiper-container {
		width: 100%;
		padding: calc(70 * var(--vw-ratio)) 0 0 0;
		position: relative;
	}
		#known .swiper-container .swiper-slide {
			padding: 0 calc(20 * var(--vw-ratio));
		}
		#known .swiper-container .swiper-slide a.linkbox {
			display: block;
		}
			#known .swiper-container .swiper-slide a.linkbox .pht {
				position: relative;
			}
			#known .swiper-container .swiper-slide a.linkbox .pht.movie:before {
				content: "";
				width: calc(60 * var(--vw-ratio));
				height: calc(60 * var(--vw-ratio));
				background: url("../img/btn_movie02.svg") no-repeat center / 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: calc(-30 * var(--vw-ratio));
				margin-left: calc(-30 * var(--vw-ratio));
				z-index: 2;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#known .swiper-container .swiper-slide a.linkbox.movie:hover .pht:before {
				width: calc(50 * var(--vw-ratio));
				height: calc(50 * var(--vw-ratio));
				margin-top: calc(-25 * var(--vw-ratio));
				margin-left: calc(-25 * var(--vw-ratio));
			}
				#known .swiper-container .swiper-slide a.linkbox .pht .label {
					display: inline-block;
					background: #00C8FF;
					padding: calc(5 * var(--vw-ratio));
					font-size: calc(22 * var(--vw-ratio));
					line-height: 1;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}

			#known .swiper-container .swiper-slide a.linkbox h3 {
				display: inline-block;
				background: #000;
				padding: calc(10 * var(--vw-ratio));
				font-size: calc(30 * var(--vw-ratio));
				line-height: 1;
			}

		#known .swiper-container .slide-pagination-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: calc(40 * var(--vw-ratio));
		}
			#known .swiper-container .swiper-pagination {
				width: auto;
				margin: 0 calc(10 * var(--vw-ratio));
				display: flex;
				justify-content: center;
				align-items: center;
				position: static;
			}
				#known .swiper-container .swiper-pagination .swiper-pagination-bullet {
					width: calc(10 * var(--vw-ratio));
					height: calc(10 * var(--vw-ratio));
					border-radius: 50%;
					margin: 0 calc(10 * var(--vw-ratio));
					background: #fff;
					border: none;
					opacity: 1;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#known .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
					background: #00C8FF;
					opacity: 1;
				}

			#known .swiper-container .swiper-button-prev {
				width: calc(50 * var(--vw-ratio));
				height: calc(50 * var(--vw-ratio));
				background: url("../img/btn_arrow_prev.svg") no-repeat center / 100%;
				border-radius: 0;
				transition: 0.3s;
				-webkit-transition: 0.3s;
				position: relative;
				top: 0;
				left: 0;
				margin: 0;
			}
			#known .swiper-container .swiper-button-prev:after {
				display: none;
			}

			#known .swiper-container .swiper-button-next {
				width: calc(50 * var(--vw-ratio));
				height: calc(50 * var(--vw-ratio));
				background: url("../img/btn_arrow_next.svg") no-repeat center / 100%;
				border-radius: 0;
				transition: 0.3s;
				-webkit-transition: 0.3s;
				position: relative;
				top: 0;
				left: 0;
				margin: 0;
			}
			#known .swiper-container .swiper-button-next:after {
				display: none;
			}
			#known .swiper-container .swiper-button-prev:hover,
			#known .swiper-container .swiper-button-next:hover {
				opacity: 0.7;
			}
@media screen and (max-width: 767px) {
	#known  {
		padding-top: 0;
	}
		#known .top-title .en {
			font-size: calc(95 * var(--vw-ratio));
			position: static;
			margin-left: -12%;
			margin-bottom: calc(20 * var(--vw-ratio));
		}

		#known .swiper-container {
			width: 100%;
			padding: calc(40 * var(--vw-ratio)) 0 0 0;
		}
			#known .swiper-container .swiper-slide a.linkbox {
				width: 100%;
			}
			#known .swiper-container .swiper-slide a.linkbox:nth-last-child(1) {
				margin-bottom: 0;
			}
				#known .swiper-container .swiper-slide a.linkbox .pht:before {
					width: calc(50 * var(--vw-ratio));
					height: calc(50 * var(--vw-ratio));
					margin-top: calc(-25 * var(--vw-ratio));
					margin-left: calc(-25 * var(--vw-ratio));
				}
				#known .swiper-container .swiper-slide a.linkbox:hover .pht:before {
					width: calc(40 * var(--vw-ratio));
					height: calc(40 * var(--vw-ratio));
					margin-top: calc(-20 * var(--vw-ratio));
					margin-left: calc(-20 * var(--vw-ratio));
				}
					#known .swiper-container .swiper-slide a.linkbox .pht .label {
						font-size: calc(16 * var(--vw-ratio));
					}

				#known .swiper-container .swiper-slide a.linkbox h3 {
					font-size: calc(18 * var(--vw-ratio));
				}

}


	
	
/* faq
--------------------- */
#faq {
	display: block;
	background: #00C8FF;
	position: relative;
    z-index: 2; 
}
#faq:before {
	width: 100%;
	content: "FAQ";
	font-size: calc(150 * var(--vw-ratio));
	font-family: "Ramabhadra", sans-serif;
	font-weight: 400;
	line-height: calc(210 * var(--vw-ratio));
	text-align: center;
	color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
#faq:after {
	content: "";
	width: 100%;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: right top;
}
#faq:hover:after {
	transform-origin: left top;
	transform: scale(1, 1);
}
#faq:hover {
	color: #fff;
}
	#faq .inner {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: calc(210 * var(--vw-ratio));
		transition: 0.3s;
		-webkit-transition: 0.3s;
		position: relative;
		z-index: 2;
	}
	#faq .inner:before {
		content: "";
		width: calc(60 * var(--vw-ratio));
		height: calc(60 * var(--vw-ratio));
		background: url("../common/img/icon_arrow_black.svg") no-repeat center / 100%;
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: calc(-30 * var(--vw-ratio));
		transition: 0.4s;
		-webkit-transition: 0.4s;
	}
	#faq:hover .inner:before {
		background: url("../common/img/icon_arrow_blue.svg") no-repeat center / 100%;
	}
		#faq h2 {
			font-size: calc(44 * var(--vw-ratio));
			font-weight: 900;
		}
@media screen and (max-width: 767px) {
	#faq:before {
		width: auto;
		font-size: calc(100 * var(--vw-ratio));
		text-align: left;
		line-height: 1;
		top: auto;
		left: 7%;
		bottom: 0;
	}
		#faq .inner {
			display: block;
			height: calc(210 * var(--vw-ratio));
		}
		#faq .inner:before {
			width: calc(50 * var(--vw-ratio));
			height: calc(50 * var(--vw-ratio));
			margin-top: calc(-25 * var(--vw-ratio));
		}
			#faq h2 {
				padding-top: calc(50 * var(--vw-ratio));
				font-size: calc(38 * var(--vw-ratio));
			}
}