@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_link {
	margin-top: 20px;
}

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

.Gftr {
}

.Gftr_inr {
	max-width: 100%;
	padding: 90px 0 50px;
}

.Gftr_sns {
}

.Gftr_anchor {
}

.Gftr_link {
}

.Gftr_copy {
}

/* main */
.Gmain {
}

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

.sec {
	padding: 70px 0;
}

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

.sec--lyric {
	padding-top: 16rem;
}

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

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

.sec--mv {
	padding-top: 22rem;
}

.sec_inr--campaign {
	max-width: 580px;
}

/* hdr */

.sec_hdr {
	top: 2rem;
}

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

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

.sec_enTtl {
	top: 60%;
}

/* ttl */

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

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

.sec_ttl--campaign {
	--paddingHorizon: 9px;
}

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

.sec_ttl--mv {
	--paddingHorizon: 14px;
}

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

.sec_enTtl--lyric {
	top: 30%;
	left: 75%;
}

.sec_enTtl--campaign {
	top: 60%;
	right: 75%;
}

.sec_enTtl--tieup {
	top: 45%;
	right: 75%;
}
.sec_enTtl--mv {
	left: 84%;
}

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

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

.btn {
	padding-left: 2em;
	padding-right: 2em;
	width: 100%;
}

.btn--entry {
	max-width: 300px;
	width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	font-size: clamp(13px, 5vw, 17px);
}

.btn--campaign {
	padding: 15px 0;
	font-size: clamp(13px, 5vw, 20px);
}

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

.label {
	padding: 10px 20px;
}

/* 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
===============================
*/

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

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

.hero {
	background: url(../images/bg_hero_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: 10px;
	font-size: clamp(12px, 4vw, 16px);
}

/* release
===============================
*/

.release {
	padding: 9rem 2rem 4rem;
}

.release_texts {
	margin-top: 2rem;
	text-align: left;
}

.release_more {
	text-align: center;
	font-size: 19px;
}

/* lyric
===============================
*/

.lyric {
	font-weight: 600;
}

/* tieup
===============================
*/

.tieup {
	padding: 4rem 2rem;
}

.tieup_pic,
.tieup_ttl,
.tieup_texts {
	padding-left: 2rem;
	padding-right: 2rem;
}

.tieup_ttl {
	margin-top: 2rem;
}

.tieup_text {
	margin-top: 1em;
	font-weight: 700;
}

.tieup_text--01 {
	margin-top: 0.5rem;
	font-weight: 600;
}
/* campaign
===============================
*/

.campaign_texts {
	padding-bottom: 40px;
	font-size: clamp(10px, 3.8vw, 17px);
	line-height: 2em;
}

.campaign_btns {
	flex-direction: column;
	gap: 25px;
	max-width: 300px;
	width: 100%;
	margin: 20px auto;
}

/* entry
===============================
*/

.entry_item {
	margin-top: 70px;
}

.entry_notes {
}

/* prize
===============================
*/

.prize_texts {
	font-size: clamp(10px, 4.2vw, 21px);
}
.prize_text {
	margin: 5px auto;
}

.prize_text--label1001 {
	margin-top: 15px;
}

.prize_notes {
	padding-bottom: 0;
	font-size: clamp(10px, 2.6vw, 12px);
	line-height: 2rem;
}

/* postType
===============================
*/

.postType_item {
	margin-left: 0;
}

.postType_texts {
	text-align: left;
}

/* step
===============================
*/

.step {
	padding: 50px 24px;
}

.step_list {
	margin-top: 30px;
	padding-left: 0;
	padding-right: 0;
	font-size: clamp(10px, 3.6vw, 16px);
}

.step_item {
	display: block;
}

.step_num {
	text-align: center;
}

.step_texts {
	margin-top: 2rem;
}

.step_anchor {
	margin-top: 2rem;
	padding-right: 2rem;
	padding-left: 2rem;
	text-align: center;
}

.step_body {
}

/* contact
===============================
*/

.contact_notes {
	max-width: 370px;
	margin: 0 auto;
	text-align: left;
	font-size: clamp(8px, 2.8vw, 12px);
}

.contact_anchor {
	margin-bottom: 30px;
	font-size: clamp(10px, 3.6vw, 17px);
	word-break: break-all;
	text-decoration: underline;
	text-underline-offset: 10px;
}

/* comment
===============================
*/

.comment {
	margin-top: 30px;
}

.comment_texts p {
	font-size: clamp(10px, 3.3vw, 16px);
}

.comment_ftr {
	margin-top: 30px;
}

/* input
===============================
*/

.input_pic {
	max-width: 300px; /**/
	margin-right: auto; /**/
}

.input_texts {
	text-align: center; /**/
	font-size: clamp(10px, 3vw, 16px);
}

/* form
===============================
*/

.form {
}

.form_ttl {
	font-size: clamp(16px, 5vw, 21px);
}

.form_list {
}

.form_item:not(:first-child) {
	margin-top: 1em;
}

.form_flex {
	display: block;
}

.form_term:not(.form_term--long),
.form_desc:not(.form_desc--long) {
	width: 100%;
}

.form_desc:not(.form_desc--long) {
	padding-left: 0;
}

.form_term {
	margin-bottom: 0.5em;
}

.form_term,
.form_desc {
	font-size: clamp(13px, 3.8vw, 15px);
}

.form_term--long {
	margin-top: 40px;
}

.form_btns {
	margin-top: 3em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
	--padding-y: 0.75em;
}

/* confirm時 */

.entry--confirm .form_term,
.entry--confirm .form_desc {
	text-align: center;
}

/* finish画面 */

.finish_text--email {
	font-size: 1.2em;
}