@charset "UTF-8";
/* ==========================================================================
   home.css  ―  トップページ（/）専用スタイル
   ファーストビュー／選ばれる3つの理由／最新のアップデート／無料相談・診断
   すべて .hm- プレフィックスでスコープし、style.css・bamboo.css と衝突しません。
   画像はすべて /img/ に配置します。
   ========================================================================== */

:root {
  --hm-navy: #14284b;
  --hm-navy-2: #1d3a6b;
  --hm-text: #222222;
  --hm-muted: #5b6574;
  --hm-blue: #2aa7d6;
  --hm-blue-soft: #e9f7fc;
  --hm-blue-line: #bfe6f4;
  --hm-orange: #f2661c;
  --hm-orange-2: #ff8a3d;
  --hm-white: #ffffff;
  --hm-radius: 16px;
  --hm-shadow: 0 14px 36px rgba(20, 40, 75, .08);
  --hm-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  --hm-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---- style.css の見出し初期値（大文字化・Oswald・字詰め・色）を打ち消す ---- */
.hm h1, .hm h2, .hm h3, .hm p, .hm a { text-transform: none; }
.hm h1, .hm h2, .hm h3 {
  font-family: var(--hm-serif);
  color: var(--hm-navy);
  letter-spacing: .04em;
  margin: 0;
}
.hm p { font-family: var(--hm-sans); color: var(--hm-text); font-weight: 400; }
.hm a { text-decoration: none; }
.hm img { max-width: 100%; height: auto; }
.hm h2 + p, .hm h3 + p, .hm p + p { margin-top: 0; }
.hm * + .row { margin-top: 0; }

.hm-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---- 共通：英字の小見出し（WHY BAMBOO HOUSE など） ---- */
.hm .hm-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--hm-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .22em; color: var(--hm-blue); text-transform: uppercase;
}
.hm-eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--hm-blue); }
.hm-h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.4; margin-top: 10px !important; }

/* ---- 共通：丸い矢印（→） ---- */
.hm-arrow {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--hm-blue); color: var(--hm-blue);
  transition: background .25s, color .25s, transform .25s;
}
.hm-arrow svg { width: 14px; height: 14px; }
.hm-more {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--hm-sans); font-size: 14px; font-weight: 700; color: var(--hm-navy-2) !important;
}
.hm-more:hover .hm-arrow { background: var(--hm-blue); color: #fff; transform: translateX(3px); }

/* ---- 共通：ボタン ---- */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--hm-sans); font-weight: 700; font-size: 16px; letter-spacing: .08em;
  padding: 16px 34px; border-radius: 999px; color: #fff !important;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.hm-btn svg { width: 16px; height: 16px; }
.hm-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hm-btn--orange { background: linear-gradient(90deg, var(--hm-orange), var(--hm-orange-2)); box-shadow: 0 10px 24px rgba(242, 102, 28, .28); }
.hm-btn--navy { background: var(--hm-navy); box-shadow: 0 10px 24px rgba(20, 40, 75, .22); }
.hm-btn--sm { font-size: 14px; padding: 13px 26px; }

/* ==========================================================================
   1. ファーストビュー
   ========================================================================== */
.hm-hero {
  position: relative; overflow: hidden;
  min-height: clamp(560px, 50vw, 860px);
  display: flex; align-items: center;
  padding: 150px 0 90px;
  background: #dff3fb url(/img/HeroImage.webp) no-repeat right center / cover;
}
.hm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(236, 248, 253, .96) 0%, rgba(236, 248, 253, .82) 34%, rgba(236, 248, 253, 0) 60%);
}
.hm-hero .hm-container { position: relative; z-index: 1; }
.hm-hero__body { max-width: 720px; }
.hm-hero h1 {
  font-size: clamp(28px, 3.3vw, 52px); font-weight: 700; line-height: 1.45; letter-spacing: .03em;
}
.hm-hero__text { margin-top: 26px !important; font-size: 16px; line-height: 2; color: var(--hm-text); }
.hm-hero__cta { margin-top: 36px; }

/* ==========================================================================
   2. コンセプト帯（つくる。その先の成果まで。）＋ページ内ナビ
   ========================================================================== */
.hm-concept { background: #fff; padding: 64px 0 40px; }
.hm-concept__row { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.hm-concept__title {
  font-family: var(--hm-serif) !important; font-size: clamp(26px, 3vw, 40px); font-weight: 700;
  color: var(--hm-navy) !important; letter-spacing: .06em; line-height: 1.4; position: relative; padding-bottom: 18px;
}
.hm-concept__title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 3px;
  background: linear-gradient(90deg, var(--hm-blue) 0 50%, var(--hm-orange) 50% 100%);
}
.hm-concept__text { font-size: 15px; line-height: 2; }
.hm-pagenav { margin-top: 40px; }
.hm-pagenav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.hm-pagenav li { display: flex; align-items: center; }
.hm-pagenav li + li::before { content: ""; width: 1px; height: 16px; background: #c9d3de; margin: 0 22px; }
.hm-pagenav a { font-family: var(--hm-sans); font-size: 14px; letter-spacing: .08em; color: var(--hm-navy) !important; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.hm-pagenav a:hover { color: var(--hm-blue) !important; border-color: var(--hm-blue); }

/* ==========================================================================
   3. 選ばれる3つの理由
   ========================================================================== */
.hm-reasons { background: linear-gradient(180deg, var(--hm-blue-soft) 0%, #f5fbfe 100%); padding: 80px 0 90px; }
.hm-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.hm-card {
  background: #fff; border-radius: var(--hm-radius); box-shadow: var(--hm-shadow);
  padding: 22px 22px 28px; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.hm-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 40, 75, .12); }
.hm .hm-card__no { font-family: var(--hm-serif); font-size: 30px; font-weight: 600; color: var(--hm-blue); line-height: 1; margin-bottom: 12px; }
.hm-card__img { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--hm-blue-soft); }
.hm-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-card h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 700; line-height: 1.5; margin-top: 22px !important; }
.hm-card__text { margin-top: 14px !important; font-size: 14.5px; line-height: 1.9; flex: 1 1 auto; }
.hm-card .hm-more { margin-top: 22px; }

/* ==========================================================================
   4. 最新のアップデート
   ========================================================================== */
.hm-updates { background: #fff; padding: 80px 0 80px; }
.hm-updates__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hm-updates__lead { margin-top: 14px !important; font-size: 15px; line-height: 1.9; }
.hm-updates__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 36px; }
.hm-update {
  display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border-radius: var(--hm-radius);
  box-shadow: var(--hm-shadow); overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.hm-update:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(20, 40, 75, .12); }
.hm-update__img { min-height: 220px; background: var(--hm-blue-soft); }
.hm-update__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-update__body { padding: 26px 24px; display: flex; flex-direction: column; }
.hm-update__label { display: flex; align-items: center; gap: 10px; font-family: var(--hm-sans); font-size: 12px; color: var(--hm-muted); letter-spacing: .06em; }
.hm-update__label::before { content: ""; width: 22px; height: 2px; background: var(--hm-orange); }
.hm-update h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.55; margin-top: 12px !important; }
.hm-update__text { margin-top: 12px !important; font-size: 14px; line-height: 1.85; flex: 1 1 auto; }
.hm-update .hm-more { margin-top: 18px; }

/* ==========================================================================
   5. まずは無料相談・診断
   ========================================================================== */
.hm-consult { background: linear-gradient(180deg, #f5fbfe 0%, var(--hm-blue-soft) 100%); padding: 80px 0 96px; }
.hm-consult__lead { margin-top: 14px !important; font-size: 15px; line-height: 1.9; }
.hm-consult__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 36px; }
.hm-cta-card {
  background: #fff; border-radius: var(--hm-radius); box-shadow: var(--hm-shadow);
  padding: 30px 32px; display: grid; grid-template-columns: 64px 1fr; gap: 8px 22px; align-items: center;
}
.hm-cta-card__icon { grid-row: 1 / 3; width: 64px; height: 64px; color: var(--hm-navy); }
.hm-cta-card__icon.is-blue { color: var(--hm-blue); }
.hm-cta-card__icon svg { width: 100%; height: 100%; }
.hm-cta-card h3 { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.5; }
.hm-cta-card__text { font-size: 14px; line-height: 1.8; }
.hm-cta-card .hm-btn { grid-column: 1 / -1; margin-top: 18px; width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .hm-hero { padding: 120px 0 80px; }
  .hm-update { grid-template-columns: 1fr; }
  .hm-update__img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 991.98px) {
  .hm-concept__row { grid-template-columns: 1fr; gap: 20px; }
  .hm-reasons__grid { grid-template-columns: 1fr 1fr; }
  .hm-consult__grid, .hm-updates__grid { grid-template-columns: 1fr; }
  .hm-update { grid-template-columns: 1.1fr 1fr; }
  .hm-update__img { aspect-ratio: auto; min-height: 220px; }
  .hm-pagenav li + li::before { margin: 0 14px; }
}
@media (max-width: 767.98px) {
  .hm-container { padding: 0 20px; }
  .hm-hero {
    min-height: 0; align-items: flex-start;
    padding: 96px 0 calc(106vw + 8px);
    background-color: #e3f5fb; background-size: 200% auto; background-position: 86% 100%;
  }
  .hm-hero::before { background: linear-gradient(180deg, rgba(236, 248, 253, 1) 0%, rgba(236, 248, 253, 1) calc(100% - 106vw - 30px), rgba(236, 248, 253, 0) calc(100% - 106vw + 70px)); }
  .hm-hero h1 { font-size: 25px; letter-spacing: .02em; }
  .hm-hero__text { font-size: 14.5px; line-height: 1.9; }
  .hm-hero__cta .hm-btn { width: 100%; }
  .hm-concept { padding: 48px 0 32px; }
  .hm-pagenav { display: none; }
  .hm-reasons, .hm-updates, .hm-consult { padding: 56px 0 64px; }
  .hm-reasons__grid { grid-template-columns: 1fr; gap: 20px; }
  .hm-updates__head { flex-direction: column; align-items: flex-start; }
  .hm-update { grid-template-columns: 1fr; }
  .hm-update__img { min-height: 0; aspect-ratio: 16 / 9; }
  .hm-cta-card { padding: 24px 22px; grid-template-columns: 48px 1fr; gap: 6px 16px; }
  .hm-cta-card__icon { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-card, .hm-update, .hm-btn, .hm-arrow { transition: none; }
}


/* ==========================================================================
   追記（2026.10.27）ファーストビューの調整
   ・スマホ（767.98px以下）：最上部に HeroImage.webp、その下に h1
   ・1800px以上：スマートフォンと靴が切れないよう、画像の高さを基準に表示
   ========================================================================== */
.hm-hero__visual { display: none; }

/* ---- 1800px以上：画像を高さいっぱいに表示し、左側は画像の色に合わせて塗る ---- */
@media (min-width: 1800px) {
  .hm-hero {
    min-height: min(46vw, 1100px);
    background:
      url(/img/HeroImage.webp) no-repeat right bottom / auto 100%,
      linear-gradient(180deg, #a4dfee 0%, #9be0ea 50%, #afe8f5 78%, #cceef6 100%);
  }
  .hm-hero::before {
    background: linear-gradient(90deg, rgba(236, 248, 253, .97) 0%, rgba(236, 248, 253, .88) 30%, rgba(236, 248, 253, .45) 46%, rgba(236, 248, 253, 0) 60%);
  }
}

/* ---- スマホ：画像 → 見出し → 説明文 → ボタン の縦並び ---- */
@media (max-width: 767.98px) {
  .hm-hero {
    display: block; min-height: 0;
    padding: 0 0 48px;
    background: #ecf8fd;
  }
  .hm-hero::before { display: none; }
  .hm-hero__visual { display: block; margin: 0 0 28px; }
  .hm-hero__visual img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover; object-position: 85% center;
  }
}