/*--------------------------------------------------------------
# ページビジュアル
--------------------------------------------------------------*/
.page_visual {
  background: url(/assets/img/early_admission/page_visual.jpg) no-repeat center / cover;
}
.page_title {
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-width: 10em;
  margin: 0 auto;
  filter: drop-shadow(0 0 2px black);
}
/*--------------------------------------------------------------
# サイド
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .page_early-admission .page_content_wrap {
    background-image: url(/assets/img/common/side_flower_left.png),url(/assets/img/common/side_flower_right.png);
    background-position: top left, top right;
    background-repeat: repeat-Y;
    background-size: 6%, 7%;
  }
}
/*--------------------------------------------------------------
# イントロ
--------------------------------------------------------------*/
#early_intro {
  padding-bottom: 6rem;
  @media (min-width:768px) {
    padding-bottom: 8rem;
  }
}
@media (min-width:768px) {
  #early_intro .text {
    max-width: 40em;
    margin: 0 auto;
  }
}

/*--------------------------------------------------------------
# 満3歳児入園コンテンツ
--------------------------------------------------------------*/
.bg_wrap {
  padding: 6rem 0;
  background: url(/assets/img/common/bg_design_1.png) repeat, var(--pale-blue);
  @media (min-width:768px) {
    padding: 10rem 0;
  }
  .container {
    container-type: inline-size;
  }
  .inner {
    padding: 5cqw;
    background: #FFF;
    border-radius: 1.6rem;
    @media (min-width:768px) {
      border-radius: 6rem;
    }
  }
}
#early_about {
  padding: 0;
}
#early_about .title {
  color: #FFF;
  font-size: clamp( 1.6rem, calc( 1.4417582417582418rem + 0.43956043956043955vw ), 2rem );
  font-weight: 400;
  text-align: center;
  margin-bottom: 1.6rem;
  padding: 0.5em;
  background: #AD93E5;
  border-radius: 999rem;
}
#early_about .voice_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  counter-reset: count 0;
  justify-content: center;
  margin: 2rem 0 8rem;
  gap: 0 1.5em;
  @media (min-width:768px) {
    margin: 7rem 0 8rem;
  }

  & li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    line-height: 1.5;
    margin-top: 3rem;
    padding: 0 1.5rem;
    background: #FFF;
    border: 0.4rem solid currentColor;
    border-radius: 1.6rem;
    position: relative;
    &::before {
      display: flex;
      color: #FFF;
      content: counter(count,decimal-leading-zero);
      counter-increment: count 1;
      font-family: var(--ff-english);
      font-size: var(--fs-normal);
      justify-content: center;
      align-items: center;
      letter-spacing: 0.08em;
      width: 2.3em;
      height: 2.3em;
      padding-top: 0.1em;
      border-radius: 50%;
      position: absolute;
      top: -2em;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      @media (min-width:768px) {
        font-size: 166%;
        top: -1.5em;
      }
    }
    &:nth-child(1) {
      color: var(--accent-orange);
      &::before {
        background: var(--accent-orange);
      }
    }
    &:nth-child(2) {
      color: var(--accent-blue);
      &::before {
        background: var(--accent-blue);
      }
    }
    &:nth-child(3) {
      color: var(--accent-pink);
      &::before {
        background: var(--accent-pink);
      }
    }
  }
}
#early_about .voice_list .list_title {
  font-size: clamp( 1.6rem, calc( 1.4417582417582418rem + 0.43956043956043955vw ), 2rem );
  font-weight: 400;
  padding: 1.5em 0 0.5em;
}
#early_about .voice_list .list_text{
  color: var(--fc-base);
  padding-bottom: 1.5em;
}
#early_merit {
  padding: 0;
}
#early_merit .merit_title {
  font-size: clamp( 1.6rem, calc( 1.4417582417582418rem + 0.43956043956043955vw ), 2rem );
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-align: center;
  width: fit-content;
  margin: 0 auto;

  & span {
    background-image: linear-gradient(transparent 60%, #DAFF0B 60%);
    position: relative;
    &::before {
      display: block;
      content: "更に‼";
      color: #FFF;
      font-size: var(--fs-normal);
      padding: 0 0.5em;
      background: #F35A5A;
      rotate: -20deg;
      position: absolute;
      bottom: 82%;
      left:-3em;
    }
  }
}
#early_merit .text {
  max-width: 59rem;
  margin: 0 auto;
}
#early_guide {
  padding: 3rem 0 0;
}
#early_guide .content_block {
  max-width: 64.5rem;
  margin: 0 auto;
  padding: 4rem 2rem;
  background: var(--pale-blue);
  border-radius: 4rem;
  @media (min-width:768px) {
    padding: 4rem;
  }
}
#early_guide .guide_title {
  color: #FFF;
  font-size: var(--fs-normal);
  font-weight: 400;
  text-align: center;
  margin-bottom: 2.7rem;
  padding: 0.5em;
  background: #AD93E5;
  border-radius: 999rem;
}
#early_guide .guide_table {
  width: 100%;
  margin-bottom: 1.6rem;
  border: 0.2rem solid #D9D9D9;

  & tr:not(:last-child) {
    border-bottom: 0.2rem solid #D9D9D9;
  }
  & th {
    color: #FFF;
    font-weight: 400;
    text-align: left;
    line-height: 1.5;
    width: 23%;
    padding: 0.5em;
    background: rgba(173,147,229,0.7);
    border-left: 0.2rem solid #D9D9D9;
  }
  & td {
    line-height: 1.5;
    padding: 1em 0.5em;
    background: #FFF;
    border-left: 0.2rem solid #D9D9D9;

    & small {
      display: block;
    }
  }
}
#early_guide .table_title {
  color: #AD93E5;
  font-size: clamp( 1.6rem, calc( 1.5142857142857142rem + 0.2380952380952381vw ), 1.8rem );
  text-align: center;
  margin-bottom: 0.5em;
}
#early_guide .guide_table.monthly th {
  text-align: center;
}
#early_guide .guide_table.monthly td {
  text-align: center;
}
#early_guide .guide_table tr.total td {
  background: #EBEEF0;
  &:nth-child(2) {
    color: #FF0000;
  }
}
#early_guide .note_list {
  margin-top: 2rem;
  & li {
    display: flex;
    line-height: 1.5;
    margin-bottom: 0.5em;

    &::before {
      content: "・";
    }
    
    &.sub {
      font-size: 87.5%;
      &::before {
        content:"※";
      }
    }
  }
}
#early_guide .btn_wrap {
  min-width: auto;
  width: min(95%, 30rem);
  margin: 5.4rem auto;
}
#early_guide .line_wrap {
  width: min(95%,54.3rem);
  padding: 1em;
  margin: 0 auto;
  background: #D8E9E2;
  border-radius: 2rem;

  .btn_wrap {
    margin: 0 auto 1.3rem;

    .btn_line {
      display: flex;
      color: #FFF;
      font-size: var(--fs-block-title);
      font-weight: 700;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: min(100%, 38rem);
      margin: 0 auto;
      padding: 0.5em;
      gap: 0.5em;
      background: #06C755;
      border-radius: 0.8rem;

      &::before {
        display: inline-block;
        content: "";
        width: 1.5em;
        height: 1.5em;
        background: url(/assets/img/common/icon_line.svg) no-repeat center / contain;
      }
    }
  }
  .text {
    max-width: 38rem;
    margin: 0 auto;
  }
}
/*--------------------------------------------------------------
# 新2号認定とは
--------------------------------------------------------------*/
#early_new_2gou {
  padding-bottom: 13rem;
  background: #FFF;
  position: relative;
  z-index: 0;
  @media (min-width:768px) {
    padding-bottom: 18.4rem;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #FFF7F4;
    mask: url(/assets/img/common/bg_design_2.png);
    -webkit-mask: url(/assets/img/common/bg_design_2.png);
    z-index: -1;
  }
  .container {
    container-type: inline-size;
  }
}
#early_new_2gou .inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 5cqw;
  background: #FFF;
  border: 0.4rem solid var(--accent-pink);
  border-radius: 1.6rem;
}
#early_new_2gou .section_title {
  &::after {
    margin-bottom: 2rem;
    @media (min-width:768px) {
      margin-bottom: 5.6rem;
    }
  }
  & small {
    display: block;
    font-size: 75%;
    margin-bottom: 0.5em;
    @media (min-width:768px) {
      font-size: 60%;
    }
  }
}
#early_new_2gou .text:nth-of-type(5) {
  margin-top: 1em;
}
#early_new_2gou .btn_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-top: 5.4rem;
  gap: 0 4%;
  .btn + .btn {
    margin-top: 2.5rem;
    @media (min-width:768px) {
      margin-top: 0;
    }
  }
}