@charset "utf-8";

.product {
  --color-primary: #316545;
  --color-primary-opcity: #EFFAF3;
}

.hero {
  background: var(--color-primary);
  padding: 3.5rem min(2.7778%, 2.5rem);
  position: relative;

  &::after {
    content: "";
    display: block;
    width: 44.6875rem;
    height: 100%;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="715" height="442" viewBox="0 0 715 442" fill="none"><path d="M255.5 0H715V442H0L255.5 0Z" fill="%2320422F"/></svg>') no-repeat right center;
    background-size: contain;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  & .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 11%;
  }

  @media screen and (width <= 768px) {
    padding: 3.4375rem 0 10.87rem;
    position: relative;

    &::after {
      width: 100%;
      height: 16.25rem;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="390" height="260" viewBox="0 0 390 260" fill="none"><path d="M390 92.9091L390 260L-1.1365e-05 260L0 -1.70474e-05L390 92.9091Z" fill="%2320422F"/></svg>');
      bottom: 0;
    }

    & .row {
      flex-direction: column;
    }
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  position: relative;
  z-index: 1;

  & .headline {
    display: flex;
    flex-direction: column;
    gap: .315rem;
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.6;
    color: #fff;

    & span {
      display: block;
    }
  }

  @media screen and (width <= 768px) {
    margin: 0 0 2.56rem;
    position: static;

    & .headline {
      font-size: 1rem;
      text-align: center;
      gap: 0;
    }

    & .apply-button {
      position: absolute;
      bottom: 3.96rem;
      left: 0;
      right: 0;
      z-index: 1;
      margin: 0 2.75rem;
    }
  }
}

.hero-illust {
  position: relative;
  z-index: 1;
}

.head {
  padding: 7.875rem 0 0;

  & .lead {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 2;
    text-align: center;
  }

  @media screen and (width <= 768px) {
    padding: 4.25rem 1.75rem 0;

    & .lead {
      text-align: left;
    }
  }
}

/* セクション共通 */
.section {
  & .headline {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-primary);
    text-align: center;
    margin: 0 0 4.0625rem;

    @media screen and (width <= 768px) {
      font-size: 2rem;
      margin: 0 0 3.125rem;
    }
  }
}

/* 特徴 */
.feature {
  padding: 8rem min(2.7778%, 2.5rem) 8.75rem;
  overflow: hidden;

  & .headline {
    margin: 0 0 6.25rem;
    color: var(--gray-scale-12);

    & span {
      font-size: 3.25rem;
      font-weight: 900;
      color: #009332;
    }
  }

  @media screen and (width <= 768px) {
    padding: 3.25rem 0 6.75rem;

    & .headline {
      margin: 0 0 3.125rem;

      & span {
        font-size: 2.375rem;
      }
    }
  }
}

.feature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

  &::after {
    content: "";
    display: block;
    width: 15rem;
    height: 15rem;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="161" height="240" viewBox="0 0 161 240" fill="none"><path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M108.455 11.5446C108.455 5.16875 113.624 0 120 0C126.376 0 131.545 5.16875 131.545 11.5446V36.9404C168.619 42.0472 197.953 71.3817 203.059 108.455H228.455C234.832 108.455 240 113.624 240 120C240 126.376 234.832 131.545 228.455 131.545H203.059C197.953 168.618 168.619 197.953 131.545 203.059V228.455C131.545 234.831 126.376 240 120 240C113.624 240 108.455 234.831 108.455 228.455V203.059C71.3814 197.953 42.0469 168.618 36.9406 131.545H11.5445C5.16835 131.545 0 126.376 0 120C0 113.624 5.16835 108.455 11.5445 108.455H36.9406C42.0469 71.3817 71.3814 42.0472 108.455 36.9404V11.5446ZM120 61.5004C87.6918 61.5004 61.5005 87.6916 61.5005 120C61.5005 152.308 87.6918 178.5 120 178.5C152.308 178.5 178.5 152.308 178.5 120C178.5 87.6916 152.308 61.5004 120 61.5004ZM81.3416 120C81.3416 98.6495 98.6498 81.3416 120 81.3416C141.35 81.3416 158.658 98.6495 158.658 120C158.658 141.35 141.35 158.658 120 158.658C98.6498 158.658 81.3416 141.35 81.3416 120ZM120 106.69C112.649 106.69 106.69 112.649 106.69 120C106.69 127.351 112.649 133.31 120 133.31C127.351 133.31 133.31 127.351 133.31 120C133.31 112.649 127.351 106.69 120 106.69Z" fill="%23FF6F07"/></svg>') no-repeat left center;
    position: absolute;
    right: calc((((100vw - 100%)/2)*-1) - 5rem);
    top: -7.5rem;
    margin: 0 auto;
  }

  & + .feature-item {
    margin-top: 10rem;
  }

  & .image {
    margin: 0 0 0 -10.75rem;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 5.625rem;
      height: 4.625rem;
      background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="76" viewBox="0 0 90 76" fill="none"><circle cx="80" cy="66" r="10" fill="%23316545"/><path d="M0 2H40.1231L80 66" stroke="%23316545" stroke-width="4"/></svg>') no-repeat center center;
      background-size: 100% 100%;
      position: absolute;
      right: -5.625rem;
      top: 1.5rem;
    }
  }

  & .text {
    width: 35rem;
    padding: 0 0 0 7.06rem;
    font-size: 1.125rem;

    & p {
      line-height: 1.9;

      & + .c-note {
        margin-top: 1.25rem;
      }
    }
  }

  & .title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--gray-scale-12);
    margin: 0 0 1.7813rem;

    & span {
      font-size: 2.5rem;
      color: var(--color-accent);
      transform: translate(0, -8px);
    }

    & sup {
      font-size: 1rem;
      vertical-align: text-bottom;
    }
  }

  &:nth-of-type(even) {
    flex-direction: row-reverse;

    &::after {
      left: calc((((100vw - 100%)/2)*-1) - 5rem);
      right: auto;
      transform: scale(-1,1);
    }

    & .image {
      margin: 0 -10.75rem 0 0;

      &::after {
        transform: scale(-1,1);
        right: auto;
        left: -5.625rem;
      }
    }

    & .text {
      padding: 0 7.06rem 0 0;
    }
  }

  @media screen and (width <= 768px) {
    flex-direction: column;
    gap: 2.625rem;

    &::after {
      display: none;
    }

    & + .feature-item {
      margin-top: 5.75rem;
    }

    & .image {
      margin: 0 -1.75rem 0 1.56rem;
      position: relative;

      &::before {
        content: "";
        display: block;
        width: 4.625rem;
        height: 6.75rem;
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="74" height="108" viewBox="0 0 74 108" fill="none"><path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M48.805 5.19506C48.805 2.32594 51.1307 0 54 0C56.8693 0 59.195 2.32594 59.195 5.19506V16.6232C75.8784 18.9212 89.0789 32.1218 91.3767 48.8049H102.805C105.674 48.8049 108 51.1309 108 54C108 56.8691 105.674 59.195 102.805 59.195H91.3767C89.0789 75.8782 75.8784 89.0787 59.195 91.3768V102.805C59.195 105.674 56.8693 108 54 108C51.1307 108 48.805 105.674 48.805 102.805V91.3768C32.1216 89.0787 18.9211 75.8782 16.6233 59.195H5.19503C2.32576 59.195 0 56.8691 0 54C0 51.1309 2.32576 48.8049 5.19503 48.8049H16.6233C18.9211 32.1218 32.1216 18.9212 48.805 16.6232V5.19506ZM54 27.6752C39.4613 27.6752 27.6752 39.4612 27.6752 54C27.6752 68.5388 39.4613 80.3248 54 80.3248C68.5387 80.3248 80.3248 68.5388 80.3248 54C80.3248 39.4612 68.5387 27.6752 54 27.6752ZM36.6037 54C36.6037 44.3923 44.3924 36.6037 54 36.6037C63.6076 36.6037 71.3963 44.3923 71.3963 54C71.3963 63.6077 63.6076 71.3963 54 71.3963C44.3924 71.3963 36.6037 63.6077 36.6037 54ZM54 48.0106C50.6922 48.0106 48.0106 50.6921 48.0106 54C48.0106 57.3078 50.6922 59.9894 54 59.9894C57.3078 59.9894 59.9894 57.3078 59.9894 54C59.9894 50.6921 57.3078 48.0106 54 48.0106Z" fill="%23FF6F07"/></svg>') no-repeat left bottom/ 100%;
        position: absolute;
        right: 0;
        bottom: -4.625rem;
        margin: 0 auto;
      }

      &::after {
        width: 2.75rem;
        height: 4.5rem;
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="74" viewBox="0 0 44 74" fill="none"><circle cx="8" cy="8" r="8" transform="matrix(-1 0 0 1 16 58)" fill="%23316545"/><path d="M44 2H25.9446L8 66" stroke="%23316545" stroke-width="4"/></svg>');
        inset: auto auto -2rem -2.75rem;
      }
    }

    & .text {
      width: auto;
      padding: 0;
      font-size: 1rem;

      & p {
        & + .c-note {
          margin-top: 1.25rem;
        }
      }
    }

    & .title {
      font-size: 1.625rem;
      line-height: 1.6;
      margin: 0 0 2rem;

      & span {
        font-size: 2rem;
      }
    }

    &:nth-of-type(even) {
      flex-direction: column;

      & .image {
        margin: 0 1.56rem 0 -1.75rem;

        &::before {
          transform: scale(-1,1);
          right: auto;
          left: 0;
        }

        &::after {
          right: -2.75rem;
          left: auto;
        }
      }

      & .text {
        padding: 0;
      }
    }
  }
}

.cta {
  background: var(--color-primary);
  color: #fff;
  padding: 2.8125rem 0 3.44rem;
  text-align: center;

  & .col {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
  }

  & .headline {
    font-size: 2.25rem;
  }

  & .buttons {
    display: flex;
    justify-content: center;
    gap: 1.25rem;

    & li {
      min-width: 338px;

      & a {
        display: flex;
      }
    }
  }

  @media screen and (width <= 768px) {
    padding: 2rem 0 2.5rem;

    & .column {
      gap: 2.5rem;
    }

    & .headline {
      font-size: 1.75rem;
    }

    & .buttons {
      flex-direction: column-reverse;
      gap: .75rem;
    }
  }
}

/* Price */

.price-menu {
  background: #EFFAF3;
  padding: 9.0625rem min(2.7778%, 2.5rem) 10rem;

  @media screen and (width <= 768px) {
    padding: 4.0625rem 0 5rem;
  }

  @media screen and (width >= 769px) {
    & .headline {
      margin: 0 0 5.2813rem;
    }
  }

  @media screen and (width <= 768px) {
    & .headline {
      margin: 0 0 4.2188rem;
    }
  }
}

.plan {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.625rem 1.7273%;
  margin: 0 0 4.3438rem;

  @media screen and (width <= 768px) {
    flex-direction: column;
    gap: 2rem;
    margin: 0 0 3rem;
  }

  & .c-note-list {
    width: 100%;
    order: 1;
  }
}

.plan-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 4.25rem 2.7273% 2rem;
  position: relative;
  background: #fff;
  border-radius: 1.25rem;
  border: solid 2px #fff;

  & .desc {
    display: flex;
    flex-direction: column;
    margin: 0 0 2.625rem;
  }

  & .label {
    color: #fff;
    background: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 1rem 1.25rem;
    position: absolute;
    top: -1.5rem;
    left: 50%;
    margin: 0 auto;
    transform: translateX(-50%);
    text-align: center;
    border-radius: 1.5rem;
    white-space: nowrap;
  }

  & .title {
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--gray-scale-12);
    text-align: center;
    margin: 0 0 1rem;
  }

  & .lead {
    min-height: 45px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--gray-scale-11);
    text-align: center;
    margin: 0 0 2.125rem;
  }

  & .price {
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    color: var(--gray-scale-12);

    & dt {
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1;
      color: var(--color-primary);
      text-align: center;
      margin: 0 0 1rem;
    }

    & dd {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: .6875rem 0.75rem;
    }

    & .discount {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 2.8125rem;
      height: 2.8125rem;
      background: var(--color-primary);
      border-radius: 0.125rem;
      color: #fff;
      font-family: Roboto, sans-serif;
      font-size: 1rem;
      line-height: 1.1;

      & small {
        font-size: 0.8125rem;
      }
    }

    & strong {
      font-family: Roboto, sans-serif;
      font-size: 2.25rem;
      line-height: 1.2;
      margin: 0 .25rem 0 0;
    }

    & .note {
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      font-weight: 400;
    }
  }

  & .check-list {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    margin-top: 1.3125rem;

    & li {
      display: flex;
      gap: .75rem;
      font-size: 0.9375rem;
      line-height: 160%;
      color: var(--color-primary);

      &::before {
        content: "";
        display: block;
        flex-shrink: 0;
        width: 1.3125rem;
        height: 1.25rem;
        background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none"><path d="M7.5 10.75L9.75 13L13.5 7.75M19.5 10C19.5 11.1819 19.2672 12.3522 18.8149 13.4442C18.3626 14.5361 17.6997 15.5282 16.864 16.364C16.0282 17.1997 15.0361 17.8626 13.9442 18.3149C12.8522 18.7672 11.6819 19 10.5 19C9.3181 19 8.14778 18.7672 7.05585 18.3149C5.96392 17.8626 4.97177 17.1997 4.13604 16.364C3.30031 15.5282 2.63738 14.5361 2.18508 13.4442C1.73279 12.3522 1.5 11.1819 1.5 10C1.5 7.61305 2.44821 5.32387 4.13604 3.63604C5.82387 1.94821 8.11305 1 10.5 1C12.8869 1 15.1761 1.94821 16.864 3.63604C18.5518 5.32387 19.5 7.61305 19.5 10Z" stroke="%23316545" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
        background-size: 100% 100%;
        margin: .25rem 0 0;
      }
    }
  }

  & .apply-button {
    font-size: 1rem;
    padding: 1rem 0;
  }

  &.recommend {
    border-color: var(--color-accent);

    & .label {
      background: var(--color-accent);
    }
  }

  @media screen and (width <= 768px) {
    padding: 4.25rem 1.5rem 2rem;
    order: 1;

    &.recommend {
      order: 0;
    }
  }
}

.sub-section {
  margin: 0 0 3.0938rem;

  &:last-child {
    margin: 0;
  }

  & .headline {
    font-size: 1.75rem;
    color: var(--gray-scale-12);
    margin: 0 0 1.8438rem;
    text-align: left;
  }
}


.option {
  & .prod-table-wrap {
    margin-bottom: 1.625rem;
  }

  & .prod-table {
    & thead {
      & th {
        text-align: center;

        &:first-child {
          text-align: left;
        }
      }
    }

    & th {
      width: 18.75rem;
    }

    & td {
      &:nth-child(2) {
        width: 31.25rem;
      }

      &:last-child {
        text-align: center;
      }
    }
  }

  @media screen and (width <= 768px) {
    & .prod-table-wrap {
      margin-bottom: 3.375rem;
    }

    & .prod-table {
      & td {
        &:nth-child(2) {
          width: 308px;
        }

        &:last-child {
          text-align: center;
        }
      }
    }
  }
}

.menu {
  & .prod-table {
    & th {
      width: 18.75rem;
    }

    & td {
      &:nth-child(2) {
        width: 50rem;
      }
    }
  }

  & .modal-button {
    gap: .75rem;
    font-size: 1rem;
    padding-top: .9375rem;
    padding-bottom: .9375rem;
    margin: 1.375rem 0 0;

    &::after {
      content: "";
      display: block;
      width: 1.25rem;
      height: 1.0041rem;
      background: url('data:image/svg+xml;charset=UTF-8,<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.0085 8.68161L2.17767 3.85078V7.9973H0.5V0.96701H7.52438V2.65059H3.35915L8.20869 7.48142L7.0085 8.68161ZM2.17767 17.0271C1.72458 17.0271 1.33173 16.8607 0.999138 16.528C0.666379 16.1954 0.5 15.8025 0.5 15.3494V9.72101H2.17767V15.3494H10.6325V17.0271H2.17767ZM18.8164 10.15V2.65059H9.24809V0.96701H18.8164C19.2712 0.96701 19.6654 1.13396 19.9991 1.46787C20.333 1.80162 20.5 2.19585 20.5 2.65059V10.15H18.8164ZM20.5 11.6274V17.033H12.1099V11.6274H20.5Z" fill="%23316545"/></svg>') no-repeat center center;
      background-size: 100% 100%;
    }
  }

  @media screen and (width <= 768px) {
    & .prod-table {
      & th {
        width: 12.5rem;
      }

      & td {
        &:nth-child(2) {
          width: 44.25rem;
        }

      }
    }
  }
}

.report-modal {
  margin: auto;
  border: none;
  width: 100%;
  height: 100%;
  background: none;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;

  &::backdrop {
    background: #000C;
  }

  & .close-button {
    border: none;
    width: 2.5rem;
    height: 2.5rem;
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27.5265 14.7325C28.1512 14.1078 28.1512 13.0932 27.5265 12.4685C26.9018 11.8438 25.8872 11.8438 25.2625 12.4685L20 17.7361L14.7325 12.4735C14.1078 11.8488 13.0932 11.8488 12.4685 12.4735C11.8438 13.0982 11.8438 14.1128 12.4685 14.7375L17.7361 20L12.4735 25.2675C11.8488 25.8922 11.8488 26.9068 12.4735 27.5315C13.0982 28.1562 14.1128 28.1562 14.7375 27.5315L20 22.2639L25.2675 27.5265C25.8922 28.1512 26.9068 28.1512 27.5315 27.5265C28.1562 26.9018 28.1562 25.8872 27.5315 25.2625L22.2639 20L27.5265 14.7325Z" fill="white"/></svg>') no-repeat center center;
    position: absolute;
    top: .62rem;
    right: 1.25rem;
    cursor: pointer;
  }
}

.modal-content {
  max-width: min(60.0962%, 32.5rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: auto;
  position: relative;

  & .images {
    margin: auto;
  }

  & .image {
    display: none;

    &.is-active {
      display: block;
    }
  }

  & .control-button {
    border: none;
    width: 3.25rem;
    height: 3.25rem;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="52" height="53" viewBox="0 0 52 53" fill="none"><circle cx="26" cy="26.3999" r="26" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22.4184 17.663C22.9763 17.0772 23.8808 17.0772 24.4387 17.663L31.5816 25.163C32.1395 25.7488 32.1395 26.6985 31.5816 27.2843L24.4387 34.7843C23.8808 35.3701 22.9763 35.3701 22.4184 34.7843C21.8605 34.1985 21.8605 33.2488 22.4184 32.663L28.5511 26.2236L22.4184 19.7843C21.8605 19.1985 21.8605 18.2488 22.4184 17.663Z" fill="%23353535"/></svg>') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;

    &.prev {
      left: -25.3846%;
      transform: rotate(180deg);
    }

    &.next {
      right: -25.3846%;
    }
  }

  @media screen and (width <= 768px) {
    max-width: 32.5rem;
    padding: 1.25rem;
    gap: 1.25rem;

    & .images {
      margin: auto 0 0;
    }

    & .controls {
      display: flex;
      justify-content: center;
      gap: 1.25rem;
      margin: 0 0 auto;
    }

    & .control-button {
      position: static;
      margin: 0;
      width: 2.25rem;
      height: 2.25rem;
    }
  }

}

.flow {
  padding: 6.5625rem min(2.7778%, 2.5rem) 7.5rem;

  @media screen and (width <= 768px) {
    padding: 4.125rem 0 5rem;
  }
}

.flow-list {
  display: flex;

  & > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.375rem;
    counter-increment: number;
    flex: 1;
    line-height: 1.8;
    padding: 2.0625rem 2rem 2.125rem;
    border-top: 1px solid var(--gray-scale-2);
    border-left: 1px solid var(--gray-scale-2);
    border-bottom: 1px solid var(--gray-scale-2);
    position: relative;

    &:last-child {
      border-right: 1px solid var(--gray-scale-2);

      &::after {
        display: none;
      }
    }

    &::before {
      content: counter(number,decimal-leading-zero);
      font-family: Roboto, sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--color-primary);
    }

    &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-top: 1rem solid transparent;
      border-bottom: 1rem solid transparent;
      border-left: 1rem solid var(--gray-scale-2);
      border-right: 0;
      position: absolute;
      right: -1rem;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    & img {
      height: 10.625rem;
    }
  }

  & .title {
    font-size: 1.25rem;
    line-height: 1.8;
    text-align: center;
    margin: 0 0 .8125rem;
  }

  & .lead {
    line-height: 1.8;

    & + .c-note {
      margin: .375rem 0 0;
    }
  }

  @media screen and (width <= 768px) {
    flex-direction: column;

    & > li {
      border-right: 1px solid var(--gray-scale-2);
      border-bottom: none;
      padding: 2.0625rem 1.5rem 2.125rem;

      &:last-child {
        border-bottom: 1px solid var(--gray-scale-2);
      }

      &::after {
        border-right: 1rem solid transparent;
        border-left: 1rem solid transparent;
        border-top: 1rem solid var(--gray-scale-2);
        border-bottom: 0;
        inset: auto 0 -1rem;
        margin: 0 auto;
      }
    }
  }
}

.faq {
  padding: 4.0625rem min(2.7778%, 2.5rem) 7.5rem;

  @media screen and (width <= 768px) {
    padding: 5.5rem 0 5rem;
  }
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 60rem;
  margin: 0 auto;

  & dl {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0 2.5rem 2.5rem;
    border-bottom: solid 1px var(--gray-scale-2);

    & dt,
    & dd {
      display: flex;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 3.5rem;
        height: 3.5rem;
        font-family: Roboto, sans-serif;
        font-size: 1.5rem;
        color: var(--color-primary);
      }
    }

    & dt {
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.6;

      &::before {
        content: "Q";
      }

      & span {
        padding: .6563rem 0;
      }
    }

    & dd {
      background: #EFFAF3;
      border-radius: 0.25rem;

      & p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        line-height: 1.75;
        padding: .6563rem 1rem .6563rem 0;
      }

      &::before {
        content: "A";
      }
    }
  }

  @media screen and (width <= 768px) {
    & dl {
      padding: 0 0 1.75rem;

      & dt {
        font-size: 1.125rem;
      }
    }
  }
}