@charset "utf-8";

.cmn-ttl {color: #c30d23;font-size: 1.8rem;text-align: center;margin-bottom: 50px;position: relative;}
.cmn-ttl span {font-size: 4.8rem;position: relative;padding: .2em .6em;display: inline-block;margin-bottom: 10px;}
.cmn-ttl span:before,
.cmn-ttl span:after {content: '';display: inline-block;border: 2px solid;border-left: none;border-right: none;padding: 2px;position: absolute;left: 0;width: 100%;}
.cmn-ttl span:before{top: 0;}
.cmn-ttl span:after {bottom: 0;}
.cmn-ttl:before,
.cmn-ttl:after {content: '';width: 78px;height: 38px;display: block;background: url(../img/top/img-cloud.svg) center / cover no-repeat;position: absolute;}


/* mainvisual
------------------------------ */
.mainvisual {width: 100%;height: 100vh;margin-bottom: 100px;overflow: hidden;}
.mainvisual ul.slider {margin-left: 300px; width: calc(100% - 300px);height: 100%;}
.mainvisual ul.slider figure.img {width: 100%;height: 100%;background: center / cover no-repeat;}
.mainvisual ul.slider .slick-slide {transform: scale(1.1);}
.mainvisual ul.slider .slick-slide.slick-active:nth-child(odd) {animation: odd-anime 6s linear forwards;}
.mainvisual ul.slider .slick-slide.slick-active:nth-child(even) {animation: even-anime 6s linear forwards;}
@keyframes odd-anime {
  0% {transform: scale(1.1) translateX(-40px); }
  100% {transform: scale(1.1) translateX(0);}
}
@keyframes even-anime {
  0% {transform: scale(1.1) translateX(40px); }
  100% {transform: scale(1.1) translateX(0);}
}

/*slider*/
.mainvisual .slick-list,
.mainvisual .slick-track,
.mainvisual .slick-slide {width: 100%;height: 100%;}
.mainvisual .slick-dots {bottom: 10px;width: 50px;margin-left: -50px;display: flex;flex-direction: column;}

@media screen and (max-width: 1200px) {
  .mainvisual ul.slider {margin-left: 240px; width: calc(100% - 240px);}
}

/* about
------------------------------ */
#about { background: url(../img/top/about-bg.svg) left calc(40% + 500px) top no-repeat;}
#about .deco-img01 {text-align: right;padding-bottom: 200px;width: 40%;}
#about .deco-img01 span {position: relative;display: inline-block;}
#about .deco-img01 span:before {content: '';width: 100%;height: 100%;background: url(../img/top/bg-img-red.png) #c30d23;position: absolute;top: 200px;right: 100px;display: block;z-index: -1;}
#about .deco-img02 {text-align: right;}
#about .deco-img02 span {position: relative;display: inline-block;}
#about .deco-img02 span:before {content: '';width: 80%;height: calc(100% + 200px);background: url(../img/top/bg-img-red2.png) #ffff00;position: absolute;top: -100px;right: 0;display: block;z-index: -1;}
#about .text {position: relative;margin-top: 200px;flex: 1;max-width: 1000px;}
#about .text h2 span {color: #fff;background: #000;display: inline-block;font-size: 3.6rem;padding: .2em .4em;line-height: 1;margin-bottom: 10px;}
#about .text p {font-size: 1.8rem;margin-left: 70px;margin-bottom: 50px;line-height: 1.8;}
@media screen and (max-width: 1200px) {
  #about {background-position: left calc(40% + 420px) top;background-size: 240px;}
}

/* menu
------------------------------ */
#menu {margin: 70px 0 100px;overflow: hidden;}
#menu .cmn-ttl:before {left: calc(50% - 260px);top: 50px;}
#menu .cmn-ttl:after {right: calc(50% - 260px);top: 0;}
#menu .menu-main li {margin-bottom: 5%;position: relative;}
#menu .menu-main li .img {position: relative;}
#menu .menu-main li .img figure {padding-bottom: 80%;background: center / cover no-repeat #fff;
  -moz-box-shadow: 0px 0px 20px 5px rgba(69, 58, 52, 0.2);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(69, 58, 52, 0.2);
  -ms-box-shadow: 0px 0px 20px 5px rgba(69, 58, 52, 0.2);
  box-shadow: 0px 0px 20px 5px rgba(69, 58, 52, 0.2);}
#menu .menu-main li .img p {display: inline-block;color: #fff;padding: .2em 1em;position: absolute;}
#menu .menu-main li .img .name {font-size: 1.8rem;background-color: #000;top: 20px;left: -10px;}
#menu .menu-main li .img .price {background-color: #c30d23;bottom: 20px;right: -10px;}
#menu .menu-main li .text {margin-top: 1.5em;}


/*202302修正 */
#menu .menu-sub {background: #f9f9f9;font-size: 1.5rem;padding: 5rem 4rem;position: relative;}
#menu .menu-sub:after {content: 'etc.';position: absolute;right: 1em;bottom: 1em;}
#menu .menu-sub ul li {display: flex;text-indent: -1em;margin-left: 1em;align-items: flex-end}
#menu .menu-sub ul li + li {margin-top: 1em;}
#menu .menu-sub ul li span:last-child {text-align: left;flex: 1;margin-left: 2em;}
#menu .menu-sub ul li span.kara {margin-right: -.8em;}

/* news
------------------------------ */
#news .cmn-ttl:before {left: calc(50% - 300px);top: 0;}
#news .cmn-ttl:after {right: calc(50% - 300px);top: 50px;}
#news .news-list li .data {display: inline-block;margin-right: 10px;}
#news .news-list li .ttl {font-size: 1.4rem;background: #000;color: #fff;display: inline-block;padding: .2em 1em ;font-family: "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium";font-weight: bold;}
#news .news-list li .text {margin-top: 15px;font-size: 1.5rem;}

/* shop
------------------------------ */
#shop .cmn-ttl:before {left: calc(50% - 300px);top: 50px;}
#shop .cmn-ttl:after {right: calc(50% - 300px);top: 0;}
#shop .bg-gray {background: url(../img/top/bg-img-gray.png) repeat #f9f9f9;padding: 80px 6%;position: relative;}
#shop .bg-gray:before,
#shop .bg-gray:after {content: '';position: absolute;left: 0;margin: 20px;width: calc(100% - 40px);height: 100px;background: url(../img/top/shop-img-left.svg) left top no-repeat , url(../img/top/shop-img-right.svg) right top no-repeat;}
#shop .bg-gray:before {top: 0;}
#shop .bg-gray:after {bottom: 0;transform: rotate(-180deg);}
#shop .shop-list {max-width: calc(830px + 12%);margin: 0 auto;}
#shop .shop-list li {text-align: center;}
#shop .shop-list:not(.img) li {border-top: 1px solid #999;padding: 20px 0;position: relative;}
#shop .shop-list li .text .name {font-size: 2.2rem;}
#shop .shop-list li .text .address {margin: 1.5rem 0; }
#shop .shop-list li .btn a {font-size: 1.4rem;text-decoration: none;background: #fff;display: inline-block;padding: .5em 1em}
#shop .shop-list li .btn a + a {margin-left: 10px;}
#shop .shop-list li .btn a:before {content: '';width: 1em;height: 1em;background: center / cover no-repeat; display: inline-block;margin-right: 5px;vertical-align: middle;margin-bottom: 5px;}
#shop .shop-list li .btn .tel:before {background-image: url(../img/top/icon-phone.svg);}
#shop .shop-list li .btn .insta:before {background-image: url(../img/top/icon-insta.svg);}

#shop .shop-list.img li {padding-bottom: 40px;}
#shop .shop-list.img li figure {background: center / cover no-repeat;padding-bottom: 70%;}
#shop .shop-list.img li .text {margin-top: -1em;}
#shop .shop-list.img li .text .name {font-size: 2rem;color: #fff;background: #000;display: inline-block;padding: .1em 1em;}
#shop .shop-list.img li  .text .address {font-size: 1.8rem;}
#shop .shop-list.img li .btn a {font-size: 1.6rem;}

#shop .bannertit {color: #c30d23;font-size: 1.8rem;text-align: center;margin-bottom: 30px;position: relative;}


#shop .shop-list li span.menu{
margin-left: 1em;
position: relative;
}
#shop .shop-list li span.menu a{
font-size: 12px;
background: #000;
text-decoration: none;
color: #FFF;
padding: 3px 15px 6px 15px;
line-height: 1;
vertical-align: middle;
position: absolute;
left: 0;
top: 5px;
}



/* sub-img
------------------------------ */
.sub-img {background: url(../img/top/sub-img.jpg) center / cover no-repeat;height: 350px;display: flex;justify-content: center;align-items: center;margin: 100px 0;}
.sub-img img {max-width: 180px;}



/* =========================================================== */
/* for pc */
/* =========================================================== */
@media screen and (min-width: 1000px) {
  /* about
  ------------------------------ */
  #about {display: flex;flex-wrap: wrap;}
  #about .text h2 {margin-left: -6em;}
  #about .text p {width: 42%;min-width: 400px;}
}

@media screen and (min-width: 768px) {
  
  /* menu
  ------------------------------ */
  #menu .menu-main {display: flex;flex-wrap: wrap;justify-content: center;margin-left: -8%;}
  #menu .menu-main li {width: 25.333%;margin-left: 8%;}
  #menu .menu-main li:nth-child(3n+1):before {content: '' ;width: 200vw;height: 70px;display: block;background: url(../img/top/menu-bg.svg) center repeat-x;position: absolute;top: 26%;left: 0;margin: auto;transform: translateX(-50%)}

	#menu .menu-sub {display: flex;justify-content: space-around;}
  #menu .menu-sub ul {}
  #menu .menu-sub ul + ul {}
  
  /* news
  ------------------------------ */
  #news .news-list {display: flex;flex-wrap: wrap;font-size: 1.8rem;}
  #news .news-list li {flex: 1;}
  #news .news-list li + li {border-left: 1px solid;margin-left: 5%;padding-left: 5%;}
  
  /* shop
  ------------------------------ */
  #shop .shop-list {display: flex;flex-wrap: wrap;}
  #shop .shop-list li {width: 50%;}
  #shop .shop-list:not(.img) li:nth-child(even):before {content: '';width: 1px;height: calc(100% - 40px);position: absolute;left: 0;top: 20px;display: inline-block;background: #999;}
  #shop .shop-list:not(.img) {border-bottom: 1px solid #999;}
  #shop .shop-list.img li:nth-child(odd) {padding-right: 4%;}
  #shop .shop-list.img li:nth-child(even) {padding-left: 4%;}
  #shop .shop-list li .btn .tel {pointer-events: none;}
	#shop .shop-banner { text-align: center; margin-bottom: 30px;}
	
#shop .shop-btn { text-align: center;padding-top: 40px; width: 100%; position: relative; z-index: 10;}
	
	
	
}

/* =========================================================== */
/* for tablet */
/* =========================================================== */
@media screen and (max-width: 999px) {
  /* mainvisual
  ------------------------------ */
  .mainvisual ul.slider {margin-left: 0; width: 100%;}
  @keyframes odd-anime {
    0% {transform: scale(1.1) translateX(-5%); }
    100% {transform: scale(1.1) translateX(0);}
  }
  @keyframes even-anime {
    0% {transform: scale(1.1) translateX(5%); }
    100% {transform: scale(1.1) translateX(0);}
  }


  /* about
  ------------------------------ */
  #about {background: none;}
  #about .text {margin-top: 0;}
  #about .text h2 {margin-left: 6%;}
  #about .text p {margin: 1em 6% 2em ;}
  #about .deco-img01 {padding-bottom: 0;width: auto;text-align: left;padding-bottom: 30px;}
  #about .deco-img01 span:before {top: -50px;left: 0;width: 80%;height: calc(100% + 100px);}
  #about .deco-img01 span {background: url(../img/top/about-img01.jpg) top 20% center / cover no-repeat;padding-bottom: 40%;width: 80%;}
  #about .deco-img01 span img {display: none;}
  #about .deco-img02 {padding-bottom: 20px;}
  #about .deco-img02 span:before {height: calc(100% + 100px);top: -50px;}
  #about .deco-img02 span {background: url(../img/top/about-img02.jpg) center / cover no-repeat;padding-bottom: 40%;width: 80%;}
  #about .deco-img02 span img {display: none;}
}
/* =========================================================== */
/* for sp */
/* =========================================================== */
@media screen and (max-width: 767px) {
  .cmn-ttl span {font-size: 4.4rem; }
  .cmn-ttl:before,
  .cmn-ttl:after {content: '';width: 58px;height: 28px;}

  
  /* menu
  ------------------------------ */
  #menu .cmn-ttl:before {left: calc(50% - 200px);top: 50px;}
  #menu .cmn-ttl:after {right: calc(50% - 200px);top: 0;}
  #menu .menu-main li {display: flex;}
  #menu .menu-main li > * {flex: 1;}
  #menu .menu-main li .img {margin-right: 20px;}
  #menu .menu-main li .img .name {left: 0;top: 0;}
  #menu .menu-main li .img .price {right: 0;bottom: 0;}
  #menu .menu-sub ul + ul {margin-top: 1em;}
  
  /* news
  ------------------------------ */
  #news .cmn-ttl:before {left: calc(50% - 200px);top: 0;}
  #news .cmn-ttl:after {right: calc(50% - 200px);top: 50px;}
  #news .news-list li + li {border-top: 1px solid;margin-top: 5%;padding-top: 5%;}
  
  /* shop
  ------------------------------ */
  #shop .cmn-ttl:before {left: calc(50% - 200px);top: 50px;}
  #shop .cmn-ttl:after {right: calc(50% - 200px);top: 0;}
  #shop .inner {padding: 0;}
  #shop .bg-gray:before,
  #shop .bg-gray:after {height: 50px;background-size: contain}
  

	#shop .shop-btn { text-align: center; padding-top: 25px; padding-bottom: 20px; border-top: 1px solid #000;}
  /* sub-img
  ------------------------------ */
  .sub-img {margin: 50px 0 0;height: auto;padding: 5%;}
  .sub-img img {width: 30%;}
}
@media screen and (max-width: 500px) {
  #menu .menu-main li {display: block;margin-bottom: 10%;}
  #menu .menu-main li .img {margin: 0 auto;width: 50%;min-width: 280px;}
}
@media screen and (max-width: 420px) {

  .cmn-ttl:before,
  .cmn-ttl:after {content: '';width: 38px;height: 18px;}
  /* menu
  ------------------------------ */
  #menu .cmn-ttl:before {left: calc(50% - 140px);top: 50px;}
  #menu .cmn-ttl:after {right: calc(50% - 140px);top: 0;}
  #menu .menu-main li .img .name,
  #menu .menu-main li .img .price {font-size: 1.4rem;}
  /* news
  ------------------------------ */
  #news .cmn-ttl:before {left: calc(50% - 140px);top: 0;}
  #news .cmn-ttl:after {right: calc(50% - 140px);top: 50px;}
  /* shop
  ------------------------------ */
  #shop .cmn-ttl:before {left: calc(50% - 140px);top: 50px;}
  #shop .cmn-ttl:after {right: calc(50% - 140px);top: 0;}
}