@charset "utf-8";

/* ============================================
   style_sp.css
   STYLE FREE AIサイト(/ai/)スマホ用ページ固有スタイル
   ============================================ */
/* --------------------------------- Header --------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-height);
  background-color: var(--clr-white);
  z-index: var(--z-index-header);

  .header__wrapper-l {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: var(--sp-2) 0;
  }

  .header__logo img {
    width: calc((117 / 390) * 100vw);
    height: auto;
    margin-inline: 0 auto;
  }

  .header__button {
    width: calc((114 / 390) * 100vw);
    height: calc((48 / 390) * 100vw);
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(var(--clr-gradient));
    border-radius: var(--sp-05);

    &:hover {
      /* background-color: var(--clr-accent2); */
    }

    span {
      font-size: var(--fz-tiny);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      color: var(--clr-white);
    }
  }
}

/* --------------------------------- Common --------------------------------- */
.sp-px {
  padding-inline: var(--sp-2);
}

.cmn-py {
  padding-block: var(--sp-5);
}

.cmn-header {
  margin-bottom: var(--sp-5);

  p,
  small,
  h3 {
    font-weight: var(--fw-bold);
  }

  small {
    font-size: var(--fz-tiny);
    color: var(--clr-main);
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  h3 {
    font-size: var(--fz-h1);
    line-height: 1.2;
    /* color: #0d1117; */
    color: var(--clr-main3);

    span {
      /* color: var(--clr-main); */
    }

    &:has(+ p) {
      margin-bottom: var(--sp-1);
    }
  }

  p {
    font-size: var(--fz-medium);
  }
}

/* ---------------------------------- Sec00 --------------------------------- */
.sec00 {
  .sec00__wrapper-xl {
    /* height: 599px; */
    background: no-repeat center top / contain url("../img/sp/sec00_bg1.webp");
    position: relative;
    padding-top: calc((248 / 390) * 100vw);
    /* margin-bottom: 122px; */
  }

  .sec00__content {
    width: min(100%, 1151px);
    margin-inline: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: column nowrap;
    /* gap: var(--sp-1); */
    /* position: absolute;
    inset: auto 0 0 0;
    transform: translateY(40%); */
  }

  .sec00__box {
    margin-bottom: var(--sp-2);
  }

  .sec00__header {
    /* margin-bottom: var(--sp-3); */

    h2,
    p {
      font-weight: var(--fw-bold);
      color: var(--clr-white);
    }

    h2 {
      font-size: calc((54 / 390) * 100vw);
      border-bottom: 1px solid #959fab;
      padding-bottom: var(--sp-2);
      margin-bottom: var(--sp-2);
      line-height: 1.2;
    }

    p {
      font-size: var(--fz-medium);
      letter-spacing: 0.01em;
    }
  }

  .sec00__text {
    font-size: calc((32 / 390) * 100vw);
    font-weight: var(--fw-light);
    letter-spacing: 30%;
    line-height: 142%;
    background-image: linear-gradient(-105deg,
        #ffc2c3,
        #d17bc5 42%,
        #9c67bb 74%,
        #4a48ab);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
  }
}

/* ---------------------------------- Sec01 --------------------------------- */
.sec01 {
  .sec01__header {
    margin-bottom: var(--sp-3);

    h3 {
      font-size: var(--fz-h1);
      font-weight: var(--fw-bold);
      color: var(--clr-main3);
      line-height: 1.2;
      text-align: center;
    }
  }

  .sec01__box {
    /* position: absolute; */
    /* inset: auto 0 var(--sp-8) 0; */
    padding: var(--sp-1) 0 calc((100 / 390) * 100vw);
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      margin-inline: auto;
      width: calc((174 / 390) * 100vw);
      height: calc((306 / 390) * 100vw);
      background: no-repeat center / contain url("../img/sp/sec01_deco1.webp");
      z-index: -1;
    }

    p,
    small {
      display: block;
      font-weight: var(--fw-bold);
      text-align: center;
    }

    p {
      font-size: var(--fz-h1);
      line-height: 1.2;
      color: var(--clr-main3);
      margin-bottom: var(--sp-1);

      span {
        position: relative;
        background-image: linear-gradient(-105deg,
            #ffc2c3,
            #d17bc5 25%,
            #9c67bb 66%,
            #4a48ab);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        display: inline-block;

        &::before {
          content: "";
          position: absolute;
          bottom: -4vw;
          width: 100%;
          height: var(--sp-2);
          background-color: #ffdcc2;
          transform: translateY(-100%);
          z-index: -1;
        }
      }
    }
    

    small {
      font-size: var(--fz-medium);
      color: var(--clr-text2);
    }
  }

  .sec01__list,
  .sec01__list2 {
    display: flex;
    align-items: stretch;
    flex-flow: column nowrap;
    gap: var(--sp-4);
  }

  .sec01__item,
  .sec01__item2 {
    /* width: min(100%, 384px); */
    width: 100%;
  }

  .sec01__list {
    position: relative;
    background-color: #f2f4f9;
    padding: var(--sp-2);
    border-radius: var(--sp-2);
    justify-content: center;
  }

  .sec01__list2 {
    justify-content: space-between;
    padding: var(--sp-2);
    border-radius: var(--sp-2);
    border: 1px solid var(--clr-black);
  }

  .sec01__item {
    /* background-color: #f2f4f9; */
    /* padding: 27px 21px; */
    /* border-radius: var(--sp-2); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: var(--sp-1);
    /* position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      margin-inline: auto;
      width: 120px;
      height: 247px;
      background: no-repeat center / contain url("../img/sec01_deco1.webp");
      transform: translateY(calc(100% - 27px));
      z-index: -1;
    } */

    p {
      margin: auto;
      font-size: var(--fz-medium);
      font-weight: var(--fw-bold);
      color: var(--clr-text2);
      text-align: center;

      span {
        background: linear-gradient(to bottom,
            transparent 10%,
            #ffdcc2 10%,
            #ffdcc2 90%,
            transparent 90%);
      }
    }
  }

  .sec01__item2 {
    /* width: min(100%, 336px); */
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: start;
    flex-flow: column nowrap;

    /* p {
      display: block;
      width: fit-content;
      margin: 0 auto var(--sp-1);
      font-size: 30px;
      font-weight: var(--fw-bold);
      text-align: center;
      color: var(--clr-main3);
      background: linear-gradient(
        to bottom,
        transparent 60%,
        #ffdcc2 60%,
        #ffdcc2 90%,
        transparent 90%
      );
    } */

    header {
      margin-bottom: var(--sp-1);

      small,
      h4 {
        font-weight: var(--fw-bold);
      }

      small {
        font-size: var(--fz-tiny);
        color: var(--clr-main3);
      }

      h4 {
        font-size: calc((26 / 390) * 100vw);
      }
    }

    img {
      margin-bottom: var(--sp-2);
    }

    a {
      width: 100%;
      border: 1px solid var(--clr-white);
      border-radius: var(--sp-1);
      padding: var(--sp-2);
      background: var(--clr-main3);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        inset: 0 var(--sp-2) 0 auto;
        margin-block: auto;
        width: 20px;
        height: 20px;
        background: no-repeat center / contain url("../img/sec01_deco2.webp");
      }

      span {
        font-size: var(--fz-medium);
        font-weight: var(--fw-bold);
        color: var(--clr-white);
        line-height: 1.3;
      }
    }
  }
}

/* ---------------------------------- Sec02 --------------------------------- */
.sec02 {
  padding-block: var(--sp-10);
  background-color: var(--clr-bg);

  .cmn-header {
    /* margin-bottom: var(--sp-5); */
    margin-bottom: 0;
  }

  .sec02__list {
    margin-bottom: var(--sp-5);
  }

  .sec02__item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: var(--sp-3);

    &:not(:last-child) {
      /* margin-bottom: var(--sp-8); */
    }

    &:not(:first-child) {
      padding-top: var(--sp-5);
    }

    &:nth-child(even) {
      flex-flow: row-reverse nowrap;
    }
  }

  .sec02__item--des1 {
    padding-top: var(--sp-5);
  }

  .sec02__item-img {
    margin-bottom: var(--sp-3);
  }

  .sec02__item-box {
    /* width: min(100%, 616px); */
    width: 100%;
    flex-shrink: 0;

    header {
      margin-bottom: var(--sp-3);

      small,
      h4 {
        font-weight: var(--fw-bold);
      }

      small {
        font-size: var(--fz-tiny);
        color: var(--clr-main);
        line-height: 1;
      }

      h4 {
        font-size: var(--fz-h2);
        color: var(--clr-black);
        line-height: 1.3;
      }
    }

    &>p {
      font-size: var(--fz-base);
      font-weight: var(--fw-bold);
      line-height: 1.7;
      /* margin-bottom: var(--sp-8); */
      margin-bottom: var(--sp-2);

      &:last-child {
        margin-top: var(--sp-2);
        font-size: var(--fz-large);
      }
    }

    small {
      font-size: var(--fz-base);
      font-weight: var(--fw-regular);
      line-height: 1.7;
    }
  }

  .sec02__note {
    font-size: var(--fz-base);
    font-weight: var(--fw-bold);
    text-align: center;
    margin-bottom: var(--sp-2);
  }

  .sec02__text {
    font-size: var(--fz-h6);
    font-weight: var(--fw-bold);
    line-height: 1.7;
    color: var(--clr-main3);
    text-align: center;
    margin-bottom: var(--sp-5);
  }

  /* .sec02__item-dtl {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row wrap;
    gap: var(--sp-4);

    li {
      p {
        line-height: 1;
      }

      p:nth-child(1) {
        font-size: var(--fz-base);
        font-weight: var(--fw-regular);
        color: var(--clr-text2);
      }

      p:nth-child(2) {
        font-size: var(--fz-h2);
        font-weight: var(--fw-bold);
        color: var(--clr-main);
      }
    }
  } */

  .sec02__cards {
    display: flex;
    justify-content: start;
    align-items: stretch;
    flex-flow: row nowrap;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
    overflow-x: auto;
  }

  .sec02__card {
    width: calc((300 / 390) * 100vw);
    flex-shrink: 0;
    border: 1px solid var(--clr-border2);
    border-radius: var(--sp-1);
    background-color: var(--clr-white);
    padding: var(--sp-2) var(--sp-2) var(--sp-3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;

    header {
      margin-bottom: var(--sp-1);

      h5 {
        font-size: var(--fz-large);
        font-weight: var(--fw-bold);
        color: #b55555;
        line-height: 1.7;
      }

      small {
        font-size: var(--fz-base);
        font-weight: var(--fw-regular);
        color: var(--clr-text);
      }
    }

    img {
      margin: 0 auto;
    }

    table {
      width: 100%;
      margin-bottom: var(--sp-3);

      tr {
        border-bottom: 1px solid #dcdfe7;

        &:first-child {
          border-top: 1px solid #dcdfe7;
        }
      }

      th,
      td {
        font-size: var(--fz-base);
        line-height: 1.2;
        padding-block: var(--sp-1);
        vertical-align: middle;
      }

      th {
        font-weight: var(--fw-regular);
      }

      td {
        font-weight: var(--fw-bold);
        padding-left: var(--sp-2);

        small {
          font-size: var(--fz-small);
          font-weight: var(--fw-regular);
        }
      }
    }

    p {
      margin: auto 0 0 auto;
      font-size: var(--fz-base);
      font-weight: var(--fw-regular);
      line-height: 1;

      em {
        font-size: var(--fz-h2);
        font-weight: var(--fw-bold);
        font-style: normal;
      }

      span {
        font-size: var(--fz-large);
      }
    }
  }

  .sec02__banner {
    padding: var(--sp-3);
    border-radius: var(--sp-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    /* gap: var(--sp-2); */
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px 0 #0357a11f;
  }

  .sec02__banner-box {
    p {
      text-align: center;
      margin-bottom: var(--sp-2);
    }

    p:nth-child(1) {
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
    }

    p:nth-child(2) {
      font-size: var(--fz-base);
      font-weight: var(--fw-regular);
      color: var(--clr-text3);
    }
  }

  .sec02__banner-button {
    width: 100%;
    padding: var(--sp-2);
    /* background-color: var(--clr-accent); */
    background: linear-gradient(var(--clr-gradient));
    border-radius: var(--sp-05);
    box-shadow:
      0 4px 6px -1px #0000001a,
      0 2px 4px -2px #0000001a;

    span {
      position: relative;
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      color: var(--clr-white);
      display: flex;
      justify-content: center;
      align-items: center;
      padding-right: calc((28 / 390) * 100vw);

      &::before {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        margin-block: auto;
        background: no-repeat center / contain url("../img/cmn_deco1.webp");
        width: calc((20 / 390) * 100vw);
        height: calc((20 / 390) * 100vw);
      }
    }
  }
}

/* ---------------------------------- Sec03 --------------------------------- */
.sec03 {
  .sec03__slider {
    overflow: hidden;
  }

  .sec03__list {
    display: flex;
    justify-content: start;
    align-items: stretch;
    flex-flow: row nowrap;
    gap: var(--sp-2);
    will-change: transform;
    margin-bottom: var(--sp-3);
  }

  .sec03__dots {
    display: flex;
    width: min(100%, 389px);
    justify-content: center;
    align-items: center;
    gap: var(--sp-1);
    margin-inline: auto;
  }

  .sec03__dot {
    width: calc((12 / 390) * 100vw);
    height: calc((12 / 390) * 100vw);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #d1d5db;
    cursor: pointer;
    transition: var(--transition);
  }

  .sec03__dot--active {
    background-color: var(--clr-main);
  }

  .sec03__item {
    flex-shrink: 0;
    /* width: min(100%, 389px); */
    width: calc((338 / 390) * 100vw);
    padding: var(--sp-4);
    border-radius: var(--sp-1);
    border: 1px solid #dddddd;
  }

  .sec03__item-img,
  .sec03__item-text1,
  .sec03__item-text2 {
    margin-bottom: var(--sp-3);
  }

  .sec03__item-img {
    border-bottom: 1px solid #dddddd;

    img {
      margin-inline: auto;
    }
  }

  .sec03__item-header {
    margin-bottom: var(--sp-2);

    p,
    h4 {
      font-weight: var(--fw-bold);
    }

    p {
      width: fit-content;
      font-size: var(--fz-base);
      color: var(--clr-main);
      text-align: center;
      padding: var(--sp-05) var(--sp-1);
      line-height: 1;
      background-color: var(--clr-sub);
      margin-bottom: var(--sp-2);
      border-radius: var(--sp-05);
    }

    h4 {
      font-size: var(--fz-h4);
    }

    small {
      font-size: var(--fz-base);
      font-weight: var(--fw-regular);
      margin-bottom: var(--sp-2);
      display: block;
    }
  }

  .sec03__item-text1 {
    font-size: var(--fz-base);
    font-weight: var(--fw-bold);
  }

  .sec03__item-text2 {
    position: relative;
    font-size: var(--fz-h6);
    font-weight: var(--fw-bold);
    color: var(--clr-main);
    letter-spacing: 0.41px;
    padding-left: var(--sp-3);
    line-height: 1.2;

    &::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: var(--sp-3);
      height: var(--sp-3);
      background: no-repeat center / contain url("../img/sec03_deco1.webp");
    }
  }

  .sec03__tags {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row wrap;
    gap: var(--sp-05);

    &:has(+ .sec03__item-button) {
      margin-bottom: var(--sp-3);
    }

    li {
      padding: var(--sp-05) var(--sp-1);
      border-radius: var(--sp-05);
      border: 1px solid #e5e7eb;
      font-size: var(--fz-tiny);
      font-weight: var(--fw-regular);
      text-align: center;
      color: #6b7280;
    }
  }

  .sec03__item-button {
    width: fit-content;
    margin-inline: auto 0;
    position: relative;
    padding-right: var(--sp-3);

    &::after {
      content: "";
      position: absolute;
      inset: 0 0 0 auto;
      margin-block: auto;
      width: var(--sp-3);
      height: var(--sp-3);
      background: no-repeat center / contain url("../img/sec03_deco2.webp");
    }

    span {
      font-size: var(--fz-base);
      font-weight: var(--fw-regular);
      color: #0048bc;
    }
  }
}

/* ---------------------------------- Sec04 --------------------------------- */
.sec04 {
  background-color: var(--clr-bg);

  .cmn-header {
    text-align: center;

    small {
      letter-spacing: 2.8px;
    }
  }

  .sec04__list {
    /* width: min(100%, 816px); */
    width: 100%;
    margin-inline: auto;
  }

  .sec04__item {
    border-bottom: 1px solid #e5e7eb;

    &:first-child {
      border-top: 1px solid #e5e7eb;
    }

    &[open] summary span::before {
      content: "−";
    }

    &:hover {
      cursor: pointer;
    }

    summary,
    p {
      display: flex;
      justify-content: start;
      align-items: start;
      flex-flow: row nowrap;
      gap: var(--sp-2);

      &::before {
        font-size: var(--fz-base);
        font-weight: var(--fw-bold);
        display: block;
        position: relative;
        color: var(--clr-main);
      }
    }

    summary {
      padding-block: var(--sp-2);
      font-size: var(--fz-base);
      font-weight: var(--fw-bold);

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

    span {
      margin-inline: auto 0;
      font-family: var(--ff-inter);
      color: var(--clr-main);

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

    p {
      width: min(100%, 742px);
      margin-bottom: var(--sp-2);
      font-size: var(--fz-small);
      font-weight: var(--fw-regular);

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

/* ---------------------------------- Sec05 --------------------------------- */
.sec05 {
  position: relative;
  background: linear-gradient(to right, #f2f9ff 40%, #76ccef);
  /* height: 600px; */

  .sec05__wrapper-xl {
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    background: no-repeat center / cover url("../img/sp/sec05_bg1.webp");
    padding-block: calc((55 / 390) * 100vw);
  }

  .sec05__content {
    /* width: min(100%, 633px); */
    width: 100%;
    background-color: #ffffffe6;
    border-radius: var(--sp-3);
    padding: var(--sp-4) var(--sp-2);
    position: relative;
    z-index: 2;
    /* margin-right: var(--sp-3); */
  }

  .sec05__header {
    margin-bottom: var(--sp-3);

    h3 {
      font-size: calc((35 / 390) * 100vw);
      font-weight: var(--fw-bold);
      text-align: center;
      color: #102a60;
      line-height: 1.3;
    }
  }

  .sec05__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-3);
  }

  .sec05__item {
    width: calc(100% - var(--sp-6));
    padding-bottom: var(--sp-1);
    border-bottom: 1px solid #8f8f8f;
    font-size: var(--fz-large);
    font-weight: var(--fw-bold);
  }

  .sec05__text1 {
    font-size: var(--fz-large);
    font-weight: var(--fw-bold);
    text-align: center;
    margin-bottom: var(--sp-3);
  }

  .sec05__text2 {
    font-size: var(--fz-base);
    font-weight: var(--fw-regular);
    text-align: center;
  }

  .sec05__button {
    width: min(100%, 429px);
    padding: calc((20 / 390) * 100vw);
    border-radius: var(--sp-2);
    /* border: 2px solid #e2e8f0; */
    /* background-color: var(--clr-white); */
    background: linear-gradient(var(--clr-gradient));
    margin: 0 auto var(--sp-2);
    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: row nowrap;
    gap: var(--sp-2);
    position: relative;

    &::after {
      content: "";
      position: relative;
      display: block;
      width: var(--sp-3);
      height: var(--sp-3);
      background: no-repeat center / contain url("../img/cmn_deco2.webp");
      margin-inline: auto 0;
    }

    &:hover {
      background-color: var(--clr-main2);
    }

    span {
      font-size: var(--fz-large);
      font-weight: var(--fw-bold);
      color: var(--clr-white);
    }
  }
}

/* --------------------------------- Footer --------------------------------- */
.footer {
  background: no-repeat center / cover url("../img/sp/footer_bg1.webp");

  .footer__wrapper-l {
    padding: var(--sp-5) var(--sp-2);
    /* display: flex;
    justify-content: center;
    align-items: stretch;
    flex-flow: row wrap;
    gap: var(--sp-4); */
  }

  .footer__lbox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    gap: var(--sp-5);
  }

  .footer__logo {
    width: fit-content;
  }

  .footer__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 var(--sp-2);

    th,
    td {
      font-size: var(--fz-small);
    }

    th {
      width: 29%;
    }

    td {
      padding-left: var(--sp-4);
    }
  }

  .footer__table--des2 {
    /* border-spacing: var(--sp-5) var(--sp-3); */
  }

  .footer__copyright {
    font-size: var(--fz-tiny);
    font-weight: var(--fw-regular);

    a {
      display: inline-block;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}