@charset "UTF-8";

/* ==========================================================
   Chronos House Tokyo Kitasenju - Top page
   ========================================================== */

:root {
  --navy: #0c2846;
  --gold: #bfa252;
  --beige: #f0eae3;
  --white: #ffffff;
  /* 欧文はAvenirを基本とし、代替にLato(Google Fonts)を使用 */
  --font-base: "Avenir Next", "Avenir", "Lato", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ----- Reset ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, p, ul, li, figure, figcaption {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  /* Firefox用スクロールバー指定 */
  scrollbar-color: var(--navy) var(--beige);
}

/* スクロールバー(横幅20px・ネイビーの角丸バー) */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background: var(--beige);
}

::-webkit-scrollbar-thumb {
  background: var(--navy);
  border-radius: 10px;
}

body {
  font-family: var(--font-base);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--beige);
  font-feature-settings: "palt";
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================
   Header
   ========================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  color: var(--white);
  background: transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* スクロールして背景色が出てきたら文字とロゴはネイビー(白の半透過背景) */
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.8);
  color: var(--navy);
}

.header__logo-mark--navy {
  display: none;
}

.header.is-scrolled .header__logo-mark--white {
  display: none;
}

.header.is-scrolled .header__logo-mark--navy {
  display: block;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1640px;
  margin: 0 auto;
  padding: 28px 40px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header__logo-mark {
  width: 56px;
  height: 56px;
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.header__logo-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.header__logo-sub {
  font-size: 13px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* --- Global nav (PC) --- */
.gnav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.gnav__list {
  display: flex;
  align-items: center;
  gap: 36px;
}

.gnav__link {
  position: relative;
  display: inline-block;
  padding: 4px 0;
  font-size: 16px;
}

.gnav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.gnav__link:hover::after,
.gnav__link:active::after,
.gnav__link.is-current::after {
  transform: scaleX(1);
}

.gnav__sub {
  display: flex;
  align-items: center;
  gap: 36px;
}

.gnav__lang {
  font-size: 16px;
  letter-spacing: 0.1em;
}

.gnav__lang a {
  position: relative;
  padding: 4px 0;
}

/* 言語もオンマウスで反応 */
.gnav__lang a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.gnav__lang a:hover::after,
.gnav__lang a:active::after,
.gnav__lang a.is-current::after {
  transform: scaleX(1);
}

.gnav__reserve {
  display: inline-block;
  padding: 10px 28px;
  background: var(--gold);
  color: var(--white);
  font-size: 16px;
  letter-spacing: 0.12em;
  transition: opacity 0.3s;
}

.gnav__reserve:hover {
  opacity: 0.8;
}

/* --- Hamburger (SP) --- */
.header__menu-btn {
  display: none;
}

/* ==========================================================
   Hero
   ========================================================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
}

.hero__slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 40, 70, 0.25);
}

/* ヒーロー下のドット */
.hero__dots {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 100px;
}

.hero__dots:empty {
  display: none;
}

.hero__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.hero__place {
  font-size: 18px;
  letter-spacing: 0.3em;
  margin-bottom: 28px;
}

.hero__title {
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.9;
  margin-bottom: 36px;
}

.hero__lead {
  font-size: 15px;
  letter-spacing: 0.18em;
  line-height: 2;
}

/* ==========================================================
   Sections (common)
   ========================================================== */

/* 大きな項目と項目の間は150px */
.section {
  padding-top: 150px;
}

.section:last-of-type {
  padding-bottom: 150px;
}

.section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 見出しとコンテンツの間は100px */
.section__head {
  text-align: center;
  margin-bottom: 100px;
}

.section__label {
  font-size: 30px;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.section__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-bottom: 42px;
}

.section__head::after {
  content: "";
  display: block;
  width: 460px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

.section__btn-wrap {
  text-align: center;
  margin-top: 90px;
}

/* セクション本文のフォントサイズ */
.about__text,
.staying__desc,
.neighborhood__desc,
.booking__text {
  font-size: 20px;
}

.btn {
  display: inline-block;
  min-width: 250px;
  padding: 10px 40px;
  border: 2px solid var(--navy);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
  background: var(--navy);
  color: var(--white);
}

/* ==========================================================
   THE HOUSE
   ========================================================== */

.about__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 70px;
}

.about__photo {
  flex: 0 0 340px;
}

.about__photo img {
  width: 100%;
  aspect-ratio: 340 / 342;
  object-fit: cover;
}

.about__text {
  flex: 0 1 620px;
}

/* ==========================================================
   FOUR ERAS
   ========================================================== */

.eras__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 110px;
  max-width: 1020px;
  margin: 0 auto;
}

.eras__card {
  position: relative;
  cursor: pointer;
}

.eras__card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(0.45);
  transition: filter 0.4s;
}

/* オンマウスでシャドウが取れて文字が消える */
.eras__card:hover img {
  filter: brightness(1);
}

.eras__card:hover .eras__name {
  opacity: 0;
}

.eras__name {
  position: absolute;
  inset: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--white);
  text-align: center;
}

/* カード上のテキストは行間を詰める(デザイン準拠・日英共通) */
.eras__name-ja {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  line-height: 1.2;
}

.eras__name-en {
  font-size: 20px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  line-height: 1.2;
  margin-top: 4px;
}

.eras__name-year {
  font-size: 20px;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-top: 5px;
}

.eras__caption {
  margin-top: 26px;
  text-align: center;
  font-size: 20px;
}

/* ==========================================================
   STAYING HERE
   ========================================================== */

.staying__list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
}

.staying__item {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
}

.staying__icon {
  height: 120px;
  width: auto;
  margin: 0 auto 26px;
}

.staying__text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
}

.staying__desc {
  max-width: 880px;
  margin: 90px auto 0;
}

/* ==========================================================
   THE NEIGHBORHOOD (carousel)
   ========================================================== */

.carousel {
  overflow: hidden;
  margin-bottom: 90px;
}

.carousel__track {
  display: flex;
  align-items: center;
  gap: 30px;
  transition: transform 0.6s ease;
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 var(--slide-w, 74%);
}

.carousel__slide img {
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
}

.carousel__dot {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel__dot.is-active {
  background: var(--gold);
}

.neighborhood__desc {
  max-width: 880px;
  margin: 0 auto;
}

/* ==========================================================
   GUEST WORDS
   ========================================================== */

.guest__list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 740px;
  margin: 0 auto;
}

.guest__bubble {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  padding: 44px 56px;
}

/* しっぽ(先端が丸いSVG形状) */
.guest__bubble::after {
  content: "";
  position: absolute;
  bottom: -28px;
  width: 32px;
  height: 30px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 52"><path d="M0 0 H56 L46 40 C43.5 50.5 33 51 27.5 42 Z" fill="%23ffffff"/></svg>') no-repeat center / contain;
}

.guest__bubble--right::after {
  right: 130px;
}

.guest__bubble--left::after {
  left: 130px;
  transform: scaleX(-1);
}

.guest__en {
  font-size: 27px;
  letter-spacing: 0.1em;
  color: var(--gold);
  line-height: 1.7;
  margin-bottom: 8px;
}

.guest__ja {
  font-size: 20px;
}

.guest__note {
  max-width: 740px;
  margin: 56px auto 0;
  text-align: right;
  font-size: 15px;
}

/* ==========================================================
   BOOK YOUR STAY
   ========================================================== */

.booking__text {
  text-align: center;
}

/* 英語版: 見出しを「BOOK YOUR STAY」一段表示にする際の下余白調整 */
.booking__label-solo {
  margin-bottom: 42px;
}

/* Booking.comボタンはオンマウス、クリックでゴールドに変わる */
.booking .btn:hover,
.booking .btn:active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.booking .section__btn-wrap {
  margin-top: 70px;
}

/* ==========================================================
   Lightbox(時代カード拡大表示)
   ========================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  background: rgba(12, 40, 70, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__img {
  max-width: min(1000px, 100%);
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 2px;
  background: var(--white);
}

.lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================
   下層ページ共通:ページヒーロー
   ========================================================== */

.page-hero {
  position: relative;
  height: min(66vw, 85vh);
  min-height: 480px;
}

.page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.2s ease;
}

/* メインイメージが複数枚ある場合はトップと同じクロスフェードでスライド
   (画像1枚のページは従来どおり静止表示) */
.page-hero.has-slides .page-hero__img {
  opacity: 0;
}

.page-hero.has-slides .page-hero__img.is-active {
  opacity: 1;
}

/* ヒーロー写真に薄いネイビーのシャドウ */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 40, 70, 0.25);
}

.page-hero__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
}

.page-hero__label {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  margin-bottom: 8px;
}

.page-hero__title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

.page-hero__body::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80vw;
  height: 2px;
  margin-top: 38px;
  background: var(--white);
}

/* ==========================================================
   FOUR ERAS page(四つの時代)
   ========================================================== */

/* 時のドット(装飾) */
.time-dots {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 100px;
}

.time-dots span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--navy);
}

.time-dots span.is-accent {
  background: var(--gold);
}

/* 本文テキスト(左寄せ・中央配置ブロック) ※この宿について・北千住・ご予約前にページと共用 */
.fe-text,
.nb-text,
.byb-text,
.ah-text,
.ac-text {
  max-width: 900px;
  margin: 0 auto;
  font-size: 20px;
}

/* 時代見出し */
.fe-era__head {
  text-align: center;
  margin-bottom: 85px;
}

.fe-era__en {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.fe-era__ja {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 42px;
}

.fe-era__head::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

/* 時代カルーセル(3:2写真・下余白なし) */
.carousel--era {
  margin-bottom: 0;
}

.carousel--era .carousel__slide img {
  aspect-ratio: 3 / 2;
}

.carousel--era .carousel__dots {
  margin-top: 90px;
}

.fe-era__caption {
  margin-top: 90px;
}

/* 結び(のれん) */
.fe-close__photo {
  max-width: 900px;
  margin: 0 auto;
}

.fe-close__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.fe-close__text {
  margin-top: 100px;
}

/* ==========================================================
   THE NEIGHBORHOOD page(北千住という街)
   ========================================================== */

/* スポット見出し(四つの時代と同じ体裁) */
.nb-spot__head {
  text-align: center;
  margin-bottom: 85px;
}

.nb-spot__en {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.nb-spot__ja {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 42px;
}

.nb-spot__head::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

/* スポット写真 */
.nb-spot__photo {
  max-width: 900px;
  margin: 0 auto;
}

.nb-spot__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* アイコン+本文 */
.nb-spot__body {
  display: flex;
  align-items: center;
  gap: 85px;
  max-width: 900px;
  margin: 0 auto;
}

.nb-spot__photo + .nb-spot__body {
  margin-top: 90px;
}

.nb-spot__icon {
  flex: 0 0 auto;
  width: 110px;
  height: auto;
}

.nb-spot__text {
  flex: 1;
  font-size: 20px;
}

/* 段落間は1行分空ける */
.nb-text p + p,
.nb-spot__text p + p,
.byb-text p + p,
.byb-row__value p + p,
.ah-text p + p,
.ac-text p + p {
  margin-top: 1.75em;
}

/* ==========================================================
   THE HOUSE page(この宿について)
   ========================================================== */

/* セクション見出し(他の下層ページと同じ体裁) ※アクセスページと共用 */
.ah-sec__head,
.ac-sec__head {
  text-align: center;
  margin-bottom: 85px;
}

.ah-sec__en,
.ac-sec__en {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.ah-sec__ja,
.ac-sec__ja {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 42px;
}

.ah-sec__head::after,
.ac-sec__head::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

/* 単写真(3:2) */
.ah-photo {
  max-width: 900px;
  margin: 0 auto;
}

.ah-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ah-photo + .ah-photo-caption {
  margin-top: 90px;
}

/* カルーセル下の本文 */
.ah-caption {
  margin-top: 90px;
}

/* ==========================================================
   ACCESS page(アクセス)
   ========================================================== */

/* 地図 */
.ac-map {
  max-width: 900px;
  margin: 0 auto;
}

.ac-map img {
  width: 100%;
}

/* 所在地情報(住所・路線) */
.ac-info {
  max-width: 900px;
  margin: 110px auto 0;
}

.ac-info__row {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.ac-info__row + .ac-info__row {
  margin-top: 48px;
}

.ac-info__icon {
  flex: 0 0 auto;
  width: 50px;
  height: auto;
}

.ac-info__body {
  flex: 1;
  font-size: 20px;
  padding-top: 5px;
}

/* 1行のみの行(住所)はアイコンと天地中央 */
.ac-info__row:first-child {
  align-items: center;
}

.ac-info__row:first-child .ac-info__body {
  padding-top: 0;
}

.ac-info__list {
  margin-top: 0.5em;
}

.ac-info__list li::before {
  content: "・";
}

/* 駅からの道順ステップ */
.ac-step {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  max-width: 900px;
  margin: 0 auto;
}

.ac-step + .ac-step {
  margin-top: 50px;
}

.ac-step__photo {
  flex: 0 0 300px;
}

.ac-step__photo img {
  width: 100%;
}

.ac-step__body {
  flex: 1;
  padding-top: 10px;
}

.ac-step__num {
  color: var(--gold);
  font-size: 30px;
  letter-spacing: 0.2em;
}

.ac-step__title {
  margin-top: 22px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ac-step__text {
  margin-top: 24px;
  font-size: 22px;
}

/* 空港・都内から:テーブル下の注記 */
.ac-table-note {
  margin-top: 90px;
}

/* お車でお越しの方 */
.ac-note {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 900px;
  margin: 0 auto;
}

.ac-note__icon {
  flex: 0 0 auto;
  width: 54px;
  height: auto;
}

.ac-note__text {
  flex: 1;
  font-size: 20px;
}

/* ==========================================================
   BEFORE YOU BOOK page(ご予約前に)
   ========================================================== */

/* セクション見出し(四つの時代・北千住と同じ体裁) */
.byb-sec__head {
  text-align: center;
  margin-bottom: 100px;
}

.byb-sec__en {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.byb-sec__ja {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 42px;
}

.byb-sec__head::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

/* --- 基本情報テーブル ※アクセスページ(空港・都内から)と共用 --- */
.byb-table,
.ac-table {
  max-width: 900px;
  margin: 0 auto;
}

.byb-row,
.ac-row {
  display: flex;
  align-items: center;
  padding: 36px 0;
  border-top: 1px dotted rgba(12, 40, 70, 0.45);
}

.byb-row:last-child,
.ac-row:last-child {
  border-bottom: 1px dotted rgba(12, 40, 70, 0.45);
}

.byb-row__head,
.ac-row__head {
  display: flex;
  align-items: center;
  flex: 0 0 400px;
}

.byb-row__icon,
.ac-row__icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
}

.byb-row__label,
.ac-row__label {
  margin-left: 50px;
  font-size: 20px;
}

.byb-row__value,
.ac-row__value {
  flex: 1;
  margin: 0;
  font-size: 20px;
}

/* --- 事前に知っておいていただきたいこと --- */
.byb-note {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  max-width: 900px;
  margin: 0 auto;
}

.byb-note + .byb-note {
  margin-top: 90px;
}

/* iバッジ(ネイビーの丸) */
.byb-note__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 26px;
  font-weight: 500;
}

.byb-note__body {
  flex: 1;
}

.byb-note__title {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.byb-note__text {
  margin-top: 42px;
  font-size: 20px;
}

/* --- FAQ --- */
.byb-faq {
  max-width: 900px;
  margin: 0 auto;
}

.byb-faq__item + .byb-faq__item {
  margin-top: 110px;
}

.byb-faq__q,
.byb-faq__a {
  display: flex;
  gap: 50px;
}

.byb-faq__q {
  align-items: center;
}

.byb-faq__a {
  align-items: flex-start;
  margin: 40px 0 0;
}

/* Q・Aバッジ(吹き出し形) */
.byb-faq__q-badge,
.byb-faq__a-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 45px;
  font-size: 24px;
  font-weight: 700;
}

.byb-faq__q-badge {
  border-radius: 14px 14px 14px 0;
  background: var(--navy);
  color: var(--white);
}

.byb-faq__a-badge {
  border-radius: 14px 14px 0 14px;
  border: 3px solid var(--navy);
  background: var(--gold);
  color: var(--navy);
}

.byb-faq__q-text {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.byb-faq__a-text {
  flex: 1;
  font-size: 20px;
}

/* ページトップへ戻るボタン */
.to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.to-top::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-top: 7px;
  border-top: 3px solid var(--white);
  border-left: 3px solid var(--white);
  transform: rotate(45deg);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   Footer
   ========================================================== */

.footer {
  background: var(--navy);
  color: var(--white);
  padding: 90px 40px 40px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

.footer__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.4;
}

.footer__logo-mark {
  width: 130px;
  height: 130px;
  margin-bottom: 18px;
}

.footer__logo-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.footer__logo-sub {
  font-size: 14px;
  letter-spacing: 0.16em;
}

.footer__address {
  margin-top: 34px;
  font-size: 16px;
  line-height: 2;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
}

.footer__nav-list a {
  transition: opacity 0.3s;
}

.footer__nav-list a:hover {
  opacity: 0.7;
}

.footer__lang a.is-current {
  border-bottom: 1px solid currentColor;
}

.footer__sns {
  display: flex;
  gap: 44px;
  align-self: flex-end;
}

.footer__sns svg {
  width: 34px;
  height: 34px;
}

.footer__sns a {
  transition: opacity 0.3s;
}

.footer__sns a:hover {
  opacity: 0.7;
}

.footer__copyright {
  margin-top: 80px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.1em;
}

/* ==========================================================
   SP
   ========================================================== */

@media (max-width: 900px) {

  body {
    font-size: 16px;
  }

  /* --- Header --- */
  .header__inner {
    padding: 18px 20px;
  }

  .header__logo-mark {
    width: 44px;
    height: 44px;
  }

  .header__logo-name {
    font-size: 17px;
  }

  .header__logo-sub {
    font-size: 11px;
  }

  .header__menu-btn {
    display: block;
    position: relative;
    z-index: 110;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit; /* 初期表示は白、白背景時はネイビー(ヘッダーの文字色に追従) */
  }

  .header__menu-line {
    position: absolute;
    left: 7px;
    width: 30px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.3s, opacity 0.3s;
  }

  .header__menu-line:nth-child(1) { top: 7px; }
  .header__menu-line:nth-child(2) { top: 21px; }
  .header__menu-line:nth-child(3) { top: 35px; }

  .header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
  }

  .header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(2) {
    opacity: 0;
  }

  .header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg);
  }

  /* --- SP menu drawer --- */
  .gnav {
    position: absolute;
    top: 80px;
    right: 0;
    z-index: 105;
    display: block;
    width: min(75%, 340px);
    padding: 40px 44px 48px;
    background: rgba(240, 234, 227, 0.92);
    color: var(--navy);
    opacity: 0;
    visibility: hidden;
    transform: translateX(16px);
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  }

  .gnav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .gnav__list {
    display: block;
  }

  .gnav__list li + li {
    margin-top: 22px;
  }

  .gnav__link {
    font-size: 17px;
  }

  .gnav__sub {
    display: block;
    margin-top: 40px;
  }

  .gnav__reserve {
    padding: 10px 24px;
  }

  .gnav__lang {
    order: 2;
    margin-top: 28px;
  }

  .gnav__sub .gnav__reserve {
    margin-top: 0;
  }

  .gnav__sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  /* --- Hero --- */
  .hero {
    min-height: 520px;
  }

  .hero__dots {
    gap: 18px;
    padding-top: 50px;
  }

  .hero__place {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .hero__title {
    font-size: 30px;
    letter-spacing: 0.18em;
    margin-bottom: 24px;
  }

  .hero__lead {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  /* --- Sections --- */
  .section {
    padding-top: 85px; /* 見出しテキストの余白込みでデザインの約100pxに一致 */
  }

  .section:last-of-type {
    padding-bottom: 130px;
  }

  .section__inner {
    padding: 0 50px;
  }

  .section__head {
    margin-bottom: 90px;
  }

  .section__label {
    font-size: 22px;
    letter-spacing: 0.22em;
    margin-bottom: 0;
  }

  .section__title {
    font-size: 22px;
    letter-spacing: 0.16em;
    line-height: 1.9;
    margin-bottom: 22px;
  }

  .section__head::after {
    max-width: 100%;
  }

  /* 「四つの時代 ―」で改行(SPのみ) */
  .section__title-break {
    display: block;
  }

  .section__btn-wrap {
    margin-top: 85px;
  }

  /* この宿についてのみボタン上の余白が広い */
  .about .section__btn-wrap {
    margin-top: 110px;
  }

  /* ご予約はボタン上の余白が狭い */
  .booking .section__btn-wrap {
    margin-top: 45px;
  }

  .btn {
    min-width: 238px;
    padding: 8px 32px;
    font-size: 18px;
  }

  /* セクション本文のフォントサイズ(SP) */
  .about__text,
  .staying__desc,
  .neighborhood__desc,
  .booking__text {
    font-size: 16px;
  }

  /* --- THE HOUSE --- */
  .about__row {
    flex-direction: column;
    align-items: center;
    gap: 38px;
  }

  .about__photo {
    flex: none;
    width: min(100%, 380px);
  }

  .about__photo img {
    aspect-ratio: 380 / 300;
  }

  .about__text {
    flex: none;
  }

  /* --- FOUR ERAS --- */
  .eras__list {
    grid-template-columns: 1fr;
    gap: 44px;
    max-width: 282px;
  }

  .eras__caption {
    margin-top: 20px;
    font-size: 16px;
  }

  /* --- STAYING HERE --- */
  .staying__list {
    flex-direction: column;
    align-items: center;
    gap: 42px;
  }

  .staying__item {
    width: auto;
  }

  .staying__icon {
    height: 110px;
    margin-bottom: 24px;
  }

  .staying__text {
    font-size: 16px;
  }

  .staying__desc {
    margin-top: 44px;
  }

  /* --- Carousel --- */
  .carousel {
    margin-bottom: 45px;
  }

  .carousel__track {
    gap: 16px;
  }

  .carousel__slide {
    flex-basis: var(--slide-w, 74%);
  }

  .carousel__dots {
    gap: 18px;
    margin-top: 48px;
  }

  .carousel__dot {
    width: 15px;
    height: 15px;
  }

  /* --- GUEST WORDS --- */
  .guest__list {
    gap: 30px;
  }

  .guest__bubble {
    border-radius: 16px;
    padding: 36px 36px;
  }

  .guest__bubble::after {
    bottom: -25px;
    width: 28px;
    height: 26px;
  }

  .guest__bubble--right::after {
    right: 70px;
  }

  .guest__bubble--left::after {
    left: 70px;
  }

  .guest__en {
    font-size: 22px;
  }

  .guest__ja {
    font-size: 16px;
  }

  .guest__note {
    margin-top: 48px;
    font-size: 14px;
  }

  /* --- Footer --- */
  .footer {
    padding: 48px 24px 44px;
  }

  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .footer__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__logo-mark {
    width: 100px;
    height: 100px;
    margin-bottom: 12px;
  }

  .footer__address {
    margin-top: 48px;
  }

  .footer__nav-list {
    align-items: center;
    gap: 8px;
  }

  .footer__sns {
    align-self: center;
    gap: 36px;
  }

  .footer__sns svg {
    width: 40px;
    height: 40px;
  }

  .footer__copyright {
    margin-top: 48px;
    font-size: 13px;
  }

  /* --- 下層ページヒーロー --- */
  .page-hero {
    height: min(150vw, 75vh);
    min-height: 420px;
  }

  .page-hero__label {
    font-size: 22px;
  }

  .page-hero__title {
    font-size: 22px;
  }

  .page-hero__body::after {
    max-width: calc(100vw - 100px);
    margin-top: 30px;
  }

  /* --- FOUR ERAS page --- */
  .time-dots {
    gap: 18px;
    padding-top: 50px;
  }

  .time-dots span {
    width: 15px;
    height: 15px;
  }

  .fe-text,
  .nb-text,
  .byb-text,
  .ah-text,
  .ac-text {
    font-size: 16px;
  }

  /* --- THE HOUSE page ※アクセスページと共用 --- */
  .ah-sec__head,
  .ac-sec__head {
    margin-bottom: 60px;
  }

  .ah-sec__en,
  .ac-sec__en {
    font-size: 22px;
  }

  .ah-sec__ja,
  .ac-sec__ja {
    font-size: 22px;
    line-height: 1.9;
    margin-bottom: 28px;
  }

  .ah-sec__head::after,
  .ac-sec__head::after {
    max-width: 100%;
  }

  .ah-photo + .ah-photo-caption {
    margin-top: 48px;
  }

  .ah-caption {
    margin-top: 48px;
  }

  .fe-era__head {
    margin-bottom: 60px;
  }

  .fe-era__en {
    font-size: 22px;
  }

  .fe-era__ja {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .fe-era__head::after {
    max-width: 100%;
  }

  .carousel--era {
    margin-bottom: 0;
  }

  .carousel--era .carousel__dots {
    margin-top: 48px;
  }

  .fe-era__caption {
    margin-top: 48px;
  }

  .fe-close__text {
    margin-top: 56px;
  }

  /* --- THE NEIGHBORHOOD page --- */
  .nb-spot__head {
    margin-bottom: 60px;
  }

  .nb-spot__en {
    font-size: 22px;
  }

  .nb-spot__ja {
    font-size: 22px;
    margin-bottom: 28px;
  }

  .nb-spot__head::after {
    max-width: 100%;
  }

  .nb-spot__body {
    flex-direction: column;
    gap: 36px;
  }

  .nb-spot__photo + .nb-spot__body {
    margin-top: 48px;
  }

  .nb-spot__icon {
    width: 96px;
  }

  .nb-spot__text {
    font-size: 16px;
  }

  /* --- BEFORE YOU BOOK page --- */
  .byb-sec__head {
    margin-bottom: 60px;
  }

  .byb-sec__en {
    font-size: 22px;
  }

  .byb-sec__ja {
    font-size: 22px;
    line-height: 1.9;
    margin-bottom: 28px;
  }

  .byb-sec__head::after {
    max-width: 100%;
  }

  .byb-row,
  .ac-row {
    display: block;
    padding: 46px 0 42px;
  }

  .byb-row__head,
  .ac-row__head {
    display: block;
    text-align: center;
  }

  .byb-row__icon,
  .ac-row__icon {
    width: 50px;
    height: 50px;
  }

  .byb-row__label,
  .ac-row__label {
    display: block;
    margin: 24px 0 0;
    font-size: 16px;
  }

  /* PCのみの改行(お支払い・キャンセル)はSPで解除 */
  .byb-br-pc {
    display: none;
  }

  .byb-row__value,
  .ac-row__value {
    margin-top: 24px;
    font-size: 16px;
  }

  /* 短い値(定員)は中央寄せ */
  .byb-row--center .byb-row__value {
    text-align: center;
  }

  /* アクセスページの表は値も中央寄せ */
  .ac-row__value {
    text-align: center;
  }

  /* --- ACCESS page --- */
  .ac-info {
    margin-top: 80px;
  }

  .ac-info__row,
  .ac-info__row:first-child {
    display: block;
    text-align: center;
  }

  .ac-info__row + .ac-info__row {
    margin-top: 56px;
  }

  .ac-info__body {
    margin-top: 24px;
    padding-top: 0;
    font-size: 16px;
    text-align: left;
  }

  .ac-step {
    display: block;
  }

  .ac-step + .ac-step {
    margin-top: 60px;
  }

  .ac-step__photo {
    flex: none;
  }

  .ac-step__body {
    padding-top: 0;
    margin-top: 30px;
    text-align: center;
  }

  .ac-step__num {
    font-size: 22px;
  }

  .ac-step__title {
    margin-top: 16px;
    font-size: 20px;
  }

  .ac-step__text {
    margin-top: 20px;
    font-size: 16px;
    text-align: left;
  }

  .ac-table-note {
    margin-top: 48px;
  }

  .ac-note {
    display: block;
    text-align: center;
  }

  .ac-note__text {
    margin-top: 24px;
    font-size: 16px;
  }

  .byb-note {
    display: block;
  }

  .byb-note + .byb-note {
    margin-top: 80px;
  }

  .byb-note__badge {
    margin: 0 auto;
  }

  .byb-note__title {
    justify-content: center;
    min-height: 0;
    margin-top: 30px;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-align: center;
  }

  .byb-note__text {
    margin-top: 26px;
    font-size: 16px;
  }

  .byb-faq__item + .byb-faq__item {
    margin-top: 75px;
  }

  .byb-faq__q,
  .byb-faq__a {
    display: block;
  }

  .byb-faq__a {
    margin-top: 32px;
  }

  .byb-faq__q-text {
    display: block;
    margin-top: 26px;
    font-size: 20px;
    line-height: 1.9;
  }

  .byb-faq__a-text {
    margin-top: 30px;
    font-size: 16px;
  }

  .to-top {
    right: 20px;
    bottom: 24px;
    width: 46px;
    height: 46px;
  }

  .to-top::before {
    width: 14px;
    height: 14px;
    margin-top: 6px;
  }
}

/* ==========================================================
   英語版（html[lang="en"]）調整
   ナビ項目の英語表記が長いため、PC表示で1行に収める
   ========================================================== */
html[lang="en"] .gnav {
  gap: 26px;
}

html[lang="en"] .gnav__list {
  gap: 24px;
}

html[lang="en"] .gnav__sub {
  gap: 24px;
}

html[lang="en"] .gnav__link,
html[lang="en"] .gnav__lang,
html[lang="en"] .gnav__reserve {
  font-size: 14px;
  white-space: nowrap;
}

html[lang="en"] .gnav__reserve {
  padding: 10px 20px;
  letter-spacing: 0.08em;
}

@media (min-width: 901px) and (max-width: 1220px) {
  html[lang="en"] .header__inner {
    padding: 24px 20px;
  }

  html[lang="en"] .header__logo {
    gap: 10px;
  }

  html[lang="en"] .header__logo-mark {
    width: 44px;
    height: 44px;
  }

  html[lang="en"] .header__logo-name {
    font-size: 17px;
  }

  html[lang="en"] .header__logo-sub {
    font-size: 11px;
  }

  html[lang="en"] .gnav {
    gap: 12px;
  }

  html[lang="en"] .gnav__list {
    gap: 11px;
  }

  html[lang="en"] .gnav__sub {
    gap: 11px;
  }

  html[lang="en"] .gnav__link,
  html[lang="en"] .gnav__lang,
  html[lang="en"] .gnav__reserve {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  html[lang="en"] .gnav__reserve {
    padding: 9px 14px;
  }
}

/* ==========================================================
   英語版（html[lang="en"]）文字サイズ調整
   2026-08-01版デザイン（01_chronos-house_WEB_top_EN.pdf）に合わせた調整。
   英語版は英語ラベル（ゴールド）を大見出しとし、英文サブタイトルを
   ひと回り小さく（PC 25px / SP 20px）表示する。
   本文はPC 22px（SPは16pxのまま）。トップページのデザインを基準に
   下層5ページにも同じルールを適用。
   ========================================================== */

/* --- ヒーロー（英語版トップ） --- */
html[lang="en"] .hero__place {
  font-size: 12px;
}

html[lang="en"] .hero__title {
  font-size: 35px;
}

html[lang="en"] .hero__lead {
  font-size: 12px;
}

/* --- 見出しの行間 ---
   折返し時の行送りをデザイン実測(20px文字で32px=1.6)に合わせて詰める。
   ラベル(ゴールド)・英文サブタイトル共通 */
html[lang="en"] .section__label,
html[lang="en"] .page-hero__label,
html[lang="en"] .ah-sec__en,
html[lang="en"] .ac-sec__en,
html[lang="en"] .fe-era__en,
html[lang="en"] .nb-spot__en,
html[lang="en"] .byb-sec__en,
html[lang="en"] .section__title,
html[lang="en"] .page-hero__title,
html[lang="en"] .ah-sec__ja,
html[lang="en"] .ac-sec__ja,
html[lang="en"] .fe-era__ja,
html[lang="en"] .nb-spot__ja,
html[lang="en"] .byb-sec__ja {
  line-height: 1.6;
}

/* ヒーローもデザイン実測の行送りに(タイトルPC52px/35px=1.5、リード1.7) */
html[lang="en"] .hero__title {
  line-height: 1.5;
}

html[lang="en"] .hero__lead {
  line-height: 1.7;
}

/* --- セクション見出し ---
   英語ラベル（.section__label 等）は30pxのまま、
   英文サブタイトル（日本語版で日本語見出しだった行）を25pxに */
html[lang="en"] .section__title,
html[lang="en"] .page-hero__title,
html[lang="en"] .ah-sec__ja,
html[lang="en"] .ac-sec__ja,
html[lang="en"] .fe-era__ja,
html[lang="en"] .nb-spot__ja,
html[lang="en"] .byb-sec__ja {
  font-size: 25px;
}

/* --- 本文 20px → 22px（ご予約セクションの1行文=booking__textは20pxのまま） --- */
html[lang="en"] .about__text,
html[lang="en"] .staying__desc,
html[lang="en"] .neighborhood__desc,
html[lang="en"] .fe-text,
html[lang="en"] .nb-text,
html[lang="en"] .byb-text,
html[lang="en"] .ah-text,
html[lang="en"] .ac-text,
html[lang="en"] .nb-spot__text,
html[lang="en"] .ac-info__body,
html[lang="en"] .ac-note__text,
html[lang="en"] .byb-row__label,
html[lang="en"] .ac-row__label,
html[lang="en"] .byb-row__value,
html[lang="en"] .ac-row__value,
html[lang="en"] .byb-note__text,
html[lang="en"] .byb-faq__a-text {
  font-size: 22px;
}

/* --- FOUR ERAS カード ---
   行間の詰め(line-height 1.2・margin-top 4px/5px)は共通側で定義
   (デザイン実測の行送り: 英語版PC約35px/SP約29px) */
html[lang="en"] .eras__name-ja {
  font-size: 30px;
}

html[lang="en"] .eras__name-en,
html[lang="en"] .eras__name-year {
  font-size: 25px;
}

html[lang="en"] .eras__caption {
  font-size: 14px;
}

/* --- STAYING HERE アイコン下テキスト（PC/SPとも18px） --- */
html[lang="en"] .staying__text {
  font-size: 18px;
}

/* --- FROM OUR GUESTS 吹き出し（デザインPDF実測値） ---
   本体: PC 774x169px / SP 300x143px（行数によらず高さ固定・テキスト天地中央）
   角丸25px、しっぽ38x33px・端から157px（PC/SP共通） */
html[lang="en"] .guest__list {
  max-width: 774px;
  gap: 62px;
}

html[lang="en"] .guest__bubble {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 169px;
  padding: 20px 56px;
  border-radius: 25px;
}

html[lang="en"] .guest__en {
  line-height: 1.3;
  margin-bottom: 0;
}

html[lang="en"] .guest__bubble::after {
  width: 38px;
  height: 33px;
  bottom: -32px;
}

html[lang="en"] .guest__bubble--right::after {
  right: 157px;
}

html[lang="en"] .guest__bubble--left::after {
  left: 157px;
}

/* --- FROM OUR GUESTS 注記 --- */
html[lang="en"] .guest__note {
  font-size: 20px;
  /* PCは本文カラム(約900px)の右端に揃える（吹き出しより広い・デザイン準拠） */
  max-width: 900px;
}

/* --- フッター（デザインPDF実測） --- */
/* 住所は3行・行間狭め(デザイン実測 約1.6)。3行化はfooter.php側で対応 */
html[lang="en"] .footer__address {
  font-size: 17px;
  line-height: 1.6;
}

html[lang="en"] .footer__copyright {
  font-size: 17px;
}

/* ロゴマーク: PC144px(デザイン実測。共通は130px) */
html[lang="en"] .footer__logo-mark {
  width: 144px;
  height: 144px;
}

/* Instagramアイコン: PC/SPとも36px */
html[lang="en"] .footer__sns svg {
  width: 36px;
  height: 36px;
}

/* --- SP（英語版）---
   ※上記PC指定の方が詳細度が高いため、SPの値をここで再指定する */
@media (max-width: 900px) {

  html[lang="en"] .hero__place {
    font-size: 9px;
  }

  html[lang="en"] .hero__title {
    font-size: 28px;
    line-height: 1.4;
  }

  html[lang="en"] .hero__lead {
    font-size: 9px;
  }

  /* 見出し: 英語ラベル22pxのまま、英文サブタイトルは20px */
  html[lang="en"] .section__title,
  html[lang="en"] .page-hero__title,
  html[lang="en"] .ah-sec__ja,
  html[lang="en"] .ac-sec__ja,
  html[lang="en"] .fe-era__ja,
  html[lang="en"] .nb-spot__ja,
  html[lang="en"] .byb-sec__ja {
    font-size: 20px;
  }

  /* 本文はSPでは16pxのまま */
  html[lang="en"] .about__text,
  html[lang="en"] .staying__desc,
  html[lang="en"] .neighborhood__desc,
  html[lang="en"] .fe-text,
  html[lang="en"] .nb-text,
  html[lang="en"] .byb-text,
  html[lang="en"] .ah-text,
  html[lang="en"] .ac-text,
  html[lang="en"] .nb-spot__text,
  html[lang="en"] .ac-info__body,
  html[lang="en"] .ac-note__text,
  html[lang="en"] .byb-row__label,
  html[lang="en"] .ac-row__label,
  html[lang="en"] .byb-row__value,
  html[lang="en"] .ac-row__value,
  html[lang="en"] .byb-note__text,
  html[lang="en"] .byb-faq__a-text {
    font-size: 16px;
  }

  html[lang="en"] .eras__name-ja {
    font-size: 22px;
  }

  html[lang="en"] .eras__name-en,
  html[lang="en"] .eras__name-year {
    font-size: 20px;
  }

  html[lang="en"] .eras__caption {
    font-size: 13px;
  }

  /* SPは18pxに拡大（日本語版16pxより一回り大きい） */
  html[lang="en"] .staying__text {
    font-size: 18px;
  }

  /* 吹き出し(SP): 高さ143px固定・左右padding26px・しっぽ位置はPCと共通 */
  html[lang="en"] .guest__list {
    gap: 65px;
  }

  html[lang="en"] .guest__bubble {
    min-height: 143px;
    padding: 16px 26px;
  }

  /* 注記はSPでは左揃え */
  html[lang="en"] .guest__note {
    font-size: 16px;
    text-align: left;
  }

  /* ボタンはSPのみ16pxに縮小（PCは20pxのまま） */
  html[lang="en"] .btn {
    font-size: 16px;
  }

  /* --- フッター(SP・デザインPDF実測) --- */
  html[lang="en"] .footer__logo-mark {
    width: 108px;
    height: 108px;
  }

  /* ロゴテキストはSPでは小さめ */
  html[lang="en"] .footer__logo-name {
    font-size: 19px;
  }

  html[lang="en"] .footer__logo-sub {
    font-size: 13px;
  }

  /* 住所は左揃え(ブロックは中央配置のまま) */
  html[lang="en"] .footer__address {
    font-size: 17px;
    text-align: left;
  }

  /* ナビリンクは左揃えのブロックを中央配置、JP/ENのみ中央揃え */
  html[lang="en"] .footer__nav-list {
    align-items: flex-start;
  }

  html[lang="en"] .footer__lang {
    align-self: center;
  }

  html[lang="en"] .footer__sns svg {
    width: 36px;
    height: 36px;
  }

  html[lang="en"] .footer__copyright {
    font-size: 14px;
  }
}

/* ==========================================================
   英語版（html[lang="en"]）罫線・ボタン枠線・改行調整
   2026-08-01版デザインPDFの実測値に合わせた調整。
   - 見出し下の下線: PCは幅400px・太さ2px（太さは共通と同じ）、
     SPは太さ1.5px（デザイン実測1.5px）
   - ボタン枠線: PC4px（Booking.comボタンのみ3px）、SPは3px。
     枠線を太くした分paddingを調整し、ボタンの高さは
     デザインどおりPC50px / SP45pxを維持
   ========================================================== */

/* SPのみ改行するための span（英語版の見出し・吹き出し等で使用） */
@media (max-width: 900px) {
  .sp-break {
    display: block;
    /* デザインどおりの位置で改行し、途中で折り返さない
       (デザインPDFでも見出しの英文はテキストエリアから左右にはみ出して配置) */
    white-space: nowrap;
  }
}

/* --- 見出し下の下線 --- */
html[lang="en"] .section__head::after {
  width: 400px;
}

/* STAYING HEREアイコン下テキストは<br>指定どおりの3行で固定
   (列幅150pxで「dryer, and Wi-Fi」が折り返さないように)
   PCでは3行分の高さを確保し、1行の項目(Up to 7 guests / Noon to noon)も
   上下中央に揃える */
html[lang="en"] .staying__text {
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5.4em; /* 1.8(line-height) x 3行 */
}

/* --- ボタン枠線・文字（PC） ---
   ボタンの文字はデザインどおり太字(Avenir Black相当=700) */
html[lang="en"] .btn {
  border-width: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight: 700;
}

/* Booking.comボタンのみ枠線が細く、文字も太字ではない(PCのみ・デザイン準拠)
   幅もデザインどおり200px(他ボタンより小さめ) */
html[lang="en"] .booking .btn {
  border-width: 3px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 32px;
  padding-right: 32px;
  font-weight: 500;
  min-width: 200px;
  letter-spacing: 0.1em; /* デザイン実測(幅200pxに収める) */
}

/* --- BOOK YOUR STAY セクションの余白(デザインPDF実測) --- */
html[lang="en"] .booking__label-solo {
  margin-bottom: 24px;
}

html[lang="en"] .booking .section__head {
  margin-bottom: 95px;
}

html[lang="en"] .booking .section__btn-wrap {
  margin-top: 85px;
}

/* --- SP --- */
@media (max-width: 900px) {

  /* 見出し下線はSPのみ1.5px（下層ページの見出しにも適用） */
  html[lang="en"] .section__head::after,
  html[lang="en"] .fe-era__head::after,
  html[lang="en"] .nb-spot__head::after,
  html[lang="en"] .ah-sec__head::after,
  html[lang="en"] .ac-sec__head::after,
  html[lang="en"] .byb-sec__head::after {
    height: 1.5px;
  }

  /* SPは縦積みレイアウトのため、テキストの高さ確保(上下中央揃え)は解除 */
  html[lang="en"] .staying__text {
    min-height: 0;
  }

  /* トップページの英語ラベルはSPでも1行表示（デザイン準拠）
     ※「THE NEIGHBORHOOD」等が折り返さないように。
       下層ページのラベル(ah-sec__en等)は長文があるため対象外 */
  html[lang="en"] .section__label {
    white-space: nowrap;
  }

  /* ボタン枠線はSPでは全ボタン3px・高さ45px。
     文字はBooking.com含め全ボタン太字(デザイン準拠) */
  html[lang="en"] .btn,
  html[lang="en"] .booking .btn {
    border-width: 3px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-weight: 700;
  }

  /* BOOK YOUR STAY(SP): 本文は左揃え・Booking.comボタンは幅276px */
  html[lang="en"] .booking__text {
    text-align: left;
  }

  html[lang="en"] .booking .btn {
    min-width: 276px;
  }

  html[lang="en"] .booking__label-solo {
    margin-bottom: 16px;
  }

  html[lang="en"] .booking .section__head {
    margin-bottom: 96px;
  }

  html[lang="en"] .booking .section__btn-wrap {
    margin-top: 36px;
  }
}

/* ==========================================================
   PRIVACY POLICY page(プライバシーポリシー)
   ========================================================== */

/* ヒーロー画像の無いページのため、固定ヘッダーの下に十分な余白を確保する */
.privacy {
  padding-top: 240px;
}

/* 見出し(他の下層ページのセクション見出しと同じ体裁) */
.privacy__head {
  text-align: center;
  margin-bottom: 100px;
}

.privacy__en {
  font-size: 30px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
  margin-bottom: 8px;
}

.privacy__ja {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin-bottom: 42px;
}

.privacy__head::after {
  content: "";
  display: block;
  width: 400px;
  max-width: 80%;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
}

/* 本文(他ページの本文ブロックと同じ横幅・文字サイズ) */
.privacy__body {
  max-width: 900px;
  margin: 0 auto;
  font-size: 20px;
}

.privacy__body a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: opacity 0.3s;
}

.privacy__body a:hover {
  opacity: 0.6;
}

/* 条項ブロック */
.privacy-sec {
  margin-top: 80px;
}

.privacy-sec__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 40, 70, 0.25);
  margin-bottom: 28px;
}

.privacy-sec p + p,
.privacy-sec .privacy-list + p {
  margin-top: 1em;
}

/* 「・」付きの箇条書き(ぶら下げインデント) */
.privacy-list {
  margin-top: 0.5em;
}

.privacy-list li {
  padding-left: 1em;
  text-indent: -1em;
}

.privacy-list li::before {
  content: "・";
}

/* 制定日 */
.privacy__date {
  margin-top: 80px;
}

@media (max-width: 900px) {
  .privacy {
    padding-top: 160px;
  }

  .privacy__head {
    margin-bottom: 60px;
  }

  .privacy__en {
    font-size: 22px;
    letter-spacing: 0.22em;
  }

  .privacy__ja {
    font-size: 22px;
    line-height: 1.9;
    margin-bottom: 28px;
  }

  .privacy__head::after {
    max-width: 100%;
  }

  .privacy__body {
    font-size: 16px;
  }

  .privacy-sec {
    margin-top: 60px;
  }

  .privacy-sec__title {
    font-size: 18px;
    padding-bottom: 10px;
    margin-bottom: 22px;
  }

  .privacy__date {
    margin-top: 60px;
  }
}

/* ----- 英語版(/en/privacy/)の調整(他の英語版ページの文字サイズ・行間に合わせる) ----- */
html[lang="en"] .privacy__en,
html[lang="en"] .privacy__ja {
  line-height: 1.6;
}

html[lang="en"] .privacy__ja {
  font-size: 25px;
}

html[lang="en"] .privacy__body {
  font-size: 22px;
}

@media (max-width: 900px) {
  html[lang="en"] .privacy__ja {
    font-size: 20px;
  }

  html[lang="en"] .privacy__body {
    font-size: 16px;
  }
}

/* ==========================================================
   フッター: コピーライト右隣のプライバシーポリシーリンク
   ========================================================== */

.footer__privacy {
  display: inline-block;
  margin-left: 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: opacity 0.3s;
}

.footer__privacy:hover {
  opacity: 0.6;
}

@media (max-width: 900px) {
  .footer__privacy {
    margin-left: 16px;
    font-size: 10px;
  }
}

/* 英語版はコピーライト(17px/14px)に合わせてひと回り小さく */
html[lang="en"] .footer__privacy {
  font-size: 12px;
}

@media (max-width: 900px) {
  html[lang="en"] .footer__privacy {
    font-size: 11px;
  }
}

/* ==========================================================
   フッター: 住所下のお問い合わせメールアドレス
   ========================================================== */

.footer__mail {
  margin-top: 10px;
  font-size: 16px;
}

.footer__mail a {
  transition: opacity 0.3s;
}

.footer__mail a:hover {
  opacity: 0.6;
}

/* 英語版は住所(17px)に合わせる */
html[lang="en"] .footer__mail {
  font-size: 17px;
}