@charset "utf-8";

html {
  font-size: 4vw;
  /*overflow-x: clip;*/
  /*min-height: 100dvh;*/
  min-height: unset;
  /*scroll-padding-top:unset;*/
}

body {
  /*min-height: 100svh;*/
  overflow-x:unset;
}

.spView {
  display: inherit;
}

.pcView {
  display: none !important;
}

main {
  & section {
    width: auto;
    padding: 12vw 5vw;
  }
}

header#mainHeader {

  padding: 1vw 2vw;
  top: 0;
  left: 0;
  border-bottom: 1px solid #c9caca;
  background-color: #FFFFFF;
  width: 100%;
  box-sizing: border-box;


  z-index: 100;

  /* デバッグ用 */
  opacity: 1 !important;
  transform: none !important;
  /* // デバッグ用 */

  position: fixed !important;


  > div {

    width: 100%;
    justify-content: space-between;

    > * {
      height: 12vw;

    }

    & #headLogo {
      background-color: transparent;
      box-shadow: none;

      & img {
        height: 12vw;
      }
    }

    & #headMenu {
      padding: 10vw 0.8rem;
      position: fixed;
      top: 21vw;
      left: 10vw;
      width: 80vw;
      /*height: calc(100% - 14vw - 1px);*/
      height: auto;
      background: #FFFFFF;
      transition: all 0.3s;
      z-index: 5;
      font-size: 1rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      /*border-radius: 0;*/

      & ul {
        flex-direction: column;
        justify-content: center;
        height: auto;

        & li {
          flex-direction: column;

          & a,
          > span {
            background: var(--main-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
          }



          .sub-menu {
            position: static;
            /*margin-top: -1em;*/
            left: unset;
            top: unset !important;
            /*top: -1em !important;
            left: unset;*/
            opacity: unset !important;
            /*background: #ebf5eb;*/
            background: transparent;
            /*border:1px solid #bbf1bb;*/
            font-size: 0.9rem;
            /*z-index: -2;*/
            padding: 1em 1.5em 0.5em;

          }
        }
      }

      > ul {
        > li {
          &:nth-of-type(1) {
            > a {
              padding: 0 0.4em;
              position: relative;

              &:after {
                display: none;
              }

              &:before {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                background: #FFFFFF;
                position: absolute;
                left: 0;
                top: 0;
                z-index: -1;
              }
            }

          }
        }
      }
    }

    #menuCheck:not(:checked) + #headMenu {
      transform: translateX(100vw);
    }

    #headMenuButton {
      display: block;
      cursor: pointer;
      position: relative;
      z-index: 1;
      height: 7vw;
      width: 7vw;
      margin-right: 3vw;
      box-shadow: none;

      > span,
      &::before,
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #000000;
        position: absolute;
        left: 0;
        transition: all 0.3s;
      }

      > span {
        top: 50%;
        margin-top: -1px;
      }

      &::before {
        top: 0.2rem;
      }

      &::after {
        bottom: 0.2rem;
      }
    }

    #menuCheck:checked ~ #headMenuButton {
      > span {
        transform: rotate(360deg);
        opacity: 0;
      }

      &::before {
        transform: rotate(220deg);
        top: 50%;
        margin-top: -1px;
      }

      &::after {
        transform: rotate(-220deg);
        bottom: 50%;
        margin-bottom: -1px;
      }
    }

    & ul {
      display: none;

      & li {
        & a,
        > span {
          padding: 0.1rem 0.3rem;
          cursor: pointer;
          position: relative;
        }
      }
    }
  }
}

#frontPage {
  font-size: 1rem;

  & header#mainHeader {
    filter: unset;

    &.headerInvert {
      background-color: transparent;
      border-bottom: none;

      #headLogo,
      #headMenuButton {
        filter: brightness(0) invert(1);
        background-color: transparent;
      }
    }
  }

  #aboutUs {

    > p {
      font-size: 0.9rem;
    }

    #aboutUsConcept {
      flex-direction: column-reverse;
      text-align: center;

      > div {
        width: auto;

        img {
          width: 50%;
        }
      }

      & > dl {
        > dd {
          font-size: 0.9rem;
          line-height: 1.8;
          margin: 0 0 2em;
          white-space: nowrap;
        }
      }
    }

    #aboutUsLink {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin-top: 2rem;

      > article {
        width: 100%;

        > div {
          > h3 {
            font-size: 1.1rem;
            line-height: 4rem;
            height: 4rem;

            > span {
              font-size: 1.2rem;
            }
          }

          > div {
            height: 18.6em;

            > span {
              height: 100%;

              > img {
                height: 100%;
                object-fit: cover;
              }
            }

            > p {
              padding: 1.2em;
              font-size: 0.9rem;
            }


            > a {
              bottom: 2em;
            }
          }


        }
      }
    }
  }


  & main {
    padding-top: 30vw;
    margin-top: -44vw;
  }
}

#newsList {
  width: auto;
}

#company {
  #companyData {
    flex-direction: column;
    gap: 0;

    & > table {
      font-size: 0.9rem;
      width: 100%;

      & tr {
        transform: none !important;

        & th {
          vertical-align: top;
          color: #1faa91;
          text-align: left;
          padding: 0.5em 2em;
          display: block;
        }

        & td {
          padding: 0.5em 2em;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }

}

#pageHeader {
  width: 100%;
  padding-top: 30vw;

  > p {
    font-size: 0.9rem;
  }
}

#newsCatList {
  gap: 0.6rem;
  padding-bottom: 3rem;
}

.postPagination {
  font-size: 0.85rem;
}

.postLink {
  & a {
    font-size: 0.85rem;
  }
}

#aboutHeader {
  width: 100%;
  overflow-x: clip;
  padding-top: 26vw;

  & h1 {
    font-size: 2rem;

    > span {
      font-size: 2.6rem;
    }
  }

  &:after {
    width: 12rem;
    height: 12rem;
    left: unset;
    top: 18vw;
    right: -20vw;
    opacity: 0.3;
    z-index: -1;
  }
}

.page-mebo {
  & main {
    margin-top: -2.4rem;
  }
}

.page-message {
  & main {
    margin-top: -2rem;
  }
}

#mebo {
  font-size: 1rem;
}

#message {
  font-size: 1rem;

  & h2 {
    font-size: 1.1rem;
  }

  & h3 {
    font-size: 1.1rem;
  }

  & h4 {
    font-size: 1rem;
  }

  > div {
    flex-direction: column;

    > div {
      text-align: center;

      & img {
        width: 60%;
      }
    }
  }

  .messageWrap {
    flex-direction: column;

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


.page-terms-and-privacy {
  & main {
    font-size: 0.9rem;

    & section {
      & h1, & h2 {
        font-size: 1.4rem;
        font-family: dnp-shuei-gothic-gin-std, sans-serif;
        display: block;
        margin: 0.5em 0 1em;
        line-height: 2.2;
      }

      & p {
        & span {
          font-size: 0.9rem;
        }
      }
    }
  }
}

#contact {
  & #contactForm {
    .formWrap {
      padding: 2rem 0;
      margin-bottom: 3rem;

      .formZip02 {
        position: relative;
        margin-left: -9em;
      }

      .forminator-grouped-fields {
        > .forminator-row:nth-of-type(4) {
          display: flex;
          margin-bottom: 0;
        }
      }
    }
  }

  #html-1, #html-2 {
    display: none;
  }
}

#pageWrapAlt {
  padding-top: 24vw;

  & > div {
    padding: 1rem 0 1rem;

    & h1 {
      font-size: 1.1rem;
    }

    & p {
      font-size: 0.9rem;
      padding: 0 1rem;

      > span {
        display: block;
        margin-top: 1rem;
        font-size: 0.8rem;
      }
    }
  }
}

#newsList {
  > article {
    padding: 0.8rem 1rem;
  }
}