@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP&display=swap');


/* ======================================================================
/* root
====================================================================== */
:root {
  --color-black: #231815;
  --color-white: #ffffff;
  --color-gray: #d8d8d8;
  --color-dark-gray: #595757;
  --color-dark-navy: var(--color-dark-navy);
  --color-theme: #00a9c9;
}


/* ======================================================================
/* body
====================================================================== */
body {
  font: 400 15px / 1.7 "Hiragino Kaku Gothic ProN", "Hiragino Sans";
  color: var(--color-dark-navy);
  text-align: justify;
  letter-spacing: 0.03em;
}


@media screen and (width <=768px) {
  body {
    font-size: 14px;
  }
}


/* ======================================================================
/* inner-800
====================================================================== */
.inner-800 {
  max-inline-size: 800px;
  margin: 0 auto;
}

@media screen and (width <=768px) {
  .inner-800 {
    inline-size: 100%;
    padding-inline: 20px;
  }
}


/* ======================================================================
/* inner-1030
====================================================================== */
.inner-1030 {
  max-inline-size: 1030px;
  margin: 0 auto;
}

@media screen and (width <=768px) {
  .inner-1030 {
    inline-size: 100%;
    padding-inline: 20px;
  }
}


/* ======================================================================
/* secFv
====================================================================== */
#secFv {
  inline-size: 100%;

  & img {
    inline-size: 100%;
  }
}


/* ======================================================================
/* secInfo
====================================================================== */
#secInfo {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  padding-block: 120px;

  .eng {
    position: relative;
    font: 600 45px / 1 "Shippori Mincho", serif;
    font-style: normal;
    text-align: center;

    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: -10%;
      left: 50%;
      transform: translate(-50%, 10%);
      inline-size: 50%;
      block-size: 8px;
      background: url(../img/info/heading_bg.webp) center / 100% no-repeat;
    }
  }

  @media screen and (width <=768px) {
    .eng {
      font: 600 30px / 1 "Shippori Mincho", serif;
    }
  }

  & ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 35px 20px;

    & li {
      inline-size: calc(100% / 3 - 14px);

      & h3 {
        margin-block: 20px;
        text-align: center;
      }
    }
  }

  & .center {
    display: grid;
    place-items: center;

    & img {
      inline-size: 525px;

      &:hover {
        opacity: .8;
        transition: 0.3s;
      }
    }
  }
}


@media screen and (width <=768px) {
  #secInfo {
    padding-block: 60px;

    & ul {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 20px;

      & li {
        inline-size: calc(100% / 2 - 10px);

        & h3 {
          font-size: 13px;
          margin-block: 16px;
        }

        P {
          font-size: 12px;
        }
      }
    }

    & .center {
      & img {
        inline-size: 100%;
      }
    }
  }
}

/* ======================================================================
/* secEvent
====================================================================== */
#secEvent {
  inline-size: 100%;
  block-size: auto;
  padding-block: 120px;
  background: var(--color-gray);

  & .search {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 0 55px;

    & .area {
      inline-size: 50%;

      & .selectBox {
        position: relative;

        &::before,
        &::after {
          position: absolute;
          content: '';
          pointer-events: none;
        }

        &::before {
          display: inline-block;
          right: 0;
          inline-size: 2.8em;
          block-size: 2.8em;
          border-radius: 0 3px 3px 0;
          background-color: var(--color-dark-navy);
        }

        &::after {
          position: absolute;
          top: 50%;
          right: 1.4em;
          transform: translate(50%, -50%) rotate(45deg);
          inline-size: 6px;
          block-size: 6px;
          border-bottom: 3px solid #fff;
          border-right: 3px solid #fff;
        }

        & select {
          appearance: none;
          min-inline-size: 100%;
          block-size: 2.8em;
          padding: .4em 3.6em .4em .8em;
          border: none;
          border-radius: 3px;
          background-color: #ffffff;
          color: #333;
          font-size: 1em;
          cursor: pointer;

          &:focus {
            outline: 2px solid var(--color-dark-navy);
          }
        }
      }
    }

    & .type {
      inline-size: 50%;

      & .selectBox {
        position: relative;

        &::before,
        &::after {
          position: absolute;
          content: '';
          pointer-events: none;
        }

        &::before {
          display: inline-block;
          right: 0;
          inline-size: 2.8em;
          block-size: 2.8em;
          border-radius: 0 3px 3px 0;
          background-color: var(--color-dark-navy);
        }

        &::after {
          position: absolute;
          top: 50%;
          right: 1.4em;
          transform: translate(50%, -50%) rotate(45deg);
          inline-size: 6px;
          block-size: 6px;
          border-bottom: 3px solid #fff;
          border-right: 3px solid #fff;
        }

        & select {
          appearance: none;
          min-inline-size: 100%;
          block-size: 2.8em;
          padding: .4em 3.6em .4em .8em;
          border: none;
          border-radius: 3px;
          background-color: #ffffff;
          color: #333;
          font-size: 1em;
          cursor: pointer;

          &:focus {
            outline: 2px solid var(--color-dark-navy);
          }
        }
      }
    }
  }

  & .center {
    display: grid;
    place-items: center;

    & button {
      inline-size: 430px;
      block-size: 55px;
      color: var(--color-white);
      background: var(--color-dark-navy);
      border-radius: 3px;

      &:hover {
        opacity: .8;
        transition: 0.3s;
      }
    }
  }

  & .list_event {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px 10px;

    & li {
      inline-size: calc(100% / 4 - 8px);
      background: var(--color-white);
      border-radius: 7.5px;
      min-block-size: 410px;

      & a {
        text-decoration: none;

        &:hover {
          opacity: .8;
          transition: 0.3s;
        }

        & img {
          border-radius: 7.5px 7.5px 0 0;
        }

        & .cat {
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 10px auto 20px;
          font-size: 13px;
          block-size: 30px;
          inline-size: 90%;
          border-radius: 10px;
          color: var(--color-white);
          background: var(--color-theme);
        }

        & .ttl {
          font-size: 17px;
          font-weight: bold;
          line-height: 1.5;
          padding: 0 10px;
          color: var(--color-black);
          margin-block: 0 20px;
        }

        & .info {
          font-size: 13px;
          line-height: 1.7;
          padding: 0 10px;
          color: var(--color-black);
        }

        & .status {
          display: none;
        }

        & .status.lbl {
          display: none;
        }
      }
    }
  }
}


@media screen and (width <=768px) {
  #secEvent {
    padding-block: 60px;

    & .search {
      flex-direction: column;
      gap: 20px 0;

      & .area {
        inline-size: 100%;
      }

      & .type {
        inline-size: 100%;
      }
    }

    & .center {
      margin-block-start: 10px;

      & button {
        inline-size: 100%;
        block-size: 40px;
      }
    }

    & .list_event {
      gap: 15px 10px;

      & li {
        inline-size: calc(100% / 2 - 5px);
        background: var(--color-white);
        min-block-size: 300px;

        & a {
          text-decoration: none;

          & .cat {
            font-size: 12px;
            block-size: 20px;
            margin: 10px auto;
            inline-size: 90%;
            border-radius: 5px;
          }

          & .ttl {
            font-size: 12px;
            padding: 0 10px;
            margin-block: 0 10px;
          }

          & .info {
            font-size: 9px;
            padding: 0 10px;
          }
        }
      }
    }
  }
}


/* ======================================================================
/* secModelHouse
====================================================================== */
#secModelHouse {
  inline-size: 100%;
  block-size: auto;
  padding-block: 120px;

  & .list_model_house {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;

    & a {
      text-decoration: none;
      color: var(--color-black);

      &:hover {
        opacity: .8;
      }

      & img {
        inline-size: 310px;
        block-size: 186px;
        object-fit: cover;
      }
    }

    & .ttl {
      font-size: 20px;
      font-weight: bold;
      line-height: 2;
    }

    & .address {
      font-size: 13px;
      min-block-size: 44px;
    }

    & .tel {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.5;
    }

    & .kids {
      display: none;
    }

    & .point {
      display: none;
    }

    & .link {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 10px;

      & .detail {
        display: none;
      }

      & .reserve {
        color: var(--color-white);
        background: var(--color-theme);
        text-align: center;
        padding: 10px;
        margin-block: 15px 0;
        inline-size: 310px;
      }
    }
  }
}

@media screen and (width <=768px) {
  #secModelHouse {
    padding-block: 60px;

    & .list_model_house {
      display: grid;
      grid-template-columns: repeat(2, 0.5fr);
      gap: 25px;

      & li {
        min-block-size: 281px;

        & a {
          text-decoration: none;
          color: var(--color-black);

          &:hover {
            opacity: .8;
          }

          & img {
            inline-size: 100%;
            block-size: 75px;
          }
        }

        & .ttl {
          margin-block-start: 10px;
          font-size: 16px;
          line-height: 1.5;
          min-block-size: 48px;
        }

        & .address {
          font-size: 10px;
          min-block-size: 51px;
        }

        & .tel {
          font-size: 11px;
          font-weight: 700;
          margin-block-start: 5px;
        }

        & .link {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 0 10px;

          & .reserve {
            inline-size: 100%;
          }
        }
      }
    }
  }
}


/* ======================================================================
/* footer
====================================================================== */
footer {
  display: grid;
  place-items: center;
  padding-block: 50px;
  background: var(--color-black);
}

@media screen and (width <=768px) {
  footer {
    padding-block: 25px;
  }
}