@media only screen and (min-width: 768px) {
   main {
      overflow: visible;
   }
}

#key .slide-item1 {
   background: url("../img/index/key-img1.jpg") no-repeat center top/cover;
}

#key .slide-item2 {
   background: url("../img/index/key-img2.jpg") no-repeat center top/cover;
}

#key .slide-item3 {
   background: url("../img/index/key-img3.jpg") no-repeat center top/cover;
}

#key .slide-item4 {
   background: url("../img/index/key-img4.jpg") no-repeat center top/cover;
}

@media only screen and (max-width: 767px) {
   #key {
      height: 146.6vw;
   }

   .key-logo {
      width: 58.4vw;
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .key-logo img {
      filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.29));
   }
}

@media only screen and (min-width: 768px) {
   #key {
      height: 710px;
   }

   .key-logo {
      width: 343px;
      position: absolute;
      top: 46%;
      left: 50%;
      transform: translate(-50%, -50%);
   }

   .key-logo img {
      filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.29));
   }
}

/* -- -- */
#lead {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #lead {
      padding: 24.8vw 0;
   }

   #lead .txt {
      padding-top: 12vw;
   }

   #lead .txt p+p {
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   #lead {
      padding: 152px 0 157px;
   }

   #lead .txt {
      padding-top: 44px;
   }
}

/* -- -- */
#about {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #about .wrap {
      width: 88vw;
      border-top: 1px solid #c6c6c6;
      padding: 20vw 0 28.8vw;
   }

   #about .block {
      padding-top: 25vw;
   }

   #about .block .item+.item:before {
      content: '';
      display: block;
      width: 2.6vw;
      height: 2.6vw;
      background-color: #ab6116;
      margin: 15vw auto;
   }

   #about .block h3 {
      padding-top: 18vw;
   }

   #about .block h3:before {
      display: none;
   }

   #about .block h3 span {
      padding: 6vw 0 0;
   }

   #about .block .txt {
      padding-top: 12vw;
   }

   #about .button {
      padding-top: 20vw;
   }
}

@media only screen and (min-width: 768px) {
   #about {
      padding-bottom: 110px;
   }

   #about .wrap {
      border-top: 1px solid #c6c6c6;
   }

   #about h2 {
      width: 50px;
      height: 320px;
      font-size: 18px;
      position: absolute;
      top: 70px;
      left: 28px;
      padding-bottom: 250px;
   }

   #about h2 span {
      width: 50px;
      height: 100px;
      text-align: left;
      padding-bottom: 0;
      position: relative;
      left: -4px;
   }

   #about h2:after{
      content: '';   
      width: 0;
      height: 245px;
      border-left: 1px dotted #c6c6c6;
      position: absolute;
      bottom: 0;
      left: 40%;
   }

   #about .block {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      padding: 155px 0 0 100px;
   }

   #about .block .photo_pc {
      display: grid;
      width: calc(100% - 436px);
      max-width: 694px;
      position: sticky;
      top: 0;
   }

   #about .block .photo_pc figure {
      grid-area: 1/1;
      opacity: 0;
      transition: opacity 0.3s;
   }

   #about .block .photo_pc figure:first-child {
      opacity: 1;
   }

   #about .block .photo_pc figure.active {
      opacity: 1;
   }

   #about .block .col {
      width: 436px;
   }

   #about .block .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 494px;
      position: relative;
   }

   #about .block .item+.item {
      padding-top: 125px;
   }

   #about .block .item+.item:after {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: #ab6116;
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
   }

   #about .block .item h3:before {
      display: none;
   }

   #about .block .item h3 span {
      font-size: 14px;
      padding: 10px 0 0;
   }

   #about .block .item .txt {
      width: 330px;
      margin: 0 auto;
      padding-top: 48px;
   }

   #about .block .button {
      text-align: center;
      position: relative;
      top: -20px;
   }
}

/* -- -- */
#course {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #course .wrap {
      width: 88vw;
      border-top: 1px solid #c6c6c6;
      padding: 20vw 0 0;
   }

   #course .col {
      padding-top: 16vw;
   }

   #course .txt,
   #course .button {
      padding-top: 16vw;
   }
}

@media only screen and (min-width: 768px) {
   #course {
      padding-bottom: 173px;
   }

   #course .wrap {
      display: flex;
      gap: 120px;
      border-top: 1px solid #c6c6c6;
      padding-top: 110px;
   }

   #course figure {
      width: calc(100% - 460px);
      max-width: 791px;
   }

   #course .col {
      width: 340px;
      padding-top: 20px;
   }

   #course h2:before {
      margin-bottom: 12px;
   }

   #course h2 span {
      padding-bottom: 24px;
   }

   #course .txt {
      padding-top: 46px;
   }

   #course .button {
      padding-top: 65px;
   }
}

/* -- -- */
#menu {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #menu {
      padding-bottom: 26vw;
   }

   #menu .col {
      padding-top: 26vw;
   }

   #menu h3 {
      padding-top: 12vw;
   }

   #menu .txt,
   #menu .button {
      padding-top: 12vw;
   }
}

@media only screen and (min-width: 768px) {
   #menu {
      padding-bottom: 156px;
   }

   #menu .wrap {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 80px;
   }

   #menu h3 {
      padding: 67px 0 0;
   }

   #menu h3:before {
      margin-bottom: 13px;
   }

   #menu h3 span {
      padding-bottom: 25px;
   }

   #menu .txt {
      padding-top: 33px;
   }

   #menu .button {
      padding-top: 58px;
   }
}

/* -- -- */
#floor {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #floor {
      padding-bottom: 26vw;
   }

   #floor .txt,
   #floor .button {
      padding-top: 12vw;
   }

   #floor figure {
      padding-top: 10vw;
   }
}

@media only screen and (min-width: 768px) {
   #floor {
      padding-bottom: 180px;
   }

   #floor .wrap {
      display: flex;
      gap: 20px;
      border-top: 1px solid #c6c6c6;
      padding: 125px 0 0 30px;
   }

   #floor .wrap figure {
      max-width: 508px;
   }

   #floor h2 {
      width: 50px;
      height: 320px;
      padding-top: 20px;
   }

   #floor h2:before {
      margin-bottom: 23px;
   }

   #floor h2 span {
      width: 50px;
      height: 110px;
      text-align: left;
      padding-bottom: 0;
      position: relative;
      left: -4px;
   }

   #floor .col {
      flex: 1 0 0;
      padding: 57px 0 0 95px;
   }

   #floor .txt {
      width: 505px;
   }

   #floor .button {
      padding-top: 54px;
   }

   #floor .photo {
      display: flex;
      justify-content: flex-end;
      gap: 0 7.5%;
      position: relative;
      padding-top: 66px;
   }

   #floor .photo img {
      width: 100%;
      max-width: inherit;
   }

   #floor .photo figure:nth-child(1) {
      width: 62.8%;
   }

   #floor .photo figure:nth-child(2) {
      width: 23.2%;
      padding-top: 208px;
   }
}

/* -- -- */
#shopinfo {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #shopinfo .bg-parallax {
      min-height: 60vw;
   }

   #shopinfo .wrap {
      padding-top: 20vw;
      padding-bottom: 20vw;
   }

   #shopinfo .logo {
      width: 50vw;
      margin: 0 auto;
   }

   #shopinfo .tel {
      font-weight: 400;
      font-size: 4vw;
      letter-spacing: 0.1em;
      line-height: 1.5;
      padding-top: 12vw;
   }

   #shopinfo .tel span {
      display: inline-block;
      background: url("../img/shared/icon-tel.png") no-repeat center left/4vw auto;
      font-weight: 400;
      font-size: 8vw;
      letter-spacing: 0.05em;
      padding-left: 5vw;
   }

   #shopinfo .tel small {
      font-weight: 300;
      font-size: 3.2vw;
      letter-spacing: 0.05em;
   }

   #shopinfo .btn-reserve {
      padding-top: 6.4vw;
   }

   #shopinfo .btn-reserve a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 6vw;
      width: 85vw;
      height: 20vw;
      background-color: #ab6116;
      color: #fff;
      font-weight: 300;
      font-size: 4vw;
      letter-spacing: 0.2em;
      line-height: 1;
   }

   #shopinfo .btn-reserve a:before {
      content: '';
      display: block;
      width: 5.6vw;
      height: 5.6vw;
      background: url("../img/shared/icon-web.png") no-repeat center top/cover;
   }

   #shopinfo .desc {
      font-weight: 300;
      font-size: 14px;
      line-height: 30px;
      margin-top: 10vw;
      border-left: 1px solid #c6c6c6;
      border-right: 1px solid #c6c6c6;
   }

   #shopinfo .sns-icon {
      width: 8vw;
      margin: 0 auto;
      padding-top: 12vw;
   }

   #shopinfo .txt-info {
      font-size: 14px;
      line-height: 25px;
      letter-spacing: 0.15em;
      padding-top: 10vw;
   }

   #shopinfo .txt-info dl {
      position: relative;
      padding-bottom: 15px;
   }

   #shopinfo .txt-info dl+dl {
      padding-top: 15px;
   }

   #shopinfo .txt-info dl:before {
      content: '';
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #a8723b 24vw, #a1a1a1 24vw);
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #shopinfo .txt-info dl dd {
      padding: 10px 0 0 4.8vw;
   }
}

@media only screen and (min-width: 768px) {
   #shopinfo {
      padding-bottom: 100px;
   }

   #shopinfo .bg-parallax {
      background-image: url("../img/index/shopinfo-bg-img.jpg");
      min-height: 700px;
   }

   #shopinfo .wrap {
      padding-top: 117px;
   }

   #shopinfo .logo {
      width: 285px;
      margin: 0 auto;
   }

   #shopinfo .tel {
      font-size: 16px;
      line-height: 38px;
      letter-spacing: 0.1em;
      padding-top: 43px;
   }

   #shopinfo .tel span {
      display: inline-block;
      background: url("../img/shared/icon-tel.png") no-repeat center left/15px auto;
      font-weight: 400;
      font-size: 30px;
      letter-spacing: 0.05em;
      padding-left: 20px;
   }

   #shopinfo .tel small {
      font-weight: 300;
      font-size: 12px;
      letter-spacing: 0.1em;
   }

   #shopinfo .btn-reserve {
      padding-top: 18px;
   }

   #shopinfo .btn-reserve a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      width: 330px;
      height: 70px;
      background-color: #ab6116;
      color: #fff;
      font-size: 16px;
      letter-spacing: 0.05em;
      line-height: 20px;
   }

   #shopinfo .btn-reserve a:before {
      content: '';
      display: block;
      width: 18px;
      height: 18px;
      background: url("../img/shared/icon-web.png") no-repeat center/100% auto;
   }

   #shopinfo .desc {
      display: inline-block;
      line-height: 30px;
      border-right: 1px solid #c6c6c6;
      border-left: 1px solid #c6c6c6;
      margin-top: 38px;
      padding: 0 20px;
   }

   #shopinfo .sns-icon {
      width: 31px;
      margin: 0 auto;
      padding-top: 84px;
   }

   #shopinfo .txt-info {
      width: 700px;
      line-height: 30px;
      margin: 0 auto;
      padding-top: 80px;
   }

   #shopinfo .txt-info dl {
      display: grid;
      grid-template-columns: 196px auto;
      position: relative;
   }

   #shopinfo .txt-info dl:before {
      content: '';
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, #a8723b 196px, #a1a1a1 196px);
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #shopinfo .txt-info dl dt {
      padding: 0 0 10px 32px;
   }

   #shopinfo .txt-info dl dd {
      padding: 0 0 10px 12px;
   }

   #shopinfo .txt-info dl dd a[href*="maps"] i {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 10px;
      height: 14px;
      background: url("../img/shared/icon-location.png") no-repeat center/100% auto;
      margin-right: 5px;
      position: relative;
      top: -2px;
   }

   #shopinfo .txt-info dl dd a[href*="maps"]:hover span {
      text-decoration: underline;
   }

   #shopinfo .txt-info dl+dl dt,
   #shopinfo .txt-info dl+dl dd {
      padding-top: 20px;
   }

   #shopinfo .txt-info dl.cancel {
      grid-template-columns: 1fr;
   }

   #shopinfo .txt-info dl.cancel dd {
      padding: 4px 0 26px 50px;
   }
}

/* -- -- */
#gmap {
   position: relative;
}

.gmap {
   width: 100%;
   height: 300px;
   position: relative;
}

.gmap iframe {
   display: block;
   width: 100%;
   height: 100%;
}

@media only screen and (max-width: 767px) {
   #gmap {
      padding-bottom: 26vw;
   }

   #gmap h2 {
      font-weight: 400;
      font-size: 5.3vw;
      line-height: 1;
      letter-spacing: 0.05em;
   }

   #gmap .gmap {
      margin-top: 6.4vw;
   }

   #gmap .gmap_btn {
      padding-top: 10vw;
   }

   #gmap .button a {
      gap: 5.6vw;
   }

   #gmap .button a:after {
      display: none;
   }

   #gmap .button a i {
      display: block;
      width: 4vw;
      height: 5vw;
      background: url("../img/shared/ft-icon3.png") no-repeat center/100% auto;
   }
}

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

   #gmap .wrap {
      width: 700px;
   }

   #gmap h2 {
      font-size: 24px;
      line-height: 30px;
      letter-spacing: 0.05em;
      padding-bottom: 27px;
   }

   #gmap .gmap {
      height: 450px;
   }

   #gmap .gmap_btn {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 45px;
      width: 320px;
      margin: 0 auto;
      padding-top: 60px;
      font-weight: 300;
   }

   #gmap .gmap_btn .button a {
      gap: 25px;
   }

   #gmap .gmap_btn .button a:after {
      display: none;
   }

   #gmap .gmap_btn .button a i {
      display: block;
      width: 14px;
      height: 18px;
      background: url("../img/shared/icon-location.png") no-repeat center top/cover;
   }

   #gmap .gmap_btn .gmap_print a {
      display: inline-block;
      background: url("../img/shared/icon-blank.png") no-repeat center right/15px auto;
      padding-right: 30px;
   }

   #gmap .gmap_btn li:not(.button) a:hover {
      text-decoration: underline;
   }
}

#news {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #news {
      padding-bottom: 20vw;
   }

   #news .feed {
      line-height: 30px;
      padding-top: 11vw;
      padding-bottom: 5vw;
      border-bottom: 1px dotted #a8723b;
   }

   #news .feed time {
      display: block;
      color: #92705c;
      font-size: 13px;
   }

   #news .feed .ttl {
      display: block;
      background: url("../img/shared/arrow-right.png") no-repeat center right/4.8vw auto;
      padding-right: 6vw;
   }

   #news .feed .ttl span {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
   }
}

@media only screen and (min-width: 768px) {
   #news {
      padding-bottom: 208px;
   }

   #news .wrap {
      display: flex;
      align-items: flex-start;
   }

   #news h2 {
      flex: 1 0 0;
      line-height: 41px;
      padding-left: 43px;
   }

   #news h2:before {
      position: absolute;
      top: 15px;
      left: 5px;
      margin-bottom: 0;
   }

   #news h2 span {
      padding-bottom: 0;
   }

   #news .feed {
      display: grid;
      grid-template-columns: 90px auto;
      gap: 20px;
      width: 650px;
      font-size: 16px;
      line-height: 30px;
      border-bottom: 2px dotted #a8723b;
      box-sizing: border-box;
      padding: 27px 0 25px 13px;
   }

   #news .feed time {
      color: #a8723b;
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.1em;
   }

   #news .feed .ttl {
      background: url("../img/shared/arrow-right.png") no-repeat center right 30px/18px auto;
      padding-right: 60px;
   }

   #news .feed .ttl span {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
   }

   #news .feed .ttl:hover {
      text-decoration: underline;
   }
}