@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
/* header
----------------------------------------------------*/
.header{
	height: 100vh;
	position: relative;
}
.header .headerContents{
	height: 100%;
}

.header .headerContents .imgBox.koinosuke{
	position: absolute;
	margin: 0 auto;
	height: 95.4vh;
	z-index: 1;
	bottom:-27.9vh;
	left: 50%;
	transform: translate(-50%,-150px);
}
.header .headerContents .imgBox.koinosuke img{
	position: absolute;
	height: 100%;
	width: auto;
	top:0;
	left: 50%;
	transform: translate(-50%);
}
.header .headerContents .imgBox.koinosuke .keyImg{
	-webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
	opacity: 0;
	transform: translate(-50%,100px);
}
.header .headerContents .imgBox.koinosuke .keyImg.active{
	opacity: 1;
	transform: translate(-50%,0);
}
.header .headerContents .imgBox.koinosukeLight{
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 2;
	-webkit-transition: all 2s ease;
  transition: all 2s ease;
  transition-delay: 1.5s;
	 opacity: 0;
	 animation-duration:0.5s;
}
.header .headerContents .imgBox.koinosukeLight.active{
  opacity: 1;
	animation-delay: 2s;
}
.header .headerContents .imgBox.koinosukeLight img{
	top: -30px;
	left: 50%;
	width: 45.1vh;
	height: auto;
	z-index: 2;
}
.header .headerContents .logo,.header .headerContents .copy{
	position: absolute;
	top: 50%;
}
.header .headerContents .logo{
	transform: translate(0, -150px);
	max-width: 280px;
	width: 30%;
	left: 10%;
	right: auto;
	opacity: 0;
}
header .headerContents .copy{
	transform: translate(0, -150px);
	max-width: 300px;
	width: 27%;
	left: auto;
	right: 8%;
	opacity: 0;
}
.header .headerContents .logo.active{
	transform: translate(0, -50%);
		opacity: 1;
}
.header .headerContents .copy.active{
	transform: translate(0, -50%);
		opacity: 1;
}
.header .headerBottom{
	position: absolute;
	width: 100%;
	bottom:0;
	left: 0;
	height: 152px;
	background: var(--ushikoi-gry);
	justify-content: flex-start;
	align-items: center;
}
.header .headerBottom .newsBox{padding: 10px;
	background: var(--ushikoi-darkRed);
	box-shadow: 0px 0px 2px 2px rgba(186, 0, 0, 0.5);;
}
.header .headerBottom .newsBox .imgBox{
	width: 136px;
	height: 90px;
	overflow: hidden;
}
.header .headerBottom .newsBox .title,.header .headerBottom .newsBox .date{
	font-size: 1.2rem;
}
.header .headerBottom .newsBox .date{
color: var(--ushikoi-yel);
}
.header .headerBottom .newsBox .caption{
	padding: 10px 20px;
}

.header .headerBottom .newsBox .caption .title{font-weight: bold;}
.scrolldown{
  position:absolute;
  right: 82px;
  bottom:0;
  height:150px;
}

.videoContainer {
    flex: 1; /* フレックスアイテムのサイズを均等に分配 */
    position: relative; /* 動画を配置するために相対的な位置 */
}

.videoContainer video {
    width: 100%;
    height: auto;
}

/*Scroll*/
.scrolldown span{
  position: absolute;
  left:0;
  top: -3em;
	transform: translate(-50%,-50%);
  color: #848484;
  font-size: 1.4rem;
	font-weight:black;
	text-transform: uppercase ;
}

.scrolldown::before{
	content: "";
  position: absolute;
	width: 1px;
	height: 150px;
	background: #848484;
}
.scrolldown::after{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 50px;
  background: #eee;
  animation: pathMove 1.4s ease-in-out infinite;
  opacity:0;
}
@keyframes pathMove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:50px;
    opacity: 1;
  }
  100%{
    height:0;
    top: 200px;
    opacity: 0;
  }
}

.modalContent{width:80%;}

/* Main
----------------------------------------------------*/
/* About
----------------------------------------------------*/
.sectionAbout{position: relative;}
.sectionAbout::before{
	position: absolute;
	content: '';
	top:0;
	left: 0;
	opacity: 0.76;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #231815 0%, rgba(255,255,255,0) 100%);
}
.sectionAbout .sectionHeader .title:first-child{padding-left: 0.65em; font-weight: 900;}
.sectionAbout .sectionHeader .title span{font-weight: 900;}
.sectionAbout .sectionContent{
	max-width: none;
	padding: 40px 0;
}
.sectionAbout .sectionContent .flexBox{
	justify-content: flex-start;
	align-items: end;
	flex-wrap: wrap-reverse;
}
.sectionAbout .textBox{
	background-color: #840915;
	width: 60%;
	border-radius: 0 20px 0 0;
	position: relative;
}
.sectionAbout .textBox::before{
	position: absolute;
	display: inline-block;
	content: '';
	height: 100%;
	width: 50vw;
	top:0;
	left: -50vw;
	background-color: #820915;
}
.sectionAbout .textBox .inner{
		padding: 60px;}
.sectionAbout .textBox .inner p{
	padding: 10px 0;
	font-size: 1.6rem;
	line-height: 2.4;
}
.sectionAbout .textBox .inner .button{
	margin-top: 20px;
	color: var(--ushikoi-red);
}

.sectionAbout .slideBox{
	width: 40%;
}

.sectionAbout .slick-dotted.slick-slider{margin-bottom: 0;}
.sectionAbout .slideBox .imgBox{overflow: hidden;max-height: 352px;}
.sectionAbout .slideBox .slick-dots{top: -40px;right: 20px; text-align: right;}
.slick-dots li button:before {
	border: 2px solid var(--ushikoi-wht);
}
.slick-dots li.slick-active button:before,.slick-dots li button:hover:before {
  background:  var(--ushikoi-wht);
}

/* NewsSlide
----------------------------------------------------*/
.sectionNews .sliderWrapper .slickNav-arrows,.sectionCampaign .sliderWrapper .slickNav-arrows{top: -40px;right: 20px;}
.sectionNews .sliderWrapper .inner .slideNews .slick-list{
	 padding: 0 10% 0 0;}
.sectionCampaign .slideItem .imgBox{width: 100%; height: 32vw; max-height: 500px; overflow: hidden;
background: rgba(202, 155, 25,0.5);-webkit-transition: all 0.5s;
transition: all 0.5s;}
.sectionCampaign .slideItem .imgBox:hover{background: var(--ushikoi-yel2);-webkit-transition: all 0.5s;
transition: all 0.5s;}
.sectionCampaign .slideItem .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	vertical-align: middle;
}
.sectionCampaign .slideItem .labelNew{background: var(--ushikoi-yel); }

/* Menu
----------------------------------------------------*/
.sectionMenu{
	border-left: var(--section-outLineW) solid var(--ushikoi-darkRed);;
	border-bottom: var(--section-outLineW) solid var(--ushikoi-darkRed);
}
.sectionMenu .sectionHeader{flex-wrap: nowrap; width: 100%;}
.sectionMenu .sectionHeader .imgBox{
	width: 350px;
}
.sectionMenu .sectionHeader .title{width: 40%;}
.sectionMenu .slideBox{padding: 40px 20px;}
.sectionMenu .foodMenu{width: 60%;}
.sectionMenu .drinkMenu{width: 40%;}
.sectionMenu .slideRegular1{position: relative; width: 100%;}
.sectionMenu .slideRegular1 .slideItem{padding: 0;}
.sectionMenu .sliderWrapper .slickNav-arrows {top: 40px;right: 40px;display: flex;flex-wrap: nowrap;}
.sectionMenu .sliderWrapper .slickNav-arrows .slick-arrow{position: relative;left: auto; right: auto; background-color: var(--ushikoi-wht);}
.sectionMenu .sliderWrapper .slickNav-arrows .slick-arrow:hover{
	background-color: var(--ushikoi-darkRed);
}
.sectionMenu .sliderWrapper .slickNav-arrows .slick-prev{order: 2;}
.sectionMenu .slideRegular1 .slick-dots{top:40px; left:40px;bottom:auto; text-align: left;}
.menuItem{position: relative;}
.menuItem .imgBox{position:relative;  height: 500px; border-radius: 20px; overflow: hidden;}
.menuItem .imgBox::before{	position: absolute;
		width: 100%;
		height: 50%;
		content:'';
		bottom:0;
		left: 0;
		display: block;
		background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%);
		z-index: 1;
	}
.menuItem .imgBox img{position: absolute;
		width: 100%;
		height: 100%;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		object-fit: cover;
	}
	.menuItem .caption{
	position: absolute ;
	left: 0;
	bottom: 0;
	text-align: left;
	color: var(--ushikoi-wht);
	padding: 0 20px;
	margin: 40px 20px;
	z-index: 2;
}
.foodMenu .menuItem .caption{border-left: 8px solid var(--ushikoi-red);}
.drinkMenu .menuItem .caption{border-left: 8px solid var(--ushikoi-yel);}
.menuItem .caption h3{
	font-family: 'Noto Serif JP',serif;
	font-size: 2.8rem;
}
.sectionMenu .button::after{
	font-family:'ushikoi';position: absolute; font-weight: 700; content: '\e90d'; right: 20px;
}

.sectionMenu .button.btnRed{
	border:2.62px solid var(--ushikoi-darkRed);
}
.sectionMenu .button.btnYel{border:2.62px solid ver(--ushikoi-yel2);}

.sectionStoreList{
	text-align: center;
	position: relative;
}
.sectionContent > .imgBox{
	position: absolute;
	bottom:0;
	right: 0;
	width: 50%;
	transform: translate(0,37%);
}
.sectionStoreList .sectionHeader img{
	max-width: 257px;
	margin: 0 auto;
}
.sectionStoreList .sectionContent > .boxHeader{
	border-top: 6px solid var(--ushikoi-darkRed);
	border-bottom: 6px solid var(--ushikoi-darkRed);
	padding: 20px 10px;
}
.storeNav{
	width: 100%;
	font-family: 'Archivo Black', sans-serif;
	font-size: 2rem;
	letter-spacing: 0.2em;
	color: var(--ushikoi-wht);
	cursor: pointer;
	position: relative;
	margin: 10px auto 0;
	max-width: 500px;
}
.storeNav .storeNavButton{
		background: var(--ushikoi-darkRed);
		border-radius: 7px;
		z-index: 6;
}
.storeNav .storeNavButton h4{
	font-size: 2rem;
	font-weight: bold;
}
.storeNav::after{
	position: absolute;
	top:50%;
	right: 20px;
	font-family:'ushikoi'; font-weight: 700; content: '\e90c';
	transform: translate(0,-50%);
}
.storeNavContent{
	width: 100%;
	position: absolute;
	top:100%;
	transform: translate(0,-7px);
	flex-wrap: wrap;
	background-color: var(--ushikoi-red);
	border: 4px solid var(--ushikoi-darkRed);
	-webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
	height: 0;
	opacity: 0;
	z-index: 5;
	border-radius: 7px;
	overflow: hidden;
}
.storeNavContent.active{
	-webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
	opacity: 1;
	height: auto;
	padding: 20px 0;
}
.storeNavContent .storeList{
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
}
.storeNavContent li{
	width:80%;
	margin:0 auto;
	font-family: 'Archivo Black', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	list-style-type:disc;
	text-align: left;
	padding: 5px;
}
.storeNavContent li:hover{
	opacity: 0.7;
}
.storeBoxList{
	align-items: flex-start;
}
.storeBox{
	width: 362px;
	margin: 40px auto;
}
.storeBox .storeSummary{
	border: 2px solid #FFF;
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
}
.storeSummary .boxHeader{
	width: 100%;
	border-bottom: 2px solid #FFF;
	flex-wrap: nowrap;
	padding-bottom: 0;
	position: relative;
	height: 140px;
	overflow: hidden;
}
.storeSummary .boxHeader h3{
	font-size: 1.8rem;
	font-weight: bold;
	flex-grow: 1;}
.storeSummary .boxHeader .imgBox{
	width: 216px;
	height: 140px;
	position: relative;
}
.storeSummary .boxHeader .iconPlas{
	width: 20px;
	height: 20px;
	position: absolute;
	background: var(--ushikoi-wht);
	top:5px;
	left:5px;
	z-index: 1;
	border-radius: 50%;
}
.storeSummary .boxHeader .iconPlas::before, .storeSummary .boxHeader .iconPlas::after {
  position: absolute;
  top: 9px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--ushikoi-darkRed);
  transform: translateX(-50%);
}

.storeSummary .boxHeader .iconPlas:after {
  top: 3px;
  left: -3px;
  transform: rotate(90deg);
}

.storeSummary .boxHeader .imgBox img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.storeSummary .boxHeader:hover,.iconArea .iconBox:hover{
	background:var(--ushikoi-darkRed);
}
.storeBox .storeSummary .boxHeader:hover .imgBox img{
	opacity: 0.7;
}
.buttonBlock{
	position: relative;
	background: var(--ushikoi-wht);
color: var(--ushikoi-darkRed);
font-size: 2rem;
padding: 14px 20px;
transition: 0.5s;
text-align: left;
border-bottom: 2px solid var(--ushikoi-wht);
}
.buttonBlock i{padding-right: 20px;transition: 0.5s;}
.buttonBlock i::before{color: var(--ushikoi-darkRed);}
.buttonBlock:after{color: var(--ushikoi-darkRed);font-family:'ushikoi';position: absolute; font-weight: 700; content: '\e908'; right: 20px;transition: 0.5s;}
.buttonBlock:hover{
	background: var(--ushikoi-darkRed);
	color: var(--ushikoi-wht);
	transition: 0.5s;
}
.buttonBlock:hover::after,.buttonBlock:hover i::before{color: var(--ushikoi-wht);transition: 0.5s;}
.iconArea{width: 100%; flex-wrap: nowrap;}
.iconArea .iconBox{cursor: pointer; width:33.33%; padding:20px 0 15px; font-size: 1.3rem;
border-right: 2px solid var(--ushikoi-wht); }
.iconArea .iconBox:last-child{border: none;}
.iconArea .iconBox a{font-weight: bold;font-size: 1.8rem; }
.iconArea .iconBox a i{	font-size: 2rem; margin-right: 0.5em;vertical-align: -2px;}
.storeCaption{
	font-size: 1.54rem;
	line-height: 1.2;
	margin-top:20px;
}
.storeCaption th,.storeCaption td{
	font-weight: bold;
	text-align: left;
	padding: 5px;
}
.storeCaption th{padding-right: 10px;}
.sectionService .sectionHeader{
	padding: 40px 20px;
}
.sectionService .sectionHeader .title{
	color: var(--ushikoi-red);
}
.sectionService .sectionHeader .subtitle{
	color:#595757;
}
.serviceBox{
	max-width: 1160px;
	padding: 40px 60px;
	margin: 20px auto;
	background: var(--ushikoi-blk);
	border-radius: 20px;
	color:var(--ushikoi-wht);
	flex-wrap: nowrap;
}
.serviceBox .iconBox{padding:20px;}
.serviceBox .textBox{-webkit-box-flex: 1; /* old */
	-moz-box-flex: 1; /* old */
	-ms-flex: 1; /* ie10 */
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
	flex: 1;
}
.serviceBox .imgBox{
	width: 372px;
	border-radius: 10px;
	overflow: hidden;
}
.serviceBox .textBox{padding:20px;align-self: baseline;}
.serviceBox .boxHeader{flex-wrap: nowrap;}
.serviceBox .headerText{width: 100%;}
.serviceBox .subtitle{font-size: 2rem; font-family: 'Lalezar', cursive; color: #868686;}
.serviceBox .caption{
	letter-spacing: 2px;
	width: 276px;
	font-weight: bold;
	padding-bottom: 40PX;
	font-size: 1.6rem;
}
.serviceBox .button{width:276px; position:relative;}

.recruit{text-align: center; position: relative;
		height: 100vw;max-height: 1300px;}
.recruit .roundCotent{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	width:80vw;
	height: 80vw;
	margin: 0 auto;
	max-width: 1100px;
	max-height: 1100px;
	background: var(--ushikoi-red);
	border-radius: 50%;
	box-shadow: 0px 0px 6px 18px rgba(186, 0, 0,0.5);
}
.recruit .roundCotent .inner{
	position: absolute;
		top: 52%;
		left: 50%;
		transform: translate(-50%,-50%);
		width:100%;
}
.recruit .imgBox{
		max-width: 856px;
    padding: 40px 20px;
		width: 80%;
    margin: 0 auto;
}
.recruit .sectionHeader{padding: 20px 0;}
.recruit .img{padding: 20px;}
.recruit p{font-size: 1.4rem;font-weight: bold; padding: 0 30px;}
.recruit .btnBox{
	text-align: center;
	width: 100%;
	font-size: 1.8rem;
	padding: 20px;
}
.recruit .btnBox .btnRound{color: var(--ushikoi-red);}
.recruit .btnBox .btnRound:hover{border:none; color: var(--ushikoi-wht);}
/* Footer
----------------------------------------------------*/
.footer .copy{color:717071;}

@media screen and (max-width: 1024px){
	.sectionCampaign .slideItem .imgBox{height: 35vw; max-height: 300px;}
}
@media screen and (max-width: 979px){
	.header.sp .headerContents .logo{
		position: absolute;
    left: 25px;
    transform: translate(-50%, -100px) rotate(90deg);
		height: 50px;
	}
	.header.sp.headerContents .logo.active{
     transform: translate(-50%, 0) rotate(90deg);
	}
	.header.sp .headerContents .logo img{
		height: 100%;
		width: auto;
	}
		.header.sp .headerContents .copy{
			transform: translate(0, 0);
			width: 30px;
			top: 168px;
			right: 45px;
			left: auto;
		}
	.header.sp .headerContents .copy.active{
		transform: translate(0, 0);
	}
	.header .headerBottom{
		align-items: end;
	}
	.header .headerBottom .newsBox{
		width: 100%;
		justify-content: flex-start;
		z-index: 1;
		background: rgba(0,0,0,0.7);
		height: 86px;
		padding: 0px;
		overflow: hidden;
	}

	.scrolldown{display: none;}
	.sectionCampaign .slideItem .imgBox {width:100%; height: 32vw; max-height: 32vw;}
	.sectionMenu .sectionHeader{
		align-items: start;
	}
	.sectionMenu .sectionHeader .imgBox{
	width: 180px;
}
	.sectionMenu .sectionHeader .title{width: 180px;
margin-left: -50px; padding-top: 20px;}
	.sectionMenu .foodMenu,.sectionMenu .drinkMenu{width: 100%;}
	.sectionMenu .sliderWrapper .slickNav-arrows{
		width: 100%;
		top: 40%;
		right: 0;
	}
	.sectionMenu .sliderWrapper .slickNav-arrows .slick-arrow{
		background: rgba(25,27,29,0.67);
	}
	.slick-next::before,.slick-prev::before{
		color: var(--ushikoi-wht);
	}
	.sectionMenu .sliderWrapper .slickNav-arrows .slick-prev{
		position: absolute;
		right: -20px;
	}
	.sectionMenu .sliderWrapper .slickNav-arrows .slick-next{
		position: absolute;
		left: -20px;
	}
	.menuItem .caption{
		position: relative;
		margin: 20px 0;
	}

	.sectionStoreList {padding-bottom: 150px;}
	 .sectionStoreList .sectionContent > .imgBox{width: 80%;}
	 .sectionService {padding-top: 150px;}
	.serviceBox {flex-wrap: wrap;padding: 20px; position: relative;border-radius: 10px;}
	.serviceBox .iconBox,.serviceBox .textBox{width: auto;}
	.serviceBox .imgBox{width: 100%;}
	.serviceBox .textBox{flex-wrap: nowrap;justify-content: center;}
	.serviceBox .button{width:205px; position:absolute; bottom: 40px; left: 50%; transform: translate(-50%);z-index: 100;}
	.serviceBox .caption{margin: 0 auto;}
	.serviceBox .imgBox{position: relative;	border-radius: 3px;}
	.serviceBox .imgBox::after{
		position: absolute;
		width: 100%;
		height: 50%;
		content:'';
		bottom:0;
		left: 0;
		display: block;
		background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 100%);
	}
	.recruit .roundCotent p:not(.subtitle){text-align: left;font-size: 1.2rem; width: 80%;max-width: 600px;margin: 0 auto;
	}
}
@media screen and (max-width: 768px){
	.modalContent {
			width: 100%;
		}
	.header.sp .headerContents .imgBox.koinosuke{
		transform: translate(-50%,-170px);
		width: 130vw;
	}
	.header.sp .headerContents .imgBox.koinosukeLight img {
		width: 75vw;
    bottom: 81.7vw;
    top: auto;
	}
	.header.sp .headerContents .imgBox.koinosuke .keyImg{
		width: 130%;
		height: auto;
		bottom: 0;
		top: auto;
	}
	.header.sp .headerBottom{height: 170px;}

	.header .headerContents .headerBottom .newsBox{
		position: absolute;
		bottom: 0;
	}
	.breadCrumbBox{padding: 10px 0;}

	.sectionHeader .title{font-size: 5rem; padding: 0;}
	.sectionAbout{padding-top: 100px;}
	.sectionAbout .sectionContent{padding:0 20px 0 0; flex-wrap: wrap-reverse;}
	.sectionAbout .sectionHeader{
		display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap:wrap-reverse;
	justify-content: center;
	align-items: top;
	font-size:3.5625rem;
	}
	.sectionAbout .sectionHeader .title{
		text-align: left;
		font-size: 3rem;
		line-height: 1.5;
		padding-bottom: 30px;
	}
	.sectionAbout .sectionHeader .title:first-child{order: 2; padding-left: 0;}
	.sectionAbout .textBox,.sectionAbout .slideBox{width: 100%; }
	.sectionAbout .textBox{border-radius: 0;}
	.sectionAbout .slideBox .imgBox{border-radius: 0 20px 0 0;}
	.sectionAbout .slideBox .slick-dots{top:auto;right: 15px;bottom: -15px;width: 10px;
    transform: translateY(100%);}
	 .slideBox .slick-dots li{width: 10px; height: 10px;padding: 5px 0;}
	 .slick-dots li button::before{
		 border: 1px solid var(--ushikoi-wht);
	 }
	 .sectionAbout .slideBox .slick-dots li button:before {
	 border: 1px solid var(--ushikoi-wht);width: 8px;height: 8px;}
	 .sectionNews .sectionContent,.sectionCampaign .sectionContent{padding: 0 0; text-align: center;}
	 .sectionNews .sliderWrapper .inner .slideNews .slick-list,
	.sectionCampaign .sliderWrapper .inner .slideRegular3 .slick-list{padding: 0 20% 0 0 !important;}
	 .slideNews .newsItem{padding: 15px 20px;}
	.slideRegular3 .slick-list {
	 padding: 0 80px 0 0;}

	.sectionCampaign .sliderWrapper .inner .slideRegular3 .slick-dots {
		bottom: -25px;
	}
	 .slideRegular3 .slick-dots li button:before {
	border: 1px solid var(--ushikoi-red);
}
.slideRegular3 .slick-dots li.slick-active button:before,.slick-dots li button:hover:before {
  background:  var(--ushikoi-red);
}
	 .foodMenu .boxHeader,.drinkMenu .boxHeader,.menuItslideBox .boxHeader,.sectionService .sectionHeader{
		 text-align: center;
		}
		.foodMenu .boxHeader, .drinkMenu .boxHeader{font-size: 3.8rem;}
		.sectionMenu .foodMenu .slideRegular1 .slick-dots,.sectionMenu .drinkMenu .slideRegular1 .slick-dots{top: -20px;left: 20px;}
		.sectionMenu .foodMenu .slideRegular1 .slick-dots li.slick-active button::before{
			border-color: var(--ushikoi-darkRed);
			background: var(--ushikoi-darkRed);
		}
		.sectionMenu .drinkMenu .slideRegular1 .slick-dots li.slick-active button::before{
				border-color: var(--ushikoi-yel);
			background: var(--ushikoi-yel);
		}
	.sectionStoreList > .imgBox{right: 50%; transform: translate(50%); width: 100%;}
	.storeNavContent.active{height: 340px;padding: 20px 0;}
	.storeCaption{font-size: 1.5rem;}
	.storeCaption th{padding-right: 5px;}
	.recruit {position: relative; height: 840px; }
	.recruit .roundCotent{
		width: 100vw;
		height: 100vw;
		min-width: 600px;
		min-height: 600px;
	}
	.recruit .roundCotent .inner{width: 90vw;}
	.recruit .roundCotent .imgBox{padding: 20px;width: 100%;}
	.recruit .btnBox .btnRound{font-size: 1.2rem;justify-content: start;}

}
@media screen and (max-width: 468px){
	.boxHeader{padding-bottom: 20px;}
	.sectionAbout .textBox .inner{padding: 50px 10px 50px 28px;}
	.sectionAbout .textBox .inner p {
    font-size: 1.5rem;
    letter-spacing: 0.1em;
	}
	.sectionCampaign .slideRegular3 .slick-list {
	 padding: 0 40px 0 0;}
	.sectionCampaign .slideItem .imgBox {max-height: 99.95vw;height: 99.95vw;}
	.foodMenu .menuItem .imgBox {height: 207px;}
	.drinkMenu .menuItem .imgBox {width:200px ;height: 335px; margin: 0 auto;}
	.sectionMenu .slideBox{padding: 30px 0;}
	.sectionService .boxHeader .subtitle{font-size:1.6rem ;}
	.sectionService .caption{padding-bottom: 0;}
	.sectionStoreList .sectionContent > .imgBox{width: 120%;
right: -25%;}
}
@media screen and (max-width: 375px) and (max-aspect-ratio: 9/16){
.header.sp .headerContents .imgBox.koinosuke{height: 80vh;}
.header.sp .headerContents .copy{
		top: 140px;
		right: 35px;
		width: 23px;
	}
	.header.sp .headerContents .logo{
		height: 40px;
		left: 21px;}
}
@media screen and (max-width:768px) and (max-aspect-ratio: 3/4) {
	.header .headerContents .logo{
		width: 25px;
	}

}
@media screen and (max-aspect-ratio: 3/4){
	.header .headerContents .logo{
	left: 20px;
}
.header .headerContents .copy{
	right: 20px;
	width: 22px;
	transform: translate(-50%,-20px) rotate(90deg);
}
	.header.sp .headerBottom{
	height: 140px;}
	.header.sp .headerContents .imgBox.koinosuke{
		transform: translate(-50%,-138px);
	width: 100%;
	height: 73vh;
	bottom:-27.8vh;
	left: 50%;
}
.header.sp  .headerContents .imgBox.koinosuke img{
	position: absolute;
	height: 100%;
	width: auto;
	top:0;
	left: 50%;
	transform: translate(-50%);
}
	.header.sp .headerContents .imgBox.koinosuke .keyImg{
		height: 100%;
		width: auto;
		bottom: 0;
		top: auto;
	}
	.header.sp .headerContents .imgBox.koinosukeLight img{
	width: 43.1vh;
	height: auto;
}
}