/* 共通項目 */

:root {
  --main-gradient: linear-gradient(53deg, rgba(102, 204, 102, 1) 10%, rgba(31, 170, 145, 1) 100%);
  --sub-gradient: linear-gradient(53deg, rgba(31, 170, 145, 1) 10%, rgba(102, 204, 102, 1) 100%);
  --alt-gradient: radial-gradient(circle, rgba(31, 170, 145, 1) 10%, rgba(102, 204, 102, 1) 100%);
}

html {
  min-height: 100dvh;
  font-size: 20px;
  color: #231815;
  font-family: Noto Sans JP, sans-serif;
  letter-spacing: 0.1em;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  line-height: 2;
  background-color: #ebf5eb;
  font-weight: 500;
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a {
  transition: all .3s;
  display: inline-block;
  color: #231815;
  text-decoration: none;
}

p {
  margin: 1.5em 0;
}

a:hover {
  transform: scale(1.05);
}

.spView {
  display: none;
}

#headMenuButton,
#menuCheck {
  display: none;
}

header#mainHeader {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;

  > div {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    > * {
      box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.45);
      border-radius: 0.75rem;
      height: 58px;
    }

    #headLogo {

      background-color: #FFF;

      overflow: clip;

      & img {
        height: 58px;
        width: auto;
      }
    }

    #headMenu {
      background: #66CC66;
      background: var(--main-gradient);
      color: #FFFFFF;
      font-size: 0.75rem;
      border: 1px solid #FFFFFF;
      padding: 0 1.5rem;

      & ul {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        height: 100%;

        & li {
          position: relative;
          height: 100%;
          display: flex;
          align-items: center;

          & a,
          > span {
            color: #FFFFFF;
            text-decoration: none;
            padding: 0.2rem 0.8rem;
            cursor: pointer;
            position: relative;
          }

          /*> span {
            padding: 1.1rem 0.8rem;

            &:after {
              content: '';
              display: inline-block;
              width: 0.6em;
              height: 0.6em;
              border-width: 1px 1px 0 0;
              border-style: solid;
              transform: rotate(-45deg);
              position: absolute;
              top: 50%;
              right: 0;
              margin-top: -0.1em;
              transition: all .3s;
            }
          }*/

          .sub-menu {
            display: block;
            position: absolute;
            height: auto;
            top: 112%;
            left: 0.8rem;
            background-color: #75bd77;
            white-space: nowrap;
            border-radius: 0.3rem;
            font-size: 0.6rem;
            padding: 0.6rem;
            transition: all .3s;

            & a {
              padding: 0.15rem 0.2rem;
            }
          }

          &:not(:hover) {
            > span {
              &:after {
                transform: rotate(135deg);
                margin-top: -0.5em;
              }
            }

            .sub-menu {
              opacity: 0;
              top: 90%;
            }

          }
        }


        .sub-menu {
          /*display: none;*/
        }
      }

      > ul {
        >li {
          &:first-of-type {
            > a {
              &:after {
                content: '';
                display: inline-block;
                width: 0.6em;
                height: 0.6em;
                border-width: 1px 1px 0 0;
                border-style: solid;
                transform: rotate(-45deg);
                position: absolute;
                top: 50%;
                right: 0;
                margin-top: -0.1em;
                transition: all .3s;
              }


            }
            &:not(:hover) {
              > a {
                &:after {
                  transform: rotate(135deg);
                  margin-top: -0.5em;
                }
              }
            }
          }
        }
      }
    }
  }
}

footer#mainFooter {
  background-color: #ebf5eb;
  text-align: center;
  line-height: 2.4;
  padding: 3rem 1rem;

  #footMenu {
    text-align: center;
    font-size: 0.7rem;

    & a {
      color: #231815;
    }
  }

  #copyRight {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
}

section {
  padding: 5rem 1rem;

  > h2 {
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    position: relative;
    display: table;
    margin: 0 auto 2rem;
    line-height: 1;


    & span {
      font-family: "century-gothic", sans-serif;
      letter-spacing: 0.1em;
      font-size: 1.15rem;
      font-weight: 600;
    }

    &:after {
      content: attr(data-sub);
      display: block;
      text-align: center;
      background: var(--main-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;

      font-family: "century-gothic", sans-serif;
      font-size: 3.1rem;
      letter-spacing: 0.1em;
      line-height: 1.5;
      font-weight: 500;
    }
  }
}

main {
  background-color: #ebf5eb;
  position: relative;
  padding-top: 0;


  min-height: calc(100vh - 13rem);

  > section {
    width: 1160px;
    margin: 0 auto;
  }
}

#frontPage {
  & main {
    position: relative;
    padding-top: 8rem;
    margin-top: -13rem;
  }
}

.commonButton {
  width: 20rem;
  font-size: 0.75rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  margin: 0 auto;
  position: relative;

  background: var(--main-gradient);
  border-radius: 15px;
  color: #FFFFFF;

  &:before {
    content: '';
    display: block;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
  }

  &:after {
    content: url(../img/arrow01.svg);
    display: inline-block;
    width: 0.8em;
    margin-left: 0.8em;
    transition: all .3s;
    filter: brightness(0) invert(1);
  }

  &:hover {
    &:after {
      transform: translateX(1em);
    }
  }

}

.postPagination {
  display: flex;
  justify-content: center;
  gap: 2em;
  font-size: 0.65rem;

  & a {
    background: var(--alt-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
  }
}

/* ページ共通 */
#pageHeader {
  width: 1160px;
  margin: 0 auto;
  padding-top: 10rem;
  padding-bottom: 0;
  position: relative;
  z-index: 5;

  > h1 {
    font-size: 0.92rem;
    font-weight: normal;
    text-align: center;
    position: relative;
    display: table;
    margin: 0 auto 2rem;
    line-height: 1.2;


    & span {
      font-family: "century-gothic", sans-serif;
      letter-spacing: 0.1em;
      font-size: 1.15rem;
      font-weight: 600;
    }

    &:after {
      content: attr(data-sub);
      display: block;
      text-align: center;
      background: var(--main-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;

      font-family: "century-gothic", sans-serif;
      font-size: 3.1rem;
      letter-spacing: 0.1em;
      line-height: 1.4;
    }
  }

  > p {
    text-align: center;
    font-size: 0.75rem;
    line-height: 2;
    margin: 2em 0;
  }


}

/* トップページ */

#aboutUs {
  background-color: #FFFFFF;

  > p {
    text-align: center;
    font-size: 0.85rem;
    line-height: 2;
    margin: 2em 0;
  }

  #aboutUsConcept {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 4rem;

    > dl {
      text-align: center;

      > dt {
        margin-bottom: 0.8rem;
        background: var(--main-gradient);
        border-radius: 0.8rem;
        color: #FFFFFF;
        line-height: 3.2;
        font-size: 0.85rem;
      }

      > dd {
        font-size: 0.75rem;
        line-height: 1.8;
        margin: 0 0 2em;
      }
    }

    > div {
      width: 240px;
      padding-top: 1rem;
    }

  }

  #aboutUsLink {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
    z-index: 1;

    > article {
      width: 547px;
      padding: 1px;
      background: var(--main-gradient);

      > div {
        background-color: #FFF;
        position: relative;

        > h3 {

          text-align: center;
          margin: 0;
          font-size: 1.68rem;
          background: var(--sub-gradient);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;

          font-weight: 500;
          line-height: 5rem;
          height: 5rem;
          overflow: clip;

          > span {
            font-size: 2rem;
          }

        }

        > div {
          position: relative;

          > span {
            display: block;
          }

          > p {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1.8rem 2rem;
            color: #FFFFFF;
            margin: 0;
            font-size: 0.85rem;
            line-height: 2.2;
            letter-spacing: 0.14em;
            font-weight: 400;
          }

          > a {

            position: absolute;
            width: 70%;
            left: 15%;
            bottom: 2rem;
            text-align: center;
            font-size: 0.75rem;
            height: 3rem;
            display: grid;
            place-items: center;
            z-index: 5;


            background-color: #FFFFFF;
            border-radius: 15px;


            &:before {
              content: '';
              display: block;
              background: var(--main-gradient);
              width: calc(100% - 6px);
              height: calc(100% - 6px);
              position: absolute;
              top: 3px;
              left: 3px;
              border-radius: 12px;
              z-index: -1;
            }

            &:after {
              content: '';
              display: block;
              background-color: #FFFFFF;
              width: calc(100% - 8px);
              height: calc(100% - 8px);
              position: absolute;
              top: 4px;
              left: 4px;
              border-radius: 11px;
              z-index: -1;
            }

            > span {
              background: var(--sub-gradient);
              -webkit-background-clip: text;
              background-clip: text;
              color: transparent;

              &:after {
                content: url(../img/arrow01.svg);
                display: inline-block;
                width: 0.8em;
                margin-left: 0.8em;
                transition: all .3s;
              }
            }

            &:hover {
              > span {
                &:after {
                  transform: translateX(1em);
                }
              }
            }


          }


        }


      }


    }
  }
}


#news {
  background-color: #ebf5eb;


  #newsLink {
    text-align: center;
  }

  #newsList {
    margin-bottom: 4rem;
  }
}

#newsList {
  width: 1120px;
  margin: 0 auto 3rem;

  > article {
    border-bottom: 1px solid #231815;
    padding: 1.2rem 2rem;

    &:first-of-type {
      border-top: 1px solid #231815;
    }

    > a {
      display: block;
    }

    & time {
      font-size: 0.9rem;
      font-family: Roboto, sans-serif;
      letter-spacing: 0.1em;
      font-weight: 500;
      vertical-align: middle;
      display: inline-block;
    }

    & div {
      display: inline-block;
      font-size: 0.65rem;
      background-color: #FFFFFF;
      border-radius: 0.5em;
      margin-left: 1em;
      padding: 0.1em 0.8em;
      font-weight: 500;

      > span {
        background: var(--sub-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

    }

    & h3 {
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 2.6;
    }
  }

}

#company {
  #companyData {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    gap: 2rem;

    > table {
      font-size: 0.65rem;
      line-height: 2;

      & tr {
        & th {
          vertical-align: top;
          color: #1faa91;
          text-align: left;
          padding: 1rem;
        }

        & td {
          padding: 1rem;
          vertical-align: top;
        }
      }

      &:nth-of-type(2) {
        & tr:nth-of-type(2) {
          transform: translateY(-1.3rem);
        }
      }
    }
  }
}

/* about共通 */
#aboutHeader {
  width: 1160px;
  margin: 0 auto;
  padding-top: 10rem;
  padding-bottom: 0;
  position: relative;
  z-index: 5;

  & h1 {
    font-family: dnp-shuei-gothic-gin-std, sans-serif;
    background: var(--sub-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 3.2rem;
    font-weight: 400;
    margin: 0;

    > span {
      font-size: 3.5rem;
      letter-spacing: 0.1em;
    }
  }

  &:after {
    display: block;
    content: '';
    width: 24rem;
    height: 25rem;
    background: url(../img/logo.svg) no-repeat center center /contain;
    position: absolute;
    left: calc(50% + 510px);
    top: 2.5rem;
  }
}


/* mebo */
.page-mebo {

  background-color: #FFFFFF;

  & main {
    margin-top: -3.2rem;
  }
}

#mebo {
  font-size: 0.85rem;

  > div {
    margin: 2.5rem 0;
  }

  & h2 {
    display: flex;
    align-items: center;
    background: var(--main-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.2rem;
    white-space: nowrap;
    margin: 0;

    &:after {
      content: '';
      height: 1px;
      width: 100%;
      background: var(--alt-gradient);
      margin-left: 0.5rem;
    }
  }
}

/* 代表挨拶 */
.page-message {
  position: relative;
  background-color: #FFFFFF;

  &:after {
    content: '';
    display: block;
    background-image: url(../img/messageBack.png);
    background-repeat: no-repeat;
    background-position: calc(50% - 14.5rem) calc(100% + 10rem);
    background-size: contain;
    mix-blend-mode: soft-light;
    width: 100%;
    height: 989px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  & main {
    margin-top: -3.2rem;
  }
}

#message {
  font-size: 0.85rem;
  position: relative;
  z-index: 5;
  padding-bottom: 3rem;
  line-height: 2.2;


  & h2 {
    text-align: left;

    background: var(--sub-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.5rem;
    margin-left: 0;
    font-weight: bold;
    text-indent: -0.4em;
    line-height: 2;

  }

  & h3 {
    background: var(--sub-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    position: relative;
    margin-top: 2em;

    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: var(--alt-gradient);
      position: absolute;
      bottom: -0.5rem;
      left: 0;
    }
  }

  & h4 {
    display: flex;
    align-items: center;
    background: var(--sub-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.85rem;

    & span {
      display: block;
      width: 3.5rem;
      height: 1px;
      background: var(--sub-gradient);
      margin: 0 0.5rem;
    }
  }

  .messageWrap {
    display: flex;
    justify-content: space-between;

    > div {
      text-align: right;
      margin-top: 3rem;
    }
  }

}

/* お問い合わせ */
#contact {
  padding-top: 2rem;

  #contactForm {

    font-size: 0.85rem;
    letter-spacing: 0.1em;

    .formWrap {
      background-color: #FFFFFF;
      border-radius: 0.5rem;
      padding: 3rem 4rem;
      margin-bottom: 3rem;

      .forminator-field {
        > label {
          display: block;
          font-weight: 700;
          line-height: 3;

          .forminator-required {
            visibility: hidden;
            font-size: 0;

            &:after {
              visibility: visible;
              content: '※必須';
              font-size: 0.85rem;
              color: #c30d23;
            }
          }

        }

        .forminator-error-message {
          font-size: 0.6rem;
          color: #c30d23;
          display: block;
        }

        .forminator-description {
          font-size: 0.6rem;

          & [data-type=characters] {
            display: none;
          }
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"],
        input[type="month"],
        input[type="week"],
        input[type="password"],
        input[type="search"],
        input[type="range"],
        textarea {
          width: 100%;
          padding: 0.5rem 1rem;
          border: none;
          background-color: #f7f8f8;
          line-height: 2;
          letter-spacing: 0.1em;

          &::placeholder {
            color: #b5b5b6;
          }
        }
      }

      .iti__country-container {
        display: none;
      }

      .formZip01 {
        input[type="text"] {
          width: 3.5rem;
        }
      }

      .formZip02 {
        position: relative;
        margin-left: -10.5em;

        input[type="text"] {
          width: 4.5rem;
        }

        &:before {
          content: '';
          display: block;
          height: 1px;
          width: 0.8em;
          background-color: #231815;
          text-align: center;
          position: absolute;
          top: 4.3em;
          left: -0.2em;
        }
      }

      .labelHidden {
        .forminator-field {
          > label {
            visibility: hidden;

            .forminator-required {
              visibility: hidden;

              &:after {
                visibility: hidden;
              }
            }
          }
        }
      }

      .formConfirm {
        text-align: center;
        font-size: 0.75rem;

        & p {
          line-height: 2.2;
        }

        & a {
          position: relative;
          display: inline-block;

          &:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background-color: #231815;
            position: absolute;
            bottom: 0.1em;
            left: 0;

          }
        }
      }

      .formConfirmCheck {
        text-align: center;
        position: relative;
        margin-top: -1rem;

        & input {
          width: 1.1rem;
          height: 1.1rem;
          margin-right: 0.5rem;
          vertical-align: text-bottom;
        }
      }

      .forminator-col:not(.forminator-field-email) {
        padding: 0 1.5rem;
      }

      .formNumber label span:before {
        content: '半角数字';
        font-size: 0.85rem;
        color: #999999;
        visibility: visible;
        margin-right: 0.2em;
      }

      .formKatakana label span:before {
        content: '全角カタカナ';
        font-size: 0.85rem;
        color: #999999;
        visibility: visible;
        margin-right: 0.2em;
      }

      .formHankaku label span:before {
        content: '半角文字';
        font-size: 0.85rem;
        color: #999999;
        visibility: visible;
        margin-right: 0.2em;
      }

    }

    .forminator-pagination-footer {
      text-align: center;

      .forminator-button {
        border: none;
        background: var(--sub-gradient);
        margin: 0 1rem;
        padding: 1.3rem 7.5rem;
        border-radius: 0.25rem;
        color: #FFFFFF;
        font-size: 0.85rem;
        letter-spacing: 0.5em;
        transition: all .3s;

        &.forminator-button-back {
          padding: 1.3rem 3.5rem;
          background: #b5b5b6;
        }
      }
    }

    .formPage02 {
      .formZip02 {
        &:before {
          top: 4em;
          left: -1em;
        }
      }
    }
  }
}


#pageWrapAlt {
  padding-top: 10rem;

  > div {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    padding: 1rem 0 3rem;

    & h1 {
      text-align: center;
      background: var(--main-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 500;
      position: relative;
      font-size: 2.5rem;
      font-family: dnp-shuei-gothic-gin-std, sans-serif;
      margin-bottom: 1em;

      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: var(--alt-gradient);
        position: absolute;
        bottom: -0.5rem;
        left: 0;
      }
    }

    > p {
      text-align: center;
      font-size: 0.75rem;

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

    > div {
      padding-top: 1rem;
    }
  }
}

/* 利用規約・プライバシーポリシー・クッキーポリシー */

.page-terms-and-privacy {
  background-color: #FFFFFF;

  & main {
    background-color: #FFFFFF;
    padding-top: 6rem;
    margin-bottom: 3rem;

    font-size: 0.75rem;

    section {

      padding: 2rem 1rem;

      & h1,
      & h2 {
        text-align: center;
        background: var(--main-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 500;
        position: relative;
        font-size: 1.75rem;
        font-family: dnp-shuei-gothic-gin-std, sans-serif;
        display: block;
        margin: 0.67em 0 1em;
        line-height: 2.2;

        &:after {
          content: '';
          display: block;
          width: 100%;
          height: 1px;
          background: var(--alt-gradient);
          position: absolute;
          bottom: -0.5rem;
          left: 0;
        }
      }

      > div {
        text-align: right;
        color: #595757;
      }

      > p {
        margin: 2em 0;

        > span {
          font-size: 0.65rem;
          color: #595757;
        }
      }

      ul, ol {
        padding-left: 1.5em;
        letter-spacing: 0;

        li {
          margin: 1em 0;
        }
      }
    }
  }

  & footer#mainFooter {
    background-color: #FFFFFF;
  }
}


/* お知らせ */

body.blog,
body.category,
body.single-post {
  & main {
    background-color: #FFF;

    #newsList {
      & > article {
        & div {
          background-color: #ebf5eb;

        }
      }
    }
  }
}

#newsCatList {
  padding: 0rem 0 4rem;
  display: flex;
  justify-content: center;
  gap: 1rem;

  > a {
    font-size: 0.75rem;
    line-height: 2.4rem;
    border-radius: 2.4rem;
    text-align: center;
    width: 10em;
    position: relative;
    margin: 1px;
    z-index: 1;
    background-color: transparent;
    /*border: 1px solid #898989;*/
    /*background-color: #898989;*/

    &:before {
      position: absolute;
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 2.4rem;
      background-color: #898989;
      z-index: -1;


    }

    &:after {
      position: absolute;
      content: '';
      display: block;
      width: calc(100% - 2px);
      height: calc(100% - 2px);
      top: 1px;
      left: 1px;
      border-radius: 2.4rem;
      background-color: #FFFFFF;
      z-index: 0;


    }

    &.is-active {
      &:before {
        background: var(--main-gradient);
      }

      &:after {
        background: #ebf5eb;
      }

    }

    & span {
      position: relative;
      z-index: 1;
    }

    &.is-active {
      background: var(--main-gradient);

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


.postHead {
  margin-bottom: 3rem;

  & time {
    font-size: 0.9rem;
    font-family: Roboto, sans-serif;
    letter-spacing: 0.1em;
    font-weight: 500;
    vertical-align: middle;
    display: inline-block;
  }

  & div {
    display: inline-block;
    font-size: 0.65rem;
    background-color: #ebf5eb;
    border-radius: 0.5em;
    margin-left: 1em;
    padding: 0.1em 0.8em;
    font-weight: 500;

    > span {
      background: var(--sub-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

  }

  & h2 {
    font-size: 1.25rem;
  }

}


.postLink {
  text-align: center;
  padding-top: 3rem;
  padding-bottom: 2rem;

  & a {
    background: var(--main-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.5em;
    font-size: 0.65rem;
  }
}