@charset "utf-8";

:root {}


.top_image {
  aspect-ratio: 2 / 1;
  position: relative;
  border-radius: 1rem;
  background-image: url(../../img/pages/detail/top_image.webp);
  background-size: cover;
  background-position: center center;

  > hgroup {
    position: absolute;
    place-self: center;
    place-self: end start;
    inset: 0;
    width: 100%;
    background: rgba(255 255 255 / .7);
    padding: 1rem;
    border-radius: 0 0 1rem 1rem;

    h2 {
      font-weight: 600;
      --clamp-max: 40;
      --clamp-min: 25;
      font-size: var(--clamp);
      color: rgb(var(--mainColor));
      text-shadow: 0 0 3px white;

      span {
        font-size: .8em;
      }
    }

    p {
      font-size: 1.1em;
      font-weight: 400;
      margin: .2em auto 0 auto;
    }
  }

  @media (max-width: 768px) {
    aspect-ratio: auto;
    padding-top: 60%;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;

    >hgroup {
      position: static;
      width: 100%;
      background: transparent;
      padding: 1.5rem 1rem;

      h2 {
        text-shadow: none;
        color: rgb(var(--mainColor));
      }
    }
  }
}




#daihyou {
  border: 2px solid rgb(var(--baceFontColor));
  padding: 2rem;
  margin: 3rem auto 0 auto;

  > div {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;

    >div {
      p {
        text-align: left;
      }

      aside {
        margin: 1rem auto 0 auto;
        text-align: right;
        font-weight: 400;
        font-family: var(--font-family-minchou);

        span {
          font-size: 1.2em;
          font-weight: 500;
        }
      }
    }
  }
  @media (max-width: 768px) {
    > div{
      grid-template-columns: 1fr;
      gap:1rem;
      figure{
        img{
          width:min(220px, 100%);
        }
      }
    }
  }
}

#school_prf {
  dl {
    width: min(760px, 100%);
    margin: 0 auto;
    border-bottom: 1px solid silver;

    div {
      display: grid;
      grid-template-columns: 6em 1fr;
      padding: .5em;
      gap:0 1em;
      border-top: 1px solid silver;

      dt {}

      dd {
        text-align: left;

        span {
          font-size: 1.2em;

          a {
            font-weight: 500;
          }
        }

        ul {
          li {
            margin: 0 0 0 2em;
            list-style: disc;
          }
        }
      }
    }
  }

  aside {
    width: min(760px, 100%);
    margin: 10px auto 0 auto;
    text-align: left;
    font-size: .9em;
  }
}

#covid {
  margin: 50px auto 0 auto;
  border: 2px solid #ff5f1a;
  background: #ffffdb;
  border-radius: 1rem;
  padding:1.5rem;
  h3{
    font-size: 1.4rem;
  }
  ul {
    margin: 20px auto 0 auto;
    display:flex;
    flex-wrap:wrap;
    justify-content: start;
    gap:.5em 1em;
    li {
      text-align: left;
      margin: 0 0 0 2em;
      list-style: disc;
      font-size: 1.1rem;
    }
  }

  figure {
    margin: 20px auto 0 auto;
    width: 340px;
    max-width: 100%;
  }
}


ul.pic_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 20px;

  li {
    figure {
      a {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        position: relative;
        overflow: hidden;
        text-align: center;
        border-radius: .7em;

        img {
          min-width: 100%;
          min-height: 100%;
          object-fit: cover;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transition: transform 0.4s ease-out;
        }

        &:hover {
          img {
            transform: translate(-50%, -50%) scale(1.1);
            /* 1.1倍に拡大 */
          }
        }
      }

      figcaption {
        margin: .5em auto 0 auto;
        font-size: .9em;
        inline-size: fit-content;
        margin-inline: auto;
        text-align: left;
        font-weight: 400;
      }
    }
  }
  @media (max-width: 768px) {
    grid-template-columns: repeat(2,1fr);
  }
}