/*
Title: サマーバーゲン2026
Last Updated: 2026-06-05
Author: matsu
*/

@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;
}

.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_img.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#bk .bg_deco_wrap {
	width: min(23vw, 44vh, 507px);
	height: min(30vw, 58vh, 667px);
	position: fixed;
	left: 3%;
	bottom: 50%;
	transform: translateY(50%);
	z-index: 1;
}
#bk .bg_deco01 img,
#bk .bg_deco02 img,
#bk .bg_deco03 img,
#bk .bg_deco04 img {
	width: 100%;
}
#bk .bg_deco01 {
	width: min(18vw,35vh, 404px);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
#bk .bg_deco02 {
	width: min(14vw, 28vh, 317px);
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
}
#bk .bg_deco03 {
	width: min(19vw, 34vh, 423px);
	position: fixed;
	right: 10%;
	bottom: 32%;
	z-index: 1;
}
#bk .bg_deco04 {
	width: min(26vw, 48vh, 600px);
	position: fixed;
	right: 0;
	bottom: 5%;
	z-index: 1;
}
#frame{
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
	overflow: hidden;
}
@media screen and (min-width: 750px){
	.lp_frame{
		width: 84%;
		margin-inline: auto;
	}
	#frame{
		max-width: 500px;
		margin-inline: auto;
	}
}
@media screen and (max-width: 1589px){
	#bk .bg_deco03 {
	right: 2%;
	bottom: 50%;
	transform: translateY(50%);
}
}
@media screen and (max-width: 1049px){
	#bk .bg_deco_wrap {
	width: min(18vw, 44vh, 507px);
	height: min(24vw, 58vh, 667px);
	left: 2%;
}
#bk .bg_deco01 {
	width: min(15vw,35vh, 404px);
}
#bk .bg_deco02 {
	width: min(11vw, 28vh, 317px);
}

#bk .bg_deco04 {
	width: min(20vw, 48vh, 600px);
	bottom: 10%;
}

}
@media screen and (max-width: 871px){
	#bk .bg_deco03 {
		width: min(15vw, 34vh, 423px);
	}
	#bk .bg_deco04 {
		width: min(17vw, 48vh, 600px);
		bottom: 20%;
	}
}
@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: #117761c5;
	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: 0;}
}/*END*/



/*----------------------------------------
	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;
}



/*----------------------------------------
	MV
----------------------------------------*/
.mv{position: relative;}
.mv_abs {
	width: 100%;
	position: absolute;
	z-index: 1;
}
/* 背景デコレーション */
.mv_bg_deco01{
	max-width: 100%;
	right: 0;
	top: 0;
}
.mv_bg_deco02{
	max-width: 100%;
	left: 0;
	top: 23.5%;
}
.mv_bg_deco03{
	max-width: 100%;
	right: 0;
	bottom: 8.7%;
}
/* 背景飾り */
.mv_img{
	top: 1.5%;
	left: 0;
	z-index: 3;
}
/* 右上ロゴ */
.mv_logo{
	max-width: 157px;
	top: .5%;
	right: 1%;
	z-index: 10;
}
/* しーくん */
.sea {
	max-width: 203px;
	left: 44%;
	top: 1%;
	transform: translateX(-50%);
}
/* MAX80%OFF */
.max80off {
	max-width: 137px;
	right: 2%;
	top: 10%;
	z-index: 11;
	opacity: 0;
}
.max80off.start{
	animation: max80off .8s ease-in-out forwards;
}
@keyframes max80off {
	0%{
		opacity: 0;
		transform: scale(.5);
	}
	50% {
		opacity: 1;
		transform: scale(1.3);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
/* タイトル */
.mv_ttl{
	width: 98%;
	position: absolute;
	top: 21%;
	left: 0;
	right: 0;
	z-index: 10;
	margin: auto;
	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);
	}
}
/* イベント */
.mv_event01{
	max-width: 230px;
	width: calc((799/800)*100%);
	bottom: 15%;
	right: 0;
	z-index: 3;
}
.mv_event02{
	max-width: 300px;
	width: calc((799/800)*100%);
	bottom: 4%;
	left: 0;
	z-index: 2;
}
.mv_gourmet{
	max-width: 235px;
	width: calc((799/800)*100%);
	bottom: 0;
	right: 0;
	z-index: 3;
}
@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%;
	}
}



/*----------------------------------------
	lineup
----------------------------------------*/
.lineup_ttl {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 21%;
	transform: translateX(-50%);
	opacity: 1;
}
.lineup_bg {background: #ffddb8;}
.lineup_bg a {
	display: block;
	width: 90%;
	margin-inline: auto;
}


/*----------------------------------------
	event
----------------------------------------*/
.event_ttl {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 21%;
	transform: translateX(-50%);
	opacity: 1;
}
.event_abs {
	width: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.event_inner01 img:first-of-type,
.event_inner02 img:first-of-type{
	display: block;
	width: 90%;
	margin-inline: auto;
}
.event_inner01 {top: 2.5%;}
.event_inner02 {bottom: 6%;}
.event_abs a {
	display: block;
	width: 86%;
	margin-inline: auto;
}
.event_date {
	width: 110px;
	position: absolute;
	top: -7%;
	right: 3%;
}
@media screen and (max-width: 749px){
	.event_date {
		max-width: 183px;
		width: 25%;
		top: -8%;
		right: 1%;
	}
}


/*----------------------------------------
	bardain
----------------------------------------*/
.bardain_ttl {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 21%;
	transform: translateX(-50%);
	opacity: 1;
}
.fashion_bg {background: #d75d5d;}
.more_btn  {
	display: block;
	width: 80%;
	margin-inline: auto;
}
.service_bg {background: #d04141;}



/*----------------------------------------
	gourmet
----------------------------------------*/
.gourmet_ttl {
	position: absolute;
	width: 100%;
	left: 50%;
	top: 21%;
	transform: translateX(-50%);
	opacity: 1;
}
.gourmet_btn {
	position: absolute;
	width: 100%;
	left: 50%;
	bottom: 10.5%;
	transform: translateX(-50%);
}
.gourmet_text {
	font-size: 1.5rem;
	width: fit-content;
	margin-inline: auto;
}
/* HOT */
.gourmet_menu {
	position: absolute;
	width: 268px;
	right: 4%;
	top: 1%;
}
.don,
.ramen {
	width: 100%;
	height: 250px;
	position: absolute;
}
.don {top: 33%;}
.ramen {bottom: 5%;}
.hot01 {
	position: absolute;
	width: 88px;
	left: 16%;
	top: -120px;
	z-index: 4;
}
.hot01.start{
	animation: hotcool 0.6s ease-in-out forwards;
}
.gourmet_img01 {
	position: absolute;
	width: 265px;
	left: 1%;
	top: -16%;
	transform: rotate(-5deg);
	z-index: 3;
}
.gourmet_data01 {
	position: absolute;
	width: 100%;
	right: 0;
	bottom: 0;
}
.hot02 {
	position: absolute;
	width: 88px;
	right: 6%;
	top: -27.5px;
	z-index: 4;
}
.hot02.start{
	animation: hotcool 0.6s ease-in-out forwards;
}
.gourmet_img02 {
	position: absolute;
	width: 276px;
	right: 1%;
	bottom: 0;
	z-index: 3;
}
.gourmet_data02 {
	position: absolute;
	width: 100%;
	left: 0;
	top: -22%;
}
/* COOL */
.gourmet02_menu {
	position: absolute;
	width: 240px;
	left: 5%;
	top: 4%;
}
.udon,
.remen {
	width: 100%;
	height: 250px;
	position: absolute;
}
.udon {top: 28%;}
.remen {bottom: 32%;}
.cool01 {
	position: absolute;
	width: 90px;
	right: 12%;
	top: -106px;
	z-index: 4;
}
.cool01.start{
	animation: hotcool 0.6s ease-in-out forwards;
}
.gourmet02_img01 {
	position: absolute;
	width: 285px;
	right: 0;
	top: -9%;
	z-index: 3;
}
.gourmet02_data01 {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}
.cool02 {
	position: absolute;
	width: 91px;
	left: 17%;
	top: 43px;
	z-index: 4;
}
.cool02.start{
	animation: hotcool 0.6s ease-in-out forwards;
}
.gourmet02_img02 {
	position: absolute;
	width: 270px;
	left: .5%;
	bottom: -100px;
	z-index: 3;
}
.gourmet02_data02 {
	position: absolute;
	width: 100%;
	right: 0;
	top: 0;
}
@keyframes hotcool{
	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){
	.gourmet_btn {bottom: 10.6%;}
	/* HOT */
	.gourmet_menu {
		max-width: 410px;
		width: 56%;
		right: 3.5vw;
		top: 0;
	}
	.don,
	.ramen {
		max-height: 250px;
		height: 19%;
	}
	.don {top: 42%;}
	.hot01 {
		max-width: 115px;
		width: 16vw;
		left: 16vw;
		top: -107%;
	}
	.gourmet_img01 {
		max-width: 397px;
		width: 52.5vw;
		left: 1vw;
		top: -63%;
	}
	.hot02 {
		max-width: 125px;
		width: 17vw;
		right: 6vw;
		top: -65%;
	}
	.gourmet_img02 {
		max-width: 433px;
		width: 58%;
		right: 1vw;
	}
	.gourmet_data02 {top: -94%;}
	/* COOL */
	.gourmet02_menu {
		max-width: 361px;
		width: 49vw;
		left: 5vw;
	}
	.udon,
	.remen {
		max-height: 250px;
		height: 13%;
	}
	.udon {top: 34%;}
	.remen {bottom: 39.5%;}
	.cool01 {
		max-width: 133px;
		width: 18vw;
		right: 12vw;
		top: -113%;
	}
	.gourmet02_img01 {
		max-width: 426px;
		width: 57vw;
		top: -63%;
	}
	.cool02 {
		max-width: 133px;
		width: 18vw;
		left: 17vw;
		top: 26%;
	}
	.gourmet02_img02 {
		max-width: 417px;
		width: 56vw;
		left: .5vw;
		bottom: -121%;
	}	
}
@media screen and (max-width: 410px){
	.gourmet_btn {bottom: 10.4%;}
	.gourmet_text {font-size: 1.4rem;}
}



/*----------------------------------------
	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% / 3 );
	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;}
}