@charset "utf-8";
/* ====================================================
共通（このページ内）
==================================================== */
.about {
  --arc: 166px; /* セクション上辺の弧の深さ */
}
.about .is-green {
  color: #4bb23d;
}
.about .is-pink {
  color: #f25f95;
}
/* セクション見出し（2サイズ混在） */
.about .sec-ttl {
  font-size: var(--fs34);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.08em;
}
.about .sec-ttl span {
  font-size: var(--fs47);
}
/* 特長ラベル（吹き出し）：緑が基本、特長1はピンク */
.about .sec-cat {
  position: relative;
  display: table;
  min-width: 340px;
  margin: 0 auto;
  padding: 0 30px;
  border-radius: 33px;
  background-color: #4bb23d;
  font-size: var(--fs20);
  font-weight: 700;
  line-height: 66px;
  text-align: center;
  letter-spacing: 0.1em;
  color: #fff;
}
.about .sec-cat::after {
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 0;
  height: 0;
  border-width: 12px 9px 0;
  border-style: solid;
  border-color: #4bb23d transparent transparent;
  content: "";
  transform: translateX(-50%);
}
/* 特長1ラベルはピンク */
.contents-area.support-area .sec-cat {
  background-color: #f25f95;
}
.contents-area.support-area .sec-cat::after {
  border-top-color: #f25f95;
}

/* ====================================================
イントロ .intro-area
==================================================== */
.contents-area.intro-area .intro-wrap {
  position: relative;
  max-width: 1366px;
  margin: 0 auto;
  min-height: calc(76px + min(62.95754vw, 860px));
  padding-top: 76px;
}
/* キャッチ */
.contents-area.intro-area .intro-catch {
  font-weight: 700;
  text-align: center;
}
.contents-area.intro-area .intro-catch > span {
  display: block;
}
.contents-area.intro-area .intro-catch .intro-catch-sub {
  font-size: var(--fs36);
  line-height: 1.6;
  letter-spacing: 0.08em;
}
.contents-area.intro-area .intro-catch .intro-catch-main {
  margin: 4px 0 -2px;
  font-size: var(--fs36);
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.contents-area.intro-area .intro-catch .intro-catch-main span {
  margin: 0 0.12em;
  font-size: clamp(4.4rem, 4.245974vw, 5.8rem);
}
/* 本文 */
.contents-area.intro-area .intro-txt {
  margin-top: 56px;
  font-size: var(--fs16);
  font-weight: 700;
  line-height: 2.375;
  text-align: center;
  letter-spacing: 0.15em;
}
.contents-area.intro-area .intro-txt p + p {
  margin-top: 2.375em;
}
/* 写真 */
.contents-area.intro-area .intro-photo {
  position: absolute;
  overflow: hidden;
  border-radius: 40px;
}
.contents-area.intro-area .intro-photo img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.contents-area.intro-area .intro-photo.photo01 {
  top: calc(76px + min(1.317716vw, 18px));
  left: 0;
  width: min(25.768668vw, 352px);
  border-radius: 0 40px 40px 0;

  aspect-ratio: 352 / 350;
}
.contents-area.intro-area .intro-photo.photo02 {
  top: calc(76px + min(30.527086vw, 417px));
  left: min(11.493411vw, 157px);
  width: min(16.544656vw, 226px);

  aspect-ratio: 226 / 183;
}
.contents-area.intro-area .intro-photo.photo03 {
  top: calc(76px + min(47.584187vw, 650px));
  left: min(6.076135vw, 83px);
  width: min(19.692533vw, 269px);

  aspect-ratio: 269 / 200;
}
.contents-area.intro-area .intro-photo.photo04 {
  top: calc(76px + min(10.761347vw, 147px));
  right: 0;
  width: min(23.206442vw, 317px);
  border-radius: 40px 0 0 40px;

  aspect-ratio: 317 / 283;
}
.contents-area.intro-area .intro-photo.photo05 {
  top: calc(76px + min(37.774524vw, 516px));
  right: min(8.491947vw, 116px);
  width: min(18.887262vw, 258px);

  aspect-ratio: 258 / 219;
}

/* 1366pxより広い画面：写真が画面端から離れるので四隅とも角丸に */
@media screen and (min-width: 1367px) {
  .contents-area.intro-area .intro-photo.photo01,
  .contents-area.intro-area .intro-photo.photo04 {
    border-radius: 40px;
  }
}

/* ====================================================
働く保護者の徹底的なサポート .support-area
==================================================== */
.contents-area.support-area {
  padding: 66px 0 125px;
  background: linear-gradient(to bottom, transparent var(--arc), #f4f2f0 var(--arc));
}
/* 上辺の弧 */
.contents-area.support-area::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: var(--arc);
  background-color: #f4f2f0;
  content: "";

  clip-path: ellipse(75% 392% at 50% 392%);
}
.contents-area.support-area .sec-ttl {
  margin: 30px 0 70px;
}
.contents-area.support-area .support-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1078px;
  margin: 0 auto;
  padding-top: 26px;

  gap: 72px 56px;
}
.contents-area.support-area .support-box {
  position: relative;
  padding: 42px min(66px, 4.831625vw) 38px;
  border-radius: 40px;
  background-color: #fff;
}
.contents-area.support-area .support-box .support-cat {
  position: absolute;
  top: -26px;
  left: 50%;
  min-width: 245px;
  padding: 0 24px;
  border-radius: 26px;
  background-color: #fc89b3;
  font-size: var(--fs20);
  font-weight: 700;
  line-height: 52px;
  text-align: center;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #fff;
  transform: translateX(-50%);
}
.contents-area.support-area .support-box .support-ttl {
  font-size: var(--fs28);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.02em;
}
.contents-area.support-area .support-box .support-txt {
  margin-top: 16px;
  font-size: var(--fs15);
  line-height: 1.9;
  letter-spacing: 0.08em;
}
.contents-area.support-area .support-box .support-img {
  overflow: hidden;
  margin-top: 30px;
  border-radius: 30px;

  aspect-ratio: 380 / 211;
}
.contents-area.support-area .support-box .support-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.contents-area.support-area .support-box:nth-child(2) .support-img img {
  object-position: right;
}
.contents-area.support-area .support-box:nth-child(5) .support-img img {
  object-position: right;
  transform: scale(1.1);
}

/* ====================================================
豊富な体験 .exp-area
==================================================== */
.contents-area.exp-area {
  padding: 66px 0 80px;
  background: linear-gradient(to bottom, #f4f2f0 var(--arc), #fff var(--arc));
}
/* 上辺の弧（白が灰色に食い込む） */
.contents-area.exp-area::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: var(--arc);
  background-color: #fff;
  content: "";

  clip-path: ellipse(75% 392% at 50% 392%);
}
.contents-area.exp-area .sec-ttl {
  margin: 30px 0 45px;
}
/* 体験ブロック */
.contents-area.exp-area .exp-list {
  max-width: 1134px;
  margin: 0 auto;
}
.contents-area.exp-area .exp-box {
  position: relative;
  display: flow-root; /* .exp-body の margin-top が外へ相殺されるのを防ぐ */
}
.contents-area.exp-area .exp-box + .exp-box {
  margin-top: 60px;
}
.contents-area.exp-area .exp-box .exp-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  width: 40.299824%;
  border-radius: 40px;

  aspect-ratio: 457 / 303;
}
.contents-area.exp-area .exp-box.is-reverse .exp-img {
  right: 0;
  left: auto;
}
.contents-area.exp-area .exp-box .exp-img img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.contents-area.exp-area .exp-box .exp-body {
  position: relative;
  min-height: 318px;
  margin: 40px 8.289242% 0 9.082892%;
  padding: 50px 80px 50px 37.830688%;
  border-radius: 50px;
  background-color: #f7f7f7;
}
.contents-area.exp-area .exp-box.is-reverse .exp-body {
  padding: 50px 38.536155% 50px 75px;
}
.contents-area.exp-area .exp-box .exp-cat {
  position: absolute;
  top: -25px;
  right: 45px;
  min-width: 243px;
  padding: 0 24px;
  border-radius: 25px;
  background-color: #4bb23d;
  font-size: var(--fs18);
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #fff;
}
.contents-area.exp-area .exp-box.is-reverse .exp-cat {
  right: auto;
  left: 45px;
}
.contents-area.exp-area .exp-box .exp-ttl {
  font-size: var(--fs28);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.contents-area.exp-area .exp-box .exp-txt {
  margin-top: 20px;
  font-size: var(--fs15);
  line-height: 1.9;
  letter-spacing: 0.08em;
}
.contents-area.exp-area .exp-btn {
  margin-top: 40px;
}

/* ====================================================
スタッフより .staff-area
==================================================== */
.contents-area.staff-area {
  padding: 0 0 120px;
}
.contents-area.staff-area .staff-box {
  position: relative;
  max-width: 1055px;
  margin: 0 auto;
  padding: 55px 0 58px;
  border-radius: 60px;
  background-color: #ffe552;
}
.contents-area.staff-area .staff-ttl {
  font-size: var(--fs26);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.15em;
  color: #f08300;

  paint-order: stroke fill;
  -webkit-text-stroke: 6px #fff;
}
.contents-area.staff-area .staff-body {
  width: min(624px, calc(100% - min(35.7vw, 488px) + 55px));
  margin: 40px auto 0;
}
.contents-area.staff-area .staff-txt {
  position: relative;
  padding: 25px 70px;
  border-radius: 70px;
  background-color: #fff;
  font-size: var(--fs15);
  line-height: 1.9;
  letter-spacing: 0.08em;
}
.contents-area.staff-area .staff-txt + .staff-txt {
  margin-top: 25px;
}
/* 吹き出しのしっぽ：1つ目は左（女性）、2つ目は右（男性） */
.contents-area.staff-area .staff-txt::before {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
  transform: translateY(-50%);
}
.contents-area.staff-area .staff-txt:nth-child(1)::before {
  left: -18px;
  border-width: 10px 22px 10px 0;
  border-color: transparent #fff transparent transparent;
}
.contents-area.staff-area .staff-txt:nth-child(2)::before {
  right: -18px;
  border-width: 10px 0 10px 22px;
  border-color: transparent transparent transparent #fff;
}
.contents-area.staff-area .staff-img {
  position: absolute;
  bottom: 0;
}
.contents-area.staff-area .staff-img.is-left {
  left: -17px;
  width: min(235px, 17.203514vw);
}
.contents-area.staff-area .staff-img.is-right {
  right: -38px;
  width: min(253px, 18.52123vw);
}

/* ====================================================
TAB
==================================================== */
@media screen and (max-width: 1024px) {
  .about {
    --arc: 120px;
  }
  .contents-area.intro-area .intro-catch .intro-catch-sub {
    letter-spacing: 0.02em;
  }
  .contents-area.intro-area .intro-txt {
    letter-spacing: 0.08em;
  }
  .contents-area.intro-area .intro-photo,
  .contents-area.intro-area .intro-photo.photo01,
  .contents-area.intro-area .intro-photo.photo04 {
    border-radius: 30px;
  }
  .contents-area.intro-area .intro-photo.photo01 {
    border-radius: 0 30px 30px 0;
  }
  .contents-area.intro-area .intro-photo.photo04 {
    border-radius: 30px 0 0 30px;
  }
  .contents-area.support-area {
    padding-bottom: 100px;
  }
  .contents-area.support-area .support-list {
    gap: 70px 30px;
  }
  .contents-area.support-area .support-box .support-cat {
    min-width: 200px;
  }
  .contents-area.support-area .support-box .support-img {
    border-radius: 20px;
  }
  .contents-area.exp-area .exp-box + .exp-box {
    margin-top: 45px;
  }
  .contents-area.exp-area .exp-box .exp-img {
    border-radius: 30px;
  }
  .contents-area.exp-area .exp-box .exp-body {
    min-height: 0;
    padding: 50px 40px 40px 37.830688%;
    border-radius: 40px;
  }
  .contents-area.exp-area .exp-box.is-reverse .exp-body {
    padding: 50px 38.536155% 40px 40px;
  }
  .contents-area.exp-area .exp-box .exp-cat {
    right: 30px;
    min-width: 0;
  }
  .contents-area.exp-area .exp-box.is-reverse .exp-cat {
    left: 30px;
  }
  .contents-area.staff-area .staff-txt {
    padding: 22px 40px;
  }
}

/* ====================================================
SP（375カンプ基準）
==================================================== */
@media screen and (max-width: 767px) {
  .about {
    --arc: 44px;
  }
  .about .sec-ttl {
    font-size: var(--fs24);
    line-height: 1.47;
    letter-spacing: 0.05em;
  }
  .about .sec-ttl span {
    font-size: var(--fs30);
  }
  .about .sec-cat {
    min-width: 0;
    padding: 0 22px;
    border-radius: 23px;
    font-size: var(--fs19);
    line-height: 45px;
  }
  .about .sec-cat::after {
    bottom: -8px;
    border-width: 9px 7px 0;
  }

  /* intro-area：グリッドに写真を重ねて配置 */
  .contents-area.intro-area .intro-wrap {
    display: grid;
    grid-template-columns: 100%;
    min-height: 0;
    padding: 15px 0 30px;
    overflow-x: clip;
  }
  .contents-area.intro-area .intro-wrap > .med-inner,
  .contents-area.intro-area .intro-photo-list {
    display: contents;
  }
  .contents-area.intro-area .intro-catch {
    grid-area: 1 / 1;
    padding: 0 9.066667vw;
    text-align: left;
  }
  .contents-area.intro-area .intro-catch .intro-catch-sub {
    font-size: var(--fs20);
    line-height: 1.5;
    letter-spacing: 0.02em;
  }
  .contents-area.intro-area .intro-catch .intro-catch-main {
    margin: 22px 0 0;
    font-size: var(--fs25);
    line-height: min(12vw, 4.5rem);
    letter-spacing: 0.02em;
  }
  .contents-area.intro-area .intro-catch .intro-catch-main span {
    margin: 0 0.2em 0 0;
    font-size: var(--fs40);
    line-height: 1;
  }
  .contents-area.intro-area .intro-catch .intro-catch-sub:last-child {
    margin-top: 10px;
    font-size: var(--fs25);
  }
  .contents-area.intro-area .intro-txt {
    grid-area: 2 / 1;
    margin-top: 36px;
    padding: 0 9.066667vw;
    font-size: var(--fs14);
    font-weight: 500;
    line-height: 2;
    text-align: left;
    letter-spacing: 0.02em;
  }
  /* 1段落目は右の写真（photo04）を避けて折り返す */
  .contents-area.intro-area .intro-txt p:first-child {
    padding-right: min(26.933333vw, 129px);
  }
  .contents-area.intro-area .intro-txt p + p {
    margin-top: 1.5em;
  }
  .contents-area.intro-area .intro-photo,
  .contents-area.intro-area .intro-photo.photo01,
  .contents-area.intro-area .intro-photo.photo02,
  .contents-area.intro-area .intro-photo.photo03,
  .contents-area.intro-area .intro-photo.photo04,
  .contents-area.intro-area .intro-photo.photo05 {
    position: static;
    align-self: start;
    border-radius: 15px;
  }
  .contents-area.intro-area .intro-photo.photo01 {
    grid-area: 1 / 1;
    justify-self: end;
    width: calc(min(40.8vw, 196px) + 30px);
    margin-top: 56px;
    margin-right: -15px;
    border-radius: 15px;

    aspect-ratio: 183 / 140;
  }
  .contents-area.intro-area .intro-photo.photo04 {
    grid-area: 2 / 1;
    justify-self: end;
    width: calc(min(26.933333vw, 129px) + 30px);
    margin-right: -15px;
    margin-top: 53px;
    border-radius: 15px;

    aspect-ratio: 131 / 90;
  }
  .contents-area.intro-area .intro-photo.photo02 {
    grid-area: 3 / 1;
    justify-self: end;
    width: min(38vw, 148px);
    margin: 20px 3vw 0 0;

    aspect-ratio: 116 / 97;
  }
  .contents-area.intro-area .intro-photo.photo03 {
    grid-area: 3 / 1;
    justify-self: start;
    width: min(44vw, 170px);
    margin: min(12vw, 59px) 0 0 3vw;

    aspect-ratio: 122 / 91;
  }
  .contents-area.intro-area .intro-photo.photo05 {
    grid-area: 3 / 1;
    justify-self: center;
    width: min(35vw, 120px);
    margin-top: min(26vw, 100px);
    margin-left: 10vw;
    aspect-ratio: 90 / 87;
  }

  /* support-area：画像左・テキスト右 */
  .contents-area.support-area {
    padding: calc(var(--arc) + 13px) 0 68px;
  }
  .contents-area.support-area .sec-ttl {
    margin: 18px 0 60px;
  }
  .contents-area.support-area .support-list {
    grid-template-columns: 1fr;
    padding-top: 0;

    gap: 28px;
  }
  .contents-area.support-area .support-box {
    display: grid;
    align-items: start;
    grid-template-columns: min(26.666667vw, 128px) 1fr;
    padding: 26px 18px 17px 16px;
    border-radius: 20px;

    column-gap: min(5.333333vw, 26px);
  }
  .contents-area.support-area .support-box .support-head {
    grid-column: 1 / -1;
    margin-bottom: 17px;
  }
  .contents-area.support-area .support-box .support-cat {
    top: -13px;
    min-width: 0;
    padding: 0 16px;
    border-radius: 13px;
    font-size: var(--fs13);
    line-height: 26px;
  }
  .contents-area.support-area .support-box .support-ttl {
    font-size: var(--fs18);
    letter-spacing: 0.05em;
  }
  .contents-area.support-area .support-box .support-txt {
    grid-area: 2 / 2;
    margin-top: -2px;
    font-size: var(--fs14);
    line-height: 1.65;
    letter-spacing: 0.02em;
  }
  .contents-area.support-area .support-box .support-img {
    grid-area: 2 / 1;
    margin-top: 0;
    border-radius: 15px;

    aspect-ratio: 1 / 1;
  }

  /* exp-area：灰色の箱の中に 画像→ラベル→見出し→本文 */
  .contents-area.exp-area {
    padding: calc(var(--arc) + 10px) 0 67px;
  }
  .contents-area.exp-area .sec-ttl {
    margin: 18px 0 40px;
  }
  .contents-area.exp-area .exp-box {
    padding: 17px 18px 21px;
    border-radius: 20px;
    background-color: #f7f7f7;
  }
  .contents-area.exp-area .exp-box + .exp-box {
    margin-top: 30px;
  }
  .contents-area.exp-area .exp-box .exp-img,
  .contents-area.exp-area .exp-box.is-reverse .exp-img {
    position: relative;
    width: 77.210884%;
    margin: 0 auto;
    border-radius: 15px;
  }
  .contents-area.exp-area .exp-box .exp-body,
  .contents-area.exp-area .exp-box.is-reverse .exp-body {
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }
  .contents-area.exp-area .exp-box .exp-cat,
  .contents-area.exp-area .exp-box.is-reverse .exp-cat {
    position: static;
    display: table;
    min-width: 0;
    margin: 16px auto 8px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: var(--fs15);
    line-height: 27px;
    letter-spacing: 0.1em;
  }
  .contents-area.exp-area .exp-box .exp-ttl {
    font-size: var(--fs19);
    text-align: center;
    letter-spacing: 0.04em;
  }
  .contents-area.exp-area .exp-box .exp-txt {
    margin-top: 16px;
    font-size: var(--fs15);
    line-height: 1.53;
    letter-spacing: 0.01em;
  }
  .contents-area.exp-area .exp-btn {
    margin-top: 41px;
  }
  .contents-area.exp-area .exp-btn a {
    width: 77.333333vw;
    max-width: 290px;
    height: 60px;
    padding: 0 60px 0 32px;
  }
  .contents-area.exp-area .exp-btn a::before {
    right: 25px;
  }

  /* staff-area：吹き出し2つの下に人物、人物は箱の下へはみ出す */
  .contents-area.staff-area {
    --person-w: min(40.266667vw, 193px); /* 女性の幅（男性もほぼ同幅） */
    --person-over: min(22.4vw, 108px); /* 箱の下へのはみ出し量 */

    padding-bottom: calc(var(--person-over) + 36px);
  }
  .contents-area.staff-area .staff-box {
    margin: 0 -2.8vw;
    /* 下余白＝人物の箱内に収まる高さ − 吹き出しに重なる31px */
    padding: 27px 0 calc(var(--person-w) * 164 / 151 - var(--person-over) - 31px);
    border-radius: 40px;
  }
  .contents-area.staff-area .staff-ttl {
    font-size: var(--fs25);
    letter-spacing: 0.06em;

    -webkit-text-stroke: 5px #fff;
  }
  .contents-area.staff-area .staff-body {
    width: auto;
    margin: 18px 0 0;
    padding: 0 7.066667vw;
  }
  .contents-area.staff-area .staff-txt {
    border-radius: 25px;
    font-size: var(--fs14);
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .contents-area.staff-area .staff-txt:nth-child(1) {
    width: 73.333333vw;
    padding: 19px 6.933333vw 14px 8.266667vw;
  }
  .contents-area.staff-area .staff-txt:nth-child(2) {
    width: 65.866667vw;
    margin: 12px 0 0 auto;
    padding: 19px 5.333333vw 19px 6.4vw;
  }
  /* しっぽは下向き：1つ目は左寄り、2つ目は右寄り */
  .contents-area.staff-area .staff-txt::before,
  .contents-area.staff-area .staff-txt:nth-child(1)::before,
  .contents-area.staff-area .staff-txt:nth-child(2)::before {
    top: 100%;
    margin-top: -1px;
    border-color: #fff transparent transparent;
    transform: none;
  }
  .contents-area.staff-area .staff-txt:nth-child(1)::before {
    right: auto;
    left: 8.266667vw;
    border-width: 11px 24px 0 0;
  }
  .contents-area.staff-area .staff-txt:nth-child(2)::before {
    right: 29.333333vw;
    left: auto;
    border-width: 11px 0 0 22px;
  }
  .contents-area.staff-area .staff-img {
    bottom: calc(var(--person-over) * -1);
    overflow: hidden;
  }
  .contents-area.staff-area .staff-img img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: top;
  }
  .contents-area.staff-area .staff-img.is-left {
    left: -3.333333vw;
    width: var(--person-w);

    aspect-ratio: 151 / 164;
  }
  .contents-area.staff-area .staff-img.is-right {
    right: -2vw;
    width: calc(var(--person-w) * 150 / 151);

    aspect-ratio: 150 / 166;
  }
}