@charset "utf-8";

/*  ===============================
			ROOT
===============================*/

/* variable
===============================
	--bigInrMaxW -
	--cntInrMaxW - pc時inrのmaxwidth inr
*/

html {
	/* scroll-behavior: smooth; */
}

img {
	width: auto;
}

/* 1200px < window */
:root {
	--windowMinW: 1024px;
	--windowMaxW: none;
	--cntInrMaxW: 960px;
	--bigInrMaxW: 1200px;
	--secBodyWidth: 960px;

	/* sp camp width */
	--spCampWidth: 375;

	/* js */
	--documentHeight: ;

	--commonSidePadding: 40px;
	--sans-serif: "Noto Sans JP", sans-serif;
	--serif: "Noto Serif JP", serif;
	--en: "EB Garamond", serif;

	--fzBody: 16px;
	--letterBody: 1px;
	--lh: 1.8;

	--documentTextAlign: center;
	--primaryColor: #00029b;
	--textColor: #575757;
	--lightTextColor: #fff;
	--darkTextColor: #2c1903;

	/* --bgBody: url(../images/bg_body.jpg) repeat; */
	--bgColor: var(--bgColor);
	font-size: 10px;
}

body {
	font-family: var(--serif);
	color: var(--textColor);
	background: var(--bgBody);
	background-color: var(--bgColor);

	font-size: var(--fzBody);
	line-height: var(--lh);
	letter-spacing: var(--letterBody);
	text-align: var(--documentTextAlign);
}

body.development {
	/* display */
	--dvModeDisplay: block;
	--dvModeAlpha: 1;
}

body:not(.development) {
	/* display */
	--dvModeDisplay: none;
	--dvModeAlpha: 0;
}

html,
body,
.loading {
	max-width: var(--windowMaxW);
	min-width: var(--windowMinW);
}

.Ghdr,
.hero,
.main {
	min-width: var(--windowMinW);
}

.inr {
	max-width: var(--cntInrMaxW);
	margin-left: auto;
	margin-right: auto;
}

/* window = 1025px ~ 1199px */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	:root {
		--windowMinW: 1024px;
		--windowMaxW: 100%;
		--cntInrMaxW: 960px;
		--bigInrMaxW: 1200px;
	}
}

/* window = 769px ~ 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
	:root {
		--windowMinW: 1024px;
		--windowMaxW: 100%;
		--cntInrMaxW: 960px;
		--bigInrMaxW: 1200px;
	}
}

/* window < 768px */
@media screen and (max-width: 768px) {
	:root {
		--windowMinW: none;
		--windowMaxW: 100%;
		--cntInrMaxW: 480px;
		--bigInrMaxW: 100%;
	}

	.inr {
		padding-left: var(--commonSidePadding);
		padding-right: var(--commonSidePadding);
	}
}

/* init */

body {
	position: relative;
	overflow-x: hidden;
}

/* fade init */

.sec_body {
	opacity: var(--dvModeAlpha);
}

.fade.is-show,
.fade--show,
.sec.is-show .sec_body {
	--y: 20;
	animation: fadeInToTop 1.5s forwards 0s;
	will-change: opacity, transform, animation;
}

.fade {
	opacity: 0;
}

.fade--show {
	animation-duration: 0.6s;
}

/* development */
.development .sec_body,
.development .main img,
.development .Gcontainer img {
	opacity: var(--dvModeAlpha) !important;
}

.development .Gcontainer:not(.is-active),
.development .main:not(.is-active),
.development .Gftr:not(.is-active) {
	display: var(--dvModeDisplay) !important;
}

/*  ===============================
	animation & transition
===============================*/

/* clip-to-bottom
===============================
*/

/*  ===============================
			global
===============================  */

.Gcontainer {
	overflow: hidden;
}

/* Gheader
===============================
.Ghdr
*/

.Ghdr {
}

.Ghdr_ttl {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	right: 0.5em;
	font-size: clamp(11px, 4vw, 12px);
	font-weight: 400;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1000;
}

/* navi
===============================
Gnavi
*/

.Gnavi {
	position: fixed;
	z-index: 100;
}

@media screen and (min-width: 769px) {
	.Gnavi {
		top: 30px;
		left: 35px;
		text-align: left;
	}
}

.Gnavi_list {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

.Gnavi_item {
	position: relative;
	display: flex;
	align-items: flex-start;
}

.Gnavi_itemImg {
}
.Gnavi_itemImg--release {
	width: 19.8px;
}
.Gnavi_itemImg--song {
	width: 24.9px;
}
.Gnavi_itemImg--benefit {
	width: 26.1px;
}
.Gnavi_itemImg--tieup {
	width: 25.7px;
}

.Gnavi_anchor {
	padding: 10px 12px;
	cursor: pointer;
}
.Gnavi_anchor--release {
	padding-right: 14px;
	padding-bottom: 15px;
}
.Gnavi_anchor--song {
	padding-bottom: 70px;
}
.Gnavi_anchor--benefit {
	padding-bottom: 100px;
}
.Gnavi_anchor--tieup {
	padding-right: 10px;
	padding-bottom: 45px;
}

.Gnavi_item:last-child::before,
.Gnavi_item::after {
	content: "";
	position: absolute;
	right: 0;
	display: block;
	width: 2px;
	height: 100%;
	background: url(../images/navi/border.png) top / 2px 100% no-repeat;
}

.Gnavi_item:last-child::before {
	left: 0;
}

@media screen and (min-width: 769px) {
	.Gnavi_btn {
		display: none;
	}

	.Gnavi_ftr {
		display: none;
	}
}

/* animation */
/* header画像を白文字 */
.is-white {
	filter: grayscale(1) brightness(100);
}

/* 展開中は有色 */
/* .Ghdr img , .Gnavi hamburger */
.is-active .is-white {
	filter: none;
}

/* footer
===============================
Gftr
*/

.Gftr {
	text-align: center;
	background: url(../images/bg_body.jpg) center / cover no-repeat;
}

.Gftr_inr {
	max-width: 395px;
	padding: 150px 0 63px;
}

.Gftr_link {
	margin-top: 50px;
}

.Gftr_copy {
	padding-bottom: 25px;
	font-size: clamp(10px, 3.7vw, 14px);
	font-weight: bold;
	letter-spacing: 0.5px;
}

/* main
===============================
*/

.Gmain {
}

/* sec , subSec
===============================
*/

.sec {
	position: relative;
	padding: 20rem 0 10rem;
	background: center / cover no-repeat;
}

@keyframes bgLoop {
	from {
		background-position-x: 0;
	}
	to {
		background-position-x: -1440px;
	}
}

.sec--release {
	background: url(../images/bg_release.jpg) center / 1440px 100% repeat-x;
	animation: bgLoop 30s linear 0s infinite;
}

.sec--song {
	background: url(../images/bg_song.jpg) 0 0 /1440px 1316px repeat;
}

.sec--benefit {
	background-image: url(../images/bg_benefit.jpg);
}

.sec--tieup {
	background: url(../images/bg_tieup.jpg) center / 1440px 100% repeat-x;
	animation: bgLoop 30s linear 0s infinite;
}

@media screen and (max-width: 768px) {
	.sec--release {
		background: url(../images/bg_release_sp.jpg) center / 1440px 100% repeat-x;
	}

	.sec--song {
		background-image: url(../images/bg_song_sp.jpg);
		background-size: calc(750px / 2) calc(2004px / 2);
	}

	.sec--benefit {
		background-image: url(../images/bg_benefit_sp.jpg);
	}

	.sec--tieup {
		background: url(../images/bg_tieup_sp.jpg) center / 1440px 100% repeat-x;
	}
}

.sec_inr {
	--w: 90%;
	width: var(--w);
	max-width: 1160px;
}

@media screen and (min-width: 769px) {
	.sec_inr {
		position: relative;
	}
}

.sec_inr--tieup {
	width: 60%;
	max-width: 784px;
}

.sec_hdr {
	position: absolute;
	top: -17rem;
	display: inline-block;
	width: auto;
	z-index: 1;
}

.sec_hdr--left {
	top: -8rem;
	left: 5rem;
}
.sec_hdr--right {
	right: 3rem;
}

.sec_hdr--benefit {
	right: 1rem;
}

.sec_hdr--tieup {
	top: -10rem;
	right: -12rem;
}

.sec_ttl {
	--paddingHorizon: 10px;
	display: inline-block;
	padding: 20px var(--paddingHorizon) 0;
	vertical-align: top;
}

.sec_ttl--release {
	--paddingHorizon: 18px;
}

.sec_ttl--song {
	--paddingHorizon: 12px;
}

.sec_ttl--benefit {
	--paddingHorizon: 18px;
}

.sec_ttl--tieup {
	--paddingHorizon: 20px;
}

.sec_borderTtl {
	position: absolute;
	top: 0;
}

.sec_borderTtl img {
	max-width: none;
}

.sec_enTtl {
	position: absolute;
	width: max-content;
	margin-top: -2rem;
}

@media screen and (min-width: 769px) {
	.sec_enTtl--release {
		top: 60%;
		right: 5rem;
	}

	.sec_enTtl--song {
		bottom: -20rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.sec_enTtl--benefit {
		top: 60%;
		right: 6.5rem;
	}

	.sec_enTtl--tieup {
		left: -100%;
	}
}

/*  ===============================
		  component
===============================*/

/* btn
===============================
*/

/* label
===============================
*/

/* hamburger
===============================
*/

@media screen and (min-width: 769px) {
	.hamburger {
		display: none;
	}
}

/* marker
===============================
*/

/* texts
===============================
*/

/* notes
===============================
*/

/* sns_list
===============================
*/
.sns_list {
	position: relative;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

.sns_list::after,
.sns_item::before {
	content: "";
	position: absolute;
	display: block;
	width: 3px;
	height: 46px;
	background: url(../images/sns_border.png) center / cover no-repeat;
}

.sns_list::after {
	right: 0;
}
.sns_item::before {
	left: 0;
}

.sns_item {
	position: relative;
	display: flex;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	padding: 0 30px;
	box-sizing: content-box;
}

.sns_anchor {
	position: relative;
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 1;
}

.sns_anchor::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* background-color: #37BEF0; */
	transform: rotate(45deg);
	z-index: 0;
}

@media screen and (min-width: 769px) {
	.sns_anchor:hover {
		opacity: 0.8;
	}
}

.sns_img {
	position: relative;
	z-index: 1;
	fill: #0f0f0f;
	width: auto;
}

.official-link {
	text-align: center;
}

.official-link_anchor {
	font-size: clamp(10px, 4.5vw, 17px);
	text-decoration: none;
}

/* scrollGuide
===============================
*/
.scrollGuide {
	display: inline-block;
	position: absolute;
	right: 10px;
	bottom: 0;
	padding: 10px 10px 85px;
	font-size: clamp(9px, 3.1vw, 11px);
	line-height: 1;
	letter-spacing: 0;
	writing-mode: vertical-lr;
	overflow: hidden;
}

.scrollGuide::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 80px;
	background: rgba(87, 87, 87, 0.4);
}

.scrollGuide::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 80px;
	background: var(--textColor);
	animation: scrollGuide 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes scrollGuide {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

/*  ===============================
		  project
===============================*/

/* hero
===============================
*/
.hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;

	/* opacity: 0;
	--y: 20;
	animation: fadeIn 1s forwards 0.5s;
	will-change: opacity, transform, animation; */
}

.hero_image {
	width: 100%;
	max-width: none;
	height: 100svh;
	transition: 1s;
}

.hero_image:not(.is-show) {
	opacity: 0;
}

.hero_image img {
	max-width: none;
	width: 100%;
}

@media screen and (min-width: 769px) {
	.hero_image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
	}

	.hero_image img {
		height: 100svh;
		object-fit: cover;
	}
}

.hero_ttl {
	position: absolute;

	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	top: 30px;
	right: 70px;

	text-align: center;
}

.hero_ttlCol {
	display: flex;
	flex-direction: row-reverse;
}

.hero_ttlCol--1 {
}

.hero_ttlCol--2 {
	margin-top: 70px;
}

.hero_ttlImage {
	--horizontalPadding: 0;
	box-sizing: content-box;
	padding: 1rem var(--horizontalPadding);
	top: 3rem;
	transition: 1.5s;
}

.hero_ttlImage--1 {
	--horizontalPadding: 1.2rem;
}

.hero_ttlImage--2 {
	--horizontalPadding: 1.5rem;
}

.hero_lead {
	position: absolute;
	left: 30px;
	bottom: 25px;
	color: #fff;
	animation-delay: 0.75s;
	z-index: 0;
}

.hero_leadRow {
	margin-top: 1rem;
}

.hero_leadRow--cursive {
	margin-top: -1.5rem;
}

/* release
===============================
*/
.release {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
	padding: 5rem 8rem 8rem;
	background: url(../images/bg_notebook.jpg) center / 5px 25px repeat;
}

.release_list {
	display: flex;
	justify-content: space-between;
}

.release_item {
	width: calc(100% / 3);

	margin-left: auto;
	margin-right: auto;
	padding: 0 10px;
}

@media screen and (min-width: 769px) {
	.release_item {
		max-width: 220px;
	}
}

.disc_hdr {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 120px;
}

.disc_ttl {
	font-weight: bold;
	font-size: clamp(11px, 4.6vw, 17px);
	letter-spacing: 0;
}

.disc_ttl span {
	display: inline-block;
}

.disc_label {
	display: inline-block;
	margin: 15px auto;
	padding: 0 10px;
	background: var(--textColor);
	color: var(--lightTextColor);
	font-size: clamp(9px, 3.2vw, 12px);
}

.disc_thumb {
	margin: 0 auto;
}

@media screen and (min-width: 769px) {
	.disc_thumb {
		height: 220px;
	}

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

.disc_texts {
	max-width: 288px;
	margin: 0 auto;
	font-family: var(--sans-serif);
	font-size: clamp(9px, 3.2vw, 12px);
	text-align: left;
	line-height: 2rem;
}

.disc_info {
	margin: 10px 0 15px;
	letter-spacing: 0;
}
.disc_kind {
	font-weight: bold;
}

.disc_info span,
.disc_kind span {
	display: inline-block;
}

/* song
===============================
*/
.sec--song {
	padding-top: 14rem;
	padding-bottom: 16rem;
}

.song {
	max-width: 517px;
	margin: 0 auto;
}

.songBorder {
	font-size: 1em;
	line-height: 0;
}

.songBorder img {
	width: 100%;
}

.songBlock {
	margin-top: 20px;
	margin-bottom: 0;
}
.songBlock:not(:first-child) {
	margin-bottom: 20px;
}

.song_ttl {
	font-size: clamp(13px, 9vw, 29px);
}

.song_ttl span {
	font-weight: bold;
}

.song_desc {
	font-size: clamp(9px, 3.7vw, 15px);
}

.songList {
	margin-top: 60px;
}
.songList_ttl {
	margin-bottom: 2rem;
	font-weight: 700;
}

.songList_texts {
	margin-top: 30px;
	font-size: clamp(9px, 3.7vw, 15px);
	font-weight: 500;
	line-height: 1.2;
}

.songList_texts p:not(:first-child) {
	margin-top: 2rem;
}

.songList_texts span {
	font-size: 0.8em;
	font-weight: 300;
}

.bluray {
	position: relative;
	max-width: 517px;
	margin: 100px auto 0;
}

.bluray_ttl {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 10px 0;
	font-weight: bold;
	font-size: clamp(11px, 2.3vw, 24px);
	text-align: left;
}

.bluray_subTtl {
	font-weight: 400;
	font-size: clamp(9px, 3.7vw, 14px);
}

.blurayMore_bar {
	position: relative;
	width: 24px;
	height: 24px;
	transition: all 0.2s;
	cursor: pointer;
}

.blurayMore_bar:before,
.blurayMore_bar:after {
	content: "";
	position: absolute;
	top: 10px;
	width: 24px;
	height: 3px;
	background: var(--textColor);
	transition: all 0.5s;
}

.blurayMore_bar:after {
	transform: rotate(90deg);
}

.is-active .blurayMore_bar:before {
	transform: rotate(-45deg);
}
.is-active .blurayMore_bar:after {
	transform: rotate(-135deg);
}

.bluray_texts {
	padding: 20px 0;
	font-size: clamp(9px, 3.7vw, 15px);
	font-weight: bold;
	text-align: left;
}

.bluray_text span {
	display: inline-block;
}

.bluray_list {
	padding: 10px 0 30px;
}

@media screen and (min-width: 769px) {
	.bluray_list {
		column-count: 2;
	}
}

.bluray_item {
	display: flex;
	align-items: flex-start;
	font-size: clamp(9px, 3.7vw, 14px);
	text-align: left;
	margin-bottom: 10px;
}

.bluray_num {
	margin-right: 5px;
}

.bluray_name {
	font-weight: bold;
}

/* benefit
===============================
*/
.benefit_texts {
	margin: 50px auto 60px;
	font-weight: bold;
	font-size: clamp(10px, 1.7vw, 18px);
}

.benefit_text:not(:first-child) {
	margin-top: 5px;
}

.hallBenefit_text:not(:first-child) {
	margin-top: 20px;
}

.benefit span {
	display: inline-block;
}

.shopBenefit_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1160px;
}

.shopBenefit_list::after {
	content: "";
	display: block;
	width: calc(100% / 3);
}

.shopBenefit_item {
	width: calc(100% / 3);
}

.shopGoods {
	max-width: 262px;
	margin: 0 auto;
}

.shopGoods_hdr {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100px;
}

.shopGoods_text span {
	display: inline-block;
}

.shopGoods_text--shop {
	color: var(--primaryColor);
	font-weight: bold;
	font-size: clamp(10px, 1.7vw, 18px);
}

.shopGoods_text--item {
	font-weight: bold;
	font-family: var(--sans-serif);
	font-size: clamp(9px, 1.3vw, 14px);
}

.shopGoods_thumb {
	margin-top: 1rem;
}

.shopGoods_ftr {
	padding: 20px 0 0;
}

.shopGoods_btn {
	display: block;
	margin: 0 auto;
	padding: 10px 0 10px 0.5rem;
	background: var(--primaryColor);
	color: #fff;
	font-weight: bold;
	font-size: clamp(10px, 1.6vw, 17px);
	letter-spacing: 0.5rem;
}

.shopGoods_notes {
	padding: 10px 0 15px;
	height: 120px;
	font-family: var(--sans-serif);
	font-size: clamp(9px, 1.1vw, 12px);
	text-align: left;
}

.shopGoods_note {
	padding-left: 1em;
	text-indent: -1em;
}

.shopGoods_note:not(:first-child) {
	margin-top: 0.5em;
}

.benefit_notes {
	max-width: 960px;
	font-family: var(--sans-serif);
	font-size: clamp(9px, 1.1vw, 12px);
}

.benefit_note {
	padding-left: 1em;
	text-indent: -1em;
	font-weight: 400;
}

.benefit_note:not(:first-child) {
	margin-top: 0.5em;
}

.shopBenefit_notes {
	margin: 0 auto 150px;
	text-align: left;
	line-height: 1.4;
}

.hallBenefit_notes {
	max-width: 400px;
	margin: 20px auto;
	text-align: left;
}

.hallGoods_thumb {
	display: flex;
	justify-content: space-between;
	max-width: 800px;
	margin: 0 auto;
}

.hallGoods_item {
	margin: 10px;
}

/* tieup
===============================
*/
.tieup {
	padding: 80px 0 90px;
	background: url(../images/bg_notebook.jpg) center / 5px 25px repeat;
}

.mv {
	max-width: 491px;
	margin: 0 auto;
}

.mv:not(:first-child) {
	margin-top: 100px;
}

.mv_ttl {
	line-height: 1;
	font-size: clamp(11px, 2.3vw, 24px);
}
.mv_ttl span {
	font-weight: bold;
}

.mv_desc {
	margin-top: 1.5rem;
	line-height: 1.4;
	font-size: clamp(10px, 1.7vw, 18px);
}

.mv_caption {
	margin-top: 0.5em;
	font-size: clamp(8px, 2.8vw, 11px);
	text-align: left;
}

.mv_pic {
	margin-top: 1.5rem;
}

.mv_video {
	margin-top: 5rem;
}

/* loading
===============================
*/

body:has(.loading.is-anime),
body:has(.hero.is-anime) {
	overflow: hidden;
}

.hero_image {
}

.hero_image.is-anime {
}

.loading,
.blindfold {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}

.blindfold {
	background-color: #fff;
	transition: 0s;
}

.loading_body {
	height: 100svh;
	opacity: 1;
	transition: 1s;
}

.blindfold.is-hidden,
.loading_body.is-hidden {
	opacity: 0;
}

.loading_cut {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 101;
	transition: 0.75s;
}

.loading_cut:not(.is-show) {
	opacity: 0;
}

.loading_name {
	--offset: 10rem;

	margin-top: calc(-1 * var(--offset));
	margin-bottom: var(--offset);
	opacity: 0;
	transition: 1s;
}

.loading_ttls {
	position: relative;
}

.loading_ttl {
	position: relative;
	top: 2rem;

	transition: 2s ease-in-out;
	z-index: 10;
}

.loading_circle {
	position: absolute;
	display: inline-block;
	width: fit-content;
	height: fit-content;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
	z-index: 1;
}

.loading_control {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 1000;
}

.cliptoRight {
	/* transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1); */
	clip-path: inset(0 100% 0 0);
	transition-property: clip-path;
	animation: cliptoRight 2.2s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}