/*
Theme Name: yaoyano2024
*/


/* ------------------------------
default
------------------------------ */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-style: initial;
	-webkit-text-size-adjust: 100%;
}

html,body {
	height: 100%;
	width: 100%;
	scroll-behavior: smooth;
}
body {
	font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	line-height:1.4;
	letter-spacing: 0.38px;
	margin: 0;
}
a {
	text-decoration: none;
	-webkit-transition: all linear 0.2s;
	transition: all linear 0.2s;
}
a:hover{
	opacity: 0.65;
}
img {
	height: auto;
	max-width: 100%;
}
input, button, select, textarea {
	-webkit-appearance: none;
}
h2, ul, li{
	list-style: none;
	margin: 0;
	padding: 0;
}

/*----------
font
------------*/
.fontll{
	font-size: 36px;
}
.fontl{
	font-size: 30px;
}
.fontm{
	font-size: 18px;
}
.fonts{
	font-size: 16px;
}
.fontss{
	font-size: 14px;
}
/*----------
common
------------*/
.container{
	color: #453532;
	width: 100%;
	min-width: 1000px;
}
.main section{
	padding-top: 80px;
	position: relative;
}
h2.headline{
	letter-spacing: 1.1px;
}
.bold{
	font-weight: bold;
}
.letter_w{
	color: #FCFAF9;
}
.letter_g{
	color: #3B6A4A;
}
.bk_body{
	background-color: #dddddd;
}
.bk_br{
	background-color: #080403;
}
.bk_time {
	background-color: #fff;
}
.bk_footer_b{
	background-color: #666666;
}
.bk_footer_b2{
	background-color: #777777;
}
.bk_w{
	background-color: #FCFAF9;
}
.bk_g{
	background-color: #3B6A4A;
}
.font_quick{
	font-family: 'Quicksand', sans-serif;
}
.flexbox{
	display: flex;
}
.pc{
	display: initial;
}
.sp{
	display: none;
}
.head_text{
	letter-spacing: 0.72px;
}
.text_content{
	line-height: 2;
}
/*gallery slide*/
.gallery_slide .gallery_slide_item{
	aspect-ratio: 1/1;
	background-size: cover;
	background-position: center;
	border-radius: 16px;
}
.gallery_slide .flexbox{
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
.gallery_slide .flexbox a{
	display: block;
	padding: 5px;
	width: 50%;
	height: 50%;
}


/* --------------------------------
header
---------------------------------*/
.header{
	position: fixed;
	top: 0;
	z-index: 999;
	height: 80px;
	width: 100%;
}
.header h1{
	position: fixed;
	top: 32px;
	left: 120px;
	width: 190px;
}
.header .burgermenu,
.header .burgermenu span{
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
	border-bottom: inherit;
	z-index: 9999;
}
.header .burgermenu{
	position: absolute;
	right: 120px;
	top: 40px;
	width: 28px;
	height: 15px;
}
.header .burgermenu span {
	position: absolute;
	left: 0;
	background-color:#453532;
	height: 1px;
}
.header .burgermenu span:nth-of-type(1) {
	top: 0;
	width: 25px;
}
.header .burgermenu span:nth-of-type(2) {
	top: 7px;
	width:100%;
}
.header .burgermenu span:nth-of-type(3) {
	bottom: 0;
	width: 18px;
}
.header.active .burgermenu span:nth-of-type(1) {
	-webkit-transform: translateY(7px) rotate(-45deg);
	transform: translateY(7px) rotate(-45deg);
	background-color: #453532;
}
.header.active .burgermenu span:nth-of-type(2) {
	opacity: 0;
}
.header.active .burgermenu span:nth-of-type(3) {
	-webkit-transform: translateY(-7px) rotate(45deg);
	transform: translateY(-7px) rotate(45deg);
	background-color: #453532;
	width: 25px;
}
.header nav.globalnav{
	width: 30%;
	height: 100vh;
	position: absolute;
	right: 0;
	display: none;
}
@keyframes fadeIn {
	0% {opacity: 0} 
	100% {opacity: 1} 
}
.header.active nav.globalnav{
	display: block;
	animation: fadeIn 0.3s ease-in 0s forwards;
}
.header nav.globalnav ul.navi{
	margin-top: 220px;
}
.header nav.globalnav ul.navi li{
	margin-bottom: 20px;
}

/* --------------------------------
top
---------------------------------*/
.main section.top{
	padding-top: 0;
}
.top .mv_slide{
	width: 100%;
	height: 100%;
}
.top .mv_slide .mv_slide_item{
	aspect-ratio: 1/0.33;
	background-position: center;
	background-size: cover;
}
.top .logo_area{
	width: 28%;
	max-width: 410px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99;
}

/* --------------------------------
about
---------------------------------*/
.about .concept{
	width: max(36%,572px);
	margin: 0 auto 60px;
}

/*
store_list
*/

.store_list .store_box{
	aspect-ratio: 1/0.563;
	border-radius: 40px 0 0 40px;
	background-size: cover;
	background-position: center center;
	background-color: rgba(51, 51, 51, 0.6);
	background-blend-mode: overlay;
	padding-left: 21%;
	position: relative;
}
.store_list .store_box .shop_name{
	position: absolute;
	letter-spacing: 0.86px;
}
.store_list .store_box .shop_name span{
	display: block;
}
.store_list .store_box .arrow{
	width: 72px;
	position: absolute;
}

/* ------------------------------
for smartphone
------------------------------ */
@media screen and (max-width: 599px) {
	/*----------
	common
	------------*/
	.container{
		min-width: initial;
	}
	section{
		padding-top: 56px;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	/* --------------------------------
	header
	---------------------------------*/
	.header{
		height: 56px;
	}
	.header h1{
		top: 19px;
		left: 19px;
		width: 142px;
	}
	.header .burgermenu{
		right: 23px;
		top: 26px;
		width: 18px;
		height: 11px;
	}
	.header .burgermenu span:nth-of-type(1) {
		top: 0;
		width: 16px;
	}
	.header .burgermenu span:nth-of-type(2) {
		top: 5px;
		width:100%;
	}
	.header .burgermenu span:nth-of-type(3) {
		bottom: 0;
		width: 10px;
	}
	.header .burgermenu.active span:nth-of-type(1) {
		-webkit-transform: translateY(5px) rotate(-45deg);
		transform: translateY(5px) rotate(-45deg);
		background-color: #453532;
	}
	.header .burgermenu.active span:nth-of-type(2) {
		opacity: 0;
	}
	.header .burgermenu.active span:nth-of-type(3) {
		-webkit-transform: translateY(-5px) rotate(45deg);
		transform: translateY(-5px) rotate(45deg);
		background-color: #453532;
	}
	.header nav.globalnav{
		width: 100%;
		padding: 0 30px;
	}
	/* --------------------------------
	top
	---------------------------------*/
	.top .mv_slide .mv_slide_item{
		aspect-ratio: 0.562/1;
	}
	.store_list .store_box{
		border-radius: 16px 0 0 16px;
		margin-bottom: 60px;
		padding-left: 11%;
	}
	.store_list .store_box:nth-child(2){
		margin-bottom: 0;
	}
	.store_list .store_box .shop_name{
		top: 39%;
	}
	.store_list .store_box .shop_name span{
		margin-top: 10px;
	}
	.store_list .store_box .arrow{
		width: 40px;
		bottom: -20px;
		right: 8%;
	}


}