/*----------------------------------------*/
/* .loading */
/*----------------------------------------*/

.loading {
	opacity: 0;
	animation: loading 0.5s ease-out forwards;
}

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

/*----------------------------------------*/
/* .fv */
/*----------------------------------------*/

/* .mv-img */
.front-page .fv .mv-img {
	height: 100svh;
	min-height: 700px;
	overflow: hidden;
}
.front-page .fv .mv-img video {
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
}
@media (max-width: 767px) {
	.front-page .fv .mv-img {
		min-height: 480px;
	}
	.front-page .fv .mv-txt {
		padding-bottom: 80px;
	}
}

/* .scroll */
/* スクロールダウンの位置 */
.scroll {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	color: #ffffff;
	font-size: 12px;
}
/* 線のアニメーション部分 */
.scroll::before {
	position: absolute;
	left: 50%;
	bottom: -105px;
	content: "";
	width: 1px;
	height: 95px;
	background-color: #ffffff;
	animation: scroll 2s infinite;
}
/* 線のアニメーション */
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
@media (min-width: 768px) {
	.scroll {
		top: calc(50% + 260px);
	}
}
@media (max-width: 767px) {
	.scroll {
		bottom: 180px;
		font-size: 11px;
	}
	.scroll::before {
		bottom: -60px;
		height: 55px;
	}
}

/*----------------------------------------*/
/* 基本 */
/*----------------------------------------*/

.front-page .page-body {
	font-size: 16px;
	line-height: 1.8;
}
@media (max-width: 767px) {
	.front-page .page-body {
		font-size: 14px;
	}
}

/*----------------------------------------*/
/* .section */
/*----------------------------------------*/

.front-page .section {
	padding: 80px 0 120px 0;
}
.front-page .section .section-title {
	font-size: 56px;
	line-height: 1.3;
	margin: 0;
}
.front-page .section .title-wrap {
	text-align: center;
	margin-bottom: 40px;
}
.front-page .section .title-wrap p {
	opacity: 0.6;
	margin: 15px 0 0 0;
}
.front-page .section p {
	margin-bottom: 2em;
}
@media (max-width: 767px) {
	.front-page .section {
		padding: 60px 0 70px 0;
	}
	.front-page .section .section-title {
		font-size: 34px;
	}
	.front-page .section .title-wrap {
		margin-bottom: 40px;
	}
	.front-page .section .title-wrap p {
		
	}
}
 
 /*----------------------------------------*/
 /* .about */
 /*----------------------------------------*/

.front-page .about {
	position: relative;
	background-color: #1A1A1A;
	color: #ffffff;
	text-align: center;
	padding: 120px 0;
}
.front-page .about .bg-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 0;
}
.front-page .about .bg-img img {
	width: 100%;
	opacity: 0.5;
}
.front-page .about .bg-img::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgb(26 26 26 / 0%), rgb(26 26 26 / 0%) 50%, rgb(26 26 26 / 100%) 100%);
}
.front-page .about .container {
	position: relative;
	z-index: 1;
}
.front-page .about .title-wrap .small {
	font-size: 18px;
	margin-bottom: 15px;
}
.front-page .about .video-wrap {
	position: relative;
	margin: 80px 0;
}
/*
.front-page .about .video-wrap::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.45;
}
*/
.front-page .about .video-wrap .play-arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.front-page .about .section-title {
	margin-bottom: 40px;
}
.front-page .about p {
	letter-spacing: 0.06em;
	max-width: 740px;
	margin: 0 auto 2em auto;
}
.front-page .about .bnr-wrap {
	margin-top: 50px;
}
.front-page .about .bnr-wrap ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.front-page .about .bnr-wrap ul li a {
	pointer-events: none;
}
@media (min-width: 768px) {
	.front-page .about .bnr-wrap ul {
		display: flex;
		justify-content: center;
	}
	.front-page .about .bnr-wrap ul > li:nth-child(1) {
		border-right: 1px solid #ffffff;
		padding-right: 25px;
		margin-right: 25px;
	}
}
@media (max-width: 767px) {
	.front-page .about {
		padding: 90px 0 120px 0;
	}
	.front-page .about .bg-img {
		overflow: hidden;
	}
	.front-page .about .bg-img img {
		width: 220%;
		max-width: 220%;
		margin-left: -30%;
	}
	.front-page .about .title-wrap .small {
		font-size: 14px;
	}
	.front-page .about .video-wrap {
		margin: 40px 0 60px 0;
	}
	.front-page .about .video-wrap .play-arrow img {
		width: 80px;
	}
	.front-page .about .bnr-wrap {
		margin-top: 40px;
	}
	.front-page .about .bnr-wrap ul > li:nth-child(1) {
		margin-bottom: 10px;
	}
}

/* .api-wrap */
.front-page .about .api-wrap {
	position: relative;
	margin: 80px 0;
}
/* 例：z-index を調整 */
.api-wrap .play-wrap {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;  /* 動画より上に */
  transition: 0.3s;
}
.api-wrap .youtube-wrap {
  position: relative;
  aspect-ratio: 16/9;
  opacity: 0;
  pointer-events: none;       /* 透明時はクリック無効 */
  transition: opacity .3s ease;
  z-index: 1;
}
/* 再生時だけ有効に */
.api-wrap .youtube-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}
.front-page .about .api-wrap .youtube-wrap iframe {
	width: 100%;
	height: 100%;
}
.front-page .about .api-wrap .play-arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	transition: 0.3s;
}
@media (min-width: 768px) {
	.api-wrap .play-wrap:hover {
		opacity: 0.8;
	}
}
@media (max-width: 767px) {
	.front-page .about .mp4-wrap {
		margin: 40px 0 60px 0;
	}
	.front-page .about .api-wrap .play-arrow {
		width: 80px;
	}
}

/*----------------------------------------*/
/* .explore */
/*----------------------------------------*/

.front-page .explore .row-explor {
	margin: 0 -1px;
}
.front-page .explore .row-explore > * {
	padding: 0 1px 2px 1px;
}
.front-page .explore .row-explore .row {
	flex-direction: column;
}
.front-page .explore .inner {
	position: relative;
}
.front-page .explore .inner + .inner {
	margin-top: 2px;
}
.front-page .explore .inner .img-wrap {
	position: relative;
	overflow: hidden;
}
.front-page .explore .inner .img-wrap::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.3;
}
.front-page .explore .inner .img-wrap img {
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
}
.front-page .explore .inner.square .img-wrap {
	aspect-ratio: 1 / 1;
}
.front-page .explore .inner.long {
	height: 100%;
}
.front-page .explore .inner.long .img-wrap {
	height: 100%;
}
.front-page .explore .inner dl {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-size: min(1.6vw, 14px);
	text-align: center;
	letter-spacing: 0.25em;
	line-height: 1.4;
}
.front-page .explore .inner dl dd {
	font-size: min(4vw, 40px);
	letter-spacing: 0.25em;
	margin-top: 0.15em;
}
@media (max-width: 767px) {
	.front-page .explore .inner dl {
		font-size: min(1.6vw, 10px);
	}
	.front-page .explore .inner dl dd {
		font-size: min(4vw, 24px);
	}
}

/*----------------------------------------*/
/* .jpe */
/*----------------------------------------*/

.front-page .jpe {
	background-color: rgba(160,141,113,0.07);
}
.front-page .jpe .title-wrap {
	margin-bottom: 70px;
}
.front-page .jpe .btn-black {
	max-width: 440px;
	margin: 100px auto 0 auto;
}
.front-page .jpe .comingsoon {
	font-size: 30px;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: center;
	margin: 200px 0 70px 0;
}
@media (max-width: 767px) {
	.front-page .jpe .title-wrap {
		margin-bottom: 40px;
	}
	.front-page .jpe .title-wrap p {
		margin: 30px 0 0 0;
	}
	.front-page .jpe .btn-black {
		max-width: 200px;
		margin-top: 40px;
	}
	.front-page .jpe .comingsoon {
		font-size: 18px;
		margin: 100px 0 50px 0;
	}
}

/*--------------------------------------------------*/
/* モーダル基本 */
/*--------------------------------------------------*/

/* モーダルを開いたときの背景固定対策 */
body.fix {
	overflow: hidden;
}

/* .btn */
.front-page .btn-modal,
.modal-wrap .close-mark {
	cursor: pointer;
	transition: 0.3s;
}
@media (min-width: 768px) {
	.front-page .btn-modal:hover,
	.modal-wrap .close-mark:hover {
		opacity: 0.8;
	}
}

/* .modal-wrap */
.front-page .modal-wrap {
	display: none;
	position: fixed;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(15,15,15,0.85);
	z-index: 1000;
}
.modal-wrap .container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
}
.modal-wrap .youtube-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: calc(100vw - 180px);
	max-height: calc(100vh - 50px);
	width: calc(100vh * (16 / 9));
	height: calc(100vw * (9 / 16));
}
.modal-wrap .youtube-wrap iframe {
	width: 100%;
	height: 100%;
}
@media (max-width: 767px) {
	.modal-wrap .youtube-wrap {
		max-width: 100vw;
		max-height: 100vh;
	}
}

/* CLOSE */
.modal-wrap .close-mark {
	position: absolute;
	right: -70px;
	top: 0;
	width: 50px;
}
.modal-wrap .close-mark::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(20deg);
	content: "";
	width: 50px;
	height: 1px;
	background-color: #ffffff;
}
.modal-wrap .close-mark::after {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-20deg);
	content: "";
	width: 50px;
	height: 1px;
	background-color: #ffffff;
}
@media (max-width: 767px) {
	.modal-wrap .close-mark {
		position: absolute;
		right: 20px;
		top: -40px;
	}
}