@charset "UTF-8";
/* CSS Document */

/*
Theme Name: Heartful Home
Theme URI:
Author:
Author URI:
Description: ハートフルホーム用オリジナルテーマ
Version: 1.0
*/

/* ベース */
.hirari {
  line-height: 1.8;
}

.hirari-wrap {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* ヒーロー */
.hirari-hero {
  padding: 72px 0 56px;
}

.hirari-hero__title {
  margin: 0 0 18px;
  text-align: center;
  letter-spacing: 0.04em;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.45;
}

.hirari-hero__lead {
  margin: 0 auto 100px;
  max-width: 860px;
  text-align: center;
  font-size: 15px;
  color: #444;
}

.hirari-hero__note {
  margin: 28px auto 0;
  max-width: 860px;
  text-align: center;
  font-size: 14px;
  color: #555;
}

/* ポイント（横3つ） */
.hirari-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 26px auto 50px;
  width: min(860px, 100%);
  align-items: end; 
}

.hirari-point {
  border: none;
  background: #fff;
  padding: 14px;
  border-radius: 10px;
}

.hirari-point__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* 見出し */
.hirari-section-title {
  margin: 0 0 30px;
  text-align: center;
  font-size: 26px;
  letter-spacing: 0.06em;
}

/* プラン */
.hirari-plans {
  padding: 64px 0 80px;
  background: #fafafa;
}

.hirari-plan {
  border: none;
  padding: 26px;
  margin: 0 0 60px;
}

/* 全体：横並び */
.hirari-plan-head{
  display:flex;
  align-items:center;
  gap:28px;
  margin-bottom:28px;
}

/* 左：プラン＋ナンバーを縦中央合わせ */
.hirari-plan-head__left{
  display:flex;
  align-items:center;          /* ← 縦中央 */
  gap:14px;
}

.hirari-plan-head__label{
  font-size:20px;
  color:#ff4b00;
  line-height:1;
  transform: translateY(6px);  /* ← 数字の見た目中央に寄せる微調整 */
}

/* ナンバー：Josefin Sans italic */
.hirari-plan-head__number{
  font-family:"Josefin Sans", sans-serif;
  font-weight:400;
  font-size:100px;
  line-height:0.9;
  color:#2a1b18;
  letter-spacing:0.02em;
}

/* 「/」は細い45度ラインにする（文字は使わない） */
.hirari-plan-head__slash{
  width:60px;                  /* 長さ */
  height:110px;                /* 当たり判定 */
  position:relative;
}

.hirari-plan-head__slash::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;                   /* 細さ */
  height:120px;                /* ライン長 */
  background:#2a1b18;
  transform: translate(-50%, -50%) rotate(45deg); /* ← 45度 */
  border-radius:2px;
}

/* 右：上下の空間を詰めて、タイトルを大きく太く */
.hirari-plan-head__right{
  display:flex;
  flex-direction:column;
  gap:10px;                    /* ← 詰める */
}

.hirari-plan-head__title{
  font-size:24px;              /* ← 大きく */
  font-weight:800;             /* ← 太く */
  line-height:1.25;
  margin:0;
  color:#333;
}

.hirari-plan-head__desc{
  font-size:16px;
  line-height:1.5;             /* ← 詰める */
  margin:0;
  color:#333;
}
/* 2ブロック（左：外観＋スペック / 右：間取り） */
.hirari-plan__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.hirari-plan__img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  background: #f7f7f7;
}

/* スペック */
.hirari-spec {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: none;
}

/* スペック（1行テキスト） */
.hirari-specline{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.4;
  letter-spacing:0.08em;
  color:#4a3a36;
}

.hirari-specline + .hirari-specline{
  margin-top:8px;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .hirari-hero {
    padding: 56px 0 44px;
  }

  .hirari-points {
    grid-template-columns: 1fr;
    width: min(520px, 100%);
  }

  .hirari-plan__grid {
    grid-template-columns: 1fr;
  }

  .hirari-plan {
    padding: 20px;
  }
}