@charset "utf-8";

/*----------------------------------------
	全体
----------------------------------------*/
html{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	font-size:62.5%;
	color: #000;
	-webkit-text-size-adjust:100%;
	line-height:1.5;
	font-weight: 500;
}
body{ font-size:1.4rem; font-size: 1.4em; }
img{
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast;
}
a{color: #000;}
a:hover{color: #777;}
.op {transition: all .3s;}
.op:hover {
	filter: brightness(110%);
	transition: all .3s;
}
.max_respon {max-width: 100%;}
.rela {position: relative;}
.m_center {
	display: block;
	margin-inline: auto;
}



/*----------------------------------------
	text
----------------------------------------*/
.yumin {
	font-family: '游明朝体', "Yu Mincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;
}

p{ line-height: 2; }

.center{ text-align:center; }
.text_left{ text-align:left; }
.text_right{ text-align:right; }

.text_bold{ font-weight: bold; }
.text_normal{ font-weight: normal; }

.text_gray{ color: #7a7b7b; }
.text_red{ color: #e60012; }
.text_d_red{ color: #b02727; }
.text_white{color: #fff;}

.lh_14{ line-height: 1.4 !important; }
.lh_15{ line-height: 1.5 !important; }
.lh_16{ line-height: 1.6 !important; }
.lh_18{ line-height: 1.8 !important; }

.ls_05{ letter-spacing: .5px; }
.ls_1{ letter-spacing: 1px; }
.ls_03{letter-spacing: 0.3rem; }
@media print, screen and (min-width: 770px){
	.text_12{ font-size:1.2rem !important; }
	.text_13{ font-size:1.3rem !important; }
	.text_14{ font-size:1.4rem !important; }
	.text_15{ font-size:1.5rem !important; }
	.text_16{ font-size:1.6rem !important; }
	.text_18{ font-size:1.8rem !important; }
	.text_20{ font-size:2rem !important; }
	.text_21{ font-size:2.1rem !important; }
	.text_22{ font-size:2.2rem !important; }
	.text_24{ font-size:2.4rem !important; }
	.text_26{ font-size:2.6rem !important; }
	.text_28{ font-size:2.8rem !important; }
	.text_36{ font-size:3.6rem !important; }
}/*END*/
@media screen and (max-width: 599px){
	.text_12{ font-size:1.2rem !important; }
	.text_13{ font-size:1.3rem !important; }
	.text_14{ font-size: 1.3rem !important; }
	.text_15{ font-size: 1.5rem !important; }
	.text_16{ font-size: 1.4rem !important; }
	.text_18{ font-size: 1.6rem !important; }
	.text_20{ font-size: 1.7rem !important; }
	.text_21{ font-size: 1.8rem !important; }
	.text_22{ font-size: 1.8rem !important; }
	.text_24{ font-size: 1.8rem !important; }
	.text_26{ font-size: 1.9rem !important; }
	.text_28{ font-size: 2rem !important; }
	.text_36{ font-size: 2.2rem !important; }

	.sp_text_15{ font-size: 1.5rem !important; }
}/*END*/


/*----------------------------------------
	layout
----------------------------------------*/
#container{overflow: hidden;}
.main_frame{
	width: 100%;
	position: relative;
	box-sizing: border-box;
	max-width: 750px;
	margin-inline: auto;
}
#bk{position: relative;}
#bk:before{
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image: url(../images/bg.jpg);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#bk .bg_left {
	width: min(39vw, 70vh, 950px);
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
}
#bk .bg_right {
	width: min(39vw, 70vh, 950px);
	height: 100vh;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#bk .pc_btn01 {
	max-width: 585px;
	width: 40%;
	position: absolute;
	left: 13%;
	bottom: 13%;
	z-index: 2;
}
#bk .pc_btn02 {
	max-width: 585px;
	width: 40%;
	position: absolute;
	right: 6%;
	bottom: 32%;
	z-index: 2;
}
.bg_abs_l {
	width: 70%;
	position: absolute;
	left: 0;
}
.bg_abs_r {
	width: 70%;
	position: absolute;
	right: 0;
}
/* bg_left */
.bg_balloon01 {top: 6%;}
.bg_balloon02 {bottom: 52%;}
.bg_cloud01 {top: 7%;}
.bg_cloud02 {top: 7%;} 
.bg_confetti01 {bottom: 76%;}
.bg_confetti02 {bottom: 73%;}
.bg_confetti03 {bottom: 50%;}
.bg_confetti04 {bottom: 43%;}
.bg_deco01 {
	bottom: 49%;
	/* left: 50%; */
	/* transform: translateX(-50%); */
}
.bg_deco02 {
	bottom: 0;
	/* left: 50%; */
	/* transform: translateX(-50%); */
}
/* bg_right */
.bg_balloon03 {
	top: 5%;
	/* left: 9%; */
}
.bg_balloon04 {
	bottom: 31%;
	/* left: 9%; */
}
.bg_cloud03 {
	bottom: 63%;
	/* left: 9%; */
}
.bg_cloud04 {top: 0;}
.bg_cloud05 {bottom: 60%;}
.bg_cloud06 {
	bottom: 21%;
	/* left: 9%; */
}
.bg_confetti05 {
	bottom: 64%;
	/* left: 21%; */
}
.bg_confetti06 {
	bottom: 52%;
	/* left: 9%; */
}
.bg_confetti07 {
	bottom: 39.5%;
	/* left: 21%; */
}
.bg_deco03 {
	bottom: 75%;
	/* left: 21%; */
}
.bg_deco04 {bottom: 0;}
.bg_deco05 {bottom: 0;}

#frame{
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
	display: flow-root;
	overflow: visible;
}
@media screen and (max-width: 1350px) and (max-height: 1000px) {
	#bk .bg_left {
	width: min(31vw, 42vh, 950px);
	height: 100vh;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
}
#bk .bg_right {
	width: min(31vw, 42vh, 950px);
	height: 100vh;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#bk .pc_btn01 {
	max-width: 585px;
	width: 66%;
	position: absolute;
	left: 13%;
	bottom: 13%;
	z-index: 2;
}
#bk .pc_btn02 {
	max-width: 585px;
	width: 66%;
	position: absolute;
	right: 10%;
	bottom: 27%;
	z-index: 2;
}
.bg_abs_l {
	width: 100%;
	position: absolute;
	left: 0;
}
.bg_abs_r {
	width: 100%;
	position: absolute;
	right: 0;
}
/* bg_left */
.bg_balloon01 {top: 6%;}
.bg_balloon02 {bottom: 52%;}
.bg_cloud01 {top: 7%;}
.bg_cloud02 {top: 7%;} 
.bg_confetti01 {bottom: 76%;}
.bg_confetti02 {bottom: 73%;}
.bg_confetti03 {bottom: 50%;}
.bg_confetti04 {bottom: 43%;}
.bg_deco01 {bottom: 49%;}
.bg_deco02 {bottom: 0;}
/* bg_right */
.bg_balloon03 {	top: 5%;}
.bg_balloon04 {	bottom: 31%;}
.bg_cloud03 {bottom: 63%;}
.bg_cloud04 {top: 0;}
.bg_cloud05 {bottom: 60%;}
.bg_cloud06 {	bottom: 21%;}
.bg_confetti05 {bottom: 64%;}
.bg_confetti06 {bottom: 52%;}
.bg_confetti07 {bottom: 39.5%;}
.bg_deco03 {	bottom: 75%;}
.bg_deco04 {bottom: 0;}
.bg_deco05 {bottom: 0;}
}
@media screen and (min-width: 750px){
	.lp_frame{
		width: 84%;
		margin-inline: auto;
	}
	.lp_frame90{
		width: 90%;
		margin-inline: auto;
	}
	#frame{
		max-width: 500px;
		margin-inline: auto;
		overflow: hidden;
	}
}
@media screen and (max-width: 1049px){
	#bk .bg_deco_wrap {
	width: min(18vw, 44vh, 507px);
	height: min(24vw, 58vh, 667px);
	left: 2%;
}


}
@media screen and (max-width: 871px){

}
@media screen and (max-width: 823px){
	#bk .bg_deco_wrap,
	#bk .bg_deco01,
	#bk .bg_deco02,
	#bk .bg_deco03,
	#bk .bg_deco04 {display: none;}
}


/*----------------------------------------
	header
----------------------------------------*/
header{position: relative;}
.drawer{
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	color: #d0c077;
	display: flex;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	transition: 0.5s ease-in-out;
	z-index: 50;
}
.drawer ul{
	text-align: center;
	padding-top: 100px;
}
.drawer ul li{
	position: relative;
	transform: translateX(-150px);
	transition: transform 0.5s ease;
	line-height: 1.4;
	margin-bottom: 10px;
	font-size: 1.6rem;
}
.drawer ul li a{
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 6px 0;
}
.drawer ul li a:hover{
	animation: drawer 1.4s;
	color: #C1C1C1;
}
@keyframes drawer{
	0%{
		filter: none;
	}
	30%{
		filter: blur(0.8px);
	}
	100%{
		filter: none;
	}
}
.open .drawer{
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}
.open .drawer ul li{
	transform: translateX(0);
}
.drawer ul li:nth-child(2){ transition-delay: 0.15s; }
.drawer ul li:nth-child(3){ transition-delay: 0.20s; }
.drawer ul li:nth-child(4){ transition-delay: 0.25s; }
.drawer ul li:nth-child(5){ transition-delay: 0.3s; }
.drawer ul li:nth-child(6){ transition-delay: 0.35s; }
.drawer ul li:nth-child(7){ transition-delay: 0.4s; }
.drawer ul li:nth-child(8){ transition-delay: 0.45s; }
.drawer ul li:nth-child(9){ transition-delay: 0.5s; }
.drawer ul li:nth-child(10){ transition-delay: 0.55s; }
.drawer ul li:nth-child(11){ transition-delay: 0.6s; }
.drawer ul li:nth-child(12){ transition-delay: 0.65s; }
.drawer ul li:nth-child(13){ transition-delay: 0.7s; }
.drawer ul li:nth-child(14){ transition-delay: 0.75s; }
@media screen and (max-width: 768px){
	.drawer ul{
		padding-top: 50px;
	}
	.drawer ul li{
		font-size: 1.6rem;
		margin-bottom: 15px;
	}
}/*END*/

.btn_menu{
	display: none;
	background: #0F71AE;
	border-radius: 50%;
	width: 55px;
	aspect-ratio: 1/1;
	position: fixed;
	right: calc(50% - 240px);
	top: .5%;
	cursor: pointer;
	transition: all .5s;
	z-index: 99;
}
.btn_menu span{
	width: 55%;
	position: absolute;
	right: 11px;
	height: 2px;
	background: #fff;
	transition: all .4s;
}
.btn_menu span:nth-child(1){
	top: 30%;
}
.btn_menu span:nth-child(2){
	top: 50%;
}
.btn_menu span:nth-child(3){
	top: 70%;
}
.open .btn_menu {
	background: transparent;
}
.open .btn_menu span:nth-child(1){
	transform: rotate(45deg);
	top: 50%;
	right: 10px;
}
.open .btn_menu span:nth-child(2){
	opacity: 0;
}
.open .btn_menu span:nth-child(3){
	transform: rotate(-45deg);
	top: 50%;
	right: 10px;
}

@media screen and (max-width: 749px) {
    .btn_menu {
        right: 1.5%;
        top: 1%;
    }
}



/*----------------------------------------
	footer
----------------------------------------*/
.btn_official {
	display: block;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.copyright {
	display: block;
	max-width: 350px;
	width: 80%;;
	margin-left: auto;
	margin-right: auto;
}



/*----------------------------------------
	共通
----------------------------------------*/
.fukidashi{
	animation: fukidashi 1.8s ease-in-out infinite;
	max-width: 100%;
}
@keyframes fukidashi{
	0%{transform: translateY(0);}
	20%{transform: translateY(8px);}
	40%{transform: translateY(0);}
	100%{transform: translateY(0);}
}
.btn_hover:hover {
	filter: brightness(110%);
	transition: all .3s;
}




/*----------------------------------------
	animation
----------------------------------------*/
:root{
	--anime_duration: .8s;
	--anime_duration_pop: .5s;
	--anime_fade_duration: .7s;
	--anime_delay_step: .3s;
	--anime_distance_y: 30px;
	--anime_distance_x: 12%;
	--anime_pop_from: .65;
	--anime_pop_over: 1.4;
	--anime_pop_under: .99;
	--anime_ease: cubic-bezier(.16, 1, .3, 1);
	--anime_fade_ease: cubic-bezier(.45, .05, .55, .95);
	--anime_ease_pop: cubic-bezier(.2, .72, .3, 1);
	--anime_ease_pop_settle: cubic-bezier(.4, 0, .3, 1);
}
.js_ready .anime_fade,
.js_ready .anime_up,
.js_ready .anime_left,
.js_ready .anime_right,
.js_ready .anime_pop{ opacity: 0; }

.anime_fade.start{ animation: anime_fade var(--anime_fade_duration) var(--anime_fade_ease) both; }
.anime_up.start{
	animation:
		anime_fade var(--anime_fade_duration) var(--anime_fade_ease) both,
		anime_up var(--anime_duration) var(--anime_ease) both;
}
.anime_left.start{
	animation:
		anime_fade var(--anime_fade_duration) var(--anime_fade_ease) both,
		anime_left var(--anime_duration) var(--anime_ease) both;
}
.anime_right.start{
	animation:
		anime_fade var(--anime_fade_duration) var(--anime_fade_ease) both,
		anime_right var(--anime_duration) var(--anime_ease) both;
}
.anime_pop.start{ animation: anime_pop var(--anime_duration_pop) linear both; }

@keyframes anime_fade{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
@keyframes anime_up{
	from{ transform: translateY(var(--anime_distance_y)); }
	to{ transform: translateY(0); }
}
@keyframes anime_left{
	from{ transform: translateX(calc(var(--anime_distance_x) * -1)); }
	to{ transform: translateX(0); }
}
@keyframes anime_right{
	from{ transform: translateX(var(--anime_distance_x)); }
	to{ transform: translateX(0); }
}
@keyframes anime_pop{
	0%{
		opacity: 0;
		transform: scale(var(--anime_pop_from));
		animation-timing-function: var(--anime_ease_pop);
	}
	50%{
		opacity: 1;
		transform: scale(var(--anime_pop_over));
		animation-timing-function: var(--anime_ease_pop_settle);
	}
	76%{
		transform: scale(var(--anime_pop_under));
		animation-timing-function: var(--anime_ease_pop_settle);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

.start.anime_d1{ animation-delay: calc(var(--anime_delay_step) * 1); }
.start.anime_d2{ animation-delay: calc(var(--anime_delay_step) * 2); }
.start.anime_d3{ animation-delay: calc(var(--anime_delay_step) * 3); }
.start.anime_d4{ animation-delay: calc(var(--anime_delay_step) * 4); }
.start.anime_d5{ animation-delay: calc(var(--anime_delay_step) * 5); }
.start.anime_d6{ animation-delay: calc(var(--anime_delay_step) * 6); }
.start.anime_d7{ animation-delay: calc(var(--anime_delay_step) * 7); }
.start.anime_d8{ animation-delay: calc(var(--anime_delay_step) * 8); }

@media (prefers-reduced-motion: reduce){
	.js_ready .anime_fade,
	.js_ready .anime_up,
	.js_ready .anime_left,
	.js_ready .anime_right,
	.js_ready .anime_pop{
		opacity: 1;
		animation: none;
	}
}



/*----------------------------------------
	MV
----------------------------------------*/
.mv{position: relative;}
.mv_abs {
	width: 100%;
	position: absolute;
	left: 0;
}
/* 紙吹雪 */
.mv_confetti01{
	max-width: 100%;
	top: 0;
	z-index: 1;
}
.mv_confetti02{
	max-width: 100%;
	top: 14%;
	z-index: 1;
}
.mv_confetti03{
	max-width: 100%;
	top: 27%;
	z-index: 1;
}
.mv_confetti04{
	max-width: 100%;
	top: 21%;
	z-index: 1;
}
/* 雲 */
.mv_cloud01{
	top: 1%;
	z-index: 1;
}
.mv_cloud02{
	top: 42%;
	z-index: 1;
}
.mv_cloud03{
	top: 66%;
	z-index: 1;
}
/* 吹き出し */
.mv_fukidashi{
	max-width: 100%;
	top: 6.9%;
	z-index: 5;
}
/* 飛行機 */
.mv_plane{
	max-width: 100%;
	top: 0;
	z-index: 1;
}
/* 虹 */
.mv_rainbow{
	max-width: 100%;
	bottom: 0;
	z-index: 1;
}
/* 風船 */
.mv_balloon01 {
	max-width: 100%;
	top: 12%;
	z-index: 2;
}
.mv_balloon02 {
	max-width: 100%;
	top: 13%;
	z-index: 2;
}
.mv_balloon03 {
	max-width: 100%;
	top: 62%;
	z-index: 2;
}
/* 日付 */
.mv_date {
	max-width: 100%;
	top: 41%;
	z-index: 2;
}
/* キャラクター */
.mv_character01 {
	max-width: 100%;
	bottom: 0;
	z-index: 5;
}
.mv_character02 {
	max-width: 100%;
	bottom: 0;
	z-index: 5;
}
/* キャラクター吹き出し */
.mv_copy {
	max-width: 100%;
	top: 46.8%;
	z-index: 5;
}
/* タイトル */
.mv_ttl{
	width: 100%;
	position: absolute;
	top: 14%;
	left: 0;
	right: 0;
	z-index: 5;
	/* opacity: 0; */
}
.mv_ttl.start{
	/* animation: mv_ttl 0.6s ease-in-out forwards; */
}
@keyframes mv_ttl{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.9);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}

@media screen and (max-width: 749px){
	/* 背景飾り */
	.mv_img{top: .5%;}
	/* 右上ロゴ */
	.mv_logo{
		max-width: 238px;
		width: 32%;
		right: .5%;
	}
	/* しーくん */
	.sea {
		max-width: 298px;
		width: 40%;
	}
	/* MAX80%OFF */
	.max80off {
		max-width: 204px;
		width: 28%;
		right: 1.5%;
	}
	/* イベント */
	.mv_event01{
		max-width: 371px;
		width: 50%;
	}
	.mv_event02{
		max-width: 419px;
		width: 57%;
	}
	.mv_gourmet{
		max-width: 350px;
		width: 47%;
	}
}



/*----------------------------------------
	intro
----------------------------------------*/
.intro_abs {
	max-width: 100%;
	position: absolute;
	left: 0;
}
.intro_bnr {top: 4%;}
.intro_btn {
	width: 90%;
	position: absolute;
	top: 26%;
	left: 50%;
	transform: translateX(-50%);
}
.intro_fukidashi {top: 9%;}
.intro_deco01 {top: 32%;}
.intro_deco02 {bottom: 5%;}
.intro_deco03 {bottom: 6%;}


/*----------------------------------------
	SALE
----------------------------------------*/
.sale_abs {
	max-width: 100%;
	position: absolute;
	left: 0;
}
.sale_ttl {top: 42%;}
.sale_character {
	top: 41%;
	z-index: 2;
}
.sale_plane {top: 11%;}
.sale_confetti {
	top: 21%;
	z-index: 1;
}
.sale_sale {top: 7%;}
.sale_shop {top: 6%;}
.sale_shop_line {top: 10%;}
.sale_fashion {top: 19.1%;}
.sale_life {top: 4%;}
.sale_service {top: 7%;}



/*----------------------------------------
	event
----------------------------------------*/
.event_abs {
	max-width: 100%;
	position: absolute;
	left: 0;
}
.event_fukidashi01 {top: 11%;}
.event_ttl {top: 30%;}
.event_confetti {top: 19%;}
.event_deco01 {top: 48%;}
.event_deco02 {top: 44.5%;}
.event_inner01 {top: .8%;}
.event_inner02 {top: 20%;}
.event_inner03 {top: 50%;}
.event_inner04 {top: 79%;}
.event_inner05 {top: 1.5%;}
.event_inner06 {top: 65%;}
.event_inner07 {top: 79%;}
.event_date {top: 0;}
.btn_abs {
	width: 75%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.event_btn01 {top: 84%;}
.event_btn02 {top: 89.5%;}
.event_btn03 {top: 89%;}
.event_btn04 {top: 84%;}
.btn_gourmet {
	display: block;
	width: 75%;
	margin-inline: auto;
}
.btn_event {
	display: block;
	width: 75%;
	margin-inline: auto;
}

@media screen and (max-width: 749px){

}


/*----------------------------------------
	pagetop
----------------------------------------*/
.pagetop {
	display: none;
    position: fixed;
	right: calc(50% - 255px);
    bottom: 70px;
    z-index: 49;
	transition: opacity .3s;
}
.pagetop img {
	max-width: 90px;
	width: 100%;
}
.pagetop.show {
	display: block;
	opacity: 1;
}
@media screen and (min-width: 750px){
	.pagetop:hover {
		animation: yura .8s ease-in-out infinite;
	}
	@keyframes yura {
			0% {transform: translateY(0);}
			50% {transform: translateY(-8px);}
			100% {transform: translateY(0);}
		}
}
@media screen and (max-width: 749px){
	.pagetop {
		right: 0;
		bottom: 108px;
	}
	.pagetop img {max-width: 110px;}
}/*END*/
@media screen and (max-width: 599px){
	.pagetop {
		right: 0;
		bottom: 75px;
	}
	.pagetop img {max-width: 80px;}
}/*END*/


/*----------------------------------------
	float
----------------------------------------*/
.sp_menu{
	width: 100%;
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 49;
}
.sp_menu a{display: block;}
.fixed_tel{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.sp_menu ul{
	width: 100%;
	max-width: 501px;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
}
.sp_menu ul li{
	float: left;
	width: calc( 100% / 2 );
	box-sizing: border-box;
}
.sp_menu ul li:hover {
	transform: translateY(3px);
	filter: contrast(120%);
}
.sp_menu ul li:last-of-type{
	border-right: none;
}
.menu_fl{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 749px){
	.sp_menu ul{max-width: 750px;}
}