@charset "UTF-8";

:root {
	--c-nttblue: #0072BC;
	--c-darkblue: #001973;

	--fs10: calc(10/16 * 100%);
	--fs11: calc(11/16 * 100%);
	--fs12: calc(12/16 * 100%);
	--fs13: calc(13/16 * 100%);
	--fs14: calc(14/16 * 100%);
	--fs15: calc(15/16 * 100%);
	--fs16: 100%;
	--fs18: calc(18/16 * 100%);
	--fs20: calc(20/16 * 100%);
	--fs22: calc(22/16 * 100%);
	--fs24: calc(24/16 * 100%);
	--fs28: calc(28/16 * 100%);
	--fs30: calc(30/16 * 100%);
	--fs32: calc(32/16 * 100%);
	--fs34: calc(34/16 * 100%);
	--fs35: calc(35/16 * 100%);
	--fs36: calc(36/16 * 100%);
	--fs43: calc(43/16 * 100%);
	--fs50: calc(50/16 * 100%);
	--fs60: calc(60/16 * 100%);
}

/*-------------------------------------------------------*/
/* override */
/*-------------------------------------------------------*/

.l-topicpath {
	background-color: #FFF;
}

@media (max-width: 767px) {
    .l-sec, .l-sec--blue {
        padding: 0 20px;
    }
}

/*-------------------------------------------------------*/
/* head */
/*-------------------------------------------------------*/

.p-lv1--en {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: 15%;
	font-size: var(--fs60);
	color: var(--c-nttblue);
	text-align: center;
	margin: 80px 0 40px;
}

@media (max-width: 767px) {
	.p-lv1--en {
		font-size: var(--fs28);
		margin: 60px 0 30px;
	}
}

/*-------------------------------------------------------*/
/* floatin */
/*-------------------------------------------------------*/

.p-floatin {
	position: relative;
	top: 60px;
	opacity: 0;
	transition: top 0.8s ease-out, opacity 0.8s ease-out;
}
.p-floatin.--ac { top: 0; opacity: 1;}

.p-floatin.--delay01 { transition-delay: 0.1s; }
.p-floatin.--delay02 { transition-delay: 0.2s; }
.p-floatin.--delay03 { transition-delay: 0.3s; }
.p-floatin.--delay04 { transition-delay: 0.4s; }
.p-floatin.--delay05 { transition-delay: 0.5s; }
.p-floatin.--delay06 { transition-delay: 0.6s; }
.p-floatin.--delay07 { transition-delay: 0.7s; }
.p-floatin.--delay08 { transition-delay: 0.8s; }
.p-floatin.--delay09 { transition-delay: 0.9s; }
.p-floatin.--delay10 { transition-delay: 1s; }

@media (max-width: 767px) {
	.p-floatin {
		top: 40px;
	}
}

/*-------------------------------------------------------*/
/* bg */
/*-------------------------------------------------------*/

.p-bg, .p-bg_mov {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.p-bg {
	position: fixed;
	z-index: -1;
}

.p-bg_mov {
	position: absolute;
	object-fit: cover;
	opacity: 0.5;
}

/*-------------------------------------------------------*/
/* mv */
/*-------------------------------------------------------*/

.p-mv_bg {
	color: #FFF;
	background: var(--c-nttblue) url(../img/mv_bg.svg) no-repeat;
	background-size: 1050px 993px;
	background-position: left -558px top -87px;
}

.p-mv_slide {
	position: relative;
	max-width: 1920px;
	height: 700px;
	margin: auto;
	pointer-events: none;
}

.p-mv_slide > * {
	opacity: 0;
	transition: opacity 1.3s ease;
}

.p-mv_h {
	position: absolute;
	top: 164px;
	left: calc(50% - 319px);
}

.p-mv_h img {
	display: block;
}

.p-mv_txt {
	position: absolute;
	top: 0;
	left: calc(50% - 370px);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.p-mv_txt p {
	margin-top: 32px;
	transition: font-size 0.5s ease;
	font-family: "Murecho", sans-serif;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 5%;
	text-shadow: 
	2px 2px 0 var(--c-nttblue),
	-2px -2px 0 var(--c-nttblue),
	2px -2px 0 var(--c-nttblue),
	-2px 2px 0 var(--c-nttblue),
	0 0 4px var(--c-nttblue);
}
.p-mv_txt p:first-child { margin-top: 0; }

.p-mv:not([data-slide="1"]) .p-mv_txt,
.p-mv[data-slide="5"] .--s5,
.p-mv[data-slide="4"] .--s4,
.p-mv[data-slide="3"] .--s3,
.p-mv[data-slide="2"] .--s2,
.p-mv[data-slide="1"] .--s1,
.p-mv[data-slide="1"] .p-mv_h {
	opacity: 1;
}

.p-mv[data-slide="5"] .p-mv_txt p:nth-child(4),
.p-mv[data-slide="4"] .p-mv_txt p:nth-child(3),
.p-mv[data-slide="3"] .p-mv_txt p:nth-child(2),
.p-mv[data-slide="2"] .p-mv_txt p:nth-child(1) {
	font-weight: 700;
	font-size: var(--fs20);
}

.p-mv_img {
	position: absolute;
	bottom: 0;
	overflow: hidden;
}

.p-mv_img img {
	display: block;
	height: auto;
}

.p-mv_img.--s1 { left: calc(50% + 173px); }
.p-mv_img.--s2 { left: calc(50% + 222px); }
.p-mv_img.--s3 { left: calc(50% + 71px); }
.p-mv_img.--s4 { left: calc(50% + 99px); }
.p-mv_img.--s5 { left: calc(50% + 32px); }
.p-mv_img.--s1 img { width: 341px; }

@media (max-width: 1400px) {
	.p-mv_txt,
	.p-mv_img.--s2,
	.p-mv_img.--s3,
	.p-mv_img.--s4,
	.p-mv_img.--s5 { left: auto; }

	.p-mv_txt { width: 500px; right: 560px; }
	.p-mv_img.--s2 { right: 310px; }
	.p-mv_img.--s3 { right: -64px; }
	.p-mv_img.--s4 { right: -249px; }
	.p-mv_img.--s5 { right: -222px; }
	.p-mv_txt {
		width: 500px;
		right: calc(440px + (560 - 440) * ((100vw - 990px) / (1400 - 990)));
	}
}

@media (max-width: 1200px) {
	.l-main .p-mv_txt p { font-size: var(--fs16); }
	.p-mv_txt { font-size: var(--fs14); }
}

@media (max-width: 990px) {
	.p-mv_bg {
		background-image: url(../img/mv_bg_sp.svg);
		background-size: 1046px 989px;
		background-position: -700px -50px;
	}

	.p-mv_txt {
		width: auto;
		right: auto;
		left: 30px;
		padding-top: 50px;
		justify-content: flex-start;
	}
	.p-mv_img.--s2 {
		right: calc(120px + (310 - 120) * ((100vw - 767px) / (990 - 767)));
	}
	.p-mv_img.--s3 img {
		width: calc( 685px - (990px - 100vw) );
	}
	.p-mv_img.--s4 {
		right: calc( -169px + (-80 * ((100vw - 767px) / 222)));
	}
	.p-mv_img.--s4 img {
		width: calc( 841px - (990px - 100vw) );
	}
	.p-mv_img.--s5 img {
		width: calc( 882px - (990px - 100vw) );
	}
}

@media (max-width: 767px) {
	.p-mv_bg {
		background-image: url(../img/mv_bg_sp.svg);
		background-size: 667px 631px;
		background-position: -356px 32px;
	}
	
	.p-mv_slide {
		height: 590px;
	}

	.p-mv_h {
		top: 45px;
		left: 50%;
		transform: translateX(-50%);
	}
	.p-mv_h img {
		width: 233px;
		height: auto;
	}

	.p-mv_txt {
		position: static;
		padding-top: 0;
	}

	.p-mv_txt p {
		opacity: 0;
		transition: none;
		font-weight: 700;
		line-height: 1.6;
		display: flex;
		width: 315px;
		height: 280px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		align-items: center;
		transition: opacity 1.3s ease;
	}
	.l-main .p-mv_txt p { font-size: var(--fs18); }
	.p-mv[data-slide="5"] .p-mv_txt p:nth-child(4),
	.p-mv[data-slide="4"] .p-mv_txt p:nth-child(3),
	.p-mv[data-slide="3"] .p-mv_txt p:nth-child(2),
	.p-mv[data-slide="2"] .p-mv_txt p:nth-child(1) {
		opacity: 1;
		font-size: var(--fs18);
	}

	.p-mv_img.--s1 { left: calc(50% - 85px); height: 298px; }
	.p-mv_img.--s1 img { width: 221px; }
	.p-mv_img.--s2 { left: calc(50% - 47px); }
	.p-mv_img.--s2 img { width: 107px; }
	.p-mv_img.--s3 { left: calc(50% - 156px); height: 337px; }
	.p-mv_img.--s3 img { width: 355px; }
	.p-mv_img.--s4 { left: calc(50% - 198px); height: 309px;}
	.p-mv_img.--s4 img { width: 475px; }
	.p-mv_img.--s5 { left: calc(50% - 262px); height: 317px;}
	.p-mv_img.--s5 img { width: 488px; }
}

/*-------------------------------------------------------*/
/* mv nav */
/*-------------------------------------------------------*/

.p-mv_nav {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 24px;
}

.p-mv_btn {
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	transition: opacity 0.3s ease;
	background: transparent;
}

.p-mv_btn::after {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--c-nttblue);
	transition: border 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.p-mv_btn:hover {
	opacity: 0.5;
}

.p-mv[data-slide="1"] .p-mv_btn[data-bt="1"]::after,
.p-mv[data-slide="2"] .p-mv_btn[data-bt="2"]::after,
.p-mv[data-slide="3"] .p-mv_btn[data-bt="3"]::after,
.p-mv[data-slide="4"] .p-mv_btn[data-bt="4"]::after,
.p-mv[data-slide="5"] .p-mv_btn[data-bt="5"]::after {
	width: 24px;
	height: 24px;
	background-color: #FFF;
	border: 2px solid var(--c-nttblue);
}

@media (max-width: 767px) {
	.p-mv_nav {
		gap: 10px;
	}

	.p-mv_btn {
		width: 12px;
		height: 12px;
	}

	.p-mv_btn::after {
		width: 8px;
		height: 8px;
	}

	.p-mv[data-slide="1"] .p-mv_btn[data-bt="1"]::after,
	.p-mv[data-slide="2"] .p-mv_btn[data-bt="2"]::after,
	.p-mv[data-slide="3"] .p-mv_btn[data-bt="3"]::after,
	.p-mv[data-slide="4"] .p-mv_btn[data-bt="4"]::after,
	.p-mv[data-slide="5"] .p-mv_btn[data-bt="5"]::after {
		width: 12px;
		height: 12px;
		border-width: 1px;
	}
}

/*-------------------------------------------------------*/
/* coming soon */
/*-------------------------------------------------------*/

.p-coming {
	padding-bottom: 40px;
	margin-bottom: 200px;
}

.p-coming img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
	--w: clamp(10px, calc(10px + (40px - 10px) * ((100vw - 767px) / (1390px - 767px))), 40px);
	box-shadow: var(--w) var(--w) 0 #0F5E92;
}

@media (max-width: 767px) {
	.p-coming {
		padding-bottom: 10px;
		margin-bottom: 110px;
	}
}

/*-------------------------------------------------------*/
/* INTRODUCTION */
/*-------------------------------------------------------*/

.p-int {
	display: flex;
	justify-content: space-between;
	margin: auto;
	max-width: 1080px;
	gap: 15px;
}

.p-int_img {
	width: 300px;
	text-align: center;
	flex-shrink: 1;
}

.p-int_img img {
	display: block;
	margin: auto;
	width: 211px;
	height: auto;
}

.p-int_img_txt {
	margin-top: 25px;
}

.p-int_img_txt span {
	display: block;
	font-family: "Murecho", sans-serif;
	font-weight: 700;
	color: var(--c-nttblue);
}

.p-int_img_txt .--ja {
	font-size: var(--fs43);
	letter-spacing: 5%;
}

.p-int_img_txt .--en {
	font-size: var(--fs14);
	letter-spacing: 15%;
}

.p-int_txt {
	width: 693px;
	font-family: "Murecho", sans-serif;
	font-weight: 400;
	font-size: var(--fs18);
	line-height: 2.2;
	letter-spacing: 3%;
	padding-top: 40px;
	flex-shrink: 2;
}

.p-int_txt > p {
	margin-top: 2.9em;
}

.p-int_txt > p:first-child {
	margin-top: 0;
}

@media (max-width: 1079px) {
    .l-main .p-int_txt > p {
        font-size: 100%;
    }
}

@media (max-width: 767px) {
	.p-int {
		flex-direction: column;
		align-items: center;
		gap: 55px;
	}

	.p-int_img {
		order: 2;
		width: auto;
	}

	.p-int_img img {
		width: 146px;
	}

	.p-int_img_txt {
		margin-top: 15px;
	}

	.p-int_img_txt .--ja {
		font-size: var(--fs30);
	}

	.p-int_txt {
		order: 1;
		font-size: var(--fs15);
		width: auto;
		max-width: 390px;
		padding-top: 0;
	}

	.p-int_txt > p {
		margin-top: 1.4em;
	}
}