/* ============================================================
   skincare.html 専用レイヤー
   2026-07-30 新設。

   共通の作法（丸ゴシック・角ゼロ・墨罫・硬い影・ボタン・ロゴ・ナビ修正）は
   renewal-framework.css が持つ。ここはこのページ固有のブロックだけ。
   新しい色は作らない。--c1 と 4領域の --rf-body だけを借りる。

   カードの罫線は .rf-tools-grid / .rf-tool と同じ idiom を使っている
   （外周 3px ＋ 内側は border-right/bottom を nth-child で落とす）。
   トップの道具カードと同じ見えになるので、ページ間で浮かない。

   このページの立ち位置（触るとき必ず読む）
   ── 商品の効能を書く場所ではない。書けるのは「どのテーマの棚に出たか」まで。
      「この商品は◯◯のテーマに対応する」＝セーフ
      「だから肌が◯◯になる」＝アウト（化粧品の効能表現は56効能に縛られる）
      .sk-theme / .sk-shelf に入るのはテーマの記述だけ。着地を肌の変化にしない。
   ============================================================ */

/* ------------------------------------------------------------
   01 ヒーロー
   ------------------------------------------------------------ */
.page-skincare .sk-hero {
  padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 7vw, 80px);
  border-bottom: 3px solid var(--rf-ink);
}
.page-skincare .sk-hero h1 {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(30px, 5.4vw, 56px);
  line-height: 1.35;
  margin: 0 0 26px;
  color: var(--rf-ink);
}
.page-skincare .sk-hero-lead {
  max-width: 720px;
  color: var(--rf-muted);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 2;
}
.page-skincare .sk-hero-lead + .sk-hero-lead { margin-top: 18px; }
.page-skincare .sk-hero-lead strong { color: var(--rf-ink); font-weight: 700; }
.page-skincare .sk-hero-inner > figure {
  margin: clamp(34px, 5vw, 56px) 0 0;
}

/* ------------------------------------------------------------
   02 このページの立ち位置（断り書き）
   薄い注意書きにしない。ここが読まれないと販売ページに見えるため、
   本文と同じ大きさで、罫で囲って置く。
   ------------------------------------------------------------ */
.page-skincare .sk-stance {
  padding: clamp(44px, 6vw, 72px) 0;
  background: var(--rf-paper-2);
  border-bottom: 3px solid var(--rf-ink);
}
.page-skincare .sk-stance-box {
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
  padding: clamp(26px, 3.4vw, 38px);
  max-width: 860px;
}
.page-skincare .sk-stance-box h2 {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 25px);
  margin: 0 0 20px;
  line-height: 1.6;
}
.page-skincare .sk-stance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-skincare .sk-stance-list li {
  position: relative;
  padding: 0 0 0 26px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--rf-ink);
}
.page-skincare .sk-stance-list li:last-child { margin-bottom: 0; }
.page-skincare .sk-stance-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 10px;
  height: 2px;
  background: var(--c1);
}
.page-skincare .sk-stance-note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: var(--rf-muted);
}

/* ------------------------------------------------------------
   03 カテゴリ見出し（スキンケア／ヘルスケア）
   ------------------------------------------------------------ */
.page-skincare .sk-cat {
  /* 下も空ける。ヘルスケア節の直後が .ai-digest（border-top 3px）なので、
     0 にすると末尾の注記が罫線に密着する。 */
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px);
}
/* スキンケア節とヘルスケア節の境目。上下のパディングは残したまま罫線だけ足す */
.page-skincare .sk-cat + .sk-cat {
  border-top: 3px solid var(--rf-ink);
}
.page-skincare .sk-cat-head {
  border-bottom: 3px solid var(--rf-ink);
  padding-bottom: 22px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.page-skincare .sk-cat-head h2 {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  margin: 0 0 14px;
  line-height: 1.4;
}
.page-skincare .sk-cat-head p {
  max-width: 720px;
  margin: 0;
  color: var(--rf-muted);
  font-size: 15px;
  line-height: 1.95;
}
.page-skincare .sk-cat-count {
  font-family: var(--font-display);
  color: var(--c1);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------
   04 フル幅の商品（エンベリエ／オーセント／霊芝）
   3つだけ。ここが枠いっぱいになるので、カード側を後から大きくしないこと。
   ------------------------------------------------------------ */
.page-skincare .sk-feature {
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
  margin-bottom: clamp(28px, 4vw, 44px);
  box-shadow: 8px 8px 0 var(--rf-ink);
}
.page-skincare .sk-feature-inner {
  padding: clamp(30px, 4.4vw, 52px);
}
.page-skincare .sk-feature-en {
  font-family: var(--font-display);
  color: var(--c1);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
}
.page-skincare .sk-feature h3 {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.3;
  margin: 0 0 8px;
}
.page-skincare .sk-feature-sub {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--rf-muted);
  letter-spacing: 0.04em;
}
/* フル幅3つの本文＋画像の2列。
   grid比・gap・枠の作りは four-domains.css の .fd-domain-inner /
   .fd-domain-illust と同じにしてある（ページ間で画像の見えを揃えるため）。
   見出しと価格帯（.sk-meta）はこの2列の外＝枠いっぱいのまま。 */
.page-skincare .sk-feature-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(30px, 4vw, 52px);
  align-items: start;
}
/* min-width:0 は grid の子が中身（.sk-shelf の長い棚のパス）で
   はみ出すのを止めるため。これが無いと横スクロールが出る。 */
.page-skincare .sk-feature-copy {
  min-width: 0;
}
.page-skincare .sk-feature-illust {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 3px solid var(--rf-ink);
  background: rgba(22, 19, 15, 0.06);
}
.page-skincare .sk-feature-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-skincare .sk-feature-illust .img-slot {
  min-height: 0;
  height: 100%;
  border: 0;
  background: none;
}

.page-skincare .sk-theme {
  border-left: 6px solid var(--c1);
  background: var(--rf-paper-2);
  padding: 20px 24px;
  margin: 0 0 26px;
}
.page-skincare .sk-theme-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c1);
  margin-bottom: 8px;
}
.page-skincare .sk-theme strong {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 21px);
  line-height: 1.7;
  color: var(--rf-ink);
}
.page-skincare .sk-shelf {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--rf-line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--rf-muted);
  overflow-x: auto;
}
.page-skincare .sk-shelf b {
  color: var(--rf-ink);
  font-weight: 500;
}
.page-skincare .sk-feature-body p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 2;
  color: var(--rf-ink);
}
.page-skincare .sk-feature-body p:last-child { margin-bottom: 0; }

/* 価格＋公式リンクの帯 */
.page-skincare .sk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 2px solid var(--rf-ink);
}
.page-skincare .sk-price {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--rf-ink);
}
.page-skincare .sk-price small {
  display: block;
  font-family: var(--rf-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rf-muted);
  margin-bottom: 4px;
}
.page-skincare .sk-official {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c1);
  text-decoration: none;
  border-bottom: 1px solid var(--c1);
  padding-bottom: 2px;
}
.page-skincare .sk-official:hover { background: var(--rf-paper-2); }

/* ------------------------------------------------------------
   05 2カラムカード（残り18商品）
   罫線の idiom は .rf-tools-grid と同じ。
   ------------------------------------------------------------ */
.page-skincare .sk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 3px solid var(--rf-ink);
  background: var(--rf-paper);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.page-skincare .sk-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-right: 2px solid var(--rf-ink);
  border-bottom: 2px solid var(--rf-ink);
}
.page-skincare .sk-grid > .sk-card:nth-child(2n) { border-right: 0; }
.page-skincare .sk-grid > .sk-card:nth-last-child(-n+2) { border-bottom: 0; }
.page-skincare .sk-card h3 {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  margin: 0 0 4px;
}
.page-skincare .sk-card-sub {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--rf-muted);
  letter-spacing: 0.04em;
}
.page-skincare .sk-card-theme {
  margin: 0 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--c1);
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
  color: var(--rf-ink);
}
.page-skincare .sk-card-text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--rf-muted);
}
.page-skincare .sk-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--rf-line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.page-skincare .sk-card-price {
  font-family: var(--rf-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--rf-ink);
}
.page-skincare .sk-card-price small {
  font-weight: 500;
  font-size: 11px;
  color: var(--rf-muted);
  letter-spacing: 0.04em;
}
.page-skincare .sk-card-link {
  font-size: 12px;
  color: var(--c1);
  text-decoration: none;
  border-bottom: 1px solid var(--c1);
  padding-bottom: 1px;
}
.page-skincare .sk-card-link:hover { background: var(--rf-paper-2); }

/* ------------------------------------------------------------
   06 補足
   ------------------------------------------------------------ */
.page-skincare .sk-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--rf-muted);
  letter-spacing: 0.03em;
}
/* ボタンの直後に注記が来る場所の余白。
   .btn-primary / .btn-secondary は box-shadow: 6px 6px 0 の硬い影を持つので、
   margin 0 のままだと影が下の文字に乗る（実機で判明）。影の6pxぶんを含めて空ける。 */
.page-skincare .rf-hero-actions + .sk-note {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--rf-line);
}
/* ボタンの中央寄せは four-domains.html の同じ節と揃える。ここでは変えない */
.page-skincare .sk-next .rf-hero-actions {
  margin-bottom: 0;
}
.page-skincare .sk-next {
  padding: clamp(56px, 8vw, 96px) 0;
}
.page-skincare .sk-next h2 {
  font-family: var(--rf-display);
  font-weight: 800;
  font-size: clamp(23px, 3.4vw, 34px);
  margin: 0 0 18px;
}
.page-skincare .sk-next-lead {
  max-width: 720px;
  color: var(--rf-muted);
  margin-bottom: 32px;
  font-size: 15px;
  line-height: 1.95;
}
.page-skincare .sk-next-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

/* ------------------------------------------------------------
   07 スマホ
   2カラムは崩す。カードの罫線 idiom は 1列でも成立するよう
   nth-child の指定を上書きする。
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .page-skincare .sk-feature-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* 1列になったら、画像は本文の上に出す（先に絵、次に読みもの） */
  .page-skincare .sk-feature-illust { order: -1; }
}

@media (max-width: 720px) {
  .page-skincare .sk-grid {
    grid-template-columns: 1fr;
  }
  .page-skincare .sk-card {
    border-right: 0;
    border-bottom: 2px solid var(--rf-ink);
  }
  .page-skincare .sk-grid > .sk-card:nth-child(2n) { border-right: 0; }
  .page-skincare .sk-grid > .sk-card:nth-last-child(-n+2) { border-bottom: 2px solid var(--rf-ink); }
  .page-skincare .sk-grid > .sk-card:last-child { border-bottom: 0; }

  .page-skincare .sk-feature {
    box-shadow: 5px 5px 0 var(--rf-ink);
  }
  .page-skincare .sk-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}