/*
============================================================
  花以想 — お供えカテゴリ共通CSS
  ファイル名: hanaimo_osonae.css
  対象ページ: /c/osonae/ 配下（os-1st / os-3rd / os-7th / os-13th 等）
  作成: 2026-03-21
  prefix: hni-hoyo-（法要共通）/ hni-nen-（voice共通）
  ※ グローバルCSS（hni- 共通）は上書きしない
  ※ グローバルの img { aspect-ratio:1/1; border-radius:3px }
     を打ち消す箇所には !important を使用（必須）
============================================================
*/


/* ============================================================
   0. フォント自動調整の無効化
   iOSのSafariがデバイス幅に応じてフォントサイズを
   自動拡大・縮小するのを防ぐ。このルールがないと
   スマホ表示時に指定サイズと異なるサイズで描画される。
   ============================================================ */

.hni-hoyo-hero,
.hni-hoyo-hero__eyebrow,
.hni-hoyo-hero__heading,
.hni-hoyo-hero__heading-sub,
.hni-hoyo-hero__text,
.hni-hoyo-reason-heading,
.hni-nen-reason-grid,
.hni-nen-reason-grid p,
.hni-hoyo-rec,
.hni-hoyo-rec__label,
.hni-hoyo-rec__name,
.hni-hoyo-rec__desc,
.hni-hoyo-rec__price-num,
.hni-hoyo-rec__price-tax,
.hni-hoyo-rec__btn,
.hni-nen-voice-inline-tag {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ============================================================
   1. お供えカテゴリ共通 — 声（voice）セクション制御
   ============================================================ */

/* 声セクション：h2グローバルのborder-bottomを打ち消し */
.hni-voice__title {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
}

/* 声カード内インラインタグ（法要種別バッジ） */
.hni-nen-voice-inline-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #015e53;
  background: #edf4f2;
  border: 1px solid #c6d8d3;
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .03em;
}


/* ============================================================
   2. お供えカテゴリ共通 — レスポンシブ（SP: max-width 640px）
   ============================================================ */

@media (max-width: 640px) {

  /* 声カード：SP非表示（2・3枚目を隠す） */
  .hni-nen-voice-sp-hide {
    display: none;
  }

  /* 声ヘッダー補足テキスト：SP非表示 */
  .hni-nen-voice-header-sub {
    display: none;
  }

  /* 声ラッパー：SP横padding除去（全幅確保） */
  .hni-nen-voice-wrap.hni-voice {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 声グリッド：SP 1カラム全幅 */
  .hni-nen-voice-sp-clip.hni-voice__grid {
    grid-template-columns: 1fr !important;
  }

  /* 声カード：SP全幅 */
  .hni-nen-voice-sp-clip .hni-voice__card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 声カードテキスト：SP 2行クリップ */
  .hni-nen-voice-sp-clip .hni-voice__card-text {
    -webkit-line-clamp: 2;
  }

  /* 声カードボディ：SPパディング縮小 */
  .hni-nen-voice-sp-clip .hni-voice__card-body {
    padding: 10px 12px 12px;
  }

  /* 理由グリッド：SP 1カラム */
  .hni-nen-reason-grid {
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
  }

}


/* ============================================================
   3. 三回忌（os-3rd）— ヒーロービジュアル
   ============================================================ */

/* ヒーロー外枠 */
.hni-hoyo-hero {
  background: transparent;
  padding: 28px 20px 24px;
  margin-bottom: 0;
}

/* 上段：eyebrow + h2（全幅） */
.hni-hoyo-hero__header {
  margin-bottom: 20px;
}

/* PC用レイアウト：横並び（デフォルト表示） */
.hni-hoyo-hero__inner--pc {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* SP用レイアウト：1カラム（デフォルト非表示） */
.hni-hoyo-hero__inner--sp {
  display: none;
}

@media (max-width: 640px) {
  .hni-hoyo-hero__inner--pc { display: none; }
  .hni-hoyo-hero__inner--sp {
    display: block;
  }
  .hni-hoyo-hero__inner--sp .hni-hoyo-hero__img-wrap {
    margin: 0 -16px;
    width: calc(100% + 32px);
  }
  .hni-hoyo-hero__inner--sp .hni-hoyo-hero__img-wrap img {
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  .hni-hoyo-hero__inner--sp .hni-hoyo-hero__body {
    padding-top: 16px;
  }
}

/* 画像ラッパー */
.hni-hoyo-hero__img-wrap {
  flex: 0 0 50%;
}

/* 画像本体：グローバルCSS上書き（必須） */
.hni-hoyo-hero__img-wrap img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3 !important;
  border-radius: 3px !important;
  border: none !important;
  object-fit: cover;
  object-position: center;
}

/* テキストエリア（下段右） */
.hni-hoyo-hero__body {
  flex: 1;
  min-width: 0;
}

/* eyebrow（OSONAE FLOWER / 三回忌） */
.hni-hoyo-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: #01796a;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1;
}

/* メインh2 */
.hni-hoyo-hero__heading {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-family: var(--hni-font) !important;
}

/* H2サブライン（感情訴求・SEO補完） */
.hni-hoyo-hero__heading-sub {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #555;
  margin-top: 8px;
  line-height: 1.7;
  letter-spacing: .02em;
}

/* リード文（下段右） */
.hni-hoyo-hero__text {
  font-size: 15px;
  color: #444;
  line-height: 1.95;
  margin: 0;
}


/* ============================================================
   4. 三回忌（os-3rd）— 理由グリッドラベル
   ============================================================ */

.hni-hoyo-reason-heading {
  font-size: 17px;
  font-weight: 700;
  color: #015e53;
  margin: 0 0 12px;
  padding: 20px 20px 0;
  letter-spacing: .04em;
  font-family: var(--hni-font) !important;
}


/* ============================================================
   6. 三回忌（os-3rd）— はじめての方におすすめ商品
   ============================================================ */

/* セクション外枠 */
.hni-hoyo-rec {
  background: #faf7f2;
  padding: 0 20px 24px;
  margin-top: 24px;
}

/* セクションラベル */
.hni-hoyo-rec__label {
  font-size: 16px;
  font-weight: 700;
  color: #015e53;
  letter-spacing: .04em;
  margin: 0 0 14px;
  padding-top: 22px;
  font-family: var(--hni-font) !important;
}

/* 3カラムグリッド */
.hni-hoyo-rec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* カード */
.hni-hoyo-rec__card {
  background: #fff;
  border: 1px solid #c6d8d3;
  border-radius: 3px;
  overflow: hidden;
}

/* カード全体リンク */
.hni-hoyo-rec__card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* 画像ラッパー */
.hni-hoyo-rec__img-wrap {
  width: 100%;
  overflow: hidden;
}

/* 画像本体：グローバルCSS上書き（必須） */
.hni-hoyo-rec__img-wrap img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  border: none !important;
  object-fit: cover;
}

/* カード本文エリア */
.hni-hoyo-rec__body {
  padding: 12px 14px 14px;
}

/* 商品名 */
.hni-hoyo-rec__name {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  line-height: 1.5;
  margin: 0 0 6px;
}

/* 短い説明文 */
.hni-hoyo-rec__desc {
  font-size: 14px;
  color: #555;
  line-height: 1.85;
  margin: 0 0 10px;
}

/* 価格行 */
.hni-hoyo-rec__price {
  margin: 0 0 12px;
  line-height: 1;
}

.hni-hoyo-rec__price-num {
  font-size: 16px;
  font-weight: 700;
  color: #222;
  letter-spacing: .02em;
}

.hni-hoyo-rec__price-tax {
  font-size: 12px;
  color: #777;
  margin-left: 3px;
}

/* CTAボタン */
.hni-hoyo-rec__btn {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #01796a;
  background: #edf4f2;
  border: 1px solid #c6d8d3;
  border-radius: 3px;
  padding: 10px 0;
  letter-spacing: .04em;
  transition: background .15s;
}

.hni-hoyo-rec__card-link:hover .hni-hoyo-rec__btn {
  background: #ddeee9;
}


/* ============================================================
   7. 三回忌（os-3rd）— おすすめ商品 SP（max-width 640px）
   ============================================================ */

@media (max-width: 640px) {

  .hni-hoyo-rec {
    padding: 0 0 20px;
    margin-top: 20px;
  }

  .hni-hoyo-rec__label {
    padding: 18px 16px 0;
    margin-bottom: 10px;
  }

  /* SP: 1カラムタテ積み */
  .hni-hoyo-rec__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 16px;
  }

  /* SP: カード内画像を抑える（1カラムでは大きすぎるため） */
  .hni-hoyo-rec__img-wrap img {
    aspect-ratio: 4 / 3 !important;
  }

}

   ============================================================ */

@media (max-width: 640px) {

  /* ヒーロー外枠：SPパディング */
  .hni-hoyo-hero {
    padding: 20px 16px 16px;
  }

  /* 上段ヘッダー：SPマージン縮小 */
  .hni-hoyo-hero__header {
    margin-bottom: 16px;
  }

  /* SP: 画像縦長3/4 → メディアクエリが効かないため削除 */

  /* メインh2：SPフォントサイズ縮小 */
  .hni-hoyo-hero__heading {
    font-size: 18px;
  }

  /* H2サブライン：SP */
  .hni-hoyo-hero__heading-sub {
    font-size: 13px;
    margin-top: 5px;
  }

  /* 理由グリッドラベル：SPパディング縮小 */
  .hni-hoyo-reason-heading {
    font-size: 15px;
    padding: 16px 16px 0;
  }

}