@charset "UTF-8";
/* ==========================================================
   キッズフォーマル 共通スタイル（TOP・記事共通）
   - 本番ECの共通CSS（html{font-size:62.5%}、img{width:100%} 等）と
     共存させるため、単位は px を使い、セレクタは .kf 配下に限定する
   - コンテンツ幅はイオンのランドセル（k-rand.aspx）の
     .ly-content.ly-90（幅90%・最大1200px）に合わせる
   ========================================================== */

/* ---------- Tokens ---------- */
.kf {
  --kf-mincho: "Yu Mincho", "Hiragino Mincho ProN", serif;
  --kf-latin: Georgia, "Yu Mincho", serif;
  --kf-gothic: -apple-system, BlinkMacSystemFont, "Yu Gothic", sans-serif;

  --kf-charcoal: #1f1f1d;   /* TOP本文 */
  --kf-ink: #303642;        /* 記事本文 */
  --kf-navy: #293a50;
  --kf-muted: #73766f;
  --kf-muted-warm: #716a63;
  --kf-white: #fff;
  --kf-paper: #fffefa;
  --kf-ivory: #f7f6f2;
  --kf-wash: #f3f1ec;
  --kf-line: #dedcd5;
  --kf-line-strong: #aaa69e;
  --kf-gold: #ac9471;
  --kf-gold-deep: #8b7657;
  --kf-focus: #967340;

  --kf-content: 1200px;
  --kf-narrow: 900px;
}

/* ---------- Base ---------- */
.kf {
  font-family: var(--kf-gothic);
  font-size: 16px;
  line-height: 1.9;
  color: var(--kf-ink);
  -webkit-text-size-adjust: 100%;
}
.kf *,
.kf *::before,
.kf *::after { box-sizing: border-box; }
.kf img { max-width: 100%; height: auto; }
.kf a { color: inherit; text-decoration: none; }
.kf button,
.kf input { font: inherit; color: inherit; }
.kf h1,
.kf h2,
.kf h3 { font-family: var(--kf-mincho); font-weight: 500; }
.kf :focus-visible { outline: 3px solid var(--kf-focus); outline-offset: 4px; }

/* 行き先未確定の仮リンク（href なし）。href を設定すると通常のリンクになる */
.kf a:not([href]) { cursor: default; }

/* ---------- Layout ---------- */
.kf-inner {
  width: 90%;
  max-width: var(--kf-content);
  margin-left: auto;
  margin-right: auto;
}
.kf-inner--narrow { max-width: var(--kf-narrow); }

/* ---------- KV（TOP・記事で高さを統一：PC 400px／SP 500px） ---------- */
.kf .kv {
  position: relative;
  max-width: var(--kf-content);
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}
.kf .kv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- FAQ（<details> の標準開閉を利用） ---------- */
.kf details { border-bottom: 1px solid var(--kf-line); }
.kf summary {
  position: relative;
  padding: 20px 28px 20px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  list-style: none;
  cursor: pointer;
}
.kf summary::-webkit-details-marker { display: none; }
/* 質問は見出し（h3）としてマークアップ。見た目は summary の指定を引き継ぐ */
.kf summary h3 {
  display: inline;
  margin: 0;
  font: inherit;
}
.kf summary::before {
  content: "Q";
  margin-right: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--kf-gold-deep);
}
.kf summary::after {
  content: "+";
  position: absolute;
  top: 20px;
  right: 4px;
  font-weight: 400;
}
.kf details[open] summary::after { content: "−"; }
.kf details p {
  margin: 0;
  padding: 0 16px 22px 30px;
  font-size: 15px;
  font-weight: 400;
}

@media (max-width: 820px) {
  .kf .kv {
    max-width: none;
    height: 500px;
  }
}