@charset "utf-8";

:root {}


#breadcrumb {
  display: none;
}

.section_box {
  padding: 5rem 0;

  >* {
    margin: 0 auto;
    width: var(--container-width);

    >*.section_title {
      margin-top: 0;
    }
  }
}

#about {
  width: min(860px, calc(100% - 4rem));
  border: 3px solid rgb(var(--mainColor));
  padding: 2rem;
  border-radius: 1rem;
  margin: 0 auto;

  > p {
    width: min(680px, 100%);
    text-align: left;
    margin: 0 auto;
    font-size: 1.1em;
    font-weight: 400;
  }

  > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    gap: 2rem;
    margin: 2rem auto 0 auto;

    >section {
      background: #ffe082;
      border-radius: 1rem;
      padding:1.5rem;
      h2{
        font-weight: 500;
        font-size: 1.2em;
      }
      > * + *{
        margin:.7rem auto 0 auto;
        font-weight: 400;
      }
      ul{
        display:flex;
        justify-content: center;
        gap:.3em 1em;
      }
      svg{
        height:1.2em;
        margin:0 .3em 0 0;
      }
    }
  }
}


#jigyou {
  margin-top: 5rem;
  background: url(../../img/top/ukeire_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;

  >* {
    >*.section_title {
      color: white;
    }

    >p {
      width: min(680px, 100%);
      margin: 0 auto;
      color: white;
      text-align: left;
      font-size: 1.1em;
      font-weight: 400;
    }

    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
      gap: 3rem;
      margin: 3rem auto 0 auto;
      width: min(1000px, 100%);

      >div {
        background: rgba(255 255 255 / .9);
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 0 3px 3px #0000a0;

        h3 {
          font-weight: 500;
          color:rgb(var(--mainColor));
          font-size: 1.2em;
        }

        p {
          margin: .5em auto 0 auto;
          text-align: left;
        }
      }
    }
  }
}

#flow {
  background: #eee;

  >* {
    >div {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
      gap: 2rem;

      figure {
        background: white;
        padding: 2em;
        border-radius: 1rem;
        border: 3px solid rgb(var(--mainColor));
        position: relative;
        overflow: hidden;
        transition: all .5s ease-out;
        cursor:default;
        svg{
          height:3rem;
        }
        figcaption {
          margin:1rem auto 0 auto;
          h3 {
            font-weight: 500;
            font-size: 1.2em;

            span {
              color: white;
              background: rgb(var(--mainColor));
              padding: .5rem 1rem;
              aspect-ratio: 1 / 1;
              border-radius: 50%;
              position: absolute;
              left: .5em;
              top: .5em;
            }
          }

          p {
            margin: .5em auto 0 auto;
            text-align: left;
          }
        }
        &:hover{
          box-shadow: 0 0 3px 3px #bbb;
        }
      }
    }
  }
}

#about_us {
  >* {
    >ul {
      width: min(860px, 100%);
      margin: 0 auto;

      >*+* {
        border-top: 1px solid silver;
      }

      >li {
        display: grid;
        grid-template-columns: 10em 1fr;
        padding: 1rem;

        &:nth-of-type(odd) {
          background: #eee;
        }

        p {
          &:nth-of-type(2) {
            text-align: left;
          }
        }

        ol {
          li {
            text-align: left;
            margin: 0 0 0 2em;
            list-style: disc;
          }
        }
      }
    }

    aside {
      margin: 3rem auto 0 auto;
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;

      a {
        display: block;
        border: 2px solid rgb(var(--mainColor));
        padding: 1rem;
        font-size: 1.1em;
        font-weight: 400;
        color: rgb(var(--baceFontColor));
        border-radius: .5em;
        svg {
          height: 1.5em;
          fill: red;
        }

        &:hover {
          background: #ffe082;
        }
      }
    }
  }
}