@charset "UTF-8";
/* =============================================================
   icd-content.css — /icd/ のコンテンツページ（製品一覧・コラム）
   配色は既存の salon 系に合わせる：深緑 #1c2d24 ／ 金 #a98f5c ／ 罫線 #ece3d0
   ============================================================= */

.icd-content { max-width: 860px; margin: 0 auto; }

/* ── 見出し ───────────────────────────────── */
.ic-head { margin: 18px 0 26px; padding-bottom: 20px; border-bottom: 2px solid #ece3d0; }
.ic-head h1 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.816rem; line-height: 1.55; color: #1c2d24; margin: 6px 0 12px;
}
.ic-head__sum {
  display: inline-block; font-size: 1.44rem; line-height: 1.8; color: #3a463d;
  background: #f6f2e7; border: 1px solid #e4dcc6; border-radius: 8px; padding: 10px 16px; margin: 0;
}
.ic-head__sum strong { color: #1c2d24; font-weight: 700; }
.ic-head__date { font-size: 1.344rem; color: #6b7268; margin: 0; }

.ic-lead { font-size: 1.6rem; line-height: 2.05; color: #3a463d; margin: 0 0 34px; }
.ic-lead strong { color: #1c2d24; font-weight: 700; }

/* .ic-article の外に置いた見出しの受け皿。
   このサイトは html { font-size: 62.5% }（1rem = 10px）で、テーマの指定は
   p/td/th/li/dt/dd にしか掛かっていない。h2 や div は、指定がないと 10px で出る。
   実際 ingredient-map.html の h2 が2つとも10pxになっていた。 */
.icd-content h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.08rem; color: #1c2d24; line-height: 1.5; margin: 44px 0 14px;
}
.icd-content h3 { font-size: 1.664rem; color: #1c2d24; line-height: 1.6; }
.icd-content h4 { font-size: 1.5rem; color: #1c2d24; line-height: 1.6; }

/* ── 本文 ─────────────────────────────────── */
.ic-article h2, .ic-related h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.08rem; color: #1c2d24; margin: 44px 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid #ece3d0;
}
.ic-article h3 {
  font-size: 1.664rem; color: #1c2d24; margin: 28px 0 10px; padding-left: 12px;
  border-left: 3px solid #a98f5c; line-height: 1.6;
}
.ic-article p { font-size: 1.52rem; line-height: 2.05; color: #3a463d; margin: 0 0 18px; }
.ic-article strong { color: #1c2d24; font-weight: 700; }
/* reset.css の a{text-decoration:none!important} に勝たないと下線が出ない */
.ic-article a { color: #1c6b3f; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.ic-article a:hover { color: #a98f5c; }
.ic-article em { font-style: italic; }

.ic-ul { margin: 0 0 20px; padding-left: 1.3em; }
.ic-ul li { font-size: 1.52rem; line-height: 2; color: #3a463d; margin-bottom: 10px; }
.ic-ul strong { color: #1c2d24; }
/* 手順のように順番に意味がある並びは番号付きにする。見た目は .ic-ul とそろえる。 */
.ic-ol { margin: 0 0 20px; padding-left: 1.5em; }
.ic-ol li { font-size: 1.52rem; line-height: 2; color: #3a463d; margin-bottom: 10px; }
.ic-ol li::marker { color: #a98f5c; font-weight: 700; }
.ic-ol strong { color: #1c2d24; }

/* 引用（規約の原文など） */
.ic-quote {
  margin: 0 0 20px; padding: 16px 20px;
  background: #f7f8f6; border-left: 3px solid #1c2d24; border-radius: 4px;
}
.ic-quote p { margin: 0 0 8px; font-size: 1.44rem; line-height: 1.95; color: #3a463d; }
.ic-quote p::before { content: "「"; }
.ic-quote p::after { content: "」"; }
.ic-quote cite { display: block; font-size: 1.248rem; color: #6b7268; font-style: normal; }
.ic-quote cite::before { content: "— "; }

/* 表 */
.ic-tablewrap { overflow-x: auto; margin: 0 0 22px; }
.ic-table { width: 100%; border-collapse: collapse; font-size: 1.392rem; min-width: 460px; }
.ic-table th, .ic-table td {
  border: 1px solid #e8e2d4; padding: 10px 13px; line-height: 1.8; text-align: left; vertical-align: top;
}
.ic-table thead th { background: #1c2d24; color: #fff; font-weight: 700; white-space: nowrap; }
.ic-table tbody th { background: #f7f8f6; color: #1c2d24; font-weight: 700; }
.ic-table td { color: #3a463d; }

/* リンクリスト */
.ic-linklist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; }
.ic-linklist a {
  display: inline-block; font-size: 1.36rem; font-weight: 700; color: #3a463d;
  border: 1px solid #d9cdb0; border-radius: 999px; padding: 7px 15px; text-decoration: none;
}
.ic-linklist a:hover { background: #1c2d24; color: #fff; border-color: #1c2d24; }

.ic-inline-cta {
  background: #f6faf7; border: 1px solid #dbe6de; border-left: 4px solid #1c2d24;
  border-radius: 4px; padding: 14px 18px; font-size: 1.44rem; line-height: 2;
}
.ic-note { font-size: 1.28rem; line-height: 1.9; color: #6b7268; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid #ece3d0; }

/* ── 製品カード ───────────────────────────── */
.ic-toc { background: #f7f8f6; border: 1px solid #e8e2d4; border-radius: 6px; padding: 20px 24px; margin-bottom: 36px; }
.ic-toc h2 { font-family: "Shippori Mincho", serif; font-size: 1.6rem; color: #1c2d24; margin: 0 0 12px; }
.ic-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.ic-toc a { display: inline-block; font-size: 1.328rem; font-weight: 700; color: #3a463d; background: #fff; border: 1px solid #d9cdb0; border-radius: 999px; padding: 6px 13px; text-decoration: none; }
.ic-toc a:hover { background: #1c2d24; color: #fff; border-color: #1c2d24; }

.ic-product {
  border: 1px solid #e8e2d4; border-radius: 8px;
  background: #fff; padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: 100px;
}
/* 見出しの段は h2 節 → h3 ライン → h4 製品名 → h5 特長。
   見た目は前と同じ大きさにする。 */
.ic-product h4 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.856rem; color: #1c2d24; margin: 0 0 10px; line-height: 1.5;
}
.ic-product__en { display: block; font-family: inherit; font-size: 1.28rem; color: #6b7268; font-weight: 400; margin-top: 3px; }
.ic-product__lead { font-size: 1.472rem; line-height: 1.95; color: #3a463d; margin: 0 0 14px; }
.ic-product__spec { margin: 0; }
.ic-product__spec > div { display: flex; gap: 14px; padding: 9px 0; border-top: 1px solid #f0ece1; }
.ic-product__spec dt { flex: 0 0 6.5em; font-size: 1.312rem; font-weight: 700; color: #6b7268; margin: 0; }
.ic-product__spec dd { flex: 1; font-size: 1.392rem; line-height: 1.9; color: #3a463d; margin: 0; }

/* ── CTA・コラムカード ────────────────────── */
.ic-cta { background: #1c2d24; border-radius: 12px; padding: 26px 28px; margin: 34px 0 0; text-align: center; }
.ic-cta p { color: #d6ddd4; font-size: 1.472rem; line-height: 1.9; margin: 0 0 16px; }
.ic-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 !important; }
.ic-btn { display: inline-block; font-size: 1.44rem; font-weight: 700; color: #1c2d24; background: #fff; border-radius: 999px; padding: 12px 26px; text-decoration: none; }
.ic-btn:hover { background: #a98f5c; color: #fff; }
.ic-btn--line { background: transparent; color: #fff; border: 1px solid #6b7d72; }
.ic-btn--line:hover { background: #a98f5c; border-color: #a98f5c; }

.ic-card { border: 1px solid #e8e2d4; border-left: 4px solid #a98f5c; border-radius: 6px; background: #fff; padding: 22px 24px; margin-bottom: 16px; }
.ic-card h2 { font-family: "Shippori Mincho", "Noto Serif JP", serif; font-size: 1.824rem; line-height: 1.6; margin: 0 0 6px; }
.ic-card h2 a { color: #1c2d24; text-decoration: none; }
.ic-card h2 a:hover { color: #a98f5c; text-decoration: underline; }
.ic-card__date { font-size: 1.248rem; color: #6b7268; margin: 0 0 10px; }
.ic-card__desc { font-size: 1.408rem; line-height: 1.95; color: #4a5349; margin: 0 0 10px; }
.ic-card__more a { font-size: 1.376rem; font-weight: 700; color: #1c6b3f; text-decoration: none; }
.ic-card__more a:hover { text-decoration: underline; }

.ic-related { margin-top: 44px; padding-top: 10px; }

@media screen and (max-width: 992px) {
  .ic-head h1 { font-size: 2.144rem; }
  .ic-product, .ic-card { padding: 18px 16px; }
  .ic-toc { padding: 16px; }
  .ic-cta { padding: 20px 16px; }
  .ic-product__spec > div { flex-direction: column; gap: 4px; }
}

/* ── 製品カードの価格・特長（2026-09-05 追加） ───────── */
.ic-section { margin-bottom: 44px; }
.ic-section > h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.08rem; color: #1c2d24; margin: 44px 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid #ece3d0;
}
.ic-section > h3 {
  font-size: 1.664rem; color: #1c2d24; margin: 28px 0 10px; padding-left: 12px;
  border-left: 3px solid #a98f5c; line-height: 1.6;
}
.ic-section > p { font-size: 1.52rem; line-height: 2.05; color: #3a463d; margin: 0 0 18px; }
.ic-section > p strong { color: #1c2d24; font-weight: 700; }

.ic-product__price {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 1.408rem; color: #6b7268; margin: 0 0 12px;
}
.ic-product__price strong { font-size: 1.792rem; color: #1c2d24; font-weight: 700; }
.ic-product__line {
  font-size: 1.28rem; font-weight: 700; color: #8a6f3c;
  background: #f6f2e7; border: 1px solid #e4dcc6; border-radius: 999px; padding: 3px 10px;
}
.ic-feat { background: #f7f8f6; border-radius: 5px; padding: 13px 16px; margin: 0 0 14px; }
.ic-feat h5 {
  font-size: 1.248rem; font-weight: 700; color: #6b7268; margin: 0 0 8px;
  padding: 0; border: 0; letter-spacing: .04em;
}
.ic-feat ul { margin: 0; padding-left: 1.2em; }
.ic-feat li { font-size: 1.36rem; line-height: 1.85; color: #4a5349; margin-bottom: 5px; }
.ic-num { text-align: right; white-space: nowrap; font-weight: 700; color: #1c2d24; }
.ic-table th a { color: #1c2d24; text-decoration: underline; text-underline-offset: 2px; }
.ic-table th a:hover { color: #a98f5c; }

/* ── 詳細度の事故を修正（2026-09-05） ─────────────────
   .ic-article p / .ic-article a が後から効いてしまい、
   注記が本文と同サイズになり、CTAのボタン文字が緑になって
   濃緑背景でコントラスト不足になっていた。セレクタを具体化して打ち消す。 */
.ic-article p.ic-note,
p.ic-note {
  font-size: 1.28rem; line-height: 1.9; color: #6b7268;
}
.ic-cta .ic-btn,
.ic-article .ic-cta .ic-btn {
  color: #1c2d24; background: #fff; text-decoration: none; font-weight: 700;
}
.ic-cta .ic-btn:hover,
.ic-article .ic-cta .ic-btn:hover { color: #fff; background: #a98f5c; }
.ic-cta .ic-btn--line,
.ic-article .ic-cta .ic-btn--line {
  color: #fff; background: transparent; border: 1px solid #6b7d72;
}
.ic-cta .ic-btn--line:hover,
.ic-article .ic-cta .ic-btn--line:hover { color: #fff; background: #a98f5c; border-color: #a98f5c; }
.ic-cta p, .ic-article .ic-cta p { color: #d6ddd4; }

/* 表の横スクロールが分かるように、右端にフェードを出す */
.ic-tablewrap { position: relative; }
@media (max-width: 560px) {
  /* 表の最小幅460pxのままだと、375pxでは右の列（値段）が画面の外に出る。
     文字と余白を詰めて、画面の幅に収める。 */
  .ic-table { min-width: 0; font-size: 1.24rem; }
  .ic-table th, .ic-table td { padding: 8px 8px; }
  .ic-table thead th { white-space: normal; }
  /* 製品はこの下でライン別に並べているので、狭い画面では列を1つ落として
     値段のぶんの幅を作る */
  .ic-hide-sp { display: none; }
  /* 右端のフェードは、横に動かせない表にも常時かかって
     価格の数字と枠線を溶かしていたのでやめた。 */
}

/* ── スマホ幅の余白を詰める（2026-09-05） ─────────────
   テーマの .column_main が padding:2% 5%、.main_inner が padding 6% を持つため、
   375px では本文カラムが 273px（画面の73%）まで痩せていた。 */
@media screen and (max-width: 992px) {
  .main_inner { padding-left: 12px; padding-right: 12px; }
  .column_main.one_column { padding-left: 0; padding-right: 0; }
  .salon-wrap.icd-content, .salon-wrap.pref-wrap { padding-left: 10px; padding-right: 10px; }
}

/* ── 図版（インラインSVG） ─────────────────────────
   本文が長いページで、読み手が構造をつかめる場所に置く。
   ダークモード指定は入れない（サイト全体がライト前提のため）。 */
.ic-figure {
  margin: 0 0 30px;
  padding: 22px 20px 16px;
  background: #fbfaf6;
  border: 1px solid #ece3d0;
  border-radius: 8px;
}
.ic-figure svg { display: block; width: 100%; height: auto; }
.ic-figure figcaption {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #f0ece1;
  font-size: 1.328rem;
  line-height: 1.85;
  color: #6b7268;
}
.ic-figure figcaption strong { color: #3a463d; font-weight: 700; }

/* 図の中で使う文字。SVG側でクラス指定する */
.ic-fig-t   { font-family: "Noto Sans JP", sans-serif; font-size: 13px; fill: #3a463d; }
.ic-fig-t--s{ font-size: 11px; fill: #6b7268; }
.ic-fig-t--b{ font-weight: 700; fill: #1c2d24; }
.ic-fig-t--w{ fill: #ffffff; font-weight: 700; }
.ic-fig-t--g{ fill: #a98f5c; font-weight: 700; }

@media screen and (max-width: 760px) {
  /* 幅を縮めると viewBox ごと縮んで図中の文字が読めなくなる。
     表と同じように、図版の枠の中だけ横スクロールさせ、SVGは実寸（width属性）で出す。
     図ごとに viewBox の幅が違う（560〜640）ので、決め打ちの幅にはしない。 */
  .ic-figure { padding: 16px 12px 12px; overflow-x: auto; }
  .ic-figure svg { width: auto; height: auto; max-width: none; }
  .ic-figure figcaption::after {
    content: "（図は横にスクロールできます）";
    display: block; margin-top: 6px; font-size: 1.2rem; color: #6b7268;
  }
}

/* 引用の保険：<p> で包み忘れても、テーマの既定サイズ（8px相当）に落ちないようにする */
.ic-quote { font-size: 1.44rem; line-height: 1.95; color: #3a463d; }

/* ============================================================
   カテゴリ（記事一覧・記事ヘッダ・関連記事）
   ※ このファイルは html{font-size:62.5%} 前提。1rem = 10px。
   ============================================================ */
.ic-cat {
  display: inline-block; font-size: 1.216rem; font-weight: 700; letter-spacing: .08em;
  color: #1c2d24; background: #ece3d0; border-radius: 999px; padding: 4px 14px;
  text-decoration: none; margin-bottom: 4px;
}
.ic-cat:hover { background: #1c2d24; color: #fff; }

.ic-jump { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ic-jump a {
  font-size: 1.312rem; font-weight: 700; color: #3a463d; background: #fff;
  border: 1px solid #d9cdb0; border-radius: 999px; padding: 6px 15px; text-decoration: none;
}
.ic-jump a:hover { background: #1c2d24; color: #fff; border-color: #1c2d24; }

.ic-catsec { margin: 0 0 46px; scroll-margin-top: 76px; }
.ic-catsec__h { border-bottom: 2px solid #ece3d0; padding-bottom: 10px; margin-bottom: 18px; }
.ic-catsec__h h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 2.08rem; color: #1c2d24; margin: 0 0 4px;
}
.ic-catsec__lead { font-size: 1.376rem; line-height: 1.9; color: #6b7268; margin: 0; }

.ic-idxlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.ic-idx { border: 1px solid #e8e2d4; border-radius: 6px; background: #fff; padding: 18px 20px; }
.ic-idx h3 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.696rem; line-height: 1.6; margin: 0 0 8px;
}
.ic-idx h3 a { color: #1c2d24; text-decoration: none; }
.ic-idx h3 a:hover { color: #a98f5c; text-decoration: underline; }
.ic-idx__d { font-size: 1.344rem; line-height: 1.9; color: #4a5349; margin: 0; }

.ic-linklist__c {
  display: inline-block; font-size: 1.216rem; font-weight: 700; color: #6b7268;
  background: #f2f4f1; border-radius: 3px; padding: 1px 7px; margin-right: 7px;
}

/* ============================================================
   製品カード・写真
   ============================================================ */
.ic-photo { margin: 0 0 22px; text-align: center; }
.ic-photo img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: 8px; }
.ic-photo figcaption { font-size: 1.28rem; color: #6b7268; margin-top: 8px; }

.ic-prodgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin: 0 0 26px; }
.ic-prodcard {
  border: 1px solid #e8e2d4; border-radius: 8px; background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.ic-prodcard > img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; background: #f7f8f6; padding: 8px; box-sizing: border-box; }
.ic-prodcard__noimg {
  display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f2f4f1;
  font-size: 1.28rem; color: #656d66; letter-spacing: .05em;
}
.ic-prodcard__b { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.ic-prodcard__b h4 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.632rem; line-height: 1.55; color: #1c2d24; margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.ic-prodcard__p { font-family: inherit; font-size: 1.472rem; font-weight: 700; color: #856527; white-space: nowrap; }
.ic-prodcard__b p { font-size: 1.376rem; line-height: 1.9; color: #4a5349; margin: 0; }
.ic-prodcard__u { font-size: 1.28rem !important; color: #6b7268 !important; padding-top: 8px; border-top: 1px solid #f0ece1; }

@media screen and (max-width: 760px) {
  .ic-catsec { margin-bottom: 34px; }
  .ic-prodcard__b { padding: 14px 15px 16px; }
}

/* 製品カードの写真（products.html）
   grid で写真の列を作ると、写真の高さぶんの行が商品名の下に
   163pxの空白として残る。写真は絶対配置にして、本文は
   カードの padding-left の内側に流す。 */
.ic-product { position: relative; display: block; padding-left: 194px; }
.ic-product__ph { position: absolute; left: 24px; top: 22px; width: 150px; margin: 0; background: #f7f8f6; border-radius: 6px; overflow: hidden; }
/* 元画像の縦横比が3種類あるので、枠の比を1つに決めて高さをそろえる。
   幅・高さの属性は実寸を書いてあるので、読み込み中に跳ねることもない。 */
.ic-product__ph img { display: block; width: 100%; height: auto; aspect-ratio: 348 / 448; object-fit: cover; }
@media screen and (max-width: 600px) {
  .ic-product { padding-left: 24px; }
  .ic-product__ph { position: static; max-width: 220px; width: auto; margin: 0 auto 14px; }
}

/* 縦長の実写は幅を抑える */
.ic-photo--wide img { max-width: 420px; }

.ic-sub { font-size: 1.344rem; line-height: 1.9; color: #6b7268; margin: -6px 0 14px; }

/* ============================================================
   記事一覧の2階層（グループ → カテゴリ）
   ============================================================ */
.ic-group { margin: 0 0 54px; scroll-margin-top: 76px; }
.ic-group__h {
  background: #1c2d24; border-radius: 8px; padding: 18px 22px; margin-bottom: 22px;
}
.ic-group__h h2 { font-size: 1.92rem; color: #fff; margin: 0 0 2px; }
.ic-group__lead { font-size: 1.312rem; line-height: 1.8; color: #c9d2c9; margin: 0; }
.ic-catsec__n {
  font-family: inherit; font-size: 1.216rem; font-weight: 700; color: #6b7268;
  background: #f2f4f1; border-radius: 999px; padding: 2px 10px; margin-left: 10px; vertical-align: middle;
}
.ic-catsec__h h3, .ic-catsec--picks .ic-catsec__h h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.792rem; color: #1c2d24; margin: 0 0 4px;
}
.ic-idx h4 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.664rem; line-height: 1.6; margin: 0 0 8px;
}
.ic-idx h4 a { color: #1c2d24; text-decoration: none; }
.ic-idx h4 a:hover { color: #a98f5c; text-decoration: underline; }
@media screen and (max-width: 600px) {
  .ic-group__h { padding: 15px 16px; gap: 12px; }
  .ic-group__h h2 { font-size: 1.7rem; }
}

/* 記事冒頭の要点。検索AIが最初に読む位置なので、短く言い切る */
.ic-points {
  background: #f7f8f6; border: 1px solid #e8e2d4; border-left: 4px solid #1c2d24;
  border-radius: 6px; padding: 20px 24px; margin: 0 0 32px;
}
.ic-points h2 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: 1.664rem; color: #1c2d24; margin: 0 0 12px; line-height: 1.5;
}
.ic-points ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ic-points li {
  font-size: 1.472rem; line-height: 1.9; color: #3a463d; padding-left: 22px; position: relative;
}
.ic-points li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 8px; height: 8px; border-radius: 50%; background: #a98f5c;
}
.ic-points strong { color: #1c2d24; font-weight: 700; }
@media screen and (max-width: 600px) { .ic-points { padding: 16px 17px; } }

/* ── 記事の写真 ─────────────────────────────────
   ic-hero: 記事のいちばん上（見出しの直下）
   ic-fig : 本文の途中に挟むもの
   どちらも画像は 1024px 幅・16:9 が基本。縦横比を CSS で固定して、
   読み込み中に本文が上下に飛ばないようにする。 */
.ic-hero {
  margin: 0 0 30px;
  border-radius: 3px;
  overflow: hidden;
  background: #eef0e6;
}
.ic-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ic-hero figcaption,
.ic-fig figcaption {
  font-size: 1.28rem;
  line-height: 1.75;
  color: #6b7268;
  padding: 9px 2px 0;
  letter-spacing: .02em;
}
.ic-hero figcaption { padding-left: 4px; }

.ic-fig {
  margin: 34px 0;
  background: #eef0e6;
  border-radius: 3px;
  overflow: hidden;
}
.ic-fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ic-fig figcaption { padding: 9px 12px 12px; }

/* 本文の幅からはみ出して見せたいとき */
@media screen and (min-width: 860px) {
  .ic-fig--wide { margin-left: -40px; margin-right: -40px; }
}

/* 4:3 で撮れている写真は、16:9 に切ると主役が欠ける。比率のほうを合わせる。 */
.ic-hero--tall img { aspect-ratio: 4 / 3; }

/* 記事末尾のCTAの見出し。
   .ic-cta の地色は #1c2d24 なのに、.ic-article h2 の文字色も #1c2d24 だったため、
   20ページ以上で見出しがまるごと見えていなかった。ここで上書きする。 */
.ic-cta h2,
.ic-article .ic-cta h2,
.icd-content .ic-cta h2 {
  color: #fff;
  font-size: 1.92rem;
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.ic-cta a { color: inherit; }


/* 流れ図は幅620pxで描いてある。狭い画面だと横スクロールしないと右半分が読めないので、
   同じ内容を文章の形でも用意して、狭いときはそちらを見せる。 */
.ic-flow-text { display: none; margin: 0; padding-left: 1.4em; }
.ic-flow-text > li { font-size: 1.5rem; line-height: 1.95; color: #3a463d; margin-bottom: 14px; }
.ic-flow-text ul { list-style: none; margin: 10px 0 0; padding-left: 0; }
.ic-flow-text ul li {
  font-size: 1.44rem; line-height: 1.9; color: #3a463d;
  border-left: 3px solid #c9d2c9; padding-left: 12px; margin-bottom: 10px;
}
.ic-flow-text strong { color: #1c2d24; font-weight: 700; }
.ic-flow-text li::marker { color: #a98f5c; font-weight: 700; }
@media screen and (max-width: 700px) {
  .ic-figure--flow svg { display: none; }
  .ic-flow-text { display: block; }
  .ic-figure--flow { overflow: visible; }
}

/* 製品ごとの内容量。公式モールの商品画像に印字されている表記。 */
.ic-product__vol{display:inline-block;margin-left:14px;padding:2px 10px;border:1px solid #ddd6c4;border-radius:999px;background:#faf9f4;font-size:1.28rem;color:#5a6459;font-weight:400;}
/* 読みやすさの調整 ────────────────────────────────
   検証の実測でこうなっていた：
   ・1280pxで本文幅860px＝1行 約57字（日本語は35〜45字が読みやすい）
   ・章見出し H2 が 20.8px なのに、飾りの中の見出しが 32px で、
     流し見したときいちばん大きい文字が飾りの中にあった
   ・375pxで本文が301px＝1行 約20字。左右の余白が合わせて74pxもあった
   ・本文のリンクが黒と緑で混在し、黒は本文と見分けがつかなかった
   ------------------------------------------------------------ */

/* 1行の長さ。表・図・見せ場は対象にしない（幅を持たせたいため）。 */
.ic-article > p,
.ic-article > ul,
.ic-article > ol { max-width: 42em; }

/* 見出しの大小を、H2 > 飾りの見出し > H3 の順に戻す */
.ic-article h2 { font-size: 2.6rem; font-weight: 700; }
.ic-article .fx .fx__title,
.ic-article .fx .fx-w__title { font-size: 2.2rem; }
.ic-article h3 { font-size: 1.86rem; }

/* 本文のリンクは緑＋下線でそろえる（テーマの a{color:#000} を打ち消す） */
.ic-article > p a,
.ic-article > ul a,
.ic-article > ol a,
.ic-article .ic-table a,
.ic-faq a {
  color: #1c6b3f;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ic-article > p a:hover,
.ic-faq a:hover { color: #14512f; }

@media screen and (max-width: 767px) {
  /* 左右の余白を詰めて、1行を20字から22〜23字に伸ばす */
  .salon-wrap.icd-content { padding-left: 16px; padding-right: 16px; }
  .ic-article { padding-left: 0; padding-right: 0; }
  .ic-article h2 { font-size: 2.06rem; }
  .ic-article h3 { font-size: 1.66rem; }

}

/* 表の「該当なし」を、製品名より弱く見せる */
.ic-table .ic-dim { color: #9aa39a; }

/* ── 記事の終わりの案内 ─────────────────────
   前は18本を縦一列に並べていた。長すぎて読まれないので、
   「同じカテゴリの続き」と「よく読まれている記事」を横に並べ、
   その下にカテゴリを置く形にした。 */
.ic-next { margin: 56px 0 0; padding-top: 30px; border-top: 2px solid #ece3d0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 36px; }
.ic-next__col { min-width: 0; }
.ic-next__h { font-size: 1.76rem; color: #1c2d24; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #ece3d0; }
.ic-next .ic-linklist { list-style: none; margin: 0; padding: 0; display: block; }
.ic-next .ic-linklist li { margin: 0; }
/* .ic-linklist はもともと丸いタグの形。ここでは1行ずつの一覧にしたいので、
   枠と丸みを外して縦に積む。 */
.ic-next .ic-linklist a { display: block; padding: 11px 0; border: 0; border-bottom: 1px solid #f2efe6; border-radius: 0; background: none; font-size: 1.48rem; font-weight: 400; line-height: 1.7; color: #1c2d24; text-decoration: none; }
.ic-next .ic-linklist a:hover { color: #a98f5c; }
.ic-next .ic-linklist__c { display: block; background: none; padding: 0; margin: 0 0 2px; font-size: 1.2rem; letter-spacing: .06em; color: #a98f5c; font-weight: 700; }
.ic-next__cats { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid #ece3d0; }
.ic-next__k { font-size: 1.28rem; letter-spacing: .12em; color: #6b7268; font-weight: 700; margin: 0 0 12px; }
.ic-next__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ic-next__cat { display: inline-block; font-size: 1.4rem; line-height: 1.5; padding: 8px 16px; border-radius: 999px; border: 1px solid #d9cdb0; color: #1c2d24; background: #fff; text-decoration: none; }
.ic-next__cat:hover { background: #1c2d24; border-color: #1c2d24; color: #fff; }
.ic-next__all { margin: 14px 0 0; font-size: 1.36rem; }
.ic-next__all a { color: #1c6b3f; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .ic-next { grid-template-columns: 1fr; gap: 26px; }
  .ic-next__h { font-size: 1.64rem; }
  .ic-next .ic-linklist a { font-size: 1.44rem; padding: 12px 0; }
}

/* ── 記事一覧をスマホで短くする ─────────────────
   19本ぶんの説明文まで縦に並べると、485pxで7,800px（画面9枚ぶん）になる。
   運営者の指摘「そんな長いのスクロールしない」に合わせて、
   スマホでは見出しだけにして、説明は一覧では出さない。
   説明は各記事の冒頭にあるので、失われる情報はない。 */
@media (max-width: 700px) {
  .ic-idxlist { gap: 8px; }
  .ic-idx { padding: 13px 15px; }
  .ic-idx__d { display: none; }
  .ic-idx h3, .ic-idx h4 { margin: 0; }
}

/* ラインの見出し */
.ic-linehead{font-size:1.92rem;color:#1c2d24;margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid #ece3d0;}
.ic-linehead:first-of-type{margin-top:18px;}

/* 記事一覧の先頭の短い列。下のカードと同じ説明を2回出さないための形 */
.ic-picklist{list-style:none;counter-reset:pk;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:10px 18px;}
.ic-picklist li{counter-increment:pk;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid #d9cdb0;background:#fbf9f4;border-radius:6px;}
.ic-picklist li::before{content:counter(pk);flex:0 0 auto;font-size:1.2rem;font-weight:700;color:#fff;background:#a98f5c;border-radius:999px;padding:2px 8px;}
.ic-picklist a{font-family:"Shippori Mincho","Noto Serif JP",serif;font-size:1.664rem;line-height:1.6;color:#1c2d24;text-decoration:none;}
.ic-picklist a:hover{color:#a98f5c;text-decoration:underline;}

/* 目次から飛んだとき、見出しが固定ヘッダー（60px）の下に隠れないようにする */
.ic-article h2[id], .ic-article h3[id] { scroll-margin-top: 76px; }

/* 製品と値段・成分早見表・記事一覧は .ic-article の外にあるので、
   本文のリンクが黒いままだった。段落と表の中の素のリンクだけを拾う。 */
.icd-content .ic-lead a:not([class]),
.icd-content .ic-head__sum a:not([class]),
.icd-content .ic-note a:not([class]),
.icd-content .ic-section p a:not([class]),
.icd-content .ic-section li a:not([class]),
.icd-content .ic-table td a:not([class]),
.icd-content .ic-table th a:not([class]) {
  color: #1c6b3f; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px;
}

/* 相談ボタンは濃い緑の地なので、文字は白で固定する */
.hd-cta--salon > a,
.icd-bottombar__a--salon,
.pref-contact__btn,
.salon-cta-btn--salon { color: #fff !important; }


/* --- 押したあとも色を変えない（a:visited 対策） --- */
/* style.min.css の a:visited{color:#000} は (0,1,1) で、
   クラス1つの指定 (0,1,0) より強い。押したあとだけ黒くなるのを打ち消す。 */
.ic-head h1:visited { color: #1c2d24; }
.ic-head__sum:visited { color: #3a463d; }
.ic-head__sum strong:visited { color: #1c2d24; }
.ic-head__date:visited { color: #6b7268; }
.ic-lead:visited { color: #3a463d; }
.ic-lead strong:visited { color: #1c2d24; }
.icd-content h2:visited { color: #1c2d24; }
.icd-content h3:visited { color: #1c2d24; }
.icd-content h4:visited { color: #1c2d24; }
.ic-article h2:visited,
.ic-related h2:visited { color: #1c2d24; }
.ic-article h3:visited { color: #1c2d24; }
.ic-article p:visited { color: #3a463d; }
.ic-article strong:visited { color: #1c2d24; }
.ic-article a:visited { color: #1c6b3f; }
.ic-ul li:visited { color: #3a463d; }
.ic-ul strong:visited { color: #1c2d24; }
.ic-ol li:visited { color: #3a463d; }
.ic-ol strong:visited { color: #1c2d24; }
.ic-quote p:visited { color: #3a463d; }
.ic-quote cite:visited { color: #6b7268; }
.ic-table thead th:visited { color: #fff; }
.ic-table tbody th:visited { color: #1c2d24; }
.ic-table td:visited { color: #3a463d; }
.ic-linklist a:visited { color: #3a463d; }
.ic-note:visited { color: #6b7268; }
.ic-toc h2:visited { color: #1c2d24; }
.ic-toc a:visited { color: #3a463d; }
.ic-product h4:visited { color: #1c2d24; }
.ic-product__en:visited { color: #6b7268; }
.ic-product__lead:visited { color: #3a463d; }
.ic-product__spec dt:visited { color: #6b7268; }
.ic-product__spec dd:visited { color: #3a463d; }
.ic-cta p:visited { color: #d6ddd4; }
.ic-btn:visited { color: #1c2d24; }
.ic-btn--line:visited { color: #fff; }
.ic-card h2 a:visited { color: #1c2d24; }
.ic-card__date:visited { color: #6b7268; }
.ic-card__desc:visited { color: #4a5349; }
.ic-card__more a:visited { color: #1c6b3f; }
.ic-section > h2:visited { color: #1c2d24; }
.ic-section > h3:visited { color: #1c2d24; }
.ic-section > p:visited { color: #3a463d; }
.ic-section > p strong:visited { color: #1c2d24; }
.ic-product__price:visited { color: #6b7268; }
.ic-product__price strong:visited { color: #1c2d24; }
.ic-product__line:visited { color: #8a6f3c; }
.ic-feat h5:visited { color: #6b7268; }
.ic-feat li:visited { color: #4a5349; }
.ic-num:visited { color: #1c2d24; }
.ic-table th a:visited { color: #1c2d24; }
.ic-article p.ic-note:visited,
p.ic-note:visited { color: #6b7268; }
.ic-cta .ic-btn:visited,
.ic-article .ic-cta .ic-btn:visited { color: #1c2d24; }
.ic-cta .ic-btn--line:visited,
.ic-article .ic-cta .ic-btn--line:visited { color: #fff; }
.ic-cta p:visited,
.ic-article .ic-cta p:visited { color: #d6ddd4; }
.ic-figure figcaption:visited { color: #6b7268; }
.ic-figure figcaption strong:visited { color: #3a463d; }
.ic-quote:visited { color: #3a463d; }
.ic-cat:visited { color: #1c2d24; }
.ic-jump a:visited { color: #3a463d; }
.ic-catsec__h h2:visited { color: #1c2d24; }
.ic-catsec__lead:visited { color: #6b7268; }
.ic-idx h3 a:visited { color: #1c2d24; }
.ic-idx__d:visited { color: #4a5349; }
.ic-linklist__c:visited { color: #6b7268; }
.ic-photo figcaption:visited { color: #6b7268; }
.ic-prodcard__noimg:visited { color: #656d66; }
.ic-prodcard__b h4:visited { color: #1c2d24; }
.ic-prodcard__p:visited { color: #856527; }
.ic-prodcard__b p:visited { color: #4a5349; }
.ic-prodcard__u:visited { color: #6b7268 !important; }
.ic-sub:visited { color: #6b7268; }
.ic-group__h h2:visited { color: #fff; }
.ic-group__lead:visited { color: #c9d2c9; }
.ic-catsec__n:visited { color: #6b7268; }
.ic-catsec__h h3:visited,
.ic-catsec--picks .ic-catsec__h h2:visited { color: #1c2d24; }
.ic-idx h4 a:visited { color: #1c2d24; }
.ic-points h2:visited { color: #1c2d24; }
.ic-points li:visited { color: #3a463d; }
.ic-points strong:visited { color: #1c2d24; }
.ic-hero figcaption:visited,
.ic-fig figcaption:visited { color: #6b7268; }
.ic-cta h2:visited,
.ic-article .ic-cta h2:visited,
.icd-content .ic-cta h2:visited { color: #fff; }
.ic-cta a:visited { color: inherit; }
.ic-flow-text > li:visited { color: #3a463d; }
.ic-flow-text ul li:visited { color: #3a463d; }
.ic-flow-text strong:visited { color: #1c2d24; }
.ic-product__vol:visited { color: #5a6459; }
.ic-article > p a:visited,
.ic-article > ul a:visited,
.ic-article > ol a:visited,
.ic-article .ic-table a:visited,
.ic-faq a:visited { color: #1c6b3f; }
.ic-table .ic-dim:visited { color: #9aa39a; }
.ic-next__h:visited { color: #1c2d24; }
.ic-next .ic-linklist a:visited { color: #1c2d24; }
.ic-next .ic-linklist__c:visited { color: #a98f5c; }
.ic-next__k:visited { color: #6b7268; }
.ic-next__cat:visited { color: #1c2d24; }
.ic-next__all a:visited { color: #1c6b3f; }
.ic-linehead:visited { color: #1c2d24; }
.ic-picklist a:visited { color: #1c2d24; }
.hd-cta--salon > a:visited,
.icd-bottombar__a--salon:visited,
.pref-contact__btn:visited,
.salon-cta-btn--salon:visited { color: #fff !important; }


/* --- 表の見出し（濃い地）の中のリンク --- */
/* thead の th は地が #1c2d24 と濃い。
   本文リンクの緑（#1c6b3f）だとコントラスト2.22で読めないので、
   ここだけ白い下線つきにする。tbody の th は明るい地なのでそのまま。 */
.ic-table thead th a,
.ic-table thead th a:visited,
.icd-content .ic-table thead th a:not([class]),
.icd-content .ic-table thead th a:not([class]):visited {
  color: #fff; text-decoration: underline !important; text-underline-offset: 2px;
}
.ic-table thead th a:hover { color: #e9cd90; }