@charset "UTF-8";
/* ---------- COMMON  ---------- */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");
:root {
  --pink: #e59da8;
  --emerald-green: #87b9ac;
  --yellow: #fff059;
  --white: #fff;
  --black: #595757;
  --fontWR: 400;
  /*regular*/
  --fontWM: 500;
  /*medium*/
  --fontWBo: 700;
  /*bold*/
  --fontWBl: 900;
  /*black*/
}

:root {
  --content-width: 1100;
}
@media (max-width: 960px) {
  :root {
    --content-width: 480;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Zen Maru Gothic", serif;
  font-size: 62.5%;
  font-weight: var(--fontWM);
  letter-spacing: 0.5px;
  line-height: 1.7;
  color: var(--black);
  scroll-behavior: smooth;
  animation: showPage ease-in-out 0.75s forwards;
  overflow-x: clip;
}

@keyframes showPage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body.clip {
  overflow: hidden;
}

ul, dl, ol {
  margin: 0;
  padding: 0;
}

p {
  font-size: clamp(1.4rem, calc(0.548rem + 2.84vw), 2.5rem);
}

/* ---------- NAVIGATION  ---------- */
#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  transition: background ease-in-out .35s;
}
@media (max-width: 960px) {
  #header {
    background-color: var(--pink);
  }
}
#header.sticky {
  background-color: var(--pink);
}

#header > .inner {
  display: flex;
  padding: 14px 0;
}
@media (max-width: 960px) {
  #header > .inner {
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
  }
}

#header__logo {
  display: block;
  width: min(128px, 11.63%);
  height: auto;
}
@media (max-width: 960px) {
  #header__logo {
    width: 26.875%;
    height: auto;
    max-width: 258px;
    max-height: 44px;
    margin: 2%;
    z-index: 20;
  }
}
#header__logo a {
  transition: opacity ease-in-out .3s;
}
@media (hover: hover) {
  #header__logo a:hover, #header__logo a:focus-within {
    opacity: 0.7;
  }
}

ul.header__sp-btns {
  display: none;
}
@media (max-width: 960px) {
  ul.header__sp-btns {
    list-style: none;
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
    z-index: 20;
  }
  ul.header__sp-btns li {
    width: 50%;
  }
}

.header__sp-btn a {
  display: block;
  background-color: #ccc;
  border: 1px solid #fff;
  padding: 8px;
  font-size: min(2.2rem, 3.5vw);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  color: var(--black);
}
.header__sp-btn.--for-student a {
  background-color: var(--emerald-green);
  color: #fff;
}
.header__sp-btn.--for-childcare a {
  background-color: #fff47e;
}

#gnav {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}
#gnav a {
  color: var(--white);
  text-decoration: none;
}

ul.gnav__lists {
  list-style: none;
  display: flex;
  flex-direction: row;
  column-gap: min(32px, 2.9vw);
  margin-right: 32px;
  font-size: clamp(1.6rem, calc(1.29rem + 1.03vw), 2rem);
  line-height: 1;
}

.gnav__list {
  flex-shrink: 0;
}

.gnav__list a {
  position: relative;
}
.gnav__list a::after {
  content: '';
  display: block;
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: -4px;
  left: 0;
  opacity: 0;
  background-color: var(--yellow);
  transition: opacity ease 0.75s;
}
.gnav__list a.current::after {
  opacity: 1;
}
@media (hover: hover) {
  .gnav__list a:hover::after, .gnav__list a:focus-within::after {
    opacity: 1;
  }
}

ul.gnav__btns {
  list-style: none;
  display: flex;
  flex-direction: row;
  column-gap: min(24px, 2.18%);
}

.gnav__btn {
  display: block;
  transition: transform ease .45s;
  width: min(132px, 12vw);
}
.gnav__btn.--contact {
  width: min(98px, 8.9vw);
}
@media (hover: hover) {
  .gnav__btn:hover, .gnav__btn:focus-within {
    transform: scale(95%);
  }
}

button.hamburger {
  display: none;
  visibility: hidden;
}

/* phone navigation */
@media (max-width: 960px) {
  /* button */
  button.hamburger {
    display: block;
    visibility: visible;
    overflow: hidden;
    background-color: transparent;
    border: none;
    width: clamp(44px, calc(2.417rem + 1.11vw), 60px);
    height: clamp(44px, calc(2.417rem + 1.11vw), 60px);
    margin-right: 2%;
    margin-left: auto;
    padding: 0;
  }
  button.hamburger > span {
    display: block;
    background-color: #fff;
    border-radius: 8px;
    height: 4px;
    width: 60%;
    margin-inline: auto;
    transition: transform ease-in-out .3s;
  }
  button.hamburger > span:not(:last-child) {
    margin-bottom: 6px;
  }
  button.hamburger.open {
    position: relative;
    z-index: 20;
  }
  button.hamburger.open > span:first-child {
    transform: rotate(45deg);
    transform-origin: center center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
  }
  button.hamburger.open > span:nth-child(2) {
    transform: translateX(100px);
  }
  button.hamburger.open > span:last-child {
    transform: rotate(-45deg);
    transform-origin: center center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
  }

  /* phone navigation */
  #gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    background-color: var(--pink);
    padding-top: 36%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: visibility ease-in-out .3s, opacity ease-in-out .3s;
    overflow-y: auto;
  }
  #gnav ul.gnav__lists {
    width: 80%;
    flex-direction: column;
  }
  #gnav ul.gnav__lists li {
    margin-bottom: 24px;
  }
  #gnav ul.gnav__lists li:not:last-child {
    margin-bottom: 0;
  }
  #gnav ul.gnav__btns {
    display: none;
  }
  #gnav.open {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    z-index: 1;
  }
}
/* ---------- CONTAINER ---------- */
.inner {
  width: min(100%, 1100px);
  margin-inline: auto;
}
@media (max-width: 1100px) {
  .inner {
    padding-inline: min(24px, 2.18%);
  }
}

.content {
  padding: 120px 0 156px;
  position: relative;
  overflow: hidden;
}
.content > .inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .content {
    padding: 40px 0;
  }
}
.in-content {
  margin-bottom: 100px;
}
.in-content:last-child {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .in-content {
    margin-bottom: 48px;
  }
}
.bg-parts {
  position: absolute;
  pointer-events: none;
}
@media (max-width: 960px) {
  .bg-parts {
    display: none;
    visibility: hidden;
  }
}
.bg-parts.bg-bubble01 {
  top: 15%;
  left: 78.750%;
  width: 28.5%;
  height: auto;
  max-width: 314px;
  max-height: 228px;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble01 {
    top: 170%;
    left: 82%;
  }
}
.bg-parts.bg-bubble02 {
  top: 45%;
  left: 5.260%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble02 {
    top: 30%;
    left: 0%;
  }
}
.bg-parts.bg-bubble03 {
  top: 13%;
  left: 84.010%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble03 {
    top: 16%;
    left: 0%;
  }
}
.bg-parts.bg-bubble04 {
  top: 4%;
  left: 10%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble04 {
    left: 2%;
  }
}
.bg-parts.bg-bubble05 {
  top: 43%;
  left: 4.063%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble05 {
    top: 45%;
    left: 0;
  }
}
.bg-parts.bg-bubble06 {
  top: 75%;
  left: 5%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble06 {
    width: 15%;
  }
}
.bg-parts.bg-bubble07 {
  top: 87%;
  left: 78%;
}
@media (max-width: 1100px) {
  .bg-parts.bg-bubble07 {
    top: 93%;
  }
}
.bg-parts.bg-bubble08 {
  top: 5%;
  left: 80%;
}
.bg-parts.bg-bubble09 {
  top: 12%;
  left: 5%;
}
.bg-parts.bg-bubble10 {
  top: 40%;
  left: 85%;
}
.bg-parts.bg-bubble11 {
  top: 70%;
  left: 9%;
  transform: rotate(25deg);
}
.bg-parts.bg-bubble12 {
  top: 90%;
  left: 6%;
}
.bg-parts.bg-bubble01, .bg-parts.bg-bubble02, .bg-parts.bg-bubble03, .bg-parts.bg-bubble04, .bg-parts.bg-bubble05, .bg-parts.bg-bubble06, .bg-parts.bg-bubble07, .bg-parts.bg-bubble08, .bg-parts.bg-bubble09, .bg-parts.bg-bubble10, .bg-parts.bg-bubble11, .bg-parts.bg-bubble12 {
  animation: bubbleAnimated ease-in-out 3s infinite;
}

@keyframes bubbleAnimated {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
    /* 上にふわっと */
  }
  100% {
    transform: translateY(0);
  }
}
/* ---------- TOP ---------- */
#kv {
  width: 100%;
}

#kv > .inner {
  position: relative;
  z-index: 1;
  aspect-ratio: 1920 / 1020;
  min-height: 100vh;
}
@media screen and (min-width: 961px) {
  #kv > .inner {
    min-height: 1020px;
  }
}
@media (max-width: 960px) and (min-width: 481px) {
  #kv > .inner {
    aspect-ratio: 960 / 1660;
    max-height: 1660px;
  }
}
@media (max-width: 480px) and (min-height: 830px) {
  #kv > .inner {
    aspect-ratio: 480 / 830;
    min-height: 830px;
  }
}

.kv__txt.txt01 {
  position: absolute;
  top: 160px;
  right: min(40px, calc(40 / 1920 * 100vw));
  width: auto;
  height: min(586px, 57.45%);
  max-height: 586px;
  opacity: 0;
  transition: opacity ease-in 0.75s;
}
.kv__txt.txt01 picture, .kv__txt.txt01 img {
  width: auto;
  height: 100%;
}
@media (max-width: 960px) {
  .kv__txt.txt01 {
    top: 14%;
    left: 10.625%;
    width: 35.4%;
    height: auto;
    max-height: auto;
  }
}
.kv__txt.txt02 {
  position: absolute;
  top: 160px;
  left: min(54px, calc(54 / 1920 * 100vw));
  width: auto;
  height: min(522px, 51.17%);
  max-height: 522px;
  opacity: 0;
  transition: opacity ease-in 0.75s;
}
.kv__txt.txt02 picture, .kv__txt.txt02 img {
  width: auto;
  height: 100%;
}
@media (max-width: 960px) {
  .kv__txt.txt02 {
    top: 76.75%;
    left: 0;
    right: 0;
    width: 76.25%;
    height: auto;
    margin: auto;
    opacity: 0;
    transition: opacity ease-in 0.5s;
  }
}
.kv__txt.animated.txt01, .kv__txt.animated.txt02 {
  opacity: 1;
}
.kv__txt.animated.txt01 {
  transition-delay: 1.15s;
}
.kv__txt.animated.txt02 {
  transition-delay: 1.75s;
}

.girl {
  position: absolute;
  bottom: 0;
  left: 0;
  /*width: clamp(calc((470 / 480) * 100vw), calc((822 / 1920) * 100vw), 822px);
  height: auto;
  max-width: 822px;*/
  width: min(822px, 74.7%);
  height: min(845px, 82.8%);
  max-width: 822px;
  max-height: 845px;
  transform: translateY(14%);
  opacity: 0;
}
@media (max-width: 960px) {
  .girl {
    top: 20%;
    left: 0;
    right: 0;
    bottom: auto;
    width: 97.7%;
    height: auto;
    margin: auto;
    transform: translateY(0%);
  }
}
@media (max-width: 960px) {
  .girl {
    top: 18%;
  }
}
.girl.animated {
  animation: girlAnimated ease-in 0.75s forwards;
  animation-delay: 0.65s;
}
.girl img {
  display: inline;
  width: auto;
  height: 100%;
}

@keyframes girlAnimated {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.mainlogos {
  margin-bottom: 80px;
}
@media (max-width: 960px) {
  .mainlogos {
    margin-bottom: 40px;
  }
}

.mainlogo-read {
  display: block;
  width: 61%;
  max-width: 662px;
  float: right;
  opacity: 0;
}
@media (max-width: 960px) {
  .mainlogo-read {
    width: 75.83%;
    max-width: 728px;
    float: none;
    margin: 0 auto 3%;
  }
}

.mainlogo-anm {
  display: flex;
  align-items: flex-end;
  width: 98.6%;
  height: auto;
  max-width: 1085px;
  margin-bottom: 6%;
}
@media (max-width: 960px) {
  .mainlogo-anm {
    width: 95%;
    max-width: 864px;
    margin-left: auto;
    margin-right: auto;
  }
}
.mainlogo-anm > span {
  display: block;
  opacity: 0;
}

.logo-anm01 {
  margin-right: 3.2%;
}

.logo-anm02 {
  margin-right: 2.48%;
}

.logo-anm03 {
  margin-right: 3.31%;
}

.logo-anm04 {
  margin-right: 4.97%;
}

.logo-anm05 {
  margin-right: 4.79%;
}

.logo-anm06 {
  margin-right: 4.42%;
}

.logo-anm07 {
  margin-right: 2.39%;
}

.logo-last {
  margin-bottom: -1%;
}
@media (max-width: 960px) {
  .logo-last {
    display: block;
    width: 23.5%;
    height: auto;
    max-width: 226px;
    margin: auto;
  }
}

.mainlogo-sub {
  display: block;
  width: 56.6%;
  max-width: 623px;
  margin: auto;
  opacity: 0;
}
@media (max-width: 960px) {
  .mainlogo-sub {
    margin-bottom: 6%;
  }
}

/* animation */
.mainlogos.animated .mainlogo-read,
.mainlogos.animated .logo-anm01, .mainlogos.animated .logo-anm02, .mainlogos.animated .logo-anm03,
.mainlogos.animated .logo-anm04, .mainlogos.animated .logo-anm05, .mainlogos.animated .logo-anm06,
.mainlogos.animated .logo-anm07, .mainlogos.animated .logo-last, .mainlogos.animated .mainlogo-sub {
  opacity: 0;
  animation: logoAnimated ease 1s forwards;
}
.mainlogos.animated .mainlogo-read {
  animation-delay: 0s;
}
.mainlogos.animated .logo-anm01 {
  animation-delay: 0.3s;
}
.mainlogos.animated .logo-anm02 {
  animation-delay: 0.4s;
}
.mainlogos.animated .logo-anm03 {
  animation-delay: 0.5s;
}
.mainlogos.animated .logo-anm04 {
  animation-delay: 0.6s;
}
.mainlogos.animated .logo-anm05 {
  animation-delay: 0.7s;
}
.mainlogos.animated .logo-anm06 {
  animation-delay: 0.8s;
}
.mainlogos.animated .logo-anm07 {
  animation-delay: 0.9s;
}
.mainlogos.animated .logo-last {
  animation-delay: 1s;
}
.mainlogos.animated .mainlogo-sub {
  animation-delay: 1s;
}

@keyframes logoAnimated {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
ul.event-meta {
  display: flex;
  flex-wrap: wrap;
  max-width: 980px;
  margin: auto;
  list-style: none;
}
ul.event-meta li:first-child {
  width: 100%;
  margin-bottom: 6.12%;
}
ul.event-meta li:nth-child(2), ul.event-meta li:nth-child(3) {
  width: 39%;
  max-width: 430px;
}
ul.event-meta li:nth-child(3) {
  margin-left: 18%;
}

@media (max-width: 960px) {
  ul.event-meta li:nth-child(2), ul.event-meta li:nth-child(3) {
    width: 48%;
  }
  ul.event-meta li:nth-child(3) {
    margin-left: auto;
  }
}
#introduction > p {
  font-size: clamp(1.6rem, calc(1.333rem + 0.89vw), 2.4rem);
  line-height: 2;
}
@media (max-width: 480px) {
  #introduction > p:not(:last-child) {
    text-align: left;
  }
}

.introduction__ttl {
  font-size: clamp(2.5rem, calc(2rem + 1.67vw), 4rem);
}

#about {
  padding-bottom: 300px;
}

#about .ttl {
  font-size: clamp(2.5rem, calc(2rem + 1.67vw), 4rem);
}

#about .round-box {
  margin-bottom: 10%;
}

ul.btns {
  max-width: 730px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul.btns li {
  margin-bottom: 32px;
}
ul.btns li:last-child {
  margin-bottom: 0;
}

a.btn--arrow {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: clamp(8px, calc(0.333rem + 0.56vw), 16px);
  background-color: var(--white);
  border: 2px solid var(--black);
  border-radius: clamp(32px, calc(1.226rem + 2.58vw), 48px);
  font-size: clamp(2rem, calc(1.6rem + 1.33vw), 3.2rem);
  line-height: 1;
  text-decoration: none;
  color: var(--emerald-green);
  transition: transform ease .45s;
}
a.btn--arrow span {
  display: block;
  width: calc(100% - 63px);
  text-align: center;
}
@media (max-width: 960px) {
  a.btn--arrow span {
    width: calc(100% - 32px);
  }
}
a.btn--arrow::after {
  content: '';
  display: inline-block;
  background: url("../img/icon_arrow_green.webp") top left no-repeat;
  background-size: contain;
  width: clamp(39px, calc(1.276rem + 3.87vw), 63px);
  height: clamp(39px, calc(1.276rem + 3.87vw), 63px);
  margin-left: auto;
}
@media (hover: hover) {
  a.btn--arrow:hover, a.btn--arrow:focus-within {
    transform: scale(95%);
  }
}

/* ---------- FOOTER  ---------- */
#footer > .inner {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 970px;
  padding-top: clamp(24px, calc(-0.048rem + 5.16vw), 56px);
  padding-bottom: clamp(24px, calc(-0.048rem + 5.16vw), 56px);
}
@media (max-width: 960px) {
  #footer > .inner {
    flex-direction: column;
  }
}

.relax-girl {
  position: absolute;
  right: 3%;
  top: 0;
  display: block;
  width: 16.2%;
  height: auto;
  max-width: 179px;
  max-height: 263px;
  margin-top: -240px;
  transform-origin: right bottom;
  animation: relax ease-in-out 4.5s infinite;
}
@media (max-width: 960px) {
  .relax-girl {
    left: 0;
    right: 0;
    width: 28.3%;
    max-width: 136px;
    max-height: 200px;
    margin: -200px auto 0;
  }
}

@keyframes relax {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
dl.footer__contact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: 16px;
}
@media (max-width: 960px) {
  dl.footer__contact {
    flex-direction: column;
    justify-content: center;
  }
}
dl.footer__contact dt {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--black);
  font-size: clamp(1.5rem, calc(1.433rem + 0.22vw), 1.7rem);
}
@media (max-width: 960px) {
  dl.footer__contact dt {
    margin: 0 auto 16px;
  }
}
dl.footer__contact dd .company-name {
  font-size: clamp(2.1rem, calc(1.9rem + 0.67vw), 2.7rem);
  line-height: 1;
}
dl.footer__contact dd .address {
  font-size: clamp(1.5rem, calc(1.433rem + 0.22vw), 1.7rem);
  line-height: 1;
}
dl.footer__contact dd .tel {
  font-size: 2.6rem;
}
dl.footer__contact dd .tel span:first-child {
  font-size: 50%;
}

ul.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0;
}
@media (max-width: 960px) {
  ul.footer__links {
    flex-direction: row;
  }
}
ul.footer__links li {
  margin-bottom: 16px;
}
ul.footer__links li:last-child {
  margin-bottom: 0;
}
@media (max-width: 960px) {
  ul.footer__links li {
    margin: 8px !important;
  }
}
ul.footer__links li a {
  transition: opacity ease .45s;
}
@media (hover: hover) {
  ul.footer__links li a:hover, ul.footer__links li a:focus-within {
    opacity: 0.6;
  }
}

.footer__aside {
  padding: 8px;
  background-color: var(--pink);
  color: #fff;
}

.copyright {
  font-size: clamp(1.2rem, calc(1.133rem + 0.22vw), 1.4rem);
  text-align: center;
}

.flow__ttl {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: clamp(2rem, calc(1.333rem + 2.22vw), 4rem);
  line-height: 1.3;
  color: var(--white);
}
@media (max-width: 480px) {
  .flow__ttl {
    flex-direction: column;
    text-align: center;
  }
}

.flow__ttl__icon {
  display: inline-block;
  background-color: var(--white);
  padding: 4px;
  margin-right: 8px;
  font-size: 90%;
  line-height: 1;
  color: var(--emerald-green);
}
@media (max-width: 480px) {
  .flow__ttl__icon + span {
    width: 100%;
  }
}

.flow {
  border-width: clamp(5px, calc(0.208rem + 0.35vw), 10px);
  border-radius: clamp(16px, calc(0.667rem + 1.11vw), 32px);
  max-width: 1100px;
  background-color: var(--emerald-green);
  border-style: solid;
  border-color: var(--emerald-green);
}

.flow__content {
  background-color: var(--white);
  border-bottom-left-radius: clamp(16px, calc(0.833rem + 0.56vw), 24px);
  border-bottom-right-radius: clamp(16px, calc(0.833rem + 0.56vw), 24px);
  padding: 32px;
}

ol.flows .flow__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 5%;
  border: 2px solid var(--emerald-green);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  counter-increment: item;
}
ol.flows .flow__item::before {
  content: "0" counter(item);
  color: var(--emerald-green);
  font-size: clamp(4rem, calc(2.667rem + 4.44vw), 8rem);
  font-weight: 800;
  line-height: 1;
  vertical-align: top;
}
ol.flows .flow__item:last-child {
  margin-bottom: 8px;
}
ol.flows .flow__item p {
  line-height: 1.4;
}

.flow__item__ttl {
  font-size: clamp(2.2rem, calc(1.933rem + 0.89vw), 3rem);
  line-height: 1.3;
}
.flow__item__ttl + p {
  margin-top: 8px;
}

.sticky-note {
  flex-shrink: 0;
  background-color: var(--emerald-green);
  border-radius: 10px;
  padding: 24px;
  margin-left: auto;
  color: var(--white);
}
.sticky-note p {
  font-size: clamp(1.9rem, calc(1.833rem + 0.22vw), 2.1rem);
  line-height: 1.3;
}

.flow.--for-childcare {
  background-color: var(--yellow);
  border-color: var(--yellow);
}
.flow.--for-childcare .flow__ttl {
  color: var(--black);
}
.flow.--for-childcare .flow__ttl__icon {
  color: var(--black);
}
.flow.--for-childcare .sticky-note {
  background-color: #fff48f;
  color: var(--black);
}

@media (max-width: 960px) {
  ol.flows .flow__item {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  ol.flows .flow__item::before {
    width: 10%;
    margin-right: 4%;
  }
  ol.flows .flow__item div:first-child {
    width: 80%;
  }

  .sticky-note {
    border-radius: 16px;
    margin: 16px 0 0;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .flow__content {
    padding: 16px;
  }

  ol.flows .flow__item {
    padding: 16px;
    /*&::before {
      width: 100%;
    }
    div:first-child { width: 100%; }*/
  }

  .sticky-note {
    padding: 16px;
  }
}
.btn--guidance,
.btn--entry-round {
  display: block;
  width: 87%;
  height: auto;
  max-width: 657px;
  max-height: 91px;
  margin: 16px auto;
  transition: transform ease-in-out .3s;
}
@media (max-width: 960px) {
  .btn--guidance,
  .btn--entry-round {
    width: 100%;
  }
}
@media (hover: hover) {
  .btn--guidance:hover, .btn--guidance:focus-within,
  .btn--entry-round:hover,
  .btn--entry-round:focus-within {
    transform: scale(95%);
  }
}

a.link--txt {
  color: var(--emerald-green);
}

/* ---------- FAQ  ---------- */
#faq {
  padding-top: 200px;
  padding-bottom: 300px;
}
#faq .bg-parts.bg-bubble01 {
  top: 10%;
}
#faq .bg-parts.bg-bubble02 {
  top: 30%;
  left: 2%;
}
#faq .bg-parts.bg-bubble03 {
  top: 70%;
  left: 85%;
}
#faq .bg-parts.bg-bubble04 {
  top: 60%;
  left: 10%;
}
#faq .bg-parts.bg-bubble05 {
  top: 80%;
}

.faq__area {
  background-color: #fff;
  border-radius: 32px;
  padding: 5px 5px min(calc((24 / 480) * 100vw), 24px) 5px;
}

.faq__item {
  padding-inline: clamp(8px, calc(-0.5rem + 3.33vw), 56px);
}

ul.faq__tabs {
  list-style: none;
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0 0 min(7.48vw, 48px);
  padding: 0;
  font-size: clamp(2.4rem, calc(2.133rem + 0.89vw), 3.2rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
}
ul.faq__tabs li {
  width: 50%;
  background-color: #b2b2b3;
  transition: background ease-in-out .3s;
}
ul.faq__tabs li button {
  display: block;
  width: 100%;
  padding: min(3.74vw, 8px);
  background: transparent;
  border: none;
  color: var(--white);
  transition: color ease-in-out .3s;
  cursor: pointer;
}

.faq__tab.--students {
  border-top-left-radius: 28px;
}
.faq__tab.--students.current {
  background-color: var(--emerald-green);
}
.faq__tab.--students.current button {
  color: var(--white);
}
@media (hover: hover) {
  .faq__tab.--students:hover {
    background-color: var(--emerald-green);
  }
  .faq__tab.--students:hover button {
    color: var(--white);
  }
}
.faq__tab.--childcare {
  margin-left: 5px;
  border-top-right-radius: 28px;
}
.faq__tab.--childcare.current {
  background-color: #fff47e;
}
.faq__tab.--childcare.current button {
  color: var(--black);
}
@media (hover: hover) {
  .faq__tab.--childcare:hover {
    background-color: #fff47e;
  }
  .faq__tab.--childcare:hover button {
    color: var(--black);
  }
}

details.faq__details {
  padding: 6px;
  margin-bottom: 16px;
  background-color: #b7d5cd;
  border-radius: 16px;
  cursor: pointer;
}
details.faq__details .faq__content {
  display: flex;
  column-gap: 24px;
  padding: 16px;
  background-color: var(--white);
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  color: var(--black);
}
details.faq__details summary.faq__summary {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 24px;
  padding: 16px;
  position: relative;
}
details.faq__details summary.faq__summary::marker {
  display: none;
  font-size: 0;
}
details.faq__details summary.faq__summary::before, details.faq__details summary.faq__summary::after {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background-color: var(--black);
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  transition: transform ease-in-out .3s;
}
details.faq__details summary.faq__summary::after {
  transform: rotate(90deg);
}
details.faq__details summary.faq__summary > span:not(:first-child) {
  color: var(--black);
  font-size: 2.2rem;
}
details.faq__details[open] summary.faq__summary::after {
  transform: rotate(0deg);
}

.faq__txtbox p {
  font-size: clamp(1.7rem, calc(1.6rem + 0.33vw), 2rem);
}

span.faq__icon {
  display: block;
  width: 40px;
  height: 40px;
  color: transparent;
}
span.faq__icon.--q {
  background: url("../img/icon_q.webp") center center no-repeat;
  background-size: contain;
}
span.faq__icon.--a {
  background: url("../img/icon_a.webp") center center no-repeat;
  background-size: contain;
}

#forChildcare details.faq__details {
  background-color: #fcf8ce;
}

summary::-webkit-details-marker {
  display: none;
}

/* Safari */
/* ---------- UTILITY  ---------- */
.sp-only {
  display: none;
}

@media (max-width: 960px) {
  .sp-only {
    display: inline-block;
  }

  .pc-only {
    display: none;
  }
}
img {
  width: 100%;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}

/* hide */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* backgrund-color */
.bg--pink {
  background-color: var(--pink);
}

.bg--emerald-green {
  background-color: var(--emerald-green);
}

.bg--white {
  background-color: var(--white);
}

/* font-color */
.fc--white {
  color: var(--white);
}

.fc--pink {
  color: var(--pink);
}

.fc--emerald-green {
  color: var(--emerald-green);
}

.fs--small {
  font-size: 70%;
}

.fs--medium {
  font-size: clamp(1.5rem, calc(1.033rem + 1.56vw), 2.9rem);
}

.fs--large {
  font-size: clamp(1.6rem, calc(0.967rem + 2.11vw), 3.5rem);
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.txt--right {
  text-align: right;
}

.txt--center {
  text-align: center;
}

.notes {
  text-indent: -1.6rem;
  margin-left: 1.6rem;
}
.notes::before {
  content: '※';
}

/* list */
ul.list--circle {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: clamp(1.4rem, calc(1.033rem + 1.22vw), 2.5rem);
}
ul.list--circle li {
  margin-left: 1rem;
  text-indent: -1rem;
}
ul.list--circle li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  background-color: var(--black);
  border-radius: 50%;
  vertical-align: middle;
}

dl.dl-label {
  font-size: clamp(1.4rem, calc(1.033rem + 1.22vw), 2.5rem);
  margin-left: 16px;
}
dl.dl-label dt {
  margin-bottom: 8px;
  position: relative;
}
dl.dl-label dt::before {
  content: '';
  display: inline-block;
  height: 100%;
  width: 8px;
  background-color: var(--emerald-green);
  position: absolute;
  top: 0;
  left: -16px;
}

.flexbox.col2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
@media (max-width: 960px) {
  .flexbox.col2 {
    flex-direction: column;
    justify-content: flex-start;
  }
}
.flexbox.col2 .flexitem {
  width: 48%;
}
@media (max-width: 960px) {
  .flexbox.col2 .flexitem {
    width: 100%;
  }
  .flexbox.col2 .flexitem:not(:last-child) {
    margin-bottom: 4%;
  }
}

/* box */
.round-box {
  background-color: var(--white);
  border: clamp(2px, calc(0.083rem + 0.14vw), 4px) solid var(--emerald-green);
  border-radius: clamp(25px, calc(0.208rem + 4.51vw), 90px);
  padding: clamp(30px, calc(1.333rem + 1.81vw), 56px);
  font-size: clamp(1.4rem, calc(1.033rem + 1.22vw), 2.5rem);
}
.round-box.--white {
  border-color: var(--white);
}

.round-box p {
  margin-bottom: 32px;
}
.round-box p:last-child {
  margin-bottom: 0;
}

/* title */
.ttl {
  margin-bottom: 8px;
  font-size: clamp(1.6rem, calc(0.967rem + 2.11vw), 3.5rem);
  text-align: center;
}

.ttl--l-label {
  border-left: 8px solid var(--emerald-green);
  padding-left: 8px;
  margin-bottom: 16px;
  font-size: clamp(2.1rem, calc(1.967rem + 0.44vw), 2.5rem);
}

.page__ttl {
  font-size: clamp(4.2rem, calc(3.767rem + 1.44vw), 5.5rem);
  line-height: 1.3;
  margin-bottom: 16px;
}

.wrap-txt > span {
  display: inline-block;
}

@media (max-width: 480px) {
  .wrap-txt > span {
    display: inline;
  }
}
.mgb0 {
  margin-bottom: 0 !important;
}

.fadeIn {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity ease-in-out .5s, transform ease-in-out .5s;
}

.fadeIn.animated {
  opacity: 1;
  transform: translateY(0);
}

.mgbA {
  margin-bottom: 8px;
}

.mgbB {
  margin-bottom: 16px;
}

.mgbC {
  margin-bottom: 24px;
}

.mgbD {
  margin-bottom: 32px;
}

.mgbE {
  margin-bottom: 40px;
}

.mgbF {
  margin-bottom: 48px;
}

.mgbG {
  margin-bottom: 56px;
}

.mgbH {
  margin-bottom: 64px;
}

.mgbI {
  margin-bottom: 72px;
}

.mgbJ {
  margin-bottom: 80px;
}

@media (max-width: 480px) {
  .mgbA {
    margin-bottom: 1.6667%;
  }

  .mgbB {
    margin-bottom: 3.3333%;
  }

  .mgbC {
    margin-bottom: 5%;
  }

  .mgbD {
    margin-bottom: 6.6667%;
  }

  .mgbE {
    margin-bottom: 8.3333%;
  }

  .mgbF {
    margin-bottom: 10%;
  }

  .mgbG {
    margin-bottom: 11.6667%;
  }

  .mgbH {
    margin-bottom: 13.3333%;
  }

  .mgbI {
    margin-bottom: 15%;
  }

  .mgbJ {
    margin-bottom: 16.6667%;
  }
}
/* coming soon */
.comingsoon {
  text-align: center;
  font-size: 1.6rem;
  color: var(--black);
  padding: 32px;
}

.close-link {
  opacity: 0.3;
  pointer-events: none;
}

@media (hover: hover) {
  li:has(.close-link):hover,
  li:has(.close-link):focus-within,
  .close-link:hover,
  .close-link:focus-within {
    transform: scale(100%);
  }
}