@charset "UTF-8";

html {
  font-size: 62.5%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}

body {
  color: #000;
  font-size: 1.6rem;
  background: #fff;
  width: 100vw;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #000;
}

img {
  width: 100%;
  vertical-align: bottom;
  /* talon add */
  max-width: none;
}

li {
  list-style: none;
}

/*ヘッダー共通設定*/
.page-header {
  height: 280px;
  background-image: url(../images/top_img_hoiku.webp);
  background-size: cover;
  position: relative;
}

/*ヘッダー共通設定*/

.section-title {
  font-size: 3rem;
  font-weight: 700;
  color: #5A2720;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title:before,
.section-title:after {
  border-top: 1px solid;
  content: "";
  width: 3em;
}

.section-title:before {
  margin-right: 1em;
}

.section-title:after {
  margin-left: 1em;
}

.section-title-en {
  font-size: 1.8rem;
  color: #D25C36;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1rem;
}

.u-mobile {
  display: none;
}

/* header
----------------------*/

.hoiku-header {
  position: relative;
}

.hoiku-header__img img {
  filter: grayscale(10%);
}

.hoiku-header__title {
  font-size: 4.8rem;
  color: #fff;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hoiku-header nav {
  position: absolute;
  top: 2.1rem;
  left: 2.5em;
  font-size: 1.8rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  color: #fff;
}

.breadcrumb a {
  color: #fff;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "＞";
  margin: 0 .6em;
  /* 記号の左右の余白 */
  color: #fff;
  /* 記号の色 */
}


/* 保育の取り組み
----------------------*/

.hoiku-approatch_inner {
  padding: 7.4rem 25px 0;
  max-width: 125rem;
  width: 100%;
  margin: 0 auto;

}

.torikumi__title {
  font-size: 3.8rem;
  font-weight: 700;
  color: #5A2720;
}

.torikumi__title span {
  font-size: 6.4rem;
  font-weight: 700;
  color: #D25C36;
}

.right {
  font-size: 3.8rem !important;
  color: #5A2720 !important;
}

.torikumi-inenrei {
  margin: 8.6rem auto 1rem;
}

.inenrei__text {
  font-size: 1.8rem;
  line-height: 1.94444444444;
  margin-top: 11rem;
  margin-left: 6.4rem;
  max-width: 35.1666666667%;
  width: 100%;
}

.inenrei {
  position: relative;
}

.inenrei__img {
  max-width: 50%;
  width: 100%;
  margin-left: -1rem;
  position: absolute;
  top: -3rem;
  right: -1.5rem;
  z-index: 10;
}

.pentagon1 {
  max-width: 29%;
  width: 100%;
  position: absolute;
  bottom: -21rem;
  right: -20rem;
}

.torikumi-bg {
  padding-top: 25rem;
  background: linear-gradient(180deg, #FAF3DF 0%, #FAF3DF 90%, #fff 90%, #fff 100%);
  margin: 0 calc(50% - 50vw) 17rem;
  width: 100vw;
}

.torikumi__flex {
  max-width: 125rem;
  margin: 4.6rem auto 0;
  padding: 0 25px;
  display: flex;
  align-items: center;
  position: relative;
}

.pentagon2 {
  max-width: 22.9666666667%;
  width: 100%;
  position: absolute;
  top: -15rem;
  left: -14rem;
}

.pentagon3 {
  max-width: 19.2383333333%;
  width: 100%;
  position: absolute;
  bottom: -6rem;
  right: 2rem;
}

.torikumi__img {
  max-width: 55%;
  width: 100%;
  z-index: 10;
}

.torikumi__img-right {
  margin-right: -2rem;
}

.torikumi__text {
  width: 45%;
  padding: 0 5.7rem;
  font-size: 1.8rem;
  line-height: 1.94444444444;
}

.torikumi-yaritai {
  margin-top: 17rem;
}

.torikumi-yaritai .torikumi__title {
  margin-bottom: 4rem;
}

.torikumi-yaritai__img {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.torikumi-yaritai__img img {
  width: 100vw;
}

.yaritai__text {
  margin-top: 2.7rem;
  font-size: 1.8rem;
  line-height: 1.94444444444;
}

.torikumi-taiken {
  margin-top: 15.5rem;
  position: relative;
}

.pentagon4 {
  max-width: 29%;
  width: 100%;
  position: absolute;
  top: -12rem;
  right: -15rem;
}

.torikumi-taiken-bg {
  background: linear-gradient(180deg, #fff 0%, #fff 40%, #FAF3DF 40%, #FAF3DF 100%);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.taiken,
.kyushoku {
  max-width: 125rem;
  padding: 0 25px;
  margin: 15.5rem auto 0;
}

.taiken__flex,
.kyushoku__flex {
  display: flex;
  justify-content: space-between;
  padding: 0 6rem;
  margin-top: 4rem;
}

.taiken__flex img,
.kyushoku__flex img {
  width: 48.7962962963%;
  z-index: 10;
}

.taiken__text,
.kyushoku__text {
  margin-top: 2.5rem;
  padding: 0 6rem;
  font-size: 1.8rem;
  line-height: 1.94444444444;
}

.torikumi-kyushoku {
  margin-top: 11.3rem;
}

.kyushoku {
  max-width: 125rem;
  padding: 15.5rem 25px 0;
  margin: 0 auto;
  position: relative;
}

.pentagon5 {
  max-width: 28%;
  width: 100%;
  position: absolute;
  top: -2rem;
  right: -15rem;
}

.pentagon6 {
  max-width: 26%;
  width: 100%;
  position: absolute;
  bottom: 11rem;
  left: -20rem;
}

.torikumi-kyushoku-bg {
  background: linear-gradient(180deg, #FAF3DF 0%, #FAF3DF 63%, #fff 63%, #fff 100%);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

/* 園舎について
----------------------*/
.hoiku-about__inner {
  padding-top: 16.6rem;
  padding-bottom: 26rem;
  position: relative;
}

.hoiku-about__column2 {
  margin-top: 6.6rem;
}

.column2 {
  max-width: 125rem;
  padding: 0 2.5rem;
  margin: 6.6rem auto 0;
  display: flex;
  justify-content: space-between;
}

.column2__img {
  max-width: 48.3333333333%;
  width: 100%;
  position: relative;
}

.column2__img img {
  aspect-ratio: 580 / 580;
  object-fit: cover;
  object-position: center;
}

.column2__img span,
.column3__img span {
  font-size: 2rem;
  color: #fff;
  background-color: #D25C36;
  padding: 1.2rem 1.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.column3 {
  margin: 3.3rem auto 0;
  padding: 0 2.5rem;
  max-width: 125rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.column3__img {
  max-width: 31.6666666667%;
  width: 100%;
  position: relative;
}

.column3__img img {
  aspect-ratio: 380 / 295;
  object-fit: cover;
  object-position: center;
}

.column3__img+.column3__img {
  margin-left: 2.5%;
}

.column3__img:nth-child(3n + 1) {
  margin-left: 0;
}

.column3__img:nth-child(n + 4) {
  margin-top: 3.2rem;
}

.bird-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 8.746rem;
  width: 100%;
  transform: rotate(10deg);
}

/*---------------------------------
レスポンシブ
---------------------------------*/

@media screen and (max-width: 1100px) {
  .inenrei__img {
    max-width: 45%;
    top: 5rem;
    right: 1rem;
  }

  .torikumi__title span {
    font-size: 6rem;
  }

  .inenrei__text {
    margin-top: 7rem;
  }

  .torikumi-bg {
    padding-top: 20rem;
  }

  .pentagon1 {
    bottom: -15rem;
    right: -15rem;
  }

  .pentagon2 {
    max-width: 20%;
    top: -15rem;
    left: -6rem;
  }
}

@media screen and (max-width: 900px) {
  .inenrei__img {
    top: 6rem;
  }

  .torikumi__title {
    font-size: 3rem;
  }

  .torikumi__title span {
    font-size: 5rem;
  }

  .right {
    font-size: 3rem !important;
  }

  .inenrei__text {
    margin-top: 5rem;
    max-width: 40%;
  }

  .torikumi-bg {
    padding-top: 14rem;
  }

  .torikumi__flex {
    margin-top: 0;
  }

  .torikumi-yaritai {
    margin-top: 15rem;
  }

  .kyushoku {
    padding-top: 13.5rem;
  }

  .pentagon2 {
    top: -9rem;
  }

  .pentagon4 {
    top: -7rem;
    right: -9rem;
  }

  .pentagon5 {
    top: -4rem;
    right: -7rem;
  }

  .pentagon6 {
    max-width: 22%;
    bottom: 13rem;
    left: -8rem;
  }
}

@media screen and (max-width: 767px) {

  /*ヘッダー共通設定*/
  .page-header {
    background-image: url(../images/top_img_hoiku_m.webp);
    margin-top: 66px !important;
  }

  /*ヘッダー共通設定*/

  .hoiku-header__img {
    height: 20rem;
  }

  .hoiku-header__img img {
    height: 20rem;
    object-fit: cover;
    object-position: bottom;
  }

  .hoiku-header__title {
    font-size: 3rem;
  }

  .hoiku-header nav {
    font-size: 1.4rem;
    top: 1rem;
    left: 1.1rem;
  }

  .section-title {
    font-size: 2.1rem;
  }

  .section-title-en {
    font-size: 1.6rem;
  }

  .torikumi__title span {
    font-size: 3.3rem;
  }

  .torikumi__title {
    font-size: 2rem;
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
  }

  .inenrei__text {
    margin: 2.5rem 0 0;
    max-width: 100%;
    font-size: 1.6rem;
  }

  .torikumi__flex {
    flex-direction: column;
  }

  .torikumi__flex2 {
    padding: 0;
  }

  .torikumi-bg {
    padding-top: 0;
    padding-bottom: 12.5rem;
    margin-bottom: 0;
    background: #FAF3DF
  }

  .torikumi__img {
    max-width: 50rem;
  }

  .torikumi__img--top {
    margin-top: 2rem;
  }

  .torikumi__text {
    padding: 0;
    margin-top: 1.8rem;
    max-width: 50rem;
    width: 100%;
  }

  .torikumi-yaritai {
    margin: 9.2rem auto 0;
    max-width: 50rem;
    width: 100%;
  }

  .torikumi-yaritai__img {
    max-width: 50rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .torikumi-yaritai__img img {
    width: 100%;
  }

  .u-mobile {
    display: block;
  }

  .right {
    font-size: 2rem !important;
    color: #5A2720 !important;
    margin-left: 19rem;
  }

  .torikumi-yaritai .torikumi__title {
    margin-bottom: 2.4rem;
  }

  .yaritai__text {
    margin-top: 1.5rem;
    font-size: 1.6rem;
  }

  .taiken__flex,
  .kyushoku__flex {
    flex-direction: column;
    padding: 0;
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
  }

  .taiken__flex img,
  .kyushoku__flex img {
    max-width: 50rem;
    width: 100%;
    margin-top: 3rem;
  }

  .taiken__flex img:nth-child(2),
  .kyushoku__flex img:nth-child(2) {
    margin-top: 1.6rem;
  }

  .taiken__text,
  .kyushoku__text {
    margin: 2.34rem auto 0;
    padding: 0;
    font-size: 1.6rem;
    max-width: 50rem;
    width: 100%;
  }

  .kyushoku {
    padding-top: 7.4rem;
  }

  .hoiku-about__inner {
    padding-top: 6.6rem;
  }

  .column2 {
    margin-top: 4.8rem;
    flex-direction: column;
    max-width: 50rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .column3 {
    flex-direction: column;
    margin-top: 2rem;
    max-width: 50rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .column2__img,
  .column3__img {
    max-width: 50rem;
  }

  .column2__img:nth-child(2) {
    margin-top: 2rem;
  }

  .column3__img+.column3__img {
    margin-left: 0;
    margin-top: 2rem;
  }

  .column2__img span,
  .column3__img span {
    font-size: 1.6rem;
    padding: 1.2rem 1.1rem;
  }

  .inenrei-bg {
    background: linear-gradient(180deg, #fff 0%, #fff 60%, #FAF3DF 60%, #FAF3DF 100%);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }

  .inenrei {
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }

  .inenrei__text {
    padding-bottom: 41rem;
  }

  .inenrei__img {
    max-width: 39.6rem;
    top: auto;
    bottom: 1rem;

  }

  .torikumi__flex {
    margin-top: 0;
    padding-top: 6rem;
  }

  .pentagon1 {
    max-width: 16.7rem;
    bottom: -3rem;
    right: -7rem;
  }

  .pentagon2 {
    max-width: 19.7rem;
    left: -4rem;
    top: -9rem;
  }

  .pentagon3 {
    max-width: 21rem;
    bottom: -20rem;
    right: 2rem;
  }

  .pentagon4 {
    max-width: 21.7rem;
    top: -18rem;
    right: -2rem;
  }

  .pentagon5 {
    max-width: 21rem;
    width: 100%;
    top: -4rem;
    right: -3rem;
  }

  .pentagon6 {
    display: none;
  }

  .taiken {
    margin-top: 13.5rem;
  }

  .torikumi-taiken-bg {
    background: linear-gradient(180deg, #fff 0%, #fff 24%, #FAF3DF 24%, #FAF3DF 100%);
  }

  .bird-icon {
    display: none;
  }
}

@media screen and (max-width: 599px) {
  .pentagon1 {
    max-width: 16.7rem;
  }

  .pentagon2 {
    max-width: 16.7rem;
  }

  .pentagon3 {
    max-width: 14rem;
    bottom: -18rem;
    right: -1rem;
  }

  .pentagon4 {
    max-width: 16.7rem;
    right: -7rem;
  }

  .pentagon5 {
    max-width: 19rem;
    width: 100%;
    right: -9rem;
  }
}