@media only screen and (min-width: 768px) {
   main {
      background: url("../img/index/deco.png") no-repeat top left;
   }
}

@media only screen and (max-width: 767px) {
   #key {
      display: flex;
      flex-direction: column-reverse;
   }

   #key:before {
      content: '';
      width: 6.6vw;
      height: 110vw;
      background-color: #a8998b;
      position: absolute;
      top: 80vw;
      right: 0;
   }

   #key .photo-left {
      width: 41.6vw;
      padding: 8vw 0 0 4vw;
   }

   #key .photo-right {
      width: 100vw;
   }

   #key .photo-right figure {
      height: 80vw;
   }
}

@media only screen and (min-width: 768px) {
   #key {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      gap: 70px;
      padding-top: 46px;
   }

   #key:before {
      content: '';
      width: 100px;
      height: 1240px;
      background-color: #a8998b;
      position: absolute;
      top: 860px;
      right: 0;
   }

   #key .photo-left {
      width: 390px;
      position: relative;
      top: 23px;
   }

   #key .photo-right {
      width: calc(55% + 180px);
      padding-bottom: 163px;
   }

   #key .photo-right figure {
      height: 820px;
   }
}

#sec1 {
   position: relative;
}

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

   #sec1 h2 {
      display: flex;
      flex-direction: column;
      width: 40.8vw;
      height: 70vw;
      margin-top: -22vw;
      margin-left: auto;
      padding: 0 8vw;
   }

   #sec1 h2 .sub {
      font-size: 2.6vw;
      letter-spacing: 0.1em;
      padding-bottom: 3vw;
   }

   #sec1 .txt {
      padding-top: 20vw;
   }

   #sec1 figure {
      padding: 12vw 4vw 0;
   }
}

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

   #sec1 h2 {
      display: flex;
      flex-direction: column;
      width: 234px;
      height: 400px;
      line-height: 78px;
      margin-left: auto;
      position: relative;
      left: 14px;
   }

   #sec1 h2 .sub {
      font-size: 13px;
      letter-spacing: 0.1em;
   }

   #sec1 .txt {
      width: 643px;
      padding-top: 54px;
   }

   #sec1 figure {
      padding: 80px 20px 0 0;
   }
}

#sec2 {
   position: relative;
}

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

   #sec2 .photos {
      margin: 0 -2.8vw;
      position: relative;
   }

   #sec2 .photos:before {
      content: '';
      width: 6.6vw;
      height: 47.5vw;
      background: url("../img/index/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      top: 30vw;
      left: 3.2vw;
   }

   #sec2 .photos figure {
      width: 74.7vw;
   }

   #sec2 .photos figure:last-child {
      margin-left: auto;
      padding-top: 2.8vw;
   }

   #sec2 h2 {
      padding-top: 8vw;
   }

   #sec2 h2 span {
      padding-left: 10vw;
   }

   #sec2 .txt {
      padding-top: 4vw;
   }

   #sec2 .button {
      padding-top: 12vw;
   }
}

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

   #sec2 .wrap {
      display: flex;
      justify-content: space-between;
   }

   #sec2 .col {
      width: 450px;
      padding-top: 67px;
      order: 1;
   }

   #sec2 h2 span {
      padding-left: 44px;
   }

   #sec2 .txt {
      padding-top: 40px;
   }

   #sec2 .button {
      padding-top: 47px;
   }

   #sec2 .photos {
      width: 650px;
      position: relative;
      order: 2;
      margin-right: -150px;
   }

   #sec2 .photos:before {
      content: '';
      width: 50px;
      height: 356px;
      background: url("../img/index/sec2-deco.png") no-repeat center top/cover;
      position: absolute;
      bottom: -220px;
      right: -22px;
   }

   #sec2 .photos figure:last-child {
      padding: 20px 0 0 90px;
   }
}

@media only screen and (min-width: 1241px) {
   #sec2 .photos {
      margin-right: -40px;
   }

   #sec2 .col {
      width: 512px;
      padding-left: 22px;
   }
}

#sec3 {
   position: relative;
}

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

   #sec3:before {
      content: '';
      width: 6.6vw;
      height: 137.2vw;
      background-color: #cabeb3;
      position: absolute;
      top: 0;
      right: 0;
   }

   #sec3 .wrap {
      padding: 0 4vw;
   }

   #sec3 .deco {
      width: 60vw;
      padding-bottom: 3.2vw;
   }

   #sec3 .photos {
      display: flex;
      flex-wrap: wrap;
      gap: 1vw;
      position: relative;
   }

   #sec3 .photo-1 {
      height: 100%;
   }

   #sec3 .photo-2 {
      width: calc(50% + 2vw);
   }

   #sec3 .photo-3 {
      width: calc(50% - 3vw);
      height: 20vw;
   }

   #sec3 .photo-4 {
      width: calc(50% - 3vw);
      height: 20vw;
      position: absolute;
      right: 0;
      bottom: 0;
   }

   #sec3 .col {
      padding: 10vw 5.2vw 0;
   }

   #sec3 .txt,
   #sec3 .button {
      padding-top: 8vw;
   }

   #sec3 .button li+li {
      padding-top: 6.8vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding: 140px 0 116px;
   }

   #sec3:before {
      content: '';
      width: calc(50% - 450px);
      height: 100%;
      background-color: #cabeb3;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec3 .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 118px 40px;
      width: 100%;
   }

   #sec3 .deco {
      width: 432px;
      position: absolute;
      top: 0;
      left: calc(50% + 138px);
   }

   #sec3 .photos {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      width: calc(100% - 505px);
      position: relative;
      padding-top: 55px;
   }

   #sec3 .photo-1 {
      width: 100%;
      height: 480px;
   }

   #sec3 .photo-2 {
      width: calc(50% + 28px);
      height: 420px;
   }

   #sec3 .photo-3 {
      width: calc(50% - 32px);
      height: 208px;
   }

   #sec3 .photo-4 {
      width: calc(50% - 32px);
      height: 208px;
      position: absolute;
      right: 0;
      bottom: 0;
   }

   #sec3 .col {
      width: 425px;
   }

   #sec3 h2 {
      width: 156px;
      height: 532px;
      line-height: 78px;
      margin: 0 auto;
      padding-top: 190px;
   }

   #sec3 .button {
      display: flex;
      justify-content: center;
      gap: 67px;
      width: 100%;
   }
}

@media only screen and (min-width: 1440px) {
   #sec3 .wrap {
      gap: 118px 80px;
   }

   #sec3 .photos {
      width: calc(50% + 175px);
   }
}

#sec4 {
   position: relative;
}

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

   #sec4:before {
      content: '';
      width: 6.6vw;
      height: 137.2vw;
      background-color: #a8998b;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 h2 {
      text-align: right;
      position: relative;
      left: 4.2vw;
   }

   #sec4 h2 span {
      padding-right: 4vw;
   }

   #sec4 .deco {
      width: 10vw;
      position: absolute;
      top: 108vw;
      right: 3.6vw;
   }

   #sec4 .photo-1 {
      margin: 6vw -2.8vw 0;
   }

   #sec4 .photo-2 {
      width: 53.3vw;
      padding: 8vw 0 0 2.8vw;
   }

   #sec4 .txt {
      padding-top: 8vw;
   }

   #sec4 .button {
      padding-top: 10vw;
   }
}

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

   #sec4:before {
      content: '';
      width: calc(50% - 500px);
      background-color: #a8998b;
      position: absolute;
      top: 90px;
      right: 0;
      bottom: 0;
   }

   #sec4 .deco {
      width: 636px;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 h2 {
      padding: 202px 0 568px;
      position: relative;
      left: 0;
      z-index: 1;
   }

   #sec4 h2 span {
      padding-left: 17px;
   }

   #sec4 .photo-1 {
      width: 1000px;
      position: absolute;
      top: 63px;
      right: -250px;
   }

   #sec4 .photo-2 {
      width: 400px;
      position: absolute;
      top: 537px;
      left: -170px;
   }

   #sec4 .txt {
      width: 600px;
      padding-left: 317px;
   }

   #sec4 .button {
      text-align: right;
      padding: 56px 82px 0 0;
   }
}

@media only screen and (min-width: 1201px) {
   #sec4 .deco {
      left: -57px;
   }

   #sec4 h2 {
      left: -70px;
   }

   #sec4 .photo-1 {
      right: -250px;
   }
   #sec4 .photo-2 {
      left: -250px;
   }
}

#rss {
   position: relative;
}

#rss .title {
   display: flex;
   justify-content: space-between;
}

#rss .feed figure span {
   display: block;
   width: 100% !important;
   height: auto !important;
   padding-top: 70%;
   background-color: #000;
}

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

   #rss .sns-icon {
      padding-bottom: 6.6vw;
   }

   #rss .sns-icon a {
      display: flex;
      align-items: center;
      gap: 2vw;
      width: max-content;
      font-size: 4vw;
      letter-spacing: 0.05em;
      line-height: 1;
      margin-left: auto;
   }

   #rss .sns-icon a img {
      max-width: 8.5vw;
   }

   #rss h2 {
      width: 100%;
      font-weight: 400;
      font-size: 4.4vw;
      letter-spacing: 0.1em;
      line-height: 1.5;
   }

   #rss .feed {
      display: flex;
      flex-wrap: wrap;
      gap: 4vw 0;
      background: url("../img/index/rss-border.png") repeat-x top left, url("../img/index/rss-border.png") repeat-x bottom left;
      padding: 6vw 0;
      font-size: 13px;
      line-height: 25px;
   }

   #rss .feed .item {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      gap: 4vw;
      width: 100%;
   }

   #rss .feed p {
   }

   #rss .feed a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
   }

   #rss .viewall {
      text-align: right;
      font-size: 13px;
      line-height: 25px;
      padding-top: 6vw;
   }

   #rss .viewall a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
   }

   #rss .viewall a:after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 3px 0 3px 5px;
      border-color: transparent transparent transparent #392717;
      display: block;
   }
}

@media only screen and (min-width: 768px) {
   #rss {
      padding: 112px 0 137px;
   }

   #rss .wrap {
      width: 860px;
   }

   #rss .title {
      padding-bottom: 15px;
   }

   #rss .sns-icon a {
      display: flex;
      align-items: center;
      gap: 10px;
      width: max-content;
      letter-spacing: 0.05em;
      margin-left: auto;
   }

   #rss .sns-icon a img {
      max-width: 34px;
   }

   #rss h2 {
      font-weight: 400;
      font-size: 22px;
      letter-spacing: 0.1em;
   }

   #rss .feed {
      display: grid;
      grid-template-columns: repeat(3, 200px);
      gap: 100px;
      background: url("../img/index/rss-border.png") repeat-x top left, url("../img/index/rss-border.png") repeat-x bottom left;
      padding: 50px 30px;
   }

   #rss .feed p {
      font-size: 14px;
      line-height: 30px;
      letter-spacing: 0.1em;
      padding-top: 20px;
   }

   #rss .feed a {
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      overflow: hidden;
   }

   #rss .feed a:hover {
      text-decoration: underline;
   }

   #rss .viewall {
      text-align: right;
      font-size: 14px;
      padding-top: 4px;
   }

   #rss .viewall a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
   }

   #rss .viewall a:after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 3px 0 3px 5px;
      border-color: transparent transparent transparent #392717;
      display: block;
   }
}

#sec5 {
   position: relative;
}

#sec5:before {
   content: '';
   width: 100%;
   background: linear-gradient(to bottom, #d7d5c9, transparent);
   position: absolute;
   top: 0;
   left: 0;
}

#sec5 .cancel {
   border: 1px solid #17181c;
}

#sec5 .btn-reserve a {
   margin: 0 auto;
}

#sec5 .txt-info dl {
   display: grid;
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

.gmap {
   width: 100%;
   position: relative;
}

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

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

   #sec5:before {
      height: 100vw;
   }

   #sec5 .logo {
      width: 31.2vw;
      margin: 0 auto;
   }

   #sec5 .tel {
      padding-top: 8vw;
   }

   #sec5 .tel small {
      font-size: 12px;
      letter-spacing: 0;
   }

   #sec5 .btn-reserve {
      padding: 6vw 0 13vw;
   }

   #sec5 .cancel {
      width: 76vw;
      font-size: 12px;
      line-height: 24px;
      letter-spacing: 0.12em;
      margin: 0 auto;
      padding: 8vw 6.4vw;
      box-sizing: border-box;
   }

   #sec5 .cancel h3 {
      font-size: 15px;
      line-height: 2;
   }

   #sec5 .cancel p {
      text-align: justify;
      padding-top: 4vw;
   }

   #sec5 .txt-info {
      font-size: 12px;
      line-height: 25px;
      margin: 0 -2.8vw;
      padding-top: 14vw;
   }

   #sec5 .txt-info dl {
      grid-template-columns: 82px 1fr;
      padding-bottom: 15px;
   }

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

   #gmap {
      padding-top: 17vw;
   }

   #gmap .btn-map {
      font-size: 4vw;
      line-height: 1;
      padding-top: 6vw;
   }

   #gmap .btn-map a {
      display: inline-flex;
      align-items: center;
      gap: 4.8vw;
      position: relative;
   }

   #gmap .btn-map a:after {
      content: '';
      border-style: solid;
      border-color: transparent transparent transparent #17181c;
      border-width: 1.2vw 0 1.2vw 2.4vw;
      display: block;
   }

   #gmap figure {
      width: 70.6vw;
      margin: 0 auto;
      padding-top: 10vw;
   }

   .gmap {
      height: 480px;
   }
}

@media only screen and (min-width: 768px) {
   #sec5 {
      padding: 145px 0 90px;
   }

   #sec5:before {
      height: 750px;
   }

   #sec5 h2 {
      line-height: 60px;
   }

   #sec5 h2 span {
      font-size: 16px;
      letter-spacing: 0.1em;
   }

   #sec5 .box-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      font-size: 14px;
      padding: 103px 0 57px;
   }

   #sec5 .box-info .col {
      padding-top: 62px;
   }

   #sec5 .logo {
      width: 124px;
      margin: 0 auto;
   }

   #sec5 .tel {
      font-size: 20px;
      line-height: 35px;
      padding-top: 33px;
   }

   #sec5 .tel .number {
      font-size: 26px;
   }

   #sec5 .tel .number:before {
      font-size: 20px;
   }

   #sec5 .tel small {
      font-size: 13px;
      line-height: 23px;
      letter-spacing: 0.1em;
   }

   #sec5 .btn-reserve {
      padding: 33px 0 65px;
   }

   #sec5 .btn-reserve a {
      width: 294px;
      height: 63px;
      font-size: 20px;
   }

   #sec5 .btn-reserve a:after {
      right: 10px;
   }

   #sec5 .cancel {
      padding: 33px 0;
   }

   #sec5 .cancel h3 {
      font-size: 22px;
      letter-spacing: 0.1em;
   }

   #sec5 .cancel p {
      padding-top: 10px;
   }

   #sec5 .txt-info {
      line-height: 30px;
   }

   #sec5 .txt-info dl {
      grid-template-columns: 100px 1fr;
      padding-bottom: 14px;
   }

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

   #sec5 .txt-info dl dd a:hover {
      text-decoration: underline;
   }

   #gmap {
      display: grid;
      grid-template-columns: 1fr 535px;
   }

   #gmap ul {
      line-height: 37px;
      padding-top: 15px;
   }

   #gmap .btn-map a {
      display: inline-flex;
      align-items: center;
      gap: 13px;
   }

   #gmap .btn-map a:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 4px 0 4px 7px;
      border-color: transparent transparent transparent #392717;
   }

   #gmap .gmap-print {
      font-size: 13px;
   }

   #gmap .gmap-print a {
      text-decoration: underline;
   }

   #gmap .gmap-print a:hover {
      text-decoration: none;
   }

   .gmap {
      height: 430px;
   }
}

@media only screen and (min-width: 1301px) {
   #sec5 .box-info {
      font-size: 16px;
      margin: 0 -20px;
   }

   #sec5 .box-info .col {
      padding-right: 50px;
   }

   #sec5 .txt-info dl {
      grid-template-columns: 127px 1fr;
   }

   #sec5 .cancel {
      margin: 0 -10px;
   }
}