@charset "UTF-8";
/* ==========================================================================
   図解ブロック
   --------------------------------------------------------------------------
   2026-08 追加。サイト全体が文章の縦積みで、読まないと内容が分からなかったため、
   「順番」「対比」「割合」のように図で見せたほうが早いものを部品にした。

   方式について。
   図の骨格（線・丸・矢印）はインラインSVGだが、日本語のラベルはHTMLで置いている。
   SVGの <text> は折り返しができず、Noto Sans JP の字幅で崩れるため。
   こうしておくと、文字は普通に選択・検索・読み上げができ、SEO上も本文として残る。

   読み込み順は section-head.css の直後（head.php 参照）。
   ========================================================================== */

/* ==========================================================================
   pl-flow ― 手順・段階を横に並べる
   --------------------------------------------------------------------------
   段数は --pl-flow-cols で指定する（既定5）。
   900px以下では縦積みに切り替わり、つなぎ線も縦になる。
   ========================================================================== */

.pl-flow {
  display: grid;
  grid-template-columns: repeat(var(--pl-flow-cols, 5), minmax(0, 1fr));
  gap: var(--pl-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pl-flow;
}

.pl-flow-step {
  position: relative;
  counter-increment: pl-flow;
  padding-top: 56px;
}

/* つなぎ線。丸の中心（上から28px）を通るように引く。
   最後の段には引かない。 */
.pl-flow-step::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(50% + 28px);
  right: calc(-1 * var(--pl-gap) - 28px);
  height: 2px;
  background: var(--pl-line);
}

.pl-flow-step:last-child::before {
  display: none;
}

/* 番号の丸 */
.pl-flow-num {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pl-flow-accent, var(--pl-brand-ink));
  color: var(--pl-flow-accent, var(--pl-brand-ink));
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.pl-flow-body {
  text-align: center;
}

.pl-flow-title {
  margin: 0 0 0.4em;
  color: var(--pl-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.pl-flow-desc {
  margin: 0;
  color: var(--pl-muted);
  font-size: 16px;
  line-height: 1.85;
}

@media (max-width: 900px) {
  .pl-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .pl-flow-step {
    padding: 0 0 28px 76px;
    min-height: 54px;
  }

  .pl-flow-step:last-child {
    padding-bottom: 0;
  }

  /* 縦のつなぎ線に切り替える。 */
  .pl-flow-step::before {
    top: 54px;
    bottom: 0;
    left: 26px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .pl-flow-num {
    left: 0;
    transform: none;
  }

  .pl-flow-body {
    text-align: left;
    padding-top: 12px;
  }
}

/* ==========================================================================
   pl-worry ― 悩みを絵で並べるカード
   --------------------------------------------------------------------------
   アイコンは Font Awesome の 18px 相当の飾りではなく、48px の図として置く。
   小さいと結局は文字を読むことになり、図解にした意味がなくなるため。
   ========================================================================== */

.pl-worry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pl-gap);
}

.pl-worry {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--pl-line-soft);
  box-shadow: 0 6px 20px rgba(43, 51, 59, 0.06);
}

.pl-worry-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.pl-worry-icon svg {
  width: 40px;
  height: 40px;
}

.pl-worry-icon-orange {
  background: rgba(204, 68, 9, 0.10);
  color: var(--pl-action);
}

.pl-worry-icon-teal {
  background: rgba(46, 156, 208, 0.13);
  color: var(--pl-brand-ink);
}

.pl-worry-title {
  margin: 0 0 0.45em;
  color: var(--pl-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}

.pl-worry-desc {
  margin: 0;
  color: var(--pl-muted);
  font-size: 15px;
  line-height: 1.85;
}

@media (max-width: 780px) {
  .pl-worry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pl-worry {
    gap: 16px;
    padding: 20px;
  }

  .pl-worry-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  .pl-worry-icon svg {
    width: 32px;
    height: 32px;
  }
}

/* ==========================================================================
   pl-hero-figure ― ヒーローに置くイラスト
   --------------------------------------------------------------------------
   2026-08-14 に枠を外した。もとは白いカード（角丸＋枠線＋影）に入れていたが、
   中身が背景透過の線画なので、絵そのものではなく四角い箱のほうが目に付き、
   「画像を貼り付けただけ」に見えていた。ヒーローのクリーム地に線画を直接
   浮かせ、背後の色面だけで位置を示す。困りごとの pl-wm-figure と同じ考え方。

   絵の側にも余白を持たせてある（人物が四辺のどこにも接していない）。
   差し替えるときは、端で切れている絵を入れないこと。枠が無いぶん、
   切れた線がそのまま「断ち切れ」として見えてしまう。
   ========================================================================== */

.pl-hero-figure {
  position: relative;
  margin: 0;
}

/* 絵の背後に敷く色面。枠が無いと絵が地の色に溶けてしまうため、
   輪郭を持たないぼかしで「ここに絵がある」ことだけを示す。
   色はロゴのブルー。文字は乗らないので、明るい #2E9CD0 をそのまま薄めて使える。 */
.pl-hero-figure::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -6% -4% -2%;
  border-radius: 48% 52% 54% 46% / 52% 48% 52% 48%;
  background: radial-gradient(closest-side, rgba(46, 156, 208, 0.15), rgba(46, 156, 208, 0.04) 70%, transparent);
}

.pl-hero-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  /* スマホでは本文の下に回るので、幅を少し絞って主張を弱める。 */
  .pl-hero-figure {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   pl-worrymap ― 困りごとを「吹き出し＋アイコン」で見せる
   --------------------------------------------------------------------------
   もとはアイコンと箇条書きのカードで、その後イラスト＋吹き出しへ変更したが、
   2026-08-15にイラストの掲載を一時停止したため、吹き出し（読み手自身の言葉）は
   残しつつ、絵は includes/icon.php の二階調インラインSVGアイコンに戻した。

   文字はすべてHTML側に置く。生成画像に日本語を焼き込むと必ず崩れるうえ、
   直せなくなり、検索・読み上げからも消えるため。
   ========================================================================== */

.pl-worrymap {
  display: grid;
  /* 既定4列。3列など変えたいときは --pl-wm-cols を渡す（.pl-flow-cols と同じ流儀）。
     900px以下は2列、520px以下は1列に強制するので、渡した値は900pxより広い画面だけで効く。 */
  grid-template-columns: repeat(var(--pl-wm-cols, 4), minmax(0, 1fr));
  gap: var(--pl-gap);
}

.pl-wm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 吹き出し。読み手自身の言葉を入れる場所。 */
.pl-wm-bubble {
  position: relative;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid var(--pl-line);
  color: var(--pl-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
  word-break: keep-all;
}

/* 下向きのしっぽ。枠線を残すため二重の三角形で作る。 */
.pl-wm-bubble::before,
.pl-wm-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 9px solid transparent;
  border-top-color: var(--pl-line);
  transform: translateX(-50%);
}

.pl-wm-bubble::after {
  border-width: 7px;
  border-top-color: #fff;
  margin-top: -2px;
}

.pl-wm-figure {
  position: relative;
  width: 100%;
  max-width: 130px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* アイコンの背後に置く色面。イラスト時代の「絵を浮かせる色面」の考え方を踏襲。 */
.pl-wm-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 46% 54% / 52% 48% 50% 50%;
  background: var(--pl-wm-blob, rgba(46, 156, 208, 0.13));
}

.pl-wm-icon {
  position: relative;
  width: 52%;
  height: 52%;
  color: var(--pl-brand-ink);
}

.pl-wm-title {
  margin: 16px 0 6px;
  color: var(--pl-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  word-break: keep-all;
}

.pl-wm-sub {
  margin: 0;
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .pl-worrymap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .pl-worrymap {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .pl-wm-figure {
    max-width: 110px;
  }
}

/* ==========================================================================
   pl-ratio ― 割合を横棒で見せる
   --------------------------------------------------------------------------
   「聞く時間より、手を動かす時間を」のように、文章だと伝わりにくい配分を figure で示す。
   数値は --pl-ratio-a（左側の割合）で渡す。
   ========================================================================== */

.pl-ratio {
  margin: 0;
}

.pl-ratio-bar {
  display: flex;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--pl-line);
  background: #fff;
}

.pl-ratio-a,
.pl-ratio-b {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
}

.pl-ratio-a {
  flex: 0 0 var(--pl-ratio-a, 30%);
  background: var(--pl-bg-soft);
  color: var(--pl-muted);
}

.pl-ratio-b {
  flex: 1 1 auto;
  background: var(--pl-flow-accent, var(--pl-brand-ink));
  color: #fff;
}

.pl-ratio-caption {
  margin: 0.9em 0 0;
  color: var(--pl-muted);
  font-size: 14px;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 520px) {
  .pl-ratio-a,
  .pl-ratio-b {
    font-size: 12px;
  }
}