body.page-template-template-rakusta-lp {
  overflow: unset;
}

.template-rakusta-lp__root {
  background: #FFFFFF;

  .template-rakusta-lp__body {
    position: relative;
    max-width: 100vw;
    overflow: hidden;
  }

  .template-rakusta-lp__main {
    position: relative;
    z-index: 1;
    @media (min-width: 0px) {
      color: gray;
    }
    @media (min-width: 768px) {
      color: white;
    }
  }

  .rlp-bg-top-gray-triangle {
    --oneSideLength: 300vw;
    position: absolute;
    background: #F8F8F8;
    z-index: 0;
    @media (min-width: 0px) {
      transform-origin: center;
      transform: rotate(45deg);
      width:  var(--oneSideLength);
      height: var(--oneSideLength);
      left:   calc( (sqrt(2) * var(--oneSideLength) / 2) * -1);
      top:    calc(((sqrt(2) * var(--oneSideLength) / 2) * -1) + (200 * var(--as1Px)));
    }
    /* TODO: うまくいかない */
    @media (min-width: 768px) {
      transform-origin: center;
      transform: rotate(-18.25deg);
      /*width:  calc(3000 * var(--as1Px));*/
      /*height: calc(3000 * var(--as1Px));*/
      width:  var(--oneSideLength);
      height: var(--oneSideLength);
      left:   calc( (sqrt(2) * var(--oneSideLength) / 2) * -1);
      top:    calc(((sqrt(2) * var(--oneSideLength) / 2) * -1) + (-285 * var(--as1Px)));
      /*bottom: calc(100% - (500 * var(--as1Px)));*/
    }
  }


  .rlp-section {
    @media (min-width: 0px) {
      padding: calc(40 * var(--as1Px)) 0;
    }
    @media (min-width: 768px) {
      padding: calc(80 * var(--as1Px)) 0;
    }
    &.rlp-section--news {
      @media (min-width: 0px) {
        padding-top: calc(56 * var(--as1Px));
      }
      @media (min-width: 768px) {
        padding: calc(120 * var(--as1Px)) 0 calc(80 * var(--as1Px));
      }
    }
    &.rlp-section--case-study {
      position: relative;
      @media (min-width: 768px) {
        padding: 0;
      }
      .rlp-section__background {
        position: absolute;
        height: 100%;
        background-color: #FDF3CE;
        @media (min-width: 0px) {
          width: calc(777 * var(--as1Px));
        }
        @media (min-width: 768px) {
          width: 100vw;
        }
        img {
          width: 100%;
          position: absolute;
          top: -4px; /* 背景が上からチラ見してるので調整 */
          left: 0;
        }
      }
    }
    &.rlp-section--usecase {
      @media (min-width: 768px) {
        padding: calc(160 * var(--as1Px)) 0;
      }
      background:
        /*top/calc(1024 * var(--as1Px)) url(_images_/bg-geometric.png),*/
        top/calc(var(--asContentMaxWidth)) url(_images_/bg-geometric.png),
        linear-gradient(180deg, rgba(247, 201, 1, 0.2) 0%, rgba(229, 0, 81, 0.1) 48.57%, rgba(247, 201, 1, 0.2) 100.03%);
    }
    &.rlp-section--function {
      background: #FFFFFF;
    }
    &.rlp-section--reason {
      background-color: #F8F8F8;
    }
    &.rlp-section--faq {
      background-color: #F8F8F8;
    }
  }
  .rlp-section__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--as1Px));
    &.reverse {
      flex-direction: row-reverse;
    }
    .rlp-section-title {
      margin: 0;
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 700;
      line-height: 100%;
      letter-spacing: 0.05em;
      color: #212121;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      @media (min-width: 0px) {
        font-size: calc(24 * var(--as1Px));
        gap: calc(12 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size:   calc(80 * var(--as1Px));
        gap: calc(20 * var(--as1Px));
      }
      & > small {
        font-family: 'Noto Sans JP';
        font-size: calc(20 * var(--as1Px));
        line-height: 100%;
        @media (min-width: 0px) {
          font-size: calc(12 * var(--as1Px));
        }
        @media (min-width: 768px) {
          font-size: calc(20 * var(--as1Px));
        }
      }
    }
    .rlp-section-image {
      @media (min-width: 0px) {
        width:  calc(70 * var(--as1Px));
        height: calc(70 * var(--as1Px));
      }
      @media (min-width: 768px) {
        width:  calc(100 * var(--as1Px));
        height: calc(100 * var(--as1Px));
      }
      img {
        width:  100%;
        height: 100%;
      }
    }
  }

  .rlp-section__head.rlp-section__head--figma {
    flex-direction: column;
    gap: calc(12 * var(--as1Px));

    .rlp-section-title {
      position: relative;
      z-index: 0;
      isolation: isolate;
      margin: 0;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      text-align: center;
      letter-spacing: 0.05em;
      color: #0E1830;

      .rlp-section-title__main {
        display: block;
        position: relative;
        z-index: 1;
        font-family: 'Montserrat', sans-serif;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        @media (min-width: 0px) {
          font-size: calc(30 * var(--as1Px));
        }
        @media (min-width: 768px) {
          font-size: calc(80 * var(--as1Px));
        }
      }

      & > small {
        display: block;
        position: relative;
        z-index: 1;
        text-align: center;
        font-family: 'Noto Sans JP', sans-serif;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0;
        color: #0E1830;
        @media (min-width: 0px) {
          font-size: calc(12 * var(--as1Px));
        }
        @media (min-width: 768px) {
          font-size: min(calc(20 * var(--as1Px)), 20px);
        }
      }

      .rlp-section-image {
        position: absolute;
        z-index: -1;
        top: 50%;
        right: 0;
        transform: translate(75%, -70%);
        pointer-events: none;
        @media (min-width: 0px) {
          width:  calc(72 * var(--as1Px));
          height: calc(72 * var(--as1Px));
        }
        @media (min-width: 768px) {
          width:  calc(156 * var(--as1Px));
          height: calc(156 * var(--as1Px));
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .rlp-section-description {
      margin: 0;
      text-align: center;
      font-family: 'Noto Sans JP', sans-serif;
      font-style: normal;
      font-weight: 700;
      line-height: 150%;
      letter-spacing: 0;
      color: #21212180;
      @media (min-width: 0px) {
        font-size: calc(11 * var(--as1Px));
      }
      @media (min-width: 768px) {
        font-size: calc(13 * var(--as1Px));
      }
    }
  }

  .rlp-section.rlp-section--news .rlp-section__head.rlp-section__head--figma .rlp-section-title > small,
  .rlp-section.rlp-section--case-study .rlp-section__head.rlp-section__head--figma .rlp-section-title > small,
  .rlp-section.rlp-section--usecase .rlp-section__head.rlp-section__head--figma .rlp-section-title > small {
    padding-top: min(calc(8 * var(--as1Px)), 8px);
  }

  > .footer-rakusta-lp__root {
    margin-top: 0;
  }

  /* Keep LP anchor colors stable (prevent default blue hover styles). */
  .template-rakusta-lp__main a:not(.rlp-link-button__root):not(.rlp-cta__button):not(.rlp-news-link__button):not(.rlp-faq-contact__button),
  > .footer-rakusta-lp__root a {
    text-decoration: none;
  }

  .template-rakusta-lp__main .rlp-cta__button,
  .template-rakusta-lp__main .rlp-cta__button:hover,
  .template-rakusta-lp__main .rlp-cta__button:focus-visible,
  .template-rakusta-lp__main .rlp-cta__button:visited {
    color: #111827;
    text-decoration: none;
  }

  .template-rakusta-lp__main .rlp-faq-contact__button,
  .template-rakusta-lp__main .rlp-faq-contact__button:hover,
  .template-rakusta-lp__main .rlp-faq-contact__button:focus-visible,
  .template-rakusta-lp__main .rlp-faq-contact__button:visited {
    color: #FFFFFF;
    text-decoration: none;
  }

  .template-rakusta-lp__main .rlp-cta__button span,
  .template-rakusta-lp__main .rlp-faq-contact__button span {
    color: inherit;
  }

  .template-rakusta-lp__main a:not(.rlp-link-button__root):not(.rlp-cta__button):not(.rlp-news-link__button):not(.rlp-faq-contact__button):hover,
  .template-rakusta-lp__main a:not(.rlp-link-button__root):not(.rlp-cta__button):not(.rlp-news-link__button):not(.rlp-faq-contact__button):focus-visible,
  > .footer-rakusta-lp__root a:hover,
  > .footer-rakusta-lp__root a:focus-visible {
    color: inherit;
    text-decoration: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .template-rakusta-lp__main a:not(.rlp-link-button__root),
    .template-rakusta-lp__main button,
    > .footer-rakusta-lp__root a {
      transition: opacity 0.2s ease;
    }

    .template-rakusta-lp__main a:not(.rlp-link-button__root):hover,
    .template-rakusta-lp__main button:hover,
    > .footer-rakusta-lp__root a:hover {
      opacity: 0.5;
    }

    .template-rakusta-lp__main .rlp-usecase__tab.is-active:hover,
    .template-rakusta-lp__main .rlp-case-study-filter__tab.is-active:hover,
    .template-rakusta-lp__main .rlp-faq-filter__tab.is-active:hover {
      opacity: 1;
    }

    > .footer-rakusta-lp__root .rlp-footer__legal-links a {
      opacity: 1;
      transition: color 0.2s ease;
    }

    > .footer-rakusta-lp__root .rlp-footer__legal-links a:hover {
      opacity: 1;
      color: #FFFFFF;
    }
  }
}