@charset "utf-8";



:root{
	letter-spacing: .8px;
}

/*  ===============================
			GLOBAL
===============================
container
header
navi
footer
other
*/



/* header
===============================
Ghdr
*/



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

.Gftr_link{
	margin-top: 2rem;
}

/*  ===============================
		  block , element
===============================*/


/* sec
===============================
.sec
.sec_hdr
.sec_ttl
.sec_body
.sec_ftr
*/

.sec,
.sec.formArea:first-child:last-child{
	padding: 70px 30px;
}
	.main > .sec:first-child{
		padding-top: 140px;
	}
	.main > .sec:last-child{
		padding-bottom: 140px;
	}

	.sec--note{
		padding-top: 3rem;
	}

.sec_hdr{
	margin-bottom: 2.5rem;
}
	.sec_hdr--tieup{
		margin-bottom: min(3.5rem,12vw);
	}

.sec_ttl{}
.sec_ttlImg{
	width: auto;
	height: 15vw;
	max-height: 85px;
}





/* btn
===============================
*/
.btn{
	font-weight: 500;
	font-size: min( 16px , 3.2vw );
	margin-left: auto;
	margin-right: auto;
}
	.btn--link{
	}

	.btn--click{
		padding: 1rem .8rem;
		font-size: min( 16px , 4vw);
	}



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

.loading{}
.loading_ttlImg{
	width: 90%;
}

.loading_starsImg{
	max-width: 1000px;
}


/* bg_obj
===============================
*/


.bg_obj--left {
	right: calc(100vw - 20%);
}

.bg_obj--right {
	left: calc(100vw - 20%);
}




/* mv
===============================
*/

.mv{
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.mv::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(215deg, rgba(0,0,0,0) 0% ,rgba(0,0,0,0) 50% ,rgba(0,0,0,.5) 75% ,  rgba(0,0,0,.8) 100% );
	z-index: 1;
}


.mv_img{
	object-fit: cover;
}
.pop{
	left: 0;
	bottom: 2vh;
	margin-left: auto;
	margin-right: auto;
	z-index: 2;
}

.pop_img{
	max-width: 60vw;
}

/* release
===============================
*/
.release_pic{
	margin-bottom: 3rem;
}

.release_ttl{
	font-size: min( 32px , 6vw);
	margin-bottom: 2rem;
}



/* campaign
===============================
*/

.campaign_lead{
	font-size: min(17px,2.9vw);
}

.campaign_lead strong{
	font-size: 1.2em;
}

.campaign_sec{
}

.campaign_sec--modal{
	padding: 0;
}


.campaign_ttl{
	font-size: min( 2rem , 5vw );
	margin: 5rem 0 1.5rem;
}
	.campaign_ttl::before{
		min-height: 40px;
		min-width: 40px;
	}

.campaign_ttl--jkt{
	font-size: min( 2rem , 4.7vw );
	line-height: 1.2;
}

.campaign_texts{
	margin-bottom: 2em;
}

.campaign_text{
	font-size: min( 14px , 2.75vw );
	line-height: 1.8;
}

.campaign_note{
	font-size: min( 12px , 2.5vw );
}

.campaign_btns{}



/* goods
===============================
*/

.goods{
	margin-top: 3em;
	margin-bottom: 4rem;
}

.goods_ttl{
	font-size: min(17px,4.3vw);
}

.goods_img{
	max-width: 420px;
	width: 100%;
}

.goods_pics{
	display: block;
}

.goods_pic{
	margin-bottom: 2.5rem;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.goods_pic_text{
	margin-top: .8rem;
	font-size: min( 16px , 3.3vw );
}

.goods_list{
	display: block;
	margin-top: 3rem;
}

.goods_term{
	font-size: min( 17px , 4vw );
}

.goods_term:first-child{
	margin-top: 0;
}

.goods_desc{
	margin-top: .5em;
	font-size: min( 14px , 3.5vw );
}




.goods_ftr_texts{
	font-size: min( 14px , 3vw);
}


/* howto
===============================
*/


.howto{
	margin-top: 4rem;
}

.howto_hdr{
	flex-wrap: wrap;
	text-align: left;
	margin-bottom: 1rem;
}

.howto_ttl,
.howto_hdr_text{
	text-align: left;
}

.howto_ttl{
	display: inline-block;
	width: auto;
	margin-right: 0;
	margin-bottom: 1rem;
	padding: .5em;
	font-size: min(17px,4.2vw);
}
.howto_hdr_text{
	width: 100%;
	line-height: 1.6;
	font-size: min( 18px , 4.2vw);
	font-weight: 700;
}
	.howto_hdr_text--mail{
		font-size: min(18px , 4.5vw);
	}


.howto_texts{
	font-size: min(16px,3.4vw);
}

.howto_text{
	font-weight: 300;
}

.howto_ftr{
	margin-top: 3rem;
}

.howto_anchor{
	padding: 0;
	transition: none;
	font-weight: 400;
}

.howto_anchor--mail::after{
	top: .2em;
}


/* modal */
.howto--modal{
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
}

.campaign_ttl--modal{
	font-size: min( 20px , 4.5vw )
}

.campaign_subTtl--modal{
	font-size: min( 16px , 4vw );
}




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

.step{
	margin: 1rem 0.8em 3rem;
}
	.step:first-child{
		margin-top: 3rem
	}

.step_num{
	margin-bottom: 1rem;
	font-size: min(20px,4.2vw);
}

.step_ttl{
	letter-spacing: 0;
	font-size: min(16px,3.6vw);
}
.step_texts{

	font-size: min(12px,3vw);
}
.step_text{}


.caution{}
.cautions_ttl{}
.cautions_text{
	font-size: min(11px,3vw);
}




/* form , formArea
===============================
*/

.formArea{
	padding: 0 39px 0;
}


.formArea_inr{
	padding-top:    2.5rem;
	padding-bottom: 2.5rem;
}
.formArea_ttl{
	font-size: min( 22px , 4.5vw);
}
.form_message{
	font-size: min( 14px , 3.2vw );
}

.form_dl{
	margin-top: 3rem;
	margin-bottom: 4rem;
	padding: 0 20px;
	font-size: min( 18px , 3.5vw);
	font-weight: 500;
}

	.form_dl--confirm{
		flex-direction: column;
	}


.form_dl--confirm .form_term,
.form_dl--confirm .form_desc{
	width: 100%;
	text-align: center;
}

.form_term{
	margin-bottom: 0.5rem;
}

.form_desc{
	margin-bottom: min( 2.5rem , 8vw );
}

.form_term--short,
.form_desc--short{
	max-width: 240px;
	width: 80%;
}

.form_desc > label{
	padding: min( 15px , 2.8vw );
}

.form_desc > label + p{
	font-size: min( 14px , 3.2vw );
}

.form_btns{
	width: 80%;
}




.form input[type="text"],
.form input[type="email"] {
    padding: .6em 1em;
}


/* note , modal
===============================
*/

.note_sec_ttl{
	width: 100%;
	max-width: 350px;
}

.note{
	padding: 2rem;
}

.note_ttl--big{
	margin-bottom: 3rem;
}

.note ul,
.note_text{
	font-size: min( 14px , 3vw );
}



.modal_content{
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
.modal_content,
.modal_inr{
	min-height: 80vh
}


.closeBtn_wrap {
	top: -2vh;
	right: 0;
}

.closeBtn{
	width: 10vw;
	height: 10vw;
}

.closeBtn::before, .closeBtn::after{
	position: absolute;
    top: -50%;
	width: 10vw;
}





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

.lyric_texts{
	font-size: min( 15px , 3vw);
}
.lyric_text{}


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

.tieup_picWrap{
	margin-bottom: 3rem;
}
.tieup_movieWrap{
	margin-bottom: 3rem;
}

.tieup_phrase{
	font-size: min( 3.2vw , 14px);
}

.tieup_strong{
	font-size: min( 4vw , 17px);
}

.tieup_info{
	margin: 5rem 0 3rem;
}

.tieup_info_copy{
	font-size: min( 2.5vw , 13px);
}

.tieup_text{
	font-size: min( 18px , 3.9vw);
}

.tieup_text--sub{
	font-size: min( 17px , 3.7vw);
}

/* info_list
===============================
*/

.info_list{}
.info_term{
	width: 7em;
	font-size: min( 3.3vw , 14px);
}
.info_desc{
	font-size: min( 3.5vw , 18px);
	font-weight: 500;
}
.info_aside{
	font-size: min( 2.5vw , 13px);
	font-weight: 200;
}






.is-show.paint.paint--left{
	left: -25%
}
.is-show.paint.paint--right{
	left: 125%
}