/*
Theme Name: 岩倉鉱泉 Official Theme
Author: Rie
Description: 岩倉鉱泉の公式サイト用オリジナルWordPressテーマ
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: iwakurakosen
*/

/* ==========================================================================
   Variables
   SP（〜768px）を初期値とし、769px以上で PC の値に上書きする
   ========================================================================== */

:root {
  /* Color */
  --color-main: #af2b50;
  --color-main-light: #b53e5f;
  --color-main-dark: #8c2240;
  --color-text: #2b2323;
  --color-text-sub: rgba(43, 35, 35, 0.6);
  --color-white: #ffffff;
  --color-bg: #fbfbfa;
  --color-bg-paper: #f5f3ef;
  --color-bg-beige: #edebe5;
  --color-border: #999797;
  --color-border-light: #afafaf;
  --color-overlay: rgba(43, 35, 35, 0.2);
  --color-overlay-dark: rgba(0, 0, 0, 0.8);

  /* Font family */
  --ff-base: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ff-en: "Crimson Text", "Times New Roman", serif;

  /* Font weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Font size */
  --fs-heading-xl: 1.75rem;   /* 28px 下層ページタイトル */
  --fs-heading-lg: 1.5rem;    /* 24px セクション見出し */
  --fs-heading-md: 1.25rem;   /* 20px */
  --fs-heading-sm: 1.125rem;  /* 18px カード見出し */
  --fs-heading-xs: 1rem;      /* 16px */
  --fs-lead: 1.125rem;        /* 18px キャッチコピー */
  --fs-text-lg: 0.875rem;     /* 14px */
  --fs-text-md: 0.875rem;     /* 14px ナビ・ボタン・注記 */
  --fs-body: 0.9375rem;       /* 15px 本文。全画面幅で共通 */
  --fs-text-sm: 0.75rem;      /* 12px */
  --fs-text-xs: 0.75rem;      /* 12px */
  --fs-link: 0.9375rem;       /* 15px もっと見る・お知らせタイトル */
  --fs-button: 1rem;          /* 16px */
  --fs-en-lg: 0.8125rem;      /* 13px */
  --fs-en-md: 0.75rem;        /* 12px */
  --fs-en-sm: 0.6875rem;      /* 11px */

  /* Line height */
  --lh-none: 1;
  --lh-tight: 1.1;
  --lh-heading: 1.4;
  --lh-snug: 1.6;
  --lh-relaxed: 1.8;
  --lh-body: 1.8;

  /* Letter spacing */
  --ls-sm: 0.05em;
  --ls-md: 0.1em;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;

  --section-space-xl: 80px;
  --section-space-lg: 80px;
  --section-space-md: 60px;
  --gap-title-content: 25px;
  --gap-content-action: 36px;

  /* Layout */
  --container-gutter: 20px;
  --container-max: 1200px;
  --container-max-md: 1120px;
  --container-max-sm: 826px;

  /* Shape */
  --radius-pill: 100px;
  --radius-circle: 50%;
  --border-thin: 0.6px;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 0.3s;
  --duration-base: 0.6s;
  --duration-slow: 1.2s;
  --duration-slower: 2s;

  /* Z-index */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

@media (min-width: 769px) {
  :root {
    --fs-heading-xl: clamp(2rem, 2.64vw, 2.375rem);  /* 〜38px */
    --fs-heading-lg: clamp(1.75rem, 2.22vw, 2rem);   /* 〜32px */
    --fs-lead: 1.25rem;                              /* 20px */
    --fs-text-lg: 0.9375rem;                         /* 15px */
    --fs-text-sm: 0.8125rem;                         /* 13px */
    --fs-link: 0.875rem;                             /* 14px */
    --fs-en-lg: 1rem;                                /* 16px */
    --fs-en-md: 0.8125rem;                           /* 13px */

    --lh-relaxed: 1.9;
    --lh-body: 2;

    --section-space-xl: clamp(120px, 13.89vw, 200px);
    --section-space-lg: clamp(80px, 8.33vw, 120px);
    --section-space-md: 80px;
    --gap-title-content: 48px;
    --gap-content-action: 56px;

    --container-gutter: clamp(40px, 5.56vw, 80px);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

:where(html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: var(--ff-base);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* iOS Safari が時刻・電話番号などを自動認識して付ける点線下線とリンク色を消す。
   自前の tel リンクには当てない。 */
a[x-apple-data-detectors],
a[href^="x-apple-data-detectors"],
abbr[title] {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  pointer-events: none;
}

/* 本文（説明文・段落）。見出し・ボタンは各クラスの指定を維持する */
.top-text__description,
.c-intro__text,
.c-split__text,
.c-media-text__text,
.c-spec__desc,
.feature-card__text,
.sightseeing-card__text,
.information-list__description,
.reviews-item__text,
.contact__text,
.ingredients-card__text,
.entry-content,
.p-access-parking__text,
.p-access-card__text,
.p-space-room__note,
.p-space-room__desc,
.p-space-highlights__text,
.p-space-seasons__text,
.p-space-season__text,
.p-space-dryer__text,
.p-stay-about__text,
.p-stay-fee__text,
.p-stay-child__text,
.p-stay-notes,
.p-cuisine-ingredients__text,
.p-cuisine-dining__text,
.p-notfound__text,
.p-contact-reserve__text,
.p-mineralspring-dryer__text,
.p-concept-particular__text,
.p-concept-history__text {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
}

/* 背景画像単体には opacity を掛けられないため、疑似要素でテクスチャを重ねる */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/common-bg-washi.webp") repeat;
  opacity: 0.05;
  pointer-events: none;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, picture) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(button) {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

:where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Utility
   ========================================================================== */

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

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--md {
  max-width: calc(var(--container-max-md) + var(--container-gutter) * 2);
}

.container--sm {
  max-width: calc(var(--container-max-sm) + var(--container-gutter) * 2);
}

/* ==========================================================================
   Component: section-title
   ========================================================================== */

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}

/* 下線側の余白は、ベースライン〜下線を Figma と同じ 5px にするためフォントのディセンダー分を差し引いた値 */
.section-title__en {
  padding-block: 4px 2.5px;
  padding-inline: 2px;
  white-space: nowrap;
  font-family: var(--ff-en);
  font-size: var(--fs-en-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-none);
  color: var(--color-main);
  border-block-end: 1px solid currentColor;
}

.section-title__ja {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.section-title--left {
  align-items: flex-start;
  text-align: left;
}

/* 縦書き：DOM は英字→和文の順のまま、表示は和文（左）・英字（右） */
.section-title--vertical {
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
}

.section-title--vertical .section-title__en,
.section-title--vertical .section-title__ja {
  writing-mode: vertical-rl;
}

.section-title--small .section-title__ja {
  font-size: 1.375rem;
}

/* 中央配置の縦書き：英字を和文の右に絶対配置し、見出しの幅＝和文の幅にして和文の左右中心を親の中心に揃える */
.section-title--center {
  position: relative;
}

.section-title--center .section-title__en {
  position: absolute;
  top: 0;
  left: calc(100% + var(--space-12));
}

@media (max-width: 768px) {
  .section-title--center-sp {
    position: relative;
  }

  .section-title--center-sp .section-title__en {
    position: absolute;
    top: 0;
    left: calc(100% + var(--space-12));
  }
}

.section-title--white .section-title__en,
.section-title--white .section-title__ja {
  color: var(--color-white);
}

@media (min-width: 769px) {
  .section-title__en {
    font-weight: var(--fw-semibold);
  }

  .section-title--small .section-title__ja {
    font-size: 1.5rem;
    line-height: var(--lh-tight);
  }
}

/* ==========================================================================
   Component: icon-arrow
   ========================================================================== */

.icon-arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 6px;
  background-color: currentColor;
  -webkit-mask: url("img/common-icon-arrow-right-black.svg") no-repeat center / contain;
  mask: url("img/common-icon-arrow-right-black.svg") no-repeat center / contain;
  transition: transform var(--duration-base) var(--ease-out);
}

/* ==========================================================================
   Component: btn
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  padding: var(--space-16) 36px;
  font-size: var(--fs-button);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--color-white);
  text-align: center;
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-base) var(--ease-out),
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

.btn--block {
  width: 100%;
}

.btn--square {
  font-size: var(--fs-text-md);
  letter-spacing: var(--ls-md);
  border-radius: 0;
}

.btn--dark {
  background-color: var(--color-text);
  border-color: var(--color-text);
}

@media (hover: hover) {
  .btn:hover {
    color: var(--color-main);
    background-color: transparent;
  }

  .btn--square:hover {
    color: var(--color-white);
    background-color: var(--color-main-light);
    border-color: var(--color-main-light);
  }

  .btn--dark:hover {
    color: var(--color-text);
    background-color: transparent;
  }
}

/* ==========================================================================
   Component: btn-readmore
   ========================================================================== */

.btn-readmore {
  --btn-readmore-duration: 0.5s;
  --btn-readmore-spacing: 0.1em;

  display: inline-flex;
  /* 下線や余白ではなく、line-height: 1 の文字箱と赤丸の中心を揃える */
  align-items: center;
  gap: 10px;
}

.btn-readmore__text {
  position: relative;
  top: 1px;
  padding: 0;
  font-size: var(--fs-link);
  font-weight: var(--fw-medium);
  line-height: 1;
  transition:
    letter-spacing var(--btn-readmore-duration) var(--ease-out),
    margin-right var(--btn-readmore-duration) var(--ease-out);
}

/* ホバー時は右へ縮んで消え、ホバー解除時は左から伸びて戻る。
   太さは --hairline（整数 DPR では 1px）。文字箱の下へ 6px 空けて置く（前回の 4px から 2px 広い） */
.btn-readmore__text::after {
  content: "";
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: var(--hairline, 1px);
  background-color: currentColor;
  transform-origin: left center;
  transition: transform var(--btn-readmore-duration) var(--ease-out);
}

.btn-readmore__arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  color: var(--color-white);
  background-color: var(--color-main);
  border: 1px solid var(--color-main);
  border-radius: var(--radius-circle);
  transition:
    color var(--btn-readmore-duration) var(--ease-out),
    background-color var(--btn-readmore-duration) var(--ease-out),
    transform var(--btn-readmore-duration) var(--ease-out);
}

@media (hover: hover) {
  /* 右寄せ配置でも文字が右へ広がるよう、字間の増加分（文字数 × 字間）を右マージンで相殺する。文字数は js/main.js が付与 */
  .btn-readmore:hover .btn-readmore__text {
    margin-right: calc(var(--btn-readmore-chars, 0) * var(--btn-readmore-spacing) * -1);
    letter-spacing: var(--btn-readmore-spacing);
  }

  .btn-readmore:hover .btn-readmore__text::after {
    transform: scaleX(0);
    transform-origin: right center;
  }

  .btn-readmore:hover .btn-readmore__arrow {
    color: var(--color-main);
    background-color: transparent;
    transform: translateX(8px);
  }
}

/* ==========================================================================
   Component: card-label（カード上の縦書きラベル）
   ========================================================================== */

.card-label {
  position: absolute;
  z-index: 1;
  padding: var(--space-8);
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--color-white);
  background-color: var(--color-text);
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* ==========================================================================
   Component: tag
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-sm);
  background-color: var(--color-bg-beige);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Component: feature-card
   ========================================================================== */

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  max-width: 322px;
}

.feature-card__img {
  width: 250px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-circle);
}

.feature-card__label {
  top: 0;
  left: 47px;
}

.feature-card__text {
  align-self: stretch;
  line-height: var(--lh-relaxed);
  text-align: justify;
}

@media (min-width: 769px) {
  .feature-card {
    gap: var(--space-32);
    max-width: 348px;
  }

  .feature-card__img {
    width: 323px;
  }

  .feature-card__label {
    left: 43px;
  }

  .feature-card__text {
    line-height: var(--lh-body);
    text-align: left;
  }
}

/* ==========================================================================
   Component: sightseeing-card
   ========================================================================== */

.sightseeing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 100%;
  max-width: 322px;
}

.sightseeing-card__img {
  width: 100%;
  aspect-ratio: 322 / 203;
  object-fit: cover;
}

.sightseeing-card__label {
  top: -20px;
  left: 20px;
}

.sightseeing-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.sightseeing-card__title {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.sightseeing-card__text {
  line-height: var(--lh-relaxed);
}

@media (min-width: 769px) {
  .sightseeing-card {
    gap: var(--space-24);
    max-width: 356px;
  }

  .sightseeing-card__img {
    aspect-ratio: 356 / 218;
  }

  .sightseeing-card__label {
    top: -40px;
  }

  .sightseeing-card__text {
    line-height: var(--lh-body);
  }
}

/* ==========================================================================
   Component: ingredients-card
   ========================================================================== */

.ingredients-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: 356px;
}

.ingredients-card__img {
  width: 100%;
  aspect-ratio: 356 / 218;
  object-fit: cover;
}

.ingredients-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ingredients-card__title {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

/* ==========================================================================
   Component: news-list（TOPページ お知らせ）
   <ul class="news-list"> > <li class="news-list__item"> > <a class="news-list__link">
   ========================================================================== */

.news-list__item {
  border-bottom: 1px solid var(--color-border);
}

.news-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-20) var(--space-24) 0;
}

.news-list__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
}

.news-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.news-list__category {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  white-space: nowrap;
}

/* 太さは 1px のまま。Figma の線は Text/Black（#2B2323）の 0.6px なので、同じ色の 60% で濃さを合わせる */
.news-list__category::before {
  content: "";
  flex: none;
  align-self: center;
  box-sizing: content-box;
  width: 0;
  height: 12px;
  border-left: 1px solid var(--color-text-sub);
}

.news-list__title {
  font-size: var(--fs-link);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
}

.news-list__empty,
.news-main__empty {
  width: 100%;
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

/* 769px以上：行をまたいで列を共有し、いちばん長いカテゴリー名の幅でタイトルの左端を揃える */
@media (min-width: 769px) {
  .news-list {
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
    column-gap: var(--space-20);
  }

  .news-list__item,
  .news-list__link,
  .news-list__body,
  .news-list__meta {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: var(--space-20);
    row-gap: 0;
  }

  .news-list__item,
  .news-list__link {
    grid-column: 1 / -1;
  }

  .news-list__body {
    grid-column: 1 / 4;
  }

  .news-list__meta {
    grid-column: 1 / 3;
  }

  .news-list__link {
    padding-block: var(--space-32);
  }

  .news-list__date {
    grid-column: 1;
  }

  .news-list__category {
    grid-column: 2;
    justify-self: start;
    gap: var(--space-20);
    width: max-content;
  }

  /* 列間の 20px に足して、カテゴリーとタイトルの間隔を Figma の 60px（狭い幅では 32px）にする */
  .news-list__title {
    grid-column: 3;
    min-width: 0;
    margin-left: calc(clamp(32px, 4.17vw, 60px) - var(--space-20));
  }

  .news-list__link > .icon-arrow {
    grid-column: 4;
  }
}

@media (hover: hover) {
  .news-list__link:hover .icon-arrow {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   Component: news-main-item（お知らせ一覧）
   <ul class="news-main"> > <li class="news-main-item"> > <a class="news-main-item__link">
   ========================================================================== */

.news-main-item {
  border-bottom: 1px solid var(--color-border);
}

.news-main-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  padding: var(--space-20) 0;
}

.news-main-item__thumb {
  flex-shrink: 0;
  width: 124px;
  aspect-ratio: 275 / 180;
  object-fit: cover;
  background-color: var(--color-white);
}

.news-main-item__inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-width: 0;
}

.news-main-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.news-main-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.news-main-item__category {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-main-item__category::before {
  content: "";
  width: var(--border-thin);
  height: 12px;
  background-color: var(--color-border);
}

.news-main-item__title {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-align: justify;
}

@media (min-width: 769px) {
  .news-main-item:first-child {
    border-top: 1px solid var(--color-border);
  }

  .news-main-item__link {
    gap: var(--space-32);
    padding: var(--space-32) 30px;
  }

  .news-main-item__thumb {
    width: clamp(180px, 19.1vw, 275px);
  }

  .news-main-item__inner {
    padding-inline: 10px;
  }

  .news-main-item__body {
    gap: var(--space-24);
  }

  .news-main-item__meta,
  .news-main-item__category {
    gap: var(--space-20);
    line-height: var(--lh-none);
  }
}

@media (hover: hover) {
  .news-main-item__link:hover .icon-arrow {
    transform: translateX(4px);
  }
}

/* ==========================================================================
   Component: information-list（ご利用時間などの定義リスト）
   <dl class="information-list"> > <div class="information-list__item"> > dt / dd
   ========================================================================== */

.information-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-20) 0;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid var(--color-border);
}

.information-list__title {
  flex-shrink: 0;
  width: 84px;
}

.information-list__description {
  flex: 1;
  line-height: var(--lh-relaxed);
  text-align: justify;
}

@media (min-width: 769px) {
  .information-list__item {
    gap: 0;
    padding-inline: 10px;
  }

  .information-list__title {
    width: 180px;
  }

  .information-list__description {
    line-height: var(--lh-body);
    text-align: left;
  }
}

/* ==========================================================================
   Component: reviews-item（お客様の声）
   ========================================================================== */

.reviews-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.reviews-item__img {
  width: 100%;
  aspect-ratio: 534 / 158;
  object-fit: cover;
}

.reviews-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.reviews-item__review,
.reviews-item__reply {
  display: flex;
  flex-direction: column;
}

.reviews-item__review {
  gap: var(--space-16);
}

.reviews-item__reply {
  gap: var(--space-12);
}

.reviews-item__title {
  padding-bottom: var(--space-8);
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  border-bottom: 1px solid var(--color-text);
}

.reviews-item__subtitle {
  font-size: var(--fs-heading-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

@media (min-width: 769px) {
  .reviews-item {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(var(--space-32), 3.89vw, var(--space-56));
  }

  .reviews-item__img {
    flex: 0 1 534px;
    min-width: 0;
    margin-top: var(--space-8);
  }

  .reviews-item__body {
    flex: 0 1 530px;
    gap: var(--space-24);
  }

  .reviews-item__review {
    gap: var(--space-12);
  }

  .reviews-item__reply {
    gap: var(--space-8);
  }

  .reviews-item__title {
    line-height: var(--lh-snug);
  }
}

/* ==========================================================================
   Motion: fade-in（js/main.js がスクロールで --visible を付与）
   ========================================================================== */

.js .fade-in {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.js .fade-in--visible {
  opacity: 1;
  transform: translateZ(0);
}

/* ==========================================================================
   Layout: header
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--color-white);
  transition: color var(--duration-base) var(--ease-out);
}

.header::before,
.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.header::before {
  background: linear-gradient(180deg, rgba(19, 10, 10, 0.6) 0%, rgba(19, 10, 10, 0) 100%);
}

.header::after {
  background-color: var(--color-white);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: 28px var(--container-gutter);
  transition: padding var(--duration-base) var(--ease-out);
}

.header__logo {
  flex-shrink: 0;
  width: 139px;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-base);
}

.header__logo-link {
  display: grid;
}

.header__logo-img {
  grid-area: 1 / 1;
  width: 100%;
  transition: opacity var(--duration-base) var(--ease-out);
}

.header__logo-img--black {
  opacity: 0;
}

.header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}

.header__nav,
.header__cta {
  display: none;
}

.header__nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 30px;
}

.header__nav-link {
  display: block;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-out);
}

/* 〜1199px：スクロール前後で位置を変えず、右上に固定表示する。
   transform でずらすと iOS で mix-blend-mode の対象から外れ、線も半ピクセルで太る */
.header__menu-btn {
  position: absolute;
  top: 16px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 82px;
  height: 54px;
}

.header__menu-icon {
  position: relative;
  display: block;
  width: 46px;
  height: 13px;
  overflow: visible;
}

/* 3本線の位置は CSS だけで決める。JS の top 上書きに依存しない */
.header__menu-line {
  display: block;
  position: absolute;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: var(--hairline, 1px);
  margin: 0;
  padding: 0;
  background-color: currentColor;
  transform: translateY(0) rotate(0deg);
  transform-origin: center center;
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.4s var(--ease-out),
    width var(--duration-base) var(--ease-out);
}

.header__menu-line:nth-child(1) {
  top: 0;
}

.header__menu-line:nth-child(2) {
  top: 6px;
  width: 28px;
}

.header__menu-line:nth-child(3) {
  top: 12px;
}

/* SP・タブレットのみ。Figma の閉じるアイコン（41×11・約15度）と同じ平たい× */
@media (max-width: 1199px) {
  .header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(1),
  .header__menu-btn[aria-expanded="true"] .header__menu-line:nth-child(3) {
    left: 2px;
    width: 42px;
  }

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

  .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(-6px) rotate(-15deg);
  }
}

@media (min-width: 769px) {
  .header::before {
    opacity: 1;
  }

  .header__inner {
    padding-block: 24px;
  }

  .header__logo {
    width: 160px;
    padding-top: var(--space-8);
  }

  /* 明朝の字面がベースライン寄りで下がって見えるため、高さ48pxを保ったまま上下パディングを1px入れ替える */
  .header__cta {
    display: inline-flex;
    padding-block: 15px 17px;
    margin-left: var(--space-4);
    transition:
      color var(--duration-base) var(--ease-out),
      background-color var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      opacity var(--duration-base) var(--ease-out),
      visibility var(--duration-base);
  }
}

/* タブレット：右上に固定したメニューボタンの分だけ、予約ボタンを左に逃がす */
@media (min-width: 769px) and (max-width: 1199px) {
  .header__utility {
    padding-right: 77px;
  }

  .header__menu-btn {
    top: 21px;
    right: calc(var(--container-gutter) - 16px);
  }

  /* 黒の透過グラデーションは、ロゴと予約ボタンが消え始める位置から
     ベージュがヘッダーに届く位置までスクロールに合わせて消す（--header-shade） */
  .header::before {
    opacity: var(--header-shade, 1);
    transition: none;
  }

  /* KV の 2/3 でロゴと予約ボタンを同時に消す。ベージュにかかってから色反転で緑にならないようにする */
  .header--cta-out .header__logo,
  .header--cta-out .header__cta {
    visibility: hidden;
    opacity: 0;
  }
}

/* SP・タブレットの追従時：ロゴと予約ボタンを隠し、メニューアイコンだけを差分描画で下地に応じて白黒反転させる。
   header が固定配置で重なり順の基準になるため、mix-blend-mode は header 自体に掛ける。
   祖先に isolation を付けると反転先がページではなくなり、白のまま残る */
@media (max-width: 1199px) {
  .header--follow {
    pointer-events: none;
    mix-blend-mode: difference;
  }

  .header--follow::before {
    opacity: 0;
  }

  .header--follow .header__logo,
  .header--follow .header__cta {
    visibility: hidden;
    opacity: 0;
  }

  .header--follow .header__menu-btn {
    pointer-events: auto;
  }
}

/* ロゴ・メニュー・閉じるボタン等：クリック後の赤枠を出さない */
.header :is(a, button):focus,
.header :is(a, button):focus-visible,
.drawer :is(a, button):focus,
.drawer :is(a, button):focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
}

/* 開いているあいだはブレンドを止め、ハンバーガーは閉じるボタンの下に残さない */
.header--menu-open,
.header--follow.header--menu-open {
  mix-blend-mode: normal;
  pointer-events: none;
}

.header__menu-btn[aria-expanded="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.header--menu-open::before,
.header--menu-open::after,
.header--follow.header--menu-open::before,
.header--follow.header--menu-open::after,
.header--menu-open .header__logo,
.header--menu-open .header__nav,
.header--menu-open .header__cta {
  opacity: 0;
  visibility: hidden;
}

/* SP：開くときだけ3本線→平たい×。閉じるときは即座に3本線へ戻す。
   交差の形は上の 15度・幅42px。回転軸は中央のまま */
@media (max-width: 768px) {
  .header--menu-open {
    z-index: calc(var(--z-drawer) + 1);
    color: var(--color-text);
  }

  /* 変形が見えるあいだは残し、動きが終わってから隠す */
  .header__menu-btn[aria-expanded="true"] {
    visibility: hidden;
    opacity: 0;
    pointer-events: auto;
    transition:
      visibility 0s linear 0.45s,
      opacity 0s linear 0.45s;
  }

  .header__menu-btn:not([aria-expanded="true"]) {
    transition: none;
  }

  .header__menu-btn[aria-expanded="true"] .header__menu-line {
    transition:
      transform 0.45s var(--ease-out),
      opacity 0.4s var(--ease-out),
      width var(--duration-base) var(--ease-out),
      left 0.45s var(--ease-out);
  }

  .header__menu-btn:not([aria-expanded="true"]) .header__menu-line {
    transition: none;
  }
}

/* PC・タブレット：中央の短い線を、上下と同じ長さまで伸ばす */
@media (hover: hover) and (min-width: 769px) {
  .header__menu-btn:hover .header__menu-line:nth-child(2) {
    width: 100%;
  }
}

/* 1200px未満はロゴとナビが近づく前にハンバーガーへ切り替える */
@media (min-width: 1200px) {
  .header__nav {
    display: block;
  }

  .header__menu-btn {
    position: static;
    width: auto;
    height: auto;
    padding-block: var(--space-8);
    transform: none;
  }

  .header--follow {
    color: var(--color-text);
  }

  .header--follow::before {
    opacity: 0;
  }

  .header--follow::after {
    opacity: 1;
  }

  .header--follow .header__inner {
    padding-block: 12px;
  }

  .header--follow .header__logo {
    padding-top: var(--space-4);
  }

  .header--follow .header__logo-img--white {
    opacity: 0;
  }

  .header--follow .header__logo-img--black {
    opacity: 1;
  }

  .header--follow .header__menu-line:nth-child(2) {
    width: 28px;
  }
}

@media (hover: hover) {
  .header__nav-link:hover {
    opacity: 0.8;
  }

  .header--follow .header__nav-link:hover {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Layout: drawer
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  transition: visibility 0s linear var(--duration-slow);
}

.drawer--open {
  visibility: visible;
  transition-delay: 0s;
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay-dark);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.drawer__panel {
  position: absolute;
  inset: 0;
  padding: 70px 40px 80px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-white);
  opacity: 0;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.drawer--open .drawer__overlay,
.drawer--open .drawer__panel {
  opacity: 1;
}

.drawer__close {
  position: absolute;
  top: 35px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.drawer__close-icon {
  position: relative;
  width: 41px;
  height: 11px;
}

.drawer__close-icon::before,
.drawer__close-icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 1px;
  margin: 0;
  background-color: currentColor;
  transform: translate(-50%, -50%) rotate(15deg);
  transform-origin: center center;
}

.drawer__close-icon::after {
  transform: translate(-50%, -50%) rotate(-15deg);
}

.drawer__close-text {
  display: none;
}

/* SPの閉じる×を、開く前のハンバーガー（82×54・translate(-4px, 16px)）の中心に重ねる */
@media (max-width: 768px) {
  .drawer__close {
    top: 16px;
    right: 4px;
    width: 82px;
    height: 54px;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: none;
  }

  .drawer--open .drawer__close {
    visibility: visible;
    opacity: 1;
    transition:
      visibility 0s linear 0.45s,
      opacity 0s linear 0.45s;
  }
}

.drawer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

.drawer__logo {
  width: 176px;
}

.drawer__nav {
  width: 100%;
}

.drawer__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 18px var(--space-20) 18px var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.drawer__nav-text {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.drawer__nav-ja {
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none);
}

.drawer__nav-en {
  font-family: var(--ff-en);
  font-size: var(--fs-text-xs);
  line-height: var(--lh-none);
  color: var(--color-text-sub);
}

.drawer__contact {
  display: none;
}

@media (min-width: 769px) {
  .drawer__panel {
    left: auto;
    width: min(100%, max(59.72vw, 720px));
    padding: 120px clamp(40px, 6.94vw, 100px) 160px;
    opacity: 1;
    transform: translateX(100%);
  }

  .drawer--open .drawer__panel {
    transform: none;
  }

  .drawer__close {
    top: 64px;
    right: 51px;
  }

  .drawer__close-text {
    display: block;
  }

  .drawer__content {
    gap: 88px;
  }

  .drawer__nav {
    width: auto;
  }

  .drawer__nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: var(--space-32) clamp(60px, 8.33vw, 120px);
  }

  .drawer__nav-link {
    padding: 0;
    border-bottom: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }

  .drawer__nav-ja {
    font-weight: var(--fw-medium);
  }

  .drawer__nav-en,
  .drawer__nav-arrow {
    display: none;
  }

  .drawer__contact {
    display: block;
    margin-top: var(--space-32);
  }

  /* PCドロワー下部：電話｜縦線｜公式LINE を折り返さず1行に保つ */
  .drawer__contact .contact-cta {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  .drawer__contact .contact-cta__group {
    flex: none;
  }

  .drawer__contact .contact-cta__label {
    white-space: nowrap;
  }
}

/* ドロワー内の実効幅が狭い区間（ThinkPad / iPad横〜一般ノートPC）。
   間隔・文字・ボタン幅を少し詰め、電話｜縦線｜公式LINE を1行に収める */
@media (min-width: 769px) and (max-width: 1439px) {
  .drawer__panel {
    padding-inline: clamp(40px, 5vw, 72px);
  }

  .drawer__contact .contact-cta {
    gap: 20px 16px;
  }

  .drawer__contact .contact-cta__group--line {
    padding-left: 16px;
  }

  .drawer__contact .contact-cta__label {
    font-size: 0.8125rem;
  }

  .drawer__contact .contact-cta__tel-prefix {
    font-size: 1rem;
  }

  .drawer__contact .contact-cta__tel-number {
    font-size: 1.75rem;
  }

  .drawer__contact .contact-cta__btn {
    width: auto;
    min-width: 0;
    padding-inline: 24px;
    white-space: nowrap;
  }
}

@media (hover: hover) {
  .drawer__nav-link:hover {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Component: contact-cta（電話・LINE の問い合わせ導線）
   ========================================================================== */

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24) 39px;
}

.contact-cta__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-cta__group--line {
  gap: 17px;
  padding-left: 39px;
  border-left: 1px solid var(--color-border-light);
}

.contact-cta__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.contact-cta__icon {
  width: 17px;
  height: 17px;
}

.contact-cta__tel {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.contact-cta__tel-prefix {
  font-size: 1.2rem;
}

.contact-cta__tel-number {
  font-size: 2.05rem;
  letter-spacing: 0.06em;
}

.contact-cta__note {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-heading);
  letter-spacing: 0.3em;
  text-align: right;
}

.contact-cta__btn {
  width: 262px;
}

/* ==========================================================================
   Layout: contact（ご予約・お問い合わせ セクション）
   ========================================================================== */

.contact {
  padding-block: var(--section-space-xl);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-title-content);
}

.contact__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-content-action);
  width: 100%;
}

/* 明朝の字面がベースライン寄りで下がって見えるため、ボタンの高さを保ったまま文字だけ 1px 上げる */
.contact__btn {
  width: 100%;
  max-width: 322px;
  padding-block: 15px 17px;
}

@media (min-width: 769px) {
  .contact__text {
    text-align: center;
  }

  .contact__btn {
    width: 312px;
  }
}

/* ==========================================================================
   Layout: footer
   ========================================================================== */

.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 52px 56px 120px;
  background-color: var(--color-bg-beige);
}

.footer::after {
  content: "";
  position: absolute;
  top: 225px;
  right: -122px;
  z-index: -1;
  width: 248px;
  aspect-ratio: 392 / 390;
  background: url("img/common-bg-circle-brush.svg") no-repeat center / contain;
  pointer-events: none;
}

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

.footer__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}

.footer__logo {
  width: 176px;
}

.footer__address {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  font-size: var(--fs-text-md);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.footer__btn,
.footer__nav {
  display: none;
}

.footer__btn {
  padding-block: 15px 17px;
}

.footer__copyright {
  margin-top: 14px;
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

.footer__copyright small {
  font-size: inherit;
}

@media (min-width: 769px) {
  .footer {
    padding: 120px var(--container-gutter);
  }

  .footer::after {
    top: 309px;
    right: -112px;
    width: 392px;
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-40);
    max-width: 1200px;
    margin-inline: auto;
  }

  .footer__info {
    align-items: stretch;
    width: 252px;
  }

  .footer__address {
    align-items: flex-start;
  }

  .footer__btn {
    display: inline-flex;
    margin-top: var(--space-12);
  }

  .footer__nav {
    display: block;
  }

  .footer__nav-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    gap: 25px clamp(40px, 6.94vw, 100px);
  }

  .footer__nav-link {
    font-size: var(--fs-text-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    transition: opacity var(--duration-fast) var(--ease-out);
  }
}

@media (hover: hover) {
  .footer__nav-link:hover {
    opacity: 0.6;
  }
}

/* ==========================================================================
   Layout: follow-cta（SP 画面下部に固定する電話・予約ボタン）
   ========================================================================== */

.follow-cta {
  position: fixed;
  right: var(--space-20);
  bottom: 36px;
  left: var(--space-20);
  z-index: var(--z-header);
  display: flex;
  height: 52px;
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  color: var(--color-white);
}

.follow-cta__tel,
.follow-cta__reserve {
  display: flex;
  align-items: center;
  justify-content: center;
}

.follow-cta__tel {
  flex: 0 0 107px;
  gap: var(--space-4);
  background-color: var(--color-main-dark);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.follow-cta__icon {
  width: 18px;
  height: 18px;
}

.follow-cta__label {
  transform: translateY(-1px);
}

.follow-cta__reserve {
  flex: 1;
  background-color: var(--color-main);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

@media (min-width: 768px) {
  .follow-cta {
    display: none;
  }
}