/* =========================================================
   ks-page.css — 下層ページ（page-ks.php）用スタイル

   トークンは ks-common.css で定義済み。
   font-size は賢威8の html{font-size:62.5%} に合わせて 1rem = 10px。
   ========================================================= */

/* ページヘッダーとCTAを全幅で敷きたいので、main 自体の余白は持たせない。
   本文の読み幅は .ks-page-body 側で決める。 */
body .ks-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

/* =========================================================
   ページヘッダー
   ========================================================= */

/* ページごとのアクセント色。トップの参加カードと対応させている。
   テンプレートが .ks-acc-blue / -pink / -green / -yellow を付ける。 */
/* --acc-ink はラベル用。クリーム地でも読めるよう濃さを調整した値。 */
.ks-page-head,
.ks-page-head.ks-acc-blue   { --acc-soft: #E3F0F7; --acc-ink: #0E7FB0; }
.ks-page-head.ks-acc-pink   { --acc-soft: #FBE7E9; --acc-ink: #D2606D; }
.ks-page-head.ks-acc-green  { --acc-soft: #E4F2E9; --acc-ink: #3B935D; }
.ks-page-head.ks-acc-yellow { --acc-soft: #FCF0D2; --acc-ink: #BC8506; }

.ks-page-head {
  position: relative;
  background: linear-gradient(170deg, #FFFCF4 0%, #FDF6E8 55%, var(--acc-soft) 100%);
  padding: clamp(4rem, 6vw, 8rem) 0 clamp(8rem, 9vw, 12.5rem);
  overflow: hidden;
}

/* 左右の淡い円。ページ色をうっすら効かせる */
.ks-page-head::before,
.ks-page-head::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--acc-soft);
  opacity: 0.65;
  pointer-events: none;
}
.ks-page-head::before {
  width: clamp(20rem, 26vw, 36rem);
  aspect-ratio: 1;
  top: clamp(-14rem, -10vw, -6rem);
  left: clamp(-12rem, -7vw, -4rem);
}
.ks-page-head::after {
  width: clamp(13rem, 17vw, 24rem);
  aspect-ratio: 1;
  top: 45%;
  right: clamp(-8rem, -4vw, -2rem);
}

.ks-page-head-inner {
  position: relative;
  z-index: 1;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 4vw, 3.2rem);
  text-align: center;
}

.ks-page-sparkle {
  display: block;
  width: clamp(28px, 3vw, 42px);
  height: auto;
  margin: 0 auto 1.2rem;
}

.ks-page-label {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  color: var(--acc-ink);
  margin: 0 0 0.8rem;
}

body .ks-page .ks-page-title {
  font-family: 'Yomogi', 'Zen Maru Gothic', sans-serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 3.4vw, 4rem);
  line-height: 1.5;
  color: var(--ks-ink);
  margin: 0;
  /* Yomogi は半角スペースが広く「Koga  Seed」と空きすぎるので詰める */
  word-spacing: -0.22em;
}

.ks-page-lead {
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  line-height: 2;
  color: var(--ks-ink);
  margin: 1.6rem auto 0;
  max-width: 70rem;
}

/* 下辺の街並み＋やわらかい曲線 */
.ks-page-scene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}

.ks-page-town {
  display: block;
  width: 100%;
  /* slice で横幅基準に拡大されるため、下限を上げすぎると
     スマホで丘や家が縦に引き伸ばされる */
  height: clamp(34px, 7.6vw, 110px);
}

.ks-page-wave {
  display: block;
  width: 100%;
  height: clamp(18px, 2.4vw, 36px);
  margin-top: -1px;
  /* 波の透明部分から地のクリームが覗くと丘との間が空いて見えるので、
     丘の下側と同じ色を敷いておく */
  background: #DCEBC7;
}

/* =========================================================
   本文
   ========================================================= */

.ks-page-body {
  max-width: 78rem;
  margin: 0 auto;
  padding: clamp(3.2rem, 5vw, 6.4rem) clamp(1.92rem, 4vw, 3.2rem);
  font-size: 1.6rem;
  line-height: 2;
  color: var(--ks-ink);
}

.ks-page-body > *:first-child { margin-top: 0; }
.ks-page-body p { margin: 0 0 1.8em; }

/* --- 見出し --- */

body .ks-page-body h2 {
  position: relative;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.6;
  color: var(--ks-ink);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 1.6rem;
  margin: 5.6rem 0 2.4rem;
}
body .ks-page-body h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.25em;
  bottom: 0.25em;
  width: 0.5rem;
  border-radius: 0.25rem;
  background: var(--ks-blue);
}

body .ks-page-body h3 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.7;
  color: var(--ks-blue);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ks-line);
  border-radius: 0;
  padding: 0 0 0.8rem;
  margin: 4rem 0 1.6rem;
}

body .ks-page-body h4 {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--ks-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 3.2rem 0 1.2rem;
}

/* --- リスト --- */

.ks-page-body ul,
.ks-page-body ol { margin: 0 0 1.8em; padding-left: 0; }

.ks-page-body ul { list-style: none; }
.ks-page-body ul > li {
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 0.8rem;
}
.ks-page-body ul > li::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.85em;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--ks-yellow);
}

.ks-page-body ol { padding-left: 2.4rem; }
.ks-page-body ol > li { margin-bottom: 0.8rem; }
.ks-page-body ol > li::marker { color: var(--ks-blue); font-weight: 700; }

/* --- 強調 --- */

.ks-page-body strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, #FFF0BE 62%);
}

/* 本文リンク。ボタン（.ks-btn）は自前の配色を持っているので対象外にする
   （ここで色を当てると .ks-btn-primary の白文字に勝ってしまい、青地に青文字になる） */
.ks-page-body a:not(.ks-btn) { color: var(--ks-blue); }
.ks-page-body a:not(.ks-btn):hover { color: var(--ks-blue-d); }

.ks-page-body .ks-btn { margin: 0.4rem 0.6rem 0.4rem 0; }

/* 注記 */
.ks-page-body small {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--ks-ink-soft);
}

/* --- 画像 --- */

.ks-page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}
.ks-page-body figure { margin: 0 0 1.8em; }
.ks-page-body figcaption {
  font-size: 1.3rem;
  color: var(--ks-ink-soft);
  text-align: center;
  margin-top: 0.8rem;
}

/* --- 賢威のボックス（斜線ボーダー）をやわらかい見た目に上書き --- */

body .ks-page-body .box_style,
body .ks-page-body .box_style00,
body .ks-page-body .box_style11 {
  background: var(--ks-blue-l);
  border: 0;
  border-radius: 1.2rem;
  padding: clamp(2rem, 3vw, 3.2rem);
  margin: 0 0 2.4rem;
}
body .ks-page-body .box_style .box_inner { padding: 0; border: 0; background: none; }

body .ks-page-body .box_style_title {
  display: block;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--ks-blue);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.2rem;
}
body .ks-page-body .box_style_title span { background: none; padding: 0; color: inherit; }

/* --- テーブル --- */

.ks-page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2.4rem;
  font-size: 1.5rem;
}
.ks-page-body th,
.ks-page-body td {
  padding: 1.2rem 1.6rem;
  border: 0;
  border-bottom: 1px solid var(--ks-line);
  text-align: left;
  vertical-align: top;
}
.ks-page-body th {
  width: 30%;
  white-space: nowrap;
  color: var(--ks-blue);
  font-weight: 700;
  background: none;
}

/* --- 引用 --- */

.ks-page-body blockquote {
  margin: 0 0 2.4rem;
  padding: 1.6rem 0 1.6rem 2.4rem;
  border-left: 4px solid var(--ks-line);
  color: var(--ks-ink-soft);
  background: none;
}
/* 親テーマの大きな引用符は本文に重なるので消す */
.ks-page-body blockquote::before,
.ks-page-body blockquote::after { content: none; }
.ks-page-body blockquote p:last-child { margin-bottom: 0; }

/* =========================================================
   ページ下部の共通CTA
   ========================================================= */

.ks-page-cta {
  background: var(--ks-cream);
  padding: clamp(4rem, 5vw, 6.4rem) 0;
  text-align: center;
}

.ks-page-cta-inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(1.92rem, 4vw, 3.2rem);
}

body .ks-page-cta-title {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 2vw, 2.6rem);
  color: var(--ks-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 1.2rem;
}

.ks-page-cta-text {
  font-size: 1.5rem;
  line-height: 2;
  color: var(--ks-ink-soft);
  margin: 0 0 2.4rem;
}

.ks-page-cta-btns {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

/* =========================================================
   SP
   ========================================================= */

@media (max-width: 600px) {
  .ks-page-body { font-size: 1.5rem; }
  body .ks-page-body h2 { font-size: 2rem; margin-top: 4rem; }
  body .ks-page-body h3 { font-size: 1.7rem; }
  .ks-page-body th,
  .ks-page-body td { display: block; width: auto; }
  .ks-page-body th { border-bottom: 0; padding-bottom: 0; }
  .ks-page-cta-btns { flex-direction: column; align-items: stretch; }
  .ks-page-cta-btns .ks-btn { justify-content: center; }
}