/* 樫の森 AIスクール｜買い切り講座（トップの入口セクション＋ /kaikiri/ 一覧ページ） 2026-11-12
   配色は Figma 教材ストックの配色（生成り・墨色・淡いグリーン・淡いブルー・ローズ・からし）。緑を主にしない。 */
:root {
  --kk-base: #fbf7f2;
  --kk-ink: #3a3f3b;
  --kk-ink2: #5b605c;
  --kk-green: #e3eee6;
  --kk-blue: #e1ebf0;
  --kk-rose: #c9989a;
  --kk-rose-deep: #9a6466;
  --kk-mustard: #e7ba15;
  --kk-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
}

/* 共通の部品 */
.kk-tag { display: inline-block; font-family: var(--kk-maru); font-weight: 700; font-size: 14px; line-height: 1; color: var(--kk-rose-deep); background: #fff; border: 1.5px solid var(--kk-rose); border-radius: 999px; padding: 8px 16px; }
.kk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 36px; border-radius: 999px; background: var(--kk-mustard); color: var(--kk-ink); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.kk-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(231, 186, 21, .35); }
.kk-btn--ink { background: var(--kk-ink); color: #fff; }
.kk-btn--ink:hover { box-shadow: 0 6px 16px rgba(58, 63, 59, .25); }
.kk-btn--line { background: #fff; color: var(--kk-ink); border: 1.5px solid var(--kk-ink); }

/* ===== トップの入口セクション ===== */
.kk-top { background: var(--kk-base); padding-top: 80px; padding-bottom: 100px; }
.kk-top__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; background: var(--kk-blue); border-radius: 32px; padding: 56px 64px; }
.kk-top__text h2 { font-family: var(--kk-maru); font-size: 34px; line-height: 1.5; color: var(--kk-ink); margin: 18px 0 16px; }
.kk-top__text p { color: var(--kk-ink2); font-size: 16px; line-height: 1.9; }
.kk-top__text .kk-btn { margin-top: 28px; }
.kk-top__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kk-top__thumbs li { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(58, 63, 59, .08); }
.kk-top__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) {
  .kk-top { padding-top: 48px; padding-bottom: 64px; }
  .kk-top__box { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; border-radius: 24px; }
  .kk-top__text h2 { font-size: 24px; }
  .kk-top__text .kk-btn { width: 100%; }
}

/* ===== /kaikiri/ 一覧ページ ===== */
.kk-page { background: var(--kk-base); color: var(--kk-ink2); }
.kk-page h1, .kk-page h2, .kk-page h3 { color: var(--kk-ink); font-family: var(--kk-maru); }
.kk-page .header { background: rgba(251, 247, 242, .95); }
.kk-page .nav a:hover { color: var(--kk-rose-deep); }
.kk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

.kk-hero { padding: 64px 0 40px; text-align: center; }
.kk-crumb { font-size: 13px; color: var(--kk-ink2); margin-bottom: 28px; text-align: left; }
.kk-crumb a { color: var(--kk-ink2); }
.kk-hero h1 { font-size: 40px; line-height: 1.5; margin: 18px 0 18px; }
.kk-hero p { font-size: 17px; line-height: 1.9; max-width: 680px; margin: 0 auto; }
.kk-hero__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.kk-hero__chips li { background: #fff; border-radius: 999px; padding: 6px 16px; font-weight: 700; font-size: 14px; color: var(--kk-ink); }

.kk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 24px 0 24px; }
.kk-card { display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 24px rgba(58, 63, 59, .07); }
.kk-card__img { margin: 0; }
.kk-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kk-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 28px; }
.kk-card__cat { font-size: 13px; font-weight: 700; color: var(--kk-rose-deep); }
.kk-card h3 { font-size: 20px; line-height: 1.55; margin: 8px 0 12px; }
.kk-card__for { font-size: 15px; line-height: 1.8; flex: 1; }
.kk-card__price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 18px; padding-top: 16px; border-top: 1px dashed #d9d3ca; }
.kk-card__price b { font-family: var(--kk-maru); font-size: 28px; color: var(--kk-ink); }
.kk-card__price span { font-size: 13px; }
.kk-card .kk-btn { height: 52px; width: 100%; font-size: 15px; }
.kk-note { font-size: 13px; line-height: 1.8; text-align: center; margin: 8px 0 0; }
.kk-note a { color: var(--kk-ink); }

/* 見守りサポートへ */
.kk-next { margin: 88px 0 0; padding: 72px 0 96px; background: var(--kk-green); }
.kk-next__head { text-align: center; margin-bottom: 36px; }
.kk-next__head h2 { font-size: 30px; line-height: 1.5; margin: 16px 0 12px; }
.kk-next__head p { font-size: 16px; line-height: 1.9; max-width: 640px; margin: 0 auto; }
.kk-cmp { width: 100%; max-width: 860px; margin: 0 auto; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; font-size: 15px; line-height: 1.7; }
.kk-cmp th, .kk-cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid #eee7dd; }
.kk-cmp tr:last-child th, .kk-cmp tr:last-child td { border-bottom: 0; }
.kk-cmp thead th { font-family: var(--kk-maru); font-size: 17px; color: var(--kk-ink); background: var(--kk-blue); }
.kk-cmp thead th.kk-cmp__mima { background: #f3e6e6; }
.kk-cmp tbody th { width: 22%; font-weight: 700; color: var(--kk-ink); background: #fcfaf7; white-space: nowrap; }
.kk-cmp td { width: 39%; }
.kk-cmp td.kk-cmp__mima { font-weight: 700; color: var(--kk-ink); }
.kk-next__cta { text-align: center; margin-top: 40px; }
.kk-next__cta p { font-size: 14px; margin-top: 14px; }

.kk-page .footer { background: var(--kk-base); }
.kk-page .footer__inner { border-top: 1px solid #e8e1d6; }

@media (max-width: 960px) {
  .kk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kk-wrap { padding: 0 16px; }
  .kk-hero { padding: 36px 0 24px; }
  .kk-crumb { margin-bottom: 20px; }
  .kk-hero h1 { font-size: 27px; }
  .kk-hero p { font-size: 15px; text-align: left; }
  .kk-list { grid-template-columns: 1fr; gap: 20px; }
  .kk-next { margin-top: 56px; padding: 48px 0 64px; }
  .kk-next__head h2 { font-size: 22px; }
  .kk-next__head p { text-align: left; font-size: 15px; }
  .kk-cmp { font-size: 13px; border-radius: 14px; }
  .kk-cmp th, .kk-cmp td { padding: 12px 10px; }
  .kk-cmp thead th { font-size: 14px; }
  .kk-cmp tbody th { white-space: normal; width: 24%; }
  .kk-next__cta .kk-btn { width: 100%; }
}

/* ===== ごあいさつの署名に顔写真（2026-11-12） ===== */
.message__sign { display: flex; align-items: center; gap: 20px; margin-top: 22px; font-weight: 700; font-size: 14px; color: var(--ink); }
.message__sign img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid #e5f0e0; flex-shrink: 0; }
@media (max-width: 860px) { .message__sign img { width: 72px; height: 72px; } }

/* ===== POINT 04 を 01〜03 と同じ形に（2026-11-12） ===== */
.point__new { display: inline-block; margin-left: 6px; padding: 0 10px; border: 1.5px solid var(--green); border-radius: 999px; font-size: 12px; line-height: 20px; }
.point__more { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--coral); font: 700 15px/1.6 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.point__text p.point__note { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #8a8378; }
.point__text > p:not(.point__num):not(.point__note) { font-size: 17px; line-height: 30px; }