@charset "utf-8";

:root {
  --accent-color: #008fdb; 
}


/* ----- common ----- */
.sec {
  position: relative;
  z-index: 9;
}
.sec._store {
  padding: 100px 30px 120px;
}
.sec-inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
}
.sec-ttl {
  margin: 0 auto 40px;
  width: 100%;
  max-width: 336px;
}
.sec-ttl_img {
  aspect-ratio: 672/192;
}
.page-wrap {
  background-image: url(../img/nanatsuboshi/bg_pattern.webp);
  background-size: 100%;
  background-repeat: repeat;
  background-position: top center;
}
.sec-wrap {
  background-image: url(../img/nanatsuboshi/bg_txt.webp);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  z-index: 9;
  position: relative;
}

@media screen and (max-width: 768px) {
  .sec-wrap {
    background-position: 100% 0, 0 0;
    background-size: 13%;
  }
  .sec-ttl {
    margin: 0 auto 6%;
    width: calc(100% /2);
  }
}


/* ----- mv ----- */
.mv {
  position: relative;
  z-index: 8;
  margin-top: 80px;
}
.mv::after {
  content: "";
  background-image: url(../img/nanatsuboshi/mask.webp);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0%;
  right: 0%;
  bottom: -8vw;
  display: block;
  width: 100%;
  height: 24.9vw;
}
.mv img {
  width: 100%;
  height: auto;
}
.sec-accbtn a {
  width: 100%;
  max-width: 200px;
}
.sec-accbtn {
  position: relative;
  top: -6vw;
  right: 0;
  left: 0;
  display: flex;
  max-width: 1000px;
  margin: -40px auto;
  justify-content: center;
  z-index: 10;
}
.sec-accbtn a img {
  aspect-ratio: 440 / 127;
}

@media screen and (max-width: 767px) {
  .mv {
    margin-top: 0;
  }
  .sec-accbtn {
    top: -12vw;
    padding: 0 3%;
    flex-wrap: wrap;
  }
  .sec-accbtn a {
    width: 50%;
  }
}

@media (hover: hover) {
  .sec-accbtn a img {
    transition: transform .3s;
  }
  .sec-accbtn a img:hover {
    opacity: 0.7;
  }
  }

/* ----- map ----- */
.sec__mainimg {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.sec__mainimg img {
  aspect-ratio: 1040/1116;
}
.sec._map {
  padding: 80px 30px 0;
  margin-top: -80px;
}

@media screen and (max-width: 767px) {
  .sec._map {
    padding: 20% 3% 0%;
  }
}

/* ----- ahop ----- */
.store-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
.storeCard {
  width: calc((1000px - 30px* 3) / 3);
  border-radius: 0;
  overflow:hidden
}
.storeCard-info h3 {
  margin-bottom: 15px;
}
/* .storeCard-area {
  font-size: 1.2rem;
} */
.storeCard-imgbox {
  overflow: hidden;
}
.storeCard-imgarea {
  position: relative;
}
.storeCard-img {
  aspect-ratio: 3 / 2;
}
.storeCard a {
  position: relative;
  height: auto;
  display: block;
}
.storeCard-info {
  padding: 10px;
  background-color: #fff;
}
.storeCard-info h3 {
  margin-bottom: 10px;
  line-height: 1.25;
  font-weight: 700;
}
/* .storeCard-area {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  color: #888;
}
.storeCard-area::before {
  content: "";
  display: block;
  width: calc(18px / 2);
  height: auto;
  aspect-ratio: 360 / 512;
  background: center / contain no-repeat url(../img/common/icon-pin.svg);
} */

@media screen and (max-width: 768px) {
  .store-list {
    gap: 15px;
  }
  .storeCard {
    width: calc((100% - 15px) / 2);
  }
  .sec._store {
    padding: 12% 3% 10%;
  }
}


/* -- menu -- */
.sec._menu {
  background-size: cover;
  background-image: url(../img/nanatsuboshi/bg_pattern02.webp);
  padding: 100px 30px 120px;
}
.sec__box {
  background-image: url(../img/nanatsuboshi/bg_pattern03.webp);
  background-size: contain;
  max-width: 700px;
  padding: 50px;
  width: 100%;
  margin: 0 auto;
}
.storeCard-img_menu {
  aspect-ratio: 961/445;
}
.storeCard-arrow {
  position: absolute;
  z-index: 2;
  bottom: 6.5%;
  right: 4.5%;
  display: block;
  width: calc(86px / 2);
  aspect-ratio: 86 / 86;
}
.storeCard-arrow._left {
  left: 4.5%;
}
.storeCard._menu {
  width: 100%;
  margin: 0 auto;
}
.storeCard._menu a {
  width: 80%;
  margin: 0 auto;
}
.storeCard-wrap {
  display: flex;
}
.storeCard-wrap._left {
  justify-content: right;
}
.storeCard-info._menu {
  background-color: transparent;
}
.storeCard-data {
  margin-top: 16px;
  line-height: 1.6;
}
.storeCard-data h3 {
  font-size: 2rem;
}
.storeCard-price {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}
.storeCard-price span:first-of-type {
  font-size: 1.6rem;
}
.storeCard-price span:nth-of-type(2) {
  font-size: 2rem;
}
.storeCard-price span:last-of-type {
  font-size: 1.6rem;
}
.storeCard-photo {
  width: 50%;
  margin: -80px -40px 0 0;
  position: relative;
}
.storeCard-photo_02 {
  width: 30%;
  margin: -80px 0px 0px 10px;
  position: relative;
}
.storeCard-photo_03 {
  width: 50%;
  margin: -90px 10px 0 0;
  position: relative;
}
.storeCard-photo_img_01 {
  aspect-ratio: 568/330;
}
.storeCard-photo_img_02 {
  aspect-ratio: 410/354;
}
.storeCard-photo_img_03 {
  aspect-ratio: 575/358;
}
.storeCard p {
  line-height: 1.5;
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .sec._menu {
    padding: 16% 3% 10%;
  }
  .sec__box {
    padding: 1%;
  }
  .storeCard._menu a {
    width: 100%;
  }
  .storeCard._menu {
    margin: 0 auto 8%;
  }
  .storeCard-arrow {
    bottom: 2.5%;
    right: 1.5%;
  }
  .storeCard-arrow._left {
    bottom: 2.5%;
    left: 1.5%;
  }
  .storeCard-photo {
    width: 60%;
    margin: -15% -9% 0% 0;
  }
  .store-list._menu {
    gap: 0px;
  }
  .storeCard-photo_02 {
    width: 50%;
    margin: -17% 0px 0px 3%;
  }
  .storeCard-photo_03 {
    width: 60%;
    margin: -17% 10px 0 0;
  }
  .storeCard-data h3 {
    font-size: 1.4rem;
  }
  .storeCard-price span:last-of-type {
    font-size: 1.2rem;
  }
}

@media (hover: hover) {
  .storeCard-imgbox img {
    transition: transform .3s;
  }
  .storeCard-imgbox img:hover {
    transform: scale(1.1);
  }
  }



/* -- info -- */
.sec._info {
  padding: 100px 30px 120px;
  background-color: #fff;
}
.sec-ttl._logo {
  width: 100%;
}
.sec-ttl-logo_img {
  aspect-ratio: 839 / 114;
}
.sec-banner {
  width: 100%;
  height: auto;
}
.info-list_wrap {
  margin-top: 40px;
}
.info-list {
  width: 100%;
  display: flex;
  /* gap: 10px 6px; */
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.info-head {
  font-weight: 600;
  width: 30%;
}
.info-contents {
  width: 70%;
}
.info-contents._hour li {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.info-contents._hour li:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  line-height: 1.2;
  font-size: 1.2rem;
}
.info-txt_strong {
  font-weight: 600;
  line-height: 2;
}
.info-txt {
  line-height: 1.5;
}
.info-txt._red {
  color: #ff0000;
}
.sec-banner_img {
  aspect-ratio: 2000/720;
}

@media screen and (max-width: 768px) {
  .sec._info {
    padding: 16% 3% 20%;
  }
  .sec-ttl._logo {
    width: 80%;
  }
  .info-list_wrap {
    margin-top: 4%;
  }
  .info-head._02 {
    line-height: 2;
  }
  .sec-banner_img {
    aspect-ratio: 1380/725;
  }
}