#key {
   background: url("../img/course/key.jpg") no-repeat center/cover;
}

#lead {
   position: relative;
}

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

   #lead h2 {
      font-size: 6.6vw;
      padding-top: 8vw;
   }

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

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

   #lead figure {
      width: 616px;
      position: absolute;
      top: 0;
      right: -100px;
   }

   #lead h2 {
      letter-spacing: 0.2em;
      padding-top: 120px;
   }

   #lead .txt {
      width: 410px;
      padding-top: 85px;
   }
}

#reco {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #reco .row-1 .price {
      font-size: 4vw;
      line-height: 1.5;
      padding: 2vw 0 8vw;
   }

   #reco .row-1 .price span {
      font-size: 5.6vw;
   }

   #reco .row-1 hr {
      border: 0;
      border-top: 1px solid #858583;
   }

   #reco .row-1 .note {
      font-size: 12px;
      letter-spacing: 0.2em;
      line-height: 25px;
      padding-top: 8vw;
   }

   #reco .row-1 .photo-1 {
      width: 40%;
      margin-left: auto;
      padding-top: 12vw;
      position: relative;
      z-index: 1;
   }

   #reco .row-1 .photo-2 {
      width: 80%;
      margin-top: -20vw;
   }

   #reco .row-1 h3 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5vw;
      padding: 20vw 0 8vw;
   }

   #reco .row-1 h3 .ja {
      width: 13.2vw;
      height: 40vw;
      font-size: 6.6vw;
      line-height: 2;
      letter-spacing: 0.3em;
   }

   #reco .row-1 h3 .en {
      font-weight: 300;
      font-size: 3.2vw;
      letter-spacing: 0.5em;
      position: relative;
   }

   #reco .row-2 {
      display: flex;
      flex-direction: column-reverse;
      gap: 6vw;
      padding-bottom: 20vw;
   }

   #reco .row-2 .photo {
      display: flex;
      flex-direction: column-reverse;
      gap: 6vw;
   }

   #reco .row-2 .txt {
      padding: 0 8.6vw;
   }
}

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

   #reco .row-1 {
      padding-bottom: 552px;
   }

   #reco .row-1 .price {
      padding-top: 17px;
   }

   #reco .row-1 .price span {
      font-size: 20px;
   }

   #reco .row-1 hr {
      width: 500px;
      border: 0;
      border-top: 1px solid #858583;
      margin: 34px auto 0;
   }

   #reco .row-1 .note {
      line-height: 30px;
      padding-top: 43px;
   }

   #reco .row-1 .photo-1 {
      width: 334px;
      position: absolute;
      top: 220px;
      right: -216px;
   }

   #reco .row-1 .photo-2 {
      width: 678px;
      position: absolute;
      top: 516px;
      left: -180px;
   }

   #reco .row-1 h3 {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 37px;
      padding: 702px 33px 0 0;
   }

   #reco .row-1 h3 .ja {
      width: 40px;
      height: 180px;
      font-size: 34px;
      line-height: 40px;
      letter-spacing: 0.3em;
   }

   #reco .row-1 h3 .en {
      font-weight: 300;
      font-size: 14px;
      letter-spacing: 0.5em;
      position: relative;
      top: -10px;
   }

   #reco .row-2 {
      display: grid;
      grid-template-columns: 420px 1fr;
      justify-content: flex-end;
      align-items: flex-start;
      gap: 45px;
      max-width: 1410px;
      margin: 0 auto;
      padding: 0 45px 110px;
      position: relative;
   }

   #reco .row-2 .txt {
      position: sticky;
      top: 50px;
      padding-top: 82px;
   }

   #reco .row-2 .photo figure:not(:last-child) {
      padding-bottom: 110px;
   }
}

@media only screen and (min-width: 1500px) {
   #reco .row-2 {
      grid-template-columns: 420px 760px;
      gap: 125px;
   }
}

#oneday {
   position: relative;
}

#oneday .slider-for .slick-arrow {
   top: 50%;
   transform: translateY(-50%);
}

#oneday .slider-for .slick-prev {
   background-image: url("../img/course/slider-prev.png");
}

#oneday .slider-for .slick-next {
   background-image: url("../img/course/slider-next.png");
}

#oneday .slider-nav figure {
   cursor: pointer;
}

#oneday .slider-nav figure img {
   filter: grayscale(100%);
   transition: all 0.3s;
}

#oneday .slider-nav .slick-current img {
   filter: grayscale(0);
}

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

   #oneday .wrap {
      padding: 0;
   }

   #oneday h2 {
      font-size: 6vw;
   }

   #oneday .block {
      padding-top: 8vw;
   }

   #oneday .slider-for {
      padding: 0 8vw;
   }

   #oneday .slider-for .slick-arrow {
      width: 12vw;
      height: 12vw;
   }

   #oneday .slider-for .slick-prev {
      left: 2vw;
   }

   #oneday .slider-for .slick-next {
      right: 2vw;
   }

   #oneday .slider-nav {
      padding: 2vw 2vw 0;
   }

   #oneday .slider-nav .slick-list {
      margin: 0 -1vw;
      padding: 0 !important;
   }

   #oneday .slider-nav figure {
      height: 25vw;
      margin: 0 1vw;
   }
}

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

   #oneday h2 {
      line-height: 52px;
   }

   #oneday .block {
      padding-top: 110px;
   }

   #oneday .slider-for {
      padding: 0 100px;
   }

   #oneday .slider-for .slick-arrow {
      width: 67px;
      height: 67px;
   }

   #oneday .slider-for .slick-prev {
      left: 6px;
   }

   #oneday .slider-for .slick-next {
      right: 6px;
   }

   #oneday .slider-nav {
      padding: 55px 35px 0;
   }

   #oneday .slider-nav .slick-list {
      margin: 0 -5px;
      padding: 0 !important;
   }

   #oneday .slider-nav figure {
      height: 155px;
      margin: 0 5px;
   }

   #oneday .slider-nav figure:hover img {
      filter: grayscale(0);
   }
}

#reserve {
   position: relative;
}

#reserve .caution {
   background-color: #e0ded5;
}
#reserve .caution h2 .en {
   letter-spacing: 5px
   }
@media only screen and (max-width: 767px) {
   #reserve .row {
      padding-bottom: 20vw;
   }

   #reserve .row .wrap {
      width: 90vw;
      padding: 2vw 5vw 5vw;
   }

   #reserve .row .wrap:before {
      content: '';
      width: 3vw;
      height: 100%;
      border: 1px solid #948a74;
      border-right: 0;
      position: absolute;
      top: 0;
      left: 0;
   }

   #reserve .row .wrap:after {
      content: '';
      width: 3vw;
      height: 100%;
      border: 1px solid #948a74;
      border-left: 0;
      position: absolute;
      top: 0;
      right: 0;
   }

   #reserve .row .tel .number {
      margin-top: 0;
   }

   #reserve .row .btn-reserve {
      padding-top: 6vw;
   }

   #reserve .row .btn-reserve a {
      width: 60vw;
      height: 15vw;
   }

   #reserve .caution {
      padding: 20vw 0;
   }

   #reserve .caution h2 {
      text-align: center;
      padding-bottom: 8vw;
   }

   #reserve .caution .col {
      border-top: 1px solid #a2a29a;
      position: relative;
      padding-top: 8vw;
   }

   #reserve .caution .col ul {
      letter-spacing: 0.15em;
      padding-bottom: 25px;
   }

   #reserve .caution .col ul li {
      text-indent: -18px;
      padding-left: 18px;
   }

   #reserve .caution .col p {
      letter-spacing: 0.1em;
      border: 1px solid #a2a29a;
      padding: 2vw 4vw;
      text-align: center;
   }
}

@media only screen and (min-width: 768px) {
   #reserve .row {
      padding-bottom: 170px;
   }

   #reserve .row .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px 30px;
      width: 875px;
      padding: 40px 0 69px;
   }

   #reserve .row .wrap:before {
      content: '';
      width: 15px;
      height: 100%;
      border: 1px solid #948a74;
      border-right: 0;
      position: absolute;
      top: 0;
      left: 0;
   }

   #reserve .row .wrap:after {
      content: '';
      width: 15px;
      height: 100%;
      border: 1px solid #948a74;
      border-left: 0;
      position: absolute;
      top: 0;
      right: 0;
   }

   #reserve .row h3 {
      width: 100%;
      font-size: 16px;
   }

   #reserve .row .tel .number {
      background-image: url("../img/shared/icon-tel-black.png");
      background-size: 16px auto;
      font-size: 34px;
      line-height: 40px;
      padding-left: 25px;
   }

   #reserve .row .btn-reserve a {
      gap: 22px;
      width: 216px;
      height: 58px;
      border-color: #a2a29a;
      font-weight: 400;
      font-size: 20px;
      letter-spacing: 0.025em;
   }

   #reserve .row .btn-reserve a:after {
      width: 23px;
      height: 21px;
   }

   #reserve .row .btn-reserve a:hover:after {
      background-image: url("../img/shared/icon-calendar-white.png");
   }

   #reserve .caution {
      padding: 173px 0 158px;
   }

   #reserve .caution .wrap {
      display: grid;
      grid-template-columns: 300px 1fr;
   }

   #reserve .caution h2 {
      line-height: 50px;
   }

   #reserve .caution h2 .en {
      display: inline-block;
      padding: 40px 0 0 7px;
      line-height:200%;
   }

   #reserve .caution .col {
      padding: 14px 0 25px 54px;
      position: relative;
   }

   #reserve .caution .col:before {
      content: '';
      border-left: 1px solid #a2a29a;
      position: absolute;
      top: 20px;
      bottom: 0;
      left: 0;
   }

   #reserve .caution .col ul {
      letter-spacing: 0.15em;
      padding-bottom: 25px;
   }

   #reserve .caution .col ul li {
      text-indent: -20px;
      padding-left: 20px;
   }

   #reserve .caution .col p {
      display: inline-block;
      border: 1px solid #a2a29a;
      margin-left: 10px;
      padding: 0 27px;
      letter-spacing: 0.28em;
      line-height: 45px;
   }
}

@media only screen and (min-width: 1241px) {
   #reserve .caution .wrap {
      grid-template-columns: 414px 1fr;
   }
}

#drink {
   position: relative;
}

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

   #drink h2 {
      text-align: center;
   }

   #drink .box-1 figure {
      padding-top: 8vw;
   }

   #drink .box-1 .txt {
      padding-top: 6vw;
   }

   #drink .box-2 {
      padding-top: 20vw;
   }

   #drink .box-2 h3 {
      width: 48vw;
      height: 70vw;
      line-height: 2.5;
      margin: 0 auto;
   }

   #drink .box-2 .txt {
      padding-top: 6vw;
   }
}

@media only screen and (min-width: 768px) {
   #drink {
      padding: 240px 0 280px;
   }

   #drink h2 {
      width: 120px;
      height: 426px;
      margin: 0 auto;
   }

   #drink .box-1 {
      position: relative;
   }

   #drink .box-1 .photo-1 {
      width: 595px;
      margin-left: auto;
      position: relative;
      left: 24px;
   }

   #drink .box-1 .photo-2 {
      width: 618px;
      position: absolute;
      bottom: 0;
      left: -117px;
   }

   #drink .box-1 .txt {
      width: 390px;
      margin-left: auto;
      padding: 625px 0 55px;
   }

   #drink .box-2 {
      margin-top: 170px;
      padding-bottom: 62px;
      position: relative;
   }

   #drink .box-2 h3 {
      width: 180px;
      height: 220px;
      padding-top: 87px;
      position: relative;
      left: -20px;
   }

   #drink .box-2 figure {
      width: 545px;
      position: absolute;
      top: 0;
      right: -48px;
   }

   #drink .box-2 .txt {
      width: 380px;
      padding-top: 200px;
   }
}