/* YadYad 共通スタイル（Figma: yadyad / 261029_design）
   フォント代替：FOT-TsukuGo Pro B → Zen Kaku Gothic New 700、Futura Demibold → Jost 600
   （本番でTsukuGo・Futuraを使う場合は --font-head / --font-en を差し替える） */
:root {
  --black: #000;
  --white: #fff;
  --yellow: #fff100;
  --beige1: #d9d6d2;
  --beige2: #cfc9c0;
  --gray-text: #5c574f;
  --line: #b5ada3;
  --font-jp: "Noto Sans JP", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-en: "Jost", "Futura", "Century Gothic", sans-serif;
  --gutter: 50px;
  --content: 1340px;
}
@media (max-width: 767px) {
  :root { --gutter: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-jp);
  font-size: 18px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal; /* 自動カーニング：英字の組み合わせごとの詰め */
  font-feature-settings: "palt" 1; /* 日本語のプロポーショナル詰め（かな・約物の空きを詰める） */
}
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* スマホで写真を差し替える picture はレイアウト上は無いものとして扱う */
picture > source { display: none; } /* display: contents だと source が並びの1つとして数えられ、gap が余計に入るため */
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

.container { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 見出し ---------- */
/* 見出しの最後の行が1〜2文字だけになるのを防ぐ（改行位置は文節で） */
h1, h2, h3, .h1, .h2, .h3 { text-wrap: pretty; word-break: auto-phrase; }
.h1 { font-family: var(--font-head); font-weight: 700; font-size: 84px; line-height: 1; letter-spacing: -0.06em; }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.05em; }
.h3 { font-family: var(--font-head); font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: -0.05em; }
.h4 { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.05em; }
.p1 { font-size: 18px; line-height: 2; }
.p2 { font-size: 14px; line-height: 1.8; }
.p3 { font-size: 12px; line-height: 1.5; }
@media (max-width: 767px) {
  /* Figma 01_TOP_sp・02_詳細_sp の値（字間は PC と同じ比率） */
  .h1, .h2 { font-size: 32px; letter-spacing: -0.06em; }
  .h3 { font-size: 20px; line-height: 1.5; }
  .h4 { font-size: 16px; }
  .p1 { font-size: 16px; }
  .p2 { font-size: 14px; }
}

/* セクションラベル（矢印＋英字） */
.label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 600; font-size: 30px; line-height: 1; }
.label__icon { width: 92px; height: 30px; flex: none; }
.label--sm { font-size: 20px; }
.label--sm .label__icon { width: 61px; height: 20px; }
/* Figma：PC の大きいラベルは高さ 40px の枠の上下中央（見出しまで 30px） */
.label { min-height: 40px; }
.label--sm, .label--white, .a-bg__label, .biz-card__text .label { min-height: 0; }
@media (max-width: 767px) {
  .label { font-size: 20px; min-height: 0; }
  .label__icon { width: 46px; height: 15px; }
}

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 15px 25px; min-height: 50px;
  font-family: var(--font-jp); font-weight: 500; font-size: 14px; line-height: 1;
  transition: opacity .2s;
}
.btn:hover { opacity: .75; }
.btn__arrow { width: 38px; height: 12.414px; flex: none; margin: 0 1px; } /* Figma は 38px の矢印を 40px 枠に入れている */
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--black { background: var(--black); color: var(--white); }
.btn--lg { min-height: 55px; font-size: 18px; font-weight: 700; }
.btn--block { width: 100%; }
@media (max-width: 767px) {
  .btn, .btn--lg { min-height: 50px; font-size: 14px; font-weight: 500; }
}

.textlink { display: inline-flex; flex-direction: column; gap: 10px; font-weight: 500; font-size: 14px; line-height: 1; }
.textlink__row { display: flex; align-items: center; gap: 10px; }
.textlink__row img { width: 28.5px; height: 9.31px; }
.textlink::after { content: ""; display: block; height: 1px; background: currentColor; }
.arrowlink { display: inline-flex; align-items: center; gap: 15px; font-weight: 500; font-size: 14px; line-height: 1; }
.arrowlink img { width: 38px; height: 12.414px; margin: 0 1px; }

/* ---------- ヘッダー ---------- */
/* PC はスクロール中も固定。同じヘッダーを2枚重ねる（build.py の make_header）：
   --solid＝ボタン・足利のロゴなど普通表示＋クリック担当、--blend＝ロゴ・ナビの反転表示（difference）だけ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: 110px; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
}
.site-header--solid > * { pointer-events: auto; }
.site-header--blend { mix-blend-mode: difference; }
.site-header--blend .header-cta, .site-header--blend .menu-btn { visibility: hidden; }
.site-header--solid .gnav, .site-header--solid .site-logo { color: transparent; } /* 見えないがクリック・フォーカスはできる */
.gnav { display: flex; gap: 30px; font-size: 14px; line-height: 1; color: var(--white); }
.site-logo { color: var(--white); width: 142px; }
.site-logo img, .site-logo svg { width: 142px; height: 52.175px; }
.header-cta { justify-self: end; }
.menu-btn { display: none; }
/* 足利ページ系のヘッダー（Figma 02_詳細：ロゴ左・黒／ロゴ横に Ashikaga | Recovery Hotel／ナビとボタンは右寄せ） */
.site-header--area { display: flex; gap: 32px; }
.site-header--area .site-logo { order: -1; width: auto; margin-right: auto; }
.site-header--area .site-logo svg { width: 310.95px; height: 52.1746px; position: relative; top: 1px; }
.site-header--area.site-header--solid .site-logo { color: var(--black); }
.site-header--area.site-header--blend .site-logo svg { visibility: hidden; }
/* タブレット（768〜1179px）：ナビとボタンが1行に収まらないので、SP と同じメニューボタンに切り替える */
@media (max-width: 1179px) {
  .gnav, .header-cta { display: none; }
  .site-logo { grid-column: 2; }
  .menu-btn {
    display: grid; place-items: center;
    position: fixed; top: 28.5px; right: var(--gutter); z-index: 55;
    width: 53px; height: 53px; border-radius: 50%; border: 0; background: var(--yellow); cursor: pointer; padding: 0;
  }
  .menu-btn span, .menu-btn span::before { display: block; width: 20px; height: 2px; background: var(--black); position: relative; content: ""; }
  .menu-btn span::before { position: absolute; top: 6px; }
  .menu-btn span { transform: translateY(-2px); }
}
@media (max-width: 767px) {
  .site-header { height: 80px; padding-top: 12px; grid-template-columns: 1fr auto; align-items: start; }
  .site-logo { grid-column: auto; width: 95.3px; margin-top: 9px; }
  .site-logo svg { width: 95.3px; height: 35px; }
  .menu-btn { top: 12px; right: 19px; } /* スクロール中も出し続ける。位置は Figma どおり（右端19px） */
  .site-header--area .site-logo { margin-top: 0; }
  .site-header--area .site-logo svg { width: 208.6px; height: 35px; top: 0; }
  /* SP はロゴの矢印部分だけ反転表示（blend 側）、Ashikaga | Recovery Hotel は黒（Figma 02_詳細_sp と同じ色分け） */
  .site-header--area.site-header--solid .logo-lockup__mark { visibility: hidden; }
  .site-header--area.site-header--blend .site-logo svg { visibility: visible; color: var(--white); }
  .site-header--area.site-header--blend .logo-lockup__text { visibility: hidden; }
}
/* SPメニュー */
.sp-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--black); color: var(--white);
  padding: 100px 20px 40px; display: flex; flex-direction: column; gap: 28px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.sp-menu.is-open { opacity: 1; visibility: visible; }
.sp-menu a { font-size: 18px; line-height: 1.4; }
.sp-menu .btn { margin-top: 12px; justify-content: space-between; }
.sp-menu__close { position: absolute; top: 12px; right: 19px; width: 53px; height: 53px; border-radius: 50%; border: 0; background: var(--yellow); font-size: 22px; cursor: pointer; }

/* ---------- フッター（共通の黒帯） ---------- */
.site-footer { background: var(--black); color: var(--white); padding: 80px 0 40px; /* 上の 80px＝フッターの矢印の上の黒い帯（全ページ共通） */ overflow: hidden; }
.footer-sign { position: relative; margin-top: 0; margin-right: calc(var(--gutter) * -1); } /* Figma：矢印は画面の右端まで（1440 で幅 1390） */
.footer-sign__arrow { width: 100%; color: var(--white); }
.footer-sign__arrow svg { width: 100%; height: auto; }
.footer-sign__inner { position: absolute; left: 4.3%; top: 44.6%; display: flex; align-items: center; gap: 25px; color: var(--black); }
.footer-sign__inner svg { width: 142px; height: 52.175px; }
.footer-sign__inner p { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.5; letter-spacing: -0.05em; }
.footer-catch { display: flex; align-items: flex-start; gap: 0.17%; margin-top: 18px; margin-right: -1.5%; color: var(--white); } /* Figma：1340 の枠に対して幅 1360 */
.footer-catch img { height: auto; }
.footer-catch img:first-child { width: 54.2%; }
.footer-catch img:last-child { width: 45.7%; margin-top: 0.7%; }
.footer-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 80px; font-size: 12px; line-height: 1.5; }
.footer-links { display: flex; flex-direction: column; gap: 10px; color: var(--beige1); }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.footer-links a:hover { color: var(--white); }
.copyright { color: var(--beige2); white-space: nowrap; }
@media (max-width: 767px) {
  .site-footer { padding-bottom: 10px; }
  .footer-sign, .footer-catch { margin-right: 0; }
  .footer-sign__inner { gap: 7px; }
  .footer-sign__inner svg { width: 37px; height: 13.6px; }
  .footer-sign__inner p { font-size: 10px; line-height: 1; }
  .footer-catch { margin-top: 6px; padding-right: 7px; } /* Figma：335 の枠に幅 328 */
  /* Figma 01_TOP_sp：2列・縦5行の並び（左＝足利〜FAQ、右＝予約の確認〜お問い合わせ）、10px／行間 23px */
  .footer-bottom { flex-direction: column; align-items: stretch; gap: 40px; margin-top: 60px; font-size: 10px; }
  .footer-links { display: grid; grid-template-columns: 128px auto; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 8px 20px; }
  .footer-links ul { display: contents; }
  .footer-links ul:first-child li:nth-child(7) { order: 1; }
  .footer-links ul:last-child li:nth-child(n+2) { order: 2; }
  .copyright { text-align: right; }
}

/* ---------- スマホ：読みやすさ・押しやすさ（見た目の位置は変えずに、押せる範囲を上下に広げる） ---------- */
@media (max-width: 767px) {
  .footer-links a { display: block; padding: 4px 0; margin: -4px 0; } /* 見た目は Figma のまま、押せる範囲だけ広げる */
  .sp-menu { gap: 12px; }
  .sp-menu a:not(.btn) { padding: 8px 0; }
  .textlink, .arrowlink, .a-back { padding-block: 12px; margin-block: -12px; }
  .a-table tfoot a, .a-link, .a-faq__item p a { padding-block: 8px; } /* 文中のリンク：見た目はそのまま、押せる範囲だけ上下に広げる */
}

/* ---------- フッター直前の帯：法人・長期滞在（TOP・足利で共通。Figma のフッターの部品 Group 17179） ---------- */
.top-business { background: var(--black); padding: 95px 0 160px; }
.biz-card { background: var(--white); min-height: 260px; padding: 20px 60px 20px 19px; display: flex; align-items: center; gap: 40px; }
.biz-card__img { width: 310px; height: 220px; object-fit: cover; flex: none; }
.biz-card__text { width: 481px; display: flex; flex-direction: column; gap: 20px; }
.biz-card__text .label { font-size: 20px; }
.biz-card__btn { margin-left: auto; align-self: flex-end; margin-bottom: 30px; }
@media (max-width: 1023px) {
  .biz-card { flex-wrap: wrap; padding: 20px; }
  .biz-card__btn { margin: 0; }
}
@media (max-width: 767px) {
  .top-business { padding: 40px 0 66px; }
  .biz-card { flex-direction: column; align-items: stretch; gap: 20px; }
  .biz-card__img { width: 100%; height: auto; aspect-ratio: 295 / 209; }
  .biz-card__text { width: 100%; gap: 10px; }
  .biz-card__text .label { font-size: 16px; }
  .biz-card__btn { width: 100%; padding: 15px 20px; gap: 10px; }
  .biz-card__btn .btn__arrow { width: 21px; height: 6.9px; } /* 長いボタン名でも1行に収める（足利の SP と同じ小さい矢印） */
}