@charset "UTF-8";

/* ===============================
  Base
=============================== */
.kb-simple{
  font-size: 100%;
  line-height: 1.95;
  letter-spacing: .02em;
  word-break: break-word;
  padding-left: 0;
  padding-right: 0;
}
.kb-simple .kb-simple__sec{
	margin-top: 90px;
}

/* ===============================
  Hero
=============================== */
.kb-simple__hero{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.kb-simple__hero img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
  Media（通常画像）
=============================== */
.kb-simple__media{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.kb-simple__media img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
  Lead / Paragraph
=============================== */
/* リードは本文と揃えて読みやすく */
.kb-simple__lead{
	font-size: 106%;
	line-height: 2.0;
	max-width: 760px;
	width: 100%;
	margin: 60px auto 0;
}

/* 本文：画像より少し細く */
.kb-simple__p{
	font-size: 106%;
	line-height: 1.8;
	max-width: 720px;
	width: 100%;
	margin: 70px auto 20px;
}

/* ===============================
  Headings
=============================== */
.kb-simple__h2{
	position: relative;
	font-size: 150%;
	line-height: 1.35;
	text-align: center;
	padding-bottom: 18px;
	margin: 0 0 22px;
}

.kb-simple__h2::after{
  content: "";
  display: block;
  width: 2.8em;
  height: .22em;
  margin: 10px auto 0;
  border-radius: 1em;
}

/* 1〜3：淡いブルー */
.kb-simple__sec:nth-of-type(-n+3) .kb-simple__h2::after{
  background: #9bbbd4;
}
/* 4：濃いブルー */
.kb-simple__sec:nth-of-type(4) .kb-simple__h2::after{
  background: #5f8fb3;
}

.kb-simple__h3{
  font-size: 118%;
  line-height: 1.35;
  margin: 0 0 8px;
}

/* ===============================
  Section 4（カード＆2列）
=============================== */
@media (min-width: 769px){
  .kb-simple__sec--cols{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }
  .kb-simple__sec--cols > .kb-simple__h2{
    grid-column: 1 / -1;
  }
}

/* カード */
.kb-simple__sec--cols .kb-simple__colItem{
  background: #faf7f2;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

/* カード内 small 画像：枠いっぱい */
.kb-simple__sec--cols .kb-simple__media.kb-simple__media--small{
  max-width: none;
  width: 100%;
  margin: 0;
}
.kb-simple__sec--cols .kb-simple__media.kb-simple__media--small img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* カード内本文 */
.kb-simple__sec--cols .kb-simple__p{
  max-width: none;
  width: 100%;
  margin: 14px auto 0;
  line-height: 1.65;
  font-size: 96%;
  text-align: left; /* 読みやすさUP */
}

/* 要約 */
.kb-simple__summary{
  font-size: 88%;
  line-height: 1.6;
  margin: 0 0 12px;
  color: #6a5a44;
}

/* ===============================
  SP最適化
=============================== */
@media (max-width: 768px){
.kb-simple{
	padding-left: 0;
	padding-right: 0;
	line-height: 2.0;
}
.kb-simple__lead{
	margin: 40px auto 20px;
}

.kb-simple .kb-simple__sec{
margin-top: 70px;
}

.kb-simple__lead,
.kb-simple__p, .kb-simple .gift-faq{
	/* [disabled]width: 96%; */
	max-width: none;
	font-size: 100%;
	line-height: 1.7;
	/* [disabled]padding-left: 2%; */
	/* [disabled]padding-right: 2%; */
}

.kb-simple__p{
	margin: 40px auto 20px;
	text-align: left;
	/* [disabled]display: block; */
}

.kb-simple__h2{
	font-size: 140%;
	font-weight: 800;
}

.kb-simple__h3{
	font-size: 112%;
	line-height: 1.35;
	font-weight: 900;
}

.kb-simple__summary{
	font-size: 88%;
}

.kb-simple__h2::after{
	width: 2.4em;
	height: .20em;
	margin-top: 8px;
	opacity: .9;
}
.kb-simple__sec--cols .kb-simple__colItem{
	padding: 14px;
	border-style: solid;
	margin-top: 24px;
}
/*.kb-simple .ol-strong > li{
  padding-left: 10px!important;
}*/

}

.kb-simple{
  overflow-x: hidden;
}
.kb-simple,
.kb-simple *{
	box-sizing: border-box;
}
.kb-simple img,
.kb-simple svg{
  max-width: 100%;
  height: auto;
}
.kb-simple a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.kb-simple__toc,
.kb-simple .ol-strong,
.kb-simple .age .age-p,
.kb-simple .gift .gift-points,
.kb-simple .gift .gift-point,
.kb-simple .gift .gift-check,
.kb-simple .gift .gift-cta,
.kb-simple .gift .gift-faq,
.kb-simple .kb-simple__sec--agecards .agecards,
.kb-simple .kb-simple__sec--agecards .agecard{
	min-width: 0;
	/* [disabled]text-align: center; */
}

.kb-simple__h1{
  font-size: 175%;
  line-height: 1.35;
  text-align: center;
  margin: 26px 0 0;
  letter-spacing: .04em;
  font-weight: 900;
}

/* ====== 3) 目次（TOC） ====== */
.kb-simple__toc{
	max-width: 760px;
	width: 100%;
	margin: 22px auto 0;
	padding: 14px 15px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
}
.kb-simple__tocList{
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 96%;
  line-height: 1.75;
}
.kb-simple__tocList li{
  position: relative;
  padding-left: 1.6em;
  margin: 8px 0;
}
.kb-simple__tocList li::before{
  content: "▶";
  position: absolute;
  left: 0;
  top: .10em;
  font-size: 90%;
  opacity: .75;
}
.kb-simple__toc a{
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 106%;
}

/* ====== 4) sec2：3ポイントOL（丸数字のみ） ====== */
.kb-simple .ol-strong{
  counter-reset: olStrong;
  list-style: none;
  padding-left: 0;
  margin: 18px auto 10px;
  max-width: 720px;
  width: 100%;
}
.kb-simple .ol-strong > li{
	counter-increment: olStrong;
	position: relative;
	padding-left: 2.6em;
	margin: 8px 0;
}
.kb-simple .kb-simple__li {
	list-style-type: none!important;
}

.kb-simple .ol-strong > li::before{
  content: counter(olStrong);
  position: absolute;
  left: 0;
  top: .10em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 95%;
  font-weight: 900;
  background: rgba(0,0,0,.10);
  color: #111;
}

/* ====== 5) sec3：年齢（左：年齢 / 右：本文） ====== */
.kb-simple #sec3 .kb-simple__age.age{
  margin-top: 50px;
}
.kb-simple .age .age-p{
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 6px;
  align-items: baseline;
  margin: 16px auto 10px;
  line-height: 1.75;
}
.kb-simple .age .age-label{
  display: inline-block;
  font-weight: 900;
  font-size: 105%;
  line-height: 1.3;
  white-space: nowrap;
  position: relative;
  top: .08em;
}
.kb-simple .age .age-label::after{
  content: "：";
}

/* ====== 6) sec4：出産祝い（gift） ====== */
/* 3ポイント：1列 */
.kb-simple .gift .gift-points{
  max-width: 760px;
  width: 100%;
  margin: 18px auto 10px;
  display: grid;
  gap: 12px;
}
.kb-simple .gift .gift-point{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  background: #fff;
}
.kb-simple .gift .gift-ttl{
  font-size: 106%;
  line-height: 1.4;
  margin: 0 0 6px;
}
.kb-simple .gift .gift-txt{
	font-size: 100%;
	line-height: 1.6;
	margin: 0;
}

/* チェック */
.kb-simple .gift .gift-check{
  max-width: 760px;
  width: 100%;
  margin: 18px auto 0;
  padding: 14px;
  border-radius: 14px;
  background: #faf7f2;
  border: 1px solid rgba(0,0,0,.08);
}
.kb-simple .gift .gift-check__lead{
  margin: 0 0 10px;
  font-size: 106%;
}
.kb-simple .gift .gift-check__list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.kb-simple .gift .gift-check__list li{
  display: flex;
  align-items: flex-start;
  gap: .6em;
  margin: 10px 0;
  line-height: 1.75;
  font-size: 100%;
}
.kb-simple .gift .gift-check__list li::before{
  content: "✓";
  color: #d43b3b;
  font-weight: 900;
  line-height: 1;
  flex: 0 0 1.2em;
  text-align: center;
  transform: translateY(.20em);
}

/* CTA */
.kb-simple .gift .gift-cta{
  max-width: 760px;
  width: 100%;
  margin: 30px auto 0;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  text-align: center;
}
.kb-simple .gift .gift-cta__txt{
  margin: 0 0 12px;
  font-size: 100%;
  line-height: 1.8;
  text-align: left;
}
.kb-simple .gift .gift-cta__btn{
  display: inline-block;
  width: 100%;
  max-width: 520px;
  padding: 14px 12px;
  border-radius: 999px;
  text-decoration: none !important;
  border-bottom: none !important;
  font-size: 105%;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
  background: #e9a36d;
  color: #fff;
}
.kb-simple .gift .gift-cta__btn:hover{ filter: brightness(1.02); }
.kb-simple .gift .gift-cta__btn:active{ filter: brightness(.98); }

/* FAQ（Q/A） */
.kb-simple .gift .gift-faq{
  max-width: 760px;
  width: 100%;
  margin: 18px auto 0;
  border-top: 0 !important;
}
.kb-simple .gift .gift-faq dt{
	margin: 20px 0 4px;
	padding-top: 20px;
	border-top: 1px solid rgba(0,0,0,.08);
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 6px;
	align-items: start;
	font-size: 100%;
	font-weight: 900;
}
.kb-simple .gift .gift-faq dt::before{
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  font-size: 90%;
}
.kb-simple .gift .gift-faq dd{
	margin: 0 0 5px;
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 6px;
	align-items: start;
	font-size: 100%;
	line-height: 1.85;
}
.kb-simple .gift .gift-faq dd::before{
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
  font-size: 90%;
}
.kb-simple .gift .gift-faq a{
	text-decoration: underline;
  display: block;
  width: fit-content;     /* リンク幅だけにする */
  margin-left: auto;      /* 右寄せ */
  text-align: right;
}


.kb-simple .gift .gift-faq dt,
.kb-simple .gift .gift-faq dd{
  align-items: baseline;   /* ← start から変更 */
}

.kb-simple .gift .gift-faq dt::before,
.kb-simple .gift .gift-faq dd::before{
  position: relative;
  top: .10em;              /* ← 微調整（0〜.15emくらいで） */
}


/* ====== 7) sec5：年齢カード（PC4 / SP2・かわいい） ====== */
.kb-simple .kb-simple__sec--agecards .agecards{
  max-width: 900px;
  width: 100%;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.kb-simple .kb-simple__sec--agecards .agecard{
  display: block;
  text-decoration: none !important;
  border-bottom: none !important;
  color: inherit;
  background: linear-gradient(180deg, #fff 0%, #fff7ef 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px 14px;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kb-simple .kb-simple__sec--agecards .agecard::before{
  content:"";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(233,163,109,.55);
}
.kb-simple .kb-simple__sec--agecards .agecard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  border-color: rgba(233,163,109,.55);
}
.kb-simple .kb-simple__sec--agecards .agecard:active{ transform: translateY(0); }

.kb-simple .kb-simple__sec--agecards .agecard__h3{
	margin: 0 0 10px;
	font-size: 135%;
	font-weight: 900;
	letter-spacing: .04em;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	text-align: center;
}
.kb-simple .kb-simple__sec--agecards .agecard__h3::before{
  content:"";
  width: 1.15em;
  height: 1.15em;
  border-radius: 10px;
  background: rgba(155,187,212,.28);
  display: inline-block;
}
.kb-simple .kb-simple__sec--agecards .agecard__summary{
	margin: 0 0 12px;
	font-size: 92%;
	line-height: 1.2;
	color: rgba(0,0,0,.72);
	text-align: left;
}
.kb-simple .kb-simple__sec--agecards .agecard__cta{
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: 88%;
	font-weight: 700;
	color: #9b5a2f;
	background: rgba(233,163,109,.18);
	border: 1px solid rgba(233,163,109,.35);
	border-radius: 999px;
	padding: 8px 12px;
	line-height: 1.3em;
	text-align: center;
}
.kb-simple .kb-simple__sec--agecards .agecard__cta::after{
  content: "→";
  transform: translateY(.02em);
}

/* ====== 8) SP（768pxのみ）：枠内固定 ====== */
@media (max-width: 768px){
  .kb-simple__h1{
    font-size: 155%;
    margin-top: 18px;
  }

  /* 枠が飛び出やすい“箱”はまとめて内側に収める */
  .kb-simple__toc,
  .kb-simple .gift .gift-check,
  .kb-simple .gift .gift-cta,
  .kb-simple .gift .gift-faq,
  .kb-simple .kb-simple__sec--agecards .agecards{
    width: calc(100% - 4%);
    margin-left: auto;
    margin-right: auto;
  }

  /* 年齢：縦積み */
  .kb-simple .age .age-p{
    grid-template-columns: 1fr;
    row-gap: 6px;
    line-height: 1.7;
  }

  /* 年齢カード：2分割 */
  .kb-simple .kb-simple__sec--agecards .agecards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
	.kb-simple .gift .gift-check__list li{
	margin: 2px 0;
}

}

/* ===============================
  スマホで「右に寄る」原因＝olの左インデントを強制リセット
=============================== */
.kb-simple ol,
.kb-simple ul{
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important; /* iOS Safari対策 */
}

/* 対象のOL（丸数字のやつ）を確実に0に */
.kb-simple ol.kb-simple__ol.ol-strong{
	margin: 18px auto 10px !important;
	padding-left: 0 !important;
	list-style: none !important;
}