/* =========================================================
   hotel Giraffe Nakasu - main.css (index.php 専用)
   ========================================================= */

.info-more { text-align: right; max-width: 820px; margin: 18px auto 0; font-size: 12px; }
.info-more a { color: var(--color-navy); border-bottom: 1px solid var(--color-navy); padding-bottom: 2px; }

/* ---------------------------------------------------------
   Tourist / access map
   --------------------------------------------------------- */
.access-table { max-width: 820px; margin: 32px auto 0; border-top: 1px solid var(--color-border); }
.access-table .row { display: flex; border-bottom: 1px solid var(--color-border); }
.access-table .row .th { width: 140px; padding: 16px; font-size: 12px; color: var(--color-text-soft); background: var(--color-beige); flex-shrink: 0; }
.access-table .row .td { padding: 16px; font-size: 13px; }

#top h2 {
   color: var(--color-gold);
   font-size: 46px;
   line-height: 1.04;
   letter-spacing: 0.125em;
   font-family: var(--font-serif);
   margin-bottom: 10px;
   line-height: 1;
}
#top .label {
   display: block;
   color: var(--color-gold);
   font-family: var(--font-serif);
   font-size: 10px;
   line-height: 1;
}
#top .top-heading {
   text-align: center;
}
#top .top-heading h3 {
   font-size: 40px;
   margin-bottom: 65px;
}
#top .top-heading p {
   font-size: 15px;
   line-height: 1.5;
}

#top-rooms .label,
#top-gallery .label,
#top-information .label,
#top-access .label {
   margin-bottom: 70px;
}
#top-rooms .top-heading,
#top-gallery .top-heading,
#top-information .top-heading {
   margin-bottom: 70px;
}
#top-rooms .top-heading p,
#top-gallery .top-heading p,
#top-information .top-heading p,
#top-access .top-heading p {
   line-height: 2;
}
@media screen and (max-width: 768px) {
   #top .top-heading h3 {
      font-size: 30px;
   }
}

#top-mv {
   position: relative;
   width: 100%;
   height: 80vh;
   background-image: url("../img/top_mv.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom;
}
#top-mv .txt {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}
#top-mv .txt h1 {
   width: 70%;
   text-align: center;
}
#top-mv .txt h1 img {
   width: 100%;
}
#top-mv .txt p {
   font-family: "Barlow", sans-serif;
   font-size: 10px;
   color: #fff;
}
#top-news {
   background-color: var(--color-gold);
   color: #fff;
   padding: 20px 0;
}
#top-news .container {
   height: 100%;
}
#top-news .flex {
   display: flex;
   align-items: center;
   height: 100%;
}
#top-news h2 {
   padding-right: 30px;
   border-right: 1px solid #fff;
   font-family: var(--font-serif);
   font-size: 16px;
   line-height: 1.5;
   color: #fff;
   margin-bottom: 0;
}
#top-news p {
   padding-left: 30px;
}
#top-news .content {
   font-family: var(--font-serif);
   font-size: 15px;
}
#top-news .date {
   margin-right: 20px;
   font-family: var(--font-serif);
   font-size: 12px;
}
@media screen and (max-width: 768px) {
   #top-news {
      padding: 40px 0;
      height: auto;
   }
   #top-news .flex {
      height: auto;
      margin-bottom: 10px;
   }
   #top-news .content {
      display: none;
   }
   #top-news h2 {
      padding-right: 20px;
      font-size: 16px;
   }
   #top-news p {
      font-size: 15px;
      padding-left: 0;
      margin: 0;
   }
   #top-news .date {
      font-size: 12px;
      margin-right: 0;
   }
   #top-news .sp {
      padding-left: 0;
      font-size: 14px;
      padding: 0;
      margin: 0;
   }
}

#top-about {
   padding: 125px 0 40px 0;
}
#top-about .flex {
   justify-content: space-between;
}
#top-about h3 {
   font-size: 40px;
}
#top-about .label {
   margin-bottom: 70px;
}
#top-about .txt {
   width: 46.5%;
}
#top-about .txt p {
   font-size: 15px;
   margin-bottom: 80px;
}
#top-about .btn {
   width: 265px;
   background-color: var(--color-gold);
   border: none;
   color: #fff;
   font-size: 15px;
}
#top-about .media {
   width: 40%;
}
#top-about .media img {
   width: 100%;
   aspect-ratio: 13 / 20;
}
#top-about .movie {
   margin-top: 60px;
}
#top-about .movie video {
   display: block;
   width: 100%;
   height: auto;
}
@media screen and (max-width: 768px) {
   #top-about .movie {
      margin-top: 50px;
   }
   #top-about {
      padding: 40px 0 55px 0;
   }
   #top-about .flex {
      flex-direction: column-reverse;
   }
   #top-about .txt {
      width: 100%;
   }
   #top-about .txt .label {
      margin-bottom: 65px;
   }
   #top-about .txt h3 {
      margin-bottom: 62px;
   }
   #top-about .txt p {
      margin-bottom: 70px;
      margin-top: 0;
   }
   #top-about .media {
      width: 100%;
      margin-bottom: 50px;
   }
   #top-about .btn {
      width: 200px;
   }
}

#top-rooms {
   padding: 40px 0 50px 0;
}
#top-rooms .btn {
   display: block;
   text-align: center;
   width: 265px;
   margin: 0 auto;
   background-color: var(--color-gold);
   border: none;
   color: #fff;
   font-size: 15px;
}
@media screen and (max-width: 768px) {
   #top-rooms {
      padding: 55px 0 55px 0;
   }
   #top-rooms .label {
      margin-bottom: 55px;
   }
   #top #top-rooms h3 {
      margin-bottom: 50px;
   }
   #top-rooms .btn {
      width: 200px;
   }
}

#top-gallery {
   background-color: #fff;
   padding: 50px 0 60px 0;
}
#top-gallery h2 {
   margin-bottom: 25px;
}
@media screen and (max-width: 768px) {
   #top-gallery {
      padding: 55px 0 60px 0;
   }
   #top-gallery .label {
      margin-bottom: 55px;
   }
   #top #top-gallery h3 {
      margin-bottom: 50px;
   }
   #top #top-gallery p {
      margin: 0;
   }
}

#top-flow {
   padding: 90px 0 125px 0;
   background-color: #fff;
}
#top-flow .flex {
   justify-content: space-between;
}
#top-flow .txt {
   width: 40%;
}
#top-flow .txt .top-heading--float {
   margin-bottom: 90px;
}
#top-flow .media {
   width: 51%
}
#top-flow .media img {
   width: 100%;
   aspect-ratio: 16 / 9;
   object-fit: cover;
}
@media screen and (max-width: 768px) {
   #top-flow {
      padding: 120px 0 200px 0;
   }
   #top-flow .flex {
      flex-direction: column;
      gap: 0;
   }
   #top-flow .txt {
      width: 100%;
      margin-bottom: 60px;
   }
   #top-flow .media {
      width: 100%
   }
   #top-flow .txt .top-heading--float {
      margin-bottom: 70px;
   }
}

#top-information {
   padding: 105px 0 120px 0;
   background-color: #F1F0EE;
}
#top-information .info-list {
   margin-bottom: 80px;
}
#top-information .btn {
   background-color: var(--color-gold);
   border: none;
   width: 265px;
   color: #fff;
   font-size: 15px;
}
@media screen and (max-width: 768px) {
   #top-information {
      padding: 40px 0 140px 0;
   }
   #top-information .top-heading {
      margin-bottom: 60px;
   }
   #top-information .info-list {
      margin-bottom: 60px;
   }
   #top-information .btn {
      width: 200px;
   }
}

#top-tourist {
   padding: 80px 0 75px 0;
   background-color: #fff;
}
#top-tourist .flex {
   justify-content: space-between;
}
#top-tourist .label {
   margin-bottom: 55px;
}
#top-tourist h2 {
   margin-bottom: 40px;
}
#top-tourist h3 {
   font-size: 40px;
   margin-bottom: 80px;
}
#top-tourist p {
   font-size: 15px;
   line-height: 1.8;
}
#top-tourist .txt {
   width: 43%;
}
#top-tourist .media {
   width: 55%
}
#top-tourist .media img {
   width: 100%;
}
@media screen and (max-width: 768px) {
   #top-tourist {
      padding: 112px 0 130px 0;
   }
   #top-tourist .flex {
      flex-direction: column;
      gap: 0;
   }
   #top-tourist .txt {
      width: 100%;
      margin-bottom: 60px;
   }
   #top-tourist .media {
      width: 100%
   }
   #top-tourist .label {
      margin-bottom: 50px;
   }
   #top-tourist h2 {
      margin-bottom: 33px;
   }
   #top-tourist h3 {
      font-size: 30px;
      margin-bottom: 65px;
   }
   #top-tourist p {
      margin: 0;
   }
}

#top-access {
   padding: 105px 0 120px 0;
   background-color: #F0F0E3;
}
#top-access h3 {
   text-align: center;
   font-size: 15px;
   margin-bottom: 40px;
   font-weight: 500;
}
#top-access .map {
   margin-bottom: 80px;
}
#top-access .map iframe {
   width: 100%;
   height: 400px;
   border: none;
}
#top-access .media {
   width: 100%;
}
#top-access .media img {
   width: 100%;
}
@media screen and (max-width: 768px) {
   #top-access {
      padding: 110px 0 140px 0;
   }
   #top-access .top-heading {
      margin-bottom: 55px;
   }
   #top-access h3 {
      line-height: 1.8;
      margin-bottom: 60px;
   }
   #top-access .map iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
   }
   #top-access .media {
      width: 100%;
      overflow-x: scroll;
   }
   #top-access .media img {
      width: 800px;
   }
}