@charset "utf-8";

/* =========================================================
   基礎知識（learn/basic-info.html）
   トップページにあった「基礎知識」セクションを移設したもの
   ========================================================= */

/* ---------- 白カード ---------- */
.l-card {
  width: 100%;
  max-width: var(--w-content);
  margin: 2.3125rem auto 0;
  background: #fff;
  border-radius: 1.25rem;
}
.l-card__inner { padding-inline: 7.5rem; }   /* 120px */
.l-card--main { overflow: hidden; }

.p-town { margin-top: 6.25rem; }   /* デザイン: 最後のバナー下端から 100px */
.p-town img { display: block; width: 100%; }
.p-basic-page .p-cta-split { margin-top: 3.75rem; }

/* ---------- ヒーロー（リード文なし・タイトルのみ） ----------
   デザインにあるリード文（15px + 上 12px ≒ 40px）を省いた分を上下に 20px ずつ振り分け、
   ヒーローの高さはそのままタイトルを上下中央に置く。
   イラストは __inner 上端基準なので、下がった 20px ぶん top を戻してデザイン位置を保つ */
.p-hero-lower--basic { padding: 5.75em 0 calc(3.125em + var(--wave-h)); }
.p-hero-lower--basic .p-hero-lower__deco { top: -2.625em; }   /* デザイン y=140 */
.p-hero-lower--basic .p-hero-lower__img  { top: -4.75em; }    /* デザイン y=106 */

/* =========================================================
   基礎知識
   ========================================================= */
.p-kiso { padding-top: 5rem; }   /* デザイン: カード上端 → 見出し 80px */

.p-kiso__lead {
  margin-top: 4rem;   /* デザイン: 見出し → リード 110px（トップ掲載時より 20px 広い） */
  font-size: 1.125rem;
  text-align: center;
}

.p-kiso__cols {
  gap: 1.75rem;
  margin-top: 2.25rem;
}
.p-kiso__fig { position: relative; flex: 0 0 16.75rem; }   /* 268px */
.p-kiso__fig > img { width: 100%; }
.p-kiso__text { flex: 1 1 auto; margin-top: 1.4375rem; }   /* デザイン: 本文はイラスト上端より 23px 下 */
.p-kiso__text p + p { margin-top: 1.875rem; }

/* 吹き出し（デザイン: 203×144 / イラスト左上から -38, +322） */
.p-kiso__balloon {
  position: absolute;
  top: 20.125rem;       /* 322px */
  left: -2.375rem;      /* -38px */
  width: 12.6875rem;    /* 203px */
  height: 9rem;         /* 144px */
  margin: 0;
  padding: 1.1875rem 1.125rem 0;
  background-image: -webkit-image-set(url("../img/basic-info/img-balloon.png") 1x, url("../img/basic-info/img-balloon@2x.png") 2x);
  background-image: image-set(url("../img/basic-info/img-balloon.png") 1x, url("../img/basic-info/img-balloon@2x.png") 2x);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  font-size: .75rem;    /* 12px */
  font-weight: 700;
  line-height: 1.5;     /* 18px */
  text-align: center;
}

.p-kiso__bnr { margin-top: 2.25rem; }
/* リンク領域をバナー画像ぴったりに。幅は a 側で決め、img は a いっぱいに広げる
   （img に % 幅を持たせたまま a を inline-block にすると幅が決まらない） */
.p-kiso__bnr a {
  display: block;
  width: 30rem;       /* 480px */
  max-width: 100%;
  margin-inline: auto;
}
.p-kiso__bnr img { width: 100%; border-radius: .9375rem; }   /* 角丸15px */
.p-kiso__bnrnote { font-size: .75rem;    /* 12px */ }

.p-kiso__block { margin-top: 4.8125rem; }
.p-kiso__heading {
  gap: .75rem;
  font-size: 1.25rem;   /* 20px */
  letter-spacing: .04em;
  color: #000;
}
.p-kiso__heading::before {
  content: "";
  flex: 0 0 auto;
  width: .8125rem;
  height: .8125rem;
  background: var(--c-pink);
  transform: translateY(-.0625rem);
}
.p-kiso__body { margin-top: 1.5rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-card { max-width: min(var(--w-content), calc(100% - 2.5rem)); }   /* 左右 20px を空けたまま中央寄せ */
  .l-card__inner { padding-inline: 3.75rem; }
}

@media screen and (max-width: 991px) {
  .l-card__inner { padding-inline: 2.5rem; }
  .p-kiso { padding-top: 3.5rem; }
  .p-kiso__lead { margin-top: 2.75rem; }

  .p-kiso__fig { flex: 0 0 auto; max-width: 16.75rem; }
  .p-kiso__text { width: 100%; margin-top: 1.5rem; }

  .p-kiso__balloon { position: static; margin: 1.375rem auto 0; }
  .p-kiso__block { margin-top: 4rem; }
  .p-town { margin-top: 4rem; }
}

@media screen and (max-width: 767px) {
  /* ヒーロー（以前の explore/support.html と同じ女性イラスト・同じ調整）
     リード文（2 行 ≒ 60px）を省いた分を上下に 30px ずつ振り分け、高さとイラスト位置は据え置く */
  .p-hero-lower--basic { padding: 2.4rem 0 calc(1.5rem + var(--wave-h)); }
  .p-hero-lower--basic .p-hero-lower__img { top: -0.8rem; width: 4rem; }
  .p-hero-lower--basic .p-hero-lower__inner { padding-left: 1.25rem; }

  .l-card { max-width: calc(100% - 1.875rem); border-radius: .875rem; }
  .l-card__inner { padding-inline: 1.25rem; }
  .p-town { margin-top: 3rem; }
}