@charset "UTF-8";

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

  --lp-background-color: #FAFAF6;
  --base-font-color: #212121;
  --color-accent: #edb7d2;

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

  --icon-arrow-right: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%226.111%22%20height%3D%2210%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23212121%22%20d%3D%22M3.889%205%200%201.111%201.111%200l5%205-5%205L0%208.889Z%22%20data-name%3D%22%E3%83%91%E3%82%B9%208933%22%2F%3E%3C%2Fsvg%3E');
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1400px <= 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 1.8s var(--transition-timing);
  &.is-active {
    opacity: 1;
  }
}
.fade-blur {
  opacity: 0;
  filter: blur(5px);
  transition:
  opacity 2s var(--transition-timing),
  filter 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
    filter: blur(0);
  }
}
.fade-up {
  opacity: 0;
  translate: 0 calc(50 * var(--rem));
  transition:
    opacity 2s var(--transition-timing),
    translate 2s var(--transition-timing);
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
}

.js-intersection-item {
  --translate-y: calc(20 * var(--rem-pc));
  /* --translate-y: 0; */
  opacity: 0;
  translate: 0 var(--translate-y);
  transition: opacity 1.8s ease, translate 1.5s ease;
  .is-active > & {
    opacity: 1;
    translate: 0 0;
  }
  @media (width < 768px) {
    --translate-y: calc(20 * var(--rem));
  }
}

.slide-skew {
  --translate-x: calc(-20 * var(--rem-pc));
  --translate-y: calc(10 * var(--rem-pc));
  opacity: 0;
  translate: var(--translate-x) var(--translate-y);
  transition:
    opacity .6s var(--transition-timing),
    translate .6s var(--transition-timing);
  will-change: opacity, translate;
  &.is-active {
    opacity: 1;
    translate: 0 0;
  }
  @media (width < 768px) {
    --translate-x: calc(-20 * var(--rem));
    --translate-y: calc(10 * var(--rem));
  }
}

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


/* ===================
  LP Contents
=================== */
.lp_newuser {
  --letter-spacing: .03em;
  position: relative;
  background: var(--lp-background-color, transparent);
  color: var(--base-font-color, #000);
  font-family: var(--lp-font-ja);
  font-weight: 400;
  font-size: calc(14 * var(--rem-pc));
  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(4 * var(--rem));
    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
    /* @media (width < 768px) {
      &:hover {
        opacity: 1;
      }
    } */
  }
  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}


/* ===================
  Layout
=================== */


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


/* ===================
  Component
=================== */
/* label */
.component-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  padding-inline: calc(14 * var(--rem-pc));
  background: #fff;
  height: calc(35 * var(--rem-pc));
  border: 1px solid #F0F0F0;
  border-radius: calc(35 * var(--rem-pc));
  color: #4A7331;
  font-size: calc(16 * var(--rem-pc));
  font-weight: 500;
  letter-spacing: .05em;
}
@media (width < 768px) {
  /* label */
  .component-label {
    padding-inline: calc(14 * var(--rem));
    height: calc(30 * var(--rem));
    border-radius: calc(30 * var(--rem));
    font-size: calc(13 * var(--rem));
  }
}

/* heading */
.component-heading {
  font-size: calc(28 * var(--rem-pc));
  font-weight: 500;
  line-height: calc(39.2 / 28);
  letter-spacing: .05em;
  text-align: center;
  .component-label + & {
    margin-top: calc(14 * var(--rem-pc));
  }
}
@media (width < 768px) {
  /* heading */
  .component-heading {
    font-size: calc(22 * var(--rem));
    line-height: calc(30.8 / 22);
    .component-label + & {
      margin-top: calc(9 * var(--rem));
    }
  }
}

/* note */
.component-note {
  font-family: var(--lp-font-inter);
  font-size: calc(11 * var(--rem-pc));
  line-height: 1;
  text-align: center;
}
@media (width < 768px) {
  /* note */
  .component-note {
    font-size: calc(10 * var(--rem));
  }
}

/* button */
.component-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(280 * var(--rem-pc));
  height: calc(43 * var(--rem-pc));
  margin-inline: auto;
  padding-right: calc(6 * var(--rem-pc));
  border: 1px solid currentColor;
  border-radius: calc(22 * var(--rem-pc));
  font-size: calc(13 * var(--rem-pc));
  font-weight: 500;
  letter-spacing: .05em;
  &::after {
    position: absolute;
    content: '';
    top: 50%;
    right: calc(17 * var(--rem-pc));
    display: block;
    width: calc(6 * var(--rem-pc));
    height: calc(10 * var(--rem-pc));
    background: var(--icon-arrow-right) no-repeat center/100% 100%;
    translate: 0 -50%;
  }
}
@media (width < 768px) {
  /* button */
  .component-button {
    width: calc(245 * var(--rem));
    height: calc(37 * var(--rem));
    padding-right: calc(5 * var(--rem));
    border-radius: calc(22 * var(--rem));
    font-size: calc(12 * var(--rem));
    &::after {
      right: calc(15 * var(--rem));
      width: calc(5 * var(--rem));
      height: calc(8 * var(--rem));
    }
  }
}

/* link */
.component-link--arrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--rem-pc));
  font-size: calc(12 * var(--rem-pc));
  &::after {
    content: '';
    display: block;
    width: calc(6 * var(--rem-pc));
    height: calc(10 * var(--rem-pc));
    background: var(--icon-arrow-right) no-repeat center/100% 100%;
  }
}
@media (width < 768px) {
  /* link */
  .component-link--arrow {
    gap: calc(10 * var(--rem));
    font-size: calc(12 * var(--rem));
    &::after {
      width: calc(5 * var(--rem));
      height: calc(8 * var(--rem));
    }
  }
}



/* ===================
  Accordion
=================== */
.js-accordion--body {
  /* max-height: calc(320 * var(--rem)); */
  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) 0%, rgba(0, 0, 0, 1) 20%, 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%);
    }
  } */
}



/**
 * project-mainvisual
 */
.project-mainvisual {
  padding-top: calc(71 * var(--rem-pc));
  padding-bottom: calc(56 * var(--rem-pc));
}
.project-mainvisual__heading {
  width: calc(560 * var(--rem-pc));
  margin-inline: auto;
}
@media (width < 768px) {
  .project-mainvisual {
    padding-top: calc(40 * var(--rem));
    padding-bottom: calc(36 * var(--rem));
  }
  .project-mainvisual__heading {
    width: calc(300 * var(--rem));
  }
}


/**
 * project-anchor
 */
.project-anchor__container {
  margin-top: calc(31 * var(--rem-pc));
}
.project-anchor {
  position: relative;
  display: flex;
  width: fit-content;
  margin-inline: auto;
}
.project-anchor__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-anchor__item--1 {
  width: calc(190 * var(--rem-pc));
  height: calc(105 * var(--rem-pc));
  background: url(../img/main/anc_bg_1.png) no-repeat center / cover;
}
.project-anchor__item--2 {
  width: calc(266 * var(--rem-pc));
  height: calc(129 * var(--rem-pc));
  background: url(../img/main/anc_bg_2.png) no-repeat center / cover;
}
.project-anchor__item--3 {
  width: calc(196 * var(--rem-pc));
  height: calc(124 * var(--rem-pc));
  background: url(../img/main/anc_bg_3.png) no-repeat center / cover;
}
.project-anchor__item--4 {
  width: calc(222 * var(--rem-pc));
  height: calc(127 * var(--rem-pc));
  background: url(../img/main/anc_bg_4.png) no-repeat center / cover;
}
.project-anchor__link {
  --move-distance: calc(5 * var(--rem-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #4A7331;
  font-size: calc(14 * var(--rem-pc));
  font-weight: 600;
  line-height: calc(20 / 14);
  text-align: center;
  &::after {
    content: '';
    display: block;
    width: calc(8 * var(--rem-pc));
    height: calc(4 * var(--rem-pc));
    margin-top: calc(9 * var(--rem-pc));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%228.953%22%20height%3D%225.355%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%234a7331%22%20stroke-width%3D%222%22%20d%3D%22M8.302.76%204.476%204.039.65.76%22%20data-name%3D%22%E3%83%91%E3%82%B9%2015939%22%2F%3E%3C%2Fsvg%3E') no-repeat center / 100% 100%;
    animation: moveArrow 2s infinite;
  }
}
.project-anchor__image {
  width: calc(379 * var(--rem-pc));
  margin-top: calc(-11 * var(--rem-pc));
  margin-inline: auto;
}
@media (768px <= width) {
  .project-anchor__item--1 {
    margin-top: calc(11 * var(--rem-pc));
    margin-right: calc(-12 * var(--rem-pc));
  }
  .project-anchor__item--2 {
    margin-right: calc(-11 * var(--rem-pc));
  }
  .project-anchor__item--3 {
    margin-top: calc(3 * var(--rem-pc));
    margin-right: calc(-16 * var(--rem-pc));
  }
}
@media (width < 768px) {
  .project-anchor__container {
    margin-top: calc(21 * var(--rem));
  }
  .project-anchor {
    display: block;
    width: 100%;
    height: calc(240 * var(--rem));
  }
  .project-anchor__item {
    position: absolute;
  }
  .project-anchor__item--1 {
    top: 0;
    left: calc(26 * var(--rem));
    z-index: 4;
    width: calc(167 * var(--rem));
    height: calc(89 * var(--rem));
    background-image: url(../img/main/anc_bg_1_sp.png);
  }
  .project-anchor__item--2 {
    top: calc(44 * var(--rem));
    left: calc(132 * var(--rem));
    z-index: 3;
    width: calc(236 * var(--rem));
    height: calc(112 * var(--rem));
    background-image: url(../img/main/anc_bg_2_sp.png);
  }
  .project-anchor__item--3 {
    top: calc(84 * var(--rem));
    left: calc(-7 * var(--rem));
    z-index: 2;
    width: calc(180 * var(--rem));
    height: calc(111 * var(--rem));
    background-image: url(../img/main/anc_bg_3_sp.png);
  }
  .project-anchor__item--4 {
    top: calc(129 * var(--rem));
    left: calc(130 * var(--rem));
    z-index: 1;
    width: calc(199 * var(--rem));
    height: calc(111 * var(--rem));
    background-image: url(../img/main/anc_bg_4_sp.png);
  }
  .project-anchor__link {
    --move-distance: calc(5 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: calc(18.2 / 13);
    letter-spacing: 0;
    &::after {
      content: '';
      display: block;
      width: calc(7 * var(--rem));
      height: calc(3 * var(--rem));
      margin-top: calc(8 * var(--rem));
    }
  }
  .project-anchor__image {
    width: calc(322 * var(--rem));
    margin-top: calc(-59 * var(--rem));
    translate: calc(-6 * var(--rem));
  }
}


/**
 * message-block
 */
.message-block {
  margin-top: calc(40 * var(--rem-pc));
  text-align: center;
}
.message-block__logo {
  width: calc(250 * var(--rem-pc));
  margin-inline: auto;
  margin-bottom: calc(7 * var(--rem-pc));
}
.message-block__text {
  font-size: calc(15 * var(--rem-pc));
  line-height: calc(30 / 15);
  letter-spacing: .03em;
  & + & {
    margin-top: calc(12 * var(--rem-pc));
  }
}
@media (width < 768px) {
  .message-block {
    margin-top: calc(30 * var(--rem));
  }
  .message-block__logo {
    width: calc(200 * var(--rem));
    margin-bottom: calc(6 * var(--rem));
  }
  .message-block__text {
    font-size: calc(14 * var(--rem));
    line-height: calc(28 / 14);
    & + & {
      margin-top: calc(12 * var(--rem));
    }
  }
}


/**
 * project-section
 */
.project-section {
  padding-top: calc(60 * var(--rem-pc));
  padding-bottom: calc(60 * var(--rem-pc));
}
@media (width < 768px) {
  /**
  * project-section
  */
  .project-section {
    padding-top: calc(48 * var(--rem));
    padding-bottom: calc(48 * var(--rem));
  }
}


/**
 * section-point
 */
.section-point {
  background: #F3F4E0;
}
.section-point__note--1 {
  margin-top: calc(15 * var(--rem-pc));
  letter-spacing: 0;
}
.section-point__note--2 {
  margin-top: calc(11 * var(--rem-pc));
  letter-spacing: 0;
}
.section-point__button-container {
  margin-top: calc(26 * var(--rem-pc));
}
@media (width < 768px) {
  /**
  * section-point
  */
  .section-point__note--1 {
    margin-top: calc(11 * var(--rem));
  }
  .section-point__note--2 {
    margin-top: calc(7 * var(--rem));
  }
  .section-point__button-container {
    margin-top: calc(21 * var(--rem));
    .component-button {
      width: calc(241 * var(--rem));
    }
  }
}


/**
 * point-list
 */
.point-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--rem-pc));
  margin-top: calc(30 * var(--rem-pc));
}
.point-list__item--2 {
  .point-list__box {
    margin-right: calc(35 * var(--rem-pc));
  }
}
.point-list__item--3 {
  .point-list__box {
    margin-top: calc(5 * var(--rem-pc));
    margin-right: calc(33 * var(--rem-pc));
  }
}
.point-list__item--4 {
  .point-list__box {
    margin-right: calc(35 * var(--rem-pc));
  }
}
.point-list__item--5 {
  .point-list__box {
    margin-right: calc(49 * var(--rem-pc));
  }
}
.point-list__item--6 {
  .point-list__box {
    margin-right: calc(40 * var(--rem-pc));
  }
}
.point-list__item-body {
  max-height: 0;
}
.point-list__item-body__inner {
  width: calc(350 * var(--rem-pc));
  margin-inline: auto;
  padding-top: calc(11 * var(--rem-pc));
  padding-bottom: calc(16 * var(--rem-pc));
  border-top: 1px solid #EDEFEC;
}
.point-list__item-body__text {
  font-size: calc(13 * var(--rem-pc));
  line-height: calc(26 / 13);
  letter-spacing: 0;
}
.point-list__box-container {
  width: calc(400 * var(--rem-pc));
  background: #FFFFFC;
  border-radius: calc(5 * var(--rem-pc));
  &.--mini {
    width: calc(332 * var(--rem-pc));
  }
}
.point-list__box-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(136 * var(--rem-pc));
  &.--high {
    height: calc(150 * var(--rem-pc));
  }
  .point-list__box-container.--mini & {
    height: calc(111 * var(--rem-pc));
  }
}
.point-list__box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rem-pc));
}
.point-list__box-icon {
  width: calc(110 * var(--rem-pc));
  .point-list__box-container.--mini & {
    width: calc(102 * var(--rem-pc));
  }
}
.point-list__box-text {
  font-size: calc(18 * var(--rem-pc));
  font-weight: 500;
  line-height: calc(27 / 18);
  letter-spacing: .03em;
  text-align: left;
  .point-list__box-container.--mini & {
    font-size: calc(16 * var(--rem-pc));
    line-height: calc(24 / 16);
    .--en {
      font-family: var(--lp-font-inter);
    }
    .--small {
      font-size: calc(12 * var(--rem-pc));
    }
  }
  .--em {
    color: #68A54B;
    font-style: normal;
    font-size: calc(20 * var(--rem-pc));
    font-weight: 700;
  }
}
.point-list__box-comment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--rem-pc));
}
.point-list__box-comment__text {
  color: #506E40;
  font-size: calc(13 * var(--rem-pc));
  line-height: calc(19.5 / 13);
  letter-spacing: .05em;
  text-align: center;
  .--bold {
    font-weight: 800;
  }
}
.point-list__box-comment__icon {
  position: relative;
  width: calc(14 * var(--rem-pc));
  height: calc(14 * var(--rem-pc));
  background: #87B173;
  border-radius: 50%;
  &::before,
  &::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    display: block;
    width: calc(8 * var(--rem-pc));
    height: calc(1 * var(--rem-pc));
    background: #FCFCFA;
    translate: -50% -50%;
  }
  &::after {
    rotate: 90deg;
  }
  .js-accordion--trigger.is-open & {
    &::after {
      rotate: 0deg;
    }
  }
}
@media (width < 768px) {
  /**
  * point-list
  */
  .point-list {
    gap: calc(10 * var(--rem));
    margin-top: calc(30 * var(--rem));
  }
  .point-list__item--2 {
    .point-list__box-wrap {
      padding-bottom: calc(13 * var(--rem));
    }
    .point-list__box {
      margin-right: calc(24 * var(--rem));
    }
  }
  .point-list__item--3 {
    .point-list__box-wrap {
      padding-top: calc(15 * var(--rem));
      padding-bottom: calc(12 * var(--rem));
    }
    .point-list__box {
      margin-top: calc(-3 * var(--rem));
      margin-right: calc(27 * var(--rem));
    }
  }
  .point-list__item--4 {
    .point-list__box-wrap {
      padding-bottom: calc(14 * var(--rem));
    }
    .point-list__box {
      margin-right: calc(8 * var(--rem));
    }
  }
  .point-list__item--5 {
    .point-list__box {
      margin-right: 0;
    }
    .point-list__box-text {
      margin-top: calc(-2 * var(--rem));
    }
  }
  .point-list__item--6 {
    .point-list__box {
      margin-top: calc(-6 * var(--rem));
      margin-right: 0;
    }
    .point-list__box-text {
      text-align: center;
    }
  }
  .point-list__item-body__inner {
    width: calc(272 * var(--rem));
    padding-top: calc(6 * var(--rem));
    padding-bottom: calc(16 * var(--rem));
  }
  .point-list__item-body__text {
    font-size: calc(13 * var(--rem));
    line-height: calc(19.2 / 11);
    letter-spacing: .05em;
  }
  .point-list__box-container {
    width: calc(322 * var(--rem));
    border-radius: calc(5 * var(--rem));
    &.--mini {
      width: calc(150 * var(--rem));
    }
  }
  .point-list__box-wrap {
    height: auto;
    padding-top: calc(9 * var(--rem));
    padding-bottom: calc(6 * var(--rem));
    &.--high {
      height: auto;
    }
    .point-list__box-container.--mini & {
      height: calc(148 * var(--rem));
    }
  }
  .point-list__box {
    gap: calc(8 * var(--rem));
    .point-list__box-container.--mini & {
      flex-direction: column;
    }
  }
  .point-list__box-icon {
    width: calc(96 * var(--rem));
    .point-list__box-container.--mini & {
      width: calc(96 * var(--rem));
    }
  }
  .point-list__box-text {
    font-size: calc(15 * var(--rem));
    line-height: calc(22.5 / 15);
    .point-list__box-container.--mini & {
      font-size: calc(14 * var(--rem));
      line-height: calc(21 / 14);
      .--en {
        font-family: var(--lp-font-inter);
      }
      .--small {
        font-size: calc(11 * var(--rem));
      }
    }
    .--em {
      font-size: calc(16 * var(--rem));
    }
  }
  .point-list__box-comment {
    gap: calc(6 * var(--rem));
    margin-top: calc(3 * var(--rem));
  }
  .point-list__box-comment__text {
    font-size: calc(12 * var(--rem));
    line-height: calc(15 / 12);
  }
  .point-list__box-comment__icon {
    width: calc(14 * var(--rem));
    height: calc(14 * var(--rem));
    &::before,
    &::after {
      width: calc(8 * var(--rem));
      height: calc(1 * var(--rem));
    }
  }
}


/**
 * project-app-block
 */
.project-app-block {
  margin-top: calc(52 * var(--rem-pc));
}
.project-app-block__heading {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: calc(15 * var(--rem-pc));
  color: #4A7331;
  text-align: center;
}
.project-app-block__heading-tips {
  position: absolute;
  top: calc(-34 * var(--rem-pc));
  left: calc(8 * var(--rem-pc));
  width: calc(65 * var(--rem-pc));
  rotate: -3deg;
}
.project-app-block__heading-sub {
  margin-left: calc(12 * var(--rem-pc));
  margin-bottom: calc(2 * var(--rem-pc));
  font-size: calc(15 * var(--rem-pc));
  font-weight: 600;
  line-height: calc(21 / 15);
  letter-spacing: .05em;
}
.project-app-block__heading-main {
  font-size: calc(17 * var(--rem-pc));
  font-weight: 700;
  line-height: calc(23.5 / 17);
  letter-spacing: .07em;
  .--large {
    font-size: calc(20 * var(--rem-pc));
  }
  .emphasis {
    position: relative;
    &::before {
      position: absolute;
      top: calc(-2 * var(--rem-pc));
      left: 50%;
      content: '';
      display: block;
      width: calc(3 * var(--rem-pc));
      height: calc(3 * var(--rem-pc));
      background: #68A54B;
      border-radius: 50%;
      translate: -50% 0;
    }
  }
}
@media (width < 768px) {
  /**
  * project-app-block
  */
  .project-app-block {
    margin-top: calc(39 * var(--rem));
  }
  .project-app-block__heading {
    margin-bottom: calc(10 * var(--rem));
  }
  .project-app-block__heading-tips {
    top: calc(-36 * var(--rem));
    left: calc(-45 * var(--rem));
    width: calc(69 * var(--rem));
  }
  .project-app-block__heading-sub {
    margin-left: calc(1 * var(--rem));
    margin-bottom: calc(9 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: calc(20 / 14);
  }
  .project-app-block__heading-main {
    margin-left: calc(-10 * var(--rem));
    font-size: calc(16 * var(--rem));
    line-height: calc(19.5 / 16);
    .--large {
      font-size: calc(19 * var(--rem));
    }
    .emphasis {
      &::before {
        top: calc(-2 * var(--rem));
        width: calc(3 * var(--rem));
        height: calc(3 * var(--rem));
      }
    }
  }
}


/**
 * project-app
 */
.project-app {
  display: flex;
  gap: calc(15 * var(--rem-pc));
  width: calc(420 * var(--rem-pc));
  height: calc(120 * var(--rem-pc));
  margin-inline: auto;
  padding-top: calc(18 * var(--rem-pc));
  padding-left: calc(21 * var(--rem-pc));
  background: #fdfdf4;
  border: 1px solid #e8e8e8;
  border-radius: calc(8 * var(--rem-pc));
}
.project-app__icon {
  flex-shrink: 0;
  width: calc(60 * var(--rem-pc));
}
.project-app__body-heading {
  font-size: calc(14 * var(--rem-pc));
  font-weight: 700;
  line-height: calc(22.4 / 14);
  letter-spacing: 0.05em;
}
.project-app__body-text {
  margin-top: calc(2 * var(--rem-pc));
  font-size: calc(12 * var(--rem-pc));
  line-height: calc(16.8 / 12);
  letter-spacing: 0.05em;
}
.project-app__body-list {
  display: flex;
  gap: calc(21 * var(--rem-pc));
  margin-top: calc(8 * var(--rem-pc));
  .component-link--arrow {
    gap: calc(2 * var(--rem-pc));
  }
}
@media (width < 768px) {
  /**
  * project-app
  */
  .project-app {
    gap: calc(10 * var(--rem));
    width: calc(350 * var(--rem));
    height: calc(90 * var(--rem));
    padding-top: calc(15 * var(--rem));
    padding-left: calc(16 * var(--rem));
    border-radius: calc(8 * var(--rem));
  }
  .project-app__icon {
    width: calc(60 * var(--rem));
  }
  .project-app__body-heading {
    font-family: var(--lp-font-inter);
    font-size: calc(15 * var(--rem));
    font-weight: 600;
    line-height: calc(22.4 / 15);
    letter-spacing: 0em;
  }
  .project-app__body-text {
    margin-top: 0;
    font-size: calc(12 * var(--rem));
  }
  .project-app__body-list {
    display: flex;
    gap: calc(21 * var(--rem-pc));
    margin-top: calc(10 * var(--rem-pc));
  }
}


/**
 * link-list__block
 */
.link-list__block-container {
  margin-top: calc(30 * var(--rem-pc));
}
.link-list__block {
  padding-top: calc(54 * var(--rem-pc));
  padding-bottom: calc(50 * var(--rem-pc));
  padding-inline: calc(40 * var(--rem-pc));
  border-top: 1px solid #EDEFEC;
}
.link-list__heading {
  margin-bottom: calc(25 * var(--rem-pc));
  color: #4A7331;
  font-size: calc(20 * var(--rem-pc));
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  text-align: center;
}
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--rem-pc));
}
.link-list__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--rem-pc));
  width: calc(165 * var(--rem-pc));
  height: calc(50 * var(--rem-pc));
  background: #F2F1EA;
  border-radius: calc(2 * var(--rem-pc));
  &:has(.link-list__link-icon) {
    justify-content: flex-start;
    padding-left: calc(11 * var(--rem-pc));
  }
  &:has(.link-list__link-logo) {
    height: calc(69 * var(--rem-pc));
  }
}
.link-list__link-text {
  font-size: calc(14 * var(--rem-pc));
}
.link-list__link-icon {
  width: calc(24 * var(--rem-pc));
}
.link-list__link-logo {
  width: calc(var(--width) * var(--rem-pc));
}
.link-list__block-button {
  margin-top: calc(25 * var(--rem-pc));
}
@media (width < 768px) {
  /**
  * link-list__block
  */
  .link-list__block-container {
    margin-top: calc(30 * var(--rem));
  }
  .link-list__block {
    padding-top: calc(34 * var(--rem));
    padding-bottom: calc(29 * var(--rem));
    padding-inline: 0;
  }
  .link-list__heading {
    margin-bottom: calc(20 * var(--rem));
    font-size: calc(16 * var(--rem));
  }
  .link-list {
    gap: calc(3 * var(--rem));
  }
  .link-list__item {
    width: calc((100% - calc(6 * var(--rem))) / 3);
  }
  .link-list__link {
    gap: calc(2 * var(--rem));
    width: 100%;
    height: calc(38 * var(--rem));
    border-radius: calc(2 * var(--rem));
    &:has(.link-list__link-icon) {
      padding-left: calc(7 * var(--rem));
    }
    &:has(.link-list__link-logo) {
      height: calc(50 * var(--rem));
    }
  }
  .link-list__link-text {
    font-size: calc(12 * var(--rem));
  }
  .link-list__link-icon {
    width: calc(20 * var(--rem));
  }
  .link-list__link-logo {
    width: calc(var(--sp-width) * var(--rem));
  }
  .link-list__block-button {
    margin-top: calc(18 * var(--rem));
  }
}


/**
 * feature-block
 */
.feature-block {
  padding-bottom: 0;
  .link-list__heading {
    margin-bottom: calc(14 * var(--rem-pc));
  }
  .link-list__block-button {
    margin-top: calc(16 * var(--rem-pc));
  }
}
.feature-block__body {
  margin-top: calc(26 * var(--rem-pc));
}
.feature-block__heading-sub {
  width: fit-content;
  margin-inline: auto;
  .component-link--arrow {
    position: relative;
    padding-bottom: calc(4 * var(--rem-pc));
    font-size: calc(13 * var(--rem-pc));
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: #ccc;
    }
  }
}
.feature-block__image {
  position: relative;
  width: calc(600 * var(--rem-pc));
  margin-inline: auto;
  .project-app-block__heading-tips {
    position: absolute;
    top: calc(-23 * var(--rem-pc));
    left: calc(102 * var(--rem-pc));
  }
}
.feature-block__text {
  margin-top: calc(15 * var(--rem-pc));
  font-size: calc(15 * var(--rem-pc));
  line-height: calc(30 / 15);
  letter-spacing: 0.05em;
  text-align: center;
}
@media (width < 768px) {
  /**
  * feature-block
  */
  .feature-block {
    .link-list__heading {
      margin-bottom: calc(11 * var(--rem));
    }
    .link-list__block-button {
      margin-top: calc(15 * var(--rem));
    }
  }
  .feature-block__body {
    margin-top: calc(32 * var(--rem));
  }
  .feature-block__heading-sub {
    .component-link--arrow {
      padding-bottom: calc(4 * var(--rem));
      font-size: calc(12 * var(--rem));
    }
  }
  .feature-block__image {
    width: calc(330 * var(--rem));
    .project-app-block__heading-tips {
      top: calc(-25 * var(--rem-pc));
      left: calc(65 * var(--rem-pc));
    }
  }
  .feature-block__text {
    margin-top: calc(14 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: calc(26 / 13);
  }
}


/**
 * section-delivery
 */
.section-delivery {
  background: #F5F5ED;
}


/**
 * delivery-list
 */
.delivery-list {
  display: flex;
  justify-content: center;
  margin-top: calc(40 * var(--rem-pc));
}
.delivery-list__item {
  width: calc(450 * var(--rem-pc));
}
.delivery-list__item-text {
  margin-bottom: calc(6 * var(--rem-pc));
  font-size: calc(15 * var(--rem-pc));
  font-weight: 500;
  line-height: calc(24.2 / 15);
  letter-spacing: .05em;
  text-align: center;
  .--em {
    color: #68A54B;
    font-style: normal;
    font-size: calc(17 * var(--rem-pc));
    font-weight: 700;
  }
  .--small {
    font-size: calc(13 * var(--rem-pc));
  }
}
.delivery-list__item-image {
  width: calc(390 * var(--rem-pc));
  margin-inline: auto;
}
.delivery-list__item-link {
  width: fit-content;
  margin-top: calc(4 * var(--rem-pc));
  margin-inline: auto;
  .component-link--arrow {
    position: relative;
    padding-bottom: calc(4 * var(--rem-pc));
    font-size: calc(13 * var(--rem-pc));
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background: #ccc;
    }
  }
}
@media (width < 768px) {
  /**
  * delivery-list
  */
  .delivery-list {
    flex-direction: column;
    gap: calc(30 * var(--rem));
    margin-top: calc(30 * var(--rem));
  }
  .delivery-list__item {
    width: 100%;
  }
  .delivery-list__item-text {
    margin-bottom: calc(6 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: calc(22.5 / 14);
    .--em {
      font-size: calc(16 * var(--rem));
    }
    .--small {
      font-size: calc(12 * var(--rem));
    }
  }
  .delivery-list__item-image {
    width: calc(254 * var(--rem));
  }
  .delivery-list__item-link {
    margin-top: calc(6 * var(--rem));
    .component-link--arrow {
      padding-bottom: calc(4 * var(--rem));
      font-size: calc(12 * var(--rem-pc));
    }
  }
}


/**
 * content-block
 */
.content-block {
  margin-top: calc(59 * var(--rem-pc));
  padding-top: calc(59 * var(--rem-pc));
  border-top: 1px solid #D5E3CD;
}
.content-block__head {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  .project-app-block__heading-tips {
    position: absolute;
    top: calc(-47 * var(--rem-pc));
    left: calc(-39 * var(--rem-pc));
  }
}
.content-block__heading {
  color: #4A7331;
  font-size: calc(25 * var(--rem-pc));
  font-weight: 500;
  line-height: calc(37.5 / 25);
  letter-spacing: .05em;
  text-align: center;
}
@media (width < 768px) {
  /**
  * content-block
  */
  .content-block {
    margin-top: calc(39 * var(--rem));
    padding-top: calc(38 * var(--rem));
  }
  .content-block__head {
    .project-app-block__heading-tips {
      top: calc(-35 * var(--rem-pc));
      left: calc(-35 * var(--rem-pc));
    }
  }
  .content-block__heading {
    font-size: calc(19 * var(--rem));
    font-weight: 700;
    line-height: calc(33.2 / 19);
  }
}


/**
 * content-list
 */
.content-list {
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--rem-pc));
  margin-top: calc(29 * var(--rem-pc));
}
.content-list__item {
  width: calc(535 * var(--rem-pc));
  padding-block: calc(30 * var(--rem-pc)) calc(30 * var(--rem-pc));
  padding-inline: calc(49 * var(--rem-pc));
  background: #fff;
  border: 1px solid #EAEAE1;
  border-radius: calc(5 * var(--rem-pc));
}
.content-list__item-image {
  width: 100%;
  margin-bottom: calc(22 * var(--rem-pc));
}
.content-list__item-body {
  text-align: center;
}
.content-list__item-heading {
  font-size: calc(18 * var(--rem-pc));
  font-weight: 500;
  line-height: calc(22.4 / 18);
  letter-spacing: .05em;
}
.content-list__item-text {
  margin-top: calc(12 * var(--rem-pc));
  font-size: calc(14 * var(--rem-pc));
  line-height: calc(24 / 14);
  letter-spacing: .05em;
}
.content-list__item-button {
  margin-top: calc(23 * var(--rem-pc));
  .component-button {
    width: calc(260 * var(--rem-pc));
  }
}
@media (width < 768px) {
  /**
  * content-list
  */
  .content-list {
    flex-direction: column;
    gap: calc(20 * var(--rem));
    margin-top: calc(25 * var(--rem));
  }
  .content-list__item {
    width: 100%;
    padding-block: 0;
    padding-inline: 0;
    border: none;
    border-radius: calc(5 * var(--rem));
  }
  .content-list__item-image {
    margin-bottom: 0;
    border-radius: calc(5 * var(--rem)) calc(5 * var(--rem)) 0 0;
    overflow: clip;
  }
  .content-list__item-body {
    padding-top: calc(16 * var(--rem));
    padding-bottom: calc(20 * var(--rem));
    border: 1px solid #EAEAE1;
    border-top: none;
    border-radius: 0 0 calc(5 * var(--rem)) calc(5 * var(--rem));
  }
  .content-list__item-heading {
    font-size: calc(16 * var(--rem));
    line-height: calc(22.4 / 16);
  }
  .content-list__item-text {
    margin-top: calc(10 * var(--rem));
    font-size: calc(13 * var(--rem));
    line-height: calc(23 / 13);
  }
  .content-list__item-button {
    margin-top: calc(17 * var(--rem));
    .component-button {
      width: calc(240 * var(--rem));
    }
  }
}


/**
 * section-gift
 */
.section-gift {
  padding-bottom: calc(89 * var(--rem-pc));
  .component-label {
    font-size: calc(15 * var(--rem-pc));
  }
  .component-heading {
    font-size: calc(25 * var(--rem-pc));
  }
}
.section-gift__image {
  width: calc(650 * var(--rem-pc));
  margin-top: calc(32 * var(--rem-pc));
  margin-inline: auto;
}
.section-gift__button-container {
  margin-top: calc(60 * var(--rem-pc));
}
.section-gift__button {
  & + & {
    margin-top: calc(10 * var(--rem-pc));
  }
}
@media (width < 768px) {
  /**
  * section-gift
  */
  .section-gift {
    padding-bottom: calc(49 * var(--rem));
    .component-label {
      font-size: calc(13 * var(--rem));
    }
    .component-heading {
      font-size: calc(19 * var(--rem));
      line-height: calc(30.8 / 20);
    }
  }
  .section-gift__image {
    width: 100%;
    margin-top: calc(28 * var(--rem));
  }
  .section-gift__button-container {
    margin-top: calc(50 * var(--rem));
  }
  .section-gift__button {
    & + & {
      margin-top: calc(9 * var(--rem));
    }
}
}



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

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

  /**
  * project-inner
  */
  .project-inner {
    max-width: calc(1100 * var(--rem-pc));
    margin-inline: auto;
  }

}


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

  /**
  * project-inner
  */
  .project-inner {
    padding-inline: calc(20 * var(--rem));
  }

}