:root {
  --accent-color: #1f5cfa;
  --base-color: #0f30df;
  --bg-color: #f8f9fc;
  --fs-xxs: 0.8125rem;
  --fs-xs: 0.875rem;
  --fs-s: 0.9375rem;
  --fs-base: 1rem;
  --fs-m: 1.125rem;
  --fs-2m: 1.25rem;
  --fs-l: 1.375rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 1.75rem;
  --fs-xxxl: 2rem;
  --fs-h: 2.75rem;

  --lp-bg-blue: #eff6ff;
  --lp-gray-100: #f9f9fc;
  --lp-gray-200: #e4e4e4;
  --lp-gray-300: #d7d7d7;
  --lp-gray-1000: #5c5c5c;
  --lp-gray-1300: #1d1d1d;
  --lp-red-500: #f03;
  --lp-pink-500: #FF6683;
  --lp-pink-700: #E7174E;
  --lp-orange-500: #f80;
  --lp-yellow-500: #ffe23c;
  --lp-green-100: #effaf3;
  --lp-green-500: #509d69;
  --lp-blue-100: #f2f7fc;
  --lp-blue-200: #dfe6ec;
  --lp-blue-500: #1e79fa;
  --lp-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.04);
  --font-en: 'Inter', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;

  --arrow: url('data:image/svg+xml;charset=utf-8,<svg viewbox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.64021 0.731804C9.21593 0.37824 8.58537 0.435564 8.2318 0.859841C7.87824 1.28412 7.93556 1.91468 8.35984 2.26825L12.238 5.50003L1 5.50002C0.447715 5.50002 0 5.94774 0 6.50002C0 7.05231 0.447715 7.50002 1 7.50002L12.238 7.50003L8.35984 10.7318C7.93556 11.0854 7.87824 11.7159 8.2318 12.1402C8.58537 12.5645 9.21593 12.6218 9.64021 12.2682L14.7183 8.03647C15.6779 7.23688 15.6778 5.76317 14.7183 4.96358L9.64021 0.731804Z" fill="%23ffffff"/></svg>');
}

html {
  scroll-behavior: smooth;
}
/* MAIN */
main {
  font-family: var(--font-jp);
  color: var(--lp-gray-1300);
  line-height: 1.6;
  @media (max-width: 767px) {
    font-size: var(--fs-s);
  }
}
a:hover {
  text-decoration: none;
}
/* レイアウト */
.inner {
  max-width: 1200px;
  margin: 0 auto;
  @media (max-width: 767px) {
    margin: 0 1.25rem;
  }
}
.inner--l2 {
  max-width: 1080px;
}
.section {
  padding: 120px min(3.333333%, 40px);
  /* Mobile */
  @media (max-width: 767px) {
    padding: 60px 0;
  }
}
/* HEADLINE */
.headline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 3.25rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.2;
  text-align: center;
  & > span:first-child {
    font-size: var(--fs-xl);
  }
  & strong {
    &.-primary {
      color: var(--lp-pink-500);
    }
    &.-secondary {
      color: var(--lp-orange-500);
    }
  }
}
.sub-headline {
  font-size: var(--fs-2m);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.4;
  color: var(--lp-gray-1300);
  /* Mobile */
  @media (max-width: 767px) {
    font-size: var(--fs-xxl);
    & > span:first-child {
      font-size: 1rem;
    }
  }
}
/* BUTTON */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--base-color);
  border-radius: 0.5rem;
  color: #fff;
  font-size: var(--fs-2m);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.2;
  transition: opacity 0.3s;
  &::after {
    content: "";
    display: block;
    width: 1rem;
    height: 0.8125rem;
    background-image: var(--arrow), var(--arrow);
    background-size: 1rem .8125rem;
    background-repeat: no-repeat, no-repeat;
    background-position: left -1rem center, center center;
  }
  &.-domain {
    background: var(--lp-pink-700);
  }
  &.-secondary {
    margin: 0 auto;
    padding: 20px 0;
    width: 100%;
    max-width: 360px;
    line-height: 1.2;
    background: #fff;
    border: solid 1px var(--accent-color);
    color: var(--accent-color);
    transition: background 0.3s;
    --arrow: url('data:image/svg+xml;charset=utf-8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.28223 3.1084C2.63759 3.1084 2.92578 3.39659 2.92578 3.75195C2.92574 4.10729 2.63757 4.39551 2.28223 4.39551H1.28711V14.3066H11.2051V13.3125C11.2051 12.9572 11.4934 12.6691 11.8486 12.6689C12.2039 12.669 12.4922 12.9572 12.4922 13.3125V14.9502C12.4922 15.3055 12.2039 15.5937 11.8486 15.5938H0.643555C0.288318 15.5936 3.68416e-05 15.3055 0 14.9502V3.75195C0 3.39666 0.288296 3.10852 0.643555 3.1084H2.28223ZM14.8477 0.00683594C15.4967 0.0726126 16.0029 0.620736 16.0029 1.28711V9.33984C16.0029 10.0062 15.4967 10.5543 14.8477 10.6201L14.7168 10.627H6.65723L6.52539 10.6201C5.87649 10.5542 5.37012 10.0061 5.37012 9.33984V1.28711C5.37015 0.620847 5.87652 0.0727629 6.52539 0.00683594L6.65723 0H14.7168L14.8477 0.00683594ZM6.65723 9.33984H14.7168V1.28711H6.65723V9.33984Z" fill="%230F30DF"/></svg>');
  }
  &.-cta {
    margin: 0 auto;
    padding: 20px 0;
    width: 360px;
    font-size: var(--fs-2m);
    line-height: 1.2;
  }
  /* PC */
  @media (min-width: 768px) {
    &:hover {
      opacity: 0.7;
    }
    &.-secondary:hover {
      opacity: 1;
      background: #f1f4fc;
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    font-size: var(--fs-base);
    &.-cta {
      width: 100%;
      height: 60px;
      font-size: var(--fs-base);
    }
  }
  /* Mobile-sm */
  @media (max-width: 576px) {
    gap: 0.25rem;
  }
}
/* ATTENTION-BOX */
.attention-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 30px 40px;
  width: 100%;
  background: var(--lp-gray-100);
  & .title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1.4;
    &::before {
      content: "";
      display: block;
      width: 24px;
      height: 24px;
      background: url(../images/icon-attention.svg) no-repeat center center;
      background-size: 100% 100%;
      flex-shrink: 0;
    }
  }
  & ul {
    & li {
      padding-left: 1rem;
      position: relative;
      font-size: var(--fs-xxs);
      line-height: 1.8;
      color: var(--lp-gray-1000);
      &::before {
        content: "";
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        background-color: var(--lp-gray-1000);
        position: absolute;
        top: 0.645rem;
        left: 0.25rem;
      }
      & a {
        color: var(--lp-gray-1000);
        text-decoration: underline;
      }
    }
  }
  .notes-image {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    gap: 4%;
    .contract__body {
      padding: 32px 6%;
      width: 64%;
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      &.-bg {
        background: var(--lp-gray-100);
      }
      .contract__body__ttl {
        color: var(--lp-red-500);
        font-size: 1.125rem;
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 160%;
      }
      .contract__body__txt {
        color: var(--lp-gray-1000);
        font-size: 0.8125rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.8;
      }
    }
    .contract__screen {
      width: 32%;
      position: relative;
      aspect-ratio: 320 / 186;
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    padding: 2rem 1.25rem;
    .notes-image {
      margin-top: 1rem;
      display: flex;
      flex-direction: column-reverse;
      gap: 0.2rem;
      .contract__body {
        margin-top: 1.25rem;
        padding: 0;
        width: 100%;
        background: none;
        &.-bg {
          background: none;
        }
        .contract__body__ttl {
          font-size: 1rem;
          line-height: 160%;
          br {
            display: none;
          }
        }
        .contract__body__txt {
          font-size: 0.8125rem;
          line-height: 180%;
        }
      }
      .contract__screen {
        width: 100%;
      }
    }
  }
}
/* NOTES-LIST */
.note-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style-type: none;
  & li {
    padding: 0 0 0 17px;
    color: var(--lp-gray-1000);
    font-size: var(--fs-xxs);
    line-height: 1.5;
    position: relative;
    & a {
      color: var(--lp-gray-1000);
      text-decoration: underline;
      &:hover {
        text-decoration: none;
        opacity: 0.75;
      }
    }
    &::before {
      content: "※";
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    & li {
      font-size: var(--fs-xxs);
    }
  }
}
/* HEADER */
.header {
  padding: 0.5rem min(3.333333%, 2.5rem);
  background: #fff;
  border-bottom: solid 1px var(--lp-gray-200);
  height: auto;
  position: sticky;
  top: 0;
  z-index: 999;
  & .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    & .header__logo {
      width: 21.66667%;
      line-height: 0;
      transition: opacity .3s;
      & img {
        aspect-ratio: 16.3/2.11;
        width: 100%;
        height: auto;
        display: block;
      }
      @media screen and (min-width: 767px) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
    & .nav {
      display: flex;
      align-items: center;
      gap: 2rem;
      & .nav__list {
        display: flex;
        align-items: center;
        list-style-type: none;
        gap: 24px;
        & li {
          & a {
            color: var(--lp-gray-1300);
            font-size: var(--fs-xs);
            font-weight: 600;
            font-variation-settings: "wght" 600;
            transition: opacity 0.3s;
            @media screen and (min-width: 767px) {
              &:hover {
                opacity: 0.7;
              }
            }
          }
        }
      }
      & .nav__button {
        display: flex;
        gap: 6px;
        & .button {
          font-size: var(--fs-s);
          padding: 0.75rem 1.25rem;
        }
      }
    }
  }
  @media (max-width: 1080px) {
    padding: 0.5rem 1.25rem;
    & .inner {
      & .header__logo {
        width: 240px;
      }
      & .nav {
        & .nav__list {
          display: none;
        }
      }
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    padding: 0.5rem 1rem;
    & .inner {
      margin: 0;
      gap: 0.5rem;
      & .header__logo {
        width: min(40%, 152px);
      }
      & .nav {
        & .nav__button {
          & .button {
            font-size: min(3.2vw, 0.75rem);
            padding: 8px 10px;
          }
          & .button--domain {
            display: none;
          }
        }
      }
    }
  }
}
/* TARGET-LABEL */
.announce {
  padding: 0.75rem 0;
  text-align: center;
  background: var(--lp-yellow-500);
  font-size: 1rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1;
  @media (max-width: 767px) {
    padding: 0.5rem 1.25rem ;
    font-size: var(--fs-xs);
  }
}
/* MAIN-VISUAL */
.hero {
  background: url(../images/bg_hero_pc.png) no-repeat center center;
  background-size: cover;
  padding: 58.5px min(3.333333%, 40px);
  & .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.333333%;
    & .hero__balloon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.5rem;
      flex-shrink: 0;
      width: 9.75rem;
      height: 9.75rem;
      background: var(--lp-red-500);
      border-radius: 50%;
      position: relative;
      & strong {
        color: #fff;
        text-align: center;
        font-size: min(1.851851vw, var(--fs-xxl));
        font-weight: 900;
        font-variation-settings: "wght" 900;
        line-height: 1.2;
        z-index: 1;
      }
      & p {
        color: #fff;
        font-size: min(1.851851vw, var(--fs-2m));
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.2;
        z-index: 1;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        right: -5%;
        bottom: 15%;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 1rem solid transparent;
        border-bottom: 1rem solid transparent;
        border-left: 2rem solid var(--lp-red-500);
        border-right: 0;
        transform: rotate(30deg);
      }
    }
    & .hero__headline {
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 0.75rem;
      color: #fff;
      & span {
        font-size: min(2.22222vw, var(--fs-xl));
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.2;
      }
      & strong {
        padding: 0 8px;
        font-size: min(5.25vw, 4rem);
        font-weight: 900;
        font-variation-settings: "wght" 900;
        line-height: 1.2;
        background: linear-gradient(transparent 60%, var(--lp-red-500) 40%);
      }
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    background-image: url(../images/bg_hero_sp.png);
    padding: 1.25rem 0 1.5rem;
    & .inner {
      flex-direction: column;
      gap: 1.25rem;
      position: relative;
      & .hero__balloon {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        height: auto;
        padding: 0.5rem 0.75rem 0.75rem;
        border-radius: 28px;
        gap: 0;
        & strong {
          font-size: min(3vw, var(--fs-l));
          font-weight: 700;
          font-variation-settings: "wght" 700;
        }
        & p {
          font-size: min(3vw, var(--fs-l));
        }
        &::after {
          right: inherit;
          left: 1rem;
          bottom: -0.5rem;
          border-top: 0.5rem solid transparent;
          border-bottom: 0.5rem solid transparent;
          border-left: 1.25rem solid var(--lp-red-500);
          transform: rotate(120deg);
        }
      }
      & .hero__headline {
        padding-top: 2rem;
        align-items: flex-start;
        gap: 4px;
        text-align: left;
        & span {
          font-size: min(4vw, var(--fs-xxl));
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
        }
        & strong {
          font-size: min(7.5vw, 3.5rem);
          font-feature-settings: "palt";
          padding: 0 3.5px 4px 1.5px;
          background: linear-gradient(transparent 50%, var(--lp-red-500) 50%);
          line-height: 1.4;
        }
      }
    }
  }
}
/* COLLABORATION */
.collaboration {
  padding: 1.75rem 0;
  background: #F9F9FC;
  & .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    & .logo {
      width: 20rem;
      max-height: 4.75rem;
      & img {
        aspect-ratio: 20 / 4.75;
        width: 100%;
        height: auto;
        display: block;
      }
    }
    & svg {
      width: 2rem;
      max-height: 2rem;
      aspect-ratio: 1;
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    padding: 0.75rem 0;
    & .inner {
      gap: 3%;
      & .logo {
        width: 44.5%;
      }
      & svg {
        width: 5%;
      }
    }
  }
}
/* PACKAGE-TTL */
.package-ttl {
  padding: 5rem min(3.333333%, 2.5rem) 0;
  & .inner {
    & .headline {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      padding: 3.25rem 2rem;
      border: 1px solid var(--lp-gray-200);
      border-radius: 1.25rem;
      & .headline__ttl {
        font-size: var(--fs-xxxl);
        & br {
          display: none;
        }
      }
      & .headline__explan {
        font-size: 1rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.6;
        color: var(--lp-gray-1000);
        text-align: center;
      }
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    padding: 2rem 0 2.5rem;
    & .inner {
      & .headline {
        padding: 2.5rem 1.5rem;
        gap: 2rem;
        & .headline__ttl {
          font-size: min(6.25vw, var(--fs-xxl));
          & br {
            display: block;
          }
        }
        & .headline__explan {
          text-align: left;
          font-size: var(--fs-s);
          & br.pc-only {
            display: none;
          }
        }
      }
    }
  }
}
/* PLAN */
.plan {
  padding-bottom: 0;
  & .inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    & .headline {
      font-size: var(--fs-h);
    }
    & .plan__wrap {
      display: flex;
      flex-direction: column;
      gap: 40px;
      & .plan__column {
        display: flex;
        flex-direction: column;
        gap: 28px;
        & .plan__list {
          list-style-type: none;
          display: flex;
          gap: 18px;
          & .plan__item {
            flex: 1;
            padding: 3rem 3.75rem 2.5rem;
            border: solid 1px var(--lp-gray-200);
            border-radius: 20px;
            position: relative;
            display: flex;
            gap: 3.75rem;
            justify-content: space-between;
            & .label {
              color: var(--lp-green-500);
              font-size: var(--fs-s);
              font-weight: 700;
              font-variation-settings: "wght" 700;
              padding: 7.5px 28px 9.5px;
              background: var(--lp-green-100);
              border-radius: 40px;
              position: absolute;
              top: -20px;
              left: 16%;
              white-space: nowrap;
            }
            .plan__item__head {
              width: 40%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              & .plan__title {
                margin: 0 0 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                font-size: var(--fs-xxxl);
                font-weight: 900;
                font-variation-settings: "wght" 900;
                line-height: 1.5;
                & span {
                  font-size: 0.75rem;
                  font-weight: 400;
                  font-variation-settings: "wght" 400;
                  padding: 1px 8px 2px;
                  background: var(--lp-gray-100);
                }
              }
              & .price {
                display: flex;
                align-items: flex-end;
                justify-content: center;
                flex-wrap: wrap;
                gap: 8px;
                margin: 0 0 12px;
                & dt {
                  font-size: 0.75rem;
                  padding: 1px 8px 2px;
                  background: var(--lp-gray-100);
                }
                & dd {
                  display: flex;
                  align-items: flex-end;
                  gap: 4px;
                  font-size: var(--fs-xs);
                  line-height: 1.5;
                  & strong {
                    font-family: 'Inter', sans-serif;
                    font-size: 2.5rem;
                    font-weight: 700;
                    font-variation-settings: "wght" 700;
                    line-height: 1;
                  }
                  & span {
                    font-feature-settings: "palt";
                    word-break: keep-all;
                  }
                }
              }
            }
            .plan__item__body {
              width: 60%;
              display: flex;
              flex-direction: column;
              gap: var(--fs-xxl);
              & .spec {
                display: flex;
                flex-wrap: wrap;
                gap: 4%;
                & dl {
                  padding: 0.375rem 0;
                  width: 48%;
                  display: flex;
                  align-items: center;
                  border-bottom: solid 1px var(--lp-blue-200);
                  & dt {
                    flex: 1;
                    font-size: var(--fs-xs);
                    line-height: 1;
                    & sup {
                      font-size: 0.625rem;
                      vertical-align: top;
                    }
                  }
                  & dd {
                    font-size: var(--fs-base);
                    line-height: 1.5;
                    & span {
                      font-size: 0.75rem;
                    }
                    & strong {
                      font-size: var(--fs-s);
                      font-weight: 700;
                      font-variation-settings: "wght" 700;
                    }
                    & svg {
                      margin-top: 0.25rem;
                    }
                  }
                }
              }
            }
            & .button {
              font-size: 1rem;
              padding: 15px 0 17px;
            }
          }
        }
      }
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    & .inner {
      & .headline {
        font-size: var(--fs-xxxl);
        & span {
          font-size: var(--fs-m);
        }
      }
      & .plan__wrap .plan__column .plan__list {
        flex-direction: column;
        gap: 40px;
        & .plan__item {
          padding: 3rem 1.5rem;
          flex-direction: column;
          gap: 1.75rem;
          & .label {
            left: 50%;
            transform: translateX(-50%);
          }
          & .plan__item__head {
            width: 100%;
            & .plan__title {
              font-size: var(--fs-xxl);
            }
          }
          & .plan__item__body {
            width: 100%;
            & .spec dl {
              & dt {
                font-size: var(--fs-xxs);
              }
              & dd {
                font-size: var(--fs-xs);
                & strong {
                 font-size: var(--fs-xs);
                }
              }
            }
          }
        }
      }
    }
  }
}
/* BIZ-SOLUTION */
.biz-solution {
  padding: 5rem min(3.333333%, 2.5rem) 0;
  & .inner {
    display: flex;
    flex-direction: column;
    gap: 3.75rem;
    & .headline {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      & .headline__ttl {
        & > small {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.25rem;
          color: var(--lp-gray-1300);
          text-align: center;
          font-size: var(--fs-2m);
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
          & strong {
            padding: 0 0.5rem 0.125rem;
            border-radius: 0.125rem;
            background-color: var(--lp-red-500);
            color: #fff;
          }
        }
        & > strong {
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
          font-size: 2.5rem;
          color: var(--lp-gray-1300);
          & picture {
            aspect-ratio: 32.2 / 2.5;
            width: 32.2rem;
            height: auto;
          }
          & small {
            font-size: var(--fs-xxl);
          }
          & br {
            display: none;
          }
        }
      }
      & .headline__explan {
        font-size: 1rem;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.6;
        color: var(--lp-gray-1000);
        text-align: center;
      }
    }
    & .biz-solution__table {
      display: flex;
      flex-direction: column;
      gap: var(--fs-xxl);
      .biz-solution__table__ttl {
        font-size: var(--fs-2m);
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.4;
      }
      & .biz-solution__table__body {
        border-collapse: collapse;
        border-spacing: 0;
        th {
          padding: 0.75rem 1.25rem;
          font-size: 0.9375rem;
          font-weight: 600;
          font-variation-settings: "wght" 600;
          line-height: 1.4;
          background-color: var(--lp-gray-100);;
          border: 1px solid var(--lp-gray-200);
          text-align: center;
          vertical-align: middle;
          &:nth-child(1) {width: 22%;}
          &:nth-child(2),
          &:nth-child(3) {width: 13%;}
          &:nth-child(4) {width: 52%;}
        }
        td {
          padding: 0.75rem 1.25rem;
          border: 1px solid var(--lp-gray-200);
          background-color: #fff;
          font-size: 0.9375rem;
          font-weight: 400;
          font-variation-settings: "wght" 400;
          line-height: 1.5;
          &:first-child {
            font-weight: 700;
            font-variation-settings: "wght" 700;
            text-align: center;
            vertical-align: middle;
          }
          &:nth-child(2),
          &:nth-child(3) {
            text-align: center;
            vertical-align: middle;
          }
          & .td_ul {
            & .ul_li {
              padding-left: 1rem;
              position: relative;
              &::before {
                content: "・";
                position: absolute;
                top: 0;
                left: 0;
              }
            }
          }
        }
      }
    }
  }
  /* Mobile */
  @media (max-width: 767px) {
    padding: 60px 0 0;
    & .inner {
      gap: 2.5rem;
      & .headline {
        width: 100%;
        font-size: var(--fs-xxxl);
        & .headline__ttl {
          display: flex;
          flex-direction: column;
          gap: 0.25rem;
          font-size: var(--fs-m);
          & > small {
            font-size: min(4.2vw,var(--fs-base));
            justify-content: flex-start;
            & > strong {
              padding: 0 0.25rem 0.125rem;
            }
          }
          & > strong {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-end;
            gap: 0.25rem;
            font-size: var(--fs-xxl);
            & picture {
              width: 18.6875rem;
              height: 4.23506rem;
              aspect-ratio: 18.7 / 4.24;
            }
            & small {
              font-size: var(--fs-2m);
            }
          }
        }
        & .headline__explan {
          text-align: left;
          font-size: var(--fs-s);
        }
      }
      & .biz-solution__table {
        gap: var(--fs-xl);
        & .biz-solution__table__body {
          th {
            padding: 0.5rem 0.75rem;
            font-size: 0.75rem;
            &:nth-child(1) {width: 18.2%;}
            &:nth-child(2),
            &:nth-child(3) {width: 14.9%;}
            &:nth-child(4) {width: 52%;}
          }
          td {
            padding: 0.5rem 0.75rem;
            font-size: var(--fs-xxs);
            &:first-child {
              text-align: left;
            }
            & .td_ul {
              & .ul_li {
                padding-left: var(--fs-xxs);
              }
            }
          }
        }
      }
    }
  }
}
/* DOMAIN */
.domain {
  & .inner {
    & .headline {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      align-items: center;
      & .headline__ttl {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: var(--fs-h);
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.4;
        & span {
          font-size: var(--fs-2m);
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
        }
      }
      & .headline__explan {
        padding: 0.625rem 1.25rem;
        background-color: #FFE5EA;
        font-size: var(--fs-s);
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 1.4;
        color: var(--lp-gray-1000);
        & strong {
          color: var(--lp-red-500);
          font-weight: 700;
          font-variation-settings: "wght" 700;
        }
        & br {
          display: none;
        }
      }
    }
    & .domain__column {
      display: flex;
      flex-direction: column;
      gap: 60px;
      margin-top: 80px;
      & .domain-flow {
        display: flex;
        flex-direction: column;
        gap: 28px;
        & .domain-flow__head {
          display: flex;
          flex-direction: column;
          gap: 12px;
          & p {
            color: var(--lp-gray-1000);
          }
        }
        & dl {
          display: flex;
          flex-direction: column;
          gap: 20px;
          padding: 20px 39px;
          border: solid 1px var(--lp-gray-200);
          & dt {
            font-size: var(--fs-m);
            font-weight: 700;
            font-variation-settings: "wght" 700;
            line-height: 1.6;
          }
          & dd {
            display: flex;
            flex-direction: column;
            gap: 20px;
            & .domain-flow__list {
              display: flex;
              flex-wrap: wrap;
              gap: 20px 4%;
              list-style-type: none;
              & li {
                display: flex;
                flex-direction: column;
                gap: 10px;
                width: 16%;
                min-width: 135px;
                padding-top: 1rem;
                text-align: center;
                &:not(:last-child) {
                  position: relative;
                  &::after {
                    content: "";
                    display: block;
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-top: 10px solid transparent;
                    border-bottom: 10px solid transparent;
                    border-left: 12px solid var(--lp-gray-300);
                    border-right: 0;
                    position: absolute;
                    top: 48px;
                    right: -17.5%;
                  }
                }
                & .domain-flow__box {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 84px;
                  background: #fff;
                  border: solid 4px var(--lp-gray-200);
                  font-size: var(--fs-s);
                  line-height: 1.4;
                  & sup {
                    font-size: 0.625rem;
                    vertical-align: top;
                  }
                }
                &.apply-page {
                  width: 20%;
                  min-width: 155px;
                  padding: 1rem;
                  background: var(--lp-green-100);
                  &::after {
                    right: -14%;
                  }
                }
                & p {
                  font-size: var(--fs-xs);
                  font-weight: 700;
                  font-variation-settings: "wght" 700;
                  line-height: 1.6;
                  color: var(--lp-green-500);
                }
              }
            }
          }
        }
      }
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    & .inner {
      & .headline {
        gap: 2rem;
        & .headline__ttl {
          font-size: var(--fs-xxl);
          & span {
            font-size: var(--fs-m);
          }
        }
        & .headline__explan {
          & br {
            display: block;
          }
        }
      }
      & .domain__column {
        margin-top: 60px;
        & .domain-flow {
          & .domain-flow__head .sub-headline {
            font-size: var(--fs-2m);
          }
          & dl {
            padding: 20px;
            & dt {
              font-size: var(--fs-base);
            }
            & dd .domain-flow__list {
              flex-direction: column;
              gap: 28px;
              & li {
                width: 100%;
                padding-top: 0;
                &:not(:last-child) {
                  position: relative;
                  &::after {
                    border-style: solid;
                    border-right: 10px solid transparent;
                    border-left: 10px solid transparent;
                    border-top: 12px solid var(--lp-gray-300);
                    border-bottom: 0;
                    top: initial;
                    left: 0;
                    right: 0;
                    bottom: -20px;
                    margin: 0 auto;
                  }
                }
                &.apply-page {
                  width: 100%;
                  padding: 1rem;
                }
                & .domain-flow__box {
                  height: auto;
                  padding: 12px 16px 14px;
                }
              }
            }
          }
        }
      }
    }
  }
}
/* 流用ブロック */
.domain__wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  & .domain__list {
    list-style-type: none;
    display: flex;
    & .domain__item {
      padding: 2.5rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      flex: 1;
      background-color: #fff;
      position: relative;
      text-align: center;
      &:first-child {
        border-radius: 1.25rem 0 0 1.25rem;
      }
      &:not(:last-child) {
        border-top: solid 1px var(--lp-gray-200);
        border-left: solid 1px var(--lp-gray-200);
        border-bottom: solid 1px var(--lp-gray-200);
      }
      &:last-child {
        border-radius: 0 1.25rem 1.25rem 0;
        border: solid 1px var(--lp-gray-200);
      }
      & .label {
        padding: 7.5px 28px 9.5px;
        color: var(--lp-green-500);
        font-size: var(--fs-s);
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.2;
        background: var(--lp-green-100);
        border-radius: 40px;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        & sup {
          font-size: 0.625rem;
          vertical-align: top;
        }
        & br {
          display: none;
        }
      }
      & > div {
        .domain__title {
          font-size: 2.25rem;
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.4;
          & sup {
            font-size: 1rem;
            vertical-align: bottom;
          }
        }
      }
      & p {
        margin-top: 16px;
        color: var(--lp-gray-1000);
        font-size: var(--fs-xs);
        line-height: 1.4;
      }
      & .button {
        width: 100%;
        height: 56px;
        font-size: var(--fs-s);
        border-radius: 0.5rem;
      }
    }
  }
  /* Tablet */
  @media screen and (max-width: 1080px) {
    & .domain__list {
      flex-wrap: wrap;
      & .domain__item {
        flex: 50%;
        &:first-child {
          border-radius: 1.25rem 0 0 0;
        }
        &:nth-child(-n + 3) {
          flex: 33%;
          border-top: solid 1px var(--lp-gray-200);
          border-left: solid 1px var(--lp-gray-200);
          border-bottom: solid 1px var(--lp-gray-200);
        }
        &:nth-child(3) {
          border: solid 1px var(--lp-gray-200);
          border-radius: 0 1.25rem 0 0;
        }
        &:nth-child(4) {
          border-top: inherit;
          border-left: solid 1px var(--lp-gray-200);
          border-bottom: solid 1px var(--lp-gray-200);
          border-radius: 0 0 0 1.25rem;
        }
        &:nth-child(5) {
          border-top: inherit;
          border-right: solid 1px var(--lp-gray-200);
          border-left: solid 1px var(--lp-gray-200);
          border-bottom: solid 1px var(--lp-gray-200);
          border-radius: 0 0 1.25rem 0;
        }
      }
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    & .domain__list {
      flex-direction: column;
      & .domain__item {
        padding: 2rem;
        flex: 100%;
        gap: 1.25rem;
        &:first-child {
          border-radius: 1.25rem 1.25rem 0 0;
        }
        &:not(:last-child) {
          border-top: solid 1px var(--lp-gray-200);
          border-left: solid 1px var(--lp-gray-200);
          border-right: solid 1px var(--lp-gray-200);
          border-bottom: inherit;
        }
        &:nth-child(4) {
          border-radius: inherit;
        }
        &:last-child {
          border-radius: 0 0 1.25rem 1.25rem;
          border: solid 1px var(--lp-gray-200);
        }
        & .label {
          padding: 1.25rem 0 0;
          width: 4.5rem;
          height: 4.5rem;
          font-size: var(--fs-xxs);
          border-radius: 50%;
          top: 0.75rem;
          left: 0.75rem;
          transform: inherit;
          white-space: wrap;
          & sup {
            font-size: 0.625rem;
            vertical-align: top;
          }
          & br {
            display: block;
          }
        }
        & > div {
          .domain__title {
            font-size: var(--fs-xxxl);
            font-weight: 700;
            font-variation-settings: "wght" 700;
            line-height: 1.4;
            & sup {
              font-size: 1rem;
              vertical-align: bottom;
            }
          }
        }
        & p {
          margin-top: 0.75rem;
        }
        & .button {
          height: 2.75rem;
        }
      }
    }
  }
}
/* SERVICE */
.service {
  background: top left / 120px 260px url(../images/feature_bg.svg);
  & .inner {
    & .headline {
      margin: 0 0 40px;
    }
    & .service-explan {
      font-size: var(--fs-base);
      line-height: 1.6;
      color: var(--lp-gray-1000);
      text-align: center;
    }
  }
  & .service-contents {
    margin-top: 60px;
    & .functions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      list-style-type: none;
      gap: 1.25rem;
      & .functions__item {
        padding: 2.5rem 1.25rem 3.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 32%;
        background: #fff;
        border: 1px solid var(--lp-gray-200);
        border-radius: 20px;
        & .functions__item__icon {
          margin: 0 auto;
          width: 100px;
          line-height: 0;
        }
        & .functions__item__ttl {
          font-size: var(--fs-2m);
          font-weight: 700;
          font-variation-settings: "wght" 700;
          text-align: center;
        }
        & .functions__item__txt {
          line-height: 1.6;
          color: var(--lp-gray-1000);
        }
      }
    }
  }
  /* Tablet */
  @media screen and (max-width: 1080px) {
    & .inner {
      & .service-contents .functions {
        gap: 1rem;
        & .functions__item {
          width: calc(50% - 1rem);
        }
      }
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    & .inner {
      & .headline {
        font-size: var(--fs-m);
        & strong {
          font-size: var(--fs-xxl);
          color: var(--lp-orange-500);
        }
      }
      & .service-explan {
        font-size: var(--fs-s);
        text-align: left;
        & br {
          display: none;
        }
      }
      & .service-contents {
        & .functions {
          & .functions__item {
            padding: 2rem 1.25rem;
          }
        }
      }
    }
  }
  /* Mobile-sm */
  @media screen and (max-width: 576px) {
    & .inner {
      & .service-contents {
        & .functions {
          gap: 0;
          & .functions__item {
            width: 100%;
            gap: 0.5rem;
            border-radius: 0;
            &:first-child {
              border-radius: 1.25rem 1.25rem 0 0;
            }
            &:not(:last-child) {
              border-top: solid 1px var(--lp-gray-200);
              border-left: solid 1px var(--lp-gray-200);
              border-right: solid 1px var(--lp-gray-200);
              border-bottom: inherit;
            }
            &:last-child {
              border: solid 1px var(--lp-gray-200);
              border-radius: 0 0 1.25rem 1.25rem;
            }
          }
        }
      }
    }
  }
}
/* FEATURE */
.feature {
  background-color: var(--lp-blue-100);
  padding-bottom: 0;
  & .inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    & .headline {
      & span {
        font-size: 3.25rem;
        &:first-child {
          font-size: var(--fs-xl);
        }
      }
      & strong {
        font-size: 4.5rem;
      }
    }
    & .trust {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 1.25rem;
      & .trust__item {
        padding: 2.5rem 1.25rem;
        width: 32%;
        background: #fff;
        border-radius: 1.25rem;
        & .trust__item__image {
          width: 100%;
          max-width: 16.25rem;
          line-height: 0;
          margin: 0 auto 32px;
        }
        & .trust__item__ttl {
          font-size: var(--fs-2m);
          font-weight: 700;
          font-variation-settings: "wght" 700;
          text-align: center;
          margin: 0 0 12px;
        }
        & .trust__item__txt {
          text-align: center;
          color: var(--lp-gray-1000);
          line-height: 1.6;
        }
      }
    }
    & .attention-box {
      background: #fff;
    }
  }
  /* Tablet */
  @media screen and (max-width: 1080px) {
    & .inner {
      & .trust {
        gap: 1rem;
        .trust__item {
          width: calc(50% - 1rem);
        }
      }
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    & .inner {
      gap: 40px;
      & .headline {
        line-height: 1.4;
        & span {
          font-size: min(6vw, var(--fs-xxl));
          &:first-child {
            font-size: min(4vw ,var(--fs-base));
          }
        }
        & strong {
          font-size: min(10vw, var(--fs-h));
        }
      }
      & .trust .trust__item {
        padding: 2rem 1.25rem;
        & .trust__item__txt br{
          display: none;
        }
      }
    }
  }
  /* Mobile-sm */
  @media screen and (max-width: 576px) {
    & .inner {
      & .trust {
        gap: 0;
        & .trust__item {
          width: 100%;
          border-radius: 0;
          &:first-child {
            border-radius: 1.25rem 1.25rem 0 0;
          }
          &:not(:last-child) {
            border-bottom: solid 1px var(--lp-gray-200);
          }
          &:last-child {
            border-radius: 0 0 1.25rem 1.25rem;
          }
        }
      }
    }
  }
}
/* REASON */
.reason {
  background-color: var(--lp-blue-100);
  & .inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
    & .headline {
      & strong {
        font-size: 4.5rem;
      }
    }
    & .reason__list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      list-style-type: none;
      & .reason__item {
        display: flex;
        align-items: center;
        gap: 60px;
        padding: 48px 7.4074074%;
        background: #fff;
        border-radius: 20px;
        counter-increment: number;
        position: relative;
        &::after {
          content: counter(number, decimal-leading-zero);
          font-family: 'Inter', sans-serif;
          font-size: 7.5rem;
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1;
          color: var(--lp-blue-100);
          position: absolute;
          right: 10px;
          bottom: 0;
        }
        & figure {
          flex-shrink: 0;
          width: 200px;
          line-height: 0;
        }
        & .reason__text {
          display: flex;
          flex-direction: column;
          gap: 12px;
          font-size: 1rem;
          line-height: 1.6;
          color: #5C5C5C;
          position: relative;
          z-index: 1;
        }
      }
    }
    & .domain__wrap {
      margin-top: 1.25rem;
    }
    & .attention-box {
      background: #fff;
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    & .inner {
      gap: 40px;
      & .headline {
        & span {
          font-size: var(--fs-xxl);
          &:first-child {
            font-size: var(--fs-base);
          }
        }
        & strong {
          font-size: 2.5rem;
        }
      }
      & .reason__list {
        & .reason__item {
          padding: 3rem 1.25rem;
          gap: 1.25rem;
          align-items: flex-start;
          &::after {
            font-size: 5rem;
            right: 0;
          }
          & figure {
            width: 60px;
          }
          & .reason__text {
            & .sub-headline {
              font-size: var(--fs-2m);
            }
            & p {
              font-size: var(--fs-s);
            }
          }
        }
      }
    }
  }
  /* Mobile-sm */
  @media screen and (max-width: 576px) {
    & .inner {
      & .reason__list {
        gap: 0;
        & .reason__item {
          width: 100%;
          border-radius: 0;
          &:first-child {
            border-radius: 1.25rem 1.25rem 0 0;
          }
          &:not(:last-child) {
            border-bottom: solid 1px var(--lp-gray-200);
          }
          &:last-child {
            border-radius: 0 0 1.25rem 1.25rem;
          }
        }
      }
    }
  }
}
/* Ticker */
.ticker {
  display: flex;
  flex-direction: column;
  gap: 80px;
  position: relative;
  padding-bottom: 50px;
  padding-left: 0;
  padding-right: 0;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 72.324723247%;
    background: linear-gradient(45deg, rgba(255, 85, 119, 1) 0%, rgba(255, 85, 119, 1) 50%, rgba(255, 110, 65, 1) 100%);
    position: absolute;
    top: 0;
    left: 0;
  }
  & .headline {
    color: #fff;
    position: relative;
  }
  & .ticker__slider {
    width: 100%;
    line-height: 0;
    & .swiper-wrapper {
      transition-timing-function: linear;
    }
    & .swiper-slide {
      border-radius: 5px;
      overflow: hidden;
      & img {
        width: 100%;
      }
    }
  }
  /* Mobile ~ PC */
  @media screen and (min-width: 768px) {
    & .headline {
      font-size: min(4.8148148vw, 3.25rem);
    }
  }
  /* Mobile */
  @media screen and (max-width: 767px) {
    gap: 40px;
    padding-bottom: 30px;
    &::before {
      height: 332px;
    }
    & .headline {
      line-height: 1.4;
      & > span {
        font-size: var(--fs-xxl);
        &:first-child {
          font-size: var(--fs-base);
          line-height: 1.4;
        }
      }
    }
  }
}
/* CTA */
.cta {
  padding-top: 50px;
  & .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    & .cta__button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      & p {
        font-size: var(--fs-2m);
        font-weight: 700;
        font-variation-settings: "wght" 700;
        line-height: 1.5;
        &::before {
          content: "＼";
        }
        &::after {
          content: "／";
        }
        & .-color {
          color: var(--lp-red-500);
        }
      }
    }
    & .domain__wrap {
      margin-top: 20px;
    }
  }
  @media screen and (max-width: 767px) {
    padding-top: 30px;
    & .inner {
      gap: 40px;
      & .headline {
        font-size: var(--fs-xxl);
        & span {
          font-size: var(--fs-base);
        }
      }
      & .cta__button {
        align-items: center;
        gap: 20px;
        width: 100%;
        & p {
          font-size: var(--fs-base);
          font-weight: 700;
          font-variation-settings: "wght" 700;
          line-height: 1.5;
          text-align: center;
          position: relative;
          &::before,
          &::after {
            position: absolute;
            bottom: 0;
          }
          &::before {
            left: -1em;
          }
          &::after {
            right: -1em;
          }
        }
      }
    }
  }
}

/* /SUPPORT */
.support {
  padding: 80px 40px;
  position: relative;
  background: top left / auto 100% no-repeat url(../images/support-l-bg.png), top right / auto 100% no-repeat url(../images/support-r-bg.png);
  & .support__wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 545px;
    & .support-hd {
      position: relative;
      width: 100%;
      max-width: 500px;
      line-height: 0;
    }
    & .support-explan {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--lp-gray-1000);
      text-align: center;
    }
    & .support-link {
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      & .button {
        padding: 1.25rem 0;
        font-size: var(--fs-m);
        line-height: 1.5;
      }
    }
  }
  @media screen and (max-width: 767px) {
    padding: 60px 20px;
    background: none;
    border-top: solid 12px var(--lp-pink-500);
    border-bottom: solid 12px var(--lp-pink-500);
    & .support__wrap {
      & .support-hd {
        width: 340px;
        margin: 0 auto;
      }
      & .support-explan {
        text-align: left;
        font-size: var(--fs-s);
      }
      & .support-link {
        & .button {
          padding: 1rem 0;
          font-size: var(--fs-base);
        }
      }
    }
  }
}

/* FOOTER */
.footer {
  padding: 37px 30px;
  background: var(--lp-gray-1000);
  & .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & .footer__logo {
      line-height: 0;
      width: 260px;
    }
    & .footer__copy {
      font-size: var(--fs-xxs);
      line-height: 1.2;
      color: #fff;
    }
  }
}
@media screen and (max-width: 767px) {
  .footer {
    padding: 40px 0 38px;
  }
  .footer__column {
    flex-direction: column;
    gap: 20px;
  }
}