@import url(lower.css);

main {
  --h2-sz: max(3.4vw, 2em);
  background: linear-gradient(to right, var(--primary-c) 22%, var(--bg-c) 22%);
  padding-bottom: max(8vw, 60px);
}
.breadcrumbs {
  color: #fff;
  a:not([href=""]):hover {
    color: #ccc;
  }
}
.fv {
  padding-bottom: 0;
  ~ section {
    overflow-x: clip;
  }
}

.top {
  position: relative;
  display: flex;
  padding-inline: 10vw;
  padding-top: 10vw;
  .treat {
    &:first-child {
      inset: 2vw auto auto 3vw;
      width: max(18%, 110px);
    }
    &:nth-child(2) {
      inset: 5vw -3% auto auto;
      width: max(25%, 100px);
    }
    &:nth-child(3) {
      inset: auto auto 3% 44%;
      width: max(14%, 160px);
      img {
        scale: -1 -1;
      }
    }
    &:nth-child(4) {
      display: none;
    }
  }
  h2 {
    font-size: var(--h2-sz);
    color: var(--primary-c);
    margin-bottom: 1em;
  }
  h3 {
    font-size: max(1.5vw, 16px);
    color: var(--primary-c);
    margin-bottom: 1rem;
    line-height: 1.8;
    font-weight: 500;
  }
  .body {
    width: 65%;
    background-color: #fff;
    border-radius: 3vw;
    padding: max(5vw, 50px) max(5vw, 2em);
    p {
      width: 78%;
      line-height: 2;
    }
  }
  .images {
    flex: 1;
    margin-left: -15%;
    position: relative;
    img {
      position: absolute;
      border-radius: 1em;
      &:first-child {
        inset: -4vw auto auto 0;
        width: 75%;
      }
      &:nth-child(2) {
        inset: 17vw 0 auto auto;
        width: 50%;
      }
      &:nth-child(3) {
        inset: 24vw 43% auto auto;
        width: 33%;
      }
      &:nth-child(4) {
        inset: 34.5vw 16% auto auto;
        width: 40%;
      }
    }
  }
}

.difference {
  padding-top: max(8vw, 60px);
  h2 {
    color: var(--primary-c);
    text-align: center;
    font-size: max(1.7vw, 16px);
    font-weight: 500;
    color: var(--primary-c);
    margin-bottom: 3rem;
    border-bottom: 1px solid;
    width: fit-content;
    margin-inline: auto;
    span {
      display: contents;
    }
  }
  .table-area {
    overflow-x: scroll;
    width: 100vw;
    margin-left: -5vw;
    padding-inline: 5vw;
  }
  table {
    border-radius: 2em;
    overflow: hidden;
    font-size: 14px;
    width: max(80vw, 1270px);
    margin-inline: auto;
    background-color: #fff;
    font-family: "Noto Sans JP";
    text-transform: none;
  }
  th {
    color: #fff;
    background-color: #000;
    height: 3.7em;
    ~ th {
      border-left: 1px solid;
    }
  }
  td ~ td {
    border-left: 1px solid;
  }
  th,
  td {
    text-align: center;
    vertical-align: middle;
    padding: 0.8em 0.6em;
    text-box: trim-both cap alphabetic;
  }
  .full {
    &:not(:has(th)) td {
      border-top: 1px solid #000;
    }
    th,
    td {
      &:first-child {
        width: 6.7em;
      }
      &:nth-child(2) {
        width: 4.3em;
      }
      &:nth-child(3) {
        width: 5.3em;
      }
      &:nth-child(4) {
        width: 50em;
      }
      &:nth-child(5) {
        width: 9.3em;
      }
      &:nth-child(6) {
        width: 6.3em;
      }
      &:nth-child(7) {
        width: 6.8em;
      }
    }
  }
  .feature {
    width: 50em;
    text-align: start;
    border-left: 1px solid #000;
    border-top: none;
    color: #0075c2;
  }
  .small {
    font-size: 0.7em;
  }
  tr:nth-child(odd) .feature {
    background-color: var(--bg-c);
  }
  .no {
    color: var(--primary-c);
  }
}

.card {
  position: relative;
  padding: max(5vw, 30px) 10vw;
  > .inner {
    background-color: #fff;
    border-radius: 3vw;
    padding: max(5vw, 50px) 5vw;
    display: flex;
    flex-direction: column;
  }
  h2 {
    text-align: center;
    margin-bottom: 3em;
    span {
      display: block;
      font-size: var(--h2-sz);
      font-weight: 300;
    }
  }
  .treat {
    &:first-child {
      inset: 1% 5% auto auto;
      width: max(20%, 100px);
    }
    &:nth-child(2) {
      inset: 22% auto auto 2%;
      width: max(16%, 100px);
    }
    &:nth-child(3) {
      inset: auto -1% 21% auto;
      width: max(18%, 100px);
    }
  }
}

.lease {
  ul {
    margin-bottom: max(2vw, 20px);
    > li {
      padding-block: max(5vw, 50px);
      display: flex;
      align-items: start;
      gap: max(3vw, 16px);
      ~ li {
        border-top: 1px solid var(--primary-c);
      }
      img {
        width: 50%;
      }
    }
  }
  .body {
    flex: 1;
    p {
      line-height: 2;
    }
  }
  .number {
    --w: 80px;
    width: var(--w);
    aspect-ratio: 1;
    background-color: var(--primary-c);
    border-radius: 50%;
    display: grid;
    place-items: center;
    place-content: center;
    font-size: calc(var(--w) * 14 / 100);
    gap: calc(var(--w) * 3 / 100);
    color: #fff;
    padding-top: 2px;
    container-type: inline-size;
    font-weight: 300;
    span {
      font-size: 40cqi;
      text-box: trim-both cap alphabetic;
    }
  }
  h3 {
    font-weight: 500;
    font-size: max(1.7vw, 18px);
    margin-bottom: 0.6em;
  }
  ol {
    line-height: 2;
    counter-reset: ol-num 0;
    li {
      display: flex;
      align-items: start;
      counter-increment: ol-num 1;
      &::before {
        content: counter(ol-num) ".";
        width: 1em;
      }
    }
  }
  picture img {
    width: 100%;
    margin-top: max(5vw, 50px);
  }
}

.what {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  span {
    &:first-of-type {
      font-weight: 300;
      display: flex;
      align-items: center;
      gap: 0.4em;
      font-size: max(1.5vw, 16px);
      color: var(--primary-c);
      img {
        width: 1.4rem;
        padding-bottom: 0.3em;
      }
    }
    &:nth-of-type(2) {
      font-weight: 500;
      margin-bottom: 1rem;
      text-box: trim-both cap alphabetic;
      font-size: max(1.5vw, 16px);
      padding: 0.8em 2em;
      background-color: var(--primary-c);
      color: #fff;
      border-radius: 2em;
      position: relative;
      &:after {
        position: absolute;
        inset: auto 0 -0.8em;
        margin-inline: auto;
        content: "";
        width: 0.8em;
        height: 0.8em;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        background-color: var(--primary-c);
      }
    }
  }
  .lead {
    font-size: max(1.5vw, 15px);
    font-weight: 500;
    color: var(--primary-c);
    text-align: center;
    line-height: 1.8;
    word-break: keep-all;
  }

  p:last-child {
    line-height: 1.8;
    @media (width >= 1094px) {
      text-align: center;
    }
    @media (width < 1094px) {
      .pc {
        display: none;
      }
    }
  }
}

.credit {
  .treat {
    &:first-child {
      top: 7%;
    }
    &:nth-child(2) {
      inset: auto auto 46% 7%;
      width: max(14%, 100px);
    }
    &:nth-child(3) {
      inset: auto 3% 10% auto;
      width: max(15%, 100px);
    }
  }

  .figures {
    display: flex;
    justify-content: space-between;
    gap: 1.4rem;
    margin-block: 2em max(5vw, 50px);
  }
  figure {
    flex: 1;
    border: 3px solid #898989;
    border-radius: 1em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    img {
      padding: 10%;
      width: 100%;
      margin-top: auto;
    }
    &:first-child {
      figcaption {
        background-color: #898989;
      }
    }
    &:last-child {
      border-color: var(--primary-c);
      figcaption {
        background-color: var(--primary-c);
      }
    }
  }
  figcaption {
    padding-block: 1em;
    text-align: center;
    color: #fff;
    text-box: trim-both cap alphabetic;
  }
  .arrow {
    background-color: var(--primary-c);
    align-self: center;
    width: 1.4rem;
    height: 2.6rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .body {
    background-color: var(--bg-c);
    padding: max(5vw, 26px) 5vw;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    ~ .body {
      margin-top: 2.6em;
      .circle > div:first-child {
        img {
          margin-block: 2.4em 10px;
        }
      }
    }
  }
  hgroup {
    h3 {
      font-size: max(1.5vw, 16px);
      color: var(--primary-c);
      font-weight: 500;
    }
    img {
      display: block;
      height: max(6vw, 52px);
      margin: 0 auto 1em;
    }
  }
  h4 {
    border-bottom: 1px solid;
  }
}
.case {
  display: flex;
  gap: max(2vw, 1em);
  width: 100%;
  margin-top: max(3vw, 1em);
  > div {
    flex: 1;
    background-color: #fff;
    border-radius: 1em;
    gap: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary-c);
    padding: 2em;
  }
  p {
    font-size: max(1.5vw, 16px);
    font-weight: 500;
  }
}
.circle > div {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  place-content: center;
  padding: 0 0 1em;
  img {
    width: 30%;
  }
  h4 {
    text-align: center;
    border: none;
    font-weight: 500;
  }
}

.support {
  .treat {
    &:first-child {
      inset: 15% auto auto 5%;
      width: max(16%, 100px);
    }
    &:nth-child(2) {
      inset: auto 6% 12% auto;
      width: max(17%, 100px);
    }
  }

  .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .dora-reco {
    position: absolute;
    inset: calc(5vw + var(--h2-sz) * 1.2) 8vw auto auto;
    width: clamp(100px, 16%, 220px);
  }
  h2 {
    margin-bottom: 2em;
  }
  .lead {
    font-size: max(1.5vw, 16px);
    color: var(--primary-c);
    line-height: 1.8;
    font-weight: 500;
    margin-bottom: 1em;
  }
  .circle {
    @media (width > 1220px) {
      padding-inline: 5vw;
    }
    > div {
      border: 1px solid var(--primary-c);
      padding: 0;
      img {
        width: 26%;
      }
    }
  }
  h3 {
    text-align: center;
    font-weight: 500;
  }
  a {
    margin-top: max(5vw, 30px);
    padding: 1.2em 2em 1em;
    display: flex;
    align-items: center;
    gap: 1em;
    border: 1px solid;
    border-radius: 3em;
    transition: opacity 0.4s;
    &:hover {
      opacity: 0.6;
    }
    .arrow {
      margin-bottom: 0.2em;
      width: 1.8em;
      aspect-ratio: 1;
      background-color: #000;
      border-radius: 50%;
      position: relative;
      &::before {
        position: absolute;
        inset: 34% 40% 34% auto;
        margin-block: auto;
        content: "";
        aspect-ratio: 1;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        rotate: 45deg;
      }
    }
  }
}

.scroll-hint-icon {
  top: 25%;
}

@media (width < 1024px) {
  .top {
    padding-inline: 5vw;
    .images {
      top: 100px;
    }
  }
  .card {
    padding-inline: 5vw;
    > div {
      h3,
      h4 {
        font-size: 14px;
      }
    }
  }
  .credit .body ~ .body .circle > div:first-child img {
    margin-block: 2em 4px;
  }
  .support {
    .dora-reco {
      inset: 110px 3vw auto auto;
    }
  }
}

@media (width < 768px) {
  main {
    background: linear-gradient(
      to right,
      var(--primary-c) 18%,
      var(--bg-c) 18%
    );
  }
  .breadcrumbs a[href=""] {
    color: #000;
  }
  .top {
    flex-direction: column;
    margin-bottom: 200px;
    padding-top: 110px;
    .treat {
      &:first-child {
        inset: auto auto -45% 3%;
        img {
          scale: 1 1;
        }
      }
      &:nth-child(2) {
        display: none;
      }
      &:nth-child(3) {
        inset: auto 10% -25% auto;
        width: 100px;
        img {
          scale: -1 -1;
        }
      }
      &:nth-child(4) {
        display: grid;
        inset: 10% 5% auto auto;
        width: 110px;
        img {
          scale: -1 -1;
        }
      }
    }

    .body {
      width: 95vw;
      margin-left: -5vw;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      padding-bottom: 80px;
      p {
        width: 100%;
      }
    }
    .images {
      margin: -70px -5vw 0 auto;
      width: min(95vw, 360px);
      top: 0;
      img {
        border-radius: 8px;
        &:first-child {
          inset: 0 0 auto auto;
          width: 59%;
        }
        &:nth-child(2) {
          inset: 150px auto auto 30px;
          width: 40%;
        }
        &:nth-child(3) {
          inset: 200px auto auto 164px;
          width: 30%;
        }
        &:nth-child(4) {
          inset: 30px auto auto 0;
          width: 35%;
        }
      }
    }
  }
  .difference h2 {
    display: flex;
    flex-direction: column;
    border: none;
    gap: 0.6em;
    span {
      display: block;
      border-bottom: 1px solid;
    }
    .sp {
      display: block;
    }
  }
  .card {
    padding-inline: 0;
    .treat {
      display: none;
    }
    > .inner {
      border-radius: 0;
    }
    h2 {
      margin-bottom: 2em;
    }
  }

  .lease {
    ul {
      > li {
        flex-direction: column;
        align-items: center;
        width: min(100%, 400px);
        margin-inline: auto;
        img {
          width: 100%;
        }
        ~ li {
          border-top: none;
          padding-top: 0;
        }
      }
    }
    .number {
      --w: 70px;
      font-size: 11px;
    }
    h3 {
      text-align: center;
    }
    picture img {
      width: min(100%, 400px);
      display: block;
      margin-inline: auto;
    }
  }
  .credit {
    h2 .sp {
      display: block;
    }
    .pc {
      display: none;
    }
    .figures {
      flex-direction: column;
      gap: 1em;
      width: min(100%, 400px);
      margin-inline: auto;
    }
    figure img {
      padding-block: 7%;
    }
    .arrow {
      rotate: 90deg;
    }
    .body ~ .body .circle > div:first-child img {
      margin-block: 0;
    }
  }
}

@media (width < 586px) {
  .credit {
    .body {
      > p,
      h3 {
        line-height: 1.8;
        text-align: center;
        .sp {
          display: block;
        }
      }
    }
  }
  .case {
    flex-direction: column;
    width: min(100%, 300px);
    p {
      font-size: 20px;
    }
  }
  .circle > div {
    aspect-ratio: auto;
    border-radius: 1em;
    display: flex;
    padding: 1.6em 1.8em;
    flex-direction: row;
    gap: 1.6em;
    justify-content: start;
    img {
      width: 44px;
    }
    h4 {
      text-align: start;
      line-height: 1.7;
    }
  }
  .support {
    h2 {
      font-size: 12.6px;
    }
    .dora-reco {
      position: static;
      width: 200px;
      + p {
        margin-top: 1em;
        text-align: center;
        line-height: 1.8;
      }
    }
    .sp {
      display: block;
    }
    .circle > div {
      padding: 1.6em 1.8em;
      gap: 1.6em;
      justify-content: start;
      img {
        width: 40px;
      }
    }
    h3 {
      text-align: start;
    }
    a {
      padding-inline: 1.5em;
      gap: 1em;
      font-size: 11px;
    }
  }
}