@charset "UTF-8";

/* ========================================
  LP VARIABLES
======================================== */

:root {
  --lp-bg: #fff100;
  --lp-color: #000000;
  --lp-drawer-btn: #222;
  --lp-search-btn-bg: #ea6061;
  --lp-spread-btn-bg: #5eb27b;
  --lp-info-btn-bg: #61c2e8;
  --lp-gallery-btn-bg: #8f70ae;
  --lp-btn-hover:#dfe6e5;
}

/* ========================================
  BASE
======================================== */

body {
  background-color: var(--lp-bg);
  color: var(--lp-color);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  overflow-x: hidden;
}


/* キーボード操作時のフォーカスリング（マウス操作時は非表示のまま） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
label:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #222;
  outline-offset: 3px;
  border-radius: 2px;
}

html.is-drawer-open {
  overflow: hidden;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



/* ========================================
  SECTION BASE
======================================== */

.l-lp-sec {
  position: relative;
  padding-block: calc(90 / 1920 * 100vw);
  @media all and (max-width: 767px) {
    padding-block: calc(56 / var(--fs) * 1rem);
  }
}

.l-lp-sec__in {
  max-width: calc(1560 / 1920 * 100vw);
  margin-inline: auto;
  padding-inline: calc(40 / 1920 * 100vw);
  position: relative;

  @media all and (max-width: 767px) {
    padding-inline: calc(24 / var(--fs) * 1rem);
    max-width: 100%;
    height: 100%;
  }
}

.l-lp-sec__body{
  padding-block: 0;
}

.l-lp-sec__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(33 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(7 / var(--fs) * 1rem);
  }
}

.l-lp-sec__ttl {
  width: max(220px, calc(381 / 1920 * 100vw));
  height: auto;

  @media all and (max-width: 767px) {
    width: calc(231 / var(--fs) * 1rem);
  }

  svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }
}


.l-lp-sec__ttl svg path {
  transform-origin: center center;
  transform-box: fill-box;
  opacity: 0;
}

.l-lp-sec__ttl svg .js-show{
  animation: 0.3s ease forwards pathUp;
}

.l-lp-sec__ttl-text {
  text-align: center;
  font-size: max(18px, calc(30 / 1920 * 100vw));
  line-height: calc(40 / 30);
  letter-spacing: .01em;
  font-weight: 800;

  @media all and (max-width: 767px) {
    font-size: calc(18 / var(--fs) * 1rem);
    font-feature-settings: 'palt' on;
font-weight: 900;
line-height: 140%;
  }
}


/* ========================================
display none
======================================== */

.u-hide-1200 {
  display: none;
  @media (max-width: 1200px) {
    display: block;
  }
}

/* ========================================
  BREADCRUMB
======================================== */

.l-lp-breadcrumb {
  padding-block-start: calc(16 / 1920 * 100vw);


  @media all and (max-width: 767px) {
    padding-block-start: calc(11 / var(--fs) * 1rem);
  }
}

.l-lp-breadcrumb__in {
  max-width: calc(1640 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-inline: calc(20 / var(--fs) * 1rem);
    max-width: 100%;

  }
}

.l-lp-breadcrumb__content{
  display: flex;
  align-items: center;
  gap: calc(4 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(6 / var(--fs) * 1rem);
  }
}

.l-lp-breadcrumb__text{
font-size: max(10px, calc(12 / 1920 * 100vw));
font-weight: 400;
line-height: 180%;

@media all and (max-width: 767px) {
  font-size: calc(12 / var(--fs) * 1rem);
}
}

/* ========================================
  HEADER
======================================== */

.l-lp-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(130 / 1920 * 100vw);
  z-index: 100;
  background: url(../img/header-bg.svg) no-repeat center bottom / cover;

  @media all and (max-width: 767px) {
    height: calc(70 / var(--fs) * 1rem);
    background: url(../img/header-bg-sp.svg) no-repeat center bottom / cover;
  }

}

.l-lp-header__in {
  @media all and (max-width: 767px) {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

.l-lp-header__body {
  min-height: calc(110 / 1920 * 100vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    min-height: 100%;
    height: 100%;
    gap: calc(16 / var(--fs) * 1rem);
    padding-bottom: calc(8 / var(--fs) * 1rem);
  }
}

.l-lp-header__logo {
  width: calc(226 / 1920 * 100vw);
  height: auto;
  position: relative;
  z-index: 103;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  @media all and (max-width: 767px) {
    width: calc(112 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-header-nav {
  display: flex;
  gap: calc(40 / 1520 * 100vw);
  list-style: none;
  margin: 0;
  padding: 0;

  @media (max-width: 767px) {
    display: none;
  }

}

.l-lp-header-nav__btn {
  display: inline-block;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      .l-lp-header-nav-btn-text {
        color: var(--c-white);
      }
    }

    &.--search:hover {
      .l-lp-header-nav-btn__in {
        background-color: var(--lp-search-btn-bg);
      }
    }

    &.--spread:hover {
      .l-lp-header-nav-btn__in {
        background-color: var(--lp-spread-btn-bg);
      }
    }

    &.--info:hover {
      .l-lp-header-nav-btn__in {
        background-color: var(--lp-info-btn-bg);
      }
    }

    &.--gallery:hover {
      .l-lp-header-nav-btn__in {
        background-color: var(--lp-gallery-btn-bg);
      }
    }
  }
}

.l-lp-header-nav-btn__in {
  background-color: var(--lp-bg);
  border-radius: 100vmax;
  transition: background-color 0.3s ease;
}

.l-lp-header-nav-btn__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(13 / 1920 * 100vw);
  padding-inline: calc(36 / 1920 * 100vw);
}

.l-lp-header-nav-btn-text {
  color: var(--lp-color);
  transition: color 0.3s ease;
}

.l-lp-header-nav-btn-text__label {
  font-size: max(12px, calc(18 / 1920 * 100vw));
  font-weight: 700;
}

/* ========================================
  DRAWER
======================================== */

.l-lp-drawer__icon {
  position: fixed;
  z-index: 102;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: calc(12 / var(--fs) * 1rem);
  right: calc(20 / var(--fs) * 1rem);
  width: calc(40 / var(--fs) * 1rem);
  height: auto;
  aspect-ratio: 1;
  background-color: var(--lp-drawer-btn);
  border-radius: 100vmax;


}
@media (min-width: 768px) {
  .l-lp-drawer__icon {
    display: none;
  }
}

.l-lp-drawer__icon--bar {
  display: inline-block;
  position: absolute;
  width: calc(16 / var(--fs) * 1rem);
  height: 2px;
  top: calc((100% - 2px) / 2);
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color:var(--c-white);
  border-radius: 1px;
  transition: 0.5s all;
}
.l-lp-drawer__icon--bar:nth-of-type(1) {
          transform: translateY(calc(-4 / var(--fs) * 1rem));
}

.l-lp-drawer__icon--bar:nth-of-type(2) {
 opacity: 0;
}
.l-lp-drawer__icon--bar:nth-of-type(3) {
          transform: translateY(calc(4 / var(--fs) * 1rem));
}

.l-lp-drawer__icon.js-show {
transition: 0.3 ease transform;
}
.l-lp-drawer__icon.js-show .l-lp-drawer__icon--bar:nth-of-type(1) {
  transform: rotate(45deg);
}
.l-lp-drawer__icon.js-show .l-lp-drawer__icon--bar:nth-of-type(2) {
  opacity: 0;
}
.l-lp-drawer__icon.js-show .l-lp-drawer__icon--bar:nth-of-type(3) {
  transform: rotate(-45deg);
  left: 0;
  right: 0;
}

.l-lp-drawer {
  position: fixed;
  z-index: 99;
  overflow-y: auto;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: var(--c-white);
  pointer-events: none;
}

.l-lp-drawer__icon--bar {
  transition: all 0.3s ease;
}

.l-lp-drawer {
  translate: 101%;
  transition: translate 0.3s ease;
}
.l-lp-drawer.js-show {
  translate: 0;
  pointer-events: auto;
}

.l-lp-drawer__body {
  height: 100%;
  padding-block: calc(88 / var(--fs) * 1rem) calc(40 / var(--fs) * 1rem);
  width: min(calc(275 / var(--fs) * 1rem + 40 / var(--fs) * 1rem * 2), 100%);
  padding-inline: calc(40 / var(--fs) * 1rem);
  margin-inline: auto;
display: flex;
flex-direction: column;
justify-content: center;
}

.l-lp-drawer__list {
  display: flex;
  flex-direction: column;
  row-gap: calc(40 / var(--fs) * 1rem);
}
.l-lp-drawer__list li a {
  font-size: calc(20 / var(--fs) * 1rem);
  font-weight: 400;
}


.l-lp-drawer-nav__btn {
  width: 100%;
  display: block;
  text-decoration: none;
}

.l-lp-drawer-nav-btn__in {
  background-color: var(--lp-bg);
  border-radius: 100vmax;
  transition: background-color 0.3s ease;
}

.l-lp-drawer-nav-btn__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(20 / var(--fs) * 1rem);
  min-height: calc(56 / var(--fs) * 1rem);
}

.l-lp-drawer-nav-btn-text {
  color: var(--lp-color);
  transition: color 0.3s ease;
}

.l-lp-drawer-nav-btn-text__label {
  font-size: calc(20 / var(--fs) * 1rem);
  font-weight: 600;
font-feature-settings: 'palt' on;
line-height: 160%;
letter-spacing: 2px;
}


/* ========================================
  MAIN
======================================== */

.l-lp-main {
  background-color: var(--lp-bg);
  overflow: hidden;
  padding-top: calc(130 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-top: calc(82 / var(--fs) * 1rem);
  }
}

/* ========================================
  KV
======================================== */

.l-lp-kv {
  --kv-dh: 1080;
  background-color: var(--lp-bg);
  height: calc(100dvh - calc(130 / 1920 * 100vw));
  container-type: size;
  overflow: hidden;
  text-align: center;
  position: relative;

  @media (max-width: 1024px) {
    height: auto;
    container-type: normal;
  }
}

.l-lp-kv__in{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-block:
    min(calc(90 / var(--kv-dh) * 100cqh), calc(90 / 1920 * 100vw))
    min(calc(120 / var(--kv-dh) * 100cqh), calc(120 / 1920 * 100vw));

  @media (max-width: 1024px) {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding-block: calc(90 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding-block: calc(39 / var(--fs) * 1rem) 0;
  }
}

.l-lp-kv__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media (max-width: 1024px) {
    justify-content: flex-start;
  }
}

.l-lp-kv__subtitle {
  width: min(calc(564 / var(--kv-dh) * 100cqh), calc(564 / 1920 * 100vw));
  margin-block-end: min(calc(12 / var(--kv-dh) * 100cqh), calc(12 / 1920 * 100vw));

  @media (max-width: 1024px) {
    width: calc(564 / 1920 * 100vw);
    margin-block-end: calc(12 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    width: calc(188 / var(--fs) * 1rem);
    margin-block-end: calc(-3 / var(--fs) * 1rem);
  }
}

.l-lp-kv__subtitle svg {
  overflow: visible;
}

.l-lp-kv__subtitle svg path {
  transform-origin: center center;
  transform-box: fill-box;
  opacity: 0;
}

.l-lp-kv__subtitle svg .js-show{
  animation: 0.3s 0s ease forwards pathUp;
}


.l-lp-kv__title {
  width: min(calc(1325 / var(--kv-dh) * 100cqh), calc(1325 / 1920 * 100vw));

  @media (max-width: 1024px) {
    width: calc(1325 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    width: calc(280 / var(--fs) * 1rem);
    margin-block-start: calc(4 / var(--fs) * 1rem);
  }

  picture{
    width: 100%;
  }
}

.l-lp-kv__title img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.l-lp-kv__rats {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: min(calc(12 / var(--kv-dh) * 100cqh), calc(12 / 1920 * 100vw));
  margin-block-start: min(calc(122 / var(--kv-dh) * 100cqh), calc(122 / 1920 * 100vw));
  list-style: none;
  padding: 0;
  margin-inline: 0;

  @media (max-width: 1024px) {
    gap: calc(12 / 1920 * 100vw);
    margin-block-start: calc(122 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    gap: calc(5 / var(--fs) * 1rem);
    margin-block-start: calc(48 / var(--fs) * 1rem);
  }
}

.l-lp-kv__rat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: min(calc(8 / var(--kv-dh) * 100cqh), calc(8 / 1920 * 100vw));

  @media (max-width: 1024px) {
    gap: calc(8 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    gap: calc(3 / var(--fs) * 1rem);
  }
}

.l-lp-kv__rat-text {
  width: min(calc(92 / var(--kv-dh) * 100cqh), calc(92 / 1920 * 100vw));
  height: auto;
  opacity: 0;

  @media (max-width: 1024px) {
    width: calc(92 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    width: calc(42 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-kv__rat-img {
  width: min(calc(203 / var(--kv-dh) * 100cqh), calc(203 / 1920 * 100vw));
  height: auto;

  @media (max-width: 1024px) {
    width: calc(203 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    width: calc(94 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-kv__rat-img.js-up {
  animation: 0.4s 0.3s ease forwards jsUp;
}

.l-lp-kv__rat-text.js-up{
  animation: 0.4s 0.3s ease forwards scaleUp;
}

.l-lp-kv__text {
  margin-block-start: min(calc(60 / var(--kv-dh) * 100cqh), calc(60 / 1920 * 100vw));
  width: min(calc(530 / var(--kv-dh) * 100cqh), calc(530 / 1920 * 100vw));
  height: auto;

  @media (max-width: 1024px) {
    margin-block-start: calc(60 / 1920 * 100vw);
    width: calc(530 / 1920 * 100vw);
  }

  @media all and (max-width: 767px) {
    width: calc(255 / var(--fs) * 1rem);
    margin-block-start: calc(23 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}




/* ========================================
  COMMON BUTTON
======================================== */

.l-lp-btn {
  display: inline-block;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      .l-lp-btn__in {
        background: var(--lp-btn-hover);
      }

      .l-lp-btn-text {
        color: var(--lp-color);
      }

      .l-lp-btn-arrow path{
        fill: var(--lp-color);
      }
    }
  }
}

.l-lp-btn__in {
  background-color: var(--lp-color);
  border-radius: 100vmax;
  border: 1px solid var(--lp-color);
  transition: background 0.3s ease-in-out;
}

.l-lp-btn__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 / 1920 * 100vw);
  padding-block: max(10px, calc(14 / 1920 * 100vw));
  padding-inline: calc(64 / 1920 * 100vw);
  
  @media all and (max-width: 767px) {
    align-items: center;
    gap: calc(16 / var(--fs) * 1rem);
    padding-inline: calc(24 / var(--fs) * 1rem);
    min-width: calc(311 / var(--fs) * 1rem);
    padding-block: calc(16 / var(--fs) * 1rem);
  }
}

.l-lp-btn-text {
  color: var(--c-white);
  display: flex;
  transition: color 0.3s ease-in-out;
}

.l-lp-btn-text__label {
  font-size: max(16px, calc(28 / 1920 * 100vw));
  font-weight: 800;
  letter-spacing: .01em;
  text-align: center;

  @media all and (max-width: 767px) {
    font-size: calc(20 / var(--fs) * 1rem);
    font-weight: 900;
    font-feature-settings: 'palt' on;
  }
}

.l-lp-btn-arrow__label{
  display: flex;
  justify-content: center;
  align-items: center;
}

.l-lp-btn-arrow svg {
  width: max(10px, calc(13 / 1920 * 100vw));
  height: max(10px, calc(15 / 1920 * 100vw));
  fill: var(--c-white);

  @media all and (max-width: 767px) {
    width: calc(14 / var(--fs) * 1rem);
    height: calc(16 / var(--fs) * 1rem);
  }
}

.l-lp-btn-arrow path{
  transition: fill 0.3s ease-in-out;
}

/* ========================================
  COMMON TEXT
======================================== */

.l-lp-text {
  font-size: max(16px, calc(24 / 1920 * 100vw));
  line-height: calc(44 / 24);
  letter-spacing: .01em;
  font-weight: 800;
  text-align: center;

  @media all and (max-width: 767px) {
    font-size: calc(14 / var(--fs) * 1rem);
    font-weight: 900;
    font-feature-settings: 'palt' on;
    line-height: 180%;
  }

  &.--m{
    font-size: max(14px, calc(15 / 1920 * 100vw));
    @media all and (max-width: 767px) {
      font-size: calc(15 / var(--fs) * 1rem);
    }
  }

  &.--s{
    font-size: max(12px, calc(12 / 1920 * 100vw));
    @media all and (max-width: 767px) {
      font-size: calc(12 / var(--fs) * 1rem);
    }
  }


  .coment{
    display: block;
    position: relative;
    display: flex;

    &::before {
      content: '※';
      flex-shrink: 0;
    }
  }

}

/* ========================================
  INTRO
======================================== */

.l-lp-intro {
  overflow: hidden;
  padding-block: calc(70 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: calc(52 / var(--fs) * 1rem);
  }
}

.l-lp-intro__in {
  
}

.l-lp-intro__text {
  text-align: center;
  font-size: max(16px, calc(28 / 1920 * 100vw));
  line-height: calc(62 / 28);
  letter-spacing: .01em;
  font-weight: 800;
  margin-block: 0;

  @media all and (max-width: 767px) {
    font-size: calc(15 / var(--fs) * 1rem);
    font-weight: 900;
    line-height: 206%;
  }


}

.l-lp-intro__text + .l-lp-intro__text {
  margin-block-start: calc(62 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    margin-block-start: calc(38 / var(--fs) * 1rem);
  }
}

.l-lp-intro__img {
  width: calc(698 / 1920 * 100vw);
  height: auto;

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-intro__deco {
  position: absolute;
  z-index: 0;

}

.l-lp-intro__deco img {
  width: 100%;
  height: auto;
}

.l-lp-intro__deco--cleaner {
  width: calc(160 / 1920 * 100vw);
  top: calc(-1 / 1920 * 100vw);
  right: calc(50% + calc(405 / 1920 * 100vw));
  translate: -50%;


  @media all and (max-width: 767px) {
    width: calc(51 / var(--fs) * 1rem);
    top: calc(161 / var(--fs) * 1rem);
    right: calc(50% + calc(88 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-intro__deco--necklace {
  width: calc(76 / 1920 * 100vw);
  top: calc(248 / 1920 * 100vw);
  left: calc(50% + calc(612 / 1920 * 100vw));
  translate: -50%;



  @media all and (max-width: 767px) {
    width: calc(24 / var(--fs) * 1rem);
    top: calc(272 / var(--fs) * 1rem);
    left: calc(50% + calc(154 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0.3s ease-in-out infinite alternate-reverse floating-y; */
  }

}

.l-lp-intro__deco--ring {
  width: calc(47 / 1920 * 100vw);
  top: calc(397 / 1920 * 100vw);
  left: calc(50% + calc(532 / 1920 * 100vw));
  translate: -50%;


  @media all and (max-width: 767px) {
    width: calc(15 / var(--fs) * 1rem);
    top: calc(320 / var(--fs) * 1rem);
    left: calc(50% + calc(130 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.2s 0s ease-in-out infinite alternate-reverse floating-y; */
  }

}

.l-lp-intro__deco--hat {
  width: calc(135 / 1920 * 100vw);
  bottom: calc(154 / 1920 * 100vw);
  right: calc(50% + calc(500 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(43 / var(--fs) * 1rem);
    bottom: calc(194 / var(--fs) * 1rem);
    right: calc(50% + calc(91 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.4s 0s ease-in-out infinite alternate-reverse floating-y; */
  }

}

.l-lp-intro__deco--camera {
  width: calc(114 / 1920 * 100vw);
  bottom: calc(48 / 1920 * 100vw);
  left: calc(50% + calc(641 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(36 / var(--fs) * 1rem);
    bottom: calc(109 / var(--fs) * 1rem);
    left: calc(50% + calc(144 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.6s 0.2s ease-in-out infinite alternate-reverse floating-y; */
  }

}


/* ========================================
  SEARCH（探してみよう）
======================================== */

.l-lp-search{
  padding-block-start: calc(115 / 1920 * 100vw);
  @media all and (max-width: 767px) {
    padding-block-start: calc(55 / var(--fs) * 1rem);
  }
}

.l-lp-search__in{
  @media all and (max-width: 1024px) {
    max-width: calc(924 / var(--fs) * 1rem);
    padding-inline: calc(40 / var(--fs) * 1rem);
  }

  @media all and (max-width: 767px) {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

.l-lp-search__text {
  margin-block-start: calc(50 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    margin-block-start: calc(25 / var(--fs) * 1rem);
  }
}
.l-lp-search__deco {
  position: absolute;

  img {
    width: 100%;
    height: auto;
  }

  
}

.l-lp-search__deco--book {
  width: calc(67 / 1920 * 100vw);
  bottom: calc(424 / 1920 * 100vw);
  right: calc(50% + calc(469 / 1920 * 100vw));  
  translate: -50%;

  @media (min-width: 1920px) {
    width: 67px;
    bottom: 424px;
    right: calc(50% + 469px);
  }

  @media all and (max-width: 1024px) {
    display: none;
  }


  @media all and (max-width: 767px) {
    display: block;
    width: calc(21 / var(--fs) * 1rem);
    bottom: calc(-30 / var(--fs) * 1rem);
    right: calc(50% + calc(120 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-search__deco--cup {
  width: calc(98 / 1920 * 100vw);
  bottom: calc(94 / var(--fs) * 1rem);
  left: calc(50% + calc(553 / 1920 * 100vw));
  translate: -50%;

  @media (min-width: 1920px) {
    width: 98px;
    left: calc(50% + 553px);
  }

  @media all and (max-width: 767px) {
    display: block;
    width: calc(31 / var(--fs) * 1rem);
    bottom: calc(-70 / var(--fs) * 1rem);
    left: calc(50% + calc(140 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0.6s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-search__content {
  width: 100%;
  margin-inline: auto;
  margin-block-start: calc(103 / 1920 * 100vw);
  position: relative;

  @media (max-width: 1024px) {
    margin-block-start: calc(70 / var(--fs) * 1rem);
  }

  @media all and (max-width: 767px) {
    margin-block-start: calc(66 / var(--fs) * 1rem);
    max-width: calc(295 / var(--fs) * 1rem);
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

.l-lp-search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: min(calc(70 / 1920 * 100vw), 70px) min(calc(54 / 1920 * 100vw), 54px);
  list-style: none;
  padding: 0;
  margin: 0;
  
  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(70 / var(--fs) * 1rem) calc(54 / var(--fs) * 1rem);
  }
  
  @media all and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    gap: calc(35 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem);
  }

}

.l-lp-search-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(12 / 1920 * 100vw);
  border-radius: calc(17 / var(--fs) * 1rem);
  padding: calc(30 / 1920 * 100vw) calc(15 / 1920 * 100vw);
  background-color: var(--c-white);
  border: 3px solid var(--lp-color);
  position: relative;


  @media (min-width: 1920px) {
    gap: 12px;
    padding: 30px 15px;
  }

  @media all and (max-width: 1024px) {
    padding: calc(30 / var(--fs) * 1rem) calc(25 / var(--fs) * 1rem);
  }
  
  @media all and (max-width: 767px) {
    padding: calc(24 / var(--fs) * 1rem);
    padding-bottom: 0;
    gap: 0;
    border: 2px solid var(--lp-color);
    justify-content: center;
    border-radius: calc(8 / var(--fs) * 1rem);
    min-height: calc(346 / var(--fs) * 1rem);
  }


}

.l-lp-search-grid__card {
  width: 100%;
  padding-inline: calc(20 / 1920 * 100vw);
  height: auto;

  @media all and (max-width: 767px) {
    padding-inline: 0;
  }

  svg {
    width: 100%;
    height: auto;
  }
}



.l-lp-search-grid__card-text {
  font-size: max(16px, calc(22 / 1920 * 100vw));
  line-height: calc(38 / 24);
  letter-spacing: .01em;
  font-weight: 800;
  text-align: center;
  margin-block: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-feature-settings: "palt";


@media all and (min-width: 768px) and (max-width: 1024px) {
 white-space: nowrap;
}

  @media all and (max-width: 767px) {
    font-size: calc(13 / var(--fs) * 1rem);
    line-height: 180%;
    font-weight: 900;
    white-space: nowrap;
    padding-bottom: calc(4 / var(--fs) * 1rem);
  }


}

.l-lp-search-grid__label {
  position: absolute;
  width: max(100px, calc(200 / 1920 * 100vw));
  height: auto;
  aspect-ratio: 1;
  top: calc(-44 / 1920 * 100vw);
  left: calc(-44 / 1920 * 100vw);

  @media (max-width: 1024px) {
    width: calc(155 / var(--fs) * 1rem);
    top: calc(-44 / var(--fs) * 1rem);
    left: calc(-44 / var(--fs) * 1rem);
  }

  @media all and (max-width: 767px) {
    width: calc(112 / var(--fs) * 1rem);
    height: auto;
    aspect-ratio: 1;
    top: calc(-19 / var(--fs) * 1rem);
    left: calc(-20 / var(--fs) * 1rem);
  }
}

.l-lp-search-grid__label img {
  width: 100%;
  height: auto;
}

.l-lp-search-grid__item:last-child {
  grid-column: 2 / 3;

  @media (max-width: 1024px) {
    grid-column: auto;
  }
}




.l-lp-search-grid__card1{
  .cls-1, .cls-2 {
    fill: none;
  }

  .cls-2 {
    stroke: #231815;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
  }

  .cls-3 {
    fill: #61c2e8;
  }

  .cls-4 {
    fill: #ea6061;
  }

  .cls-5 {
    fill: #dfe6e5;
  }

  .cls-6 {
    fill: #fff;
  }

  .cls-7 {
    fill: #5eb27b;
  }

  .cls-8 {
    fill: #fff100;
  }

  .cls-9 {
    clip-path: url(#clippath);
  }
}

.l-lp-search-grid__card2{
  .cls-1, .cls-2, .cls-3 {
    fill: none;
  }

  .cls-2 {
    stroke-width: 4px;
  }

  .cls-2, .cls-3 {
    stroke: #231815;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .cls-3 {
    stroke-width: 3.63px;
  }

  .cls-4 {
    fill: #61c2e8;
  }

  .cls-5 {
    fill: #ea6061;
  }

  .cls-6 {
    fill: #dfe6e5;
  }

  .cls-7 {
    fill: #fff;
  }

  .cls-8 {
    fill: #5eb27b;
  }

  .cls-9 {
    fill: #fff100;
  }

  .cls-10 {
    fill: #e781a9;
  }

  .cls-11 {
    clip-path: url(#clippath);
  }
}

.l-lp-search-grid__card3{
  .cls-1 {
    fill: none;
  }

  .cls-2 {
    fill: #61c2e8;
  }

  .cls-3 {
    fill: #ea6061;
  }

  .cls-4 {
    fill: #dfe6e5;
  }

  .cls-5 {
    fill: #fff;
  }

  .cls-6 {
    fill: #fff100;
  }

  .cls-7 {
    fill: #e781a9;
  }

  .cls-8 {
    clip-path: url(#clippath);
  }
}
.l-lp-search-grid__card4{

  .cls-1 {
    fill: none;
  }

  .cls-2 {
    fill: #8f70ae;
  }

  .cls-3 {
    fill: #ea6061;
  }

  .cls-4 {
    fill: #dfe6e5;
  }

  .cls-5 {
    fill: #fff;
  }

  .cls-6 {
    fill: #5eb27b;
  }

  .cls-7 {
    clip-path: url(#clippath);
  }
}

.l-lp-search-grid__card5{
  .cls-1, .cls-2 {
    fill: none;
  }

  .cls-2 {
    stroke: #231815;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4px;
  }

  .cls-3 {
    fill: #8f70ae;
  }

  .cls-4 {
    fill: #ea6061;
  }

  .cls-5 {
    fill: #fff;
  }

  .cls-6 {
    fill: #fff100;
  }

  .cls-7 {
    fill: #e781a9;
  }

  .cls-8 {
    clip-path: url(#clippath);
  }
}

.l-lp-search-grid__card6{

  .cls-1 {
    fill: none;
  }

  .cls-2 {
    fill: #61c2e8;
  }

  .cls-3 {
    fill: #ea6061;
  }

  .cls-4 {
    fill: #dfe6e5;
  }

  .cls-5 {
    fill: #fff;
  }

  .cls-6 {
    fill: #5eb27b;
  }

  .cls-7 {
    fill: #fff100;
  }

  .cls-8 {
    clip-path: url(#clippath);
  }
}

.l-lp-search-grid__card7{

  .cls-1 {
    fill: none;
  }

  .cls-2 {
    fill: #61c2e8;
  }

  .cls-3 {
    fill: #ea6061;
  }

  .cls-4 {
    fill: #dfe6e5;
  }

  .cls-5 {
    fill: #fff;
  }

  .cls-6 {
    fill: #fff100;
  }

  .cls-7 {
    clip-path: url(#clippath);
  }

}


/* ========================================
  SPREAD（ひろげよう）
======================================== */

.l-lp-spread {
  padding-block: calc(111 / 1920 * 100vw) calc(100 / 1920 * 100vw);
  

  @media all and (max-width: 767px) {
    padding-block: calc(61 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }
}

.l-lp-spread__in{
  @media all and (max-width: 767px) {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
}

.l-lp-spread__rats {
  display: flex;
  margin-top: calc(40 / var(--fs) * 1rem);
  justify-content: space-between;
  width: 100%;
  position: relative;
  height: calc(189 / var(--fs) * 1rem);
  @media all and (min-width: 768px) {
    display: none;
  }
}

.l-lp-spread__rat {
  position: absolute;
  width: calc(646 / 1920 * 100vw);
  height: auto;

  @media all and (max-width: 767px) {
    width: calc(190 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-spread__rat--left {
  top: calc(28 / 1920 * 100vw);
  left: calc(-70 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    left: calc(-38 / var(--fs) * 1rem);
    top: 0;
  }

}

.l-lp-spread__rat--right {
  top: calc(28 / 1920 * 100vw);
  right: calc(-70 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    right: calc(-38 / var(--fs) * 1rem);
    top: 0;
  }
}


.l-lp-spread__ttl {
  width: max(200px, calc(320 / 1920 * 100vw));

  @media all and (max-width: 767px) {
    width: calc(208 / var(--fs) * 1rem);
  }
}


.l-lp-spread__text{
  margin-block-start: calc(56 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    margin-block-start: calc(28 / var(--fs) * 1rem);
  }
}

.l-lp-spread__btn {
  margin-top: calc(70 / 1920 * 100vw);
  text-align: center;

  @media all and (max-width: 767px) {
    margin-top: calc(40 / var(--fs) * 1rem);
  }
}

.l-lp-spread__comment{
font-feature-settings: 'palt' on;
font-size: max(10px, 14 / 1920 * 100vw);
font-weight: 500;
line-height: 140%;
text-align: center;
margin-top: calc(40 / 1920 * 100vw);
position: relative;
padding-left: max(10px, 14 / 1920 * 100vw);
width: fit-content;
margin-inline: auto;

  @media all and (max-width: 767px) {
    font-size: calc(12 / var(--fs) * 1rem);
    text-align: left;
    padding-left: calc(12 / var(--fs) * 1rem);
    margin-top: calc(40 / 375 * 100vw);
  }
}

.l-lp-spread__comment::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
  font-size: max(10px, 14 / 1920 * 100vw);
  font-weight: 500;
line-height: 140%;

  @media all and (max-width: 767px) {
    font-size: calc(12 / var(--fs) * 1rem);
  }
}


/* ========================================
  INFO（もっと知ろう）
======================================== */

.l-lp-info {
  text-align: center;
  padding-block: calc(50 / 1920 * 100vw) calc(200 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: calc(50 / var(--fs) * 1rem) calc(110 / var(--fs) * 1rem);
  }
}

.l-lp-info__in{
}

.l-lp-info__deco {
  position: absolute;

  img {
    width: 100%;
    height: auto;
  }

}

.l-lp-info__deco--pc {
  width: calc(144 / 1920 * 100vw);
  top: calc(-59 / 1920 * 100vw);
  right: calc(50% + calc(381 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(46 / var(--fs) * 1rem);
    top: calc(-35 / var(--fs) * 1rem);
    right: calc(50% + calc(95 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-info__deco--coin {
  width: calc(89 / 1920 * 100vw);
  top: calc(84 / 1920 * 100vw);
  left: calc(50% + calc(613 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(28 / var(--fs) * 1rem);
    top: calc(-11 / var(--fs) * 1rem);
    left: calc(50% + calc(150 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0.6s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-info__deco--tonkachi {
  width: calc(66 / 1920 * 100vw);
  bottom: calc(-62 / 1920 * 100vw);
  right: calc(50% + calc(563 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(21 / var(--fs) * 1rem);
    bottom: calc(-53 / var(--fs) * 1rem);
    right: calc(50% + calc(143 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0.3s ease-in-out infinite alternate-reverse floating-y; */
  }
}


.l-lp-info__deco--wrench {
  width: calc(65 / 1920 * 100vw);
  bottom: calc(-104 / 1920 * 100vw);
  right: calc(50% + calc(492 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(22 / var(--fs) * 1rem);
    bottom: calc(-69 / var(--fs) * 1rem);
    right: calc(50% + calc(112 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0.9s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-info__deco--glasses {
  width: calc(95 / 1920 * 100vw);
  top: calc(100% + 86 / 1920 * 100vw);
  left: calc(50% + calc(478 / 1920 * 100vw));
  translate: -50%;

  @media all and (max-width: 767px) {
    width: calc(29 / var(--fs) * 1rem);
    top: calc(100% + 32 / var(--fs) * 1rem);
    left: calc(50% + calc(140 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.3s 0s ease-in-out infinite alternate-reverse floating-y; */
  }
}


.l-lp-info__header {
  gap: calc(68 / 1920 * 100vw);
  margin-block-end: calc(68 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(10 / var(--fs) * 1rem);
    margin-block-end: calc(40 / var(--fs) * 1rem);
  }
}

.l-lp-info__ttl {
  width: max(220px, calc(381 / 1920 * 100vw));

  @media all and (max-width: 767px) {
    width: calc(236 / var(--fs) * 1rem);
  }
}

.l-lp-info__btn {
  text-align: center;

}


/* ========================================
  GALLERY（見てみよう）
======================================== */

.l-lp-gallery {
  padding-block: calc(103 / 1920 * 100vw) calc(100 / 1920 * 100vw);
  text-align: center;

  @media all and (max-width: 767px) {
    padding-block: calc(72 / var(--fs) * 1rem) calc(40 / var(--fs) * 1rem);
  }
}

.l-lp-gallery__in {
  max-width: calc(1600 / 1920 * 100vw);
  padding-inline: calc(100 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-inline: calc(24 / var(--fs) * 1rem);
  }
}

.l-lp-gallery__header{
  margin-block-end: calc(73 / 1400 * 100vw);

  @media all and (max-width: 767px) {
    margin-block-end: calc(40 / var(--fs) * 1rem);
  }
}

.l-lp-gallery__ttl {
  width: calc(321 / 1400 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(208 / var(--fs) * 1rem);
  }
}

.l-lp-gallery__ttl-text {
  width: calc(401 / 1400 * 100vw);
}

.l-lp-gallery__grid-content {
  margin-inline: auto;

  @media all and (max-width: 767px) {
   max-width: calc(500 / var(--fs) * 1rem);
  }

}

.l-lp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(35 / 1400 * 100vw) calc(40 / 1400 * 100vw);
/* 
  @media (max-width: 1024px) {
    grid-template-columns: repeat(2, 1fr);
  } */

  @media all and (max-width: 767px) {
    gap: calc(16 / var(--fs) * 1rem) calc(15 / 327 * 100vw);
}
}

.l-lp-gallery-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(12 / 1400 * 100vw);
  position: relative;

  @media all and (max-width: 767px) {
    gap: calc(5 / var(--fs) * 1rem);
  }

  &::after{
    position: absolute;
    content: '';
    width: calc(122 / 320 * 100vw);
    height: calc(131 / 320 * 100vw);
    z-index: 0;
    top: calc(60 / 320 * 100vw);
  }

  &:nth-of-type(4) {
    &::after {
      left: calc(100% - calc(10 / 320 * 100vw));
      background: url(../img/right-rat-small.svg) center center / contain no-repeat;
      /* transform: translateX(-100%);
      animation: 19.0s ease forwards infinite alternate galleryRat4; */
      @media all and (max-width: 767px) {
        display: none;
      }
    }
  }

  &:nth-of-type(5) {
    &::after {
      right: calc(100% - calc(10 / 320 * 100vw));
      background: url(../img/left-rat-small.svg) center center / contain no-repeat;
      /* transform: translateX(100%);
      animation: 17.0s 1.5s ease forwards infinite alternate galleryRat5;    */
      @media all and (max-width: 767px) {
        display: none;
      }
    }
  }
}


@keyframes galleryRat4{
  0% {
    transform: translateX(-100%);
  }
  8% {
    transform: translateX(-100%);
  }
  10% {
    transform: translateX(0%);
  }
  16% {
    transform: translateX(0%);
  }
  18% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(-100%);
  }
  32% {
    transform: translateX(0%);
  }
  40% {
    transform: translateX(0%);
  }
  42% {
    transform: translateX(-100%);
  }
  48% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  64% {
    transform: translateX(0%);
  }
  66% {
    transform: translateX(-100%);
  }
  74% {
    transform: translateX(-100%);
  }
  76% {
    transform: translateX(0%);
  }
  85% {
    transform: translateX(0%);
  }
  87% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes galleryRat5{
  0% {
    transform: translateX(100%);
  }
  10% {
    transform: translateX(100%);
  }
  12% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  22% {
    transform: translateX(100%);
  }
  30% {
    transform: translateX(100%);
  }
  32% {
    transform: translateX(0%);
  }
  40% {
    transform: translateX(0%);
  }
  42% {
    transform: translateX(100%);
  }
  60% {
    transform: translateX(100%);
  }
  62% {
    transform: translateX(0%);
  }
  68% {
    transform: translateX(0%);
  }
  70% {
    transform: translateX(100%);
  }
  74% {
    transform: translateX(100%);
  }
  76% {
    transform: translateX(0%);
  }
  85% {
    transform: translateX(0%);
  }
  87% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.l-lp-gallery-grid__card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(17 / 320 * 100vw);
  background: var(--c-gray-200);
  border: calc(3 / var(--fs) * 1rem) solid var(--lp-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(28 / 320 * 100vw);
  font-weight: 800;
  position: relative;
  z-index: 1;
  padding: calc(20 / 320 * 100vw);

  @media all and (max-width: 767px) {
    padding: calc(10 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    border: 2px solid var(--lp-color);
    border-radius: calc(8 / var(--fs) * 1rem);
  }
}

.l-lp-gallery-grid__card-text {
  font-size: calc(22 / 320 * 100vw);
  line-height: calc(38 / 24);
  letter-spacing: .01em;
  font-weight: 800;
  text-align: center;
  margin-block: 0;

  @media all and (max-width: 767px) {
    font-size: calc(13 / var(--fs) * 1rem);
    font-weight: 900;
    line-height: 180%;
  }
}

.l-lp-gallery__rat {
  position: absolute;
  width: calc(130 / 1400 * 100vw);

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-gallery__rat--left {
  bottom: calc(80 / 1400 * 100vw);
  left: 0;
}

.l-lp-gallery__rat--right {
  bottom: calc(200 / 1400 * 100vw);
  right: 0;
}

.l-lp-gallery__subtitle {
  font-size: calc(22 / 1400 * 100vw);
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0;
}

.l-lp-gallery__grid {
  max-width: calc(1480 / var(--fs) * 1rem);
  margin-inline: auto;
  padding-inline: calc(60 / 1400 * 100vw);

  img {
    width: 100%;
    height: auto;
  }
}


/* ========================================
  FOOTER
======================================== */

.l-lp-footer {
  background-color: var(--lp-bg);
  position: relative;
}

.l-lp-footer__in{
}

.l-lp-footer__upper {
  position: relative;
  padding-block: 0 calc(100 / var(--fs) * 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(50 / 1920 * 100vw);

  @media all and (max-width: 767px) {
   gap: calc(20 / var(--fs) * 1rem);
   padding-block: 0 calc(56 / var(--fs) * 1rem);
  }
}

.l-lp-footer__upper.--top {
  padding-block: calc(0 / 1920 * 100vw) calc(200 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    padding-block: 0 calc(40 / var(--fs) * 1rem);
  }
}

.l-lp-footer__deco {
  position: absolute;

  img {
    width: 100%;
    height: auto;
  }

}

.l-lp-footer__deco--suitcase {
  width: calc(96 / 1920 * 100vw);
  top: calc(160 / 1920 * 100vw);
  left: calc(50% + calc(-466 / 1920 * 100vw));
  translate: -50%;


  @media all and (max-width: 767px) {
    width: calc(30 / var(--fs) * 1rem);
    top: calc(60 / var(--fs) * 1rem);
    left: calc(50% + calc(-115 / var(--fs) * 1rem));
  }

  img{
    /* animation: 1.5s 0s ease-in-out infinite alternate-reverse floating-y; */
  }
}

.l-lp-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(60 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    gap: calc(24 / var(--fs) * 1rem);
  }
}

.l-lp-footer__social-link {
  width: calc(100 / 1920 * 100vw);
  height: auto;
  aspect-ratio: 1;
  display: block;
  transition: opacity 0.2s ease;

  @media all and (max-width: 767px) {
    width: calc(40 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media (hover: hover) {
  .l-lp-footer__social-link:hover {
    opacity: 0.7;
  }
}

.l-lp-footer__logo {
  width: calc(400 / 1920 * 100vw);
  height: auto;


  @media all and (max-width: 767px) {
    width: calc(135 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-footer__logo-reuse {
  width: calc(400 / 1920 * 100vw);
  height: auto;

  @media all and (max-width: 767px) {
    width: calc(135 / var(--fs) * 1rem);
  }

  img {
    width: 100%;
    height: auto;
    display: block;
  }
}

.l-lp-footer__rats {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: calc(20 / 1920 * 100vw);
  width: 118%;
  margin-inline-start: calc(-194 / 1920 * 100vw);
  
  @media all and (max-width: 767px) {
    gap: calc(32 / 1920 * 100vw);
    margin-inline: calc(-50% + 50%);
    padding-inline: calc(50% - 50%);
    overflow: hidden;
    width: 100%;
  }
}

.l-lp-footer__rats-img {
  width: calc(202 / 1920 * 100vw);
  height: auto;
  flex-shrink: 0;

  @media all and (max-width: 767px) {
    width: calc(100 / 390 * 100vw);
  }

  img {
    width: 100%;
    height: auto;
  }
}

.l-lp-footer__rats-img.--go-to-top {
  width: calc(262 / 1920 * 100vw);
  margin-inline-start: calc(-55 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    width: calc(130 / 390 * 100vw);
    margin-inline-start: calc(-20 / 390 * 100vw);
  }

  @media (any-hover: hover) {
    &:hover {
      animation: bound 4s ease forwards;
    }
  }
}


.l-lp-footer__copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 1920 * 100vw);
  background-color: var(--lp-color);
  padding-block: calc(30 / 1920 * 100vw);
  padding-inline: calc(40 / 1920 * 100vw);
  text-align: center;

  @media all and (max-width: 767px) {
    margin-top: calc(-40 / var(--fs) * 1rem);
    padding-block: calc(13 / var(--fs) * 1rem);
    gap: calc(10 / var(--fs) * 1rem);
  }
}

/* ========================================
  FOOTER PRIVACY LINK
======================================== */

.l-lp-footer__privacy {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: var(--lp-color);
  padding-block: calc(30 / 1920 * 100vw) calc(0 / 1920 * 100vw);

  @media all and (max-width: 767px) {
    margin-top: calc(-40 / var(--fs) * 1rem);
    padding-block: calc(13 / var(--fs) * 1rem) calc(0 / var(--fs) * 1rem);
  }

  & + .l-lp-footer__copyright {
    @media all and (max-width: 767px) {
      margin-top: 0;
    }
  }
}

.l-lp-footer__privacy-btn {
  display: inline-block;
  padding-block: max(8px, calc(10 / 1920 * 100vw));
  padding-inline: max(24px, calc(40 / 1920 * 100vw));
  border: 1px solid var(--lp-bg);
  border-radius: 100vmax;
  background-color: var(--lp-bg);
  color: var(--lp-color);
  font-size: max(12px, calc(16 / 1920 * 100vw));
  font-weight: 800;
  letter-spacing: .01em;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;

  @media all and (max-width: 767px) {
    font-size: calc(12 / var(--fs) * 1rem);
    font-weight: 900;
  }

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--lp-color);
      color: var(--lp-bg);
    }
  }

  &:focus-visible {
    outline-color: var(--lp-bg);
  }
}

.l-lp-footer__copyright small {
  font-size: calc(16 / 1920 * 100vw);
  color: var(--lp-bg);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  letter-spacing: .01em;
  font-weight: 800;


  @media all and (max-width: 767px) {
    font-size: calc(10 / var(--fs) * 1rem);
    font-weight: 900;
  }
}




/* ========================================
  アニメーション
======================================== */

.js-stagger-item,.js-stagger-item-pc{
    opacity: 0;
}

.js-stagger-item-pc{
 @media all and (max-width: 767px) {
 opacity: 1;
 }
}

.js-stagger-item.js-show,.js-stagger-item-pc.js-show{
    animation: 0.5s ease-in-out forwards scaleUp2;
}

.js-stagger-item.js-show.--delay{
    animation: 0.5s ease-in-out forwards scaleUp2 0.35s;

    @media all and (max-width: 767px) {
      animation: 0.5s ease-in-out forwards scaleUp2 0.8s;
    }
}

.l-lp-animated__fadeIn{
  opacity: 0;
  /* rotate: -15deg;
  transition: opacity 0.3s ease, rotate 0.3s ease; */
}

.l-lp-animated__fadeIn.js-show{
  opacity: 1;
  /* rotate: 0deg; */
  animation: 0.5s ease-in-out forwards scaleUp2;
}

/* 
.l-lp-spread__rad-right-svg, .l-lp-spread__rad-left-svg {
  transform-origin: center left;
  transform-box: fill-box;
}

.l-lp-spread__rad-left-svg .--hand{
animation: 1.3s linear forwards infinite alternate-reverse handAnimationLeft;
}

.l-lp-spread__rad-right-svg .--hand{
animation: 1.3s linear forwards infinite alternate-reverse handAnimationRight;
} */

@keyframes handAnimationLeft {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(calc(-75 / var(--fs) * 1rem), calc(60 / var(--fs) * 1rem)) rotate(-14deg);
  }
}

@keyframes handAnimationRight {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(0, calc(-75 / var(--fs) * 1rem)) rotate(7deg);
  }
}

@keyframes pathUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scaleUp {
  0% {
    opacity: 0;
    scale: 0.8;
    transform: translateY(0);
  }
  50% {
    scale: 1.3;
    transform: translateY(-15px);
    opacity: 1;
  }
  100% {
    scale: 1;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleUp2 {
  0% {
    opacity: 0;
    scale: 0.9;
    transform: translateY(20px);
  }
  50% {
    scale: 1.1;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}



@keyframes jsUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}


@keyframes bound {
  0% { transform:translateY(0) }
  5% { transform:translateY(-50px) }
  10% { transform:translateY(0) }
  100% { transform:translateY(0) }
}
/* 

.l-lp-search-grid__card1 .animated-card1-1 {
  animation: 6.0s 0s ease forwards infinite animated-card1;
  }
  
  .l-lp-search-grid__card1 .animated-card1-2 {
  animation: 6.0s 0.3s ease forwards infinite animated-card1;
  }
  
  .l-lp-search-grid__card1 .animated-card1-3 {
  animation: 6.0s 0.6s ease forwards infinite animated-card1;
  }
  @keyframes animated-card1 {
    0% {
      opacity: 0;
    }
    20%{
      opacity: 0;
    }
    30%{
      opacity: 1;
    }
    35%{
      opacity: 1;
    }
    45%{
      opacity: 0;
    }
  
    75%{
      opacity: 0;
    }
    80%{
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    95% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  .l-lp-search-grid__card2 .animated-card2-1 {
  animation: 4.0s 0s ease forwards infinite animated-card2-1;
  }
  
  .l-lp-search-grid__card2 .animated-card2-2 {
  animation: 4.0s 0s ease forwards infinite animated-card2-2;
  }
  
  .l-lp-search-grid__card2 .animated-card2-3 {
  
    animation: 4.0s 0s ease forwards infinite animated-card2-3;
  }
  
  @keyframes animated-card2-1 {
    0% {
      opacity: 0;
    }
    10%{
      opacity: 0;
    }
    30%{
      opacity: 1;
    }
    90%{
      opacity: 1;
    }
  100%{
    opacity: 0;
  }
  }
  
  @keyframes animated-card2-2 {
    0% {
      opacity: 0;
    }
    20%{
      opacity: 0;
    }
    40%{
      opacity: 1;
    }
    90%{
      opacity: 1;
    }
  100%{
    opacity: 0;
  }
  }
  
  @keyframes animated-card2-3 {
    0% {
      opacity: 0;
    }
    30%{
      opacity: 0;
    }
    50%{
      opacity: 1;
    }
    90%{
      opacity: 1;
    }
  100%{
    opacity: 0;
  }
  }
  
  
  .l-lp-search-grid__card3 .animated-card3-1 {
    transform-origin: center center;
    transform-box: fill-box;
    animation: 2.0s 0s linear backwards infinite animated-card3-1;
  }
  
  .l-lp-search-grid__card3 .animated-card3-2 {
    transform-origin: center left;
    transform-box: fill-box;
    animation: 2.0s 0s linear backwards infinite animated-card3-2;
  }
  
  .l-lp-search-grid__card3 .animated-card3-3 {
    transform-origin: center right;
    transform-box: fill-box;
    animation: 2.0s 0s linear backwards infinite animated-card3-2;
  }
  
  .l-lp-search-grid__card3 .animated-card3-4 {
    transform-origin: center right;
    transform-box: fill-box;
    animation: 2.0s 0s linear backwards infinite animated-card3-2;
  }
  
  @keyframes animated-card3-1 {
    0% {
    rotate: 25deg;
    }
    50%{
      rotate: -25deg;
    }
    100%{
      rotate: 25deg;
    }
  }
  
  @keyframes animated-card3-2 {
    0% {
    rotate: 10deg;
    }
    50%{
      rotate: -10deg;
    }
    100%{
      rotate: 10deg;
    }
  }
  
  
  .l-lp-search-grid__card4 .animated-card4-1 {
    animation: 4.0s 0s ease forwards infinite animated-card2-1;
    }
    
    .l-lp-search-grid__card4 .animated-card4-2 {
    animation: 4.0s 0s ease forwards infinite animated-card2-2;
    }
    
    .l-lp-search-grid__card4 .animated-card4-3 {
      animation: 4.0s 0s ease forwards infinite animated-card2-3;
    }
  
  .l-lp-search-grid__card5 .animated-card5-1 {
    animation: 4.0s 0s ease forwards infinite animated-card5-1;
    }
    
    .l-lp-search-grid__card5 .animated-card5-2 {
      transform-origin: center center;
      transform-box: fill-box;
    animation: 3.0s 0s ease forwards infinite animated-card5-2;
    }
  
  
  @keyframes animated-card5-1 {
    0% {
      transform: translateY(0);
    }
    50%{
      transform: translateY(-50px);
    }
    100%{
      transform: translateY(0);
    }
  }
  
  @keyframes animated-card5-2 {
    0% {
      rotate: 10deg;
      }
      50%{
        rotate: -10deg;
      }
      100%{
        rotate: 10deg;
      }
  }
  
  .l-lp-search-grid__card6 .animated-card6-1 {
    transform-origin: 78.14% 72.58%;
    transform-box: view-box;
  animation: 4.0s 0s linear backwards infinite animated-card6-1;
  }
  
  .l-lp-search-grid__card6 .animated-card6-2 {
    transform-origin: 78.14% 72.58%;
    transform-box: view-box;
  animation: 6.0s linear backwards infinite animated-card6-1;
  }
  
  .l-lp-search-grid__card6 .animated-card6-3,
  .l-lp-search-grid__card6 .animated-card6-4,
  .l-lp-search-grid__card6 .animated-card6-5,
  .l-lp-search-grid__card6 .animated-card6-6,
  .l-lp-search-grid__card6 .animated-card6-7 {
    transform-origin: center center;
    transform-box: fill-box;
  }
  .l-lp-search-grid__card6 .animated-card6-3 {
  animation: 2.0s linear backwards infinite animated-card3-2;
  }
  .l-lp-search-grid__card6 .animated-card6-4 {
  animation: 2.0s 0.3s linear backwards infinite animated-card3-2;
  }
  .l-lp-search-grid__card6 .animated-card6-5 {
  animation: 1.5s linear backwards infinite animated-card3-2;
  }
  .l-lp-search-grid__card6 .animated-card6-6 {
  animation: 2.2s 0.2s linear backwards infinite animated-card3-2;
  }
  .l-lp-search-grid__card6 .animated-card6-7 {
  animation: 2.0s 0.4s linear backwards infinite animated-card3-2;
  }
  
  
  @keyframes animated-card6-1 {
    0% {
      rotate: 0deg;
      }
      100%{
        rotate: 360deg;
      }
  }
  
  
  .l-lp-search-grid__card7 .animated-card7-1 {
    animation: 3.0s 0s ease forwards infinite animated-card7-1;
    }
  
  .l-lp-search-grid__card7 .animated-card7-2 {
    animation: 3.4s 0.4s ease forwards infinite animated-card7-1;
    }
  
  .l-lp-search-grid__card7 .animated-card7-3 {
    animation: 4.0s 0.8s ease forwards infinite animated-card7-1;
    }
  
  .l-lp-search-grid__card7 .animated-card7-4 {
    animation: 3.2s 0.6s ease forwards infinite animated-card7-1;
    }
  
  
  @keyframes animated-card7-1 {
    0% {
      transform: translateY(0) ;
    }
    50%{
      transform: translateY(25px);
    }
    100%{
      transform: translateY(0);
    }
  }
     */