@charset "UTF-8";
/*
index
-----------------------------------------------------*/
/*
i-setting
-----------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/*
i-functions
-----------------------------------------------------*/
/*
i-mixin
-----------------------------------------------------*/
/* ------------------------- 使い方 ----------------------------------------------------------

    @include sizing(width, wide, 365px, sp, 276px);
    ==> width: clamp(276px, 7.46vw + 248px, 365px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を上限下限をつけて設定）

    @include sizing(width, wide, 365px, sp, 276px, noClamp);
    ==> width: calc(7.46vw + 248px);
    （ビューポートがwide(1568px)のとき365px, sp(375px)のとき276pxになる自動補完値を設定）

    @include sizingRem(font-size, wide, 14px, sp, 12px);
    ==> font-size: clamp(0.75rem, 0.17vw + 0.70625rem, 0.875rem;
    （ビューポートがwide(1568px)のとき14px, sp(375px)のとき12pxになる自動補完値をremに変換して設定）
　　
    ※使いたいsassファイル上で@useしてください。
    ※scssファイル上での読みやすさ重視のため、mixinの引数に単位[px]が必要な仕様にしてあります。

// ---------------------------------------------------------------------------------------- */
/*
about
-----------------------------------------------------*/
@media screen and (min-width: 768px) {
  .p-about .-about01 .-txt,
  .p-about .-about02 .-txt {
    width: 40%;
  }
}
.p-about .-about01 .-txt h2,
.p-about .-about02 .-txt h2 {
  font-size: clamp(30px, 1.07vw + 26.6px, 44px);
  line-height: 1.8;
  color: #038c3e;
  margin-bottom: 0.6em;
}
@media screen and (min-width: 768px) {
  .p-about .-about01 .-img,
  .p-about .-about02 .-img {
    width: 46%;
  }
}
.p-about .-about01 .-img img,
.p-about .-about02 .-img img {
  display: block;
  max-width: 368px;
  border-radius: 20px;
}
.p-about .-about01 .-img img:not(:last-of-type),
.p-about .-about02 .-img img:not(:last-of-type) {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .p-about .-about01 img:first-of-type {
    float: right;
    clear: both;
  }
}
@media screen and (min-width: 768px) {
  .p-about .-about02 .-txt {
    order: 2;
    background: url("../../img/common/icn_children.png") no-repeat 100% 80%;
    background-size: contain;
  }
}
@media screen and (min-width: 768px) {
  .p-about .-about02 img:last-of-type {
    float: right;
    clear: both;
  }
}
.p-about .-policy .-box {
  padding: 2rem 5%;
  border: 1px solid #038c3e;
  border-radius: 20px;
}
.p-about .-policy .-box:not(:last-of-type) {
  margin-bottom: 30px;
}
.p-about .-policy .-box h3 {
  color: #038c3e;
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 1.6em;
}
.p-about .-policy .-box dl div {
  display: flex;
  flex-direction: column;
  padding: 1em 0;
}
@media screen and (min-width: 768px) {
  .p-about .-policy .-box dl div {
    flex-direction: row;
    justify-content: space-between;
  }
}
.p-about .-policy .-box dl div:not(:last-of-type) {
  border-bottom: 1px solid #038c3e;
}
.p-about .-policy .-box dl div dt {
  color: #038c3e;
}
@media screen and (min-width: 768px) {
  .p-about .-policy .-box dl div dt {
    width: 10em;
  }
}
@media screen and (min-width: 768px) {
  .p-about .-policy .-box dl div dd {
    width: calc(100% - 10em);
  }
}
.p-about .-policy .-box dl div dd ol {
  counter-reset: about-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.p-about .-policy .-box dl div dd ol li {
  line-height: 1.8;
  padding-left: 2em;
  position: relative;
}
.p-about .-policy .-box dl div dd ol li:before {
  content: counter(about-counter) ".";
  counter-increment: about-counter;
  position: absolute;
  top: 0;
  left: 0;
}
.p-about .-policy .-box dl div dd ol li:not(:last-child) {
  margin-bottom: 1em;
}/*# sourceMappingURL=about.css.map */