@charset "utf-8";

/*リセット ------------------------------*/
/*** The new CSS reset - version 1.11.3 (last updated 25.8.2024) ***/

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
a,
button {
  cursor: revert;
}
ol,
ul,
menu,
summary {
  list-style: none;
}
ol {
  counter-reset: revert;
}
img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
table {
  border-collapse: collapse;
}
input,
textarea {
  -webkit-user-select: auto;
}
textarea {
  white-space: revert;
}
meter {
  -webkit-appearance: revert;
  appearance: revert;
}
:where(pre) {
  all: revert;
  box-sizing: border-box;
}
::placeholder {
  color: unset;
}
:where([hidden]) {
  display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}
:where([draggable="true"]) {
  -webkit-user-drag: element;
}
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}
::-webkit-details-marker {
  display: none;
}

/*共通 ------------------------------*/

html {
  font-size: calc(10 / 1370 * 100vw);
  @media screen and (min-width: 1920px) {
    font-size: calc(10 / 1370 * 1920px);
  }
  @media screen and (max-width: 768px) {
    font-size: calc(10 / 375 * 100vw);
  }
}

body {
  position: relative;
  z-index: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: "palt";
  overflow-x: clip;

  background: #004e2b;
}

body.menu_open {
  position: fixed;
  width: 100%;
  height: 100vh;
}

/*ヘッダー */
.l-header {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  padding: 2.3rem 3.5rem;
  transition: padding 0.3s ease;
  .l-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    transition:
      background 0.3s ease,
      padding 0.3s ease,
      border-color 0.3s ease;
  }
  .l-header__logo {
    width: 20rem;
  }
  @media screen and (max-width: 768px) {
    padding: 2rem 2rem;
    .l-header__logo {
      width: 13.2rem;
    }
  }
}

/* ヘッダー：スクロール時は緑の角丸帯に変化 */
.l-header.is-scrolled {
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
.l-header.is-scrolled .l-header__inner {
  background: #044b2b;
  padding: 1rem 1rem 1rem 2.6rem;
  border: 1px solid rgba(254, 234, 180, 0.5);
}
.l-header.is-scrolled .l-header__logo {
  width: 16rem;
}
.l-header.is-scrolled .l-header__contact {
  width: 13.6rem;
  padding: 1rem;
  font-size: 1.3rem;
}
@media screen and (max-width: 768px) {
  .l-header.is-scrolled {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .l-header.is-scrolled .l-header__inner {
    padding: 0.7rem 0.7rem 0.7rem 1.8rem;
  }
  .l-header.is-scrolled .l-header__logo {
    width: 11rem;
  }
}

/*ヘッダーメニュー ------------------------------*/

.l-header__menu {
  font-size: 1.4rem;
  font-weight: 500;
  display: flex;
  ul {
    display: flex;
    align-items: center;
    gap: 0 2.8rem;
    li {
      &.sp_ttl {
        display: none;
      }
    }
    .l-header__link {
      display: block;
      color: #fff;
    }
    .l-header__contact {
      margin-left: 2rem;
      color: #004e2b;
      background: #fff;
      width: 17.2rem;
      padding: 1.6rem;
      border-radius: 6.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.3rem;
      font-weight: 700;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

      &::before {
        content: "";
        width: 1.5rem;
        aspect-ratio: 1;
        background: url(../img/common/btn_dec_circle.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center;
      }

      .btn-text {
        display: inline-flex;
        line-height: 1;
      }
      .char {
        position: relative;
        display: inline-block;
        overflow: hidden;
        line-height: 1;
      }
      .char-top,
      .char-bottom {
        display: inline-block;
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: calc(var(--i, 0) * 35ms);
      }
      .char-bottom {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        text-align: center;
      }

      &:hover {
        transform: scale(1.06);
        &::before {
          transform: scale(1.35);
        }
        .char-top,
        .char-bottom {
          transform: translateY(-100%);
        }
      }
    }
  }
  .l-header__btn {
    display: none;
    /* background-color: red;
      position: relative;
      z-index: 9999;
      display: none;
      cursor: pointer;
      transition: all 0.5s;
      box-sizing: border-box;
      width: 50px;
      height: 44px;
      .bar {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: #fff;
        border-radius: 4px;
        display: inline-block;
        transition: all 0.5s;
        box-sizing: border-box;
      } */
  }

  @media screen and (max-width: 1024px) {
    ul {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 999;
      padding: 110px 0 0 0;
      flex-flow: column;
      width: 100%;
      height: 100svh;
      background: #feeab4;
      transition: 0.3s;
      font-size: 22px;
      font-weight: 700;
      opacity: 0;
      pointer-events: none;
      &::before {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        background-image: url("../img/common/bi_menu01.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: 0;
        right: 0;
        width: 512px;
        aspect-ratio: 270 / 166;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: -1;
        background-image: url("../img/common/bi_menu02.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        bottom: 0;
        left: 0;
        width: 512px;
        aspect-ratio: 270 / 170;
      }

      .l-header__item {
        width: 314px;
        padding: 30px 48px 30px 0;
        border-bottom: 1px solid rgba(7, 67, 38, 0.2);
        line-height: normal;
        display: flex;
        align-items: center;
        &::before {
          content: "";
          background-image: url("../img/common/icon_menu.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          width: 20px;
          aspect-ratio: 1;
          margin-right: 15px;
        }
        &::after {
          content: "";
          background-image: url("../img/common/arrow_g.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          width: 15px;
          aspect-ratio: 15/12;

          margin-left: auto;
        }
        &:first-of-type,
        &:last-of-type {
          border-bottom: 0;
          padding-right: 0;
          padding: 51px 48px 00;

          &::before,
          &:after {
            display: none;
          }
        }
        &:first-of-type {
          display: block;
          margin-bottom: 20px;
          padding: 0;
          img {
            width: 111px;
          }
        }
      }

      .l-header__link {
        color: #004e2b;
      }
      .l-header__contact {
        margin: 0 auto;
        width: 172px;
        padding: 16px 0;
        border-radius: 65px;
        gap: 13px;
        font-size: 14px;
        &::before {
          width: 15px;
        }
      }
    }
    &.open ul {
      opacity: 1;
      pointer-events: auto;
    }
    .l-header__btn {
      position: relative;
      z-index: 9999;
      display: block;
      color: #004e2b;
      background: #fff;
      width: 107px;
      height: 34px;
      border-radius: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      display: flex;

      .box_bar {
        position: relative;
        z-index: 0;
        width: 14px;
        height: 8px;
        .bar {
          position: absolute;
          background: #044b2b;
          width: 9px;
          height: 1px;
          left: 50%;
          transform: translateX(-50%);
          transform-origin: center;
          transition: transform 0s;
          &.bar01 {
            top: 0;
          }
          &.bar02 {
            top: 50%;
            transform: translate(-50%, -50%);
          }
          &.bar03 {
            top: 100%;
          }
        }
      }
      .box_text {
        font-size: 11px;
        width: fit-content;
        .close {
          display: block;
        }
        .open {
          display: none;
        }
      }
      &.open {
        .box_text {
          .close {
            display: none;
          }
          .open {
            display: block;
          }
        }
        .bar {
          &.bar01 {
            width: 100%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(30deg);
            transition: transform 0.3s;
          }
          &.bar02 {
            width: 0;
          }
          &.bar03 {
            width: 100%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-30deg);
            transition: transform 0.3s;
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    ul {
      padding: 9.6rem 0 0 0;
      font-size: 2.2rem;
      pointer-events: none;

      &::before,
      &::after {
        width: 27rem;
      }
      .l-header__item {
        width: 31.4rem;
        padding: 3rem 4.8rem 3rem 0;

        &::before {
          content: "";
          width: 2rem;
          margin-right: 1.5rem;
        }
        &::after {
          width: 1.5rem;
        }

        &.sp_ttl {
          margin-bottom: 3rem;
          padding: 0;

          img {
            width: 11.1rem;
          }
        }
      }

      .l-header__contact {
        margin: 0 auto;
        width: 17.2rem;
        padding: 1.6rem 0;
        border-radius: 6.5rem;
        gap: 1.3rem;
        font-size: 1.4rem;
        &::before {
          width: 1.5rem;
        }
      }
    }

    .l-header__btn {
      width: 10.7rem;
      height: 3.4rem;
      border-radius: 1.7rem;
      gap: 0.6rem;
      .box_bar {
        width: 1.4rem;
        height: 0.8rem;
        .bar {
          width: 0.9rem;
        }
      }
      .box_text {
        font-size: 1.1rem;
      }
    }
  }
}
/*.l-footer */

.l-footer {
  position: relative;
  z-index: 0;
  background: #00381f;
  .l-footer__inner {
    margin: 0 auto;
    width: 122.6rem;
    .l-footer__inner_top {
      padding: 6.9rem 0 3.4rem;
      color: #feeab4;
      font-size: 1.1rem;
      letter-spacing: 0.045em;
      display: flex;
      gap: 22.6rem;

      .box_data {
        line-height: calc(20 / 11);
        .footer_logo {
          width: 36.5rem;
          margin-bottom: 1.7rem;
        }
        address {
          padding-left: 7.4rem;
        }
      }

      .list_link {
        display: flex;
        gap: 9.6rem;
        padding-top: 1.2rem;

        li {
          display: flex;
          flex-flow: column;
          gap: 0.8rem 0;
          .ttl_link {
            margin-bottom: 1.5rem;
            color: rgba(254, 234, 180, 0.9);
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: 0.1em;

            a {
              display: block;
              color: inherit;
              text-decoration: none;
              transition: opacity 0.3s;
            }
            a:hover {
              opacity: 0.7;
            }
          }
          .item_link + .item_link {
            margin-top: 0.48rem;
          }
        }
      }
    }
    .l-footer__inner_center {
      padding: 0 0 4rem 7.4rem;
      color: #feeab4;
      display: flex;
      gap: 27rem;

      .btn_contact {
        width: 24.8rem;
        aspect-ratio: 248 / 50;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: center;
        font-size: 1.3rem;
        letter-spacing: 1px;
        border: 1px solid #feeab4;
        border-radius: 2.5rem;
        transition: 0.3s;
        &:hover {
          background: #feeab4;
          color: #004e2b;
        }
      }
      .offset {
        display: flex;
        align-items: center;
        gap: 2rem;
        color: #feeab4;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        img {
          width: 8rem;
        }
        .text_offset {
          display: flex;
          flex-flow: column;
          gap: 1.1em;
          .en {
            display: block;
            color: rgba(254, 234, 180, 0.55);
            font-size: 1rem;
            font-weight: 400;
          }
        }
      }
    }

    .l-footer__inner_bottom {
      padding: 2rem 0 3.8rem;
      border-top: 1px solid rgba(254, 234, 180, 0.2);
      display: flex;
      justify-content: space-between;
      color: rgba(254, 234, 180, 0.4);
      font-size: 1rem;
      letter-spacing: 0.05em;
      small {
      }

      a {
      }
    }
  }

  .l-footer__scroll {
    overflow: hidden;
    display: flex;
    /* gap: 8rem; */
    .sroll_item {
      display: flex;
      /* gap: 8rem; */
      animation: 30s footer_scroll infinite linear;
      img {
        width: 110.6rem;
        max-width: none;
        padding-right: 8rem;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 5.2rem 0 0;
    .l-footer__inner {
      display: flex;
      flex-flow: column;
      width: 31.5rem;
      .l-footer__inner_top {
        display: contents;

        .box_data {
          order: 2;
          margin-bottom: 3rem;

          width: 21rem;
          .footer_logo {
            width: 19.9rem;
            margin-bottom: 2.5rem;
          }
          address {
            padding-left: 0;
          }
        }

        .list_link {
          order: 1;
          margin-bottom: 5rem;
          flex-flow: wrap;
          gap: 3rem 5.2rem;
          padding-top: 0;

          li {
            border-left: 1px solid rgba(254, 234, 180, 0.2);
            padding-left: 2rem;
            display: flex;
            flex-flow: column;
            align-self: baseline;
            gap: 1.43rem 0;
            .ttl_link {
              margin-bottom: 0.8rem;
            }
            .item_link + .item_link {
              margin-top: 0;
            }
          }
        }
      }
      .l-footer__inner_center {
        display: contents;

        .btn_contact {
          order: 3;
          margin: 0 auto 0 0;
          width: 20.9rem;
          aspect-ratio: 209 / 50;
          letter-spacing: 1px;
          border: 1px solid #feeab4;
          border-radius: 2.5rem;
          transition: 0.3s;
          .sp_off02 {
            display: none;
          }
        }
        .offset {
          order: 4;
          margin: 5rem 0 4.7rem;
          gap: 2.8rem;
          font-size: 1.2rem;

          img {
            width: 5.4rem;
          }
          .text_offset {
            line-height: 1.4;
            gap: 0.8em;
          }
        }
      }

      .l-footer__inner_bottom {
        order: 5;
        padding: 1.6rem 0 8.7rem;
        flex-flow: column;
        gap: 1.63rem;
        font-size: 1rem;
        letter-spacing: 0.05em;
      }
    }

    .l-footer__scroll {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      flex-flow: column;
      .sroll_item {
        flex-flow: column;
        animation: 48s footer_scroll infinite linear;
        img {
          width: 8.9rem;
          padding: 0 0 8rem 0;
        }
      }
    }
  }
}
@keyframes footer_scroll {
  100% {
    translate: -100% 0;
  }
}
@media screen and (max-width: 768px) {
  @keyframes footer_scroll {
    100% {
      translate: 0 -100%;
    }
  }
}
/* to_topボタン  ------------------------------*/
/* 1画面スクロールでボタンが出てくる仕様です。 */

.l-float {
  overflow: hidden;
  position: fixed;
  bottom: 30px;
  left: 0;
  width: 100%;
  pointer-events: none;
  .l-float__inner {
    margin: 0 auto;
    width: 1024px;
    max-width: 95%;
  }
  .to_top {
    margin-left: auto;
    width: 60px;
    aspect-ratio: 1;
    background-color: aqua;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    transform: translateY(100%);
    transition: 0.3s;
  }
  &.on {
    .to_top {
      transform: translateY(0);
    }
  }
}

/* その他  ------------------------------*/

.en {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sp_on {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_on {
    display: inline;
  }
  .sp_off {
    display: none;
  }
}

/* アニメーション ------------------------------*/
/* フェードイン */

.fade01 {
  transform: translateY(3em);
  opacity: 0;
  transition:
    transform 0.7s,
    opacity 0.7s;
  &.is-go {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 見出し1文字ずつ真下から登場 */
.split-text {
  position: relative;
}
.split-wrap {
  display: inline-block;
  vertical-align: top;
  line-height: 1.15;
  /* 下端だけクリップして、上・左右はイタリックのスラントやストロークが見えるよう余裕を持たせる */
  clip-path: inset(-0.4em -0.4em 0 -0.4em);
  -webkit-clip-path: inset(-0.4em -0.4em 0 -0.4em);
}
.split-text .split-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
  user-select: text;
  -webkit-user-select: text;
  line-height: 1.15;
}
.split-text.is-split-go .split-char {
  transform: translateY(0);
}
/* コピー用の隠しテキスト（視覚的には透明・選択可能） */
.split-text .split-copy {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
  z-index: 1;
}

/* ローディングアニメーション（全ページ共通） */
.l-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #044b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.l-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.l-loader__inner {
  position: relative;
  width: 28rem;
  height: 28rem;
}
.l-loader__text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loader-spin 12s linear infinite;
}
.l-loader__text text {
  font-family: "Instrument Sans", sans-serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.32em;
  fill: #feeab4;
  text-transform: uppercase;
}
.l-loader__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11rem;
  height: 11rem;
  transform: translate(-50%, -50%);
  animation: loader-pulse 2.4s ease-in-out infinite;
}
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loader-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
@media screen and (max-width: 768px) {
  .l-loader__inner {
    width: 22rem;
    height: 22rem;
  }
  .l-loader__icon {
    width: 8.5rem;
    height: 8.5rem;
  }
  .l-loader__text text {
    font-size: 13px;
    letter-spacing: 0.28em;
  }
}