@charset "UTF-8";
/* ==========================================================
   キッズフォーマル 記事ページ（3記事共通）
   書体の役割：明朝＝記事タイトル・見出し／ゴシック＝本文・番号・UI
   ========================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 28px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.kf-article { background: var(--kf-paper); }
.kf-article a[href]:hover { text-decoration: underline; text-underline-offset: 5px; }
.kf-article h2 { margin: 0; font-size: 26px; line-height: 1.6; }
.kf-article p { margin: 0 0 18px; }
.kf-article ul { margin: 18px 0 0; padding-left: 22px; }
.kf-article li { margin: 10px 0; }
.kf-article strong { font-weight: 600; color: var(--kf-navy); }
.kf-article ul li {list-style-type: disc;}
.kf-article ol li {list-style-type: decimal;}
/* ---------- KV ----------
   左の文字領域は明るい生成り色。写真は左端を背景になじませ、境界線は設けない */
.kf-article .kv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 45px 8% 50px;
  background: linear-gradient(90deg, #f8f6f1, #fffefa);
}
.kf-article .kv h1 {
  max-width: 850px;
  margin: 20px 0;
  font-size: 38px;
  line-height: 1.6;
  letter-spacing: .06em;
  /* 見出しは <wbr> の位置で折り返す */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.kf-article .kv p {
  max-width: 650px;
  margin: 0;
  font-size: 16px;
}

/* 写真つきKV：PCは右側に写真、左側に文字。
   共通ヘッダーのメニューが上に26px重なるため、写真はその下から表示する */
.kf-article .kv--photo { padding: 60px 6% 40px; }
.kf-article .kv--photo .kv__img {
  top: 26px;
  left: auto;
  right: 0;
  width: 58%;
  height: calc(100% - 26px);
  object-position: center 30%;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .55) 18%, #000 42%);
  mask-image: linear-gradient(to right, transparent, rgba(0, 0, 0, .55) 18%, #000 42%);
}
.kf-article .kv__body {
  position: relative;
  z-index: 1;
  max-width: 52%;
}

.kf-article .eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 13px var(--kf-latin);
  letter-spacing: .18em;
  color: var(--kf-gold-deep);
}
.kf-article .eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--kf-gold);
}

.kf-article .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.kf-article .tags span {
  padding: 3px 12px;
  border: 1px solid #ccc7bb;
  border-radius: 20px;
  font-size: 12px;
}

/* ---------- 本文レイアウト：目次＋記事 ---------- */
.kf-article .layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 800px);
  justify-content: center;
  gap: 56px;
  padding: 56px 0 72px;
}
.kf-article .sidebar nav { position: sticky; top: 25px; }
.kf-article .toc-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kf-muted);
}
.kf-article .sidebar nav > a {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kf-line);
  font-size: 14px;
  line-height: 1.6;
}
.kf-article .sidebar a span {
  padding-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kf-gold-deep);
}
.kf-article .sidebar .back { margin-top: 24px; font-size: 13px; }

/* 結論ボックス（記事内で唯一の囲み） */
.kf-article .takeaway {
  margin-bottom: 56px;
  padding: 28px 32px;
  background: var(--kf-wash);
  border-top: 2px solid var(--kf-gold);
}
.kf-article .takeaway h2 { margin: 0 0 14px; font-size: 22px; }
.kf-article .takeaway ul { margin: 0; padding-left: 20px; }
.kf-article .takeaway li { margin: 10px 0; font-size: 16px; list-style-type: disc;}

/* 本文セクション */
.kf-article .article-section {
  margin: 0 0 48px;
  padding: 0 0 48px;
  border-bottom: 1px solid var(--kf-line);
}
.kf-article .section-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}
.kf-article .section-heading > span {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--kf-gold-deep);
}

/* 記事内イメージ画像：本文幅いっぱい。本文の区切りとして置く */
.kf-article .article-figure { margin: 0 0 48px; }
/* 本文の途中（箇条書きの後など）に置く場合 */
.kf-article .article-section .article-figure { margin: 28px 0; }
.kf-article .article-section .article-figure:last-child { margin-bottom: 0; }
.kf-article .article-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16 / 9; */
  object-fit: cover;
}
.kf-article .article-figure figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--kf-muted);
}

/* 表（狭い画面では横スクロール） */
.kf-article .table-wrap { overflow-x: auto; }
.kf-article table {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.8;
}
.kf-article th,
.kf-article td {
  padding: 16px;
  border-bottom: 1px solid var(--kf-line);
  text-align: left;
  vertical-align: top;
}
.kf-article th { background: var(--kf-wash); font-weight: 600; }
.kf-article td:first-child { width: 36%; font-weight: 600; }
.kf-article table + p { margin-top: 14px; font-size: 13px; color: var(--kf-muted); }

/* 売場の声：囲みにせず、左の罫線で本文と区別する */
.kf-article .store-note {
  margin: 32px 0 8px;
  padding: 2px 0 2px 24px;
  border-left: 2px solid var(--kf-gold);
}
.kf-article .store-note h3 { margin: 0 0 12px; font-size: 20px; }
.kf-article .store-note > p:last-child { margin: 14px 0 0; font-size: 13px; color: var(--kf-muted); }

/* チェックリスト（状態はページ内のみ。保存しない） */
.kf-article .progress {
  margin: 0;
  font-size: 14px;
  text-align: right;
  color: var(--kf-muted);
}
.kf-article .checks { margin: 0; padding: 0; list-style: none; }
.kf-article .checks li { margin: 0; border-bottom: 1px solid #ddd9d0; list-style-type: none; }
.kf-article .checks label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  cursor: pointer;
}
.kf-article .checks input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 6px;
  accent-color: var(--kf-navy);
}
.kf-article .checks label:has(input:checked) { color: #86867f; }
.kf-article .checks label:has(input:checked) span { text-decoration: line-through; }

/* 商品導線（記事情報と区別するため、ここだけ面で囲む。リンク先は確定後に設定） */
.kf-article .shopping { padding: 32px; background: var(--kf-wash); }
.kf-article .shopping h2 { margin: 0 0 8px; font-size: 24px; }
.kf-article .shopping > p { font-size: 14px; color: var(--kf-muted); }
/* 取扱いカテゴリー例：URL確定までは押せない静的表示（枠・ホバーをつけない） */
.kf-article .category-label {
  margin: 20px 0 10px;
  font-size: 14px;
  font-weight: 600;
}
.kf-article .category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kf-article .category-grid li {
  margin: 0;
  padding: 16px 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: var(--kf-ink);
  list-style-type: none!important;
}
.kf-article .category-grid li span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--kf-gold-deep);
}
/* カテゴリ画像（TOP「アイテムから探す」と同じ正方形の写真） */
.kf-article .category-grid li img {
  display: block;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  margin: 0 auto 10px;
  object-fit: contain;
  background: #fff;
}

.kf-article .top-link { display: block; margin-top: 32px; font-size: 14px; text-align: right; }

/* ---------- 他シーン案内 ---------- */
.kf-article .related {
  padding: 48px 0 56px;
  border-top: 1px solid var(--kf-line);
  text-align: center;
}
.kf-article .related h2 { font-size: 24px; }
.kf-article .related-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.kf-article .related-links a {
  padding: 13px 24px;
  border: 1px solid #b9b3a7;
  background: #fff;
  font-size: 15px;
}

/* ---------- フッター（モック。本番はEC共通フッター） ---------- */
.kf-article .footer {
  padding: 25px;
  border-top: 1px solid var(--kf-line);
  font-size: 12px;
  text-align: center;
  color: var(--kf-muted);
}
/* ---------- タブレット・SP ---------- */
@media (max-width: 820px) {
  .kf-article { font-size: 15px; }
  .kf-article .kv { padding: 29px 24px 33px; }
  .kf-article .kv h1 { font-size: 28px; line-height: 1.55; margin: 16px 0; }
  .kf-article .kv p { font-size: 15px; }
  .kf-article .eyebrow { font-size: 11px; }
  .kf-article .tags { gap: 5px; margin-top: 18px; }
  .kf-article .tags span { padding: 3px 10px; }

  /* 写真つきKV：高さを固定せず、写真を3:4で全体表示し、その下に文字を置く。
     写真と文字の重なりは写真の下端だけにし、短いグラデーションでつなぐ */
  .kf-article .kv--photo {
    display: block;
    height: auto;
    padding: 0;
  }
  .kf-article .kv--photo .kv__img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-position: center top;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* コピーは写真の下端（人物の足元付近）に重ねて、写真から本文へつなげる。
     グラデーションは短くし、人物の膝より上にはかけない */
  .kf-article .kv__body {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-top: -230px;
    padding: 100px 24px 28px;
    background: linear-gradient(to bottom, rgba(255, 254, 250, 0) 0, rgba(255, 254, 250, .88) 75px, #fffefa 115px);
  }

  .kf-article .layout { display: block; padding: 32px 0 44px; }
  .kf-article .sidebar nav { position: static; padding: 0 0 32px; }
  .kf-article .sidebar nav > a { padding: 10px 0; }
  .kf-article .sidebar .back { display: none; }

  .kf-article .takeaway { margin-bottom: 40px; padding: 22px 20px; }
  .kf-article .takeaway h2 { font-size: 20px; }
  .kf-article .takeaway li { font-size: 15px; }
  .kf-article .article-section { margin-bottom: 36px; padding-bottom: 36px; }
  .kf-article .article-figure { margin-bottom: 36px; }
  .kf-article h2 { font-size: 23px; }
  .kf-article .section-heading { gap: 10px; }
  .kf-article .section-heading > span { font-size: 14px; }
  .kf-article table { font-size: 14px; }
  .kf-article th,
  .kf-article td { padding: 12px 10px; }

  .kf-article .store-note { padding-left: 18px; }
  .kf-article .store-note h3 { font-size: 19px; }

  .kf-article .shopping { padding: 24px 18px; }
  .kf-article .shopping h2 { font-size: 22px; }
  .kf-article .category-grid { grid-template-columns: 1fr; }
  .kf-article .category-grid li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-align: left;
  }
  .kf-article .category-grid li a{
        display: flex;
    gap: 8px;
  }
  .kf-article .category-grid li span { margin: 0; }
  .kf-article .category-grid li img {
    flex-shrink: 0;
    width: 56px;
    margin: 0;
  }
  .kf-article .related h2 { font-size: 22px; }
  .kf-article .related-links { display: grid; gap: 10px; }
}




table#tblLayout .kf.kf-article thead{
    display: table-header-group;
}
table#tblLayout .kf.kf-article tbody{
    display: table-row-group;
}
table#tblLayout .kf.kf-article tr{    display: table-row;}

table#tblLayout .kf.kf-article tr td ,
table#tblLayout .kf.kf-article tr th{
      display: table-cell !important;
    width: auto !important;
}

table#tblLayout .kf.kf-article {}