/*--------------------------------------------------------------
# メインビジュアル
--------------------------------------------------------------*/
.main_visual {
  width: 95%;
  aspect-ratio: 1920 / 735;
  margin: 0 auto;
  background: url(/assets/img/home/main_visual.jpg) no-repeat right top / cover;
  border-radius: 4rem;
  position: relative;
  @media (min-width: 768px) {
    background: url(/assets/img/home/main_visual.jpg) no-repeat right top / cover;
  }

  .catch_copy {
    display: flex;
    flex-direction: column;
    color: var(--key-color);
    font-size: clamp( 1.6rem, 3vw, 5.6rem );
    justify-content: center;
    align-items: baseline;
    height: 100%;
    margin-left: 1em;
    gap: 0.5em 0;

    & span {
      line-height: 1.2;
      padding: 0 0.5em;
      background: #FFF;
      border-radius: 0.14em;
    }
  }
  .btn_wrap {
    display: flex;
    width: min(30vw, 38.7rem);
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    right: 0;
    @media (min-width:992px) {
      right: 3%;
    }

    & a {
      display: inline-block;
      width: 46%;
    }
  }
}
/*--------------------------------------------------------------
# 共通
--------------------------------------------------------------*/
.home_section_title {
  font-size: clamp( 1.8rem, calc( 0.8571428571428571rem + 2.619047619047619vw ), 4rem );
  text-align: center;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
  margin-bottom: 1em;

  &::before {
    display: block;
    content: attr(data-title);
    color: var(--accent-pink);
    font-family: var(--ff-english);
    font-size: clamp( 1.4rem, calc( 1.2285714285714285rem + 0.4761904761904762vw ), 1.8rem );
  }
}
/*--------------------------------------------------------------
# TOP
--------------------------------------------------------------*/
#home_education {
  position: relative;
  @media (min-width: 1200px) {
    background-image: url(/assets/img/home/education_bg_left.png),url(/assets/img/home/education_bg_right.png);
    background-position: center left 2%, center right 3%;
    background-repeat: no-repeat;
    background-size: 5%, 6%;
  }
}
@media (min-width:768px) {
  #home_education::before {
    content: "";
    width: min(90%,140rem);
    height: 100%;
    margin: 0 auto;
    background-image: url(/assets/img/common/illust_school.png),url(/assets/img/common/illust_tree.png);
    background-repeat: no-repeat;
    background-size: 15%,8%;
    background-position: bottom 20% left 0,bottom 20% right 0;
    position: absolute;
    z-index: -1;
    inset: 0;
    @media (min-width:1200px) {
      background-position: center left,top 61% right 7%;
    }
  }
}
#home_education .home_section_title {
  line-height: 2;
  max-width: 15em;
  margin-left: auto;
  margin-right: auto;

  .color {
    display: inline-block;
    color: var(--key-color);
  }
}
#home_education .text {
  font-size: clamp( 1.6rem, calc( 1.4285714285714285rem + 0.4761904761904762vw ), 2rem );
  line-height: 2.4;
  @media (min-width:768px) {
    text-align: center;
  }
}
#home_education .btn_wrap {
  text-align: center;
  margin-top: 5.6rem;
}
/*--------------------------------------------------------------
# お知らせ
--------------------------------------------------------------*/
#home_news {
  @media (min-width: 1200px) {
    background-image: url(/assets/img/home/news_bg_left.png),url(/assets/img/home/news_bg_right.png);
    background-position: center left 3%, center right 2%;
    background-repeat: no-repeat;
    background-size: 5%, 6%;
  }
}
#home_news .content_block {
  padding: 2em 1em 1em;
  border: 0.4rem solid var(--accent-pink);
  border-radius: 1.6rem;
  position: relative;
  @media (min-width:768px) {
    padding: 3em 2em 1em;
  }
  &::before {
    display: block;
    content:"";
    width: min(25vw,12rem);
    aspect-ratio: 120 / 101;
    background: url(/assets/img/home/illust_tsumiki.png) no-repeat center / contain;
    position: absolute;
    bottom: 95%;
    left: 0;
  }
}
#home_news ul {
  max-width: 88.8rem;
  margin: 0 auto;
}
#home_news ul li a {
  display: flex;
  margin-bottom: 1em;
  padding-bottom: 1em;
  gap: 2em;
  border-bottom: 0.1rem dashed var(--accent-pink);

  .news_date {
    display: inline-block;
    color: var(--accent-pink);
    font-family: var(--ff-english);
    flex-shrink: 0;
    padding: 0 0.5em;
    background: #FFF4F0;
  }
  .news_title {
    color: var(--fc-base);
    transition: color 0.4s ease;
  }
  &:hover .news_title {
    color: #008CFF;
  }
}
#home_news .to_archive {
  text-align: center;
  margin: 2.4rem 0;

  & a {
    color: var(--fc-base);
    position: relative;

    &:hover {
      color: #008CFF;
    }
  }
}
/*--------------------------------------------------------------
# 園の特色
--------------------------------------------------------------*/
#home_features {
  margin-top: clamp( 8.2rem, calc( 3.4rem + 13.333333333333334vw ), 19.4rem );
  background: var(--pale-blue);
  position: relative;
  @media (min-width: 1200px) {
    background: url(/assets/img/common/illust_ume_2.png) no-repeat top 28% left / 14%,var(--pale-blue);
  }

  &::before {
    display: block;
    content: "";
    width: 100%;
    height: clamp( 8.2rem, calc( 3.4rem + 13.333333333333334vw ), 19.4rem );
    background: var(--pale-blue);
    mask: url(/assets/img/home/features_bg_mask.svg) no-repeat left top / 100%;
    -webkit-mask: url(/assets/img/home/features_bg_mask.svg) no-repeat left top / 100%;
    position: absolute;
    bottom: 99%;
  }
}
#home_features .home_section_title::before {
  color: var(--key-color);
}
#home_features .column2_row_layout {
  @media (min-width:768px) {
    align-items: center;
  }
  .img_wrap {
    text-align: center;
    margin-bottom: 2.4rem;
    @media (min-width:768px) {
      margin-bottom: 0;
    }
    & img {
      width: min(70vw,100%);
    }
  }
}
#home_features .home_section_title {
  @media (min-width:768px) {
    text-align: left;
  }
}
#home_features .block_title {
  color: var(--key-color);
  font-size: clamp( 1.6rem, calc( 0.9142857142857142rem + 1.9047619047619049vw ), 3.2rem );
  text-align: center;
  @media (min-width:768px) {
    text-align: left;
  }
}
#home_features .text {
  line-height: 2.4;
}
#home_features .btn_wrap {
  text-align: center;
  margin-top: 5.6rem;
  @media (min-width:768px) {
    text-align: left;
  }
}
#home_features .features_list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
  margin-top: 6rem;
  gap: 3rem 1.5rem;
  @media (min-width:768px) {
    margin-top: 8rem;
    @media (min-width:992px) {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  & li {
    @media (min-width:992px) {
      width: calc((100% - 6rem) / 5);
    }
    .text {
      display: block;
      color: #FFF;
      width: fit-content;
      margin: 0 auto -0.5em;
      position: relative;
      z-index: 3;

      &::before {
        display: block;
        content: "";
        width: 150%;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }
    }
    &.management .text::before {
      aspect-ratio: 349 / 136;
      background-image: url(/assets/img/home/features_management_title.png);
    }
    &.english .text::before {
      width: 6em;
      aspect-ratio: 123 / 44;
      background-image: url(/assets/img/home/features_english_title.png);
    }
    &.abacus .text::before {
      aspect-ratio: 113 / 44;
      background-image: url(/assets/img/home/features_abacus_title.png);
    }
    &.athletics .text::before {
      aspect-ratio: 119 / 42;
      background-image: url(/assets/img/home/features_athletics_title.png);
    }
    &.kanji .text::before {
      aspect-ratio: 118 / 45;
      background-image: url(/assets/img/home/features_kanji_title.png);
    }
    &.lesson .text::before {
      aspect-ratio: 123 / 46;
      background-image: url(/assets/img/home/features_lesson_title.png);
    }
    &.azukari .text::before {
      aspect-ratio: 123 / 47;
      background-image: url(/assets/img/home/features_azukari_title.png);
    }
    &.bus .text::before {
      aspect-ratio: 173 / 54;
      background-image: url(/assets/img/home/features_bus_title.png);
    }
    &.parking .text::before {
      aspect-ratio: 323 / 123;
      background-image: url(/assets/img/home/features_parking_title.png);
    }
  }
}
#home_features .features_list .azukari img {
  aspect-ratio: 480 / 280;
  mask: url(/assets/img/features/mask.svg) no-repeat center / 100%;
  -webkit-mask: url(/assets/img/features/mask.svg) no-repeat center / 100%;
}
/*--------------------------------------------------------------
# プレスクール
--------------------------------------------------------------*/
#home_preschool {
  padding-top: 0;
  background: var(--pale-blue);
  position: relative;
}
@media (min-width:1200px) {
  #home_preschool::before {
    display: block;
    content: "";
    width: 14.5vw;
    aspect-ratio: 280 / 363;
    background: url(/assets/img/common/illust_ume_3.png) no-repeat center / contain;
    position: absolute;
    top: -22%;
    right: 0;
    transform: scaleX(-1);
  }
}
#home_preschool .home_section_title::before {
  color: var(--key-color);
}
#home_preschool .text {
  margin-top: 1em;
  @media (min-width:768px) {
    text-align: center;
  }
}
#home_preschool .btn_wrap {
  text-align: center;
  margin-top: 2.4rem;
  @media (min-width:768px) {
    margin-top: 5.6rem;
  }
}
/*--------------------------------------------------------------
# 子育て支援
--------------------------------------------------------------*/
#home_support {
  padding-top: 2rem;
  background: var(--pale-blue);
  position: relative;
  z-index: +1;
  @media (min-width:768px) {
    padding-bottom: 2rem;
    @media (min-width: 1200px) {
      background: url(/assets/img/common/illust_ume_3.png) no-repeat top left / 14%, var(--pale-blue);
      ;
    }
  }

  &::before {
    display: block;
    content: "";
    width: 100%;
    height: clamp( 8.2rem, calc( 3.4rem + 13.333333333333334vw ), 19.4rem );
    background: var(--pale-blue);
    mask: url(/assets/img/home/support_bg_mask.svg) no-repeat left top / 100%;
    -webkit-mask: url(/assets/img/home/support_bg_mask.svg) no-repeat left top / 100%;
    position: absolute;
    top: 96%;
  }
}
#home_support .home_section_title::before {
  color: var(--key-color);
}
#home_preschool .text {
  margin-top: 1em;
  @media (min-width:768px) {
    text-align: center;
  }
}
#home_support .btn_wrap {
  text-align: center;
  margin-top: 2.4rem;
  @media (min-width:768px) {
    margin-top: 5.6rem;
  }
}
/*--------------------------------------------------------------
# 入園までの道筋
--------------------------------------------------------------*/
.bg_wrap {
  position: relative;
  z-index: 0;

  &::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;
  }
}
#home_information {
  padding-top: clamp( 8.2rem, calc( 3.4rem + 13.333333333333334vw ), 28.4rem );
  position: relative;
  z-index: 0;
}
@media (min-width:1200px) {
  #home_information::after {
    display: block;
    content: "";
    width: 14.5vw;
    aspect-ratio: 280 / 363;
    background: url(/assets/img/common/illust_ume_3.png) no-repeat center / contain;
    position: absolute;
    top: 23%;
    right: 0;
    transform: scaleX(-1);
  }
}
#home_information .item {
  background: url(/assets/img/home/information_item.png) no-repeat center bottom / 100% 100%, #FFF;
  position: relative;
  z-index: +1;
}
#home_information .block_title {
  color: #FFF;
  text-align: center;
  position: relative;

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 0.3rem solid #966E01;
    position: absolute;
    top: -0.3rem;
    left: -0.3rem;
  }
  .wrap {
    position: relative;
    z-index: +1;
  }
}
#home_information .item:nth-child(1) .block_title {
  background: var(--accent-green);
}
#home_information .item:nth-child(2) .block_title {
  background: var(--accent-pink);
}
#home_information .item:nth-child(3) .block_title {
  background: var(--accent-blue);
}
#home_information .item:nth-child(4) .block_title {
  background: #AD93E5;
}
#home_information .item .text {
  padding: 0 1em 1em;
}
#home_information .btn_wrap {
  text-align: center;
  margin: 5.6rem 0;
}
/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#home_access {
  padding: 0 0 13rem;
  position: relative;
  z-index: 0;
  @media (min-width:768px) {
    padding-bottom: 18.4rem;
  }
}
@media (min-width:1200px) {
  #home_access::before {
    display: block;
    content: "";
    width: 14.5vw;
    aspect-ratio: 280 / 388;
    background: url(/assets/img/common/illust_ume_1.png) no-repeat center / contain;
    position: absolute;
    top: -22%;
    left: 0;
  }
  #home_access::after {
    display: block;
    content: "";
    width: 14.5vw;
    aspect-ratio: 280 / 388;
    background: url(/assets/img/common/illust_ume_1.png) no-repeat center / contain;
    position: absolute;
    bottom: 16%;
    right: 0;
    transform: scaleX(-1);
  }
}
#home_access .inner {
  position: relative;
  z-index: +1;
}
#home_access .btn_wrap {
  text-align: center;
  margin: 5.6rem 0;
}