@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");

/* ======================================================================
/* root
====================================================================== */
:root {
  --color-black: #231815;
  --color-white: #ffffff;
  --color-gray: #dddddd;
  --color-light-gray: #e4eef2;
  --color-dark-gray: #595757;
  --color-navy: #003a57;
  --color-theme: #00a9c9;
}

/* ======================================================================
/* scroll
====================================================================== */
.scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* ======================================================================
/* centering
====================================================================== */
.centering {
  display: grid;
  place-items: center;
}

/* ======================================================================
/* body
====================================================================== */
body {
  font: 400 16px / 1.75 "Noto Sans", sans-serif;
  color: var(--color-black);
  text-align: justify;
  letter-spacing: 0.03em;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* ======================================================================
/* module
====================================================================== */
.mt-20 {
  margin-block-start: 20px;
}

.mt-30 {
  margin-block-start: 30px !important;
}

.mb-20 {
  margin-block-end: 20px !important;
}

.mb-30 {
  margin-block-end: 30px !important;
}

.mb-40 {
  margin-block-end: 40px !important;
}

.bg-white {
  background: var(--color-white);
}

@media screen and (width <=768px) {
  .mb-30 {
    margin-block-end: 15px !important;
  }
}

/* ======================================================================
/* img
====================================================================== */
img {
  display: block;
  margin: 0 auto;
  max-inline-size: 100%;
  vertical-align: bottom;
}

/* ======================================================================
/* BR
====================================================================== */
.pc {
  display: block;
}

.sp {
  display: none;
}

@media screen and (width <=768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* ======================================================================
/* secTitle
====================================================================== */
.secTitle {
  inline-size: 100%;

  & h2 {
    font-size: 32px;

    & span {
      font-size: 16px;
    }
  }

  & h3 {
    font-size: 24px;
    margin-block: 30px;
    text-align: center;
  }

  & h4 {
    font-size: 20px;
    text-align: center;
  }

  & p {
    text-align: center;
  }
}

@media screen and (width <=768px) {
  .secTitle {
    & h2 {
      font-size: 24px;
      margin-block: 0 15px;
    }

    & h3 {
      font-size: 20px;
    }

    & h4 {
      font-size: 16px;
    }
  }
}

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

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

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

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

/* ======================================================================
/* firstView
====================================================================== */
#firstView {
  position: relative;
  inline-size: 100%;

  & img {
    inline-size: 100%;
  }

  & .logo {
    position: absolute;
    top: 5%;
    left: 3%;
    inline-size: 250px;
  }
}

@media screen and (width <=768px) {
  #firstView {
    & .logo {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translate(-50%, -15%);
      inline-size: 125px;
    }

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

      & a {
        inline-size: 90%;
      }
    }
  }
}

/* ======================================================================
/* secLead
====================================================================== */
#secLead {
  padding-block: 80px;

  & img {
    inline-size: 320px;
    margin-block-end: 40px;
  }

  & p {
    font-size: 20px;
    margin-block-end: 20px;
    text-align: center;

    &:last-of-type {
      margin-block-end: 0;
    }
  }
}

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

    & img {
      inline-size: 100%;
      margin-block-end: 20px;
    }

    & p {
      font-size: 14px;
      margin-block-end: 20px;
      text-align: left;
    }
  }
}

/* ======================================================================
/* secStyle
====================================================================== */
#secStyle {
  padding-block: 0 80px;

  & .gray {
    background: var(--color-light-gray);
    padding-block: 80px;
  }
}

@media screen and (width <=768px) {
  #secStyle {
    padding-block: 0 40px;

    & .gray {
      background: var(--color-light-gray);
      padding-block: 40px;
    }
  }
}

/* ======================================================================
/* styleLayout
====================================================================== */
.styleLayout {
  display: flex;
  align-items: start;
  justify-content: center;
  margin-block: 80px 40px;

  & .title {
    inline-size: auto;
    block-size: 500px;

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

  & .photo {
    inline-size: auto;
    block-size: 500px;

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

@media screen and (width <=768px) {
  .styleLayout {
    flex-direction: column-reverse;
    margin-block: 40px;
    gap: 40px 0;

    & .title {
      inline-size: 100%;
      block-size: auto;

      & img {
        inline-size: 100%;
        block-size: auto;
        padding-inline: 10px;
      }
    }

    & .photo {
      inline-size: 100%;
      block-size: auto;

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

/* ======================================================================
/* styleLayout_reverse
====================================================================== */
.styleLayout_reverse {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: row-reverse;
  margin-block: 80px 40px;

  & .title {
    inline-size: auto;
    block-size: 500px;

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

  & .photo {
    inline-size: auto;
    block-size: 500px;

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

@media screen and (width <=768px) {
  .styleLayout_reverse {
    flex-direction: column-reverse;
    margin-block: 40px;
    gap: 40px 0;

    & .title {
      inline-size: 100%;
      block-size: auto;

      & img {
        inline-size: 100%;
        block-size: auto;
        padding-inline: 10px;
      }
    }

    & .photo {
      inline-size: 100%;
      block-size: auto;

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

/* ======================================================================
/* secVideo
====================================================================== */
#secVideo {
  padding-block: 80px;

  & .embed {
    inline-size: 100%;
    display: grid;
    place-items: center;

    & iframe {
      inline-size: 80%;
      block-size: auto;
      aspect-ratio: 16 / 9;
    }
  }

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

    & a {
      position: relative;
      color: var(--color-white);
      background: var(--color-navy);
      font-weight: bold;
      display: grid;
      place-items: center;
      padding: 15px 30px;
      text-decoration: none;
      transition: 0.3s ease-in-out;
      inline-size: 500px;
      margin-block-start: 30px;

      &:hover {
        opacity: 0.8;

        &::after {
          right: 10px;
        }
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s;
        inline-size: 10px;
        block-size: 10px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }
}

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

    & .embed {
      inline-size: 100%;

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

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

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

/* ======================================================================
/* secConversion
====================================================================== */
#secConversion {
  padding-block: 80px;
  background: var(--color-light-gray);

  & .white {
    background: var(--color-white);
    padding: 40px;
    margin-block-end: 40px;
  }
}

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

  & a {
    position: relative;
    color: var(--color-white);
    background: var(--color-navy);
    font-weight: bold;
    display: grid;
    place-items: center;
    padding: 15px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    inline-size: 500px;
    margin-block-start: 30px;

    &:hover {
      opacity: 0.8;

      &::after {
        right: 10px;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: right 0.3s;
      inline-size: 10px;
      block-size: 10px;
      border-top: solid 2px currentColor;
      border-right: solid 2px currentColor;
      transform: translateY(-50%) rotate(45deg);
    }
  }
}

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

    & .white {
      padding: 10px;
      margin-block-end: 20px;
    }

    & .link {
      display: grid;
      place-items: center;
      margin-block-end: 10px;

      & a {
        inline-size: 100%;
        font-size: 12px;
      }
    }
  }
}

/* ======================================================================
/* secVideo
====================================================================== */
#secVideo {
  padding-block: 80px;

  & .embed {
    inline-size: 100%;
    display: grid;
    place-items: center;

    & iframe {
      inline-size: 80%;
      block-size: auto;
      aspect-ratio: 16 / 9;
    }
  }

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

    & a {
      position: relative;
      color: var(--color-white);
      background: var(--color-navy);
      font-weight: bold;
      display: grid;
      place-items: center;
      padding: 15px 30px;
      text-decoration: none;
      transition: 0.3s ease-in-out;
      inline-size: 500px;
      margin-block-start: 30px;

      &:hover {
        opacity: 0.8;

        &::after {
          right: 10px;
        }
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.3s;
        inline-size: 10px;
        block-size: 10px;
        border-top: solid 2px currentColor;
        border-right: solid 2px currentColor;
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }
}

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

    & .link {
      & a {
        inline-size: 100%;
      }
    }
  }
}

/* ======================================================================
/* secExhibition
====================================================================== */
#secExhibition {
  inline-size: 100%;
  padding-block: 80px;

  & .areaTitle {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 60px;
    margin-block: 80px 40px;
    font-size: 26px;
    background: var(--color-gray);
  }

  & ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    place-items: start;
    gap: 18px;
    margin-inline: 18px;
    list-style: none;

    & li {
      color: var(--color-black);
      text-align: center;
      margin-block-end: 18px;

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

      & img {
        inline-size: 100%;
        aspect-ratio: 3/2;
        object-fit: cover;
      }

      & iframe {
        inline-size: 100%;
        block-size: 165px;
        aspect-ratio: 3/2;
        object-fit: cover;
      }

      & .ttl {
        font-size: 1.1em;
        font-weight: 700;
        line-height: 1.4;
        margin-block-start: 0.8em;
        margin-block-end: 0.4em;
        min-block-size: 49px;
      }

      & .address {
        font-size: 11px;
        font-weight: 400;
        min-block-size: 44px;
      }

      & .tel {
        font-size: 1.4em;
        font-weight: 400;
        font-family: "Bebas Neue", sans-serif;
      }

      & .link {
        & a {
          display: block;
          inline-size: 100%;
          block-size: auto;
          margin-inline: auto;
          margin-block: 0.4em 0;
          padding-inline: 0;
          padding-block: 0.6em 0.8em;
          color: #fff;
          font-size: 1em;
          font-weight: 500;
          line-height: 1;
          text-align: center;

          &.detail {
            background: #adb4b4;
          }

          &.reserve {
            background: #00a9c8;
          }
        }
      }
    }
  }
}

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

    & .areaTitle {
      block-size: 40px;
      margin-block: 40px 20px;
      font-size: 20px;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      place-items: start;
      gap: 18px;
      margin-inline: 18px;
      list-style: none;

      & li {
        color: var(--color-black);
        text-align: center;
        margin-block-end: 18px;
        background: rgba(255, 255, 255, 0.8);

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

        & img {
          inline-size: 100%;
          aspect-ratio: 3/2;
          object-fit: cover;
        }

        & iframe {
          inline-size: 100%;
          block-size: 165px;
          aspect-ratio: 3/2;
          object-fit: cover;
        }

        & .ttl {
          font-size: 1.1em;
          font-weight: 700;
          line-height: 1.4;
          margin-block-start: 0.8em;
          margin-block-end: 0.4em;
          min-block-size: 49px;
        }

        & .address {
          font-size: 11px;
          font-weight: 400;
          min-block-size: 44px;
        }

        & .tel {
          font-size: 1.4em;
          font-weight: 400;
          font-family: "Bebas Neue", sans-serif;
        }

        & .link {
          & a {
            display: block;
            inline-size: 100%;
            block-size: auto;
            margin-inline: auto;
            margin-block: 0.4em 0;
            padding-inline: 0;
            padding-block: 0.6em 0.8em;
            color: #fff;
            font-size: 1em;
            font-weight: 500;
            line-height: 1;
            text-align: center;

            &.detail {
              background: #adb4b4;
            }

            &.reserve {
              background: #00a9c8;
            }
          }
        }
      }
    }
  }
}

/* ======================================================================
/* footer
====================================================================== */
footer {
  padding: 40px;
  display: grid;
  place-items: center;
  background: var(--color-light-gray);

  & small {
    text-align: center;
  }
}