@charset "UTF-8";
/* ============================================================================
   ブランドのトップ（/index.html）専用のスタイル  2026-09-25
   1. ヒーロー（3ホームの写真6枚を自動で切り替え、中央にロゴと説明文）
   2. 3つのホームのカード（デザイン案A）
   3. パンフレットの欄（デザイン案A）
   既存の style.css には手を入れていません。読み込むのはトップだけです。
   ========================================================================== */

/* ============================================================================
   1. ヒーロー
   - 写真の中央に、従来のロゴ・説明文・「東急ウェリナケアとは」を白い枠で重ねる
     （枠は少し透けて、うしろの写真がうっすら見える）
   - 写真ごとの施設名・見出し・「○○を見る」は、ヒーロー下端の濃い帯に1行で
   - 右下（帯の右端）に切り替えの点と一時停止ボタン
   - スマホは縦長の写真（/_assets/img/top/hero/*_sp.jpg）を画面いっぱいに
   - 切り替えは /_assets/js/hero.js（Swiper 6.7 のフェード）
   ========================================================================== */

.p-top-hero {
  position: relative;
  margin-top: 101px;
}

/* 高さ：画面幅の48%（560〜720px）。画面の縦が短いときはヘッダーの下に収まる高さまで */
.p-top-hero__slider {
  height: clamp(560px, min(48vw, calc(100vh - 110px)), 720px);
  background-color: #2a2522;
}

.p-top-hero__slide {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-top-hero__slide picture {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.p-top-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- 中央の白い枠（ロゴ・説明文・ボタン） ---------------------------------- */

.p-top-hero__brand {
  position: absolute;
  top: calc((100% - 60px) / 2);
  left: 50%;
  z-index: 5;
  width: min(620px, calc(100% - 56px));
  padding: 28px 36px 30px;
  background-color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 40px rgba(42, 37, 34, 0.2);
  text-align: center;
  transform: translate(-50%, -50%);
}

@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .p-top-hero__brand {
    background-color: rgba(255, 255, 255, 0.76);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

.p-top-hero__brand .p-top-header__logo {
  margin: 0 auto;
  padding-top: 0;
  max-width: 300px;
}

.p-top-hero__brand .p-top-header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.p-top-hero__brand .p-top-header__lead {
  margin-top: 18px;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: #2a2522;
}

.p-top-hero__brand .p-top-header__arrow-button01 {
  margin-top: 18px;
}

.p-top-hero__brand .c-arrow-button01 {
  background-color: #fff;
}

/* ---- 下端の帯（写真ごとの施設名・見出し・リンク） -------------------------- */

.p-top-hero__caption {
  display: flex;
  flex: 0 0 60px;
  align-items: center;
  gap: 20px;
  padding: 0 260px 0 max(28px, calc((100% - 1100px) / 2));
  color: #f2ebe0;
  white-space: nowrap;
}

.p-top-hero__home {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: #d9bf6a;
}

.p-top-hero__copy {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
}

.p-top-hero__copy br {
  display: none;
}

.p-top-hero__link {
  flex-shrink: 0;
  padding-bottom: 2px;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: #f2ebe0;
  text-decoration: none;
  background: linear-gradient(#c9a227, #c9a227) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.3s ease-out, color 0.2s ease-out;
}

.p-top-hero__link::after {
  content: " \2192";
}

.p-top-hero__link:hover,
.p-top-hero__link:focus {
  color: #fff;
  text-decoration: none;
  background-size: 100% 2px;
}

.p-top-hero a:focus-visible,
.p-top-hero button:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 3px;
}

/* ---- 右端：切り替えの点と一時停止ボタン ------------------------------------ */

.p-top-hero__controls {
  position: absolute;
  right: max(28px, calc((100% - 1100px) / 2));
  bottom: 13px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
}

.p-top-hero .swiper-pagination.p-top-hero__dots {
  position: static;
  display: flex;
  gap: 10px;
  width: auto;
}

.p-top-hero__dots .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 !important;
  background-color: #fff;
  opacity: 0.5;
}

.p-top-hero__dots .swiper-pagination-bullet-active {
  background-color: #c9a227;
  opacity: 1;
}

.p-top-hero__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.p-top-hero__toggle .material-icons {
  font-size: 1.25rem;
}

/* 幅が狭いPC・タブレットでは、帯の見出しを省いて施設名とリンクだけに */
@media screen and (max-width: 1099px) {
  .p-top-hero__copy {
    display: none;
  }
}

/* ---- スマホ：縦長の写真を画面いっぱいに、中央に白い枠 ---------------------- */
@media screen and (max-width: 768px) {
  .p-top-hero {
    margin-top: 53px;
  }

  .p-top-hero__slider {
    height: clamp(520px, calc(100vh - 53px), 680px);
    height: clamp(520px, calc(100svh - 53px), 680px);
  }

  .p-top-hero__caption {
    flex-basis: 76px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 0 180px 0 16px;
  }

  .p-top-hero__home {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
  }

  .p-top-hero__link {
    font-size: 0.75rem;
  }

  .p-top-hero__controls {
    right: 16px;
    bottom: 23px;
    gap: 12px;
  }

  .p-top-hero .swiper-pagination.p-top-hero__dots {
    gap: 8px;
  }

  .p-top-hero__dots .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }

  .p-top-hero__toggle {
    width: 30px;
    height: 30px;
  }

  .p-top-hero__brand {
    top: calc((100% - 76px) / 2);
    width: calc(100% - 32px);
    padding: 24px 16px 26px;
  }

  .p-top-hero__brand .p-top-header__logo {
    max-width: 240px;
  }

  .p-top-hero__brand .p-top-header__lead {
    margin-top: 16px;
    font-size: 0.8125rem;
  }

  .p-top-hero__brand .p-top-header__arrow-button01 {
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-top-hero__link {
    transition: none;
  }
}

/* ============================================================================
   2. 3つのホームのカード（デザイン案A「写真と余白で見せる」）
   - 枠と色面をなくし、写真と明朝体の施設名を余白で引き立てる
   - 施設名は画像から文字に（検索と読み上げのため）。見出しは「東急ウェリナケア旗の台」
   - 下に駅からの距離と居室数（各ホームの施設概要ページの数字）
   - 各ホームへは同じタブで移動（以前は別タブで開いていた）
   - 2026-09-25 追加：右端に東急ウェリナ大岡山の介護居室のカード（別サイトなので新しいタブ・↗）。
     PCは4列（1000px幅で1枚約230px）、1000px以下は2列、スマホは1列。
     カード下の欄は「駅・バス停からの距離」と「室数｜○○を見る」の2行に固定し、
     4枚の下端の線がそろうようにする（尾山台はバス停名が入って長いため）
   ========================================================================== */

/* 見出し「東急ウェリナケアの3つのホーム」は読み上げ用（画面には出さない） */
.p-top-homes__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* サイト全体の本文は両端そろえ（style.css の body）。カードと冊子の欄は左そろえにする
   （両端そろえだと「パンフレットを開く」の文字間が広がり、矢印が次の行に落ちていた） */
.p-top-homes,
.p-top-pamphlet {
  text-align: left;
}

.p-top-home__more,
.p-top-book__more {
  white-space: nowrap;
}

.p-top-homes__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 説明文の行数がカードごとに違っても、下端（駅からの距離・「ホームを見る」）をそろえる */
.p-top-homes__list > li {
  display: flex;
}

.p-top-home {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #3f3b39;
  text-decoration: none;
}

.p-top-home:hover,
.p-top-home:focus {
  text-decoration: none;
}

.p-top-home:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 4px;
}

/* 写真は横長 3:2（2026-09-25 に 29:25 から変更。外観を引きで見せるため） */
.p-top-home__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: #eee;
}

.p-top-home__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.p-top-home:hover .p-top-home__photo img,
.p-top-home:focus-visible .p-top-home__photo img {
  transform: scale(1.05);
}

.p-top-home__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 22px;
}

.p-top-home__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #7d5023;
}

.p-top-home__label::before {
  flex: 0 0 18px;
  height: 1px;
  background-color: #c9a227;
  content: "";
}

.p-top-home__name {
  margin: 14px 0 0;
  font-family: YakuHanMP_Noto, "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  color: #2a2522;
}

.p-top-home__brand {
  display: block;
  margin-bottom: 2px;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.16em;
  color: #6b635a;
}

.p-top-home__copy {
  margin: 10px 0 18px;
  font-family: YakuHanMP_Noto, "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", serif;
  font-size: 0.875rem;
  line-height: 1.9;
  color: #6b635a;
}

/* 1行目：駅・バス停からの距離　2行目：室数（左）と「○○を見る」（右） */
.p-top-home__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "access access"
    "rooms more";
  align-items: baseline;
  gap: 2px 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e6dccb;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #6b635a;
}

.p-top-home__access {
  grid-area: access;
}

.p-top-home__rooms {
  grid-area: rooms;
}

.p-top-home__more {
  grid-area: more;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: #7d5023;
}

/* 別サイト（東急ウェリナ）へのカード：読み上げ用に「新しいタブで開きます」（矢印 ↗ は下の ::after の後ろで指定） */
.p-top-home__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.p-top-home__more::after,
.p-top-book__more::after {
  display: inline-block;
  margin-left: 0.5em;
  content: "\2192";
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.p-top-home:hover .p-top-home__more::after,
.p-top-book:hover .p-top-book__more::after {
  transform: translateX(4px);
}

/* 別サイト（東急ウェリナ）へのカードは ↗（上の → より後ろに置いて上書きする） */
.p-top-home__more--external::after {
  content: "\2197";
}

.p-top-home:hover .p-top-home__more--external::after {
  transform: translate(3px, -3px);
}

/* ============================================================================
   3. パンフレットの欄（デザイン案A）
   - 淡いベージュの帯に、冊子らしい影と背の陰影をつけた表紙を並べる
   - 表紙は各ホームの p01_s.jpg（240px。表示104pxの2倍の画質）
   ========================================================================== */

.p-top-pamphlet {
  margin-top: 88px;
  padding: 52px 52px 56px;
  background-color: #f7f3ec;
}

.p-top-pamphlet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6dccb;
}

.p-top-pamphlet__title {
  margin: 0;
  font-family: YakuHanMP_Noto, "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  color: #2a2522;
}

.p-top-pamphlet__lead {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.8;
  color: #6b635a;
}

.p-top-pamphlet__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-top-book {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  color: #3f3b39;
  text-decoration: none;
}

.p-top-book:hover,
.p-top-book:focus {
  text-decoration: none;
}

.p-top-book:focus-visible {
  outline: 2px solid #c9a227;
  outline-offset: 4px;
}

.p-top-book__cover {
  position: relative;
  flex: 0 0 104px;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.p-top-book__cover img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 1px 2px rgba(42, 37, 34, 0.12), 0 12px 24px -8px rgba(42, 37, 34, 0.4);
}

/* 背の陰影 */
.p-top-book__cover::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.28) 55%, rgba(0, 0, 0, 0));
  content: "";
}

.p-top-book:hover .p-top-book__cover {
  transform: translateY(-6px) rotate(-1.5deg);
}

.p-top-book__name,
.p-top-book__meta {
  display: block;
}

.p-top-book__name {
  font-family: YakuHanMP_Noto, "Noto Serif JP", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #2a2522;
}

.p-top-book__meta {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #6b635a;
}

.p-top-book__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: #7d5023;
}

/* ---- 1001〜1100px：冊子は横並びのまま、表紙を少し小さくして文字の幅をあける ---- */
@media screen and (max-width: 1100px) {
  .p-top-book {
    gap: 16px;
  }

  .p-top-book__cover {
    flex-basis: 88px;
  }
}

/* ---- 幅の狭いPC・タブレット：カードは2列（2枚×2段）、冊子は表紙を上に ---- */
@media screen and (max-width: 1000px) {
  /* 1枚の幅が広がるので、ラベルと施設名は大きめに戻す */
  .p-top-homes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 24px;
  }

  .p-top-home__label {
    gap: 12px;
    letter-spacing: 0.14em;
  }

  .p-top-home__label::before {
    flex-basis: 28px;
  }

  .p-top-home__name {
    font-size: 1.875rem;
    letter-spacing: 0.16em;
  }

  .p-top-pamphlet {
    padding: 44px 32px 48px;
  }

  .p-top-book {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .p-top-book__cover {
    flex-basis: auto;
    width: 96px;
  }
}

/* ---- スマホ：カードは1列、パンフレットの帯は画面の端まで ---- */
@media screen and (max-width: 768px) {
  .p-top-homes__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .p-top-pamphlet {
    margin: 64px -20px 0;
    padding: 40px 20px 44px;
  }

  .p-top-pamphlet__title {
    font-size: 1.3125rem;
  }

  .p-top-pamphlet__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .p-top-book {
    flex-direction: row;
    align-items: flex-end;
    gap: 20px;
  }

  .p-top-book__cover {
    flex: 0 0 88px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-top-home__photo img,
  .p-top-book__cover,
  .p-top-home__more::after,
  .p-top-book__more::after {
    transition: none;
  }
}