/* =========================
   Base
========================= */
* {box-sizing: border-box;}

html,body {margin: 0;padding: 0;}
body {color: #444;background: #fefcf9;}
a {text-decoration: none;color: inherit;}
img {max-width: 100%;display: block;}

:root {
  --topbar-h: 48px;
  --header-h: 100px;
  --accent: #ae6b60;
  --text: #4d4d4d;
  --radius: 999px;
}

/* =========================
   Header
========================= */
#header {position: relative;z-index: 100;}

#topbar {height: var(--topbar-h);background: var(--accent);display: flex;align-items: center;justify-content: flex-end;padding: 0 32px;color: #fff;font-size: 0.9em;}
#topbar-right {display: flex;align-items: center;gap: 8px;white-space: nowrap;}
#topbar-right .lang-icon {width: 20px;height: 20px;object-fit: contain;display: block;}
#topbar-right .lang-arrow {font-size: 0.8em;line-height: 1;}
#header-main {height: var(--header-h);display: flex;align-items: center;justify-content: space-between;gap: 32px;padding: 0 32px;position: relative;}
#top_logo {flex-shrink: 0;}
#top_logo img {width: 225px;height: auto;}
#nav {display: flex;align-items: center;gap: 56px;margin-left: auto;margin-right: 24px;}
#nav a {font-size: 1.1em;color: var(--text);white-space: nowrap;}
#book-btn {display: inline-flex;align-items: center;justify-content: center;border: none;background: var(--accent);color: #fff;font-size: 1.1em;font-weight: 700;padding: 18px 42px;border-radius: var(--radius);cursor: pointer;flex-shrink: 0;text-decoration: none;line-height: 1;}
#book-btn:hover {opacity: 0.9;}

/* =========================
   Hamburger
========================= */
#hamburger {display: none;width: 52px;height: 52px;border: none;background: transparent;padding: 0;cursor: pointer;position: relative;flex-shrink: 0;}
#hamburger span {display: block;width: 28px;height: 2px;background: #555;margin: 6px auto;transition: 0.3s;}
/* 開いた時 */
#header.menu-open #hamburger span:nth-child(1) {transform: translateY(8px) rotate(45deg);}
#header.menu-open #hamburger span:nth-child(2) {opacity: 0;}
#header.menu-open #hamburger span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

@media screen and (max-width: 1024px) {
:root {--topbar-h: 48px;--header-h: 100px;}
#header-main {padding: 0 20px;}
#top_logo img {width: 200px;}
#hamburger {display: block;order: 3;}
#book-btn {display: none;}
#nav {display: none;position: absolute;top: 100%;right: 20px;width: min(360px, calc(100% - 40px));background: #fff;border-radius: 16px;box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);padding: 18px 20px;margin: 0;flex-direction: column;align-items: flex-start;gap: 0;}
#header.menu-open #nav {display: flex;}
#nav a {width: 100%;padding: 16px 4px;border-bottom: 1px solid #eee;font-size: 1em;}
#nav a:last-child {border-bottom: none;}}
@media screen and (max-width: 768px) {
:root {--topbar-h: 40px;--header-h: 80px;}
#topbar {padding: 0 16px;font-size: 0.8em;}
#header-main {gap: 16px;padding: 0 16px;}
#top_logo img {width: 180px;}}


/* =========================
   Hero
========================= */
#search-bar select {all: initial;}
#hero {position: relative;min-height: calc(97vh - var(--topbar-h) - var(--header-h));background: url("../img/hero.jpg") center center / cover no-repeat;display: flex;align-items: flex-end;justify-content: center;padding: 24px 24px 40px;}
#search-bar {position: relative;z-index: 1;width: min(1400px, 92%);background: #fff;border-radius: 999px;display: grid;grid-template-columns: 1.15fr 1.5fr 1fr 220px;align-items: center;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);overflow: hidden;}
.search-item {padding: 18px 28px;display: flex;align-items: center;gap: 20px;min-height: 88px;}
#search-date, #search-guests {border-left: 1px solid #ddd;}
.search-icon {flex-shrink: 0;width: 42px;display: flex;align-items: center;justify-content: center;}
.search-icon img {width: 32px;height: 32px;object-fit: contain;display: block;}
.search-text {display: flex;flex-direction: column;justify-content: center;min-width: 0;}
#search-bar label {font-size: 13px;color: #777;margin-bottom: 8px;}
#search-bar input,#search-bar select {border: none;outline: none;font-size: 1.1em;color: #444;background: transparent;padding: 0;line-height: 1.2;width: 100%;}
#search-button {margin: 0 24px;border: none;background: var(--accent);color: #fff;font-size: 1.1em;font-weight: 700;padding: 18px 20px;border-radius: 999px;cursor: pointer; text-align: center;}
#search-date .search-text {width: 100%;}

@media screen and (max-width: 1024px) {
#hero {padding: 20px 20px 32px;}
#search-bar {grid-template-columns: 1fr;border-radius: 24px;width: min(800px, 100%);}
.search-item {min-height: auto;}
#search-location, #search-date, #search-guests {border-left: none;border-bottom: 1px solid #eee;}
#search-guests {border-bottom: none;}
#search-button {margin: 20px;
  /* width: calc(100% - 40px); */
}
}
@media screen and (max-width: 768px) {
#hero {padding: 16px 16px 20px;align-items: flex-end;}
.search-item {padding: 16px 18px;gap: 14px;}
.search-icon {width: 34px;}
.search-icon img {width: 24px;height: 24px;}
#search-bar input {font-size: 1.1em;}
#search-button {font-size: 1.1em;padding: 16px 18px;}}


/* =========================
   #price-banner
========================= */
#price-banner {width: min(1400px, 92%);margin: 56px auto 0;background: var(--accent);color: #fff;text-decoration: none;display: flex;align-items: center;justify-content: space-between;padding: 24px 56px;box-sizing: border-box;border-radius: 4px;}
#price-banner .price-banner__left {display: flex;align-items: center;gap: 24px;}
#price-banner .price-banner__icon {width: 48px;height: 48px;object-fit: contain;display: block;flex-shrink: 0;}
#price-banner .price-banner__text {font-size: 1.1rem;font-weight: 700;line-height: 1.2;}
#price-banner .price-banner__right {display: flex;align-items: center;gap: 42px;white-space: nowrap;}
#price-banner .price-banner__linktext {font-size: 1.1rem;font-weight: 700;line-height: 1.2;}
#price-banner .price-banner__right::after {content: ">";font-size: 1.6rem;line-height: 1;font-weight: 700;}

@media screen and (max-width: 1024px) {
#price-banner {width: 95%;padding: 24px 28px;gap: 20px;}
#price-banner .price-banner__left {gap: 18px;}
#price-banner .price-banner__icon {width: 48px;height: 48px;}
#price-banner .price-banner__text,#price-banner .price-banner__linktext {font-size: 1rem;}
#price-banner .price-banner__right {gap: 20px;}
#price-banner .price-banner__right::after {font-size: 1.8rem;}}
@media screen and (max-width: 768px) {
#price-banner {width: 92%;margin-top: 24px;padding: 18px 18px;flex-direction: column;align-items: center;justify-content: center;text-align: center;gap: 4px;}
#price-banner .price-banner__left {width: 100%;display: flex;align-items: center;justify-content: center;gap: 14px;text-align: center;}
#price-banner .price-banner__right {width: 100%;position: relative;display: block;text-align: center;white-space: normal;padding-right: 0;}
#price-banner .price-banner__icon {width: 28px;height: 28px;}
#price-banner .price-banner__text,#price-banner .price-banner__linktext {font-size: 0.95rem;text-align: center;}
#price-banner .price-banner__right::after {content: ">";position: absolute;right: 0;top: 50%;transform: translateY(-50%);font-size: 1.5rem;line-height: 1;}}


/* =========================
   #top_intro
========================= */
#top_intro {padding: 80px 0;}
#top_intro .top-intro__inner {width: min(1000px, 80%);margin: 0 auto;text-align: center;}
#top_intro .top-intro__stars {width: 140px;height: auto;display: block;margin: 0 auto 18px;}
#top_intro .top-intro__title {margin: 0;color: #2f3136;font-size: 3.4em;line-height: 1.3;font-weight: 800;font-style: italic;letter-spacing: -0.03em;}
#top_intro .top-intro__list {width: 800px;margin: 0 auto;margin-top: 72px;display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;align-items: start;justify-content: center;}
#top_intro .top-intro__item {display: flex;flex-direction: column;align-items: center;text-align: center;}
#top_intro .top-intro__icon {width: 100px;height: 100px;object-fit: contain;display: block;margin-bottom: 22px;}
#top_intro .top-intro__caption {margin: 0;color: #44474d;font-size: 1.15rem;line-height: 1.18;font-weight: 600;letter-spacing: -0.01em;}

@media screen and (max-width: 1024px) {
#top_intro {padding: 64px 0;}
#top_intro .top-intro__inner {width: min(760px, 100%);}
#top_intro .top-intro__stars {width: 120px;margin: 0 auto 16px;}
#top_intro .top-intro__title {font-size: clamp(2.2rem, 5.4vw, 2.8rem);line-height: 1.3;text-align: center;}
#top_intro .top-intro__list {width: 90%;margin: 56px auto 0;gap: 42px 24px;justify-items: center;}
#top_intro .top-intro__item {width: 100%;max-width: 240px;}
#top_intro .top-intro__icon {width: 90px;height: 90px;margin: 0 auto 18px;}
#top_intro .top-intro__caption {font-size: 1rem;text-align: center;}}
@media screen and (max-width: 768px) {
#top_intro {padding: 52px 0 64px;}
#top_intro .top-intro__inner {width: 100%;}
#top_intro .top-intro__stars {width: 100px;margin: 0 auto 16px;}
#top_intro .top-intro__title {font-size: clamp(1.5rem, 6vw, 2.4rem);line-height: 1.3;text-align: center;}
#top_intro .top-intro__list {width: 80%;max-width: 500px;margin: 48px auto 0;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 28px 12px;justify-items: center;}
#top_intro .top-intro__item {width: 100%;max-width: 170px;}
#top_intro .top-intro__icon {width: 72px;height: 72px;margin: 0 auto 12px;}
#top_intro .top-intro__caption {font-size: 0.9rem;line-height: 1.25;text-align: center;}}
@media screen and (max-width: 500px){
#top_intro .top-intro__icon {width: 64px;height: 64px;margin: 0 auto 12px;}}


/* =========================
   #top_cafe
========================= */
#top_cafe {position: relative;padding: 56px 0;overflow: visible;}
#top_cafe::before {content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 100%;height: 66%;background: #efdacf;z-index: 0;}
#top_cafe .inner {position: relative;z-index: 1;max-width: 1400px;width: 100%;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 0;}
#top_cafe .top_cafe_content {width: 44%;text-align: center;padding: 0;box-sizing: border-box;}
#top_cafe .top_cafe_label {display: block;width: 100%;background: var(--accent);color: #efdacf;padding: 12px 24px;box-sizing: border-box;font-style: italic;font-weight: 700;font-size: 1em;line-height: 1.3;text-align: center;margin-bottom: 32px;}
#top_cafe .top_cafe_title {margin: 0 0 24px;color: #222;font-size: clamp(2.2rem, 4vw, 3.2em);font-weight: 800;font-style: italic;line-height: 1.2;}
#top_cafe .top_cafe_text {margin: 0 0 32px;color: #4d4d4d;font-size: 1.1em;line-height: 1.45;font-weight: 500;}
#top_cafe .top_cafe_link {display: inline-flex;align-items: center;gap: 1em;color: var(--accent);text-decoration: none;font-size: 1.1em;font-weight: bold;}
#top_cafe .top_cafe_gallery {display: flex;flex-wrap: wrap;align-items: flex-start;align-content: flex-start;justify-content: flex-start;gap: 6px;width: 56%;padding-right: 16px;box-sizing: border-box;}
#top_cafe .top_cafe_gallery_main {width: 100%;background: #fefcf9;padding: 6px;box-sizing: border-box;}
#top_cafe .top_cafe_gallery_sub {width: calc(50% - 3px);background: #fefcf9;padding: 6px;box-sizing: border-box;}
#top_cafe .top_cafe_gallery_main img,
#top_cafe .top_cafe_gallery_sub img {display: block;width: 100%;height: auto;object-fit: cover;}

@media screen and (max-width: 1024px) {
#top_cafe {padding: 40px 0;}
#top_cafe::before {height: 72%;}
#top_cafe .inner {align-items: center;}
#top_cafe .top_cafe_content {width: 46%;padding: 0;}
#top_cafe .top_cafe_label {padding: 11px 18px;font-size: 0.8em;margin-bottom: 16px;}
#top_cafe .top_cafe_title {font-size: clamp(1.9rem, 4.2vw, 2.6rem);margin-bottom: 20px;line-height: 1.2;}
#top_cafe .top_cafe_text {font-size: 0.9rem;line-height: 1.4;margin-bottom: 24px;}
#top_cafe .top_cafe_link {font-size: 1em;gap: 0.8em;}
#top_cafe .top_cafe_gallery {width: 54%;padding-right: 12px;gap: 3px;}
#top_cafe .top_cafe_gallery_main {padding: 3px;}
#top_cafe .top_cafe_gallery_sub {width: calc(50% - 3px);padding: 3px;}}
@media screen and (max-width: 768px) {
#top_cafe {padding: 16px 0 24px;}
#top_cafe::before {top: 0;bottom: auto;left: 0;transform: none;width: 100%;height: 100%;background: #efdacf;}
#top_cafe .inner {flex-direction: column-reverse;align-items: center;gap: 16px;}
#top_cafe .top_cafe_content {width: 100%;padding: 0;}
#top_cafe .top_cafe_label {width: 100%;padding: 10px 14px;font-size: 0.8em;line-height: 1.3;margin-bottom: 24px;}
#top_cafe .top_cafe_title {font-size: clamp(2rem, 8vw, 3rem);margin-bottom: 24px;line-height: 1.2;}
#top_cafe .top_cafe_text {font-size: 0.95em;line-height: 1.45;margin-bottom: 24px;}
#top_cafe .top_cafe_link {font-size: 1em;gap: 0.7em;}
#top_cafe .top_cafe_gallery {width: 90%;padding-right: 0;gap: 6px;}
#top_cafe .top_cafe_gallery_main {padding: 3px;}
#top_cafe .top_cafe_gallery_sub {width: calc(50% - 4px);padding: 3px;}}


/* =========================
   #top_experience
========================= */
#top_experience {padding: 56px 0;}
#top_experience .inner {width: min(1400px, 90%);margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
#top_experience .top_experience_image_wrap {width: 58%;}
#top_experience .top_experience_image {display: block;width: 100%;height: auto;object-fit: cover;}
#top_experience .top_experience_content {width: 42%;text-align: center;}
#top_experience .top_experience_title {margin: 0 0 40px;color: #2f3136;font-size: clamp(3rem, 6vw, 3.3em);line-height: 1.2;font-weight: 800;font-style: italic;letter-spacing: -0.01em;}
#top_experience .top_experience_text {margin: 0 0 40px;color: #4d4d4d;font-size: 1.1em;line-height: 1.35;font-weight: 500;}
#top_experience .top_experience_link {display: inline-flex;align-items: center;gap: 0.9em;color: var(--accent);text-decoration: none;font-size: 1.1em;font-weight: 700;}
#top_experience .top_experience_link_arrow {line-height: 1;}

@media screen and (max-width: 1024px) {
#top_experience {padding: 40px 0;}
#top_experience .inner {width: 95%;gap: 0;}
#top_experience .top_experience_image_wrap {width: 56%;}
#top_experience .top_experience_content {width: 44%;}
#top_experience .top_experience_title {margin: 0 0 28px;font-size: clamp(2.2rem, 5vw, 2.8rem);line-height: 1.15;}
#top_experience .top_experience_text {margin: 0 0 28px;font-size: 1em;line-height: 1.4;}
#top_experience .top_experience_link {font-size: 1em;gap: 0.8em;}}
@media screen and (max-width: 768px) {
#top_experience {padding: 24px 0;}
#top_experience .inner {width: 90%;flex-direction: column;gap: 24px;}
#top_experience .top_experience_image_wrap,#top_experience .top_experience_content {width: 100%;}
#top_experience .top_experience_content {text-align: center;}
#top_experience .top_experience_title {margin: 0 0 24px;font-size: clamp(2rem, 8vw, 3rem);line-height: 1.2;}
#top_experience .top_experience_text {margin: 0 0 24px;font-size: 0.95em;line-height: 1.45;}
#top_experience .top_experience_link {font-size: 1em;gap: 0.7em;}}


/* =========================
   #top_group
========================= */
#top_group {padding: 80px 0;}
#top_group .inner {width: min(1400px, 90%);margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
#top_group .top_group_content {width: 44%;text-align: center;}
#top_group .top_group_title {margin: 0 0 40px;color: #2f3136;font-size: clamp(3rem, 6vw, 3.3em);line-height: 1.2;font-weight: 800;font-style: italic;letter-spacing: -0.01em;}
#top_group .top_group_text {margin: 0 0 40px;color: #4d4d4d;font-size: 1.1em;line-height: 1.35;font-weight: 500;}
#top_group .top_group_link {display: inline-flex;align-items: center;gap: 0.9em;color: var(--accent);text-decoration: none;font-size: 1.1em;font-weight: 700;}
#top_group .top_group_link_arrow {line-height: 1;}
#top_group .top_group_image_wrap {width: 56%;}
#top_group .top_group_image {display: block;width: 100%;height: auto;object-fit: cover;}

@media screen and (max-width: 1024px) {
#top_group {padding: 72px 0;}
#top_group .inner {width: 95%;gap: 0;}
#top_group .top_group_content {width: 44%;}
#top_group .top_group_image_wrap {width: 56%;}
#top_group .top_group_title {margin: 0 0 28px;font-size: clamp(2.2rem, 5vw, 2.8rem);line-height: 1.15;}
#top_group .top_group_text {margin: 0 0 28px;font-size: 1em;line-height: 1.4;}
#top_group .top_group_link {font-size: 1em;gap: 0.8em;}}

@media screen and (max-width: 768px) {
#top_group {padding: 40px 0;}
#top_group .inner {width: 90%;flex-direction: column-reverse;gap: 24px;}
#top_group .top_group_content,#top_group .top_group_image_wrap {width: 100%;}
#top_group .top_group_content {text-align: center;}
#top_group .top_group_title {margin: 0 0 24px;font-size: clamp(2rem, 8vw, 3rem);line-height: 1.2;}
#top_group .top_group_text {margin: 0 0 24px;font-size: 0.95em;line-height: 1.45;}
#top_group .top_group_link {font-size: 1em;gap: 0.7em;}}


/* =========================
   #top_locations
========================= */
#top_locations {background: #efdacf;padding: 72px 0 72px;}
#top_locations .top_locations__inner {width: min(1200px, 76%);margin: 0 auto;}
#top_locations .top_locations__title {position: relative;margin: 0 0 16px;color: #bb865e;font-size: 1.2em;font-weight: bold;text-align: left;}
#top_locations .top_locations__title::before {content: "";display: block;width: 100px;height: 4px;margin: 0 0 4px 0;background: #bb865e;}
#map {width: 100%;height: 410px;margin: 0 auto;border: none;overflow: hidden;}

@media screen and (max-width: 1024px) {
#top_locations {padding: 48px 0;}
#top_locations .top_locations__inner {width: 80%;}
#top_locations .top_locations__title {margin: 0 0 16px;font-size: 1.2em;}
#map {height: 350px;}}
@media screen and (max-width: 768px) {
#top_locations {padding: 32px 0;}
#top_locations .top_locations__inner {width: 90%;}
#top_locations .top_locations__title {margin: 0 0 16px;font-size: 1em;}
#top_locations .top_locations__title::before {width: 80px;}
#map {height: 280px;}}


/* =========================
   #top_news
========================= */
#top_news {
  padding: 72px 0 80px;
}

#top_news .top_news__inner {
  width: min(1200px, 76%);
  margin: 0 auto;
}

#top_news .top_news__title {
  position: relative;
  margin: 0 0 40px;
  color: #bb865e;
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
  text-align: left;
}

#top_news .top_news__title::before {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  margin: 0 0 8px 0;
  background: #bb865e;
}

#top_news .top_news__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

#top_news .top_news__item {
  display: block;
  text-decoration: none;
  color: inherit;
}

#top_news .top_news__image_wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 10px;
}

#top_news .top_news__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#top_news .top_news__date {
  margin: 0 0 6px;
  color: #9c8341;
  font-size: 0.95em;
  font-weight: 700;
  font-style: italic;
}

#top_news .top_news__item_title {
  margin: 0;
  color: #9c8341;
  font-size: 1.1em;
  font-weight: 700;
  font-style: italic;
  line-height: 1.3;
}

#top_news .top_news__button_wrap {
  margin-top: 28px;
  text-align: right;
}

#top_news .top_news__button {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  color: #bb865e;
  text-decoration: none;
  font-size: 1em;
  font-weight: 700;
  font-style: italic;
}

#top_news .top_news__button span {
  line-height: 1;
}

/* =========================
   1024px
========================= */
@media screen and (max-width: 1024px) {
  #top_news {
    padding: 56px 0 64px;
  }

  #top_news .top_news__inner {
    width: 80%;
  }

  #top_news .top_news__title {
    margin: 0 0 32px;
    font-size: 1.2em;
  }

  #top_news .top_news__list {
    gap: 24px;
  }

  #top_news .top_news__date {
    font-size: 0.9em;
  }

  #top_news .top_news__item_title {
    font-size: 1em;
  }
}

/* =========================
   768px
========================= */
@media screen and (max-width: 768px) {
  #top_news {
    padding: 32px 0 40px;
  }

  #top_news .top_news__inner {
    width: 90%;
  }

  #top_news .top_news__title {
    margin: 0 0 24px;
    font-size: 1em;
  }

  #top_news .top_news__title::before {
    width: 80px;
  }

  #top_news .top_news__list {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #top_news .top_news__button_wrap {
    margin-top: 24px;
  }

  #top_news .top_news__button {
    font-size: 0.95em;
  }
}