@charset "UTF-8";

/* ============================================================
   Hanaimo / 色で選ぶ 階層 専用CSS  v2  (/common/css/hanaimo_color_v2.css)
   prefix: hni-clr-
   対象: /c/color  および /c/color/{slug}

   v2 変更点: タイポグラフィを全面再定義。
   - 最小フォントサイズを 13px に引き上げ（12px 全廃）
   - 本文 16px / PC 17px
   - 行間 1.85〜2.05 を維持
   - タイポグラフィ変数は .hni-clr スコープに閉じる（:root は再定義しない）

   注意: :root / body / a / img のリセットは既存グローバルCSSに定義済みのため
        本ファイルでは一切再定義しない。
   ============================================================ */

/* ---------- タイポグラフィ変数（スコープ限定） ---------- */
.hni-clr,
.hni-clr-others {
  --clrfs-cap:  13px;
  --clrfs-sm:   14px;
  --clrfs-base: 16px;
  --clrfs-md:   17px;
  --clrfs-lg:   20px;
  --clrfs-xl:   22px;
  --clrfs-2xl:  26px;

  --clrlh-tight: 1.6;
  --clrlh-body:  1.9;
  --clrlh-loose: 2.05;
}

/* ---------- 共通ラッパ ---------- */
.hni-clr {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
  color: #222;
  font-size: var(--clrfs-base);
  line-height: var(--clrlh-body);
}

.hni-clr__section {
  margin: 56px 0;
}

.hni-clr__heading {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-xl);
  font-weight: 700;
  line-height: var(--clrlh-tight);
  color: #015e53;
  margin: 0 0 10px;
  letter-spacing: .02em;
}

.hni-clr__subheading {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-lg);
  font-weight: 700;
  line-height: var(--clrlh-tight);
  color: #222;
  margin: 0 0 8px;
}

.hni-clr__lead {
  font-size: var(--clrfs-base);
  line-height: var(--clrlh-body);
  color: #333;
  margin: 0 0 28px;
}

.hni-clr__note {
  font-size: var(--clrfs-sm);
  line-height: 1.85;
  color: #555;
}

/* ---------- 一覧: イントロ ---------- */
.hni-clr-intro {
  background: #faf7f2;
  border-radius: 4px;
  padding: 28px 20px;
  margin: 0 0 44px;
}

.hni-clr-intro__title {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-2xl);
  font-weight: 700;
  line-height: 1.55;
  color: #015e53;
  margin: 0 0 16px;
}

.hni-clr-intro__text {
  font-size: var(--clrfs-base);
  line-height: var(--clrlh-loose);
  color: #333;
  margin: 0;
}

.hni-clr-intro__sign {
  display: block;
  margin-top: 16px;
  font-size: var(--clrfs-sm);
  color: #555;
  text-align: right;
}

/* ---------- 一覧: シーンフィルタ（CSSのみ / JS不要） ---------- */
.hni-clr-filter {
  margin: 0 0 32px;
}

.hni-clr-filter__label {
  display: block;
  font-size: var(--clrfs-sm);
  font-weight: 700;
  color: #555;
  letter-spacing: .06em;
  margin: 0 0 12px;
}

.hni-clr-filter__radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hni-clr-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hni-clr-filter__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #c6d8d3;
  border-radius: 999px;
  background: #fff;
  color: #015e53;
  font-size: var(--clrfs-base);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

/* 選択状態 */
#hni-clr-f-all:checked    ~ .hni-clr-filter__list label[for="hni-clr-f-all"]    .hni-clr-filter__chip,
#hni-clr-f-oiwai:checked  ~ .hni-clr-filter__list label[for="hni-clr-f-oiwai"]  .hni-clr-filter__chip,
#hni-clr-f-bz:checked     ~ .hni-clr-filter__list label[for="hni-clr-f-bz"]     .hni-clr-filter__chip,
#hni-clr-f-osonae:checked ~ .hni-clr-filter__list label[for="hni-clr-f-osonae"] .hni-clr-filter__chip,
#hni-clr-f-omimai:checked ~ .hni-clr-filter__list label[for="hni-clr-f-omimai"] .hni-clr-filter__chip,
#hni-clr-f-kinen:checked  ~ .hni-clr-filter__list label[for="hni-clr-f-kinen"]  .hni-clr-filter__chip {
  background: #01796a;
  border-color: #01796a;
  color: #fff;
}

/* フィルタ動作 */
#hni-clr-f-oiwai:checked  ~ .hni-clr-grid > .hni-clr-card:not([data-scene~="oiwai"]),
#hni-clr-f-bz:checked     ~ .hni-clr-grid > .hni-clr-card:not([data-scene~="bz"]),
#hni-clr-f-osonae:checked ~ .hni-clr-grid > .hni-clr-card:not([data-scene~="osonae"]),
#hni-clr-f-omimai:checked ~ .hni-clr-grid > .hni-clr-card:not([data-scene~="omimai"]),
#hni-clr-f-kinen:checked  ~ .hni-clr-grid > .hni-clr-card:not([data-scene~="kinen"]) {
  display: none;
}

/* ---------- 一覧: 15色グリッド ---------- */
.hni-clr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hni-clr-card {
  margin: 0;
}

.hni-clr-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.hni-clr-card__figure {
  position: relative;
  margin: 0 0 12px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f8f6;
}

.hni-clr-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 新色バッジ */
.hni-clr-card__new {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 2px;
  background: #b8893a;
  color: #fff;
  font-size: var(--clrfs-cap);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
}

.hni-clr-card__en {
  display: block;
  font-size: var(--clrfs-cap);
  font-weight: 700;
  letter-spacing: .12em;
  color: #b8893a;
  text-transform: uppercase;
  margin: 0 0 3px;
}

.hni-clr-card__name {
  display: block;
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-md);
  font-weight: 700;
  line-height: 1.65;
  color: #222;
  margin: 0 0 6px;
}

.hni-clr-card__desc {
  display: block;
  font-size: var(--clrfs-sm);
  line-height: 1.8;
  color: #555;
}

/* ---------- 個別: ヒーロー ---------- */
.hni-clr-hero {
  margin: 0 0 44px;
}

.hni-clr-hero__figure {
  margin: 0 0 22px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f8f6;
}

.hni-clr-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hni-clr-hero__en {
  font-size: var(--clrfs-cap);
  font-weight: 700;
  letter-spacing: .14em;
  color: #b8893a;
  margin: 0 0 8px;
}

.hni-clr-hero__title {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-2xl);
  font-weight: 700;
  line-height: 1.5;
  color: #222;
  margin: 0 0 12px;
}

.hni-clr-hero__tagline {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-lg);
  line-height: 1.75;
  color: #015e53;
  margin: 0 0 20px;
}

.hni-clr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hni-clr-tags__item {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: #f4f8f6;
  color: #015e53;
  font-size: var(--clrfs-sm);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- 個別: この色が伝えること（ページ内で最も重要な本文） ---------- */
.hni-clr-about__cols {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hni-clr-about__figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f8f6;
}

.hni-clr-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hni-clr-about__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hni-clr-about__body {
  font-size: var(--clrfs-md);
  line-height: var(--clrlh-loose);
  color: #222;
  margin: 0;
}

/* ---------- 個別: おすすめシーン ---------- */
.hni-clr-scene {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #c6d8d3;
}

.hni-clr-scene__item {
  border-bottom: 1px solid #c6d8d3;
  padding: 20px 0;
}

.hni-clr-scene__title {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-md);
  font-weight: 700;
  line-height: 1.6;
  color: #015e53;
  margin: 0 0 6px;
}

.hni-clr-scene__text {
  font-size: var(--clrfs-sm);
  line-height: 1.9;
  color: #444;
  margin: 0;
}

/* ---------- 個別: おすすめアイテム3点 ---------- */
.hni-clr-pick {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hni-clr-pick__item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 36px;
  margin: 0 0 36px;
  border-bottom: 1px solid #c6d8d3;
}

.hni-clr-pick__item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.hni-clr-pick__figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 400px;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #f4f8f6;
  align-self: center;
}

.hni-clr-pick__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hni-clr-pick__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hni-clr-pick__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 2px;
  background: #f4f8f6;
  color: #01796a;
  font-size: var(--clrfs-cap);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  margin: 0 0 12px;
}

.hni-clr-pick__name {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-lg);
  font-weight: 700;
  line-height: 1.6;
  color: #222;
  margin: 0 0 10px;
}

.hni-clr-pick__text {
  font-size: var(--clrfs-sm);
  line-height: 1.95;
  color: #444;
  margin: 0 0 14px;
}

.hni-clr-pick__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
}

.hni-clr-pick__price {
  font-size: var(--clrfs-lg);
  font-weight: 700;
  line-height: 1.4;
  color: #222;
}

.hni-clr-pick__price small {
  font-size: var(--clrfs-cap);
  font-weight: 400;
  color: #555;
  margin-left: 5px;
}

.hni-clr-pick__review {
  font-size: var(--clrfs-sm);
  color: #b8893a;
  font-weight: 700;
}

.hni-clr-pick__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  max-width: 280px;
  padding: 0 20px;
  border: 1px solid #01796a;
  border-radius: 2px;
  background: #01796a;
  color: #fff !important;
  font-size: var(--clrfs-base);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background .15s ease;
}

/* ---------- 個別: 他の色を見る ---------- */
.hni-clr-others {
  background: #faf7f2;
  padding: 44px 0;
  margin: 56px 0 0;
  color: #222;
  font-size: var(--clrfs-base);
  line-height: var(--clrlh-body);
}

.hni-clr-others__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

.hni-clr-others .hni-clr-grid {
  gap: 20px 12px;
  margin-top: 24px;
}

.hni-clr-others .hni-clr-card__desc {
  display: none;
}

/* ---------- LINE CTA ---------- */
.hni-clr-cta {
  border: 1px solid #c6d8d3;
  border-radius: 4px;
  padding: 32px 20px;
  text-align: center;
  background: #fff;
}

.hni-clr-cta__title {
  font-family: var(--hni-font) !important;
  font-size: var(--clrfs-lg);
  font-weight: 700;
  line-height: 1.6;
  color: #015e53;
  margin: 0 0 10px;
}

.hni-clr-cta__text {
  font-size: var(--clrfs-base);
  line-height: 1.95;
  color: #444;
  margin: 0 0 22px;
}

.hni-clr-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  max-width: 320px;
  padding: 0 20px;
  border-radius: 2px;
  background: #06c755;
  color: #fff !important;
  font-size: var(--clrfs-md);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.hni-clr-cta__tel {
  display: block;
  margin-top: 16px;
  font-size: var(--clrfs-sm);
  color: #555;
}

/* ============================================================
   TABLET / PC
   ============================================================ */
@media screen and (min-width: 768px) {

  .hni-clr,
  .hni-clr-others {
    --clrfs-cap:  13px;
    --clrfs-sm:   15px;
    --clrfs-base: 17px;
    --clrfs-md:   18px;
    --clrfs-lg:   22px;
    --clrfs-xl:   26px;
    --clrfs-2xl:  34px;
  }

  .hni-clr {
    padding: 0 24px;
  }

  .hni-clr__section {
    margin: 80px 0;
  }

  .hni-clr-intro {
    padding: 44px 48px;
  }

  .hni-clr-intro__title {
    font-size: 28px;
  }

  .hni-clr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 24px;
  }

  /* ヒーロー: 16:9 の全幅バナー + 下にテキスト */
  .hni-clr-hero__figure {
    margin: 0 0 28px;
  }

  .hni-clr-hero__body {
    max-width: 720px;
  }

  /* この色が伝えること: 2カラム（左画像・右テキスト） */
  .hni-clr-about__cols {
    flex-direction: row;
    align-items: stretch;
    gap: 48px;
  }

  .hni-clr-about__figure {
    flex: 0 0 42%;
    max-width: 440px;
    align-self: flex-start;
  }

  .hni-clr-about__text {
    flex: 1;
    min-width: 0;
  }

  /* おすすめシーン 3カラム */
  .hni-clr-scene {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    border-top: none;
  }

  .hni-clr-scene__item {
    border-top: 2px solid #01796a;
    border-bottom: none;
    padding: 18px 0 0;
  }

  /* おすすめアイテム 2カラム（左画像・右テキスト） */
  .hni-clr-pick__item {
    flex-direction: row;
    align-items: stretch;
    gap: 44px;
    padding: 0 0 52px;
    margin: 0 0 52px;
  }

  .hni-clr-pick__figure {
    flex: 0 0 300px;
    max-width: 300px;
    align-self: flex-start;
  }

  .hni-clr-pick__body {
    flex: 1;
    min-width: 0;
  }

  .hni-clr-pick__btn {
    width: 280px;
  }

  .hni-clr-others .hni-clr-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hni-clr-others .hni-clr-card__name {
    font-size: var(--clrfs-sm);
    line-height: 1.7;
  }

  .hni-clr-cta {
    padding: 44px;
  }
}

/* ============================================================
   WIDE PC（1200px〜）: 本文をもう一段上げる
   ============================================================ */
@media screen and (min-width: 1200px) {
  .hni-clr-about__body {
    font-size: 19px;
  }
}

/* ---------- ホバー（PCのみ・タッチ非依存） ---------- */
@media (hover: hover) and (pointer: fine) {
  .hni-clr-card__link:hover .hni-clr-card__img {
    opacity: .82;
  }
  .hni-clr-filter__chip:hover {
    background: #f4f8f6;
  }
  .hni-clr-pick__btn:hover {
    background: #015e53;
  }
}