@charset "utf-8";
/**
 * youji-pre 追加セクション
 * .c-zoom-wrapper の中に置くため、数値は 750px 基準（スマホ 375px のときに半分の大きさで表示される）
 */

/* ========================================
 * 1文字ずつ表示するひとこと（心配の声・安心の声）
 * ======================================== */
.l-sect-worry__text .ch,
.l-sect-relief__text .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.7em);
}
.l-sect-worry__text.is-typing .ch,
.l-sect-relief__text.is-typing .ch {
  opacity: 1;
  transform: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 60ms);
}

/* ========================================
 * 心配の声：白い帯（下が丸くカーブ）に、お母さんの悩むひとことと写真
 * ======================================== */
.l-sect-worry {
  position: relative;
  z-index: 3;
  padding: 0;
  background: #fdf8f1;
  clip-path: inset(0 0 -520px 0); /* 左右ははみ出さず、下にはお母さん・矢印を出す */
}
.l-sect-worry__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: 52px 40px 68px;
  background: #fff;
  border-radius: 0 0 50% 50% / 0 0 92px 92px;
  box-shadow: 0 12px 24px -16px rgba(90, 60, 30, .08);
}
.l-sect-worry__text {
  position: relative;
  z-index: 1;
  margin: 0 0 0 28px;
  font-family: var(--font-family-maru-bold);
  font-weight: var(--font-weight-bold);
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #3d2016;
  white-space: nowrap;
}
.l-sect-worry__mother {
  position: absolute;
  z-index: 2;
  right: -76px;
  bottom: -128px;
  width: 392px;
  max-width: none;
  height: auto;
  scale: -1 1;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
  opacity: 0;
  transform: translateY(68px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.l-sect-worry__guru {
  position: absolute;
  z-index: 3;
  right: 184px;
  top: 68px;
  width: 76px;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease .5s, transform .7s cubic-bezier(.22, 1, .36, 1) .5s;
}
.l-sect-worry.is-in .l-sect-worry__mother,
.l-sect-worry.is-in .l-sect-worry__guru {
  opacity: 1;
  transform: none;
}
.l-sect-worry__arrow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -124px;
  translate: -50% 0;
  line-height: 0;
}
.l-sect-worry__arrow svg {
  display: block;
  width: 88px;
  height: 60px;
}
.l-sect-worry__chev {
  opacity: 0;
}
.l-sect-worry.is-done .l-sect-worry__chev {
  animation: sect-worry-chev .7s ease-out both;
}
.l-sect-worry.is-done .l-sect-worry__chev:nth-child(2) {
  animation-delay: .25s;
}
.l-sect-worry.is-done .l-sect-worry__chev:nth-child(3) {
  animation-delay: .5s;
}
@keyframes sect-worry-chev {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ========================================
 * 安心の声（中締め）：だ円の吹き出しに、お母さんのひとこと。右下に写真
 * ======================================== */
.l-sect-relief {
  position: relative;
  padding: 0 0 72px;
}
.l-sect-relief__inner {
  --w: 300px;  /* 写真の幅 */
  --bw: 518px; /* 吹き出しの幅 */
  --x: calc((100% - var(--bw) - var(--w) * .47) / 2); /* 吹き出し＋写真をまとめて中央に */
  position: relative;
  min-height: calc(var(--w) * .5 + 220px);
  background: linear-gradient(to bottom, #fff 0, #fdf8f1 180px, #fbf1e4 100%);
}
.l-sect-relief__text {
  position: absolute;
  z-index: 2;
  left: var(--x);
  bottom: calc(var(--w) * .5 - 20px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--bw);
  aspect-ratio: 224 / 83.38;
  margin: 0;
  padding: 0 8% 8px 2%;
  background: url("../images/sect-relief_bubble.svg?20261028") center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 24px rgba(120, 80, 40, .12));
  font-family: var(--font-family-maru-bold);
  font-weight: var(--font-weight-bold);
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: .02em;
  color: #4a3a34;
  text-align: center;
  white-space: nowrap;
  transform-origin: 97% 92%; /* 吹き出しのしっぽから、ぽんと出る */
  scale: .2;
  opacity: 0;
  transition: scale .55s cubic-bezier(.34, 1.45, .55, 1) .55s, opacity .3s ease .55s;
}
.l-sect-relief__body {
  display: block;
}
.l-sect-relief__text b {
  display: inline-block;
  margin-top: 4px;
  padding: 0 4px;
  font-weight: inherit;
  color: #E8412F;
  background: linear-gradient(transparent 62%, #FFE3A3 62%, #FFE3A3 92%, transparent 92%) 0 0 / 0% 100% no-repeat;
  transition: background-size .5s ease;
}
.l-sect-relief__text.is-typed b {
  background-size: 100% 100%;
}
.l-sect-relief__mother {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) + var(--bw) - var(--w) * .30);
  bottom: 0;
  width: var(--w);
  max-width: none;
  height: calc(var(--w) * .95);
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0;
  translate: 0 32px;
  transition: opacity .8s ease, translate .9s cubic-bezier(.22, 1, .36, 1);
}
.l-sect-relief.is-in .l-sect-relief__text {
  scale: 1;
  opacity: 1;
}
.l-sect-relief.is-in .l-sect-relief__mother {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .l-sect-worry__text .ch,
  .l-sect-relief__text .ch,
  .l-sect-worry__mother,
  .l-sect-worry__guru,
  .l-sect-relief__text,
  .l-sect-relief__mother {
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
  }
  .l-sect-relief__text {
    scale: 1;
  }
  .l-sect-worry__chev {
    opacity: 1;
    animation: none !important;
  }
  .l-sect-relief__text b {
    background-size: 100% 100%;
  }
}

/* 2026/11/04 プレ年少・年少TOP：下の「ペンの持ち方」ブロック（z-index:11）に下矢印が隠れないように */
.l-sect-worry { z-index: 12; }

/* 2026/11/04 下にはみ出したお母さん・矢印のところで背景色がスパッと切れる → 背景色を下に延ばして白へグラデーション */
.l-sect-worry::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 100%;
  height: 170px;
  background: linear-gradient(#fdf8f1 0%, #fdf8f1 35%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* 2026-11-05 見出しの太さを「保護者さまに選ばれています」（u-font-maru-debold：DeBold／600）に合わせる。
   DeBold書体に700以上を指定すると、環境によってブラウザが疑似的に太くして太りすぎるため 600 にそろえ、疑似太字も止める */
.l-sect-worry__text, .l-sect-worry__text *,
.l-sect-relief__text, .l-sect-relief__text *,
.egc__title, .egc__title *, .egc__cap--fixed, .egc__cap--fixed *, .egc__new {
  font-family: 'MFW-PMaruAntipProN-DeBold', 'Zen Maru Gothic', sans-serif !important;
  font-weight: 600 !important;
  font-synthesis: none;
}