/*--------------------------------------------------------------
# ページビジュアル
--------------------------------------------------------------*/
.page_visual {
  background: url(/assets/img/guidance/page_visual.jpg) no-repeat center / cover;
}
/*--------------------------------------------------------------
# お母さんお父さんを応援しています
--------------------------------------------------------------*/
#guidance_intro {
  padding-top: 0;
  @media (min-width: 1200px) {
    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%;
  }
}
#guidance_intro .section_title {
  font-size: clamp( 1.8rem, calc( 1.2rem + 1.6666666666666667vw ), 3.2rem );

  &::after {
    display: none;
  }
}
#guidance_intro .empathy_list {
  counter-reset: count 0;
  margin: 4rem 0;
  @media (min-width:768px) {
    display: flex;
    justify-content: space-between;
    margin: 10rem 0 5rem;
    gap: 0 1em;
  }

  & li {
    display: flex;
    flex-direction: column;
    font-size: var(--fs-normal);
    font-weight: 700;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: anywhere;
    margin-bottom: 2em;
    padding: 2em 0 1em;
    background: var(--pale-yellow);
    border-radius: 1.6rem;
    position: relative;
    @media (min-width:768px) {
      font-size: var(--fs-block-title);
      line-height: 2;
      width: 30.7%;
      aspect-ratio: 307 / 240;
      margin-bottom: 0;
      padding: 0;
    }

    &::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: -1em;
      left: 50%;
      transform: translateX(-50%);
      z-index: 3;
      @media (min-width:768px) {
        font-size: 166%;
      }
    }
    &:nth-child(1) {
      color: var(--accent-orange);
      &::before {
        background: var(--accent-orange);
      }
    }
    &:nth-child(2) {
      color: #44BFDE;
      &::before {
        background: #44BFDE;
      }
    }
    &:nth-child(3) {
      color: var(--accent-pink);
      &::before {
        background: var(--accent-pink);
      }
    }
  }
}
/*--------------------------------------------------------------
# 募集要項
--------------------------------------------------------------*/
#guidance_outline {
  padding: 6rem 0 13rem;
  background: url(/assets/img/common/bg_design_1.png) repeat, var(--pale-blue);
  @media (min-width:768px) {
    padding: 8rem 0 18.4rem;
  }

  .content_block {
    background: #FFF;
    position: relative;
  }
}
#guidance_outline .outline_details {
  & summary {
    color: #FFF;
    list-style-type: none;
    text-align: center;
    width: 8em;
    position: absolute;
    bottom: 100%;

    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
      border-radius: initial;
      opacity: .5;
      position: absolute;
      top: 0;
    }
  }
  &[open] summary::before {
    display: none;
  }
}
#outline_age_three summary {
  background: var(--accent-green);
  left: 0;
  cursor: pointer;
}
#outline_middle_year summary {
  background: var(--accent-orange);
  left: 8.5em;
  cursor: pointer;
}
.details_contents .item {
  max-width: 80rem;
  margin: 0 auto;
  padding: 6rem 1.6rem;

  &:not(:last-child) {
    background: url(/assets/img/guidance/section_line.png) repeat-x left bottom / auto;
  }
}
.details_contents .block_title {
  color: var(--accent-pink);
  text-align: center;
  margin-bottom: 1em;
}
.details_contents .block_sub_title {
	font-size: 17px;
	margin-top: 1.5em;

  &::before {
    display: inline-block;
    content: "●";
    color: var(--accent-pink);
    margin-right: 0.5em;
  }
}
.details_contents .age_list {
  display: flex;
  gap: 0 2em;
  & dt {
    width: calc(100% - 6em);

    &::before {
      display: inline-block;
      content: "●";
      color: var(--accent-pink);
      margin-right: 0.5em;
    }
  }
  & dd {
    width: 5em;
    flex-shrink: 0;
  }

  + p {
    margin-top: 1em;
  }
}
.details_contents table {
  width: 100%;
  border: 0.2rem solid #D9D9D9;

  & th {
    color: #FFF;
    padding: 0.5em;
    background: var(--accent-orange);

    + th {
      border-left: 0.2rem solid #D9D9D9;
    }
  }
  & td {
    text-align: center;
    padding: 0.5em;
    border-top: 0.2rem solid #D9D9D9;

    + td {
      border-left: 0.2rem solid #D9D9D9;
    }
  }
}
.details_contents ul {
  line-height: 1.7;
  margin-top: 1em;
}
.details_contents .img_wrap {
  text-align: center;
  margin-top: 2.4rem;
}
.details_contents .btn_wrap {
  text-align: center;
  margin-top: 2.4rem;
}