@charset "UTF-8";



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 共通項目 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
*{margin:0;padding:0;text-decoration:none;box-sizing: border-box}fieldset{border:0}body{line-height:1.8}body,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,ul{margin:0;padding:0}img{border:0;vertical-align:top}a{text-decoration:none}em{font-style:normal}ul li{list-style-type:none;list-style-image:none}address{font-style:normal}strong {font-weight: bold}img {width: 100%;height: auto}.sp {display: none}
:root {
  --design-width-pc: 1400;
  --design-width-sp: 421;
  --vw-ratio: calc(100vw / var(--design-width-pc));
}
@media (max-width: 767px) {
  :root {
    --vw-ratio: calc(100vw / var(--design-width-sp));
  }
}




/* リンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
a {
	color: #000;
	text-decoration: none;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
a:before {
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
svg {
  pointer-events:none;
}

path{
  pointer-events:auto;
}
svg a {
  pointer-events: visiblePainted;
}
svg path{
  pointer-events:auto;
}

/* テキスト装飾 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.c-blue {
	color: #00C8FF;
}
.c-white {
	color: #fff;
}



/* 横幅 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
body {
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: clamp(14px, calc(16 * var(--vw-ratio)), 24px);
	font-weight: 500;
	color: #000;
	padding: 0;
	margin: 0;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}
body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
}



/* フォント */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.en {
	font-family: "Ramabhadra", sans-serif;
	font-weight: 400;
}




/* flex */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-start {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.flex-end {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	 -ms-flex-direction: row-reverse;
		 flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-top: calc(30 * var(--vw-ratio));
	padding-right: calc(30 * var(--vw-ratio));
	padding-left: calc(30 * var(--vw-ratio));
	position: fixed;
	top: 0;
	left: 0;
	z-index: 12;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
	#header .logo a {
		display: block;
		line-height: 1;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	#header.is-animation .logo a {
		opacity: 0;
		pointer-events: none;
	}
		#header .logo a img {
			width: calc(150 * var(--vw-ratio));
		}

		#header .logo a span {
			display: inline-block;
			font-weight: 700;
			padding-left: calc(20 * var(--vw-ratio));
		}

	#header .menubtn {
		width: calc(70 * var(--vw-ratio));
		height: calc(70 * var(--vw-ratio));
	}
		#header .menubtn .menu {
			display: block;
			position: relative;
			cursor: pointer;
			background: #fff;
			border: solid 2px #000;
			width: 100%;
			height: 100%;
			transition: all .4s;
		}
		#header .menubtn .menu.active {
			background: #000;
		}
		#header .menubtn .menu:before {
			width: 100%;
			content: "MENU";
			font-size: calc(14 * var(--vw-ratio));
			font-family: "Ramabhadra", sans-serif;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 1;
			text-align: center;
			position: absolute;
			bottom: calc(14 * var(--vw-ratio));
			left: 0;
			transition: all .4s;
		}
		#header .menubtn .menu.active:before {
			content: "CLOSE";
			color: #fff;
		}
			#header .menubtn .menu .openbtn-area {
				transition: all .4s;
			}
				#header .menubtn .menu span {
					width: calc(40 * var(--vw-ratio));
					display: inline-block;
					transition: all .4s;
					position: absolute;
					top: 50%;
					left: 50%;
					margin-left: calc(-20 * var(--vw-ratio));
					height: 2px;
					background: #000;
				}
				#header .menubtn .menu span:nth-of-type(1) {
					margin-top: -14px;
				}
				#header .menubtn .menu span:nth-of-type(2) {
					margin-top: -8px;
				}

			#header .menubtn .menu.active .openbtn-area {
				transform: rotateY(-360deg);
			}
				#header .menubtn .menu.active span {
					background: #fff;
				}
				#header .menubtn .menu.active span:nth-of-type(1) {
					transform: translateY(2px) rotate(-160deg);
				}
				#header .menubtn .menu.active span:nth-of-type(2) {
					transform: translateY(-4px) rotate(160deg);
				}
@media screen and (max-width: 767px) {
	#header {
		padding-top: calc(10 * var(--vw-ratio));
		padding-right: calc(10 * var(--vw-ratio));
		padding-left: calc(10 * var(--vw-ratio));
	}
		#header .logo a {
			padding-left: calc(10 * var(--vw-ratio));
		}
			#header .logo a img {
				width: calc(120 * var(--vw-ratio));
			}

			#header .logo a span {
				display: block;
				font-size: calc(12 * var(--vw-ratio));
				padding-left: 0;
				line-height: 1;
				margin-top: calc(5 * var(--vw-ratio));
			}

		#header .menubtn {
			width: calc(60 * var(--vw-ratio));
			height: calc(60 * var(--vw-ratio));
		}
			#header .menubtn .menu:before {
				font-size: calc(12 * var(--vw-ratio));
				bottom: calc(10 * var(--vw-ratio));
			}
				#header .menubtn .menu span {
					width: calc(36 * var(--vw-ratio));
					margin-left: calc(-18 * var(--vw-ratio));
				}
}


	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* メニュー展開 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#menubox {
	display: none;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: url("../img/bg_gr.webp") no-repeat center / cover;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
	#menubox .menunav {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100vh;
		height: 100dvh;
	}
		#menubox .menunav .content {
			width: calc(1100 * var(--vw-ratio));
			margin-top: calc(-50 * var(--vw-ratio));
		}
			#menubox .menunav .content .area {
				width: 50%;
			}
				#menubox .menunav .content .area h2 {
					font-size: calc(44 * var(--vw-ratio));
					line-height: 1;
					color: #fff;
					margin-bottom: calc(10 * var(--vw-ratio));
				}

			#menubox .menunav .content .other {
				width: 40%;
				margin-top: calc(55 * var(--vw-ratio));
			}
				#menubox .menunav .content .other h3 {
					font-size: calc(22 * var(--vw-ratio));
					margin-top: calc(45 * var(--vw-ratio));
				}

				#menubox .menunav .content .other .known-list {
					margin-top: calc(5 * var(--vw-ratio));
				}
					#menubox .menunav .content .other .known-list li {
						width: 49%;
						margin-right: 2%;
						margin-top: 2%;
					}
					#menubox .menunav .content .other .known-list li:nth-child(2n) {
						margin-right: 0;
					}
						#menubox .menunav .content .other .known-list li a {
							display: flex;
							justify-content: center;
							align-items: center;
							background: #fff;
							text-align: center;
							height: calc(54 * var(--vw-ratio));
							line-height: 1.3em;
							font-weight: 700;
							text-align: center;
							position: relative;
							outline: none;
							overflow: hidden;
   							transition: ease .2s;
						}
						#menubox .menunav .content .other .known-list li a:before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							z-index: 2;
							background: #00C8FF;
							width: 100%;
							height: 100%;
							transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
							transform: scale(0, 1);
							transform-origin: right top;
						}
						#menubox .menunav .content .other .known-list li a:hover:before {
							transform-origin: left top;
							transform: scale(1, 1);
						}
							#menubox .menunav .content .other .known-list li a span {
								position: relative;
								z-index: 3;
							}

			#menubox .menunav .content .list a.linktxt {
				width: 50%;
				margin-top: calc(35 * var(--vw-ratio));
			}
			#menubox .menunav .content .list a.linktxt:hover {
				color: #00C8FF;
			}
				#menubox .menunav .content .list a.linktxt .en {
					font-size: calc(40 * var(--vw-ratio));
					line-height: 1;
				}
				#menubox .menunav .content .list a.linktxt .jp {
					font-weight: 900;
					background: url("../img/icon_link_arrow.svg") no-repeat left center / calc(15 * var(--vw-ratio));
					padding-left: calc(22 * var(--vw-ratio));
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#menubox .menunav .content .list a.linktxt:hover .jp {
					padding-left: calc(18 * var(--vw-ratio));
				}

	#menubox .marquee {
		display: flex;
		width: 100%;
		overflow: hidden;
		color: #fff;
		position: absolute;
		bottom: calc(-24 * var(--vw-ratio));
		left: 0;
	}
		#menubox .marquee .marquee__item {
			flex: 0 0 auto;
			overflow: hidden;
			font-size: calc(180 * var(--vw-ratio));
			white-space: nowrap;
			line-height: 1;
			padding-right: calc(20 * var(--vw-ratio));
		}
		#menubox .marquee .marquee__item:nth-child(odd) {
			animation: loop 100s -50s linear infinite;
		}
		#menubox .marquee .marquee__item:nth-child(even) {
			animation: loop2 100s linear infinite;
		}
@media screen and (max-width: 767px) {
	#menubox .menunav {
		display: block;
		overflow-y: scroll;
	}
		#menubox .menunav .content {
			display: block;
			width: 100%;
			padding: calc(100 * var(--vw-ratio)) calc(30 * var(--vw-ratio)) calc(50 * var(--vw-ratio)) calc(30 * var(--vw-ratio));
			margin: 0;
		}
			#menubox .menunav .content .area {
				width: 100%;
				padding-bottom: calc(40 * var(--vw-ratio));
				border-bottom: solid 1px #fff;
			}
				#menubox .menunav .content .area h2 {
					font-size: calc(30 * var(--vw-ratio));
					margin-bottom: calc(10 * var(--vw-ratio));
				}

			#menubox .menunav .content .other {
				width: 100%;
				margin-top: calc(20 * var(--vw-ratio));
			}
				#menubox .menunav .content .other h3 {
					font-size: calc(22 * var(--vw-ratio));
					margin-top: calc(30 * var(--vw-ratio));
					line-height: 1.3em;
				}

				#menubox .menunav .content .other .known-list {
					margin-top: calc(10 * var(--vw-ratio));
				}

			#menubox .menunav .content .list a.linktxt {
				width: 100%;
				margin-top: calc(25 * var(--vw-ratio));
			}
				#menubox .menunav .content .list a.linktxt .en {
					font-size: calc(32 * var(--vw-ratio));
					margin-bottom: calc(5 * var(--vw-ratio));
				}
				#menubox .menunav .content .list a.linktxt .jp {
					font-weight: 900;
				}

	#menubox .marquee {
		position: static;
	}
		#menubox .marquee .marquee__item {
			font-size: calc(100 * var(--vw-ratio));
		}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* パンクズ */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#breadcrumbs {
	padding-top: calc(120 * var(--vw-ratio));
}
	#breadcrumbs a {
		text-decoration: underline;
	}
	#breadcrumbs a:hover {
		text-decoration: none;
	}
@media screen and (max-width: 767px) {
	#breadcrumbs {
		padding-top: calc(90 * var(--vw-ratio));
	}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ページタイトル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* pagetitle */
#pagetitle {
}
@media screen and (max-width: 767px) {
}




	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* main */
#main {
	display: block;
}
main.bg-gr {
	background: url("../img/bg_gr02.webp") repeat-y center top / 100%;
}

/* inner */
.inner {
	width: 84%;
	margin: 0 auto;
	position: relative;
}
.inner_full {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* img-over */
a .img-over {
	overflow: hidden;
}
	a .img-over img {
		-moz-transition: -moz-transform 0.2s linear;
		-webkit-transition: -webkit-transform 0.2s linear;
		-o-transition: -o-transform 0.2s linear;
		-ms-transition: -ms-transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	a:hover .img-over img {
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}

/* wrap */
.wrap-top {
	padding-top: calc(120 * var(--vw-ratio));
}
.wrap-bottom {
	padding-bottom: calc(150 * var(--vw-ratio));
}

/* txt */
.txt-20 {
	font-size: calc(20 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-18 {
	font-size: calc(18 * var(--vw-ratio));
	line-height: calc(40 * var(--vw-ratio));
}
.txt-16 {
	font-size: calc(16 * var(--vw-ratio));
	line-height: calc(32 * var(--vw-ratio));
}
.txt-15 {
	font-size: calc(15 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-14 {
	font-size: calc(14 * var(--vw-ratio));
	line-height: calc(26 * var(--vw-ratio));
}
.txt-12 {
	font-size: calc(12 * var(--vw-ratio));
	line-height: calc(24 * var(--vw-ratio));
}
.txt-10 {
	font-size: calc(10 * var(--vw-ratio));
	line-height: calc(22 * var(--vw-ratio));
}
@media screen and (max-width: 767px) {
	.sp {
		display: block;
	}
	.pc {
		display: none !important;
	}

	/* wrap */
	.wrap-top {
		padding-top: calc(75 * var(--vw-ratio));
	}
	.wrap-bottom {
		padding-bottom: calc(75 * var(--vw-ratio));
	}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* モダール */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.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: 0 !important;
}
.modaal-wrapper.modaal-start_fade {
    opacity: 0;
	pointer-events: none;
}
.modaal-container {
    max-width: 960px;
	background: none;
}
	.modaal-container iframe {
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
	}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#footer {
	width: 100%;
	background: #fff;
	position: relative;
    z-index: 2; 
	padding-top: calc(70 * var(--vw-ratio));
}
	#footer .entry-list {
		margin-bottom: calc(70 * var(--vw-ratio));
	}
		#footer .entry-list a.linkbox {
			display: block;
			width: 48.5%;
			padding: calc(60 * var(--vw-ratio));
			background: #000;
			position: relative;
		}
		#footer .entry-list a.linkbox:after {
			content: "";
			width: 100%;
			height: 100%;
			background: #00C8FF;
			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;
		}
		#footer .entry-list a.linkbox:hover:after {
			transform-origin: left top;
			transform: scale(1, 1);
		}
		#footer .entry-list a.linkbox:before {
			content: "";
			width: calc(58 * var(--vw-ratio));
			height: calc(58 * var(--vw-ratio));
			background: url("../../common/img/icon_arrow_blue.svg") no-repeat center / 100%;
			position: absolute;
			top: 50%;
			margin-top: calc(-29 * var(--vw-ratio));
			right: calc(50 * var(--vw-ratio));
			z-index: 2;
			transition: 0.4s;
			-webkit-transition: 0.4s;
		}
		#footer .entry-list a.linkbox:hover:before {
			background: url("../../common/img/icon_arrow_black.svg") no-repeat center / 100%;
		}
			#footer .entry-list a.linkbox .en {
				font-size: calc(50 * var(--vw-ratio));
				line-height: 1;
				margin-bottom: calc(10 * var(--vw-ratio));
			}

			#footer .entry-list a.linkbox p {
				position: relative;
				z-index: 3;
			}
			#footer .entry-list a.linkbox .txt-20 {
				font-weight: 700;
				line-height: 1;
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#footer .entry-list a.linkbox:hover .txt-20 {
				color: #fff;
			}

	#footer ul.area-list {
		width: calc(430 * var(--vw-ratio));
		order: 2;
	}
		#footer ul.area-list li {
			width: 32%;
			margin-right: 2%;
			margin-bottom: 2%;
		}
		#footer ul.area-list li:nth-child(3n) {
			margin-right: 0;
		}
			#footer ul.area-list li a {
				display: block;
				height: calc(46 * var(--vw-ratio));
				line-height: calc(46 * var(--vw-ratio));
				background: #EDEDED;
				border-radius: calc(5 * var(--vw-ratio));
				text-align: center;
			}
			#footer ul.area-list li a:hover {
				background: #00C8FF;
			}

	#footer .text {
		order: 1;
	}
		#footer .text .logo a {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			line-height: 1;
		}
			#footer .text .logo a img {
				width: calc(154 * var(--vw-ratio));
				line-height: 1;
			}
			#footer .text .logo a span {
				display: inline-block;
				font-weight: 700;
				line-height: 1;
				padding-left: calc(20 * var(--vw-ratio));
			}

		#footer .text ul.link-list {
			margin-top: calc(22 * var(--vw-ratio));
			margin-bottom: calc(35 * var(--vw-ratio));
		}
			#footer .text ul.link-list li {
				margin-right: calc(20 * var(--vw-ratio));
			}
			#footer .text ul.link-list li:nth-last-child(1) {
				margin-right: 0;
			}
				#footer .text ul.link-list li a {
					display: block;
					height: calc(20 * var(--vw-ratio));
					text-decoration: underline;
					line-height: calc(20 * var(--vw-ratio));
				}
				#footer .text ul.link-list li.instagram a {
					padding-right: calc(26 * var(--vw-ratio));
					background: url("../img/sns_instagram.svg") no-repeat right center / calc(18 * var(--vw-ratio));
				}
				#footer .text ul.link-list li a:hover {
					text-decoration: none;
				}

		#footer .text .copyright {
			line-height: 1;
		}

	#footer .marquee {
		display: flex;
		width: 100%;
		overflow: hidden;
		color: #000;
		padding-top: calc(40 * var(--vw-ratio));
	}
		#footer .marquee .marquee__item {
			flex: 0 0 auto;
			overflow: hidden;
			font-size: calc(180 * var(--vw-ratio));
			white-space: nowrap;
			line-height: 1;
			padding-right: calc(20 * var(--vw-ratio));
		}
		#footer .marquee .marquee__item:nth-child(odd) {
			animation: loop 100s -50s linear infinite;
		}
		#footer .marquee .marquee__item:nth-child(even) {
			animation: loop2 100s 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) {
	#footer {
		padding-top: calc(50 * var(--vw-ratio));
	}
		#footer .entry-list {
			display: block;
			margin-bottom: calc(50 * var(--vw-ratio));
		}
			#footer .entry-list a.linkbox {
				width: 100%;
				padding: calc(30 * var(--vw-ratio));
				background: #000;
				margin-bottom: calc(15 * var(--vw-ratio));
			}
			#footer .entry-list a.linkbox:before {
				width: calc(42 * var(--vw-ratio));
				height: calc(42 * var(--vw-ratio));
				background: url("../../common/img/icon_arrow_blue.svg") no-repeat center / 100%;
				margin-top: calc(-21 * var(--vw-ratio));
				right: calc(30 * var(--vw-ratio));
			}
			#footer .entry-list a.linkbox:nth-last-child(1) {
				margin-bottom: 0;
			}
				#footer .entry-list a.linkbox .en {
					font-size: calc(30 * var(--vw-ratio));
				}

				#footer .entry-list a.linkbox .txt-20 {
					font-size: calc(16 * var(--vw-ratio));
				}
	
		#footer .info {
			display: block;
		}
			#footer ul.area-list {
				width: 100%;
			}
				#footer ul.area-list li a {
					height: calc(42 * var(--vw-ratio));
					line-height: calc(42 * var(--vw-ratio));
				}

			#footer .text {
				width: 100%;
				margin-top: calc(30 * var(--vw-ratio));
			}
				#footer .text .logo a img {
					width: calc(130 * var(--vw-ratio));
				}

				#footer .text ul.link-list li {
					margin-right: calc(25 * var(--vw-ratio));
				}
					#footer .text ul.link-list li a {
						height: calc(16 * var(--vw-ratio));
						line-height: calc(16 * var(--vw-ratio));
						font-size: calc(11 * var(--vw-ratio));
					}
					#footer .text ul.link-list li.instagram a {
						padding-right: calc(22 * var(--vw-ratio));
						background: url("../img/sns_instagram.svg") no-repeat right center / calc(16 * var(--vw-ratio));
					}

		#footer .marquee {
			padding-top: calc(30 * var(--vw-ratio));
		}
			#footer .marquee .marquee__item {
				font-size: calc(100 * var(--vw-ratio));
			}
}