@charset "utf-8";

:root {
	--commonSidePadding: clamp(20px, 7vw, 40px);
}

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

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

.Ghdr {
	left: 1.5rem;
}
.Ghdr_ttl {
}
.Ghdr_ttlImg {
}

/* menu
===============================
Gnavi
*/

.Gnavi {
	overflow: hidden;
}

.Gnavi:not(.is-active) {
	pointer-events: none;
}

.Gnavi_inr {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width: 100vw;
	height: 100svh;
	padding-top: 10vh;
	background-color: rgba(255, 255, 255, 0.9);
	translate: 100% 0;
	opacity: 0;
	transition: 0.5s;
}

.is-active .Gnavi_inr {
	translate: 0 0;
	opacity: 1;
}

.Gnavi:not(.is-active) .Gnavi_list {
}

.Gnavi.is-active .Gnavi_list {
	opacity: 1;
	transition: 1s ease 0.5s;
}

.Gnavi_list {
	opacity: 0;
	transition: 1s ease 0.1s;
}

.Gnavi_btn {
	position: fixed;
	top: 1.5rem;
	left: 1.5rem;
	z-index: 101;
	pointer-events: auto;
}

.Gnavi_ftr {
	width: 100%;
}

.Gnavi_ftr .sns_item {
	padding: 0 5%;
}

.Gnavi_ftr .sns_list::after,
.Gnavi_ftr .sns_item::before {
	content: "";
	display: none;
}

.Gnavi_link {
	margin-top: 20px;
}

.Gnavi_itemImg {
}
.Gnavi_itemImg--release {
	width: 26.4px;
}
.Gnavi_itemImg--song {
	width: 33.3px;
}
.Gnavi_itemImg--benefit {
	width: 34.8px;
}
.Gnavi_itemImg--tieup {
	width: 34.3px;
}

/* footer
===============================
Gftr
*/
.Gftr {
	background: url(../images/bg_body_sp.jpg) center / cover no-repeat;
}

.Gftr_inr {
	max-width: 300px;
	padding: 90px 5px 50px;
}

/* main */
.Gmain {
}

/* sec , subSec
===============================
*/
.sec {
	padding: 70px 0;
}

.sec--release {
	padding-top: 14rem;
}

.sec--campaign {
	padding-top: 18rem;
}

.sec--tieup {
	padding-top: 24rem;
}

.sec_inr {
	--w: 100%;
	width: var(--w);
	max-width: 580px;
	margin: 0 auto;
}

/* hdr */

.sec_hdr {
	top: 2rem;
}

.sec_hdr--right {
	right: 7%;
}

.sec_hdr--left {
	left: 7%;
}

.sec_hdr--tieup {
	right: 4rem;
}

.sec_enTtl {
	top: 60%;
}

/* ttl */

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

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

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

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

/* enTtl */
.sec_enTtl--release {
	right: 65%;
}

.sec_enTtl--song {
	top: 50%;
	left: 90%;
}

.sec_enTtl--benefit {
	top: 65%;
	right: 65%;
}

.sec_enTtl--tieup {
	top: 46%;
	right: 65%;
}

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

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

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

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

.hamburger,
.hamburger::before,
.hamburger::after {
	width: 33px;
	height: 1.5px;
	background-color: var(--textColor);
	transition: 0.5s;
}

.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	--offset: 9px;
	left: 0;
}

.hamburger {
	position: relative;
}

.hamburger::before {
	top: calc(var(--offset) * 1);
}
.hamburger::after {
	top: calc(var(--offset) * 2);
}

.is-active .hamburger {
	background-color: transparent;
}

.is-active .hamburger,
.is-active .hamburger::before,
.is-active .hamburger::after {
}
.is-active .hamburger::before,
.is-active .hamburger::after {
	top: var(--offset);
	--rotate: 24deg;
}

.is-active .hamburger::before {
	rotate: calc(var(--rotate) * 1);
}

.is-active .hamburger::after {
	rotate: calc(var(--rotate) * -1);
}

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

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

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

/* sns_list
===============================
*/
.sns_item {
	padding: 0 6%;
}

/* scrollGuide
===============================
*/
.scrollGuide {
	display: none;
}

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

/* hero
===============================
*/

.hero {
	background: url(../images/bg_body_sp.jpg) center / cover no-repeat;
}

.hero_image {
	overflow: hidden;
	display: flex;
	align-items: center;
	width: 100%;
	height: 50vh;
}

.hero_image img {
	width: 100vw;
	height: auto;
	max-width: none;
	object-fit: cover;
}

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

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

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

.hero_ttl {
	top: 20px;
	right: 40px;
}

.hero_ttlCol1 {
	width: clamp(30px, 11.2vw, 82px);
}

.hero_ttlCol2 {
	width: clamp(50px, 16.2vw, 112px);
}

.hero_lead {
	left: 0;
	right: 0;
	bottom: 5%;
}

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

/* release
===============================
*/
.release {
	padding: 5rem 2rem 8rem;
}

.release_list {
	flex-direction: column;
}

.release_item {
	width: auto;
}

.release_item:not(:last-child) {
	margin-bottom: 50px;
}

.release_list li:nth-child(2) .disc_kind {
	text-align: center;
}

.disc_hdr {
	height: auto;
}

.disc_ttl {
	font-weight: 600;
	letter-spacing: var(--letterBody);
}

.disc_info {
	text-align: center;
}

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

.song {
	max-width: 300px;
}

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

.song_desc {
	padding: 10px 0 0;
}

.bluray {
	max-width: 300px;
}

.bluray_ttl {
	font-size: clamp(13px, 6.1vw, 21px);
}

.bluray_list {
	display: block;
}

.bluray_item {
	margin-bottom: 5px;
}

/* benefit
===============================
*/
.sec--benefit {
	padding-top: 17rem;
	padding-bottom: 8rem;
}

.benefit_texts {
	margin: 20px auto 0;
	padding: 0 10px;
	text-align: left;
	font-size: clamp(10px, 3.7vw, 14px);
}

.shopBenefit_list {
	margin: 50px auto 0;
	padding-bottom: 30px;
}

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

@media screen and (max-width: 550px) {
	.shopBenefit_list {
		max-width: 320px;
	}
	.shopBenefit_item {
		width: calc(100% / 2);
		padding: 5px;
	}
	.shopBenefit_list::after {
		content: "";
		display: none;
		width: auto;
	}
}

.shopGoods {
	max-width: 150px;
	line-height: 1.5rem;
}

.space0 {
	letter-spacing: 0;
}

.shopGoods_hdr {
	height: 100px;
}

.shopGoods_text--shop {
	font-size: clamp(10px, 3.7vw, 14px);
	line-height: 1.8rem;
}

.shopGoods_text--item {
	padding: 4px 0 8px;
	font-size: clamp(9px, 3.1vw, 11px);
}

.shopGoods_btn {
	max-width: 139.5px;
}

.shopGoods_notes {
	height: auto;
	font-size: clamp(9px, 3.1vw, 11px);
	letter-spacing: 0;
}

.benefit_notes {
	font-size: clamp(9px, 3.1vw, 11px);
}

.small_sp {
	display: block;
	padding-top: 10px;
	font-family: var(--sans-serif);
	font-size: clamp(9px, 3.1vw, 11px);
}

.shopBenefit_notes {
	margin: 0 auto 70px;
}

.hallBenefit_notes {
	text-align: left;
}

.hallGoods_thumb {
	flex-direction: column;
}

/* tieup
===============================
*/
.tieup {
	padding: 50px 20px 80px;
}

.mv {
	max-width: 320px;
}

.mv_ttl {
	font-size: clamp(11px, 5.8vw, 22px);
}

.mv_desc {
	font-size: clamp(10px, 3.7vw, 14px);
}