@charset "UTF-8";

/* ============================================================
CSS Custom Properties
============================================================ */

:root {
	--color-nttblue: #0072BC;
	--color-darkblue:#005B97;
	--color-cream:   #F3F1E9;
	--color-white:   #FFF;
	--color-black:   #1A1311;

	/* グローバルヘッダーの高さ。パネル・コンテンツの top オフセットに使用 */
	--global-header-height: 70px;
	--layout-mobile-width: 390px;
	--layout-panel-width:  calc((1920px - var(--layout-mobile-width)) / 2);

	@media (width <= 1079px) {
		--global-header-height: 60px;
	}

	/* ティッカーテキストエリアの高さ */
	--ticker-height: 130px;
}


/* ============================================================
Layout:
============================================================ */

.l-topicpath,
.l-footer {
	position: relative;
	z-index: 2;
}

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

.l-sec:has(.l-shinsa) {
	position: relative;
	z-index: 2;
	padding-block: 30px;
	background-color: #fff;
}

.l-shinsa {
	margin-block: 0;
}


/* ============================================================
Block: page-wrapper
header の高さ分だけ押し下げるラッパー。
============================================================ */

.page-wrapper {
	padding-top: var(--global-header-height);
	/* フッターは static なので padding-bottom 不要 */
}


/* ============================================================
Block: page-layout
PC全体の3カラムラッパー
============================================================ */

.page-layout {
	display: flex;
	min-height: calc(100vh - var(--global-header-height));
	position: relative;
	background-color: var(--color-cream);

	/* 初回公開時のティッカー無しで、ティッカーの高さを取らないように */
	&:not(:has(.ticker-wrap)) {
		--ticker-height: 24px;
	}
}


/* ============================================================
Block: brand-panel
左側のパネル（ロゴ＋ビジュアル）。
============================================================ */

.brand-panel {
	position: sticky;
	top: var(--global-header-height);
	width: min(var(--layout-panel-width), 100%);
    margin-left: auto;
	height: calc(100vh - var(--global-header-height));

	padding: 24px 0 var(--ticker-height) 24px;
	z-index: 1;
	overflow: hidden;
}

.brand-panel__wrap {
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 24px;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	background-color: var(--color-white);
	box-shadow: 0 0 6px rgb(0 0 0 / 0.06);

	& > .hero-logo {
		& > .hero-logo__text {
			animation: none;
			rotate: 190deg;
		}
	}
}

.brand-panel__logo {
	text-align: center;

	& > img {
		width: 390px;
	}
}


/* ============================================================
Block: nav-panel
右側のパネル（アンカーナビ）。
============================================================ */

.nav-panel {
	position: sticky;
	top: var(--global-header-height);
	width: min(var(--layout-panel-width), 100%);
    margin-right: auto;
	height: calc(100vh - var(--global-header-height));

	padding: 24px 24px var(--ticker-height) 0;
	z-index: 1;
	overflow: hidden;
}

.nav-panel__wrap {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 24px;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	background-color: var(--color-white);
	box-shadow: 0 0 6px rgb(0 0 0 / 0.06);

	> nav {
		width: min(320px, 100%);
	}
}

.nav-panel__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	list-style: none;
}

.nav-panel__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	background-color: var(--color-white);
	border: 3px solid #DECCA5;
	border-radius: 12px;
	box-shadow: inset 0 0 18px rgb(241 236 171 / 60%);
	padding: 15px;
	transition: background-color 0.2s;
	text-decoration: none !important;
	color: var(--color-black) !important;

	&:hover {
		background-color: #FFF1D2;
		box-shadow: inset 0 0 18px rgb(176 171 103 / 40%);
	}
}

.nav-panel__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--color-nttblue);

	display: grid;
	place-items: center;
	transition: background 0.2s, transform 0.15s;
}

.nav-panel__item:hover .nav-panel__icon {
	background-color: var(--color-darkblue);
}


/* ============================================================
Block: mobile-view
中央のモバイルUIカラム
============================================================ */

.mobile-view {
	/* 画面幅1920pxで585px、画面幅1280pxで390px */
	width: clamp(390px, 30.46875vw, 585px);

	min-height: calc(100vh - var(--global-header-height));
	background-color: var(--color-white);
	position: relative;
	z-index: 2; /* ticker-wrapの上に来るように */
	flex-shrink: 0;

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 12px;
		pointer-events: none;
		z-index: 5;
	}

	&::before {
		right: 100%; /* 左 */
		background: linear-gradient(to left, rgb(0 0 0 / 0.2), transparent);
	}
	&::after {
		left: 100%;  /* 右 */
		background: linear-gradient(to right, rgb(0 0 0 / 0.2), transparent);
	}
}


/* ============================================================
Block: content-section
============================================================ */

.content-section {
	padding: 40px 20px;
	scroll-margin-top: var(--global-header-height);

	position: relative;
	z-index: 2;
	background-color: #fff;
}

.content-section__title {
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.content-section__body {
	line-height: 2.1;
	font-weight: 500;
	font-size: 14px;
}


/* ============================================================
Block: hero
============================================================ */

.hero {
	padding-top: 40px;
	overflow: hidden;
	background: url(../img/hero_bg.png) no-repeat center top / cover;

	/* iPad miniの横持ちの高さ相当以上のサイズでファーストビューいっぱいに表示 */
	@media (height >= 768px) {
		display: grid;
		place-items: center;
		height: calc(100svh - var(--global-header-height));

		padding-top: 0;
		padding-bottom: 500px;

		/* 画面幅1280px以下（.mobile-viewが390pxになる）でイラストの高さ相当のpaddingを下にとる */
		@media (width <= 1280px) {
			padding-bottom: 340px;
		}
	}

	/* iPhone14相当サイズでタイトルエリアの横の隙間を多めに */
	@media (width <= 390px) and (orientation: portrait) {
		& > .hero-wrap {
			padding-inline: 60px;
		}
	}

	/* iPhoneSE相当サイズでタイトルエリアの横の隙間をさらに多めに */
	@media (width <= 375px) and (orientation: portrait) {
		& > .hero-wrap {
			padding-inline: 80px;
		}
	}
}

.hero-wrap {
	padding-inline: 40px;
}

.hero-logo {
	position: relative;
	display: block;
	width: 140px;
	height: 140px;
	margin: 0 auto;

	/* iPhoneSE相当サイズで回転ロゴを少し縮小 */
	@media (width <= 375px) and (orientation: portrait) {
		transform: scale(0.8);
	}
}

.hero-logo__text {
	position: absolute !important;
	top: -1px !important;
	left: -2px !important;
	animation: rotate 15s linear infinite;
}

.hero-logo__icon {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	inset: 0;
	margin: auto;
}

@keyframes rotate {
	from { rotate: 0deg; }
	to   { rotate: 360deg; }
}

.hero__title,
.hero__lead {
	margin-top: 40px !important;
	text-align: center;

	@media (width <= 375px) and (orientation: portrait) {
		margin-top: 10px !important;
	}

	& > img {
		width: 519px;
	}
}

.hero__illust {
	position: fixed;
	bottom: 0;
	z-index: 1;
	overflow: hidden;

	margin-top: 0 !important;
	text-align: center;

	/* iPad miniの横持ちの高さ相当未満のサイズでイラストの固定を解除（タイトルに被らないように） */
	@media (height < 768px) {
		position: static;
	}

	& > img {
		transform-origin: bottom center;
		animation: train-sway 4s ease-in-out infinite;

		/* 画面幅1920pxで585px、画面幅1280pxで390px */
		width: clamp(390px, 30.46875vw, 585px);
	}
}

@keyframes train-sway {
	0%   { transform: rotate(-0.3deg) translate(-2px,  0px); }
	20%  { transform: rotate( 0.1deg) translate( 1.5px, -1.5px); }
	40%  { transform: rotate(-0.2deg) translate(-1px,   0.5px); }
	60%  { transform: rotate( 0.4deg) translate( 2px,  -1px); }
	80%  { transform: rotate(-0.1deg) translate(-1.5px,  0.5px); }
	100% { transform: rotate(-0.3deg) translate(-2px,  0px); }
}


/* ============================================================
Block: about
============================================================ */

#about {
	background: url(../img/about_bg.png) no-repeat center top / cover;
}

.about-wrap {
	padding: 74px 30px 55px;
	background: url(../img/about_wave.svg) no-repeat center / contain;
}

.about-block {
	overflow: hidden;
}

.scroll-reveal.is-visible:has(.about-block) {
	--skewX: 0deg;
	--x: 0;
}

.about-block__word {
	width: fit-content;
	margin-inline: auto;

	color: #333;
	font-size: clamp(18px, 6px + 0.9375vw, 24px);
	font-weight: 700;
	transform: translateX(var(--x, -110%)) skewX(var(--skewX, 8deg));
	transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: 0.3s;

	@media (width <= 390px) {
		font-size: 14px;
	}

	& > span {
		display: block;
		width: fit-content;
		padding: 3px 12px;
		background-color: #FDBC01;

		& + span {
			margin-top: -1px;
		}
	}
}

.about__illust {
	aspect-ratio: 390 / 342;
	width: 100%;
	height: auto;
}


/* ============================================================
Block: contents
============================================================ */

#contents {
	padding-block: 70px 135px;
	background: #F3F1E9 url(../img/wave_bg-white.png) no-repeat right bottom;

	& > .hero-logo {
		transform: scale(0.8calc(120 / 140));
	}
}

.contents__title {
	margin-top: 16px;
	text-align: center;
}


/* ============================================================
Block: voice-actor
============================================================ */

.voice-actor {
	margin-top: 32px;
	padding: 24px 16px 16px;
	border-radius: 16px;
	background-color: var(--color-white);
	box-shadow: 0 0 8px rgb(0 0 0 / 0.06);
}

.voice-actor__title {
	text-align: center;
}

.voice-actor__name {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}

.voice-actor__info {
	margin-top: 16px;
	padding: 12px;
	border-radius: 16px;
	background-color: #F7F7F7;

	& > h4 {
		display: grid;
		place-items: center;
		height: 25px;
		border-radius: 13px;
		background-color: var(--color-nttblue);
	}

	& > .o-list {
		margin-top: 10px;
		font-size: 14px;
		font-weight: 500;

		& > li:before {
			background: #333;
		}
	}
}


/* ============================================================
Block: track-list
============================================================ */

.track-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin-top: 32px;
}

/* Each track card */
.track-card {
	background-color: var(--color-white);
	border: 3px solid #DECCA5;
	border-radius: 12px;
	box-shadow: inset 0 0 16px rgb(241 236 171 / 80%);
	padding: 14px 14px 14px 10px;
	transition: background-color 0.2s;

	&:hover {
		background-color: #FFF1D2;
		box-shadow: inset 0 0 16px rgb(176 171 103 / 40%);
	}

	&.playing {
		background-color: #FFF1D2;

		& .icon-play  { display: none; }
		& .icon-pause { display: block; }
	}
}

/* Play button row */
.play-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	gap: 12px;
	text-align: left;

	&:hover .btn-icon {
		background-color: var(--color-darkblue);
	}

	&:active .btn-icon {
		transform: scale(0.80.92);
	}

	@media (width <= 390px) {
		& > img {
			width: 50px;
			height: auto;
		}
	}
}

.btn-info {
	flex: 1;
	min-width: 0;
}

.btn-track-name {
	display: block;
	margin-bottom: 0.25rem;
}

.btn-meta {
	font-size: 11px;
	color: #999;
	letter-spacing: 0.04em;
}

.btn-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-nttblue);

	display: grid;
	place-items: center;
	transition: background 0.2s, transform 0.15s;
}

.icon-play  { display: block; }
.icon-pause { display: none; }

/* Progress section */
.progress-section {
	margin-top: 1rem;
}

.progress-bar {
	width: 100%;
	height: 3px;
	background: #e8e4dc;
	border-radius: 2px;
	cursor: pointer;
	position: relative;

	& .progress-fill {
		height: 100%;
		background: #1a1a1a;
		border-radius: 2px;
		width: 0%;
		transition: width 0.1s linear;
		pointer-events: none;
	}
}

.time-row {
	display: flex;
	justify-content: space-between;
	margin-top: 0.55rem;
	font-size: 0.65rem;
	color: #999;
}


/* ============================================================
Block: brand
============================================================ */

#brand {
	padding-block: 0 60px;
	background-color: var(--color-white);
}

.brand__title-sub {
	margin-top: 0 !important;
	margin-bottom: 8px;
	text-align: center;
}

.brand__title-main {
	line-height: 1;
	font-weight: 700;
	font-size: 48px;
	text-align: center;
	color: var(--color-nttblue);
}


/* ============================================================
Block: voicence
============================================================ */

#voicence {
	padding-block: 60px 184px;
	background:
		url(../img/voicence_line.svg) no-repeat center bottom 104px / 100% auto,
		url(../img/wave_bg-blue.png) no-repeat left bottom,
		url(../img/voicence_bg.jpg) repeat center center / 100% auto;

	& .voicence__title-sub {
		margin-top: 0 !important;
		font-weight: bold;
		text-align: center;
	}

	& .voicence__title-main {
		margin-top: 16px;
		text-align: center;
	}
}


/* ============================================================
Block: official-x
============================================================ */

#official-x {
	padding-block: 0 135px;
	background: var(--color-nttblue) url(../img/wave_bg-white.png) no-repeat right bottom;
	color: var(--color-white);
}


/* ============================================================
Block: twitter-tweet
============================================================ */

.twitter-tweet {
	margin-top: 32px !important;
	margin-inline: auto;
}


/* ============================================================
Block: interview
============================================================ */

#interview {
	padding-top: 0;
}


/* ============================================================
Block: loc-youtube
============================================================ */

.loc-youtube {
	cursor: pointer;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin-top: 32px;

	& > img {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	& > iframe {
		display: block;
		width: 100%;
		height: 100%;
	}

	&.is-hidden {
		& img,
		&::after {
			display: none;
		}
	}
}

.u-icon_youtube {
	position: relative;

	&::after {
		content: '';
		display: block;
		width: 60px;
		height: 60px;
		position: absolute;
		right: 10px;
		bottom: 10px;
		background: var(--color-white) url(/brand/img/202510top/icon_play.png) no-repeat center / 40px;
		border-radius: 100%;
		box-shadow: 0 0 10px rgb(0 0 0 / 0.6);
		transition: transform 0.2s ease-out;
		pointer-events: none;
	}
}


/* ============================================================
Block: ticker-wrap
============================================================ */

.ticker-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 89px;
	overflow: hidden;
	display: flex;
	align-items: center;
	z-index: 1;

	&.is-absolute {
		position: absolute;
	}
}

.ticker-track {
	width: 100%;
	overflow: hidden;
	height: 100%;
}

.ticker-inner {
	display: flex;
	align-items: center;
	height: 100%;
}

.ticker-text {
	display: block;
	width: fit-content;
	padding: 0 3rem;

	animation: scroll-left 30s infinite linear 1s both;
	will-change: transform;
}

@keyframes scroll-left {
	from { translate: 0; }
	to   { translate: -100%; }
}

/* ============================================================
Responsive:
============================================================ */

@media (width <= 1079px) {
	.brand-panel__wrap,
	.nav-panel__wrap {
		padding: 0;
	}

	.brand-panel__wrap > *,
	.nav-panel__wrap > nav {
		display: none;
	}
}

@media (width <= 968px) {
	html, body.cmn2 {
		overflow-x: unset;
	}
}

@media (width <= 460px) {
	.page-layout {
		overflow: hidden;
	}

	.brand-panel,
	.nav-panel,
	.ticker-wrap {
		padding: 0;
	}

	.brand-panel__wrap,
	.nav-panel__wrap,
	.ticker-wrap {
		display: none;
	}
}

@media (width <= 390px) {
	.brand-panel,
	.nav-panel {
		display: none;
	}

	.mobile-view {
		width: 100%;
		max-width: 100%;
	}
}


/* ============================================================
Utility:
============================================================ */

.o-btn--yellow {
	border-radius: 8px;
}

.img-auto {
	max-width: 100%;
	height: auto;
}