@charset "utf-8";
/*** The new CSS reset - version 1.11.3 (last updated 25.8.2024) ***/
/* reset  ---------------------------------------------------------------------*/
*: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;
}
/* common ---------------------------------------------------------------------*/

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

body {
  position: relative;
  z-index: 0;
  font-family: "Noto Sans JP", sans-serif;

  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: #465352;
  background: #e7e2d7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menu_open {
  position: fixed;
  width: 100%;
  height: 100vh;
}
main {
  overflow: clip;
}

/* Header Section ----------------------------------------------*/

/*ヘッダー */
.l-header {
  padding: 4.8rem 6.4rem 3rem 4.7rem;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  pointer-events: none;

  &.hide {
    .l-header__menu {
      transform: translateY(-100%);
      opacity: 0;
      button,
      a,
      svg {
        pointer-events: none !important;
      }
    }
  }

  &.change {
    .l-header__inner {
      .l-header__menu {
        .l-header__list {
          .l-header__item {
            .l-header__link {
              color: #465352;
              &::after {
                background-color: #465352;
              }
            }
          }
        }
        .l-header__sub {
          color: #465352;
          .l-header__reservation {
            a {
              background: #465352;
              color: #fdfcfb;
            }
          }
          .l-header__language {
            &::after {
              background-image: url("../img/common/icon_arrow_down_b.svg");
            }
          }
        }
        .l-header__btn {
          color: #465352;
          border: 1px solid #465352;
          & svg {
            stroke: #465352;
          }
          &.open {
            color: transparent;
            border: 1px solid #fdfcfb;
          }
        }
      }
    }
  }

  .l-header__inner {
    /* overflow: hidden; */
    padding: 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 0 auto;
    .l-header__logo {
      width: 12.5rem;
      pointer-events: auto;
    }
    .l-header__menu {
      padding-top: 1.4rem;
      display: flex;
      align-items: center;
      align-self: flex-start;
      pointer-events: auto;
      transition:
        transform 0.5s,
        opacity 0.5s;

      .l-header__list {
        display: flex;
        gap: 0 3.2rem;
        .l-header__item {
          .l-header__link {
            overflow: hidden;
            position: relative;
            color: #fdfcfb;
            font-size: 1.6rem;
            line-height: 120%;
            &::after {
              content: "";
              display: block;
              position: absolute;
              z-index: 0;
              background-color: #fff;
              bottom: -4px;
              left: 0;
              width: 100%;
              height: 1px;
              transition: transform 0.3s;
              transform-origin: bottom right;
              transform: scaleX(0);
            }
            &:hover {
              &::after {
                transform-origin: bottom left;
                transform: scaleX(1);
              }
              span {
                transform: translate3d(0, 0, -30px) rotateX(90deg);
              }
            }

            span {
              position: relative;
              display: inline-block;
              transition: 0.3s;
              transform-origin: 50% 0%;
              transform-style: preserve-3d;
              &::after {
                content: attr(data-text);
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                z-index: -1;
                transform-origin: 50% 0%;
                -webkit-transform: translate3d(0, 107%, 0) rotateX(-90deg);
                transform: translate3d(0, 107%, 0) rotateX(-90deg);
              }
            }
          }
        }
      }
      .l-header__sub {
        margin: 0 3.6rem 0 17.1rem;
        color: #fdfcfb;
        font-size: 1.4rem;
        font-style: normal;
        line-height: 192%;
        display: flex;
        gap: 0 4rem;
        pointer-events: auto;

        .l-header__language {
          position: relative;
          z-index: 0;
          &::after {
            content: "";
            display: block;
            position: absolute;
            z-index: 0;
            background-image: url("../img/common/icon_arrow_down.svg");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            top: 1rem;
            right: -1.5rem;
            width: 0.8rem;
            aspect-ratio: 8 /5;
          }
          .list_lang {
            position: absolute;
            top: 2em;
            left: 0;
            overflow: hidden;
            height: 0;
            button {
              cursor: pointer;
              transform: translateY(-100%);
              transition: 0.3s;
            }
          }
          &:hover {
            .list_lang {
              height: auto;
              button {
                transform: translateY(0);
              }
            }
          }
        }
        .l-header__reservation {
          color: #465352;
          font-weight: 700;
          a {
            background: #fff;
            padding: 0.4em 1.14em;
            border-radius: 0.2rem;
          }
        }
      }
      .l-header__btn {
        position: relative;
        z-index: 9999;
        cursor: pointer;
        box-sizing: border-box;
        color: #fdfcfb;
        font-size: 1.4rem;
        width: 8rem;
        aspect-ratio: 1;
        align-self: flex-start;
        border: 1px solid #fdfcfb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
        &::before,
        &::after {
          content: "";
          display: block;
          position: absolute;
          z-index: 0;
          background-color: #fdfcfb;
          top: 50%;
          left: 50%;
          transform-origin: center center;
          transform: translate(-50%, -50%) skewX(0);
          width: 0;
          height: 22px;
          pointer-events: none;
          transition: 0.3s;
        }
        svg {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 105%;
          max-width: 105%;
          transform-origin: center;
          transform: translate(-50%, -50%) rotate(-90deg);
          stroke-dasharray: 200px 200px;
          stroke-dashoffset: 200px;
          fill: none;
          stroke: #fff;
          stroke-width: 1.5px;
          animation: menu-circle-hover-out 2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
          pointer-events: none;
        }
        span {
          display: block;
          pointer-events: none;
        }
        &.open {
          z-index: 99999;
          color: transparent;
          &::before,
          &::after {
            display: block;
            background-color: #fdfcfb;
            width: 0.2rem;
            transform: translate(-50%, -50%) skewX(-45deg);
          }
          &::after {
            transform: translate(-50%, -50%) skewX(45deg);
          }
          svg {
            stroke: #fdfcfb;
          }
        }
        &:hover {
          svg {
            animation: menu-circle-hover 2s cubic-bezier(0.075, 0.82, 0.165, 1) 0s forwards;
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 24px 24px 0;
    .l-header__inner {
      padding-bottom: 6rem;
      .l-header__logo {
        width: 7.2rem;
      }
      .l-header__menu {
        padding-top: 0;
        display: flex;
        align-items: center;
        align-self: flex-start;

        .l-header__list {
          display: none;
        }
        .l-header__sub {
          margin: 0 1rem 0 0;
          color: #fdfcfb;
          font-size: 1.2rem;
          font-style: normal;
          line-height: 187%;
          display: flex;
          gap: 0 4rem;
          .l-header__reservation {
            color: #465352;
            font-weight: 700;
            a {
              padding: 0.33em 1.33em;
            }
          }
        }
        .l-header__btn {
          font-size: 1.1rem;
          width: 5.6rem;
        }
      }
    }
  }
}
@keyframes menu-circle-hover {
  0% {
    transform: translate(-50%, -50%) rotate(-90deg);
    stroke-dashoffset: 200px;
  }
  100% {
    transform: translate(-50%, -50%) rotate(90deg);
    stroke-dashoffset: 0;
  }
}
@keyframes menu-circle-hover-out {
  0% {
    transform: translate(-50%, -50%) rotate(90deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: translate(-50%, -50%) rotate(270deg);
    stroke-dashoffset: -200px;
  }
}
/*下層ヘッダーの色変え*/
.sub01 {
  /* .l-header {
    .l-header__inner {
      .l-header__menu {
        .l-header__list {
          .l-header__item {
            .l-header__link {
              color: #465352;
              &::after {
                background-color: #465352;
              }
            }
          }
        }
        .l-header__sub {
          color: #465352;
          .l-header__reservation {
            a {
              background: #465352;
              color: #fdfcfb;
            }
          }
          .l-header__language {
            &::after {
              background-image: url("../img/common/icon_arrow_down_b.svg");
            }
          }
        }
        .l-header__btn {
          color: #465352;
          border: 1px solid #465352;
          & svg {
            stroke: #465352;
          }
          &.open {
            color: transparent;
            border: 1px solid #fdfcfb;
          }
        }
      }
    }
  } */
  .l-float {
    filter: invert(39%) sepia(9%) saturate(464%) hue-rotate(131deg) brightness(92%) contrast(88%);
    mix-blend-mode: plus-lighter;
  }
}
/* Smartphone Menu */
.sp_menu {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  /* transform: translateX(100%); */
  width: 100vw;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  padding: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;

  &.open {
    z-index: 9999;
    /* transform: translateX(0); */

    opacity: 1;
    backdrop-filter: blur(1.2rem);
    pointer-events: auto;
    .inner {
      overflow: hidden;
      background: rgba(18, 41, 39, 0.59);
      height: 100%;
      opacity: 1;
      transition: 0.3s ease;
    }
    .box_img {
      opacity: 1;
      transition: opacity 1.6s ease;
      transition-delay: 0.3s;
    }
    .box_menu {
      opacity: 1;
      transition: opacity 1.6s ease;
      transition-delay: 0.3s;
    }
    .box_lang {
      opacity: 1;
      transition: opacity 1.6s ease;
      transition-delay: 0.3s;
    }
  }
  .inner {
    position: relative;
    z-index: 0;
    padding: 9rem 9rem;
    display: flex;
    justify-content: space-between;
    background: rgba(18, 41, 39, 0);
    height: 100%;
    opacity: 0;
  }
  .box_img {
    width: 52.4rem;
    display: flex;
    flex-flow: column;

    transition: 0s;
    opacity: 0;
    transition-delay: 0s;

    figure {
      margin-bottom: 2rem;
    }

    .parts_logo {
      margin-top: auto;
      /* margin-top: 16.2rem; */
      display: flex;
      justify-content: space-between;

      .sp_logo {
        width: 21.2rem;
      }
      .btn_sp {
        position: relative;
        z-index: 0;
        width: 20.5rem;
        aspect-ratio: 205 / 45;
        align-self: flex-start;
        color: #fdfcfb;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: 0.05em;
        border: 1px solid #fdfcfb;
        display: flex;
        justify-content: center;
        align-items: center;
        &::after {
          content: "";
          display: block;
          position: absolute;
          z-index: 0;
          background-image: url("../img/common/icon_arrow_left.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          top: 50%;
          right: 9.75%;
          transform: translate(0, -50%);
          width: 0.7rem;
          aspect-ratio: 7 / 12;
        }
      }
    }
  }
  .box_link {
    width: 50.8rem;
    color: #fdfcfb;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding-top: 6rem;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
      display: none;
    }
    a,
    button {
      overflow: hidden;
      > span {
        display: block;
        transform: translateY(100%);
      }
    }
    .menu_open & {
      a,
      button {
        > span {
          transform: none;
          transition: transform 0.3s;
          transition-delay: 0.5s;
        }
      }
      .box_menu {
        ul {
          li {
            &:nth-child(2) {
              a {
                > span {
                  transition-delay: 0.6s;
                }
              }
            }
            &:nth-child(3) {
              a {
                > span {
                  transition-delay: 0.7s;
                }
              }
            }
            &:nth-child(4) {
              a {
                > span {
                  transition-delay: 0.8s;
                }
              }
            }
            &:nth-child(5) {
              a {
                > span {
                  transition-delay: 0.9s;
                }
              }
            }
          }
        }
      }
      .box_lang {
        button {
          &:nth-of-type(1) {
            > span {
              transition-delay: 1s;
            }
          }
          &:nth-of-type(2) {
            > span {
              transition-delay: 1.1s;
            }
          }
          &:nth-of-type(3) {
            > span {
              transition-delay: 1.2s;
            }
          }
          &:nth-of-type(4) {
            > span {
              transition-delay: 1.3s;
            }
          }
          &:nth-of-type(5) {
            > span {
              transition-delay: 1.4s;
            }
          }
        }
      }
    }
  }
  .box_menu {
    transition: 0s;
    opacity: 0;
    transition-delay: 0s;

    .dec_text {
      margin-bottom: 2px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 150%;
      letter-spacing: 0.05em;
      opacity: 0.6;
    }
    display: flex;
    flex-flow: wrap;
    margin-bottom: 6rem;
    .list_menu00 {
      width: 50%;
      display: flex;
      flex-flow: column;
      gap: 2.4rem;
      padding-left: 0.75em;

      li {
        a {
          display: block;
          margin-top: 1.2rem;
          &:nth-of-type(n + 2) {
            margin-top: 0.5rem;
          }
          &.name {
            margin-top: 0;
          }
        }
        .size_m {
          font-size: 1.4rem;
          padding-left: 1em;
        }

        &.adjust01 {
          margin-bottom: -1.4rem;
        }
      }
      &.menu02 {
        gap: 1.6rem;
      }
    }
  }
  .box_lang {
    font-size: 1.4rem;
    display: flex;
    flex-flow: column;
    transition: 0s;
    opacity: 0;
    transition-delay: 0s;

    .dec_text {
      margin-bottom: 1.4rem;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 600;
      line-height: 150%;
      letter-spacing: 0.05em;
      opacity: 0.6;
    }
    button {
      display: block;
      font-size: 1.4rem;
      padding-left: 1em;
      cursor: pointer;
      &:nth-of-type(n + 2) {
        margin-top: 1.4rem;
      }
    }
  }
  @media screen and (max-width: 768px) {
    padding: 1.2rem;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    .inner {
      position: relative;
      padding: 2.4rem 2.4rem;
      flex-flow: column;
      height: 100%;
      overflow: scroll;
    }
    .box_img {
      order: 2;
      width: 100%;
      display: flex;
      flex-flow: column;
      figure {
        display: none;
      }
      .parts_logo {
        margin-top: 0;
        flex-flow: column-reverse;
        align-items: center;
        gap: 3.8rem;
        .sp_logo {
          width: 21.2rem;
        }
        .btn_sp {
          margin: 0 auto;
        }
      }
    }
    .box_link {
      order: 1;
      width: 100%;
      padding-top: 2.4rem;
      overflow: unset;
    }
    .box_menu {
      margin-bottom: 2rem;
      width: 100%;
    }
    .box_lang {
      margin-bottom: 2rem;
    }
  }
}

/* Footer Section ----------------------------------------------*/
.l-footer {
  background: #3b8781;
  padding: 14.4rem 0;
  color: #fdfcfb;

  .l-footer__inner {
    margin: 0 auto;
    width: 86.15%;
    display: flex;
  }
  .box_data {
    width: 32rem;
    h3 {
      margin: 3.6rem 0 0.8rem;
      font-size: 1.8rem;
      font-weight: 700;
      line-height: 192%;
    }
    address {
      margin-bottom: 5.6rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 187%;
    }
    small {
      font-size: 1.2rem;
      line-height: 187%;
    }
  }

  .footer_menu {
    margin: -0.9rem 13rem 0 24rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 120%;
    display: flex;
    flex-flow: column;
    gap: 2rem;
    li {
      a {
        margin-top: 0.9rem;
        display: block;
        &.name {
          margin-top: 0;
        }
      }
      .size_m {
        font-size: 1.4rem;
        padding-left: 1em;
      }
      &.adjust01 {
        margin-bottom: -0.8rem;
      }
    }
  }
  .footer_lang {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 120%;
    display: flex;
    flex-flow: column;
    gap: 2.8rem;
    button {
      cursor: pointer;
    }
  }
  @media screen and (max-width: 768px) {
    padding: 6.4rem 0;
    .l-footer__inner {
      flex-flow: column;
    }
    .box_data {
      order: 3;
      width: 100%;
      .footer_logo {
        width: 27rem;
      }
      h3 {
        margin: 2.3rem 0 0.8rem;
      }
      address {
        margin-bottom: 5.6rem;
      }
    }
    .footer_menu {
      order: 1;
      margin: 0;
      gap: 2.8rem;
    }
    .footer_lang {
      order: 2;
      margin: 4.4rem 0 5.6rem;
      border: solid rgba(255, 255, 255, 0.3);
      border-width: 1px 0;
      padding: 4.8rem 0;
    }
  }
}

/* その他共通  ------------------------------*/
.sp_on {
  display: none;
}
.sp_on02 {
  display: contents;
}
@media screen and (max-width: 768px) {
  .sp_on {
    display: inline;
  }
  .sp_on02 {
    display: block;
  }
  .sp_off {
    display: none;
  }
}

.en {
  font-family: "Bacasime Antique", serif;
  font-weight: 700;
  font-style: normal;
}
.jp01 {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
.jp02 {
  font-family: "Noto Sans JP", sans-serif;
}

/* to_topボタン  ------------------------------*/
/* flag_onが付与された要素を通過した際にボタンが出てくる仕様です。 */

.l-float {
  overflow: hidden;
  position: fixed;
  z-index: 99;
  bottom: 30px;
  left: 0;
  width: 100%;
  pointer-events: none;
  .l-float__inner {
    margin: 0 auto;
    width: 86.14%;
  }
  .to_top {
    margin-left: auto;
    width: 52px;
    aspect-ratio: 52 /35;
    display: block;
    cursor: pointer;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
  }
  &.on {
    .to_top {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

/* l-reservation  ------------------------------*/
.l-other_link {
  margin: 0 auto;
  width: 144rem;
  padding: 6.4rem;
  display: flex;
  justify-content: space-between;
  color: #465352;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
  /* line-height: 180%; */

  a {
    border: 1px solid #9eadab;
    aspect-ratio: 430 / 480;
    width: 43rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    transition:
      background 0.3s,
      color 0.3s;
    .slot_ani {
      position: relative;
      display: inline-block;
      transition: 0.3s;
      transform-origin: 50% 0%;
      transform-style: preserve-3d;
      margin-bottom: 1.3rem;
      &::after {
        content: attr(data-text);
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        z-index: -1;
        transform-origin: 50% 0%;
        -webkit-transform: translate3d(0, 107%, 0) rotateX(-90deg);
        transform: translate3d(0, 107%, 0) rotateX(-90deg);
      }
    }

    .jp02 {
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 400;
      line-height: 200%;
      letter-spacing: 0.07em;
    }
  }
  @media (hover: hover) {
    a:hover {
      background: #465352;
      color: #fdfcfb;
      .slot_ani {
        transform: translate3d(0, 0, -30px) rotateX(90deg);
      }
    }
  }
  @media screen and (max-width: 768px) {
    width: 39rem;
    padding: 6.4rem 3.2rem;
    font-size: 1.8rem;
    flex-flow: column;
    gap: 0.5em;
    a {
      aspect-ratio: 326 / 270;
      width: 100%;
      .jp02 {
        font-size: 1.2rem;
      }
    }
  }
}

/* l-reservation  ------------------------------*/

.l-reservation {
  position: relative;
  z-index: 0;
  display: flex;
  gap: 0.4rem;
  overflow: hidden;
  .box_scroll {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    animation: reservation_bc 80s linear infinite;
    li {
      width: 100vw;
      flex-shrink: 0;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }
    }
  }
  .box_text {
    position: absolute;
    z-index: 1;
    bottom: 11rem;
    right: 15.6rem;
    color: #fdfcfb;
    display: flex;
    flex-flow: column;
    align-items: center;
    figure {
      width: 15.6rem;
    }
    p {
      margin: 2.4rem 0 3.6rem;
      text-align: center;
      font-size: 1.4rem;
      font-style: normal;
      font-weight: 400;
      line-height: 192%;
      letter-spacing: 0.07em;
    }
    .btn_reserv {
      background: #fff;
      color: #465352;
      font-size: 1.6rem;
      font-style: normal;
      font-weight: 700;
      width: 21rem;
      aspect-ratio: 210 / 44;
      border-radius: 0.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  @media screen and (max-width: 768px) {
    gap: 0.285rem;
    .box_scroll {
      gap: 0.285rem;
      animation: reservation_bc 60s linear infinite;
      li {
        height: 85.2rem;
      }
    }
    .box_text {
      bottom: 11.2rem;
      width: 100%;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      figure {
        width: 14.2rem;
      }
      p {
        margin: 2.14rem 0 3.8rem;
        font-size: 1.2rem;
      }
    }
  }
}
@keyframes reservation_bc {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Special Section */
.l-spcial {
  .inner {
    position: relative;
    z-index: 0;
    margin: 0 auto;
    width: 131.2rem;
    padding: 1.2rem;
    border: 1px solid #9eadab;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition:
      background 0.3s,
      color 0.3s;
    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 50%;
      z-index: 0;
      background: #465352;
      top: 50%;
      right: 03.8rem;
      transform: translate(0, -50%);
      width: 3.2rem;
      aspect-ratio: 1;
      transition: background 0.3s;
    }
    &::before {
      content: "";
      display: block;
      width: 0.6rem;
      height: 0.6rem;
      border-top: 0.1rem solid #e7e2d7;
      border-right: 0.1rem solid #e7e2d7;
      transform: rotate(45deg);
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5.2rem;
      margin: auto 0;
      z-index: 1;
      transition: border-color 0.3s;
    }
    .box_img {
      width: 44rem;
    }
    .box_text {
      width: 81rem;
      .ttl02 {
        font-size: 4.8rem;
        font-style: normal;
        font-weight: 400;
        color: #465352;
        transition: color 0.3s;
      }
      p {
        margin-top: 2.4rem;
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 400;
        line-height: 192%;
        letter-spacing: 0.07em;
        strong {
          margin-bottom: 0.4rem;
          display: block;
          font-size: 2rem;
          font-style: normal;
          font-weight: 700;
          line-height: 187%;
        }
      }
    }
    @media (hover: hover) {
      &:hover {
        background: #465352;
        color: #fdfcfb;
        &::after {
          background: #e7e2d7;
        }
        &::before {
          border-color: #465352;
        }
        .ttl02 {
          color: #fdfcfb;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .inner {
      width: 32.4rem;
      padding: 2.4rem 2.4rem 7.2rem;
      flex-flow: column;
      &::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 0;
        background-image: url("../img/common/icon_arrow_btn01.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        top: auto;
        right: auto;
        bottom: 2rem;
        left: 50%;
        transform: translate(-50%, 0);
      }
      &::before {
        top: auto;
        bottom: 3.28rem;
        right: 16rem;
      }
      .box_img {
        width: 100%;
      }
      .box_text {
        margin-top: 2.4rem;
        width: 100%;
        .ttl02 {
          font-size: 3.6rem;
          font-style: normal;
          font-weight: 400;
        }
        p {
          margin-top: 2rem;
          font-size: 1.2rem;
          strong {
            margin-bottom: 0.8rem;
            font-size: 1.7rem;
          }
        }
      }
    }
  }
}

/* Sub MV Section */
.l-submv01 {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  /* aspect-ratio: 1440 / 900; */
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .box_ttl {
    position: absolute;
    bottom: 8.5rem;
    left: 13.3rem;
    color: #fdfcfb;

    .breadcrumb-list {
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 187%;
      letter-spacing: 0.07em;
      display: flex;
      gap: 1.3rem;
      margin-bottom: 2rem;

      .breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 1.3rem;

        &::after {
          content: "";
          display: block;
          background-image: url("../img/common/icon_arrow_left.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          width: 0.5rem;
          aspect-ratio: 7 / 12;
          align-self: center;
        }
        a {
          display: block;
        }
        &:last-of-type {
          &::after {
            display: none;
          }
        }
      }
    }
    .mv_ttl {
      overflow: hidden;
      font-size: 8.8rem;
      font-weight: 400;
      line-height: 100%;
      display: flex;
      align-items: baseline;
      gap: 1.7rem;
      .wrapper {
        display: flex;
        align-items: baseline;
        gap: 1.7rem;
      }

      .jp01 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 187%;
        transform: translateY(-0.7rem);
        display: flex;
        gap: 0.9rem;

        &::before {
          content: "";
          display: block;
          background-color: #fdfcfb;
          width: 1px;
          height: 3rem;
          transform: skewX(-30deg);
          align-self: center;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    width: 39rem;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    aspect-ratio: auto;

    .box_ttl {
      bottom: 4rem;
      left: 2.4rem;
      .breadcrumb-list {
        margin-bottom: 1.4rem;
      }
      .mv_ttl {
        font-size: 6.4rem;
        gap: 1.3rem;
        .jp01 {
          font-size: 1.4rem;
          transform: translateY(-0.2rem);
          &::before {
            height: 2rem;
          }
        }
      }
    }
  }
}
.l-submv02 {
  position: relative;
  z-index: 0;
  width: 144rem;
  aspect-ratio: 1440 / 570;
  .box_ttl {
    position: absolute;
    bottom: 8.5rem;
    left: 13.3rem;
    .breadcrumb-list {
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 187%;
      letter-spacing: 0.07em;
      display: flex;
      gap: 1.3rem;
      margin-bottom: 2rem;

      .breadcrumb-item {
        display: flex;
        align-items: center;
        gap: 1.3rem;

        &::after {
          content: "";
          display: block;
          background-image: url("../img/common/icon_arrow_left_b.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          width: 0.5rem;
          aspect-ratio: 7 / 12;
          align-self: center;
        }
        a {
          display: block;
        }
        &:last-of-type {
          &::after {
            display: none;
          }
        }
      }
    }
    .mv_ttl {
      font-size: 8.8rem;
      font-weight: 400;
      line-height: 100%;
      display: flex;
      align-items: baseline;
      gap: 1.7rem;

      .jp01 {
        font-size: 2rem;
        font-weight: 700;
        line-height: 187%;
        transform: translateY(-0.7rem);
        display: flex;
        gap: 0.9rem;

        &::before {
          content: "";
          display: block;
          background-color: #465352;
          width: 1px;
          height: 3rem;
          transform: skewX(-30deg);
          align-self: center;
        }
      }
    }
    .wrapper_info_ttl {
      .info_ttl {
        overflow: hidden;
        margin-bottom: 2.4rem;
        font-size: 3rem;
        font-weight: 700;
        line-height: 166%;
      }
      .box_info_data {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 200%;
        display: flex;
        gap: 2.2rem;
        .article_cate {
          display: flex;
          &::before {
            content: "[";
          }
          &::after {
            content: "]";
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    width: 39rem;
    height: 80vh;
    height: 80svh;
    height: 80dvh;
    aspect-ratio: auto;
    &:has(.wrapper_info_ttl) {
      height: auto;
      margin: 0 auto;
      width: 34.2rem;
      padding-top: 40.3vh;
      padding-top: 40.3svh;
      padding-top: 40.3dvh;
      .box_ttl {
        position: static;
      }
    }
    .box_ttl {
      bottom: 4rem;
      left: 2.4rem;
      .breadcrumb-list {
        margin-bottom: 1.4rem;
      }
      .mv_ttl {
        font-size: 6.4rem;
        gap: 1.3rem;
        .jp01 {
          font-size: 1.4rem;
          transform: translateY(-0.2rem);
          &::before {
            height: 2rem;
          }
        }
      }
    }
  }
}
/* Description Section */
.l-description {
  padding: 10.5rem 0 18.9rem;
  .inner {
    margin: 0 auto;
    width: 117.4rem;
    display: flex;
    gap: 4.8rem;
    .ttl02 {
      width: 35rem;
      color: #465352;
      font-size: 1.7rem;
      font-weight: 400;
      line-height: 100%;
      .jp01 {
        margin-top: 1.2rem;
        display: block;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 180%;
      }
    }
    p {
      margin-top: 0.6em;
      width: 77.6rem;
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 192%;
      letter-spacing: 0.07em;
    }
  }
  @media screen and (max-width: 768px) {
    padding: 8rem 0 16rem;
    .inner {
      width: 32.6rem;
      flex-flow: column;
      gap: 2rem;
      .ttl02 {
        width: 100%;
      }
      p {
        margin-top: 0;
        width: 100%;
      }
    }
  }
}

/* アコーディオン  ------------------------------*/
/*アコーディオン（以下のJSとセットで）*/

.c-accordion {
  &.open .c-accordion__cont {
    grid-template-rows: 1fr;
  }
  .c-accordion__ttl {
    display: block;
    cursor: pointer;
    &::-webkit-details-marker {
      display: none;
    }
  }
  .c-accordion__cont {
    display: grid;
    transition:
      padding 0.3s,
      grid-template-rows 0.3s;
    grid-template-rows: 0fr;
  }

  .c-accordion__inner {
    overflow: hidden;
  }
}

/* アニメーション*/

.fadein {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.38, 0.96, 0.65, 0.99);

  &.is-go {
    opacity: 1;
  }
}
.fadein02 {
  opacity: 0;
  transform: translateY(3rem);
  transition:
    transform 0.5s ease-out,
    opacity 0.5s ease-out;

  &.is-go {
    opacity: 1;
    transform: translateY(0);
  }
}

.font_ani {
  .ani_wrapper {
    overflow: hidden;
    display: block;
    span {
      display: inline-block;
      transform: translateY(100%);
      transition: transform 1s cubic-bezier(0.93, 0, 0.61, 0.99);
    }
    &:nth-of-type(2) {
      span {
        transition-delay: 0.2s;
      }
    }
    &:nth-of-type(3) {
      span {
        transition-delay: 0.4s;
      }
    }
    &:nth-of-type(4) {
      span {
        transition-delay: 0.6s;
      }
    }
  }

  &.is-go {
    span {
      transform: translateY(0);
    }
  }
}
/*下層MVアニメーション*/
.sub_mv_ani {
  .l-header {
    transition: opacity 0.5s;
    transition-delay: 2s;
  }
  .l-header__menu {
    > .l-header__list {
      transition: transform 0.5s;
      transition-delay: 2s;
    }
  }

  .l-submv01,
  .l-submv02,
  .l-submv03 {
    &::after {
      transition: opacity 0.5s;
    }
    .box_ttl {
      .breadcrumb-item,
      .box_info_data {
        transition: opacity 1s;
        transition-delay: 1.7s;
      }
      .mv_ttl,
      .info_ttl {
        overflow: hidden;
        .wrapper {
          display: flex;
          align-items: baseline;
          gap: 1.7rem;
          transform: translateY(0);
          transition: transform 1.5s cubic-bezier(0.93, 0, 0.61, 0.99);
          transition-delay: 0.5s;
        }
      }
    }
  }

  &.js-loading {
    .l-header {
      opacity: 0;
      pointer-events: none;
      .l-header__inner {
        .l-header__menu {
          .l-header__list {
            transform: translateY(-8rem) !important;
            @media screen and (max-width: 768px) {
              transform: translateY(-5.6rem) !important;
            }
          }
        }
      }
    }

    .l-submv01,
    .l-submv02,
    .l-submv03 {
      &::after {
        opacity: 0;
      }
      .box_ttl {
        .breadcrumb-item,
        .box_info_data {
          opacity: 0;
        }
        .mv_ttl,
        .info_ttl {
          .wrapper {
            transform: translateY(100%);
          }
        }
      }
      .bg {
        opacity: 0;
      }
    }
  }
}