@charset "UTF-8";

/* ========================================================
                      * Variable *
========================================================= */
:root {
  --pw: 1600; /* PC幅 */
  --sw: 750; /* SP幅 */
  --artboard-pw: 500; /* PCアートボード幅 */
  --artboard-sw: 750; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);

  --base-font-color: #000;
  --color-accent: #77b7f2;
  --color-accent-light: #f0f9ff;

  --lp-font-ja: "Roboto", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "century-gothic", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;

  --icon-arrow-down: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032.83%2019.24%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22m1.41%201.41%2015%2015%2015-15%22%20style%3D%22fill%3Anone%3Bstroke%3A%2377b7f2%3Bstroke-miterlimit%3A10%3Bstroke-width%3A4px%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1600px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}

/* ========================================================
                      * Layout style *
========================================================= */
/* html {
  scroll-behavior: smooth;
  font-size: 62.5%
} */
main {
  max-width: 100%;
}

@media (768px <= width) {
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
}
#FooterWrap {
  position: relative;
}


/* ===================
  Animation
=================== */
.fade {
  opacity: 0;
  transition: opacity 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
}
.fade-up {
  --transition-timing: ease;
  opacity: 0;
  translate: 0 calc(80 * var(--rem));
  transition:
    opacity 2s var(--transition-timing),
    translate 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
}
.clip-anim {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s 1s var(--transition-timing);
  &.is-active {
    clip-path: inset(0 0 0 0);
  }
}

/* keyframes */
@keyframes moveArrow {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    /* opacity: 0; */
    transform: translateY(calc(20 * var(--rem)));
  }
  85% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ticker-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}



/* ===================
  Accordion
=================== */
.js-accordion--body {
  overflow: hidden;
  transition: max-height .6s ease-in-out;
  will-change: max-height;
  &.--mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, .1) 80%, rgba(0, 0, 0, 0) 100%);
    &.is-open {
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    }
  }
}


/* ===================
  Tab
=================== */
.project-tab-content__container {
  position: relative;
}
.js-tab__content {
  transition: opacity .6s;
  will-change: opacity, height, pointer-events;
  &:not(.is-active) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  &.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
}



/* ===================
  LP Contents
=================== */
.lp_contents {
  --letter-spacing: .075em;
  position: relative;
  /* background: var(--lp-background-color, transparent); */
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-size: calc(24 * var(--rem));
  font-style: normal;
  letter-spacing: var(--letter-spacing);
  & * {
    font-feature-settings: "palt";
  }
  & *,
  & *:before,
  & *:after {
    box-sizing: border-box;
  }
  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }
  & ul,
  & li {
    list-style: none;
  }
  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }
  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }
  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition:
      opacity var(--duration) var(--timing),
      color var(--duration) var(--timing),
      background-color var(--duration) var(--timing),
      background-image var(--duration) var(--timing),
      border-color var(--duration) var(--timing),
      text-shadow var(--duration) var(--timing),
      text-weight var(--duration) var(--timing)
    ;
  }
  & :where(a) {
    color: inherit;
    text-decoration: none;
    text-underline-offset: calc(8 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ===================
  Layout
=================== */
.layout-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &::before {
    position: sticky;
    content: '';
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100vh;
    /* background : linear-gradient(-30deg, rgba(235, 236, 247, 1) 0%, rgba(238, 250, 254, 1) 100%); */
    background: url(../img/bg_pc.jpg) no-repeat center/cover;
  }
}

.layout-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.layout-mobile-first__left,
.layout-mobile-first__right {
  position: relative;
  width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.layout-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.layout-mobile-first__main {
  overflow-x: clip;
  /* padding-block: calc(80 * var(--rem)) calc(205 * var(--rem)); */
  /* background: url(../img/bg_1.jpg) no-repeat top center/cover; */
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}


/* ===================
  Utility
=================== */


/* ===================
  Component
=================== */
/* viewmore */
.component-viewmore {
  position: relative;
  display: block;
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
  padding-right: calc(28 * var(--rem));
  padding-bottom: calc(2 * var(--rem));
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  color: #a9aaaa;
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem));
  line-height: 1;
  letter-spacing: .1em;
  cursor: pointer;
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    right: calc(4 * var(--rem));
    content: "";
    display: block;
    width: calc(14 * var(--rem));
    height: 1px;
    background: currentColor;
    translate: 0 -50%;
  }
  &::after {
    rotate: 90deg;
  }
  &.is-open {
    &::after {
      rotate: 0deg;
    }
  }
}

/* button */
.component-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(510 * var(--rem));
  height: calc(119 * var(--rem));
  margin-inline: auto;
  background : linear-gradient(-30deg, rgba(151, 160, 233, 1) 0%, rgba(206, 183, 240, 1) 100%);
  border-bottom: calc(9 * var(--rem)) solid var(--color-accent);
  color: #fff;
  font-size: calc(36 * var(--rem));
  line-height: 1;
}

/* new */
.component-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(130 * var(--rem));
  height: calc(32 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(24 * var(--rem));
}

/* ticker */
.component-ticker__container {
  width: 100%;
  overflow: hidden;
}
.component-ticker {
  display: flex;
  white-space: nowrap;
  width: fit-content;
  animation: ticker-loop 15s linear infinite;
  will-change: transform;
}
.component-ticker__text {
  display: inline-block;
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(50 * var(--rem));
  line-height: 1;
  letter-spacing: 0;
}

/* marker */
.component-marker {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(-13 * var(--rem));
  text-decoration-color: var(--marker-color, #b1d4f2);
  text-decoration-thickness: calc(20 * var(--rem));
}

/* star */
.component-star {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
  height: calc(46 * var(--rem));
  margin-inline: auto;
  border: 1px solid #c0d9ed;
  border-radius: calc(23 * var(--rem));
  &.--star-2 {
    width: calc(250 * var(--rem));
  }
  &.--star-3 {
    width: calc(280 * var(--rem));
  }
}
.component-star__label {
  color: var(--color-accent);
  font-size: calc(28 * var(--rem));
  font-weight: bold;
}
.component-star__star {
  display: flex;
  align-items: center;
  gap: calc(5 * var(--rem));
}
.component-star__star-item {
  width: calc(28 * var(--rem));
}

.component-point-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(280 * var(--rem));
  height: calc(36 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent);
  border-radius: calc(18 * var(--rem));
  font-family: var(--lp-font-en);
  color: #fff;
  font-size: calc(28 * var(--rem));
}

.component-point-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(60 * var(--rem));
  height: calc(60 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent);
  border-radius: 50%;
  font-family: var(--lp-font-en);
  color: #fff;
  font-size: calc(34 * var(--rem));
  font-weight: bold;
}



/**
 * project-mainvisual
 */
.project-mainvisual {
  position: relative;
  overflow: clip;
}
.project-mainvisual__image {
  width: 100%;
  opacity: 0;
  scale: 1.1;
  transition: opacity 2s, scale 2s;
  will-change: opacity, scale;
  .is-active & {
    opacity: 1;
    scale: 1;
  }
}
.project-mainvisual__text {
  position: absolute;
  bottom: calc(52 * var(--rem));
  left: 0;
  width: 100%;
  z-index: 1;
  color: #fff;
  font-size: calc(34 * var(--rem));
  font-weight: bold;
  line-height: calc(68 / 34);
  letter-spacing: .1em;
  text-align: center;
}


/**
 * section-line-up
 */
.section-line-up {
  padding-top: calc(120 * var(--rem));
  padding-bottom: calc(112 * var(--rem));
  background: var(--color-accent-light);
}
.section-line-up__heading {
  margin-bottom: calc(60 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(60 * var(--rem));
  line-height: 1;
  text-align: center;
}


/**
 * anchor-item
 */
.anchor-item__container {
  display: flex;
  justify-content: center;
  gap: calc(5 * var(--rem));
  & + & {
    margin-top: calc(53 * var(--rem));
  }
}
.anchor-item--1 {
  width: 100%;
}
.anchor-item--2,
.anchor-item--3 {
  width: calc((100% - calc(20 * var(--rem))) / 2);
}
.anchor-item__head {
  position: relative;
}
.anchor-item__bg {
  position: absolute;
  width: calc(var(--width) * var(--rem));
  .anchor-item--1 & {
    top: calc(56 * var(--rem));
    left: calc(36 * var(--rem));
  }
  .anchor-item--2 & {
    top: calc(51 * var(--rem));
    left: calc(-6 * var(--rem));
  }
  .anchor-item--3 & {
    top: calc(45 * var(--rem));
    left: calc(-41 * var(--rem));
  }
}
.anchor-item__image {
  position: relative;
  z-index: 1;
  width: calc(var(--width) * var(--rem));
  margin-inline: auto;
  .anchor-item--2 &,
  .anchor-item--3 & {
    translate: calc(20 * var(--rem)) 0;
  }
}
.anchor-item__body {
  margin-top: calc(30 * var(--rem));
  &.is-active {
    .clip-anim {
      clip-path: inset(0 0 0 0);
    }
  }
  .anchor-item--2 &,
  .anchor-item--3 & {
    margin-top: calc(21 * var(--rem));
  }
}
.anchor-item__label {
  margin-bottom: calc(7 * var(--rem));
}
.anchor-item__name {
  font-size: calc(24 * var(--rem));
  font-weight: bold;
  line-height: calc(42 / 24);
  text-align: center;
}
.anchor-item__arrow {
  width: calc(30 * var(--rem));
  height: calc(15 * var(--rem));
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
  background: var(--icon-arrow-down) no-repeat top left/100% 100%;
  animation: moveArrow 2s infinite;
}


/**
 * project-section
 */
.project-section {
  position: relative;
  padding-top: calc(100 * var(--rem));
  padding-bottom: calc(120 * var(--rem));
  .component-ticker__container {
    position: absolute;
    top: calc(8 * var(--rem));
    left: 0;
    width: 100%;
  }
  &.is-active {
    .section-item__body,
    .product-point__container {
      opacity: 1;
      translate: 0 0;
      transition-delay: .2s;
    }
  }
}
.project-section--1 {
  background: url(../img/bg_1.jpg) no-repeat top center/cover;
}
.project-section--2 {
  position: relative;
  padding-top: calc(107 * var(--rem));
  &.--secondary {
    .project-section__bg--2 {
      opacity: 1;
    }
  }
}
.project-section__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity .6s;
  will-change: opacity;
}
.project-section__bg--1 {
  background: url(../img/bg_2.jpg) no-repeat top center/cover;
}
.project-section__bg--2 {
  background: url(../img/bg_3.jpg) no-repeat top center/cover;
  opacity: 0;
}
.project-section__lead {
  margin-bottom: calc(43 * var(--rem));
  font-size: calc(30 * var(--rem));
  line-height: calc(60 / 30);
  text-align: center;
}


/**
 * section-item
 */
.section-item {
  width: calc(710 * var(--rem));
  margin-inline: auto;
  padding-top: calc(72 * var(--rem));
  padding-bottom: calc(80 * var(--rem));
  background: #fff;
  border: calc(3 * var(--rem)) solid var(--color-accent);
  border-radius: calc(20 * var(--rem));
  .project-tab-content & {
    position: relative;
    border-top: none;
    border-radius: 0 0 calc(20 * var(--rem)) calc(20 * var(--rem));
    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: calc(360 * var(--rem));
      height: calc(3 * var(--rem));
      background: var(--color-accent);
    }
  }
  .project-tab-content.--tab-2 & {
    &::before {
      left: 0;
      right: auto;
      background: #93e2e0;
    }
  }
  .--tab-2 & {
    padding-bottom: calc(67 * var(--rem));
    border-color: #93e2e0;
  }
}
.section-item--2 {
  padding-bottom: calc(69 * var(--rem));
}
.section-item__heading {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(60 * var(--rem));
  font-weight: bold;
  line-height: calc(75 / 60);
  text-align: center;
  &.--small {
    font-size: calc(48 * var(--rem));
    line-height: calc(60 / 48);
    letter-spacing: .05em;
  }
}
.section-item__lead {
  margin-top: calc(42 * var(--rem));
  font-size: calc(28 * var(--rem));
  font-weight: bold;
  line-height: calc(56 / 28);
  text-align: center;
  .--tab-2 & {
    margin-top: calc(46 * var(--rem));
  }
}


/**
 * tag-list
 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(20 * var(--rem));
  width: calc(640 * var(--rem));
  margin-top: calc(26 * var(--rem));
  margin-inline: auto;
  &.--reverse {
    flex-wrap: wrap-reverse;
  }
}
.tag-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--width) * var(--rem));
  height: calc(50 * var(--rem));
  background: #89bdf4;
  color: #fff;
  font-size: calc(28 * var(--rem));
}


/**
 * project-slider
 */
.project-slider__container {
  width: calc(580 * var(--rem));
  margin-top: calc(40 * var(--rem));
  margin-inline: auto;
}
.project-slider__main {
  .slick-prev,
  .slick-next {
    width: calc(14 * var(--rem));
    height: calc(28 * var(--rem));
    &::before {
      content: none;
    }
  }
  .slick-prev {
    left: calc(-31 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018.24%2030.83%22%0ApreserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22m16.83%2029.41-14-14%2014-14%22%20style%3D%22fill%3Anone%3Bstroke%3A%23acc7e2%3Bstroke-miterlimit%3A10%3Bstroke-width%3A4px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100% 100%;
  }
  .slick-next {
    right: calc(-31 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018.24%2030.83%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22m1.41%2029.41%2014-14-14-14%22%20style%3D%22fill%3Anone%3Bstroke%3A%23acc7e2%3Bstroke-miterlimit%3A10%3Bstroke-width%3A4px%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100% 100%;
  }
}
.project-slider__nav {
  margin-top: calc(30 * var(--rem));
  .slick-list {
    padding-bottom: calc(19 * var(--rem));
  }
  .slick-track {
    display: flex;
    justify-content: center;
    gap: calc(10 * var(--rem));
    width: auto !important;
    transform: unset !important;
  }
}
.project-slider__nav-item {
  position: relative;
  width: calc(120 * var(--rem));
  cursor: pointer;
  &::before,
  &::after {
    transition: opacity .5s;
    will-change: opacity;
  }
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #E6E6E6;
    opacity: 0.5;
  }
  &::after {
    position: absolute;
    left: 0;
    bottom: calc(-19 * var(--rem));
    content: "";
    display: block;
    width: 100%;
    height: calc(4 * var(--rem));
    background: var(--color-accent);
    opacity: 0;
  }
  &.slick-current {
    &::before {
      opacity: 0;
    }
    &::after {
      opacity: 1;
    }
  }
}


/**
 * product-detail
 */
.product-detail {
  margin-top: calc(50 * var(--rem));
  text-align: center;
  .component-star {
    margin-bottom: calc(12 * var(--rem));
  }
}
.product-detail__name {
  margin-bottom: calc(19 * var(--rem));
  color: var(--color-accent);
  font-size: calc(36 * var(--rem));
  font-weight: bold;
  line-height: calc(56 / 36);
  .--tab-2 & {
    margin-bottom: calc(23 * var(--rem));
  }
}
.product-detail__price {
  margin-bottom: calc(34 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: 1;
  letter-spacing: .095em;
}
.product-detail__link {
  text-decoration: underline;
}
.product-detail__body {
  margin-top: calc(47 * var(--rem));
}
.product-detail__text {
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
}
.product-detail__note {
  margin-top: calc(28 * var(--rem));
  margin-left: calc(-20 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: 1;
}


/**
 * product-point
 */
.product-point {
  width: calc(710 * var(--rem));
  margin-top: calc(40 * var(--rem));
  margin-inline: auto;
  background: var(--color-accent-light);
  border-radius: calc(20 * var(--rem));
  &.--secondary {
    background: #e4f6f9;
  }
  &.--tertiary {
    background: #eeffff;
  }
}
.product-point__label {
  position: relative;
  width: 100%;
  padding-top: calc(43 * var(--rem));
  padding-bottom: calc(37 * var(--rem));
  color: var(--color-accent);
  font-size: calc(40 * var(--rem));
  line-height: 1;
  text-align: center;
  &.is-open {
    &::after {
      rotate: 0deg;
    }
  }
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    right: calc(95 * var(--rem));
    content: "";
    display: block;
    width: calc(28 * var(--rem));
    height: calc(4 * var(--rem));
    background: var(--color-accent);
    translate: 0 calc(-2 * var(--rem));
  }
  &::after {
    rotate: 90deg;
    transition: rotate .6s;
    will-change: rotate;
  }
}
.product-point__body {
  max-height: 0;
}
.product-point__body-inner {
  padding-bottom: calc(60 * var(--rem));
}
.product-point__body-inner--1 {
  padding-bottom: calc(54 * var(--rem));
}
.product-point__body-inner--2 {
  margin-top: calc(-12 * var(--rem));
  padding-bottom: calc(48 * var(--rem));
}
.product-point__body-inner--4 {
  padding-bottom: calc(52 * var(--rem));
  .product-point__list-item {
    & + & {
      margin-top: calc(27 * var(--rem));
    }
  }
}
.product-point__body-inner--5 {
  margin-top: calc(-9 * var(--rem));
  padding-bottom: calc(48 * var(--rem));
}
.product-point__body-inner--6 {
  padding-bottom: calc(6 * var(--rem));
}
.product-point__body-inner--7 {
  padding-bottom: calc(54 * var(--rem));
  .product-point__list-item__note {
    width: calc(524 * var(--rem));
    margin-top: calc(20 * var(--rem));
  }
}
.product-point__body-inner--9 {
  margin-top: calc(-12 * var(--rem));
  padding-bottom: calc(48 * var(--rem));
}
.product-point__body-inner--3 {
  margin-top: 0;
  padding-bottom: calc(48 * var(--rem));
  .product-point__text {
    width: calc(517 * var(--rem));
  }
}
.product-point__heading {
  margin-bottom: calc(19 * var(--rem));
  margin-left: calc(16 * var(--rem));
  font-size: calc(28 * var(--rem));
  font-weight: bold;
  line-height: calc(49 / 28);
  text-align: center;
}
.product-point__text {
  width: calc(522 * var(--rem));
  margin-inline: auto;
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
  text-align: justify;
}
.product-point__list {
  .product-point__list-item__text + & {
    margin-top: calc(26 * var(--rem));
  }
}
.product-point__list-item {
  & + & {
    margin-top: calc(28 * var(--rem));
    .product-point__body-inner--9 & {
      margin-top: calc(38 * var(--rem));
    }
  }
}
.product-point__list-item__label {
  &.component-point-label {
    margin-bottom: calc(18 * var(--rem));
  }
  &.component-point-number {
    margin-bottom: calc(13 * var(--rem));
  }
}
.product-point__list-item__text {
  font-size: calc(26 * var(--rem));
  line-height: calc(52 / 26);
  text-align: center;
  & + & {
    margin-top: .5em;
  }
}
.product-point__list-item__small {
  margin-top: .5em;
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: center;
}
.product-point__list-item__note {
  width: calc(520 * var(--rem));
  margin-top: calc(24 * var(--rem));
  margin-inline: auto;
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(30 / 20);
  text-align: justify;
}
.product-point__list-item__box {
  margin-top: calc(36 * var(--rem));
}
.product-point__list-item__box-heading {
  margin-bottom: calc(14 * var(--rem));
  text-align: center;
}
.product-point__list-item__box-heading__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
  font-size: calc(26 * var(--rem));
  line-height: calc(52/ 26);
  &::before,
  &::after {
    content: "";
    display: block;
    width: calc(120 * var(--rem));
    height: calc(2 * var(--rem));
    background: var(--color-accent);
  }
}


/**
 * howto-list
 */
.howto-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--rem));
  width: calc(580 * var(--rem));
  margin-inline: auto;
  padding-bottom: calc(54 * var(--rem));
  & + & {
    margin-top: calc(30 * var(--rem));
  }
}
.howto-list__image {
  position: relative;
  flex-shrink: 0;
  width: calc(280 * var(--rem));
  &::after {
    position: absolute;
    bottom: calc(-54 * var(--rem));
    left: 50%;
    content: "";
    display: block;
    width: calc(36 * var(--rem));
    height: calc(24 * var(--rem));
    margin-top: calc(30 * var(--rem));
    margin-inline: auto;
    background: var(--color-accent);
    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    translate: -50% 0;
  }
  .howto-list__item:last-child &::after {
    content: none;
  }
}
.howto-list__number {
  width: calc(44 * var(--rem));
  height: calc(44 * var(--rem));
  margin-top: calc(12 * var(--rem));
  margin-bottom: calc(20 * var(--rem));
  margin-left: 0;
  font-size: calc(28 * var(--rem));
}
.howto-list__text {
  font-size: calc(22 * var(--rem));
  line-height: calc(44 / 22);
  text-align: justify;
}


/**
 * project-tab-content__container
 */
.project-tab-content__container {
  &.is-active {
    .section-item__body,
    .product-point__container {
      opacity: 1;
      translate: 0 0;
      transition-delay: .2s;
    }
  }
}


/**
 * project-tab-list
 */
.project-tab-list {
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--rem));
}
.project-tab-list__item {
  position: relative;
  width: calc(350 * var(--rem));
  height: calc(285 * var(--rem));
  background: var(--color);
  border-radius: calc(20 * var(--rem)) calc(20 * var(--rem)) 0 0;
  overflow: clip;
  transition: background .6s;
  will-change: background;
  &.is-active {
    background: #fff;
    border: calc(3 * var(--rem)) solid var(--color);
    border-bottom: none;
  }
}
.project-tab-list__item--1 {
  --color: var(--color-accent);
}
.project-tab-list__item--2 {
  --color: #93e2e0;
}
.project-tab-list__item-image {
  width: calc(82 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(5 * var(--rem));
  translate: 0 calc(-6 * var(--rem));
}
.project-tab-list__item-label {
  font-size: calc(22 * var(--rem));
  line-height: calc(33 / 22);
  text-align: center;
}
.project-tab-list__item-seal {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(180 * var(--rem));
  height: calc(84 * var(--rem));
  padding-top: calc(30 * var(--rem));
  background: #fff;
  color: var(--color);
  font-family: var(--lp-font-en);
  font-size: calc(24 * var(--rem));
  line-height: 1;
  text-align: center;
  rotate: -45deg;
  transition: background .6s, color .6s;
  will-change: background, color;
  transform-origin: bottom;
  translate: calc(-30 * var(--rem)) calc(-22 * var(--rem));
  .project-tab-list__item.is-active & {
    background: var(--color);
    color: #fff;
  }
}


/**
 * project-staple
 */
.project-staple {
  padding-block: calc(82 * var(--rem)) calc(160 * var(--rem));
  background: #fff;
}
.project-staple-heading {
  color: #000;
  text-align: center;
}
.project-staple-heading__main {
  font-size: calc(40 * var(--rem));
  line-height: 1;
}


/**
 * project-staple-card
 */
.project-staple-card-slider {
  margin-top: calc(78 * var(--rem));
  .slick-slider {
    .slick-track,
    .slick-list {
      display: flex;
    }
  }
}
.project-staple-card-list__item {
  width: calc(440 * var(--rem));
  margin-inline: calc(20 * var(--rem));
  padding-block: calc(60 * var(--rem)) calc(46 * var(--rem));
  padding-inline: calc(20 * var(--rem));
  background: #fff;
  border-radius: calc(20 * var(--rem));
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #000;
  text-align: center;
}
.project-staple-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: calc(36 * var(--rem));
  margin-inline: auto;
  padding-top: .1em;
  padding-inline: 1em;
  border: 1px solid #a7a7a7;
  color: #a9aaaa;
}
.project-staple-card__tag-sub {
  margin-top: calc(20 * var(--rem));
  font-size: calc(22 * var(--rem));
  line-height: 1;
}
.project-staple-card__image {
  margin-top: calc(20 * var(--rem));
  & img {
    display: block;
    /* width: 100%; */
    width: calc(400 * var(--rem));
  }
}
.project-staple-card__body {
  margin-top: calc(22 * var(--rem));
}
.project-staple-card__name {
  font-size: calc(26 * var(--rem));
  line-height: calc(45.5 / 26);
  font-weight: bold;
}
.project-staple-card__price {
  margin-top: calc(11 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(22 * var(--rem));
  line-height: calc(38.5 / 22);
  &.--accent {
    color: #ba4f3b;
  }
  & + & {
    margin-top: calc(-1 * var(--rem));
  }
}
.project-staple-card__note {
  margin-top: calc(7 * var(--rem));
  color: #a9aaaa;
  font-size: calc(20 * var(--rem));
  line-height: calc(30 / 20);
}
.project-staple-card__link {
  margin-top: calc(18 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(42 / 24);
  text-decoration: underline;
  text-underline-offset: calc(8 * var(--rem));
}

.project-staple-card-slider {
  .slick-list {
    overflow: clip visible !important;
  }
  .slick-dotted {
    &.slick-slider {
      margin-bottom: calc(61 * var(--rem));
    }
  }
  .slick-prev,
  .slick-next {
    top: 47%;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(60 * var(--rem));
    height: calc(60 * var(--rem));
    background: rgba(169, 170, 170, .7);
    border-radius: 50%;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      display: block;
      width: calc(12 * var(--rem));
      height: calc(24 * var(--rem));
      background-color: #fff;
      mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20viewBox%3D%220%200%2014.12%2025.41%22%3E%3Cpath%20d%3D%22m.71%2024.71%2012-12-12-12%22%20style%3D%22fill%3Anone%3Bstroke%3AcurrentColor%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
      opacity: 1;
      translate: -50% -50%;
    }
  }
  .slick-prev {
    left: calc(105 * var(--rem));
    &::before {
      left: 45%;
      rotate: 180deg;
    }
  }
  .slick-next {
    right: calc(105 * var(--rem));
    &::before {
      left: 55%;
    }
  }
  .slick-dots {
    --dots-size: calc(16 * var(--rem));
    bottom: calc(-67 * var(--rem));
    & li {
      width: var(--dots-size);
      height: var(--dots-size);
      margin-inline: calc(10 * var(--rem));
      & button {
        width: var(--dots-size);
        height: var(--dots-size);
        padding: 0;
        background: #fff;
        border: calc(2 * var(--rem)) solid #a7a7a7;
        border-radius: 50%;
        opacity: 1;
        &::before {
          display: none;
        }
      }
      &.slick-active {
        & button {
          background: #a7a7a7;
        }
      }
    }
  }
}

.project-staple__button-container {
  margin-top: calc(205 * var(--rem));
}
.project-staple__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(650 * var(--rem));
  height: calc(80 * var(--rem));
  margin-inline: auto;
  background: #787878;
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(36 * var(--rem));
}


/**
 * project-footer-nav
 */
.project-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  opacity: 0;
  translate: 0 100%;
  transition: opacity 0.6s .2s ease-in-out, translate 0.6s .2s ease-in-out;
  will-change: opacity, translate;
  &.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}
.project-footer-nav__list {
  display: flex;
  flex-wrap: wrap;
}
.project-footer-nav__item {
  position: relative;
  width: 50%;
  &.--1 {
    .project-footer-nav__item-body {
      padding-top: calc(23 * var(--rem));
      padding-left: calc(85 * var(--rem));
    }
    .project-footer-nav__item-image {
      margin-top: calc(-10 * var(--rem));
      margin-right: calc(10 * var(--rem));
    }
  }
  &.--2 {
    &::before {
      content: "";
      position: absolute;
      top: calc(10 * var(--rem));
      left: 0;
      width: calc(2 * var(--rem));
      height: calc(85 * var(--rem));
      background: var(--color-accent);
      translate: -50% 0;
    }
    .project-footer-nav__item-body {
      padding-top: calc(23 * var(--rem));
      padding-left: calc(20 * var(--rem));
    }
    .project-footer-nav__item-image {
      margin-top: calc(-10 * var(--rem));
      margin-right: calc(8 * var(--rem));
    }
  }
  &.--3 {
    width: 100%;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: calc(660 * var(--rem));
      height: calc(2 * var(--rem));
      background: var(--color-accent);
      translate: -50% -50%;
    }
    .project-footer-nav__item-body {
      justify-content: center;
      padding-top: calc(18 * var(--rem));
      padding-right: calc(52 * var(--rem));
    }
    .project-footer-nav__item-image {
      margin-top: calc(-6 * var(--rem));
      margin-right: calc(12 * var(--rem));
    }
  }
}
.project-footer-nav__item-body {
  display: flex;
  height: calc(105 * var(--rem));
  background: var(--color-accent-light);
}
.project-footer-nav__item-image {
  width: calc(40 * var(--rem));
}
.project-footer-nav__item-label {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(26 * var(--rem));
  line-height: calc(32.5 / 26);
  letter-spacing: .05em;
  text-align: center;
}


/**
 * project-logo-box
 */
.project-logo-box {
  margin-top: calc(162 * var(--rem-pc));
}
.project-logo-box__main {
  display: flex;
  gap: calc(50 * var(--rem-pc));
  margin-left: calc(14 * var(--rem-pc));
}
.project-logo-box__main-item--1 {
  width: calc(106 * var(--rem-pc));
}
.project-logo-box__main-item--2 {
  width: calc(63 * var(--rem-pc));
  margin-top: calc(-6 * var(--rem-pc));
}
.project-logo-box__text {
  margin-top: calc(40 * var(--rem-pc));
  color: #fff;
  font-family: var(--lp-font-en);
  font-size: calc(20 * var(--rem-pc));
  line-height: 1;
  text-align: center;
}


/**
 * project-anchor-nav
 */
.project-anchor-nav {
  margin-top: calc(158 * var(--rem-pc));
}
.project-anchor-nav__item {
  & + & {
    margin-top: calc(15 * var(--rem-pc));
  }
}
.project-anchor-nav__item-body {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--rem-pc));
  width: calc(340 * var(--rem-pc));
  height: calc(76 * var(--rem-pc));
  padding-left: calc(20 * var(--rem-pc));
  background: rgba(255, 255, 255, .4);
}
.project-anchor-nav__item-image {
  width: calc(25 * var(--rem-pc));
}
.project-anchor-nav__item-label {
  color: var(--color-accent);
  font-family: var(--lp-font-en);
  font-size: calc(18 * var(--rem-pc));
  line-height: calc(27 / 18);
  letter-spacing: .05em;
}



/*=======================================
               Responsive
========================================*/

/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  .u-d-md {
    display: none !important;
  }
}


/*=======================================
                    SP
========================================*/
@media (width < 768px) {
  .u-d-lg {
    display: none !important;
  }
}