@charset "UTF-8";
/* ============================================================
   セキスイハイム東北 スマートハイムシティ矢巾町高田 LP
   css/sekisui_yahabacho_2026_06.css
   2026.06
   ============================================================ */
/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  /* 1rem = 10px 基準 */
  scroll-behavior: smooth;
}

body {
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", "MS PMincho", serif;
  font-size: 1.6rem;
  /* 基準 16px */
  color: #333;
  background: #fff;
  overflow-x: hidden;
  position: relative;
  /* CMS編集画面の管理メニュー表示のために必須 */
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 固定ヘッダー分の余白（旧inline style から移動） */
.shc-main {
  padding-top: 192px;
}

/* ===== Container  PC: max 1080px / SP: max 400px ===== */
.shc-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

/* ============================================================
   Header / Navigation
   ============================================================ */
.shc-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e0e0e0;
}

.shc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

.shc-header__logo a {
  display: block;
  text-decoration: none;
}

.shc-header__logo img {
  height: 36px;
  width: auto;
}

.shc-header__nav {
  display: flex;
  align-items: center;
}

.shc-header__nav ul {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  list-style: none;
}

.shc-header__nav ul a {
  color: #333;
  text-decoration: none;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.shc-header__nav ul a:hover {
  color: #c8a96e;
}

.shc-header__cta {
  margin-left: 2.8rem;
  display: inline-flex;
  align-items: center;
  background: #c8a96e;
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 1rem 2rem;
  border-radius: 2px;
  transition: background 0.2s;
  white-space: nowrap;
}

.shc-header__cta:hover {
  background: #b8955a;
}

.shc-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.4rem;
  flex-shrink: 0;
  position: fixed;
  right: 1.6rem;
  top: 1.2rem;
  z-index: 201;
}

.shc-header__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ドロワー背面オーバーレイ */
.shc-drawer-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
}

.shc-drawer-overlay.is-open {
  display: block;
}

/* ============================================================
   Hero Section
   ============================================================ */
.shc-hero {
  position: relative;
  width: 100%;
  padding-top: 6.4rem;
}

.shc-hero__main-img {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.shc-hero__main-img img {
  width: 100%;
  height: auto;
  display: block;
}

.shc-hero__info {
  background: #111;
  width: 100%;
}

.shc-hero__info-inner {
  display: flex;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

.shc-hero__info-item {
  flex: 1;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.shc-hero__info-item:last-child {
  border-right: none;
}

.shc-hero__info-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Section 01 — Sticky Scroll（画像切り替え方式）

   構造：
   ・ラッパー（6 × 100vh）でスクロール量を確保
   ・ステージ（sticky / 100vh）が画面に貼り付く
   ・背景：ひまわり青空フルワイド
   ・右：合成画像（001〜005）をフェードで切り替え
   ・左：白マスク＋テキストをフェードで切り替え
   ============================================================ */
.shc-s01-wrap {
  position: relative;
  height: calc(4 * 100vh);
}

.shc-s01-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 背景：ひまわり青空 */
.shc-s01-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shc-s01-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 1080px コンテナ */
.shc-s01-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

/* ============================================================
   右：合成画像エリア（1080px全幅・フルハイト）
   各画像を重ねてフェード切り替え
   ============================================================ */
.shc-s01-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.shc-s01-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.shc-s01-photo.is-active {
  opacity: 1;
}

.shc-s01-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* ============================================================
   左：白マスク＋テキストパネル
   ============================================================ */
.shc-s01-mask {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  width: 440px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  /* 全テキストを重ねて高さを最大値に合わせる */
  display: grid;
}

.shc-s01-mask > .shc-s01-text {
  grid-area: 1 / 1;
}

/* テキスト：全ステップ共通なのでstep0のみ常時表示 */
.shc-s01-text {
  padding: 4.4rem 4rem 4.4rem;
  opacity: 0;
  visibility: hidden;
  transition: none;
  pointer-events: none;
}

.shc-s01-text[data-step="0"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shc-s01-text.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shc-s01-text__title {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  margin-bottom: 2rem;
}

.shc-s01-text__body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 2;
  letter-spacing: 0.04em;
  color: #444;
}

/* ============================================================
   SP レスポンシブ (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .shc-container {
    max-width: 400px;
    padding: 0 1.6rem;
  }

  /* Header */
  .shc-header__inner {
    padding: 0 1.6rem;
  }

  .shc-header__logo img {
    height: 28px;
  }

  .shc-header__nav {
    display: flex;
    position: static;
    width: 100%;
    height: auto;
    background: #fff;
    border-top: none;
    box-shadow: none;
    z-index: 99;
    transform: none;
    transition: none;
    overflow: visible;
    padding-top: 0;
  }

  .shc-header__nav.is-open {
    display: flex;
    transform: none;
  }

  .shc-header__nav-inner {
    width: 100%;
  }

  .shc-header__nav-inner ul {
    flex-direction: row;
    padding: 0;
    width: 100%;
    gap: 0;
    justify-content: space-around;
  }

  .shc-header__nav-inner ul li a {
    display: block;
    padding: 1rem 0.3rem;
    font-size: 1.15rem;
    color: #333;
    border-bottom: none;
    white-space: nowrap;
  }

  .shc-header__nav-inner ul li a:hover {
    color: #E2C31A;
  }

  .shc-header__cta {
    margin-left: 0;
    margin-top: 2rem;
    width: 100%;
    justify-content: center;
    padding: 1.2rem 2rem;
  }

  .shc-header__hamburger {
    display: none;
  }

  /* Hero */
  .shc-hero__info-inner {
    flex-direction: column;
  }

  .shc-hero__info-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .shc-hero__info-item:last-child {
    border-bottom: none;
  }

  /* Section 01 SP */
  .shc-s01-wrap {
    height: calc(4 * 100svh);
  }

  .shc-s01-stage {
    height: 100svh;
  }

  /* SP：画像は上半分に表示 */
  .shc-s01-photo img {
    object-position: center top;
  }

  /* SP：白マスクを画面下部に配置 */
  .shc-s01-mask {
    top: auto;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: auto;
    transform: none;
  }

  .shc-s01-text {
    padding: 2.4rem 2rem 2rem;
  }

  .shc-s01-text__title {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }

  .shc-s01-text__body {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
    line-height: 1.8;
  }
}
/* ============================================================
   Section 02 — Asset Value（資産価値）
   フェードインアニメーション
   ============================================================ */
/* ---- フェードイン共通クラス ---- */
.shc-fadein {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.shc-fadein.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延バリエーション */
.shc-fadein--delay1 {
  transition-delay: 0.15s;
}

.shc-fadein--delay2 {
  transition-delay: 0.30s;
}

.shc-fadein--delay3 {
  transition-delay: 0.45s;
}

.shc-fadein--delay4 {
  transition-delay: 0.60s;
}

/* ---- セクション全体 ---- */
.shc-s02 {
  position: relative;
  width: 100%;
}

/* ---- 上部グラデーション帯 ---- */
.shc-s02__top-bar {
  width: 100%;
  line-height: 0;
}

.shc-s02__top-bar img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- 背景：俯瞰写真エリア ---- */
/* Section02: background-image方式でコンテンツ高さに合わせる */
.shc-s02__bg-wrap {
  width: 100%;
  background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_section02_000.jpg);
  background-size: cover;
  background-position: center top;
}

.shc-s02__content {
  /* 通常フローに戻す */
}

.shc-s02__content-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 5.2rem 2.4rem 4.8rem;
  text-align: center;
}

.shc-s02__label {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  margin-bottom: 1rem;
}

.shc-s02__subtitle {
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 1.4rem;
}

.shc-s02__title {
  display: block;
  font-size: clamp(2.2rem, 2.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.8rem;
}

/* タイトル下のゴールドアンダーライン */
.shc-s02__title-line {
  display: block;
  margin: 0 auto 2.8rem;
  max-width: 360px;
  height: auto;
}

/* テキストボックス：青背景60%透過 */
.shc-s02__textbox {
  background: rgba(47, 143, 214, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3.2rem 3.6rem 2.8rem;
  text-align: left;
  max-width: 700px;
  margin: 0 auto;
}

.shc-s02__textbox p {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 2.4;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1.6rem;
}

.shc-s02__textbox p:last-child {
  margin-bottom: 0;
}

.shc-s02__textbox-note {
  font-size: 1.2rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 2.2 !important;
}

/* ---- CTAボタン帯 ---- */
.shc-s02__cta {
  width: 100%;
  /* グラデーション画像を背景に */
  background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_section02_001.jpg);
  background-size: cover;
  background-position: center;
  padding: 2.8rem 0;
}

.shc-s02__cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
}

/* ボタン本体：角丸の箱 */
.shc-s02__cta-btn {
  flex: 0 1 380px;
  text-decoration: none;
  display: block;
  transition: opacity 0.2s, transform 0.2s;
}

.shc-s02__cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

/* ボタン内レイアウト */
.shc-s02__cta-btn-inner {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  height: 72px;
  position: relative;
}

/* 資料請求：オリーブグリーン */
.shc-s02__cta-btn--request .shc-s02__cta-btn-inner {
  background: #5a6040;
}

/* 見学予約：ダークティール */
.shc-s02__cta-btn--reserve .shc-s02__cta-btn-inner {
  background: #2a6068;
}

/* 左の赤いアクセントバー（資料請求のみ） */
.shc-s02__cta-accent {
  display: block;
  width: 8px;
  height: 100%;
  background: #cc2020;
  flex-shrink: 0;
}

/* テキスト部分 */
.shc-s02__cta-label {
  flex: 1;
  text-align: center;
  padding: 0 1.2rem;
}

.shc-s02__cta-label-main {
  display: block;
  font-size: clamp(1.6rem, 1.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #fff;
}

.shc-s02__cta-label-sub {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.3rem;
  text-transform: uppercase;
}

/* 丸いプレイアイコン */
.shc-s02__cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 1.2rem;
}

.shc-s02__cta-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  margin-left: 0.2rem;
  /* 三角形の視覚的センタリング */
}

/* ============================================================
   Section 02 SP レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .shc-s02__content-inner {
    padding: 3.2rem 1.6rem 0;
  }

  .shc-s02__textbox {
    padding: 2rem 1.6rem 1.6rem;
  }

  .shc-s02__textbox p {
    font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  }

  .shc-s02__cta {
    padding: 2rem 0;
  }

  .shc-s02__cta-inner {
    flex-direction: column;
    gap: 1.6rem;
  }

  .shc-s02__cta-btn {
    flex: none;
    width: 100%;
  }
}
/* ============================================================
   Section 03 — 物件情報（4棟）
   ============================================================ */
.shc-s03 {
  padding: 0;
  background: #111;
}

/* ---- セクションタイトル ---- */
.shc-s03__head {
  text-align: center;
  padding: 0 2.4rem 5.2rem;
  max-width: 1080px;
  margin: 0 auto;
}

.shc-s03__head-title {
  font-size: clamp(1.6rem, 1.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.shc-s03__head-sub {
  font-size: 1.3rem;
  color: #666;
  letter-spacing: 0.06em;
}

/* LIVE YOUR WAY バナー（背景画像＋SVGコピー＋テキスト注釈） */
/* PC: 注釈は画像の上に #000 でオーバーレイ
   SP: 黒背景(#111)を活かし、注釈を画像の外（下）へ #FFF で配置 */
.shc-s03__banner {
  position: relative;
}

/* 画像＋SVGコピーのステージ（PC/SP共通でSVGは画像の上に乗る） */
.shc-s03__banner-stage {
  position: relative;
  line-height: 0;
  overflow: hidden;
}

.shc-s03__banner-bg {
  width: 100%;
  height: auto;
  display: block;
}

#main .shc-s03__banner-svg {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 640px;
  height: auto;
}

/* PC（≥1101px）: 注釈は画像の上（SVGの下）に半透明白ボックスでオーバーレイし視認性を確保 */
.shc-s03__banner-note {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 900px;
  margin: 0;
  background: rgba(255, 255, 255, 0.82);
  padding: 1rem 1.6rem;
  box-sizing: border-box;
  text-align: center;
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1.1rem, 1.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.8;
  color: #000000;
  letter-spacing: 0.06em;
}

@media (max-width: 1100px) {
  /* タブレット以下：画像が縦に縮んでSVGと注釈が重なるため、
     SVGは画像中央に、注釈は画像の外（下の#111黒地）へ白文字で流す */
  #main .shc-s03__banner-svg {
    top: 50%;
  }

  .shc-s03__banner-note {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    background: none;
    box-sizing: border-box;
    padding: 1.4rem 1.6rem 1.8rem;
    text-align: center;
    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    font-weight: 700;
    line-height: 1.7;
    color: #FFFFFF;
    letter-spacing: 0.04em;
    overflow-wrap: break-word;
    word-break: normal;
  }
}
@media (max-width: 768px) {
  /* スマホ: SVGをさらに横幅55%まで絞る（注釈は上記1100px以下の指定で画像の外） */
  #main .shc-s03__banner-svg {
    width: 55%;
    max-width: 55%;
  }

  .shc-s03__banner-note {
    font-size: 1.15rem;
  }
}
@media (max-width: 380px) {
  /* 極小幅端末（iPhone SE等）：文字サイズと余白をさらに絞ってはみ出しを防止 */
  .shc-s03__banner-note {
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    padding: 1.2rem 1.2rem 1.6rem;
  }
}
/* ---- 各棟ラッパー ---- */
.shc-s03__unit {
  margin-bottom: 0;
}

/* ---- 上段：背景画像＋テキストオーバーレイ ---- */
.shc-s03__hero {
  position: relative;
  width: 100%;
  line-height: 0;
}

.shc-s03__hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストオーバーレイ */
.shc-s03__hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* キャッチコピーは棟により右端がx≒1180pxまで伸びるため、
     旧指定（75%で透明）では右端が明るい空にはみ出して読めなかった。
     写真を暗くしすぎないよう、濃度は控えめのまま到達範囲だけ右へ広げる。 */
  background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.44) 45%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.12) 88%, transparent 100%);
}

.shc-s03__hero-text {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2;
  line-height: 1;
}

.shc-s03__hero-text-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.shc-s03__catch-sub {
  display: block;
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

/* キャッチ：タイトル画像（幅は棟ごとに元サイズ比例で指定＝文字サイズを統一） */
.shc-s03__catch-svg {
  display: block;
  height: auto;
  margin-bottom: 2.4rem;
  /* 背景写真（夕景・室内光）と明度差が出ないため、文字の周囲だけを締めて可読性を確保。
     写真全体を暗くせずにコントラストを稼ぐ狙い。 */
  filter: drop-shadow(0 0.2rem 0.6rem rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.75));
}

/* キャッチ上の「○棟のお住まいご提案例（お住まいアイデアの一例です）」
   ラベル＋補足テキストをひとつの枠で囲む（4棟共通・左寄せ） */
.shc-s03__propose-wrap {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 0.8rem 1.4rem;
  box-sizing: border-box;
  /* 明るい背景（B棟など）でも枠線が埋もれないよう、枠の外側を軽く締める */
  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.55);
}

.shc-s03__propose-svg {
  display: block;
  width: auto;
  height: 3.6rem;
  max-width: none;
  margin-bottom: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 0.1rem 0.4rem rgba(0, 0, 0, 0.9)) drop-shadow(0 0 0.25rem rgba(0, 0, 0, 0.8));
}

/* 各SVGはviewBox内で文字が中心より下に寄っており、棟ごとにズレ量が異なる。
   文字が箱の中心に来るよう棟別に補正（%指定なのでPC/SP両対応・拡大率に追従）。
   補正値 = -(文字中心 - viewBox中心) / viewBox高さ(52) × 100% */
.shc-s03__propose-svg--a {
  transform: translateY(-0.9%);
}

.shc-s03__propose-svg--b {
  transform: translateY(-3.68%);
}

.shc-s03__propose-svg--c {
  transform: translateY(-5.6%);
}

.shc-s03__propose-svg--d {
  transform: translateY(-8.51%);
}

/* 「（お住まいアイデアの一例です）」補足テキスト */
.shc-s03__propose-note {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.9), 0 0 0.2rem rgba(0, 0, 0, 0.7);
}

.shc-s03__catch-main {
  display: block;
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-bottom: 2.4rem;
}

.shc-s03__catch-body {
  display: block;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 2;
  letter-spacing: 0.04em;
  max-width: 380px;
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.9), 0 0 0.2rem rgba(0, 0, 0, 0.6);
}

/* ---- 下段：間取り＋外観写真 ---- */
/* コンテナラッパー：1080pxに収める */
.shc-s03__detail-wrap {
  background: #1a1a1a;
  padding: 0 0 4rem;
}

.shc-s03__detail {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.2rem 2.4rem 0;
  gap: 2.4rem;
  align-items: flex-start;
}

/* 2・4棟目：間取りと外観を左右反転（PCのみ。SPは縦積みのまま） */
@media (min-width: 769px) {
  .shc-s03__unit--reverse .shc-s03__detail {
    flex-direction: row-reverse;
  }

  /* 外観写真を間取りボックスの高さに合わせて伸ばす（暗い余白を防ぐ） */
  .shc-s03__detail {
    align-items: stretch;
  }
}
/* 左：間取りボックス */
.shc-s03__floor {
  flex: 0 0 55%;
  background: #fff;
  padding: 2rem 2.4rem 2.4rem;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 棟ラベル（A棟、B棟…）：アンダーライン・左寄せ */
.shc-s03__floor-label {
  display: inline-block;
  color: #333;
  font-size: 1.95rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin-bottom: 1.2rem;
  align-self: flex-start;
  /* 左寄せ */
}

/* 面積タグ行 → センタリング */
.shc-s03__specs {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
  justify-content: center;
  /* センター */
}

.shc-s03__spec-tag {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  font-size: 1.2rem;
}

.shc-s03__spec-tag-label {
  background: #5a7a3a;
  color: #fff;
  padding: 0.5rem 1.2rem;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.shc-s03__spec-tag-value {
  padding: 0.5rem 1.4rem;
  color: #333;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 間取り図エリア */
.shc-s03__layout-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.6rem;
  position: relative;
  cursor: zoom-in;
  flex: 1;
  /* 空きスペースを埋めて間取り図を上下センターに */
}

/* 虫眼鏡アイコン */
.shc-s03__layout-img::after {
  content: '🔍';
  position: absolute;
  bottom: 0.8rem;
  right: 0.8rem;
  width: 3.2rem;
  height: 3.2rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  pointer-events: none;
  transition: background 0.2s;
}

.shc-s03__layout-img:hover::after {
  opacity: 0;
}

/* Amazon風ホバーズームレンズ（PCのみ） */
.shc-zoom-lens {
  display: none;
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 3px solid rgba(90, 122, 58, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 4px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 10;
  background-repeat: no-repeat;
  background-size: 300%;
  /* 3倍拡大 */
  cursor: none;
}

/* SP用フルスクリーンモーダル */
.shc-zoom-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
  -webkit-overflow-scrolling: touch;
}

.shc-zoom-modal.is-open {
  display: flex;
}

.shc-zoom-modal img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  touch-action: pinch-zoom;
}

.shc-zoom-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.shc-zoom-modal__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.shc-s03__layout-img img {
  width: 100%;
  /* 実験：ボックス幅いっぱい＝D棟レベルまで拡大 */
  height: auto;
}

/* 物件概要ボタン */
.shc-s03__overview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  align-self: center;
  /* ボックス内センタリング */
  margin-top: auto;
  /* 間取り図の高さに関係なくカード下端へ寄せる */
  transition: opacity 0.2s;
}

/* 物件概要ボタン：PCでは間取り図カードに重ねて、棟ごとに位置調整可
   各棟の .shc-s03__floor に style="--btn-right:○;--btn-bottom:○;--btn-w:○" で個別指定 */
.shc-s03__floor {
  position: relative;
}

@media (min-width: 1025px) {
  /* ボタンは通常フローで間取りボックスの下に配置（重ならない） */
  .shc-s03__overview-btn {
    position: static;
    transform: none;
    width: 100%;
    max-width: 300px;
    margin: auto auto 0;
    /* 上autoで間取り図の高さに関係なく下端へ／左右autoで中央 */
    align-self: center;
  }

  .shc-s03__overview-img {
    width: 100%;
    max-width: none;
  }
}
/* SP：4邸カード内の「物件概要」ボタンを表示復活 */
@media (max-width: 768px) {
  .shc-s03__overview-btn {
    display: inline-flex;
    position: static;
    transform: scale(0.8);
    /* 80%縮小 */
    transform-origin: center;
    width: 100%;
    max-width: 360px;
    margin: 1.6rem auto 0;
    align-self: center;
  }

  .shc-s03__overview-img {
    width: 100%;
    max-width: none;
  }
}
/* 棟ラベル（A棟など）：PCは非表示、SPのみ各コンセプト写真の前にゴールドで表示 */
.shc-s03__tou {
  display: none;
}

@media (max-width: 768px) {
  .shc-s03__tou {
    display: block;
    color: #E2C31A;
    /* ヘッダー文字色と同じゴールド */
    font-family: 'Yu Mincho', 'YuMincho', '游明朝', Georgia, serif;
    /* ヘッダータイトルと同じ書体 */
    font-size: 2.6rem;
    font-weight: normal;
    letter-spacing: 0.14em;
    text-align: center;
    padding: 2.8rem 1.6rem 1.4rem;
  }
}
/* 物件概要：画像ボタン */
.shc-s03__overview-img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.shc-s03__overview-btn:hover {
  opacity: 0.88;
}

.shc-s03__overview-btn:hover {
  opacity: 0.85;
}

.shc-s03__overview-btn-label {
  background: #5a4a3a;
  padding: 1rem 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shc-s03__overview-btn-main {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
}

.shc-s03__overview-btn-sub {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  margin-top: 0.2rem;
}

.shc-s03__overview-btn-icon {
  background: #cc2020;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.shc-s03__overview-btn-icon svg {
  width: 16px;
  height: 16px;
  fill: #fff;
  margin-left: 0.2rem;
}

/* 右：外観写真（各棟の画像は間取りカラム高さに合う縦横比で用意済み。
   画像の実寸比でボックスが決まるので、切れも余白も出ない） */
.shc-s03__house {
  flex: 0 0 42%;
  align-self: flex-start;
  line-height: 0;
  position: relative;
}

.shc-s03__house-frame {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}

.shc-s03__house img {
  width: 100%;
  height: auto;
  display: block;
}

/* CG注釈：外観写真の下にはみ出す形で配置 */
.shc-s03__cg-note {
  max-width: 1080px;
  margin: 0.6rem auto 0;
  padding: 0 2.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1.4;
  text-align: right;
}

/* reverse（B棟・D棟）は外観が左なので注釈も左寄せ */
.shc-s03__unit--reverse .shc-s03__cg-note {
  text-align: left;
}

/* コンセプト写真の合成イメージ注釈（各棟ヒーロー写真ボトム配置） */
.shc-s03__hero-img-wrap {
  position: relative;
  line-height: 0;
}

.shc-s03__hero-note {
  position: absolute;
  bottom: 1.6rem;
  left: 0;
  right: 0;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 3.2rem;
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  line-height: 1.7;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.9), 0 0 0.2rem rgba(0, 0, 0, 0.7);
  z-index: 3;
}

/* LIVE YOUR WAY 直下の全体注釈 */
.shc-s03__lead-note {
  max-width: 1080px;
  margin: 2.4rem auto 0;
  padding: 0 3.2rem;
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  line-height: 1.8;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .shc-s03__hero-note {
    padding: 0 1.6rem;
    bottom: 0.8rem;
    font-size: 1.1rem;
  }

  .shc-s03__lead-note {
    padding: 0 1.6rem;
    margin-top: 2rem;
  }
}
/* ============================================================
   Section 03 SP レスポンシブ
   ============================================================ */
@media (max-width: 768px) {
  .shc-s03 {
    padding: 4.8rem 0 0;
  }

  .shc-s03__head {
    padding: 0 1.6rem 3.6rem;
  }

  .shc-s03__hero-text-inner {
    padding: 0 1.6rem;
  }

  /* SP：コンセプト写真に乗っている黒マスク（グラデーション）を削除。 */
  .shc-s03__hero-overlay {
    display: none;
  }

  /* SP：テキスト塊の絶対配置を解除し、画像の下へ通常フローで流す。
     （写真はマスク無しでクリーン表示 → タイトル → 本文ボックスの順） */
  .shc-s03__hero-text {
    position: static;
    transform: none;
    top: auto;
    padding-top: 2rem;
  }

  .shc-s03__catch-svg {
    margin-bottom: 1.6rem;
  }

  /* SP：枠はラベル＋補足テキストを囲んだまま、幅が足りなければ枠内で2行に折り返す */
  .shc-s03__propose-wrap {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    padding: 0.8rem 1rem;
    margin-bottom: 1.2rem;
    max-width: 100%;
  }

  .shc-s03__propose-svg {
    height: 2.2rem;
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
  }

  .shc-s03__propose-note {
    font-size: 1.1rem;
    white-space: nowrap;
  }

  /* SP：リードコピーを画像の下に黒背景で表示 */
  .shc-s03__catch-body {
    display: block;
    background: rgba(0, 0, 0, 0.82);
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1.5rem, 1.8vw, 1.8rem);
    line-height: 1.85;
    padding: 1.4rem 1.6rem;
    position: static;
    max-width: 100%;
    margin-top: 0;
  }

  /* 棟ごとの前後スペース */
  .shc-s03__unit {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .shc-s03__unit:first-of-type {
    padding-top: 0;
  }

  /* コンセプト写真・テキストと間取図の間 */
  .shc-s03__detail-wrap {
    margin-top: 4rem;
  }

  /* 間取図ボックスと外観写真の間（SPは1カラム・画像の実寸比で全体表示） */
  .shc-s03__house {
    height: auto;
    margin-top: 4rem;
    display: block;
  }

  .shc-s03__house-frame {
    height: auto;
    width: 100%;
  }

  .shc-s03__detail {
    flex-direction: column;
    padding: 2rem 1.6rem 0;
    gap: 1.6rem;
  }

  .shc-s03__floor {
    flex: none;
    padding: 1.6rem 1.4rem 1.6rem;
  }

  /* SP：面積タグを縦並び・先頭揃え */
  .shc-s03__specs {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
/* ---- Section03 区画図エリア ---- */
.shc-s03__map {
  background: #e8e4dc;
  padding: 5.2rem 0 6rem;
}

.shc-s03__map-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  text-align: center;
}

.shc-s03__map-img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .shc-s03__map {
    padding: 3.6rem 0 4rem;
  }

  .shc-s03__map-inner {
    padding: 0 1.6rem;
  }
}
/* ============================================================
   Section 04 — 周辺環境
   ============================================================ */
.shc-s04 {
  background: #fff;
  padding: 7.2rem 0 0;
}

/* ---- セクションタイトル ---- */
.shc-s04__head {
  text-align: center;
  padding: 0 2.4rem 1.6rem;
  max-width: 1080px;
  margin: 0 auto;
}

.shc-s04__head-title {
  font-size: clamp(2rem, 2.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin-bottom: 1rem;
}

.shc-s04__head-sub {
  font-size: 1.3rem;
  color: #666;
  letter-spacing: 0.12em;
}

/* ---- Googleマップ ---- */
.shc-s04__map {
  width: 100%;
  margin: 3.2rem 0 0;
  line-height: 0;
}

.shc-s04__map iframe {
  width: 100%;
  height: 400px;
  border: none;
  display: block;
}

/* ---- 施設カードリスト ---- */
/* セクション見出し「周辺環境」 */
.shc-conv-head {
  text-align: center;
  padding: 8rem 2.4rem 2.4rem;
  /* 上=8rem：タイトル→周辺環境見出しの余白を倍に */
  background: #e8e4de;
}

.shc-conv-head__title {
  font-size: clamp(2rem, 2.4vw, 3rem);
  font-weight: normal;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  line-height: 1.4;
}

.shc-conv-head__sub {
  margin-top: 1.2rem;
  font-size: clamp(1.5rem, 1.6vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #333;
}

/* 施設カードの分類ラベル（小さめ） */
.shc-s04__item-cat {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #6C5F17;
  margin-bottom: 0.8rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
}

.shc-s04__list {
  /* リスト自体はコンテナなし、各アイテム内で制御 */
}

/*
  各施設カード：写真フルブリード＋テキスト隔隔

  構造：
  - アイテム全体は display:flex
  - 奇数：[テキストエリア][-----写真エリア画面右端まで-----]
  - 偶数：[-----写真エリア画面左端まで-----][テキストエリア]

  テクニック：
  - アイテムは overflow:visible、写真エリアは画面端まで伸びる
  - テキストエリアは 1080px の左側約 42% に固定
  - 写真エリアは flex:1 で残りを占め、画面右端まで伸びる
*/
.shc-s04__item {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* 背景画像：フルワイド */
.shc-s04__item-photo {
  width: 100%;
  line-height: 0;
}

.shc-s04__item-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/*
  テキストラッパー：画像の白いボックスに重ねる
  画像内の白いエリア：
    奇数（バス停・学校）：左から絀15%、幅絀32%
    偶数（病院・お買い物）：右から絀15%、幅絀32%
*/
/* 奇数（バス停: 003, 学校：005）
   白ボックス：左から 17.9%～52% なので
   left:18% width:33% に設定
*/
.shc-s04__item-text-wrap {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 18%;
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 2.8rem;
  z-index: 2;
  line-height: 1;
  overflow: hidden;
}

/* 偶数（病院：006）
   白ボックス：右から 18% なので
   right:18% width:33%
*/
.shc-s04__item--reverse .shc-s04__item-text-wrap {
  left: auto;
  right: 18%;
}

.shc-s04__item-text {
  width: 100%;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 100%;
}

/* ---- サムネイルグリッド（テキストエリア内） ---- */
.shc-s04__thumbs {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
}

.shc-s04__thumbs--2col {
  grid-template-columns: 1fr 1fr;
}

.shc-s04__thumb {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.shc-s04__thumb img {
  width: 100%;
  height: auto;
  /* 72px固定＋cover→自動：トリミングせず縮小・拡大のみ（PC/SP共通） */
  display: block;
  border-radius: 2px;
}

.shc-s04__thumb-name {
  font-size: 1.4rem;
  color: #333;
  line-height: 1.3;
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* PCでも改行させない（SPと統一） */
}

.shc-s04__thumb-dist {
  font-size: 1.4rem;
  color: #888;
  line-height: 1.3;
  white-space: nowrap;
  /* PCでも改行させない（SPと統一） */
}

.shc-s04__item-category {
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5a7a3a;
  margin-bottom: 0.6rem;
  font-weight: 500;
}

.shc-s04__item-dist {
  font-size: 1.4rem;
  color: #888;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.shc-s04__item-name {
  font-size: clamp(2.2rem, 1.8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: 1.4rem;
  line-height: 1.4;
}

.shc-s04__item-body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #444;
  margin-bottom: 1.6rem;
}

/* スペック行（距離・時間など） */
.shc-s04__item-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.shc-s04__item-spec {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  font-size: 1.4rem;
}

.shc-s04__item-spec-label {
  background: #5a7a3a;
  color: #fff;
  padding: 0.4rem 1rem;
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.shc-s04__item-spec-value {
  padding: 0.4rem 1.2rem;
  color: #333;
  white-space: nowrap;
}

/* （旧・横並び写真ブロックは全幅デザインに移行のため削除） */
/* 写真が複数枚の場合（2枚グリッド） */
.shc-s04__item-photo--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  min-height: 240px;
}

.shc-s04__item-photo--grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* ---- デジタルセレクションマップバナー ---- */
.shc-s04__digi {
  background: #e8f0f0;
  border: 2px dashed #5a9a9a;
  border-radius: 8px;
  max-width: 700px;
  margin: 4rem auto 0;
  padding: 2.4rem 2.8rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.shc-s04__digi-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: #5a9a9a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
}

.shc-s04__digi-text {
  flex: 1;
}

.shc-s04__digi-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.shc-s04__digi-sub {
  font-size: 1.4rem;
  color: #555;
  letter-spacing: 0.04em;
}

.shc-s04__digi-qr {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #aaa;
  text-align: center;
  line-height: 1.4;
}

/* ---- Section04 SP ---- */
@media (max-width: 768px) {
  .shc-s04 {
    padding: 4.8rem 0 0;
  }

  .shc-s04__head {
    padding: 0 1.6rem 1.2rem;
  }

  .shc-s04__map iframe {
    height: 280px;
  }

  /* SP：画像はそのまま、テキストは画像の白いエリアに重なるので読みにくい場合は下に出す */
}
/* 周辺環境カード：1024px以下で「画像の下にテキスト縦積み」に切替 */
@media (max-width: 1024px) {
  .shc-s04__item {
    display: flex;
    flex-direction: column;
  }

  .shc-s04__item-photo {
    position: relative;
    order: 1;
  }

  .shc-s04__item-text-wrap {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    order: 2;
    padding: 2rem 1.6rem;
    background: #f5f3ef;
  }

  .shc-s04__item-text {
    width: 100%;
  }
}
/* SP：周辺環境のサムネ（その他施設）。最大2個なので3列→2列に広げ、間隔も拡大。
   施設名・距離はノーラップ。単独サムネ（医療など）は全幅で長い名称も収める。 */
@media (max-width: 768px) {
  .shc-s04__thumbs {
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 2rem;
  }

  .shc-s04__thumb:only-child {
    grid-column: 1 / -1;
    /* 1つだけのときは全幅 */
    max-width: 28rem;
    /* 単独でも大きくなりすぎないよう上限 */
  }

  .shc-s04__thumb-name,
  .shc-s04__thumb-dist {
    white-space: nowrap;
  }

  /* CTA帯を非表示にした影響で、最後の子(デジタルバナー)の margin-bottom が
     親(#sec-convenience)を突き抜け、body の白が露出していた。
     s04 に padding-bottom を与えてマージン抜けを止め、地色(ベージュ)を下端まで延ばす。 */
  #sec-convenience {
    padding-bottom: 4rem;
  }

  .shc-s04__digi-banner {
    margin-bottom: 0;
  }
}
.shc-s04__digi-banner {
  max-width: 1080px;
  margin: 4rem auto 6rem;
  padding: 0 2.4rem;
  line-height: 0;
}

.shc-s04__digi-banner a {
  display: block;
}

.shc-s04__digi-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .shc-s04__digi-banner {
    padding: 0 1.6rem;
    margin: 2.8rem auto 0;
    /* 下マージンは撤去。下の余白は #sec-convenience の padding-bottom(地色)で確保 */
  }
}
/* ---- Section04 追加テキストスタイル ---- */
.shc-s04__item-dist {
  font-size: 1.4rem;
  color: #555;
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
  line-height: 1.6;
}

.shc-s04__item-lead {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.shc-s04__item-spec-list {
  font-size: 1.4rem;
  color: #444;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-top: 1.4rem;
}

/* ============================================================
   Section Landscape
   ============================================================ */
.shc-landscape {
  background: #fff;
  padding: 7.2rem 0 6rem;
}

.shc-landscape__head {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem 3.2rem;
}

.shc-landscape__head-sub {
  font-size: 1.3rem;
  color: #555;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 2.4rem;
}

.shc-landscape__title-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.shc-landscape__illust {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  line-height: 0;
}

.shc-landscape__illust img {
  width: 100%;
  height: auto;
  display: block;
}

.shc-landscape__caption {
  max-width: 1080px;
  margin: 2.4rem auto 0;
  padding: 0 2.4rem;
  font-size: 1.2rem;
  color: #555;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .shc-landscape {
    padding: 4.8rem 0 4rem;
  }

  .shc-landscape__head {
    padding: 0 1.6rem 2.4rem;
  }

  .shc-landscape__illust {
    padding: 0 1.6rem;
  }

  .shc-landscape__caption {
    padding: 0 1.6rem;
  }
}
/* ---- Landscape 2×2グリッドセクション ---- */
.shc-landscape-grid {
  background: #fff;
  padding: 0 0 7.2rem;
}

.shc-landscape-grid__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem 4rem;
}

.shc-landscape-grid__item {
  display: flex;
  flex-direction: column;
}

.shc-landscape-grid__item-title {
  font-size: 1.3rem;
  color: #555;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.shc-landscape-grid__item-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.6rem;
}

.shc-landscape-grid__item-body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  color: #444;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .shc-landscape-grid__inner {
    grid-template-columns: 1fr;
    padding: 0 1.6rem;
    gap: 3.6rem;
  }
}
/* ============================================================
   Section Smart & Resilience
   ============================================================ */
.shc-smart {
  background: #fff;
  padding: 6rem 0 7.2rem;
}

.shc-smart__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4.8rem 4rem 5.2rem;
  background: #e8f4f8;
  border-radius: 16px;
}

/* タイトルエリア */
.shc-smart__head {
  text-align: center;
  margin-bottom: 3.6rem;
}

.shc-smart__head-title {
  font-size: clamp(2rem, 2.2vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a1a1a;
  margin-bottom: 0.8rem;
}

.shc-smart__head-sub {
  font-size: 1.3rem;
  color: #555;
  letter-spacing: 0.06em;
}

/* 上段：3列グリッド */
.shc-smart__grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2.8rem;
  margin-bottom: 2.8rem;
}

/* 下段：2列グリッド */
.shc-smart__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.8rem;
}

/* 各カード */
.shc-smart__card {
  display: flex;
  flex-direction: column;
}

.shc-smart__card-title {
  font-size: 1.3rem;
  font-weight: 500;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.shc-smart__card-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1.2rem;
  border-radius: 4px;
  position: relative;
}

.shc-smart__card-img-wrap {
  position: relative;
  line-height: 0;
  margin-bottom: 1.2rem;
}

.shc-smart__card-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.shc-smart__card-img-label {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}

.shc-smart__card-body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  color: #333;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.shc-smart__card-note {
  font-size: 1rem;
  color: #666;
  line-height: 1.7;
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

/* SP */
@media (max-width: 768px) {
  .shc-smart {
    padding: 4rem 1.6rem 4.8rem;
  }

  .shc-smart__inner {
    padding: 3.2rem 2rem 3.6rem;
    border-radius: 12px;
  }

  .shc-smart__grid-3 {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .shc-smart__grid-2 {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
/* ============================================================
   Footer
   ============================================================ */
.shc-footer {
  background: #5a5a5a;
  color: #fff;
  padding: 0;
}

/* ナビゲーション行 */
.shc-footer__nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.8rem 0;
}

.shc-footer__nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.8rem;
  align-items: center;
}

.shc-footer__nav-inner a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.2s;
}

.shc-footer__nav-inner a:hover {
  color: #fff;
}

/* メインエリア */
.shc-footer__main {
  padding: 2.8rem 0 2.4rem;
}

.shc-footer__main-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4rem;
}

/* 左：会社情報 */
.shc-footer__company {
  flex: 1;
}

.shc-footer__company-catch {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.shc-footer__company-logo {
  margin-bottom: 1.4rem;
}

.shc-footer__company-logo img {
  height: 32px;
  width: auto;
}

/* ロゴがない場合のテキスト代替 */
.shc-footer__company-name {
  font-size: clamp(1.8rem, 2vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: 1.4rem;
  line-height: 1.3;
}

.shc-footer__company-address {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin-bottom: 1.6rem;
}

/* SNSアイコン */
.shc-footer__sns {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}

.shc-footer__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
  transition: background 0.2s;
}

.shc-footer__sns a:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 右：お客様センター */
.shc-footer__contact {
  flex-shrink: 0;
  text-align: center;
}

.shc-footer__contact-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
}

.shc-footer__contact-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 1.2rem 2.8rem;
}

.shc-footer__contact-tel-icon {
  font-size: 1.8rem;
}

.shc-footer__contact-tel-num {
  font-size: clamp(2rem, 2.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

/* コピーライト */
.shc-footer__copy {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.2rem 2.4rem;
  text-align: right;
  max-width: 1080px;
  margin: 0 auto;
}

.shc-footer__copy p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
}

/* Footer SP */
@media (max-width: 768px) {
  .shc-footer__nav-inner {
    padding: 0 1.6rem;
    gap: 0.8rem 1.6rem;
  }

  .shc-footer__nav-inner a {
    font-size: 1.1rem;
  }

  .shc-footer__main-inner {
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 2.4rem;
  }

  .shc-footer__contact {
    width: 100%;
  }

  .shc-footer__contact-tel {
    padding: 1.2rem 2rem;
  }

  .shc-footer__copy {
    padding: 1.2rem 1.6rem;
    text-align: center;
  }
}
/* ============================================================
   Header 新デザイン（2段構成）
   ============================================================ */
/* 上段：タイトル＋ボタン */
.shc-header__top {
  background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_headerbg.jpg);
  background-size: cover;
  background-position: center center;
  border-bottom: none;
}

.shc-header__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4rem;
  gap: 2rem;
}

.shc-header__site-title {
  flex: 1;
  font-size: clamp(2rem, 3.5vw, 2.2rem);
  font-weight: normal;
  color: #E2C31A;
  letter-spacing: 0.06em;
  text-align: left;
  font-family: 'Yu Mincho', 'YuMincho', '游明朝', Georgia, serif;
  line-height: 1.2;
}

/* サイト名の上のコピー：タイトルの60%サイズ。フォント・色はタイトルから継承 */
.shc-header__site-catch {
  display: block;
  font-size: 60%;
  line-height: 1.4;
  margin-bottom: 0.2em;
}

.shc-header__top-btns {
  display: flex;
  gap: 4.6rem;
  flex-shrink: 0;
}

/* PCのみ：資料請求/来場予約ボタンを近づける（SPは上記4.6remのまま＝当初通り） */
@media (min-width: 769px) {
  .shc-header__top-btns {
    gap: 1.6rem;
  }
}
.shc-header__top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2rem;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: transparent !important;
  white-space: nowrap;
  transition: opacity 0.2s;
  line-height: 1;
}

.shc-header__top-btn--request {
  color: #E2C31A;
  border: 1px solid #E2C31A !important;
}

.shc-header__top-btn--reserve {
  color: #E2C31A;
  border: 1px solid #E2C31A !important;
}

.shc-header__top-btn:hover {
  opacity: 0.85;
}

.shc-header__top-btn--request {
  background: transparent;
  color: #E2C31A;
  border: 1.5px solid #E2C31A;
}

.shc-header__top-btn--reserve {
  background: transparent;
  color: #E2C31A;
  border: 1.5px solid #E2C31A;
}

/* 下段：サブナビ */
.shc-header__nav {
  display: block;
  /* 旧定義の display:flex を打ち消し、nav-inner を全幅に */
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e0e0e0;
}

.shc-header__nav-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

.shc-header__nav-inner ul {
  display: flex;
  list-style: none;
  gap: 0;
  width: 1320px;
  /* ナビ全体を1320pxに */
  max-width: 100%;
  /* 画面が1320px未満なら画面幅まで */
  margin: 0 auto;
  /* センタリング */
}

.shc-header__nav-inner ul li {
  flex: 0 0 33.333%;
  /* 1320pxを3分割（各440px） */
  text-align: center;
}

.shc-header__nav-inner ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  padding: 0 0.8rem;
  font-size: 1.6rem;
  font-weight: normal;
  color: #6C5F17;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.shc-header__nav-inner ul li a:hover {
  color: #c8a96e;
  background: #faf8f4;
}

/* Section02をHero化：100vhで画面いっぱい */
.shc-s02--hero {
  padding-top: 0 !important;
  margin-top: 9.6rem;
}

.shc-s02--hero .shc-s02__bg-wrap {
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   Header 新デザイン SP
   ============================================================ */
@media (max-width: 768px) {
  .shc-header__top-inner {
    padding: 0 1.6rem;
    height: 52px;
  }

  .shc-header__site-title {
    font-size: 1.3rem;
  }

  .shc-header__top-btn {
    padding: 0.6rem 1rem;
    font-size: 1.1rem;
  }

  /* SP：ヘッダーはタイトル＋ハンバーガーのみ。資料請求/来場予約は下部バーへ集約 */
  .shc-header__top-btn--request,
  .shc-header__top-btn--reserve {
    display: none;
  }

  .shc-header__nav {
    display: flex;
    position: static;
    width: 100%;
    height: auto;
    background: #fff;
    border-top: none;
    box-shadow: none;
    z-index: 99;
    transform: none;
    transition: none;
    overflow: visible;
    padding-top: 0;
  }

  .shc-header__nav.is-open {
    display: flex;
    transform: none;
  }

  .shc-header__nav-inner {
    width: 100%;
  }

  .shc-header__nav-inner ul {
    flex-direction: row;
    padding: 0;
    gap: 0;
    justify-content: space-around;
    width: 100%;
  }

  .shc-header__nav-inner ul li a {
    display: block;
    border-right: none;
    border-bottom: none;
    padding: 1rem 0.3rem;
    font-size: 1.15rem;
    color: #333;
    white-space: nowrap;
  }

  .shc-header__nav-inner ul li:first-child a {
    border-left: none;
  }

  .shc-header__hamburger {
    display: none;
  }

  .shc-s02--hero {
    margin-top: 5.2rem;
  }
}
/* ============================================================
   デザイン調整：フォント・セクション高さ
   2026.06.09
   ============================================================ */
/* ---- 明朝体ノーボールド：全要素でfont-weightを上書き ---- */
h1, h2, h3, h4, h5, h6,
.shc-s01-text__title,
.shc-s02__title,
.shc-s02__subtitle,
.shc-s02__label,
.shc-s03__head-title,
.shc-s03__catch-main,
.shc-s03__catch-sub,
.shc-s04__head-title,
.shc-s04__item-name,
.shc-s04__item-lead,
.shc-landscape__head-sub,
.shc-landscape__title-img,
.shc-smart__head-title,
.shc-smart__card-title,
.shc-footer__company-name,
strong, b {
  font-weight: 400 !important;
}

/* ---- Hero（Asset Value）：800px目安 ---- */
.shc-s02--hero .shc-s02__bg-wrap {
  min-height: 800px;
}

/* ---- ひまわりセクション：800px目安 ---- */
.shc-s01-stage {
  height: 800px !important;
}

/* .shc-s01-wrap は新方式で不使用のためコメントアウト */
/* .shc-s01-wrap { height: calc(4 * 800px) !important; } */
/* ============================================================
   Location（周辺図）＆ Plot Plan（区画図）
   縦（viewport高さ）を基準に、それぞれ1画面に収める
   ============================================================ */
/* 周辺図・区画図 共通の幅（縦基準。この1箇所で両方の大きさを管理）※54vhを増減で調整 
:root {
  --map-w: min(70vh, 92vw, 920px);
}
*/
/* ---- Location ---- */
.shc-loc {
  background: #E2D6C0;
  min-height: 0;
  /* PCでもフルスクリーン(100vh)をやめてコンテンツ高さに */
  display: flex;
  flex-direction: column;
}

.shc-loc__banner {
  width: 100%;
  line-height: 0;
}

.shc-loc__banner img {
  width: 100%;
  height: auto;
  display: block;
}

.shc-loc__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* 縦中央寄せ→上揃え（タイトル直下に配置） */
  gap: 2.4rem;
  padding: 8rem 0 3.2rem;
  /* 上=8rem(80px)：タイトル→リード文の余白を倍に */
}

.shc-loc__lead {
  width: 100%;
  max-width: 920px;
  /* 地図幅と無関係に広げる */
  margin: 0;
  padding: 0 2.4rem;
  /* PC時の両脇余白 */
  /* 明朝体に変更 */
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", "MS PMincho", serif;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #000;
}

.shc-loc__map {
  width: var(--map-w);
}

.shc-loc__map img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Plot Plan（区画図） ---- */
.shc-plot {
  background: #FFFFFF;
  min-height: 0;
  /* PCでもフルスクリーン(100vh)をやめてコンテンツ高さに */
  display: flex;
  flex-direction: column;
}

.shc-plot__banner {
  width: 100%;
  line-height: 0;
}

.shc-plot__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Convenience & Lifestyle バナー（PCはフルワイド帯） */
.shc-conv__banner {
  width: 100%;
  line-height: 0;
  background: #e8e4de;
}

.shc-conv__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 3つのタイトルバナー共通：picture をブロック化 */
.shc-loc__banner picture,
.shc-plot__banner picture,
.shc-conv__banner picture {
  display: block;
  line-height: 0;
}

/* セクションタイトル日本語サブタイトル */
.shc-loc__banner,
.shc-plot__banner,
.shc-conv__banner {
  position: relative;
}

/* Map部分のみ：画像を下げ、日本語テキスト位置調整 */
.shc-loc .shc-plot__banner img {
  margin-top: 2%;
}

.shc-loc .shc-plot__banner .shc-sectitle-jp {
  bottom: 31%;
  right: 56%;
}

/* PlotPlan部分のみ：日本語テキスト位置調整 */
.shc-plot .shc-plot__banner .shc-sectitle-jp {
  bottom: 10%;
  right: 58%;
}

.shc-sectitle-jp {
  position: absolute;
  bottom: 18%;
  transform: translateY(50%);
  right: 6%;
  font-size: clamp(1rem, 1.4vw, 2rem);
  color: #000;
  letter-spacing: 0.15em;
  line-height: 1;
  white-space: nowrap;
}

/* Convenience：背景を上に伸ばす＋日本語テキストを画像に近づける */
.shc-conv__banner .shc-sectitle-jp {
  right: 32%;
}

.shc-conv__banner {
  padding-top: 4rem;
}

.shc-sectitle-jpLO {
  position: absolute;
  bottom: 18%;
  transform: translateY(50%);
  right: 5%;
  font-size: clamp(1.2rem, 2.4vw, 4.6rem);
  color: #fff;
  letter-spacing: 0.15em;
  line-height: 1;
  white-space: nowrap;
}

.shc-plot__map {
  flex: none;
  /* 縦に伸びて中央寄せされるのをやめる（区画図をタイトル直下へ） */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2.4rem 3rem;
  /* 上=6rem：タイトル→区画図の余白を倍に（下は3remのまま） */
}

.shc-plot__map img {
  width: var(--map-w);
  /* ← 上の周辺図と同じ幅に揃える */
  max-width: 100%;
  height: auto;
  display: block;
  transform: scale(0.9);
  /* 区画図を90%サイズに */
}

/* ---- Convenience施設カード：高さを抑える ---- */
.shc-s04__item {
  min-height: 0;
}

/* SP：Plot Plan / Location は縦いっぱい中央寄せをやめ、タイトル→コンテンツの余白を高さ非依存にする */
@media (max-width: 768px) {
  .shc-plot {
    min-height: 0;
  }

  .shc-plot__map {
    flex: none;
    padding: 2.2rem 1.6rem;
  }

  /* Location：min-height:100vh と body の縦中央寄せ(justify-content:center)が、
     画面が高いほど余白を増やしていた。両方解除して上揃え＝余白を一定に。 */
  .shc-loc {
    min-height: 0;
  }

  .shc-loc__body {
    flex: none;
    justify-content: flex-start;
  }
}
/* ---- Smart & Resilienceバナー：800px以内 ---- */
.shc-smart {
  padding: 4rem 0 4.8rem;
}

/* ---- フォントサイズ調整（デザインに近づける） ---- */
.shc-s02__title {
  font-size: clamp(2rem, 2.4vw, 3rem);
  letter-spacing: 0.08em;
}

.shc-s02__subtitle {
  font-size: clamp(1.2rem, 1.2vw, 1.4rem);
  letter-spacing: 0.1em;
}

.shc-s02__label {
  font-size: 1.1rem;
  letter-spacing: 0.3em;
}

.shc-s01-text__title {
  font-size: clamp(1.6rem, 1.8vw, 2.2rem);
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.shc-s01-text__body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 2;
}

.shc-s04__item-name {
  font-size: clamp(2.2rem, 1.8vw, 2.4rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.shc-s04__item-lead {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
}

.shc-s04__item-body {
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  line-height: 1.9;
}

/* ---- SP：ひまわりセクション高さ ---- */
@media (max-width: 768px) {
  .shc-s01-stage {
    height: 100svh !important;
  }

  /* .shc-s01-wrap { height: calc(4 * 100svh) !important; } */
  .shc-s02--hero .shc-s02__bg-wrap {
    min-height: 600px;
  }
}
/* ============================================================
   Section 02 — パララックス（ひまわり青空）
   background-attachment: fixed でパララックス効果
   ============================================================ */
.shc-parallax-section {
  position: relative;
  overflow: hidden;
}

.shc-parallax {
  position: relative;
  height: 800px;
  overflow: hidden;
}

/* 背景：background-attachment: fixed でパララックス */
.shc-parallax__bg {
  position: absolute;
  inset: -20% 0;
  /* 上下に余白を持たせてスクロール時に切れないように */
  background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_section01_000.jpg);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  z-index: 0;
}

/* 合成画像：フルサイズでフェード切り替え */
.shc-parallax .shc-s01-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.shc-parallax .shc-s01-photo.is-active {
  opacity: 1;
}

.shc-parallax .shc-s01-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* テキストマスク */
.shc-parallax .shc-s01-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 2.4rem;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.shc-parallax .shc-s01-mask {
  display: block;
  width: 440px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3.6rem 3.2rem;
  pointer-events: auto;
}

.shc-parallax .shc-s01-text {
  opacity: 1;
  visibility: visible;
  padding: 0;
}

/* スクロールトリガー用ラッパー（JS用） */
.shc-parallax-section {
  /* JS でスクロール量を制御するため高さを確保 */
}

/* SP */
@media (max-width: 768px) {
  .shc-parallax {
    height: 100svh;
  }

  .shc-parallax__bg {
    background-attachment: scroll;
    /* iOS対応：fixedは使えない */
    inset: 0;
  }

  .shc-parallax .shc-s01-mask {
    position: absolute;
    bottom: 20px;
    left: 16px;
    right: 16px;
    width: auto;
    padding: 2rem 1.6rem;
  }

  .shc-parallax .shc-s01-inner {
    align-items: flex-end;
    padding: 0;
  }
}
/* #sec-conceptの高さは.shc-sunflower-wrapで制御するため不要 */
/* ============================================================
   Section 02 — Sunflower Sticky Scroll（1600px）
   ラッパー1600pxの間、ステージが画面に貼り付く
   ============================================================ */
/* ラッパー：ステージ高さ（900px）＋スクロール量（800px） = 1700px */
.shc-sunflower-wrap {
  position: relative;
  height: 1700px;
}

/* ステージ：画面に貿り付く・高さ900px（ユトりあり） */
.shc-sunflower-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 900px;
  overflow: hidden;
}

/* 背景：ひまわり青空（imgタグ方式） */
.shc-sunflower-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.shc-sunflower-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* 合成画像エリア */
.shc-sunflower-photos {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 各写真：初期は非表示、フェードイン */
.shc-sunflower-photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.shc-sunflower-photo.is-active {
  opacity: 1;
}

.shc-sunflower-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* 1080pxコンテナ */
.shc-sunflower-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  max-width: 1080px;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: 100%;
  padding: 0 2.4rem;
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* 白マスク */
.shc-sunflower-mask {
  width: 440px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3.6rem 3.2rem;
  pointer-events: auto;
  flex-shrink: 0;
}

.shc-sunflower-title {
  font-size: clamp(1.6rem, 1.8vw, 2.2rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  margin-bottom: 1.6rem;
}

.shc-sunflower-body {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #333;
}

/* SP */
@media (max-width: 768px) {
  .shc-sunflower-wrap {
    height: calc(4 * 100svh);
  }

  .shc-sunflower-stage {
    height: 100svh;
  }

  .shc-sunflower-inner {
    left: 0;
    transform: none;
    align-items: flex-end;
    padding: 0 0 2rem;
  }

  .shc-sunflower-mask {
    width: auto;
    margin: 0 1.6rem;
    padding: 2rem 1.6rem;
  }
}
/* ============================================================
   ※ Header v2（headerbg.jpg背景の旧デザイン）は未使用のため削除しました。
   実際のヘッダーは冒頭の .shc-header（新デザイン）が有効です。
   ============================================================ */
/* 旧shc-s02--heroのmargin-topはmainのpadding-topで対応済み */
.shc-s02--hero {
  margin-top: 0 !important;
}

/* SP */
@media (max-width: 768px) {
  .shc-header__top-inner {
    height: 52px;
  }

  .shc-s02--hero {
    margin-top: 9.2rem !important;
    /* SP：5.2rem＋サブナビ4rem */
  }
}
/* ============================================================
   Hero Section（新デザイン）
   背景：hero.jpg フルスクリーン
   テキスト：左上寄り 白文字
   ボタン：herobt.jpg 下部に重なる
   モーダル：#0D4167背景
   ============================================================ */
.shc-hero-new {
  position: relative;
  width: 100%;
  overflow: visible;
  background: #fff;
  /* 背景は白（旧 #5ba3d0 から変更） */
}

/* 背景画像：トリミングなしで全体表示 */
.shc-hero-new__bg {
  position: relative;
  z-index: 0;
  line-height: 0;
}

.shc-hero-new__bg picture {
  display: block;
  line-height: 0;
}

.shc-hero-new__bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア（SVGコピー）：空エリアに配置 */
.shc-hero-new__text {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 72%;
  max-width: 880px;
  text-align: center;
}

.shc-hero-new__copy-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ボタン：JSで is-floating / is-docked を付与して3段階制御 */
/* ボタン：景色画像の下に通常フローで配置（初期から表示）。
   スクロール時に JS が --rise(px) を更新し、transform で速めに上昇→ロックさせる。 */
.shc-hero-new__btn-wrap {
  display: block;
  margin: 4.8rem auto 0;
  /* GAP：景色画像下端からの初期の間隔（調整可） */
  width: 90%;
  max-width: 786px;
  /* バナー（1338×228）→ 表示高さ約134px */
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  position: relative;
  z-index: 90;
  will-change: transform;
  transform: translateY(calc(var(--rise, 0px) * -1));
}

.shc-hero-new__btn-wrap:hover {
  opacity: 0.9;
}

.shc-hero-new__btn-wrap picture {
  display: block;
  line-height: 0;
}

.shc-hero-new__btn-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   モーダルウィンドウ
   ============================================================ */
.shc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.shc-modal.is-open {
  display: flex;
}

.shc-modal__inner {
  position: relative;
  background: #0D4167;
  max-width: 1280px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 4px;
}

.shc-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}

.shc-modal__close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.shc-modal__close::before,
.shc-modal__close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.shc-modal__close::before {
  transform: rotate(45deg);
}

.shc-modal__close::after {
  transform: rotate(-45deg);
}

.shc-modal__content img {
  width: 100%;
  height: auto;
  display: block;
}

/* SP */
@media (max-width: 768px) {
  /* SPは縦長画像（heroSP.jpg）をトリミングなしで全体表示。
     高さは画像のアスペクト比に追従させるため固定指定しない。 */
  .shc-hero-new__text {
    width: 92%;
    top: 30%;
  }

  .shc-hero-new__btn-wrap {
    width: auto;
    /* 中身(=バナー画像)に合わせて中央寄せ */
    max-width: 92%;
  }

  /* SPバナーはPCと同じピクセル高さ(121px)に揃える。width:autoで画像比率を維持 */
  .shc-hero-new__btn-wrap img {
    height: 121px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
}
/* ---- モーダル内テキストスタイル ---- */
.shc-modal__inner {
  padding: 6rem 5.6rem 5.6rem;
}

.shc-modal__label {
  display: block;
  font-size: 3rem;
  font-weight: normal;
  color: #fff;
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 1.2rem;
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.shc-modal__title {
  display: block;
  font-size: 4.6rem;
  font-weight: normal;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.shc-modal__line {
  display: block;
  margin: 0 auto 3.6rem;
  max-width: 360px;
  height: auto;
}

.shc-modal__body {
  font-size: 2.4rem;
  font-weight: normal;
  color: #fff;
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin-bottom: 3.2rem;
}

.shc-modal__note {
  border: 1px solid #fff;
  padding: 2.4rem 2.8rem;
  font-size: 2.4rem;
  font-weight: normal;
  color: #fff;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

@media (max-width: 768px) {
  .shc-modal__inner {
    padding: 4.8rem 2.4rem 3.6rem;
  }

  .shc-modal__label {
    font-size: 2rem;
  }

  .shc-modal__title {
    font-size: 2.8rem;
  }

  .shc-modal__body,
  .shc-modal__note {
    font-size: 1.6rem;
  }
}
/* acc_skipのpタグのデフォルトmarginを削除 */
.acc_skip {
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* ============================================================
   Section 02 — ひまわりセクション（通常フロー版・止まらない動き）
   背景はコンテンツと一緒にスクロール。コピー→写真4枚→CTAの縦並び。
   ============================================================ */
.shc-sf2-wrap {
  position: relative;
  /* 背景の基準 */
  overflow: hidden;
  padding-top: 2rem;
  /* 白い帯の高さ（80px→20px）※bgのtopと揃える・調整可 */
}

/* 背景：ひまわり青空（白い帯の分だけ下げて開始 → 上部が白く残る） */
.shc-sf2-bg {
  position: absolute;
  top: 2rem;
  /* ← 白い帯の高さ（80px→20px）。wrapのpadding-topと同じ値に */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.shc-sf2-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 75%;
  /* ひまわりをセクション中央〜下あたりに見せる */
  display: block;
}

/* コピー（白マスク）：普通に流れて上に消える */
.shc-sf2-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding: 0 4rem;
  display: flex;
  justify-content: center;
}

.shc-sf2-mask {
  width: 100%;
  max-width: 900px;
  margin-top: 8rem;
  /* Hero／バナーから離す上余白 ※調整可 */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 6rem;
  text-align: center;
  position: relative;
}

.shc-sf2-title-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 7rem;
  /* 左右autoをやめて左寄せに（下余白7remは維持） */
}

.shc-sf2-body {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
  font-weight: normal;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #333;
  text-align: left;
}

/* 写真4枚：白マスクの後ろに配置（z-index:1 < mask の z-index:2） */
.shc-sf2-photos {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4rem;
  max-width: 1200px;
  margin: -54rem auto 0;
  /* ← 本文の上に少し飛び出すくらい上に */
  padding: 4rem 4rem 14rem;
}

/* 各写真：初期は非表示、画面に入ったらフェードイン */
.shc-sf2-photo {
  flex: 0 1 23%;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.shc-sf2-photo.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.shc-sf2-photo picture {
  display: block;
  line-height: 0;
}

.shc-sf2-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* コラージュ風の段差（出現の順番はJSがスクロール量で制御） */
.shc-sf2-photo--1 {
  margin-top: 6rem;
}

.shc-sf2-photo--2 {
  margin-top: 0;
}

.shc-sf2-photo--3 {
  margin-top: 8rem;
}

.shc-sf2-photo--4 {
  margin-top: 2rem;
}

/* CTA帯：深緑オーバーレイ＋ボタン（写真の後に出現） */
.shc-sf2-cta {
  position: relative;
  z-index: 2;
}

/* CTA帯のグリーン背景：擬似要素にして半透明化し、後ろのひまわりを透かす */
.shc-sf2-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_section02_001.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.74;
  /* 26%透過。数値を下げるほど透過が強くなる（例: 0.5 で半透明、0.26 でかなり透ける） */
}

.shc-sf2-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 1320px;
  margin: 0 auto;
  padding: 3rem 2rem;
  gap: 8rem;
  justify-content: center;
  align-items: center;
}

.shc-sf2-cta-btn {
  flex: 0 1 28.8%;
  /* 80%に縮小（旧36% × 0.8）。space-betweenで左右端へ配置 */
  display: block;
  transition: opacity 0.2s;
}

.shc-sf2-cta-btn:hover {
  opacity: 0.88;
}

.shc-sf2-cta-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* SP */
@media (max-width: 768px) {
  .shc-sf2-wrap {
    padding-top: 2rem;
  }

  .shc-sf2-inner {
    padding: 0 1.6rem;
  }

  .shc-sf2-mask {
    width: 100%;
    padding: 2.4rem;
  }

  /* SP：正方形PNGを左右交互＋段差でジグザグに配置（PCのパララックスとは別の動き） */
  .shc-sf2-photos {
    display: block;
    flex-wrap: nowrap;
    gap: 0;
    max-width: 100%;
    padding: 1rem 1.2rem 2rem;
    margin-top: -52rem;
    z-index: 1;
  }

  .shc-sf2-photo {
    width: 36%;
    margin-top: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  /* 1・3=左寄せ／2・4=右寄せ。2枚目以降は正マージンで縦に間を空け、左右の段差と合わせて空気感を出す */
  /* 全写真をセンター配置。ジグザグは translateX で制御 */
  .shc-sf2-photo--1 {
    margin: 0 auto !important;
  }

  .shc-sf2-photo--2 {
    margin: 3% auto 0 !important;
  }

  .shc-sf2-photo--3 {
    margin: 3% auto 0 !important;
  }

  .shc-sf2-photo--4 {
    margin: 3% auto 0 !important;
  }

  /* 出現前：左右わずかにずらし＋下からフェード */
  .shc-sf2-photo--1,
  .shc-sf2-photo--3 {
    transform: translateX(-6%) translateY(1.5rem);
  }

  .shc-sf2-photo--2,
  .shc-sf2-photo--4 {
    transform: translateX(6%) translateY(1.5rem);
  }

  /* 出現後：センターに戻る（微ジグザグだけ残す） */
  .shc-sf2-photo.is-visible.shc-sf2-photo--1,
  .shc-sf2-photo.is-visible.shc-sf2-photo--3 {
    transform: translateX(-53%);
  }

  .shc-sf2-photo.is-visible.shc-sf2-photo--2,
  .shc-sf2-photo.is-visible.shc-sf2-photo--4 {
    transform: translateX(44%);
  }

  .shc-sf2-cta-inner {
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 1.6rem;
  }

  .shc-sf2-cta-btn {
    flex: none;
    width: 100%;
    max-width: 320px;
    /* 80%に縮小（旧400px × 0.8） */
  }
}
/* ============================================================
   SP用 固定フッターCTAバー（資料請求 / 来場予約 / 物件概要）
   PCヘッダーの四角ボタンデザイン（金枠＋金文字＋ヘッダー背景）で統一
   2026.06 SP追加
   ============================================================ */
.shc-spbar {
  display: none;
  /* PCでは非表示 */
}

@media (max-width: 768px) {
  .shc-spbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    /* iOS Safari はツールバー表示中 env(safe-area-inset-bottom)=0 を返すため、
       max() で最低余白を確保し、下部ツールバー/ホームインジケータに被らないようにする */
    /* padding-bottom: max(1.8rem, calc(0.8rem + env(safe-area-inset-bottom)));*/
    background-image: url(../media/images/es/2026/yahabacho/yahabachoikeda_lp_2026_04_headerbg.jpg);
    background-size: cover;
    background-position: center center;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  }

  .shc-spbar__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    padding: 0.6rem 0.4rem;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
    color: #E2C31A;
    border: 1.5px solid #E2C31A;
    background: rgba(0, 0, 0, 0.28);
    text-decoration: none;
    white-space: nowrap;
    font-family: 'Yu Mincho', 'YuMincho', '游明朝', Georgia, serif;
    line-height: 1.2;
  }

  /* 固定バーに最下部コンテンツが隠れないよう余白を確保（バー高さ＋下部安全余白ぶん） */
  body {
    padding-bottom: 8.4rem;
  }

  /* (3) ページ内の赤緑CTA帯（資料請求/見学予約）：SPでも表示（復活） */
  .shc-sf2-cta {
    display: block;
  }
}
/* ============================================================
   SP用 セクションタイトル（Location / Plot Plan / Convenience & Lifestyle）
   PCはフルワイド帯。SPは文字部分にトリミングした画像へ差し替え、
   3つを同じ高さ(=同じ文字サイズ)で中央配置。一番長い Convenience が約90vw幅。
   2026.06 SP追加
   ============================================================ */
@media (max-width: 768px) {
  .shc-loc__banner img,
  .shc-plot__banner img,
  .shc-conv__banner img {
    height: 9vw;
    /* conv(10:1) → 約90vw幅。他は同じ文字サイズで自然と短く */
    width: auto;
    max-width: 90vw;
    margin: 0 auto;
    /* センター配置 */
    display: block;
  }

  /* タイトルバー上下の余白＋帯色を全幅に敷く（中央のクロップ画像と同色で繋ぎ、フル幅の帯に見せる） */
  .shc-loc__banner,
  .shc-plot__banner,
  .shc-conv__banner {
    padding: 5.2rem 0 0;
    /* 下padding=0で文字を帯の最下端へ→下のセクションに繋げる（PC再現）。上で帯高さ維持 */
  }

  .shc-loc__banner {
    background: #201615;
  }

  /* 濃茶 */
  .shc-plot__banner {
    background: #FFFFFF;
  }

  .shc-conv__banner {
    background: #e8e4de;
  }

  .shc-loc .shc-plot__banner {
    background: #e2d6c0;
  }

  /* Map部分のみ */
  .shc-sectitle-jp {
    position: static;
    transform: none;
    display: block;
    margin-left: 0;
    padding: 0 0 0.6rem;
    font-size: 1.9rem;
    line-height: 1;
    order: -1;
    text-align: center;
  }

  /* 分譲エリア（Location大タイトル）：SPでは他ラベル同様に画像の上へ通常フロー配置
     （order:-1で画像の上・中央寄せ）。サイズは小タイトル(1.9rem)より大きい2.4remで
     大小関係を維持。色は濃茶バナー上の白(#fff)を継承。 */
  .shc-sectitle-jpLO {
    position: static;
    transform: none;
    display: block;
    margin-left: 0;
    padding: 0 0 0.6rem;
    font-size: 2.4rem;
    line-height: 1;
    order: -1;
    text-align: center;
  }

  .shc-loc__banner,
  .shc-plot__banner,
  .shc-conv__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  /* タイトル→コンテンツの余白を3セクションで統一（約32px）。
     Location=リード文 / Plot=区画図 / Convenience=周辺環境見出し */
  .shc-loc__body {
    padding-top: 3.2rem;
  }

  /* タイトル→リード文を約32pxに（中央寄せ解除後の実体余白） */
  .shc-conv-head {
    padding-top: 3.2rem;
  }

  /* 40px→32px（周辺環境見出しまで） */
}
/* ---- ひまわりセクション注記テキスト ---- */
.shc-sf2-note {
  position: relative;
  z-index: 3;
  text-align: right;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0.8rem 4rem 0;
  font-size: 1.3rem;
  color: #333333;
  letter-spacing: 0.04em;
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

@media (max-width: 768px) {
  .shc-sf2-note {
    padding: 0.8rem 1.6rem 0;
    font-size: 1.3rem;
  }
}
/* ============================================================
   #7 周辺環境カード（PC>1024）：焼き込み白ボックスへのオーバーレイを廃止し
   「クリーン正方形画像 + 横のテキスト列」へ。窮屈・変な改行・はみ出しを解消。
   画像46% / テキスト54%、--reverse で左右交互。
   ============================================================ */
@media (min-width: 1025px) {
  .shc-s04__item {
    display: flex;
    align-items: stretch;
    overflow: visible;
    line-height: 1.6;
  }

  .shc-s04__item--reverse {
    flex-direction: row-reverse;
  }

  .shc-s04__item-photo {
    flex: 0 0 46%;
    width: 46%;
    align-self: stretch;
    line-height: 0;
  }

  .shc-s04__item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* テキストは絶対配置オーバーレイをやめ、通常フローの列に */
  .shc-s04__item-text-wrap {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: auto;
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4.4rem 5rem;
    background: #f5f3ef;
    overflow: visible;
  }

  .shc-s04__item--reverse .shc-s04__item-text-wrap {
    left: auto;
    right: auto;
  }

  .shc-s04__item-text {
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  /* 単独サムネが横に伸びすぎないよう上限（読みやすい幅に） */
  .shc-s04__thumb:only-child {
    max-width: 22rem;
  }
}
/* ============================================================
   グローバルヘッダー・メガメニュー（サイト共通・新発表フェア/
   住まいリアルギャラリーと同一仕様）
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow 0.3s;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding: 8px 24px;
  }
}
.site-header__logo img {
  height: 32px;
  width: auto;
}

@media (min-width: 768px) {
  .site-header__logo img {
    height: 44px;
  }
}
.site-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .site-header__nav {
    display: flex;
    align-items: center;
  }
}
.site-header__nav a {
  position: relative;
  padding: 0 20px;
  font-size: 13px;
  color: #1a1a1a;
  transition: opacity 0.2s;
}

.site-header__nav a:hover {
  opacity: 0.6;
}

.site-header__nav a + a {
  border-left: 1px solid #e5e7eb;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .site-header__right {
    gap: 8px;
  }
}
.site-header__sns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__sns img {
  width: 20px;
  height: 20px;
}

.site-header__sns a {
  display: flex;
  transition: opacity 0.2s;
}

.site-header__sns a:hover {
  opacity: 0.6;
}

.site-header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-header__menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
}

.site-header__menu-icon span {
  display: block;
  height: 2px;
  background: #2c5a7c;
  border-radius: 1px;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.drawer.is-open .drawer__overlay {
  opacity: 1;
}

.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s;
}

.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  max-width: 380px;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 24px;
}

@media (min-width: 768px) {
  .drawer__panel {
    max-width: 440px;
    padding: 32px;
  }
}
.drawer__close {
  position: relative;
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-bottom: 24px;
  background: none;
  border: 0;
  cursor: pointer;
}

.drawer__close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #2c5a7c;
}

.drawer__close span:first-child {
  transform: rotate(45deg);
}

.drawer__close span:last-child {
  transform: rotate(-45deg);
}

.drawer__groups > li {
  border-bottom: 1px solid #e5e7eb;
}

.drawer__groups details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #2c5a7c;
  cursor: pointer;
  list-style: none;
}

.drawer__groups details summary::-webkit-details-marker {
  display: none;
}

.drawer__groups details summary a {
  color: inherit;
  pointer-events: none;
}

.drawer__groups details summary::after {
  content: "+";
  flex-shrink: 0;
  margin-left: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #2c5a7c;
}

.drawer__groups details[open] summary::after {
  content: "−";
}

.drawer__thumbs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 4px 12px;
}

.drawer__thumbs a {
  display: block;
}

.drawer__thumbs img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
}

.drawer__thumbs span {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #1a1a1a;
}

.drawer__pref-list {
  padding: 0 4px 16px 12px;
}

.drawer__pref-list li {
  border-top: 1px solid #e5e7eb;
}

.drawer__pref-list a {
  display: block;
  padding: 12px 4px;
  font-size: 14px;
  color: #1a1a1a;
}

.drawer__single a {
  display: block;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 700;
  color: #2c5a7c;
}

.drawer__buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.drawer__buttons li {
  flex: 1;
}

.drawer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 700;
  color: #1b3a6b;
  border: 1px solid #1b3a6b;
  border-radius: 4px;
}

.drawer__button img {
  width: 16px;
  height: 16px;
}

.drawer__button--fill {
  color: #fff;
  background: #1b3a6b;
}

.drawer__circles {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}

.drawer__circles a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #1a1a1a;
}

.drawer__circles img {
  width: 14px;
  height: 14px;
}

.drawer__movie {
  margin-top: 20px;
  text-align: center;
}

.drawer__movie a {
  font-size: 13px;
  color: #2c5a7c;
  text-decoration: underline;
}

.drawer__sns {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.drawer__sns img {
  width: 20px;
  height: 20px;
}

/*# sourceMappingURL=sekisui_yahabacho_2026_06.css.map */