@charset "UTF-8";
/* CSS Document */

/*
	KV
-----------------------------------------------------------------------------------------------*/
#kvArea{
	margin-top: 96px;
	position: relative;
}
/* 動画
========================================*/
.kvVideoBox{
	background-color: #000000;
}
.kvVideoBox video{
	display: block;
	width: 100%;
}
.kvVideoBox video.sp{
	display: none;
}
/*  SNS
========================================*/
#kvArea .listSns{
	position: absolute;
	bottom: 20px;
	right: 15px;
}


/*
	MESSAGE
-----------------------------------------------------------------------------------------------*/
#messageArea{
	padding-top: 120px;
	background-color: #000000;
	position: relative;
}
#messageArea .ctsArea{
	width: fit-content;
	padding-bottom: 170px;
}
#messageArea .tit{
	font-family: var(--ffEn);
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--clRed);
	letter-spacing: 0.4em;
}
#messageArea .lead{
	font-size: 3rem;
	font-weight: 600;
	color: #FFFFFF;
	letter-spacing: 0.2em;
	line-height: 200%;
	scale: 1 0.9;
}
#messageArea .lead:nth-of-type(n+2){
	margin-top: 10px;
}

/*  写真
========================================*/
#messageArea .phBox{
	position: absolute;
	bottom: -156px;
	right: calc(50% - 600px);
}
#messageArea .phBox::before{
	content: ' ';
	display: block;
	width: 379px;
	height: 163px;
	background: var(--patGrid);
	border: 1px solid var(--clGold);
	position: absolute;
	top: 30px;
	left: -48px;
}
#messageArea .phBox .ph{
	position: relative;
}
@media screen and (812px < width){
	#messageArea .phBox .ph{
		width: 298px;
	}
}


/*
	ABOUT / BUSINESS
-----------------------------------------------------------------------------------------------*/
#topMainArea{
	padding-block: 100px;
	background-color: var(--clLGray);
}

/* 共通
========================================*/
.aboutArea, .businessArea{
	position: relative;
}
/* 英語タイトル */
.titTopMain{
	font-family: var(--ffEn);
	font-size: 13rem;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 100%;
}
/* キャッチ */
#topMainArea .catch{
	margin-bottom: 20px;
	font-size: 4.6rem;
	font-weight: 900;
	color: var(--clNavy);
	line-height: 145%;
}
#topMainArea .catch .fsL{
	font-size: 6.5rem;
}
#topMainArea .catch .fsBaseS{
	display: block;
	padding-block: 14px 9px;
	font-size: 3rem;
	line-height: 100%;
}
#topMainArea .catch .fsBaseS .ffEn{
	font-size: 3.8rem;
	font-weight: 700;
}
/* リスト */
.listTopMain{
	display: flex;
	gap: 0 90px;
}
.listTopMain li .tit{
	display: block;
	margin-bottom: 10px;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 100%;
}
/* 画像 */
#topMainArea .phBox{
	position: absolute;
}
#topMainArea .phBox::before{
	content: ' ';
	display: block;
	position: absolute;
}
#topMainArea .phBox .ph{
	position: relative;
}
@media screen and (812px < width){
	.aboutArea .phBox .ph{
		width: 370px;
	}
	.businessArea .phBox .ph{
		width: 135px;
	}
}

/* ABOUT
========================================*/
.aboutArea{
	padding-bottom: 70px;
}
/* 英語タイトル */
.aboutArea .titTopMain{
	position: relative;
	z-index: 1;
}
/* キャッチ */
.aboutArea .txtCtsArea{
	padding-left: 370px;
}
/* 画像 */
.aboutArea .phBox{
	top: 93px;
	left: 0;
	z-index: 1;
}
.aboutArea .phBox::before{
	width: 290px;
	aspect-ratio: 1 / 1;
	background: var(--patSlash);
	border-radius: 50%;
	top: 40px;
	left: calc(50% - 145px);
}

/* BUSINESS
========================================*/
/* 英語タイトル */
.businessArea .titTopMain{
	text-align: right;
}
/* キャッチ */
.businessArea .txtCtsArea{
	margin-top: -40px;
	padding-left: 224px;
}
/* 画像 */
.businessArea .phBox{
	width: 314px;
	text-align: center;
	bottom: -200px;
	right: 105px;
}
.businessArea .phBox::before{
	width: 314px;
	height: 93px;
	background: var(--patWave);
	top: 110px;
	left: 0;
}

/*
	CLOSE UP
-----------------------------------------------------------------------------------------------*/
#topCUArea{
	padding-block: 100px 20px;
	background-color: var(--clGray);
}
/* 英語タイトル */
#topCUArea .titTopMain{
	margin-bottom: 15px;
	font-size: 10rem;
}

/* リスト（grid）
========================================*/
.listCU{
	display: grid;
	grid-template-columns: repeat(4, 240px);
	gap: 45px 60px;
}
.listCU li.span2-2{
	grid-column: span 2;
	grid-row: span 2;
}
.listCU li a{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-bottom: 25px;
	position: relative;
	transition: var(--trstCmn);
}
.listCU li.span2-2 a{
	padding-bottom: 35px;
}
/* 写真 */
.listCU li a .phBox{
	background-color: #000000;
	position: relative;
	overflow: hidden;
}
.listCU li a .phBox .ph{
	width: 100%;
	transition: all 0.45s;
}
@media screen and (812px < width){
	.listCU li:nth-of-type(2) a .phBox .ph,
	.listCU li:nth-of-type(5) a .phBox .ph,
	.listCU li:nth-of-type(7) a .phBox .ph{
		animation-delay: 0.6s;
	}
	.listCU li:nth-of-type(3) a .phBox .ph{
		animation-delay: 0.8s;
	}
}
/* ラベル */
.listCU li a .phBox .label{
	display: grid;
	place-content: center;
	width: fit-content;
	min-width: 100px;
	height: 20px;
	padding-top: 1px;
	font-family: var(--ffEn);
	font-size: 1rem;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 100%;
	text-align: center;
	text-indent: 0.15em;
	background-color: var(--clGreen);
	position: absolute;
	top: 0;
	left: 0;
}
/* 見出し / リード 共通 */
.listCU li .tit,.listCU li .txt{
	padding-inline: 15px;
}
.listCU li.span2-2 .tit,.listCU li.span2-2 .txt{
	padding-inline: 25px;
}
/* 見出し */
.listCU li .tit{
	margin-block: 15px 7px;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--clNavy);
	line-height: 145%;
}
.listCU li.span2-2 .tit{
	margin-block: 25px 8px;
	font-size: 2.4rem;
}
/* リード */
.listCU li .txt{
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	line-height: 150%;
	text-align: justify;
}
.listCU li.span2-2 .txt{
	font-size: 1.5rem;
	line-height: 180%;
}
/* VIEW */
.listCU li a .txtView{
	width: fit-content;
	font-family: var(--ffEn);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 100%;
	position: absolute;
	bottom: -6px;
	right: 10px;
}
/* hover */
.listCU li a::after{
	content: ' ';
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgb(0 0 0 / 0.3);
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all 0.3s;
}
@media (any-hover: hover){
	.listCU li a:hover{
		background-color: rgb(255 255 255 / 1);
	}
	.listCU li a:hover::after{
		width: 0;
		right: 0;
		left: auto;
	}
	.listCU li a:hover .phBox .ph{
		scale: 1.05;
	}
}
/* PEOPLE */
.phPeople{
	position: absolute;
	bottom: 0;
	right: 10px;
}
@media screen and (812px < width){
	.phPeople{
		width: 176px;
	}
}

/* MOVIE
========================================*/
/* 見出し */
.titMovie{
	font-size: 1.5rem;
	font-weight: 700;
}
.titMovie .ffEn{
	display: block;
	font-family: var(--ffEn);
	font-size: 4rem;
	font-weight: 700;
	color: var(--clNavy);
	letter-spacing: 0;
	line-height: 100%;
}
/* From To */
.txtFromTo{
	width: fit-content;
	font-family: var(--ffEn);
	letter-spacing: 0;
	line-height: 100%;
	transform-origin: left bottom;
	transform: rotate(90deg);
}
.txtFromTo .icoArrow{
	display: inline-block;
	margin: 4px 7px 0 8px;
	vertical-align: top;
}
/* swiper */
.movieSliderContainer{
	position: relative;
}
.movieSliderContainer .swiper{
	width: 250px;
	height: auto;
}
@media screen and (812px < width){
	.movieSliderContainer .swiper-slide .thumbModal > img{
		width: 250px;
	}
}
.movieSliderContainer .btnPrev::after,
.movieSliderContainer .btnNext::after{
	display: none;
}
.movieSliderContainer .btnPrev,
.movieSliderContainer .btnNext{
	width: 74px;
	height: 50px;
	margin-top: -32px;
	border-radius: 50%;
	transition: var(--trstCmn);
}
.movieSliderContainer .btnPrev{
	padding: 0 2px 2px 0;
	left: 50px;
}
.movieSliderContainer .btnNext{
	padding: 0 0 2px 2px;
	right: 50px;
}
.movieSliderContainer .btnPrev img{
	translate: 7px;
	transition: all 0.4s;
}
.movieSliderContainer .btnNext img{
	translate: -7px;
	transition: all 0.4s;
}
@media (any-hover: hover){
	.movieSliderContainer .btnPrev:hover,
	.movieSliderContainer .btnNext:hover{
		background-color: rgb(0 0 0 / 0.1);
	}
	.movieSliderContainer .btnPrev:hover img,
	.movieSliderContainer .btnNext:hover img{
		translate: 0;
	}
}
/* modal */
.modalContainer .mvBox{
	height: 80vh;
}
.modalContainer .mvBox iframe{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 467 / 831;
}


/* 
	SP
-----------------------------------------------------------------------------------------------*/
@media screen and (width <= 812px){
	/*
		KV
	-----------------------------------------------------------------------------------------------*/
	#kvArea{
		margin-top: 55px;
	}
	/* 動画
	========================================*/
	.kvVideoBox video.sp{
		display: block;
		width: 100%;
		height: 630px;
		object-fit: cover;
	}
	.kvVideoBox video.pc{
		display: none;
	}
	
	/*  SNS
	========================================*/
	#kvArea .listSns{
		position: absolute;
		bottom: 20px;
		right: 15px;
	}


	/*
		MESSAGE
	-----------------------------------------------------------------------------------------------*/
	#messageArea{
		padding-top: 80px;
	}
	#messageArea .ctsArea{
		padding-bottom: 90px;
	}
	#messageArea .tit{
		font-size: 1.4rem;
	}
	#messageArea .lead{
		font-size: 2.1rem;
		letter-spacing: 0.15em;
	}

	/*  写真
	========================================*/
	#messageArea .phBox{
		bottom: -60px;
		right: 20px;
	}
	#messageArea .phBox::before{
		width: 176px;
		height: 73px;
		top: 15px;
		left: auto;
		right: -21px;
	}
	#messageArea .phBox .ph{
		width: 131px;
	}


	/*
		ABOUT / BUSINESS
	-----------------------------------------------------------------------------------------------*/
	#topMainArea{
		padding-block: 80px;
	}

	/* 共通
	========================================*/
	/* 英語タイトル */
	.titTopMain{
		font-size: 6.4rem;
		line-height: 100%;
		white-space: nowrap;
	}
	/* キャッチ */
	#topMainArea .catch{
		margin-block: -22px 30px;
		font-size: min(6.15384615vw, 2.4rem);
	}
	#topMainArea .catch .fsL{
		font-size: min(9.23076923vw, 3.6rem);
	}
	#topMainArea .catch .fsBaseS{
		padding-block: 8px 0;
		font-size: 1.5rem;
	}
	#topMainArea .catch .fsBaseS .ffEn{
		font-size: 1.7rem;
		letter-spacing: 0;
	}
	/* リスト */
	.listTopMain{
		flex-direction: column;
		align-items: flex-start;
		gap: 20px 0;
		width: fit-content;
		padding-right: 40px;
	}
	.listTopMain li .tit{
		margin-bottom: 7px;
	}


	/* ABOUT
	========================================*/
	/* 英語タイトル */
	.aboutArea .titTopMain{
		margin-left: -10px;
		position: relative;
		z-index: 0;
	}
	/* キャッチ */
	.aboutArea .txtCtsArea{
		padding-left: 0;
	}
	.aboutArea .txtCtsArea .catch{
		padding-left: min(2.56410256vw, 10px);
		
	}
	/* リスト */
	.aboutArea .listTopMain{
		margin: 0 0 0 170px;
	}
	/* 画像 */
	.aboutArea .phBox{
		padding-top: 10px;
		top: auto;
		bottom: 35px;
		left: 22px;
	}
	.aboutArea .phBox::before{
		width: 140px;
		top: 20px;
		left: calc(50% - 70px);
	}
	.aboutArea .phBox .ph{
		width: 155px;
	}

	/* BUSINESS
	========================================*/
	/* 英語タイトル */
	.businessArea .titTopMain{
		margin-right: -10px;
		text-align: right;
	}
	/* キャッチ */
	#topMainArea .businessArea .txtCtsArea .catch{
		margin-bottom: 20px;
	}
	.businessArea .txtCtsArea{
		margin-top: -10px;
		padding-left: 0;
	}
	/* 画像 */
	.businessArea .phBox{
		width: 150px;
		bottom: -110px;
		right: 22px;
	}
	.businessArea .phBox::before{
		width: 150px;
		height: 55px;
		background: var(--patWave);
		top: 40px;
		left: 0;
	}
	.businessArea .phBox .ph{
		width: 50px;
	}


	/*
		CLOSE UP
	-----------------------------------------------------------------------------------------------*/
	#topCUArea{
		padding-block: 70px 0;
	}
	/* 英語タイトル */
	#topCUArea .titTopMain{
		margin-bottom: 10px;
		font-size: 5rem;
	}

	/* リスト（grid）
	========================================*/
	.listCU{
		grid-template-columns: repeat(2, calc((100% - 20px)/2));
		gap: 30px 20px;
	}
	.listCU li.span2-2{
		grid-column: span 2;
		grid-row: span 1;
	}
	.listCU li a{
		display: flex;
		flex-direction: column;
		padding-bottom: 18px;
	}
	.listCU li.span2-2 a{
		padding-bottom: 25px;
	}
	/* 写真 */
	.listCU li:nth-of-type(3) a .phBox .ph,
	.listCU li:nth-of-type(5) a .phBox .ph{
		animation-delay: 0.6s;
	}
	/* ラベル */
	.listCU li a .phBox .label{
		min-width: 100px;
		height: 16px;
	}
	/* 見出し / リード 共通 */
	.listCU li .tit,.listCU li .txt{
		padding-inline: 12px;
	}
	.listCU li.span2-2 .tit,.listCU li.span2-2 .txt{
		padding-inline: 12px;
	}
	/* 見出し */
	.listCU li .tit{
		margin-block: 12px 5px;
		font-size: 1.4rem;
		line-height: 125%;
	}
	.listCU li.span2-2 .tit{
		margin-block: 17px 6px;
		font-size: 1.8rem;
	}
	/* リード */
	.listCU li .txt{
		font-size: 1.2rem;
	}
	.listCU li.span2-2 .txt{
		font-size: 1.3rem;
		line-height: 170%;
	}
	/* VIEW */
	.listCU li a .txtView{
		font-size: 1rem;
		bottom: -5px;
		right: 5px;
	}

	/* PEOPLE */
	.listCU li.topCuPeople .txt{
		padding-right: 120px;
	}
	.phPeople{
		width: 88px;
	}

	/* MOVIE
	========================================*/
	.topCuMovie{
		order: 1;
	}
	/* From To */
	.txtFromTo{
		font-size: 1.2rem;
	}
	.txtFromTo .icoArrow{
		width: 13px;
		margin: 4px 7px 0 8px;
		vertical-align: top;
	}
	/* swiper */
	.movieSliderContainer .swiper{
		width: 185px;
	}
	.movieSliderContainer .btnPrev,
	.movieSliderContainer .btnNext{
		width: auto;
		height: auto;
		margin-top: -30px;
	}
	.movieSliderContainer .btnPrev{
		padding: 0;
		left: 30px;
	}
	.movieSliderContainer .btnNext{
		padding: 0;
		right: 30px;
	}
	.movieSliderContainer .btnPrev img{
		width: 30px;
		translate: 0;
	}
	.movieSliderContainer .btnNext img{
		width: 30px;
		translate: 0;
	}
	/* modal */
	.modalContainer{
		transform: translate(-50%, calc(-50% + 20px))
	}
	.modalContainer .mvBox{
		width: 80vw;
		height: auto;
	}
}
@media only screen and (width <= 812px) and (orientation: landscape){
	/*
		KV
	-----------------------------------------------------------------------------------------------*/
	/* 動画
	========================================*/
	.kvVideoBox video.sp{
		height: auto;
	}
	
	/*
		CLOSE UP
	-----------------------------------------------------------------------------------------------*/
	/* MOVIE
	========================================*/
	/* modal */
	.modalContainer .mvBox{
		width: auto;
		height: 90svh;
	}
}