@layer settings;
/* settings */
@layer settings {
  :root {
    --Color-Primary-50: #F2F7F8;
    --Color-Primary-100: #FAFDFD;
    --Color-Primary-200: #7EC7D1;
    --Color-Primary-500: #4BAFBD;
    --Color-Primary-700: #34686F;
    --Color-Primary-800: #214145;
    --Color-Secondary-400: #F7C83B;
    --Color-Secondary-500: #FABD05;
    --Color-SolidGray-White: #FFF;
    --Color-SolidGray-100: #F3F3F3;
    --Color-SolidGray-200: #E5E7EB;
    --Color-SolidGray-500: #3F3F3F;
    --Color-SolidGray-700: #1D1D1D;

    --Layout-lg: 80rem;
    --Layout-md: 67.5rem;

    --Font-Noto: "Noto Sans JP", sans-serif;
    --Font-Inter: "Inter", "Noto Sans JP", sans-serif;
  }
}

html {
  scroll-behavior: smooth;
}

/* layout */
.inner {
  margin: 0 auto;
  max-width: var(--Layout-lg);
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* contents */

/* ボタン */
.button {
  padding: 0 0.75rem 0.125rem 1.5rem;
  height: 3.75rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.25rem;
  transition: all .2s ease;
  & .button-label {
    padding: 0.125rem 1.25rem 0.15rem 1.25rem;
    position: absolute;
    z-index: 100;
    top: -33%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    white-space: nowrap;
    color: var(--Color-SolidGray-700);
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.4;
    background: var(--Color-Secondary-500);
    border-radius: 0.25rem;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: var(--Color-Secondary-500) transparent transparent;
      translate: -50% 100%;
    }
  }
  & .button-text {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 600;
    font-variation-settings: "wght" 600;
    color: var(--Color-SolidGray-White);
  }
  &::after {
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%23fff"/></svg>');
    background-size: 1.25rem 1.25rem;
    background-repeat: no-repeat;
    background-position: center;
  }
  &.-lg {
    height: 4rem;
    gap: 0.5rem;
    & .button-text {
      font-size: 1.125rem;
      font-weight: 700;
      font-variation-settings: "wght" 700;
    }
    @media (width < 768px) {
      height: 3.75rem;
      & .button-text {
        font-size: 1rem;
        font-weight: 600;
        font-variation-settings: "wght" 600;
      }
    }
  }
  &.-sm {
    padding: 0.5rem 0.75rem 0.55rem 1rem;
    height: auto;
    gap: 0.25rem;
    & .button-text {
      font-size: 0.9375rem;
      font-weight: 500;
      font-variation-settings: "wght" 500;
    }
    @media (width < 768px) {
      & .button-text {
        font-size: 0.875rem;
      }
    }
  }
  &.-primary {
    position: relative;
    background-color: var(--Color-Primary-700);
    @media (769px <= width) {
      &:hover {
        background-color: var(--Color-Primary-800);
      }
    }
  }
  &.-secondary {
    background: rgba(255, 255, 255, 0.10);
    outline: 1px solid var(--Color-Primary-200);
    outline-offset: -1px;
    box-sizing: border-box;
    &::after {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%23FFFFFF"/></svg>');
    }
    @media (769px <= width) {
      &:hover {
        background-color: var(--Color-SolidGray-White);
        & .button-text {
          color: var(--Color-Primary-500);
        }
        &::after {
          background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
        }
      }
    }
  }
  &.-outline {
    &.-ss {
      height: 2.75rem;
      & .button-text {
        font-size: 1rem;
      }
    }
    &.-cp {
      border: solid 1px var(--Color-Primary-500);
      &::after {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
      }
      & .button-text {
        color: var(--Color-Primary-500);
      }
      @media (769px <= width) {
        &:hover {
          background-color: var(--Color-SolidGray-White);
        }
      }
    }
    &.-cw {
      border: solid 1px var(--Color-SolidGray-White);
      &::after {
        background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%23FFF"/></svg>');
      }
      & .button-text {
        color: var(--Color-SolidGray-White);
      }
      @media (769px <= width) {
        &:hover {
          background-color: var(--Color-SolidGray-White);
          border: solid 1pxvar(--Color-Primary-500);
          &::after {
            background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
          }
          & .button-text {
            color: var(--Color-Primary-500);
          }
        }
      }
    }
  }
  &.-text {
    display: inline-flex;
    &::after {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%23111827"/></svg>');
    }
    & .button-text {
      color: var(--Color-SolidGray-700);
      text-decoration: underline;
      transition: all .2s ease;
    }
    @media (769px <= width) {
      &:hover {
        &::after {
          background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
        }
        & .button-text {
          color: var(--Color-Primary-500);
        }
      }
    }
  }
  @media (width < 768px) {
    height: 3.5rem;
    & .button-text {
      font-size: 1rem;
    }
  }
}

.notes-item {
  display: flex;
  gap: .25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  color: var(--Color-SolidGray-500);
  &::before {
    content: "※";
  }
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  text-align: center;
  & .section-headline {
    font-size: 2.25rem;
    line-height: 1.4;
    color: var(--Color-SolidGray-700);
  }
  & .section-lead {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    & .lead-body {
      color: var(--Color-SolidGray-500);
      line-height: 1.5;
    }
  }
}
@media (width < 768px) {
  .section-headline {
    font-size: 1.75rem;
  }
}

/* header */
& .header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.5rem 2rem;
  width: 100%;
  background-color: var(--Color-Primary-500);
  & .header-inner {
    margin: 0 auto;
    width: 100%;
    max-width: var(--Layout-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    & .header-nav {
      display: flex;
      align-items: center;
      gap: 2.5rem;
      & .header-logo {
        width: 10rem;
        height: 1.54544rem;
        & .logo {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      & .header-links {
        padding: 0.25rem 0 0.5rem 2.5rem;
        border-left: 1px dashed #fff;
        display: flex;
        gap: 1.2rem;
        & .link {
          color: #fff;
          font-size: 1rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.4;
        }
      }
    }
    & .header-cta {
      display: flex;
      gap: 0.5rem;
    }
  }
  @media (769px <= width) {
    & .header-inner {
      & .header-nav {
        & .header-links {
          & .link {
            transition: all .2s ease;
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
  @media (width < 1200px) {
    & .header-inner {
      & .header-nav {
        & .header-links {
          & .link {
            font-size: 0.9375rem;
          }
        }
      }
    }
  }
  @media (width < 1100px) {
    & .header-inner {
      & .header-nav {
        & .header-links {
          display: none;
        }
      }
    }
  }
  @media (width < 992px) {
    padding: 0.4rem 0.75rem;
    & .header-inner {
      & .header-nav {
        & .header-logo {
          width: 8.25rem;
          height: 1.275rem;
        }
      }
    }
  }
  @media (width < 600px) {
    & .header-inner {
      & .header-cta {
        & > li:first-child {
          display: none;
        }
      }
    }
  }
}

/* hero */
.hero {
  padding: 0 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #F2F7F8 no-repeat center right / cover;
  background-image: image-set(
    url("../images/bg-hero-pc.avif") type("image/avif"),
    url("../images/bg-hero-pc.webp") type("image/webp"),
    url("../images/bg-hero-pc.png") type("image/png")
  );
  overflow: hidden;
  & .hero-inner {
    padding: 5rem 0;
    width: 100%;
    order: 1;
    & .hero-nav {
      padding: 1.25rem 2rem 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: end;
    }
    & .hero-contents {
      margin: 0 auto;
      width: 100%;
      max-width: 80rem;
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-items: center;
      & .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 40%;
        max-width: 33.25rem;
        gap: 3.75rem;
        & .hero-ttl {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 2.5rem;
          & .hero-headline {
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
            line-height: 1;
            & .hero-headline-label {
              font-size: 1.875rem;
              font-weight: 400;
              font-variation-settings: "wght" 400;
              line-height: 1.4;
              text-align: center;
            }
            & img {
              width: 25rem;
              width: 25rem;
              aspect-ratio: 110/17;
            }
          }
          & .hero-lead {
            color: var(--Color-SolidGray-500);
            text-align: center;
            font-size: 1rem;
            font-weight: 400;
            font-variation-settings: "wght" 400;
            line-height: 1.4;
          }
        }
        & .hero-button {
          display: flex;
          flex-direction: column;
          width: 22.5rem;
          gap: 1.25rem;
        }
      }
      & .hero-kv {
        position: relative;
        width: 53%;
        & .hero-image {
          max-width: 42.5rem;
          max-height: 22.70206rem;
          aspect-ratio: 42.5 / 22.70206;
        }
        & .hero-banner {
          position: absolute;
          z-index: 100;
          bottom: -2.3rem;
          left: -1.25rem;
          padding: 0.75rem 2rem 1rem 2rem;
          width: 13.75rem;
          height: 13.75rem;
          background-color: var(--Color-Primary-500);
          border-radius: 50%;
          display: flex;
          gap: 0.5rem;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          & .banner-headline {
            color: var(--Color-SolidGray-White);
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.4;
            text-align: center;
          }
          & .banner-lead{
            color: var(--Color-Primary-100);
            font-size: 0.75rem;
            font-weight: 400;
            font-variation-settings: "wght" 400;
            line-height: 1.4;
            br {
              display: none;
            }
          }
        }
      }
    }
  }
  @media (width < 1080px) {
    & .hero-inner {
      & .hero-contents {
        & .hero-kv {
          width: 52%;
          & .hero-banner {
            bottom: -4.4rem;
          }
        }
        & .hero-text {
          width: 44%;
          & .hero-ttl {
            & .hero-headline {
                & .hero-headline-label {
                  font-size: 1.5rem;
                }
            }
            & .hero-lead {
              font-size: 0.9375rem;
            }
          }
        }
      }
    }
  }
  @media (width < 880px) {
    padding: 0;
    background-image: image-set(
      url("../images/bg-hero-sp.avif") type("image/avif"),
      url("../images/bg-hero-sp.webp") type("image/webp"),
      url("../images/bg-hero-sp.png") type("image/png")
    );
    & .hero-inner {
      padding: 1.25rem 1.25rem 2.5rem 1.25rem;
      width: 100%;
      & .hero-contents {
        gap: 2rem;
        flex-direction: column;
        & .hero-text {
          width: 100%;
          gap: 2.5rem;
          & .hero-ttl {
            gap: 1.5rem;
            & .hero-headline {
              align-items: center;
              gap: 1rem;
              text-align: center;
              & .hero-headline-label {
                font-size: 1.25rem;
              }
              & img {
                width: 80%;
              }
            }
            & .hero-lead {
              font-size: 0.875rem;
              word-break: keep-all;
              overflow-wrap: anywhere;
            }
          }
        }
        & .hero-kv {
          width: 100%;
          display: flex;
          flex-direction: column-reverse;
          align-items: center;
          gap: 1rem;
          & .hero-image {
            width: 100%;
            max-width: 24rem;
          }
          & .hero-banner {
            padding: 0.75rem 1.25rem 1rem 1.25rem;
            width: 100%;
            height: auto;
            position: inherit;
            bottom: inherit;
            left: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.625rem;
            align-self: stretch;
            border-radius: 0.25rem;
            border: 1px solid #ABD4DA;
            background: rgba(255, 255, 255, 0.50);
            backdrop-filter: blur(6.5px);
            & .banner-headline {
              color: var(--Color-SolidGray-700);
              text-align: center;
              font-size: 0.9375rem;
              line-height: 1.3;
              br {
                display: none;
              }
            }
            & .banner-lead {
              color: var(--Color-SolidGray-500);
              font-size: 0.8125rem;
            }
          }
        }
      }
    }
  }
}

/* news */
.news {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--Color-SolidGray-200);
  & .inner {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    & .section-head {
      margin-top: 0.875rem;
      min-width: 8rem;
      align-items: flex-start;
      flex-shrink: 0;
      & .section-headline {
        font-size: 1.875rem;
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.4;
        text-align: left;
        color: var(--Color-SolidGray-700);
      }
    }
    & .news-list {
      width: 100%;
      & .news-item {
        padding: 1.5rem 0;
        display: flex;
        align-items: center;
        gap: 2.5rem;
        align-self: stretch;
        &:not(:first-child){
          border-top: 1px dashed var(--Color-SolidGray-200);
        }
        & > dt {
          flex-shrink: 0;
          color: var(--Color-SolidGray-500);
          font-family: var(--Font-Inter);
          font-size: 0.9375rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.4;
        }
        & > dd {
          width: 100%;
          & > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2.5rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.4;
            color: var(--Color-SolidGray-700);
            &::after {
              content: "";
              flex-shrink: 0;
              display: block;
              width: 1.25rem;
              height: 1.25rem;
              background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
              background-size: 1.25rem 1.25rem;
              background-repeat: no-repeat;
              background-position: center;
            }
            @media (769px <= width) {
              transition: all .2s ease;
              &:hover {
                text-decoration: underline;
                color: var(--Color-Primary-500);
                &::after {
                  background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0002 3.33331L8.82516 4.50831L13.4752 9.16665H3.3335V10.8333H13.4752L8.82516 15.4916L10.0002 16.6666L16.6668 9.99998L10.0002 3.33331Z" fill="%234BAFBD"/></svg>');
                }
              }
            }
          }
        }
      }
    }
  }
  @media (width < 768px) {
    padding: 1.75rem 1.25rem 2rem 1.25rem;
    & .inner {
      flex-direction: column;
      gap: 0.75rem;
      & .section-head {
        margin-top: 0;
        align-items: flex-start;
        & .section-headline {
          font-size: 1.625rem;
          color: var(--Color-SolidGray-700);
        }
      }
      & .news-list {
        width: 100%;
        & .news-item {
          padding: 0.75rem 0;
          gap: 0.5rem;
          align-items: flex-start;
          flex-direction: column-reverse;
          & > dt {
            width: auto;
            font-size: 0.8125rem;
          }
          & > dd {
            & > a {
              font-size: 0.875rem;
              gap: 0.75rem;
            }
          }
        }
      }
    }
  }
}

/* about */
.about {
  padding: 5rem 2rem;
  overflow-x: hidden;
  & .inner {
    gap: 3.75rem;
    max-width: var(--Layout-md);
    & .section-head {
      & .section-headline {
        color: var(--Color-SolidGray-700);
        strong {
          color: var(--Color-Primary-500);
        }
      }
    }
    & .about-difficulty{
      display: flex;
      gap: 1.5rem;
      & .about-difficulty-item {
        padding: 3rem 3.25rem 3.75rem 3.25rem;
        position: relative;
        border-radius: 0.75rem;
        border: 1px solid #E6F5F7;
        background: #FAFDFD;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        &::after {
          content: "";
          position: absolute;
          right: 1.75rem;
          top: 1.5rem;
          width: 2rem;
          height: 2.5rem;
          background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40" fill="none"><path d="M24.9746 26.4767C25.0095 27.1651 24.9886 27.8605 24.8909 28.5559C24.4935 31.4278 22.6804 33.6808 19.9887 34.7517C18.7195 35.2524 17.3737 35.4262 16.0208 35.3637C15.5466 36.059 14.9539 36.7057 14.2496 37.2621C11.265 39.6055 6.93453 40.6764 3.24562 39.5499C2.40185 39.2926 1.57201 38.9171 0.86073 38.4025C0.100632 37.8531 -0.275928 36.8935 0.233126 36.0243C0.67245 35.2733 1.85095 34.8421 2.61802 35.3984C3.66403 36.1633 4.68213 36.4345 5.83971 36.4902C7.29714 36.5597 8.27342 36.3928 9.68901 35.8852C10.4909 35.6001 11.3487 35.1342 12.0739 34.5501C11.9275 34.4944 11.774 34.4527 11.6276 34.3901C8.92891 33.3401 5.74209 31.9424 4.65424 29.0426C4.17308 27.7562 4.24281 26.1985 4.98199 25.0163C5.84669 23.6395 7.40872 23.0136 8.97076 22.9024C11.53 22.7146 14.0962 24.0359 15.6652 26.0107C17.0738 27.777 17.6038 29.8632 17.3597 31.8589C18.9984 31.6503 20.5605 30.7811 21.1811 29.1817C21.5507 28.236 21.5995 27.2138 21.481 26.1985C18.9845 25.6839 16.5299 24.6061 14.6471 23.5282C12.2831 22.1861 9.61928 20.3642 8.45473 17.8191C7.84804 16.484 7.6249 15.0376 8.24553 13.6677C8.78248 12.4925 9.8494 11.6163 11.1116 11.3242C13.7894 10.7053 16.3765 12.263 18.2941 13.9528C20.3792 15.7886 22.1295 18.0834 23.3289 20.5868C23.7055 21.3656 24.0262 22.1722 24.2982 22.9997C25.2745 22.9997 26.2507 22.8189 27.0457 22.2835C28.6496 21.2056 28.6635 19.1195 28.2451 17.4228C27.7082 15.2671 26.5157 13.3061 25.2047 11.5259C22.5061 7.86818 18.6289 5.0032 14.3612 3.43859C13.4755 3.11176 12.8758 2.25644 13.1408 1.29681C13.3779 0.448439 14.396 -0.239991 15.2886 0.0798856C20.4768 1.98524 24.9398 5.32308 28.2172 9.76658C31.0833 13.6468 34.0958 20.1973 30.0024 24.3279C28.6147 25.7326 26.8574 26.3445 24.9886 26.4627L24.9746 26.4767ZM13.6708 29.3555C13.357 28.6045 12.8131 27.8952 12.1715 27.3876C11.5439 26.8869 10.7629 26.5253 9.96795 26.4002C9.37521 26.3028 8.28737 26.2819 7.92475 26.88C7.61095 27.3946 7.97356 28.1386 8.31526 28.5558C8.99167 29.3834 10.0586 29.8701 10.993 30.336C11.9275 30.8019 12.9247 31.2331 13.9497 31.5321C13.9637 31.4 13.9776 31.2678 13.9776 31.1357C13.9916 30.4612 13.9637 30.0857 13.6638 29.3625L13.6708 29.3555ZM17.813 18.4311C16.5926 16.9986 15.0655 15.3644 13.1966 14.822C12.053 14.4882 10.9094 14.7247 11.5091 16.185C12.2622 18.0069 14.2845 19.2655 15.8953 20.2391C17.276 21.0735 18.7474 21.755 20.2816 22.2557C19.633 20.8788 18.7893 19.5784 17.813 18.438L17.813 18.4311Z" fill="%23C7E5E4"/></svg>');
          background-size: cover;
        }
        & .about-difficulty-ttl {
          color: var(--Color-SolidGray-700);
          text-align: center;
          font-size: 1.5rem;
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
        }
        & .lead-body {
          color: var(--Color-SolidGray-500);
          font-size: 1rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.5;
        }
      }
    }
    & .about-value {
      display: flex;
      flex-direction: column;
      gap: 3.75rem;
      & .about-value-ttl {
        color: var(--Color-SolidGray-700);
        text-align: center;
        font-size: 2rem;
        font-weight: 600;
        font-variation-settings: "wght" 600;
        line-height: 1.4;
      }
      & .lead-body {
        color: var(--Color-SolidGray-500);
        text-align: center;
        font-size: 1rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.5;
      }
    }
    & .section-cta {
      display: flex;
      justify-content: center;
      & .button {
        width: 100%;
        max-width: 22.5rem;
      }
    }
  }
  @media (width < 768px) {
    padding: 2.5rem 1.25rem;
    & .inner {
      gap: 2.5rem;
      & .section-head {
        gap: 1.25rem;
        & .section-headline {
          font-size: 1.625rem;
          text-align: left;
          word-break: keep-all;
          overflow-wrap: anywhere;
        }
        & .section-lead {
          & .lead-body {
            font-size: 0.9375rem;
            text-align: left;
          }
        }
      }
      & .about-difficulty {
        flex-direction: column;
        gap: 0.75rem;
        & .about-difficulty-item {
          padding: 1.25rem 1.25rem 2rem 1.25rem;
          gap: 0.75rem;
          border-radius: 0.5rem;
          &::after {
            width: 1.5rem;
            height: 1.88588rem;
            right: 0.75rem;
            top: 1rem;
          }
          & .about-difficulty-ttl {
            font-size: 1.125rem;
            text-align: left;
            word-break: keep-all;
            overflow-wrap: anywhere;
            br {
              display: none;
            }
          }
          & .lead-body {
            font-size: 0.9375rem;
          }
        }
      }
      & .about-value {
        gap: 2rem;
        & .about-value-ttl {
          font-size: 1.375rem;
          word-break: keep-all;
          overflow-wrap: anywhere;
        }
        & picture {
          margin: 0 auto;
          width: 100%;
          max-width: 24rem;
        }
        & .lead-body {
          font-size: 0.9375rem;
          text-align: left;
        }
      }
    }
  }
}

/* feature */
.feature {
  padding: 5rem 2rem;
  background: var(--Color-Primary-50);
  overflow-x: hidden;
  & .inner {
    gap: 3.75rem;
    & .section-head {
      & .section-headline {
        display: flex;
        gap: .6rem;
        align-items: center;
        color: var(--Color-Primary-500);
        img {
          margin-top: .5rem;
          width: 10.75rem;
          height: 1.66138rem;
        }
      }
    }
    & .feature-list {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      align-content: flex-start;
      gap: 2rem 1.5625rem;
      align-self: stretch;
      flex-wrap: wrap;
      & .feature-list-item {
        padding: 1.5rem 2rem 2rem 2rem;
        position: relative;
        border-radius: 0.5rem;
        background: var(--Color-SolidGray-White);
        display: flex;
        width: 25.625rem;
        height: 20.375rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        &::before {
          content: "";
          width: 2rem;
          height: 0.1875rem;
          background: var(--Color-Primary-500);
          position: absolute;
          top: 0;
          left: calc(50% - 1rem);
          display: flex;
          justify-content: center;
        }
        & .feature-list-label {
          width: 100%;
          color: var(--Color-Primary-500);
          text-align: center;
          font-size: 1rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.5;
        }
        & .feature-list-ttl {
          width: 100%;
          color: var(--Color-SolidGray-700);
          text-align: center;
          font-size: 1.5rem;
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.3;
        }
        & .lead-body {
          color: var(--Color-SolidGray-500);
          font-size: 1rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.5;
        }
        & .lead-notes {
          & .notes-item {
            counter-increment: number;
            &::before {
              content: "※" counter(number);
            }
          }
        }
      }
    }
    & .feature-swiper {
      position: relative;
      &::before {
        position: absolute;
        left: -12rem;
        top: -14rem;
        z-index: 0;
        content: "";
        width: 15.5625rem;
        height: 22.0625rem;
        background-image: url(../images/bg-feature-01.svg);
        background-size: 15.5625rem 22.0625rem;
        background-position: center;
      }
      &::after {
        position: absolute;
        right: -12.875rem;
        top: -14.125rem;
        z-index: 0;
        content: "";
        width: 16.875rem;
        height: 26.25rem;
        background-image: url(../images/bg-feature-02.svg);
        background-size: 16.875rem 26.25rem;
        background-position: center;
      }
      & .feature-swiper-list {
        display: flex;
        justify-content: space-between;
        & .feature-swiper-item {
          position: relative;
          z-index: 10;
          width: 32.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          gap: 1.5rem;
          transform: scale(.75);
          transition: all .6s ease;
          &.swiper-slide-active {
            opacity: 1;
            transform: scale(1);
            z-index: 1;
          }
          & .feature-swiper-title {
            padding: 0.25rem 1.25rem 0.32rem;
            background-color: var(--Color-Primary-500);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 0.75rem;
            font-size: 1.125rem;
            font-weight: 700;
            font-variation-settings: "wght" 700;
            line-height: 1.4;
            border-radius: 0.25rem;
            color: var(--Color-SolidGray-White);
            &::before {
              content: attr(data-num);
              color: var(--Color-Secondary-400);
              font-family: Inter;
              font-size: 1.25rem;
              font-weight: 700;
              line-height: 1.4;
            }
            &::after {
              content: "";
              position: absolute;
              bottom: 0;
              left: 50%;
              border-style: solid;
              border-width: 8px 6px 0 6px;
              border-color: var(--Color-Primary-500) transparent transparent;
              translate: -50% 100%;
            }
          }
          & .feature-image {
            width: 100%;
            max-width: 32.5rem;
            max-height: 20.375rem;
            aspect-ratio: 32.5 / 20.375;
            & > img {
              width: 100%;
              border-radius: .5rem;
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            }
          }
        }
      }
      & .swiper-button-prev,
      & .swiper-button-next {
        display: flex;
        width: 3.25rem;
        height: 3.25rem;
        padding: 0 0.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 0.5rem;
        border: 1px solid var(--Color-Primary-500);
        background: var(--Color-SolidGray-White);
        transition: all .2s ease;
        & .swiper-navigation-icon {
          width: 1rem;
          height: 1rem;
          flex-shrink: 0;
          aspect-ratio: 1/1;
          & > path {
            fill: var(--Color-Primary-500);
          }
        }
        @media (769px <= width) {
          &:not(.swiper-button-disabled):hover {
            border: 1px solid var(--Color-Primary-500);
            background: var(--Color-Primary-100);
          }
        }
      }
      & .swiper-button-prev {
        left: 24%;
      }
      & .swiper-button-next {
        right: 24%;
      }
    }
    & .feature-pickup {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      & .pickup-text {
        padding: 3.75rem 3.25rem 5rem 0;
        position: relative;
        width: 56.25%;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        &::before {
          content: "";
          width: 5rem;
          height: 5rem;
          position: absolute;
          top: -2.5rem;
          z-index: 10;
          background-image: url(../images/ico-feature-pickup.svg);
          background-size: 5rem 5rem;
          background-repeat: no-repeat;
          background-position: center;
        }
        &::after {
          content: "";
          width: calc(80rem + 7.5rem);
          height: 100%;
          position: absolute;
          bottom: 0;
          left: -3.75rem;
          z-index: 0;
          background-color: var(--Color-Primary-500);
          border-radius: 0.5rem;
        }
        & .pickup-head {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          & .pickup-title {
            position: relative;
            z-index: 10;
            color: var(--Color-SolidGray-White);
            font-size: 2rem;
            font-weight: 700;
            font-variation-settings: "wght" 700;
            line-height: 1.4;
          }
          & .lead-body {
            position: relative;
            z-index: 10;
            color: var(--Color-SolidGray-100);
            font-size: 1rem;
            font-weight: 400;
            font-variation-settings: "wght" 400;
            line-height: 1.4;
          }
        }
        & .lead-bullet {
          & .bullet-item {
            display: flex;
            position: relative;
            z-index: 10;
            color: var(--Color-SolidGray-100);
            font-size: 1rem;
            line-height: 1.5;
            & .pickup-plan-ttl {
              font-weight: 400;
              font-variation-settings: "wght" 400;
              & .link {
                text-decoration: underline;
                transition: opacity 0.2s ease;
                @media (769px <= width) {
                  &:hover {
                    opacity: .8;
                  }
                }
              }
            }
            &::before {
              content: "・";
              flex-shrink: 0;
            }
          }
        }
      }
      & .pickup-image {
        margin-bottom: 5rem;
        position: relative;
        width: 43.75%;
        aspect-ratio: 129/85;
        & > img {
          width: 100%;
        }
      }
    }
    & .section-cta {
      display: flex;
      justify-content: center;
      & .button {
        width: 100%;
        max-width: 22.5rem;
      }
    }
  }
  @media (width < 768px) {
    padding: 2.5rem 1.25rem;
    & .inner {
      gap: 2.5rem;
      & .section-head {
        gap: 1.25rem;
        & .section-headline {
          font-size: 1.75rem;
        }
        & .section-lead {
          width: 100%;
          gap: 0.75rem;
          & .lead-body {
            text-align: left;
            br {
              display: none;
            }
          }
        }
      }
      & .feature-list {
        flex-direction: column;
        gap: 1rem;
        & .feature-list-item {
          padding: 1.5rem 1.25rem 2rem 1.25rem;
          width: 100%;
          height: auto;
          & .feature-list-ttl {
            font-size: 1.375rem;
            line-height: 1.3;
            word-break: keep-all;
            overflow-wrap: anywhere;
            br {
              display: none;
            }
          }
          & .lead-body {
            font-size: 0.9375rem;
          }
        }
      }
      & .feature-swiper {
        &::before {
          left: -4.9375rem;
          top: -1.01081rem;
          width: 5.5625rem;
          height: 7.88581rem;
          background-size: 5.5625rem 7.88581rem;
        }
        &::after {
          right: -2.75rem;
          bottom: -1.625rem;
          top: inherit;
          width: 5rem;
          height: 7.77775rem;
          background-size: 5rem 7.77775rem;
        }
        & .feature-swiper-list {
          flex-direction: column;
          gap: 1.5rem;
          & .feature-swiper-item {
            width: 100%;
            opacity: 1;
            transform: scale(1);
            gap: 1rem;
            &.swiper-loop-item {
              display: none;
            }
            & .feature-swiper-title {
              padding: 0.25rem 1rem 0.32rem;
              font-size: 1rem;
              gap: 0.75rem;
              &::before {
                font-size: 1.125rem;
              }
            }
            & .feature-image {
              width: 100%;
              max-width: 34.5rem;
              & > img {
                width: 100%;
              }
            }
          }
        }
        & .swiper-button-prev,
        & .swiper-button-next {
          display: none;
        }
      }
      & .feature-pickup {
        padding: 2.5rem 1.25rem 1.25rem 1.25rem;
        border-radius: 0.5rem;
        background-color: var(--Color-Primary-500);
        flex-direction: column;
        gap: 2rem;
        & .pickup-text {
          width: 100%;
          padding: 0;
          gap: 1.25rem;
          &::before {
            top: -4.2rem;
            left: 50%;
            transform: translateX(-50%);
            width: 3.5rem;
            height: 3.5rem;
            background-size: 3.5rem 3.5rem;
          }
          &::after {
            display: none;
          }
          & .pickup-head {
            & .pickup-title {
              font-size: 1.375rem;
            }
            & .lead-body {
              font-size: 0.9375rem;
            }
          }
          & .lead-bullet {
            & .bullet-item {
              font-size: 0.9375rem;
            }
          }
        }
        & .pickup-image {
          margin: 0;
          width: 100%;
        }
      }
    }
  }
}

/* pm */
.pm {
  padding: 5rem 2rem;
  & .inner {
    gap: 5rem;
    & .section-head {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      & .section-headline {
        width: 100%;
        color: var(--Color-Primary-500);
        font-size: 2.25rem;
        text-align: left;
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.4;
      }
      & .pm-contents {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & .pm-contents-body {
          width: 43.75%;
          display: flex;
          flex-direction: column;
          gap: 2rem;
          padding-right: 4rem;
          & .pm-contents-ttl {
            color: var(--Color-SolidGray-700);
            font-size: 2rem;
            font-weight: 700;
            font-variation-settings: "wght" 700;
            line-height: 1.4;
            text-align: left;
          }
          & .lead-body {
            color: var(--Color-SolidGray-500);
            font-size: 1rem;
            font-weight: 400;
            font-variation-settings: "wght" 400;
            line-height: 1.5;
            text-align: left;
          }
        }
        & .pm-contents-images {
          width: 47.8125%;
          border-radius: 0.75rem;
          outline: 1px solid #E6F5F7;
          background: var(--Color-Primary-100);
        }
      }
    }
    & .section-cta {
      display: flex;
      justify-content: center;
      & .button {
        width: 100%;
        max-width: 22.5rem;
      }
    }
  }
  @media (width < 1080px) {
    & .inner {
      & .section-head {
        & .pm-contents {
          & .pm-contents-body {
            padding: 0;
          }
        }
      }
    }
  }
  @media (width < 768px) {
    padding: 2.5rem 1.25rem;
    & .inner {
      gap: 2.5rem;
      & .section-head {
        gap: 2rem;
        & .section-headline {
          font-size: 1.625rem;

        }
        & .pm-contents {
          flex-direction: column;
          gap: 2rem;
          & .pm-contents-body {
            padding: 0;
            gap: 1.25rem;
            width: 100%;
            & .pm-contents-ttl {
              font-size: 1.5rem;
              word-break: keep-all;
              overflow-wrap: anywhere;
              br {
                display: none;
              }
            }
            & .lead-body {
              font-size: 0.9375rem;
            }
          }
          & .pm-contents-images {
            width: 100%;
          }
        }
      }
    }
  }
}

/* column */
.column {
  padding: 5rem 2rem;
  background: var(--Color-Primary-50);
  & .inner {
    gap: 2.5rem;
    & .section-head {
      width: 100%;
      & .section-headline {
        color: var(--Color-SolidGray-700);
        font-size: 1.875rem;
        text-align: center;
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.4;
      }
    }
    & .column-box {
      margin: 0 auto;
      width: 100%;
      max-width: 38.25rem;
      & > a {
        padding: 2.25rem 2.5rem 1.75rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1.25rem;
        flex-shrink: 0;
        border-radius: 0.5rem;
        background: var(--Color-SolidGray-White);
        border: 1px solid var(--Color-Primary-500);
        & .column-title {
          color: var(--Color-Primary-500);
          font-size: 1.5rem;
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
        }
        & .column-desc {
          color: var(--Color-SolidGray-500);
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          font-size: 1rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.4;
        }
        & > button {
          padding: 0.5rem 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0.25rem;
          cursor: pointer;
          transition: all .2s ease;
          &::after {
            content: "";
            display: block;
            width: 1.25rem;
            height: 1.25rem;
            background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8333 15.8333H4.16667V4.16667H10V2.5H4.16667C3.72464 2.5 3.30072 2.67559 2.98816 2.98816C2.67559 3.30072 2.5 3.72464 2.5 4.16667V15.8333C2.5 16.2754 2.67559 16.6993 2.98816 17.0118C3.30072 17.3244 3.72464 17.5 4.16667 17.5H15.8333C16.75 17.5 17.5 16.75 17.5 15.8333V10H15.8333V15.8333ZM11.6667 2.5V4.16667H14.6583L6.46667 12.3583L7.64167 13.5333L15.8333 5.34167V8.33333H17.5V2.5H11.6667Z" fill="%234BAFBD"/></svg>');
            background-size: 1.25rem 1.25rem;
            background-repeat: no-repeat;
            background-position: center;
          }
        }
        @media (769px <= width) {
          &:hover {
            & .column-title {
              text-decoration: underline;
            }
            & > button {
              background-color: var(--Color-Primary-500);
              &::after {
                content: "";
                display: block;
                width: 1.25rem;
                height: 1.25rem;
                background-image: url('data:image/svg+xml;charset=utf-8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8333 15.8333H4.16667V4.16667H10V2.5H4.16667C3.72464 2.5 3.30072 2.67559 2.98816 2.98816C2.67559 3.30072 2.5 3.72464 2.5 4.16667V15.8333C2.5 16.2754 2.67559 16.6993 2.98816 17.0118C3.30072 17.3244 3.72464 17.5 4.16667 17.5H15.8333C16.75 17.5 17.5 16.75 17.5 15.8333V10H15.8333V15.8333ZM11.6667 2.5V4.16667H14.6583L6.46667 12.3583L7.64167 13.5333L15.8333 5.34167V8.33333H17.5V2.5H11.6667Z" fill="%23FFFFFF"/></svg>');
              }
            }
          }
        }
      }
    }
  }
  @media (width < 768px) {
    padding: 2.5rem 1.25rem;
    & .inner {
      gap: 1.25rem;
      & .section-head {
        align-items: flex-start;
        & .section-headline {
          font-size: 1.5rem;
        }
      }
      & .column-box {
        max-width: none;
        & > a {
          padding: 1.5rem 1.25rem 1.25rem 1.25rem;
          gap: 1.2rem;
          & .column-title {
            width: 100%;
            font-size: 1.25rem;
            & span {
              padding: 0 0.2rem;
            }
          }
          & .column-desc {
            height: 4.0625rem;
            font-size: 0.9375rem;
          }
        }
      }
    }
  }
}

/* contact */
.contact {
  padding: 5rem 2rem;
  background: no-repeat center center / cover;
  background-image: image-set(
    url("../images/bg-contact.avif") type("image/avif"),
    url("../images/bg-contact.webp") type("image/webp"),
    url("../images/bg-contact.png") type("image/png")
  );
  & .inner {
    gap: 2.5rem;
    & .section-head {
      & .section-headline {
        color: var(--Color-SolidGray-White);
        text-align: center;
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.4;
      }
    }
    & > .section-cta {
      display: flex;
      justify-content: center;
      & .button {
        width: 100%;
        max-width: 22.5rem;
      }
    }
  }
  @media (width < 768px) {
    padding: 2.5rem 2rem;
    & .inner {
      gap: 1.25rem;
      & .section-head {
        & .section-headline {
          font-size: 1.375rem;
        }
      }
      & > .section-cta {
        & .button {
          width: 100%;
        }
      }
    }
  }
}