@charset "UTF-8";
/* ==========================================================
   page-stay.css — 04 冬の過ごし方（2026-08-12）
   ワイヤー 2:456（640×540のセル2×2）を本文カラム960pxへ置き直し。
   セル＝上に写真460×230／下にテキスト。角丸なし・影なし。
   見出しの型はTOPのH2（青・センター）に合わせる。
   ========================================================== */

.p-stay {
  width: var(--l-col);
  margin: 110px auto 0;
}

.p-stay__heading {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-align: center;
  color: var(--color-blue);
}

.p-stay__grid {
  display: grid;
  grid-template-columns: 460px 460px;
  gap: 56px var(--l-gap);
  margin-top: 56px;
}

.p-stay__cell {
  display: flex;
  flex-direction: column;
  /* 2026-08-28 市岡さん指示: 写真が囲われていることが分かるよう罫を濃く。
     共通の --l-rule（インク18%）は他セクションの区切りでも使うのでここだけ上書きする */
  border: 1px solid rgba(55, 57, 60, 0.32);
  background: var(--color-white);
}
/* 写真と本文の境目も引いて、写真が枠に収まって見えるようにする */
.p-stay__figure { border-bottom: 1px solid rgba(55, 57, 60, 0.32); }
.p-stay__figure { margin: 0; line-height: 0; }
.p-stay__figure img {
  display: block;
  width: 458px;    /* 枠線1px×2ぶん内側 */
  height: 258px;   /* 2026-09-24 定例: 16:9 に（元写真は2:1のため左右を少し切る） */
  object-fit: cover;
}
.p-stay__text { padding: 26px 28px 30px; }

.p-stay__label {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--color-blue);
}
.p-stay__sub {
  margin: 14px 0 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(55, 57, 60, 0.78);
}
.p-stay__body {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;      /* 2026-08-12: 本文18px */
  line-height: 34px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-align: justify;
}

/* ==========================================================
   協賛バナー（TOPの .logos を複製・2026-08-31 市岡さん指示）
   縦の間だけをここで持つ。logos を l-main と cta の間に挟むと
   lower.css の `.l-main + .cta { margin-top:130px }` が隣接でなくなり失効するため、
   その間を .l-main + .logos が肩代わりする（lower.css §9 の `.l-band + .cta` と同じ作法）。
   バナー→CTA の間は 0 のままでよい（.logos が内蔵する下白 PC67px / SP50px がそのまま間になる＝TOPと同じ）。
   .logos を持つ下層は stay.html だけなので、共用の lower.css ではなくこのページCSSに閉じる
   ========================================================== */
.l-main + .logos { margin-top: 130px; }

/* ==========================================================
   SP（393px設計）: 2×2 → 縦1列
   ========================================================== */
@media (max-width: 767px) {

  .l-main + .logos { margin-top: 64px; }

  .p-stay { margin-top: 56px; }

  .p-stay__heading { font-size: 20px; letter-spacing: 0.06em; text-indent: 0.06em; }

  .p-stay__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 28px;
  }

  .p-stay__figure img { width: 339px; height: 191px; }  /* 16:9 */
  .p-stay__text { padding: 20px 20px 24px; }

  .p-stay__label { font-size: 17px; }
  .p-stay__sub { margin-top: 10px; font-size: 14px; }
  .p-stay__body { margin-top: 14px; font-size: 16px; line-height: 29px; }
}

/* ==========================================================
   【2026-10-14 HEROU定例（河野さん修正リスト）・冬の過ごし方「奥飛騨で過ごす、４つの冬」】
   河野さん「ここやはりよくわからないので、変えたい。写真とテキストで2カラム表示でもよい。あえてボックスにする必要はない」
   打ち合わせ 10:18〜10:19: 見本（2カラム）の方向で組み替え・「写真がメインで来て」（公式サイトの「温泉を知る」のように見出し＋写真＋文）・
   SP は写真が先頭で順番に並ぶ。
   - 枠線（ボックス）をやめ、写真とテキストを左右に。行ごとに左右を入れ替える（1・3行目＝写真が左／2・4行目＝写真が右）
   - PC: 本文カラム 960px ＝ 写真 540×304（16:9・写真を主役に）＋ すき間 48 ＋ テキスト 372。行の間 72px。テキストは写真の縦中央
   - SP: 写真（全幅・16:9）→ テキストの縦積み。枠線なし・行の間 44px
   文言・写真・文字の大きさは変えていない。戻す時はこのブロックを消す
   ========================================================== */
.p-stay__grid { display: block; margin-top: 64px; }
.p-stay__cell {
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  column-gap: 48px;
  align-items: center;
  border: 0;
  background: none;
}
.p-stay__cell + .p-stay__cell { margin-top: 72px; }
.p-stay__cell:nth-child(even) { grid-template-columns: minmax(0, 1fr) 540px; }
.p-stay__cell:nth-child(even) .p-stay__figure { order: 2; }
.p-stay__figure { border-bottom: 0; }
.p-stay__figure img { width: 540px; height: 304px; }
.p-stay__text { padding: 0; }
@media (max-width: 767px) {
  .p-stay__grid { margin-top: 28px; }
  .p-stay__cell,
  .p-stay__cell:nth-child(even) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .p-stay__cell:nth-child(even) .p-stay__figure { order: 0; }
  .p-stay__cell + .p-stay__cell { margin-top: 44px; }
  .p-stay__figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .p-stay__text { padding: 0; }
}

/* ==========================================================
   【2026-10-15b 横山さん Chatwork 冬物語ルーム「修正内容.pptx」2枚目】「ここの縦幅の余白を、今が1なら1.5へ伸ばす」
   写真＋文の行と行の間（10/14 の2カラム化で PC 72px・SP 44px）を 1.5倍に。戻す時はこのブロックを消す
   ========================================================== */
.p-stay__cell + .p-stay__cell { margin-top: 108px; }
@media (max-width: 767px) {
  .p-stay__cell + .p-stay__cell { margin-top: 66px; }
}