/* ============================================================
   花以想 — /c/color/* カラーページ専用CSS
   ファイル名: hanaimo_color.css
   FTP設置先: /common/css/hanaimo_color.css
   対象URL  : /c/color/* (15色下層ページすべて)
   依存      : hanaimo_global.css の :root 変数
   2026-03-25
============================================================ */

/* ============================================================
   :root 変数フォールバック
   ※ グローバルCSSが先に読まれている前提。万一未定義の場合の保険
============================================================ */
:root {
  --hni-primary:    #01796a;
  --hni-dark:       #015e53;
  --hni-border:     #c6d8d3;
  --hni-bg:         #f4f8f6;
  --hni-beige:      #faf7f2;
  --hni-white:      #ffffff;
  --hni-text:       #222222;
  --hni-text-sub:   #555555;
  --hni-line:       #06C755;
  --hni-font:       'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/* ============================================================
   カラーページ共通: 上部カラーナビ（15色サムネイル）
============================================================ */

.hni-cpg-colornav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  padding: 16px 0 20px;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
}

.hni-cpg-colornav li {
  flex: 0 0 auto;
}

.hni-cpg-colornav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-size: 11px;
  color: var(--hni-text-sub);
  line-height: 1.3;
  text-align: center;
  width: 60px;
  transition: opacity .18s;
}

.hni-cpg-colornav a:hover,
.hni-cpg-colornav a:focus {
  opacity: .75;
}

.hni-cpg-colornav img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--hni-border);
  display: block;
}

@media (max-width: 640px) {
  .hni-cpg-colornav {
    gap: 6px 4px;
    padding: 12px 0 16px;
  }
  .hni-cpg-colornav a {
    width: 52px;
    font-size: 10px;
  }
  .hni-cpg-colornav img {
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   PARTS 1: ヒーローバナー（hni-cta-banner--color）
   商品一覧の上に設置
============================================================ */

.hni-cta-banner--color {
  --cta-img:     url('https://hanaimo.itembox.design/item/common/images_update/color/image_color.png');
  --cta-overlay: linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.08) 100%);
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #111;
}

.hni-cta-banner--color .hni-cta-banner__bg {
  position: absolute;
  inset: 0;
  background-image: var(--cta-img);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.hni-cta-banner--color .hni-cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: var(--cta-overlay);
  z-index: 1;
}

.hni-cta-banner--color .hni-cta-banner__text {
  position: relative;
  z-index: 2;
  padding: 40px 40px 36px;
  max-width: 640px;
}

.hni-cta-banner--color .hni-cta-banner__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255,255,255,.65);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.hni-cta-banner--color .hni-cta-banner__catch {
  font-family: var(--hni-font) !important;
  font-size: clamp(18px, 2.8vw, 26px);
  font-weight: 600;
  color: #fff;
  line-height: 1.65;
  margin: 0 0 14px;
  border: none;
  padding: 0;
}

.hni-cta-banner--color .hni-cta-banner__catch em {
  font-style: normal;
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.4);
  text-underline-offset: 3px;
}

.hni-cta-banner--color .hni-cta-banner__lead {
  font-size: 14px;
  color: rgba(255,255,255,.8);
  line-height: 1.8;
  margin: 0 0 20px;
}

/* バッジ（シーンタグ）*/
.hni-cpg-scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hni-cpg-scene {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px;
  padding: 4px 10px;
  line-height: 1.4;
  letter-spacing: .03em;
}

/* 色別変数（各色PARTS HTMLの modifier クラスで上書き）*/
.hni-cta-banner--scarlet  { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_01.png'); --cta-overlay: linear-gradient(to right, rgba(120,20,20,.72) 0%, rgba(120,20,20,.38) 55%, rgba(120,20,20,.08) 100%); }
.hni-cta-banner--rouge    { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_02.png'); --cta-overlay: linear-gradient(to right, rgba(120,40,70,.72) 0%, rgba(120,40,70,.38) 55%, rgba(120,40,70,.08) 100%); }
.hni-cta-banner--sakura   { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_03.png'); --cta-overlay: linear-gradient(to right, rgba(160,80,100,.65) 0%, rgba(160,80,100,.30) 55%, rgba(160,80,100,.06) 100%); }
.hni-cta-banner--viola    { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_04.png'); --cta-overlay: linear-gradient(to right, rgba(60,30,90,.72) 0%, rgba(60,30,90,.38) 55%, rgba(60,30,90,.08) 100%); }
.hni-cta-banner--bran     { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_05.png'); --cta-overlay: linear-gradient(to right, rgba(60,80,80,.65) 0%, rgba(60,80,80,.30) 55%, rgba(60,80,80,.06) 100%); }
.hni-cta-banner--kinari   { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_06.png'); --cta-overlay: linear-gradient(to right, rgba(100,80,30,.65) 0%, rgba(100,80,30,.30) 55%, rgba(100,80,30,.06) 100%); }
.hni-cta-banner--kotobuki { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_07.png'); --cta-overlay: linear-gradient(to right, rgba(120,20,20,.65) 0%, rgba(120,20,20,.28) 55%, rgba(120,20,20,.06) 100%); }
.hni-cta-banner--crimson  { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_08.png'); --cta-overlay: linear-gradient(to right, rgba(140,50,10,.72) 0%, rgba(140,50,10,.38) 55%, rgba(140,50,10,.08) 100%); }
.hni-cta-banner--ohisama  { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_09.png'); --cta-overlay: linear-gradient(to right, rgba(140,90,10,.65) 0%, rgba(140,90,10,.30) 55%, rgba(140,90,10,.06) 100%); }
.hni-cta-banner--candy    { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_10.png'); --cta-overlay: linear-gradient(to right, rgba(160,60,60,.65) 0%, rgba(160,60,60,.28) 55%, rgba(160,60,60,.06) 100%); }
.hni-cta-banner--fujiiro  { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_11.png'); --cta-overlay: linear-gradient(to right, rgba(60,40,90,.65) 0%, rgba(60,40,90,.30) 55%, rgba(60,40,90,.06) 100%); }
.hni-cta-banner--midori   { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_12.png'); --cta-overlay: linear-gradient(to right, rgba(20,70,50,.65) 0%, rgba(20,70,50,.30) 55%, rgba(20,70,50,.06) 100%); }
.hni-cta-banner--indigo,
.hni-cta-banner--sapphire { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_13.png'); --cta-overlay: linear-gradient(to right, rgba(20,50,100,.72) 0%, rgba(20,50,100,.38) 55%, rgba(20,50,100,.08) 100%); }
.hni-cta-banner--focus    { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_14.png'); --cta-overlay: linear-gradient(to right, rgba(20,50,100,.65) 0%, rgba(20,50,100,.30) 55%, rgba(20,50,100,.06) 100%); }
.hni-cta-banner--familia  { --cta-img: url('https://hanaimo.itembox.design/item/common/images_update/component/choose_color_thumb_15.png'); --cta-overlay: linear-gradient(to right, rgba(60,100,140,.65) 0%, rgba(60,100,140,.30) 55%, rgba(60,100,140,.06) 100%); }

@media (max-width: 640px) {
  .hni-cta-banner--color .hni-cta-banner__text {
    padding: 28px 20px 24px;
  }
  .hni-cta-banner--color .hni-cta-banner__catch {
    font-size: 17px;
  }
}

/* ============================================================
   PARTS 2〜5 共通ラッパー・セクション
============================================================ */

.hni-clr-wrap {
  font-family: var(--hni-font);
  color: var(--hni-text);
}

/* h2 CCデフォルト上書き */
.hni-clr-wrap h2,
.hni-clr-sec h2 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 20px !important;
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--hni-dark);
  font-family: var(--hni-font) !important;
}

.hni-clr-wrap h2::after,
.hni-clr-sec h2::after {
  display: none !important;
}

.hni-clr-sec {
  padding: 48px 20px;
}

.hni-clr-sec--beige  { background: var(--hni-beige); }
.hni-clr-sec--white  { background: var(--hni-white); }
.hni-clr-sec--border { border-top: 1px solid var(--hni-border); }

.hni-clr-inner {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
   アクセントバー見出し
============================================================ */

.hni-clr-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hni-font) !important;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 700;
  color: var(--hni-dark);
  margin: 0 0 20px;
  line-height: 1.5;
}

.hni-clr-heading::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.2em;
  background: var(--hni-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   キーワードタグ
============================================================ */

.hni-clr-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.hni-clr-keyword {
  font-size: 12px;
  color: var(--hni-primary);
  border: 1px solid var(--hni-border);
  border-radius: 2px;
  padding: 3px 10px;
  background: var(--hni-bg);
  font-weight: 600;
  letter-spacing: .05em;
}

/* ============================================================
   シーンナビ（「誰に贈りますか？」3カード）
============================================================ */

.hni-clr-scene-nav {
  margin-bottom: 32px;
}

.hni-clr-scene-nav__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hni-text-sub);
  letter-spacing: .1em;
  margin-bottom: 12px;
}

.hni-clr-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hni-clr-scene-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 16px 12px;
  text-align: center;
  transition: border-color .18s, background .18s;
  min-height: 88px;
  justify-content: center;
}

.hni-clr-scene-card:hover,
.hni-clr-scene-card:focus {
  border-color: var(--hni-primary);
  background: var(--hni-bg);
}

.hni-clr-scene-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.hni-clr-scene-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hni-dark);
  line-height: 1.4;
}

.hni-clr-scene-card__sub {
  font-size: 11px;
  color: var(--hni-text-sub);
  line-height: 1.4;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .hni-clr-scene-grid {
    gap: 8px;
  }
  .hni-clr-scene-card {
    padding: 12px 8px;
    min-height: 76px;
  }
  .hni-clr-scene-card img {
    width: 32px;
    height: 32px;
  }
  .hni-clr-scene-card__name {
    font-size: 12px;
  }
}

/* ============================================================
   用途別詳細カード（3枚グリッド）
============================================================ */

.hni-clr-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.hni-clr-usecase-card {
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  overflow: hidden;
}

.hni-clr-usecase-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.hni-clr-usecase-card__body {
  padding: 14px 14px 16px;
}

.hni-clr-usecase-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hni-dark);
  margin-bottom: 6px;
  line-height: 1.45;
}

.hni-clr-usecase-card__text {
  font-size: 13px;
  color: var(--hni-text-sub);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 640px) {
  .hni-clr-usecase-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hni-clr-usecase-card__img {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================
   贈り手・受け手テキストブロック
============================================================ */

.hni-clr-giver-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

.hni-clr-giver-block {
  background: var(--hni-beige);
  border-radius: 4px;
  padding: 18px 16px;
}

.hni-clr-giver-block__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--hni-primary);
  margin-bottom: 8px;
  display: block;
}

.hni-clr-giver-block__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--hni-text);
  margin: 0;
}

@media (max-width: 640px) {
  .hni-clr-giver-wrap {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ============================================================
   店主コメント（owner）
============================================================ */

.hni-clr-owner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 22px 20px;
  margin-bottom: 8px;
}

.hni-clr-owner__portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--hni-border);
}

.hni-clr-owner__label {
  font-size: 11px;
  color: var(--hni-primary);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 6px;
  display: block;
}

.hni-clr-owner__quote {
  font-family: var(--hni-font) !important;
  font-size: 15px;
  font-weight: 400;
  color: var(--hni-text);
  line-height: 1.85;
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--hni-border);
}

.hni-clr-owner__body {
  font-size: 13px;
  line-height: 1.85;
  color: var(--hni-text-sub);
  margin: 0 0 8px;
}

.hni-clr-owner__name {
  font-size: 12px;
  color: var(--hni-text-sub);
  text-align: right;
  display: block;
}

@media (max-width: 640px) {
  .hni-clr-owner {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 18px 16px;
  }
  .hni-clr-owner__portrait {
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   マナーガイド（◎△？行）
============================================================ */

.hni-clr-manner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.hni-clr-manner-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 14px 16px;
}

.hni-clr-manner-row--ok    { border-left: 3px solid #2a8a5a; }
.hni-clr-manner-row--check { border-left: 3px solid #c8882a; }
.hni-clr-manner-row--ng    { border-left: 3px solid #999; }

.hni-clr-manner-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  text-align: center;
}

.hni-clr-manner-row--ok    .hni-clr-manner-icon { color: #2a8a5a; }
.hni-clr-manner-row--check .hni-clr-manner-icon { color: #c8882a; }
.hni-clr-manner-row--ng    .hni-clr-manner-icon { color: #888; }

.hni-clr-manner-body__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--hni-dark);
  margin-bottom: 4px;
  line-height: 1.4;
}

.hni-clr-manner-body__text {
  font-size: 13px;
  color: var(--hni-text-sub);
  line-height: 1.75;
  margin: 0;
}

.hni-clr-manner-detail {
  background: var(--hni-beige);
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--hni-text);
  margin-top: 4px;
}

/* ============================================================
   お客様の声（voice）
============================================================ */

.hni-clr-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.hni-clr-voice-card {
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 18px 18px 16px;
}

.hni-clr-voice-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.hni-clr-voice-card__stars {
  color: #e8a830;
  font-size: 13px;
  letter-spacing: .05em;
}

.hni-clr-voice-card__scene {
  font-size: 11px;
  color: var(--hni-primary);
  font-weight: 700;
  background: var(--hni-bg);
  border-radius: 2px;
  padding: 2px 8px;
}

.hni-clr-voice-card__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--hni-text);
  margin: 0 0 8px;
}

.hni-clr-voice-card__from {
  font-size: 12px;
  color: var(--hni-text-sub);
  text-align: right;
}

@media (max-width: 640px) {
  .hni-clr-voice-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LINE CTA（インライン版）
============================================================ */

.hni-clr-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--hni-bg);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 24px;
}

.hni-clr-cta__text {
  flex: 1;
  min-width: 180px;
}

.hni-clr-cta__lead {
  font-size: 13px;
  color: var(--hni-text-sub);
  line-height: 1.7;
  margin-bottom: 4px;
}

.hni-clr-cta__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hni-dark);
  line-height: 1.65;
}

.hni-clr-cta__title em {
  font-style: normal;
  color: var(--hni-primary);
}

.hni-clr-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hni-line);
  color: #fff;
  font-family: var(--hni-font);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 24px;
  min-height: 48px;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
  letter-spacing: .04em;
  transition: opacity .18s;
}

.hni-clr-cta__btn:hover,
.hni-clr-cta__btn:focus {
  opacity: .85;
  color: #fff;
}

.hni-clr-cta__note {
  font-size: 12px;
  color: var(--hni-text-sub);
  margin-top: 6px;
  text-align: center;
  width: 100%;
}

@media (max-width: 640px) {
  .hni-clr-cta {
    flex-direction: column;
    padding: 20px 18px;
    gap: 16px;
  }
  .hni-clr-cta__btn {
    width: 100%;
  }
}

/* ============================================================
   色ナビ（リスト型・カード型）
============================================================ */

/* リスト型（縦並び）*/
.hni-clr-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hni-clr-nav__item a {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 12px 16px;
  text-decoration: none !important;
  color: var(--hni-text);
  min-height: 64px;
  transition: border-color .2s, background .2s;
}

.hni-clr-nav__item a:hover,
.hni-clr-nav__item a:focus {
  border-color: var(--hni-primary);
  background: var(--hni-bg);
}

.hni-clr-nav__thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--hni-border);
  display: block;
}

.hni-clr-nav__text {
  flex: 1;
}

.hni-clr-nav__reason {
  font-size: 12px;
  color: var(--hni-text-sub);
  line-height: 1.5;
  margin-bottom: 2px;
}

.hni-clr-nav__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hni-dark);
  line-height: 1.4;
}

.hni-clr-nav__arrow {
  font-size: 18px;
  color: var(--hni-border);
  flex-shrink: 0;
}

/* カード型（3列グリッド）*/
.hni-clr-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.hni-clr-alt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--hni-white);
  border: 1.5px solid var(--hni-border);
  border-radius: 4px;
  padding: 18px 14px;
  text-decoration: none !important;
  text-align: center;
  transition: border-color .18s, background .18s;
}

.hni-clr-alt-card:hover,
.hni-clr-alt-card:focus {
  border-color: var(--hni-primary);
  background: var(--hni-bg);
}

.hni-clr-alt-card img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--hni-border);
  display: block;
}

.hni-clr-alt-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--hni-dark);
  line-height: 1.4;
}

.hni-clr-alt-card__reason {
  font-size: 12px;
  color: var(--hni-text-sub);
  line-height: 1.5;
  margin-top: -4px;
}

@media (max-width: 640px) {
  .hni-clr-alt-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .hni-clr-alt-card {
    padding: 14px 10px;
    gap: 8px;
  }
  .hni-clr-alt-card img {
    width: 52px;
    height: 52px;
  }
  .hni-clr-alt-card__name {
    font-size: 12px;
  }
}

/* ============================================================
   SP 共通レスポンシブ
============================================================ */

@media (max-width: 640px) {
  .hni-clr-sec {
    padding: 32px 16px;
  }
}