@charset "utf-8";

/* ============================================
   style.css
   STYLE FREE AIサイト(/ai/)PC用ページ固有スタイル
   ============================================ */
/* --------------------------------- Common --------------------------------- */
.cmn-py {
  padding-block: var(--sp-10);
}

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

  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: 64px;
    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);
  }
}

/* --------------------------------- Header --------------------------------- */
.header {
  position: fixed;
  height: var(--header-height);
  inset: 0 0 auto 0;
  background-color: var(--clr-white);
  z-index: var(--z-index-header);

  .header__wrapper-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
  }

  .header__logo {}

  .header__nav,
  .header__list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    gap: var(--sp-3);
  }

  .header__item {
    a {
      font-size: var(--fz-base);
      font-weight: var(--fw-bold);
      letter-spacing: 0.042em;
      color: var(--clr-text2);

      &:hover {
        opacity: 1;
        color: var(--clr-main);
      }
    }
  }

  .header__button {
    width: 195px;
    padding: var(--sp-2) 20px;
    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-small);
      font-weight: var(--fw-bold);
      letter-spacing: 0.04em;
      color: var(--clr-white);
    }
  }
}

/* ---------------------------------- Sec00 --------------------------------- */
.sec00 {
  .sec00__wrapper-xl {
    height: 599px;
    background: no-repeat center / cover url("../img/sec00_bg1.webp");
    position: relative;
    margin-bottom: 122px;
  }

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

  .sec00__box {}

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

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

    h2 {
      font-size: 56px;
      border-bottom: 1px solid #959fab;
      padding-bottom: var(--sp-1);
      margin-bottom: var(--sp-2);
    }

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

  .sec00__text {
    font-size: 51px;
    font-weight: var(--fw-light);
    letter-spacing: 34%;
    line-height: 1.1;
    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-4);

    h3 {
      font-size: 64px;
      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 130px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      margin-inline: auto;
      width: 236px;
      height: 245px;
      background: no-repeat center / contain url("../img/sec01_deco1.webp");
      z-index: -1;
    }

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

    p {
      font-size: 64px;
      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: -16px;
          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: row nowrap;
    gap: var(--sp-4);
  }

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

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

  .sec01__list2 {
    justify-content: space-between;
    padding: var(--sp-3);
    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);
    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: 28px;
      }
    }

    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 {
  background-color: var(--clr-bg);

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

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

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

    &:not(:last-child) {
      margin-bottom: var(--sp-10);
    }

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

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

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

  .sec02__item-img {}

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

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

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

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

      h4 {
        font-size: 40px;
        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-h4);
      }
    }

    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-h1);
    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: center;
    align-items: stretch;
    flex-flow: row nowrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
  }

  .sec02__card {
    width: 100%;
    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 {
    border-radius: var(--sp-2);
    padding: var(--sp-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row nowrap;
    gap: var(--sp-2);
    padding-left: 200px;
    background:
      no-repeat left var(--sp-2) bottom / 152px 114px url("../img/sec01_img7.webp"),
      var(--clr-white);
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 12px 0 #0357a11f;
  }

  .sec02__banner-box {
    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 {
    padding: 14px 28px;
    /* 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: 28px;

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

/* ---------------------------------- 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: 12px;
    height: 12px;
    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);
    padding: var(--sp-2);
    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-medium);
    }

    small {
      font-size: var(--fz-small);
      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-medium);
    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);
    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-3);
      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-3);
      font-size: var(--fz-base);
      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/sec05_bg1.webp");
  }

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

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

    h3 {
      font-size: 38px;
      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: row wrap;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-3);
  }

  .sec05__item {
    width: 206px;
    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-5);
  }

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

  .sec05__button {
    width: min(100%, 429px);
    padding: 20px;
    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-3);
    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/footer_bg1.webp");

  .footer__wrapper-l {
    padding: var(--sp-10) var(--sp-6) var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-flow: row wrap;
    gap: var(--sp-4);
  }

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

  .footer__logo {}

  .footer__table {
    border-collapse: separate;
    border-spacing: 0 var(--sp-1);

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

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

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

    a {
      display: inline-block;

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