@charset "UTF-8";
.main {
	position: relative;
	height: 100vh;
	width: 100%;
	background-size: cover;
	background: #fff;

	background: url("../imgs/bg.png") center top no-repeat;
	background-size: cover;
	min-height: 900px; z-index: 10;
	background-position: center top;
}


.slidin{ border-top: 2px solid #FEFFE3; border-bottom: 2px solid #FEFFE3; padding-top: 60px; position: relative; z-index: 100;}

.sabtit{ position: absolute; left:21%; top: 25%;}
.sabtit img{ width: 80%;}

/*スライド*/
.loopslider {
	margin: 0 auto;
	width: 100%;
	height: 240px;
	text-align: left;
	position: relative;
	overflow: hidden;

}


.loopslider ul {
/*	width: 100%;*/
	height: 216px;
	float: left;
	display: inline;
	overflow: hidden;
	padding-top: 5px;
}
.loopslider ul li {

	height: 216px;
	float: left;
	display: inline;
	overflow: hidden;
	margin-right: 40px;
}

.mennuContent{ padding-top: 120px;}

.sectitls{ text-align-last: center; margin-bottom: 65px;}

.sectitls h2{ font-size: 120px; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; line-height: 1; margin-bottom: 10px;}
.pickupSec .secTit dt {
    font-size: 60px;
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #004098;
}

.menuBTN{ width: 634px; margin: 0 auto; font-size: 30px; font-weight: bold; line-height: 1; padding-top: 30px; position: relative; z-index: 10;}
.menuBTN img{ width: 100%; height: auto;}


.menubtnsin{ position: relative; overflow: hidden; padding-top: 170px; padding-bottom: 75px;}
.menubtnsin:before{ content: ""; width: 499px; height: 551px; background: url("../imgs/you.svg") left top no-repeat; background-size: contain; display: block; position: absolute; left: -134px; top: 75px;}

.menubtnsin:after{ content: ""; width: 546px; height: 567px; background: url("../imgs/ichi.svg") left top no-repeat; background-size: contain; display: block; position: absolute; right: -134px; top: 342px;}

.codawariTit{ width: 100%; height: 400px; background: url("../imgs/bgkodawari.png") center top no-repeat; background-size: cover; border-top: 5px solid #FEFFE3; padding-top: 148px; box-sizing: border-box} 

.kodawariIn{ padding: 0 80px;}
.kodawariIn ul{  display: flex; flex-wrap: wrap;}
.kodawariIn ul li{ width: 33%; box-sizing: border-box; border: 1px solid #FBFCE0; padding: 30px 40px 40px}

.kodawariIn ul li img{ width: 100%; height: auto;}
.kodawariIn ul li dt{ font-size: 24px; padding-top: 50px; margin-bottom: 30px; font-weight: bold; text-align: center;}
.kodawariIn ul li dd{ font-size: 20px; color: #fff;}

.kodawariIn{ border-top: 1px solid #FEFFE3; border-bottom: 1px solid #FEFFE3; }
.itemimg{ max-width: 989px; margin: 0 auto;  line-height: 1;}
.itemimg img{ width: 100%; height: auto; vertical-align:bottom;}

.itemimeg{ background: url("../imgs/bgyoichi.png") left top no-repeat; padding-top: 100px; padding-bottom: 100px; border-bottom: 2px solid  #FEFFE3; background-size: cover; background-position:  center;}

.steam-box {
  position: absolute;
  top: auto;
	bottom: 220px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* =======================================
	ClearFixElements
======================================= */
.loopslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.loopslider ul {
	display: inline-block;
	overflow: hidden;
}



.msinner{ border: 2px solid #FEFFE4; border-radius: 30px; background: #950000;}

.swiper-slide{ padding-top: 30px;}
.msinner{ box-sizing: border-box; padding: 40px 30px; position: relative; text-align: center; font-size: 30px; line-height: 1; font-weight: bold}
.msinner:before{ content: ""; width: 640px; height: 61px; background: url("../imgs/osusumetgu.svg") left top no-repeat; position: absolute; top: -20px; left: 50%; margin-left: -120px}
.msinner img{ width: 100%; height: auto;}



.swiper-container{ padding-bottom: 10px;}
.swiper-container {
  padding-left: 125px;
}


.swiper-container{ padding-bottom: 100px;}


	 .swiper-pagination-bullet {
    width:9px;
    height: 9px;
		 border-radius: 50%;
    display: inline-block;
 
    background: #000;
    
}
	 .swiper-pagination-bullet-active{background: #FEFFE4;}

.store{ padding-top: 140px; padding-bottom: 100px;}
.shopList { padding-left: 240px; width: 100%; box-sizing: border-box;}

.storeLi{ background: #000; width: 100%; padding: 50px 80px; box-sizing: border-box; color: #fff; border:2px solid;  border-color:#FBFCDF #000 #FBFCDF #FBFCDF; margin-bottom: 40px;}

.on .detail{ padding-top: 40px;}
.storeLi dt{ font-size: 40px; font-weight: bold; display: inline-block; margin-right: 40px;}
.storeLi dd{ font-size: 30px; display: inline-block}

.mapimgWrapp{ width: 100%; height: 500px; font-size: 0; letter-spacing: 0;}
.mapimgWrapp .mapimg{ width: 34%; height: 500px; display: inline-block; position: relative; object-fit: cover;}
.mapimgWrapp .mapimg img{ object-fit: cover; position: absolute; left: 0; top: 0; width: 100%;
    height: 100%;}

.gmap{ position: relative; display: inline-block; vertical-align: top; width: 66%; height: 500px;}


.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.txtarea{ font-size: 0; letter-spacing: 0; padding-top: 55px;}
.txtarea .txt{ width: 50%; display: inline-block; vertical-align: top; font-size: 22px; line-height: 50px;}
.txtarea .sns_rezv{ width: 50%; vertical-align: top; padding-left: 5%; box-sizing: border-box;  display: inline-block;}
.sns_rezv h3{ font-size: 24px; margin-bottom: 20px;}
.sns_rezv li{ display: inline-block; margin-right: 25px;}
.rsvBtn { padding-top: 45px;}
.rsvBtn a{ font-size: 34px; text-align: center; height: 124px; line-height: 124px; background: #950000; display: block; width: 100%; color: #fff; border-radius: 10px;}

.storeLi dl{ position: relative;}
.storeLi dl:before{ content: ""; display: block; width: 42px; height: 42px; background: url("../imgs/plasu.svg") left top no-repeat; position: absolute; right: 0; top: 5px;}
.storeLi.on  dl:before{ content: "";  background: url("../imgs/mainasu.svg") left top no-repeat; position: absolute; right: 0; top: 5px;}
.storeLi .detail{ height: 0; opacity: 0; transition: all 0.6s 0.2s ease-in; display: none}
.storeLi.on .detail{ height: auto; opacity: 1; display: block;}

.recruit{ background: url("../imgs/bg_rec.png") left top no-repeat; background-size: cover;}
@supports (-webkit-touch-callout: none) {
  .main {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}

 @media screen and (max-width:900px) {
	 
	 .maincon .box{min-height: 100vh }

.mvinner {
	max-width: 73.6%;  margin: 0 auto;
}
	 
	
.mvtxt {
    botom: 10vh;
}
	 

	 .mvtxt h2{ width: 100%; max-width: 276px; margin-bottom: 35px;}
	 .mvtxt dt {
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 45px;
}

	 
	 .newsList dt span {
    border-radius: 28px;
    font-weight: 600;
    padding: 9px 24px;
}
	 .itemlistWrap{ padding-top: 44px; ackground: url(../img/tsiteimg.svg) no-repeat #F6F6F6;
    background-size: 85% 85%;
    background-position: right -0 top -156px;
}
	 .itemlistWrap .futuresec h2{ text-align: left;}
	 .newsList dt {
    display: inline-block;
    vertical-align: middle;
    width: 110px;
    font-size: 12px;
}
	 .newsList{ padding: 20px;}
	 .newsList dd {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    width: 33%;
}
	 .newsList dd.titnews {
    font-size: 14px;
    width: 100%;
		 margin-top: 20px
}
	 
	 .contactbanner li {
    width: 100%;
    display: block;
}
.contactbanner li:nth-child(odd) {
    padding-right: 0;
	margin-bottom: 40px
}
.contactbanner li:nth-child(even) {
    padding-left: 0;
}
	 .contactbanner{ box-sizing: border-box; padding: 0 40px}
	 .companybtn li:nth-child(odd) {
    padding-right: 0;
		margin-bottom: 15px;
}
	.companybtn li:nth-child(even) {
    padding-left: 0;
}
	.companybtn li:nth-child(even) a {
    background: #fff;
}
.swiper-container {
  padding-left: 34px;
}
	 .swiper-wrapper li{ padding: 0;}
	 
	.swiper-button-next, .swiper-button-prev{background-image:url("../imgs/pointarw.svg"); width: 200px; height: 163px; background-size: cover;}
.swiper-button-prev{transform:rotate(180deg); left: 10px;}
.swiper-button-next{ right: 10px;}
.swiper-button-next, .swiper-button-prev {
	top: 48%;}
	 .swiper-container{ padding-bottom: 0;}

	 .massagemain:before {
    top: -20px;
}
.massagemain:after {
    bottom: -20px;
}
	 
	 .mesage .sidessabtits{    writing-mode: inherit; right: -10px;
    top: -52px;}
	 .newsList{ margin-top: 48px; border: none;}
	 .newsBtn a { margin-top: 10px;}
	 .news {
    padding: 45px 0 55px;
}
.contactinner h2 {
	max-width: 290px;}
	 .contactArea {
    padding: 54px 0 88px;
}
	 .swiper-wrapper { padding-bottom: 50px;}
	.itemlistWrap{ padding-bottom: 40px;}

}



.leftin{ opacity: 0; transform:translateX(-15px);transition: all 0.6s 0.2s ease-in;}
.leftin.active{ opacity: 1; transform:translateX(0);}

.bottomin{ opacity: 0; transform:translateY(25px); transition: all 1.4s 0.8s ease-out;}
.bottomin.active{ opacity: 1; transform:translateY(0); }

.bottomindly{ opacity: 0; transform:translateY(25px);transition: all 1.8s 1.2s ease-out;}
.bottomindly.active{ opacity: 1; transform:translateY(0); }


.animein{ overflow: hidden; position: relative;}
.animein:before {
    will-change: auto;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 1;
    background-color: #00987E;
    -webkit-transition: all .8s cubic-bezier(.77,0,.175,1);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
	z-index: 10;
}
.animein.active:after, .animein.active:before {
    right: -100%;
}

.animein::after {
    background-color: #f5f5f5;
}

.animein:after {
    will-change: auto;
	display: none;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 2;
    -webkit-transition: all .8s cubic-bezier(.77,0,.175,1);
    transition: all .8s cubic-bezier(.77,0,.175,1);
    -webkit-transition-timing-function: cubic-bezier(.77,0,.175,1);
    transition-timing-function: cubic-bezier(.77,0,.175,1);
	z-index: 10
}



.noimgWarpp{
  display: flex;
  justify-content: center;
  align-items: center;
	height: 100%
}
.noimgs{ align-items: center; max-width: 270px;}

.itemimeg{ position: relative;}
.steam-01 {
	position: absolute; top: 0;
  left: calc(50% - 350px);
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
}

.steam-02 {
  right: calc(50% - 350px);
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
	position: absolute; right: 0; top: 0;
	
}
.steam-01 {
  left: calc(50% - 350px);
	width: 600px;
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
}
.steam-02 {
  right: calc(50% - 350px);
	width: 600px;
  -webkit-animation: steam-move-01 20s infinite linear;
  animation: steam-move-01 20s infinite linear;
}

@keyframes steam-move-01 {
  0% {
    filter: blur(12px);
    transform: scale(0.6, 0.6) rotateY(0deg);
    opacity: 0.2;
    bottom: -1300px;
  }
  6% {
    opacity: 0.45;
  }
  33% {
    transform: scale(0.8, 0.7) rotateY(30deg);
    opacity: 0.6;
  }
  66% {
    transform: scaleY(0.9, 0.8) rotateY(4deg);
  }
  100% {
    filter: blur(18px);
    transform: scaleY(1.0, 1.0) rotateY(50deg);
    opacity: 0;
    bottom: 0;
  }
}

.instain{ padding: 0 80px;}
.instagram{ border-top: 10px solid #FEFFE3; padding: 100px 0; background: #950000;}

.instaList{ display: flex; flex-wrap: wrap; }
.instaList li{ width: 33%; box-sizing: border-box; padding: 0 30px; margin-bottom: 40px;}
.instaList li dl{ text-align: center;}
.instaList li dd a{ border: 1px solid  #FEFFE3; display: block; text-align: center; padding: 20px; color: #FEFFE3; border-radius: 45px; word-break: break-all;}


.recruit{ padding-top: 125px; padding-bottom: 190px; border-top: 10px solid #FEFFE3;  border-bottom: 10px solid #FEFFE3; position: relative; overflow: hidden;}
.recruit:before{ content: ""; display: block; width: 605px; height: 984px; background: url("../imgs/imgL.png"); position: absolute; left: -140px; top: 65px; background-size: contain;}
.recruit:after{ content: ""; display: block; width: 605px; height: 984px; background: url("../imgs/imgR.png"); position: absolute; right: -40px; top: 65px; background-size: contain;}


.recin{ position: relative; z-index: 10;}
.copy{ text-align: center; font-size-adjust: 24px; padding-top: 60px;}
.recruit .sectitls{ margin-bottom: 0;}
.recBtn{ max-width: 634px; margin: 0 auto;}
.recBtn img{ width: 100%; height: auto;}
.enwtTxt{ font-size: 30px; text-align: center; padding-top: 40px;}


.contents{ position: relative; overflow: hidden;}
.mainItem{ width: 1430px; height: 1430px; position: absolute; top: -140px; right: -370px; }
.mainItem img{ width: 100%; height: auto; transition: .5s opacity cubic-bezier(.5, 0, 0, 1), 2s transform cubic-bezier(.5, 0, 0, 1);
    transform: translateX(100%) rotate(90deg);}


.instaList dt{ margin-bottom: 20px;}



 .intno .mainItem img {opacity: 1;
    transform: translateX(0) rotate(0);}


.newopen:before{ content: ""; display: block; width: 303px; height: 48px; background: url("../imgs/newicon.svg") left top no-repeat; position: absolute; left: 0; top:-60px;
background-size: 100%;} 


.stit{ font-size: 30px; font-weight: bold; padding-top: 30px; padding-bottom: 10px; line-height: 40px; }
.stxt{ font-size: 24px; line-height: 40px; padding-top: 20px;}
.swiper-slide img{width: 100%; margin: 0 auto;}

	 .menubtnsin{ background: #000;}
.menubtnsList{ position: relative; z-index: 4; text-align: center; justify-content: center; display: block; width: 100%; max-width: 1680px; margin: 0 auto; font-size: 0; letter-spacing: 0;
 
    }
.menubtnsList li{ width: 33%;  text-align: center; margin: auto; display: inline-block; box-sizing: border-box; padding: 0 20px;
  }
.menubtnsList li img{ max-width: 100%; height: auto; display: block; margin: 0 auto;}
.menubtnsList li a{ display: block;}

.businesshours dd .pc{ display: inline-block;}
.csabTits{ font-size: 60px; margin: 0 auto; padding-top: 70px; padding-bottom: 40px; text-align: center; font-weight: bold;}

 @media screen and (max-width:900px) {
	 .businesshours dt {
        padding: 0 20px;
        width: 80px;
        margin: 0 auto;
        margin-bottom: 10px;
    }
	 
	 .businesshours dt{ display: block;}
	 .msinner{ padding: 20px;}
	 .stit{ font-size: 24px;}
	 	 .stxt{ font-size: 16px;}

	 
	 .menubtnsList{ display: block;}
	 .menubtnsList li{ width: 100%;}
.sabtit {
        position: absolute;
        left: 50%;
        top: auto;
        z-index: 10;
        width: 104px;
        bottom: 30%;
        margin-left: -52px;
    }
	 .mainItem {
    width: 500px;
    height: 500px;
    position: absolute;
    top: -140px;
    right: -40px;
}
 .loopslider{ height: 95px;}
	  .slidein{ padding-top: 30px}
	 
	 .sectitls h2{ font-size: 50px}
	 .mennuContent {
    padding-top: 60px;
}
	 
	 .swiper-button-next, .swiper-button-prev{ display: none;}
	 .swiper-wrapper li{ padding-top: 30px}
	 
	 .menuBTN{ width: 100%;}
	 .menubtnsin:before {
    content: "";
    width: 167px;
    height: 120px;
    background: url(../imgs/you.svg) left top no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: -24px;
    top: 75px;
}
	 .slidin{ padding-top: 30px;}
	 .loopslider ul li{ width: 530px;}
	 
	 .mapimgWrapp{height: auto;}
	 .menubtnsin:after {
    content: "";
    width: 226px;
		 height: 487px; top: 92px;}
	 .menubtnsin{ padding-top: 50px; margin-top: 40px;}
	 .menuBTN{ padding: 0 20px; box-sizing: border-box; padding: 0 20px; font-size: 18px; text-align: center; line-height: 1.4;}
	 
	    .codawariTit {
        width: 100%;
        height: 240px;
      /*  background: url(../imgs/bgkodawari_sp.png) center bottom no-repeat;*/
        background-size: cover;
        border-top: 5px solid #FEFFE3;
        padding-top: 98px;
        box-sizing: border-box;
			background-position: bottom;
    }
	 .kodawariIn ul{ display: block;}
	 .kodawariIn ul li{ width: 100%; padding: 30px 40px 50px;}
	 .kodawariIn{ padding: 0 20px;}
	 .shopList {
		 padding-left: 40px;}
	 .storeLi dt{ font-size: 17px}
	 .storeLi dd {
		 font-size: 13px;}
	 .storeLi{ padding: 20px 25px; margin-bottom: 20px}
	 .storeLi dl:before {
    width: 25px;
    height: 22px;
    right: 0;
    top: 0;
    background-size: contain;
}
	 .mapimgWrapp .mapimg {
    width: 100%;
    height: 296px;
	 }
	 .gmap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 100%;
		 height: 295px;}
	 .txtarea{ padding-top: 20px;}
	 .txtarea .txt {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 40px;
}
	 .txtarea .sns_rezv {
		 width: 100%;}
	 .sns_rezv ul{ width: 100%;}
	 .sns_rezv ul li{ width: 35px;}
	 .instaList li { width: 50%;}
	 
	 .instain {
    padding: 0 10px;
}
	 
	 .instaList li{ padding: 0 10px}
	 .sectitls {
    text-align-last: center;
    margin-bottom: 30px;
}
	 
	 .recruit:before{ display: none}
	 .recruit:after{ display: none;}
	 
	 .instagram {
    border-top: 10px solid #FEFFE3;
    padding: 40px 0;
}
	 .enwtTxt{ font-size: 12px;}
	 .kodawaricon li{ padding:0  20px; box-sizing: border-box; border-top: 2px solid #FBFCE0;  border-bottom: 2px solid #FBFCE0;}
	 .kodawariins{ padding: 20px; border-right: 2px solid #FBFCE0; border-left: 2px solid #FBFCE0;}
	 .kodawariins dt{ font-size: 20px; text-align: center; padding: 25px 0 10px 0;}
	 .kodawariins dd{ font-size: 16px; color: #fff;}
	 .kodawariins .imgs{ padding: 0 20px;}
	 .recruit{ padding-top: 50px;}
	 .store {
    padding-top: 50px;
    padding-bottom: 50px;
}
	 
	 .rsvBtn a{ line-height: 54px; height: 54px; font-size: 20px;}
	 .steam-01 {
    left: calc(50% - 150px);
		 width: 300px;}
	 .steam-02 {
    right: calc(50% - 150px);
		 width: 300px;}
	 .businesshours{z-index: 10000; }
	 .businesshours dt{ padding: 0 20px;}
	 .businesshours dd{ font-size: 14px;}
	 .instaList dt {
		 margin-bottom: 10px;}
	 .instaList li dd a{ padding: 10px; 20px}
	 .msinner{ font-size: 16px;}
	 .header{ width: 100%; padding: 0;}
	 #menu-btn_sp{ right: 20px; top: 15px;}
	 .header h1 { padding-left: 20px;}
	 
	 .itemimeg {
    background: url(../imgs/bgyoichi_sp.png) left top no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
    border-bottom: 2px solid #FEFFE3;
    background-size: cover;
    background-position: center;
}
	 
	 .newopen:before {
    content: "";
    display: block;
    width: 112px;
    height: 28px;
    background: url(../imgs/newicon.svg) left top no-repeat;
    position: absolute;
    left: 0;
    top: -30px;
    background-size: 100%;
}
	 
	 .storeLi dt {
    margin-right: 10px;
}
	 .itemimg{ width: 80%; margin: 0 auto;}
	 .pickupSec .secTit dt{ font-size: 40px;}
	 .stxt{ line-height: 30px;}
	 .rsvBtn{ padding-top: 20px; margin-bottom: 30px;}
	 .txtarea .txt{ font-size: 16px; line-height: 30px;}

		 .instaList li{ margin-bottom: 20px; width: 100%; display: block; font-size: 16px; margin-bottom: 40px;}

}



		 
.newopen{ position: relative;} 

 @media screen and (max-width:900px) {
	 
.csabTits {
    font-size: 30px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 20px;
    text-align: center;
    font-weight: bold;
}
	 
	 .kodawariins dt{ font-weight: bold;}

}