/* TOP（Figma: 01_TOP / 01_TOP_sp） */

/* HERO */
.top-hero { position: relative; height: 870px; overflow: hidden; background: #e9e6e1; }
.top-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.top-hero__catch { position: absolute; left: 0; right: 0; top: 311px; margin: 0; display: flex; align-items: flex-start; padding-left: 0; }
.top-hero__catch1 { width: 51.2%; transform: skewX(-4.74deg); }
.top-hero__catch2 { width: 43.2%; margin-left: 1.4%; margin-top: -0.9%; transform: skewX(-4.74deg); }
.top-hero__scroll { display: none; }
@media (max-width: 767px) {
  .top-hero { height: 667px; }
  .top-hero__img { object-position: 30% 50%; }
  .top-hero__catch { top: 235px; flex-direction: column; padding: 0 8px; max-width: 600px; } /* 幅の広いSP（600〜767px）で SCROLL DOWN に重ならないように */
  .top-hero__catch1 { width: 86%; }
  .top-hero__catch2 { width: 75%; margin: 4px 0 0 21%; }
  .top-hero__scroll { display: block; position: absolute; right: 16px; bottom: 20px; writing-mode: vertical-rl; color: var(--white); font-family: var(--font-en); font-size: 10px; letter-spacing: .08em; line-height: 1; }
}

/* 本文の縦リズム */
.top-body { padding-top: 228px; padding-bottom: 274px; display: flex; flex-direction: column; gap: 280px; }
@media (max-width: 767px) { .top-body { padding-top: 70px; padding-bottom: 110px; gap: 100px; } }

/* RECOVERY HOTEL */
.top-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.top-intro__text { width: 754px; max-width: 100%; display: flex; flex-direction: column; gap: 30px; }
.top-intro__text .p1 { margin-top: 50px; }
.top-intro__btns { width: 287px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.top-intro__btns .btn { width: 100%; }
@media (max-width: 1023px) { .top-intro { flex-direction: column; align-items: stretch; } }
@media (max-width: 767px) {
  .top-intro__text { gap: 20px; }
  .top-intro__text .p1 { margin-top: 40px; }
  .top-intro { gap: 40px; }
  .top-intro__btns { width: 100%; gap: 10px; }
}

/* PROMISE */
.top-promise { display: flex; flex-direction: column; gap: 150px; }
.top-promise__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.top-promise__title { display: flex; flex-direction: column; gap: 30px; flex: none; }
.top-promise__lead { width: 614px; max-width: 100%; }
@media (max-width: 1023px) { .top-promise__head { flex-direction: column; align-items: stretch; } }
@media (max-width: 767px) {
  .top-promise { gap: 126px; }
  .top-promise__title { gap: 20px; }
  .top-promise__head { gap: 60px; }
}

.top-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 150px; }
.top-feature { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.top-feature__text { width: 303px; flex: 0 1 303px; display: flex; flex-direction: column; gap: 80px; }
.top-feature__tag { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.2; }
.top-feature__tag img { width: auto; height: 13px; }
.top-feature__tag img[src*="slash1"] { height: 16.2px; }
.top-feature__img { width: 616px; max-width: 55%; aspect-ratio: 616 / 420; object-fit: cover; }
.top-feature__img--4 { object-position: 50% 62%; }
@media (max-width: 767px) {
  .top-features { gap: 80px; }
  .top-feature { flex-direction: column; gap: 32px; }
  .top-feature__text { width: 100%; flex: none; gap: 32px; } /* 縦並びでは flex-basis が高さになるので打ち消す */
  .top-feature__img { width: 100%; max-width: none; aspect-ratio: 335 / 228; }
}

/* BASE */
.top-base { display: flex; flex-direction: column; gap: 30px; }
.top-base > .h1 { margin-bottom: 10px; }
.top-base__lead { max-width: 754px; margin-bottom: 70px; }
.base-card { display: flex; flex-direction: column; gap: 80px; }
.base-card__img { display: block; overflow: hidden; }
.base-card__img img { width: 100%; aspect-ratio: 1340 / 700; object-fit: cover; transition: transform .6s; }
.base-card__img:hover img { transform: scale(1.02); }
.base-card__name { display: flex; align-items: flex-end; gap: 30px; margin-top: -0; }
.base-card__name h3 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 120px; line-height: 1; letter-spacing: -0.05em; white-space: nowrap; }
.base-card__name p { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.5; padding-bottom: 6px; }
.base-card__body { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; } /* Figma：拠点名の下 80px（.base-card の gap） */
.base-card__main { width: 742px; max-width: 100%; display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.base-card__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.base-card__btns .btn { width: auto; min-width: 285px; }
.base-card__spec { width: 435px; flex: none; margin: 0; border-top: 1px solid var(--line); }
.base-card__spec > div { display: flex; gap: .4em; padding: 6px 0 5px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.base-card__spec dt { color: var(--gray-text); }
.base-card__spec dt.is-dark { color: var(--black); }
.base-card__spec dd span { color: var(--gray-text); }
@media (max-width: 1023px) {
  .base-card__name { flex-wrap: wrap; } /* 幅が足りないときは開業表示を下の行へ */
  .base-card__body { flex-direction: column; }
  .base-card__spec { width: 100%; }
}
@media (max-width: 767px) {
  .top-base { gap: 20px; }
  .top-base > .h1 { margin-bottom: 0; }
  .top-base__lead { margin-bottom: 12px; }
  .base-card { gap: 32px; }
  .base-card__img img { aspect-ratio: 335 / 175; }
  .base-card__name { gap: 4px 12px; }
  .base-card__name h3 { font-size: 40px; }
  .base-card__name p { font-size: 14px; line-height: 1.2; padding-bottom: 2px; }
  .base-card__body { margin-top: 0; gap: 40px; display: flex; flex-direction: column-reverse; }
  .base-card__main { width: 100%; }
  .base-card__btns { flex-direction: column; width: 100%; }
  .base-card__btns .btn { width: 100%; }
  .base-card__main .textlink { align-self: flex-end; }
  .base-card__spec > div { padding: 3px 0 4px; }
}
@media (max-width: 767px) {
  /* SPデザインは「説明文→スペック→ボタン」の順 */
  .base-card__body { flex-direction: column; }
  .base-card__main { display: contents; }
  .base-card__main > .p1 { order: 1; }
  .base-card__spec { order: 2; }
  .base-card__btns { order: 3; }
  .base-card__main > .textlink { order: 4; align-self: flex-end; }
}

/* BACKGROUND */
.top-bg { position: relative; padding: 140px var(--gutter) 135px; color: var(--white); background: #c98a4a url("../img/bg-sunset.jpg") center 70% / cover no-repeat; }
.top-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #f0a85a 0%, rgba(240,168,90,.55) 22%, rgba(0,0,0,0) 45%); pointer-events: none; }
.top-bg__inner { position: relative; width: 614px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.label--white { color: var(--white); }
.top-bg__inner .label__icon { width: 102px; height: 33.3px; }
.top-bg__inner > .h2 { margin-bottom: 30px; }
.top-bg__card { background: var(--white); color: var(--black); padding: 70px 67px 80px; display: flex; flex-direction: column; gap: 50px; text-align: left; width: 100%; }
.top-bg__card > img { width: 100%; aspect-ratio: 480 / 280; object-fit: cover; }
.top-bg__card-body { display: flex; flex-direction: column; gap: 30px; padding: 0 50px; }
@media (max-width: 767px) {
  .top-bg { padding: 60px 40px; }
  .top-bg__inner { gap: 10px; }
  .top-bg__inner .label { font-size: 14px; gap: 4px; }
  .top-bg__inner .label__icon { width: 44px; height: 15px; }
  .top-bg__inner > .h2 { font-size: 24px; letter-spacing: -0.05em; }
  .top-bg__inner > .h2 { margin-bottom: 10px; }
  .top-bg__card { padding: 20px 22px 41px; gap: 21px; }
  .top-bg__card-body { padding: 0; gap: 20px; }
}


/* FAQ・最後の呼びかけ（足利ページの部品を TOP で使う） */
.top-more .a-banner--reserve .btn { width: auto; }
/* TOP の法人カードは Figma 01_TOP の大きさ（足利系の 30px 指定を打ち消す） */
.top-more .biz-card .h3 { font-size: 36px; }
@media (max-width: 767px) { .top-more .biz-card .h3 { font-size: 20px; } }