#kv {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 20vw;
}
#kv .shadow {
  background: #000;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
#kv .row-first {
  position: relative;
  width: 100%;
  height: calc(100vh - 63px);
}
#kv .wrap-slider {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#kv .wrap-slider .slick-slide {
  line-height: 1em;
}
#kv .wrap-slider .photo {
  height: calc(100vh - 63px);
}
#kv h2 {
  color: #fff;
  position: absolute;
  bottom: 5vw;
  left: 5vw;
  z-index: 2;
}
/* ==========================================
   スマホ表示時にタイトル（h2）をKVの縦横中央に配置
   ========================================== */
   @media screen and (max-width: 767px) {
    #kv h2 {
      top: 50%;
      left: 50%;
      bottom: auto; /* 元々あった bottom: 5vw の指定を解除 */
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      padding: 0 20px;
      box-sizing: border-box;
      z-index: 10;  /* ★重要：背景画像の裏に回り込むのを防ぎ、最前面に出す */
      text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
    }
  }
#kv .desc {
  position: relative;
  z-index: 3;
  margin-top: 100vh;
  padding: 20vw 5% 20vw;
  box-sizing: border-box;
}
#kv .desc h3 {
  color: #fff;
  margin: 0 auto 8vw;
}
#kv .desc h3 .small {
  letter-spacing: 0.2em;
}
#kv .desc .txt {
  color: #fff;
}
#key-box h1 {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  width: 80%;
}
#key-box .logo {
  width: 80px;
  position: absolute;
  top: 57px;
  left: 0;
}
#key-box .logo a {
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  #kv {
    padding-bottom: 200px;
  }
  #kv .row-first {
    height: 100vh;
  }
  #kv .wrap-slider .photo {
    height: 100vh;
  }
  #kv h2 {
    bottom: 46px;
    left: 42px;
  }
  #kv .desc {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    padding: 0 0 0 24px;
  }
  #kv .desc h3 {
    margin: 0 0 0 60px;
  }
  #kv .desc .txt {
    width: 560px;
    height: 400px;
  }
  #key-box h1 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  } 
  #key-box .logo {
    top: 80px;
    left: 50px;
  }
}

section.nav-main {
  background: url(../img/shared/main_bg.jpg) repeat;
}

#sec1 {
  padding: 20vw 0 10vw;
}
#sec1 h2 {
  font-size: 6.5vw;
  margin-bottom: 4vw;
}
#sec1 h3 {
  font-size: 5.5vw;
  margin-bottom: 8vw;
}
#sec1 .img {
  margin-bottom: 6vw;
}
@media only screen and (min-width: 768px) {
  #sec1 {
    padding: 97px 0 100px;
  }
  #sec1 .wrap {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
  }
  #sec1 h2 {
    font-size: 36px;
    line-height: 55px;
    padding-top: 41px;
    margin-bottom: 16px;
  }
  #sec1 h3 {
    font-size: 25px;
    margin-bottom: 28px;
  }
  #sec1 .img {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    right: -69px;
    left: calc(50% - 51px);
    height: 500px;
  }
  #sec1 .txt {
    width: 460px;
    letter-spacing: 0.1em;
  }
}

#sec2 {
  padding: 10vw 0 10vw;
}
#sec2 h2 {
  margin-bottom: 6vw;
}
#sec2 .note {
  margin-bottom: 8vw;
}
#sec2 .row {
  margin-bottom: 8vw;
}
#sec2 .row .desc-all {
  margin-bottom: 8vw;
}
#sec2 .wrap-slider {
  margin-left: 5vw;
  margin-right: calc(50% - 50vw);
  margin-bottom: 6vw;
}
#sec2 .wrap-slider .slick-slide {
  line-height: 1em;
}
#sec2 .img2 {
  margin-right: 15vw;
  margin-bottom: 8vw;
}
#sec2 .box {
  padding: 8vw 5%;
  box-sizing: border-box;
  border: 1px solid rgba(34, 34, 34, 0.3);
  margin-bottom: 8vw;
}
#sec2 .box .img {
  margin-bottom: 6vw;
}
#sec2 .list .desc-all:nth-child(1) {
  margin-bottom: 8vw;
}
#sec2 .list .desc-all:nth-child(2) {
  padding: 8vw 5vw;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 768px) {
  #sec2 {
    padding: 138px 0 25px;
  }
  #sec2 .wrap {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
  }
  #sec2 h2 {
    padding-top: 88px;
    margin-bottom: 32px;
  }
  #sec2 .note {
    text-align: center;
    line-height: 30px;
    margin-bottom: 43px;
  }
  #sec2 .row {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-bottom: 78px;
    margin-left: -81px;
    gap: 153px;
  }
  #sec2 .row .desc-all {
    margin-top: 47px;
    margin-bottom: 0;
  }
  #sec2 .wrap-slider {
    margin-left: calc(50% - 150px);
    margin-right: calc(50% - 50vw);
    margin-bottom: -140px;
  }
  #sec2 .wrap-slider .photo {
    height: 449px;
  }
  #sec2 .wrap-slider .photo img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  #sec2 .img2 {
    margin-right: 0;
    margin-left: -96px;
    margin-bottom: 48px;
  }
  #sec2 .box {
    display: flex;
    flex-direction: row-reverse;
    padding: 51px 100px 47px;
    margin-bottom: 28px;
  }
  #sec2 .box .img {
    margin-bottom: 0;
  }
  #sec2 .box .desc-all {
    flex-shrink: 0;
    margin-top: 25px;
    margin-right: 117px;
  }
  #sec2 .list {
    display: flex;
    justify-content: center;
    gap: 35px;
  }
  #sec2 .list .desc-all {
    width: 480px;
  }
  #sec2 .list .desc-all:nth-child(1) {
    margin-top: 97px;
    margin-bottom: 0;
  }
  #sec2 .list .desc-all:nth-child(2) {
    padding: 43px 30px 49px;
  }
}

#sec3 {
  padding: 10vw 0 20vw;
}
#sec3 h2 {
  font-size: 5.5vw;
  margin-bottom: 8vw;
  white-space: nowrap;
}
#sec3 .wrap-slider {
  margin-bottom: 6vw;
}
#sec3 .wrap-slider .slick-slide {
  line-height: 1em;
}
@media only screen and (min-width: 768px) {
  #sec3 {
    padding: 25px 0 204px;
  }
  #sec3 h2 {
    font-size: 30px;
    width: 470px;
    margin-left: auto;
    margin-right: -94px;
    margin-bottom: 36px;
    padding-top: 107px;
    line-height: 55px;
  }
  #sec3 .wrap-slider {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: -202px;
    right: calc(50% - 48px);
  }
  #sec3 .wrap-slider .photo {
    height: 500px;
  }
  #sec3 .txt {
    width: 440px;
    margin-right: -68px;
    margin-left: auto;
  }
}

.bnr-all {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  padding: 10vw 5vw 10vw;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.bnr-all .img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bnr-all .img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.bnr-all .desc h2 {
  font-size: 6vw;
  text-align: center;
  margin-bottom: 6vw;
  color: #fff;
}
.bnr-all .desc .tel-info dt {
  color: #fff;
}
.bnr-all .desc .tel-info dt .tel-icon::before {
  background-image: url(../img/shared/icon_tel_w.png);
}
.bnr-all .desc .note {
  color: #fefefe;
  margin-bottom: 5vw;
}
.bnr-all .desc .btn-web a {
  color: #222;
  background: #fff;
}
.bnr-all .desc .btn-web a::before {
  background-image: url(../img/shared/icon_arrow_b.png);
}
@media only screen and (min-width: 768px) {
  .bnr-all {
    max-width: 1402px;
    padding: 154px 40px 166px;
  }
  .bnr-all .desc h2 {
    font-size: 36px;
    margin-bottom: 43px;
  }
  .bnr-all .desc .tel-info dt {
    margin-bottom: 0;
  }
  .bnr-all .desc .note {
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
  }
  .bnr-all .desc .btn-web a:hover {
    background: #222;
    color: #f6f6f6;
  }
  .bnr-all .desc .btn-web a:hover::before {
    filter: brightness(0) invert(1);
  }
}

@media only screen and (min-width: 768px) {
  #sec4 {
    padding: 0 30px;
  }
}

#sec5 {
  padding: 20vw 0 10vw;
}
#sec5 .desc-all {
  margin-bottom: 8vw;
}
#sec5 .desc-all .price {
  margin-bottom: 4vw;
}
#sec5 .note {
  margin-bottom: 6vw;
}
#sec5 .row {
  margin-bottom: 8vw;
}
#sec5 .row .img {
  margin-left: calc(50% - 50vw);
  margin-bottom: 6vw;
}
#sec5 .list .photo1 {
  width: 80%;
  margin-left: auto;
  margin-bottom: 6vw;
}
#sec5 .list .photo2 {
  width: 60%;
}
@media only screen and (min-width: 768px) {
  #sec5 {
    padding: 125px 0 100px;
  }
  #sec5 .wrap {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
  }
  #sec5 .desc-all {
    margin-bottom: 27px;
  }
  #sec5 .desc-all .price {
    margin-bottom: 20px;
  }
  #sec5 .note {
    text-align: center;
    line-height: 30px;
    letter-spacing: 0.1em;
    margin-bottom: 72px;
  }
  #sec5 .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 148px;
    margin-bottom: 135px;
    position: relative;
    z-index: 1;
  }
  #sec5 .row .img {
    height: 550px;
    margin: 0;
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 49px);
  }
  #sec5 .row .txt {
    width: 450px;
    margin-left: auto;
    margin-bottom: 0;
    letter-spacing: 0.1em;
  }
  #sec5 .list .photo1 {
    width: 550px;
    margin-left: auto;
    margin-right: -101px;
    margin-bottom: -191px;
  }
  #sec5 .list .photo2 {
    width: auto;
    margin-left: 59px;
  }
}

#sec6 {
  padding: 10vw 0 20vw;
}
#sec6 h2 {
  margin-bottom: 8vw;
}
#sec6 .row1 {
  padding: 10vw 0 10vw;
  position: relative;
  width: 100%;
  height: 80vw;
  z-index: 1;
  margin-bottom: 12vw;
}
#sec6 .row1 h3 {
  font-size: 6vw;
  color: #fff;
  position: absolute;
  top: 5vw;
  right: 10vw;
}
#sec6 .row1 h3 .pt {
  padding-top: 3vw;
}
#sec6 .row1 .img {
  position: absolute;
  inset: 0;
  z-index: -1;
}
#sec6 .row1 .img img {
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
#sec6 .row2 .img {
  margin-bottom: 6vw;
}
#sec6 .row2 .desc .txt {
  margin-bottom: 6vw;
}
#sec6 .row2 .desc .btn-popup a::before {
  background-image: url(../img/dinner/icon_popup.png);
  aspect-ratio: 1/1;
  width: 10px;
}
@media only screen and (min-width: 768px) {
  #sec6 {
    padding: 89px 0 97px;
  }
  #sec6 h2 {
    margin-bottom: 50px;
  }
  #sec6 .row1 {
    padding: 0;
    box-sizing: border-box;
    height: 600px;
    margin-bottom: 81px;
  }
  #sec6 .row1 h3 {
    font-size: 30px;
    top: 87px;
    right: calc(50% - 352px);
    line-height: 55px;
  }
  #sec6 .row1 h3 .pt {
    padding-top: 37px;
  }
  #sec6 .wrap {
    width: 100%;
    max-width: 1260px;
    padding: 0 30px;
    margin: 0 auto;
  }
  #sec6 .row2 {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #sec6 .row2 .img {
    margin-bottom: 0;
    margin-right: -52px;
  }
  #sec6 .row2 .desc {
    flex-shrink: 0;
    width: 510px;
    margin-top: 43px;
    margin-left: 47px;
  }
  #sec6 .row2 .desc .txt {
    letter-spacing: 0.1em;
    margin-bottom: 43px;
  }
  #sec6 .row2 .desc .btn-popup a {
    width: 380px;
    height: 60px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    margin-left: 0;
  }
  #sec6 .row2 .desc .btn-popup a::before {
    width: 14px;
    right: 50px;
  }
}

#sec7 {
  padding-bottom: 5vw;
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  #sec7 {
    padding: 0 30px 50px;
  }
}

.sec-last {
  padding: 5vw 0 20vw;
  position: relative;
  z-index: 1;
}
.sec-last .deco {
  width: 50vw;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.sec-last .list-all .btn-all {
  margin-bottom: 4vw;
}
.sec-last .list-all .btn-all a {
  font-family: var(--serif);
  font-weight: 400;
}
@media only screen and (min-width: 768px) {
  .sec-last {
    padding: 50px 0 100px;
  }
  .sec-last .deco {
    width: 353px;
    bottom: 0;
    right: 0;
  }
  .sec-last .list-all {
    display: flex;
    justify-content: center;
    gap: 110px;
  }
  .sec-last .list-all .btn-all {
    margin-bottom: 0;
    width: 100%;
    max-width: 380px;
  }
  .sec-last .list-all .btn-all a {
    font-size: 18px;
    width: 100%;
    height: 60px;
    border-radius: 30px;
  }
  .sec-last .list-all .btn-all a::before {
    right: 50px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1260px) {
  #sec1 .img {
    left: 50%;
  }
  #sec3 .txt {
    margin-right: 0;
  }
  #sec3 h2 {
    margin-right: -35px;
  }
  #sec3 .wrap-slider {
    right: 50%;
  }
  #sec5 .row .img {
    right: 50%;
  }
  #sec6 .row2 .desc {
    margin-left: 0;
  }
  #sec6 .row2 .img {
    margin-left: 30px;
  }
}