@charset "utf-8";
/* top */
/* ============================================ */

/* デザイン幅1921pxを基準に、PCでは画面幅に比例して縮小する（1px = --u） */
:root {
  --u: min(1px, 0.05206vw);
  @media (width <= 896px) {
    --u: 0.26vw;
  }
}

body.special-event {
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  overflow-x: hidden;
}

:where(.special-event main) img {
  display: block;
  width: 100%;
  height: auto;
}

.special-event .inner {
  width: calc(1600 * var(--u));
  margin-inline: auto;
  @media (width <= 896px) {
    width: 92%;
  }
}

/* hero */
.hero {
  background: #482a7c;
}
.hero__wrapper {
  position: relative;
  width: 100%;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column;
  }
}
.hero__ttl {
  a {
    @media (hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }
}
/* 高さ0のstickyラッパー（PCではメインビジュアルに重ねて表示し、画面上部に着いたら固定） */
.hero__navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 0;
  @media (width <= 896px) {
    height: auto;
  }
}
.hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.81vw; /* メインビジュアル高さ（幅の52.89%）の14.76% */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8% 0 8.54%;
  background: rgba(76, 52, 138, 0.663);
  transition: height .3s ease-out;
  @media (width <= 896px) {
    position: static;
    width: auto;
    height: auto;
    display: block;
    padding: 10px 3% 12px;
    background: #4b3185;
  }

  ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 0.46%;
    list-style: none;
    margin: 0;
    padding: 0;
    @media (width <= 896px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
  }

  li {
    display: flex;
  }

  a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6em;
    aspect-ratio: 261 / 52;
    padding: 0.3em 3% 0.3em 6%;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    color: #004ea2;
    font-size: max(12px, calc(19 * var(--u)));
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.25;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: normal;
    text-wrap: balance;
    @media (width <= 896px) {
      aspect-ratio: auto;
      padding: 8px;
      font-size: 1.2rem;
      letter-spacing: 0.02em;
      gap: 0.4em;
    }
    @media (width <= 480px) {
      font-size: 1rem;
    }

    &::before {
      content: "";
      flex: 0 0 auto;
      width: 1em;
      height: 2px;
      background: #004ea2;
      @media (width <= 896px) {
        width: 0.7em;
      }
    }
  }
}
.hero__nav--active {
  height: 5vw;
  @media (width <= 896px) {
    height: auto;
  }
}

/* purple (NEXT / 物価高応援企画 / 絶叫グランプリ) */
.purple {
  background: linear-gradient(180deg, #701490 0, #6700a0 calc(90 * var(--u))) #6700a0;

  /* 飾り（シルエット・きらめき）。PCは元デザインの位置、SP（896px以下）は縦積みレイアウト用に配置し直す */
  .purple__deco {
    pointer-events: none;
    @media (width <= 896px) {
      z-index: 0;
    }

    &.purple__deco--01 {
      left: 17.11%;
      top: 14.62%;
      width: 8.40%;
      @media (width <= 896px) {
        left: 14%;
        top: 3%;
        width: 10.08%;
      }
    }

    &.purple__deco--02 {
      left: 6.77%;
      top: 17.47%;
      width: 8.33%;
      @media (width <= 896px) {
        left: 6%;
        top: 12%;
        width: 9.99%;
      }
    }

    &.purple__deco--03 {
      left: 80.65%;
      top: 28.79%;
      width: 7.43%;
      @media (width <= 896px) {
        left: 66.74%;
        top: auto;
        bottom: 2.5vw;
        width: 8.91%;
      }
    }

    &.purple__deco--04 {
      left: 90.23%;
      top: 32.35%;
      width: 6.45%;
      @media (width <= 896px) {
        left: 76.92%;
        top: auto;
        bottom: 2.5vw;
        width: 7.75%;
      }
    }

    &.purple__deco--05 {
      left: 85.65%;
      top: 35.24%;
      width: 3.75%;
      @media (width <= 896px) {
        left: 85.94%;
        top: auto;
        bottom: 2.5vw;
        width: 4.50%;
      }
    }

    &.purple__deco--06 {
      left: 84.92%;
      top: 42.25%;
      width: 10.27%;
      @media (width <= 896px) {
        left: 53.14%;
        top: auto;
        bottom: 2.5vw;
        width: 12.32%;
      }
    }

    &.purple__deco--07 {
      left: 80.79%;
      top: 47.98%;
      width: 5.24%;
      @media (width <= 896px) {
        left: 91.71%;
        top: auto;
        bottom: 2.5vw;
        width: 6.29%;
      }
    }

    &.purple__deco--08 {
      left: 74.44%;
      top: 53.12%;
      width: 5.17%;
      @media (width <= 896px) {
        left: 90%;
        top: 18.2vw;
        width: 6.20%;
      }
    }

    &.purple__deco--09 {
      left: 12.84%;
      top: 64.30%;
      width: 4.89%;
      @media (width <= 896px) {
        left: 27.39%;
        top: auto;
        bottom: 2.5vw;
        width: 5.87%;
      }
    }

    &.purple__deco--10 {
      left: 5.59%;
      top: 68.84%;
      width: 8.29%;
      @media (width <= 896px) {
        left: 41.92%;
        top: auto;
        bottom: 2.5vw;
        width: 9.95%;
      }
    }

    &.purple__deco--11 {
      left: 8.95%;
      top: 82.58%;
      width: 5.10%;
      @media (width <= 896px) {
        left: 34.53%;
        top: auto;
        bottom: 2.5vw;
        width: 6.12%;
      }
    }

    &.purple__deco--12 {
      left: 21.97%;
      top: 89.87%;
      width: 7.84%;
      @media (width <= 896px) {
        left: 2.00%;
        top: auto;
        bottom: 2.5vw;
        width: 9.41%;
      }
    }

    &.purple__deco--13 {
      left: 15.93%;
      top: 91.28%;
      width: 3.37%;
      @media (width <= 896px) {
        left: 12.68%;
        top: auto;
        bottom: 2.5vw;
        width: 4.04%;
      }
    }

    &.purple__deco--14 {
      left: 32.00%;
      top: 93.84%;
      width: 6.77%;
      @media (width <= 896px) {
        left: 18.00%;
        top: auto;
        bottom: 2.5vw;
        width: 8.12%;
      }
    }

    &.purple__deco--15 {
      left: 13.26%;
      top: 15.20%;
      width: 3.68%;
      @media (width <= 896px) {
        left: 20%;
        top: 18%;
        width: 4.42%;
      }
    }

    &.purple__deco--16 {
      left: 92.87%;
      top: 40.53%;
      width: 4.37%;
      @media (width <= 896px) {
        left: 36%;
        top: 2%;
        width: 5.25%;
      }
    }

    &.purple__deco--17 {
      left: 6.18%;
      top: 77.20%;
      width: 4.72%;
      @media (width <= 896px) {
        left: 30%;
        top: 15%;
        width: 5.67%;
      }
    }

    &.purple__deco--18 {
      left: 14.44%;
      top: 87.65%;
      width: 2.98%;
      @media (width <= 896px) {
        left: 24%;
        top: 3%;
        width: 3.58%;
      }
    }
  }
}
.purple__wrapper {
  position: relative;
  max-width: 1921px;
  margin-inline: auto;
  aspect-ratio: 1921 / 2790;
  display: flow-root;
  @media (width <= 896px) {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0 0;
  }
}
/* バナーより下（キャラ・本文ブロック・飾り）のまとまり。
   PCは display:contents で .purple__wrapper を位置の基準にし、SPは自身を基準にして
   バナーの段数（480px以下で縦並び）に影響されないようにする */
.purple__body {
  display: contents;
  @media (width <= 896px) {
    position: relative;
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 24vw;
  }
}
.purple__item {
  position: absolute;
  height: auto;
  @media (width <= 896px) {
    &:not(.purple__deco) {
      position: relative;
      z-index: 1;
      left: auto;
      top: auto;
    }
  }
}
.purple__bnrs {
  display: flex;
  width: 66.07%;
  margin: 4.44% 0 0 16.97%;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  @media (width <= 896px) {
    position: relative;
    z-index: 1;
    order: 2;
    width: 88%;
    margin: 12px 0 0;
    gap: 12px;
  }
  @media (width <= 480px) {
    flex-direction: column;
  }

  li {
    width: 49.32%;
    @media (width <= 896px) {
      width: 100%;
    }
  }
}
.purple__ttl {
  left: 34.84%;
  top: 0.00%;
  width: 29.95%;
  @media (width <= 896px) {
    order: 1;
    width: 78%;
  }
}
.purple__chara {
  left: 68.92%;
  top: 12.97%;
  width: 23.49%;
  @media (width <= 896px) {
    order: 3;
    width: 32%;
    margin: 20px 28% -6px auto;
  }
}
.purple__blob {
  left: 3.30%;
  top: 15.63%;
  width: 74.34%;
  @media (width <= 896px) {
    order: 4;
    width: 92%;
  }
}
.purple__scream {
  left: 14.54%;
  top: 57.09%;
  width: 82.46%;
  @media (width <= 896px) {
    order: 5;
    width: 94%;
    margin-top: 10px;
  }
}

/* 査定価格de宝くじ */
.lottery {
  padding: calc(40 * var(--u)) 0;
  background: linear-gradient(90deg, #f7d164, #ecbe3f);
  @media (width <= 896px) {
    padding: 32px 0;
  }
}
.lottery__wrapper {
  width: calc(1860 * var(--u));
  margin-inline: auto;
  @media (width <= 896px) {
    width: 100%;
  }
}
.lottery__img {
  text-align: center;
  img {
    width: 100%;
  }
}

/* おすすめ特選車 */
.special {
  background: #edd0d2;
  padding: calc(54 * var(--u)) 0 calc(104 * var(--u));
  @media (width <= 896px) {
    padding: 28px 0 48px;
  }
}
.special__ttl {
  position: relative;
  aspect-ratio: 1600 / 550;
  @media (width <= 896px) {
    aspect-ratio: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding-top: 4px;
  }

  img {
    position: absolute;
    @media (width <= 896px) {
      position: static;
    }
  }
}
.special__heading {
  @media (width <= 896px) {
    position: relative;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.special__ribbon {
  @media (width <= 896px) {
    width: 46% !important;
  }
}
.special__lockup {
  @media (width <= 896px) {
    width: 94% !important;
    margin-top: 3%;
  }
}
.special__badge {
  @media (width <= 896px) {
    position: absolute !important;
    top: 0;
    right: 0;
    width: 17% !important;
  }
}
.special__mascot {
  @media (width <= 896px) {
    flex: 0 0 auto;
    width: 25% !important;
    order: 3;
    margin-top: 6px;
  }
  @media (width <= 480px) {
    flex: 0 0 auto;
    width: 32% !important;
    margin-top: 10px;
  }
}
.special__date {
  @media (width <= 896px) {
    flex: 0 0 70%;
    width: 70% !important;
    margin: 6px 15% 0;
    order: 2;
  }
}
.special__lead {
  position: absolute;
  left: 50%;
  top: 83.1%;
  width: 100%;
  transform: translateX(-50%);
  color: #039;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width <= 896px) {
    position: static;
    order: 4;
    flex: 0 0 72%;
    width: 72%;
    margin-top: 6px;
    transform: none;
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: left;
  }
  /* 480px以下は1カラム（キャラの下に本文を縦並び） */
  @media (width <= 480px) {
    flex: 0 0 100%;
    width: 100%;
  }

  span {
    display: block;
  }
}
.car__hint {
  display: none;
  @media (width <= 896px) {
    display: block;
    margin-top: 12px;
    text-align: right;
    font-size: 1.2rem;
    font-weight: 500;
    color: #5a3a3a;
  }
}
.car__scroll {
  margin-top: calc(17 * var(--u));
  @media (width <= 896px) {
    margin-top: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
}
.car__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #5a7fc0;
  background: #fff;
  font-size: max(13px, calc(20 * var(--u)));
  line-height: 1.4;
  text-align: center;
  @media (width <= 896px) {
    min-width: 900px;
    font-size: 1.3rem;
  }

  small {
    font-size: calc((14 / 16) * 1em);
  }

  thead th {
    background: #039;
    color: #fff;
    font-weight: 500;
    text-align: center;
    font-size: max(12px, calc(18 * var(--u)));
    height: calc(60 * var(--u));
    min-height: 30px;
    border-left: 1px solid #5a7fc0;
    vertical-align: middle;
    @media (width <= 896px) {
      height: 36px;
      font-size: 1.1rem;
    }

    &:nth-child(1) { width: 3.9%; }
    &:nth-child(2) { width: 19.7%; }
    &:nth-child(3) { width: 15.2%; }
    &:nth-child(4) { width: 7.7%; }
    &:nth-child(5) { width: 9%; }
    &:nth-child(6) { width: 13.9%; }
    &:nth-child(7) { width: 24.4%; }
    &:nth-child(8) { width: 6.3%; }
  }

  tbody tr:nth-child(even) {
    background: #f0f9fc;
  }

  td,
  tbody th {
    border: 1px solid #5a7fc0;
    padding: 4px;
    vertical-align: middle;
    font-weight: 500;
  }

  tbody th {
    color: #039;
    font-size: max(14px, calc(30 * var(--u)));
    font-weight: 700;
    text-align: center;
    @media (width <= 896px) {
      font-size: 1.8rem;
    }
  }

  .car__img img {
    width: 100%;
  }

  .car__name {
    font-weight: 700;
  }

  .car__opt {
    font-size: max(12px, calc(16 * var(--u)));
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: normal;
    @media (width <= 896px) {
      font-size: 1.2rem;
    }
  }
}
.car__note {
  margin-top: calc(26 * var(--u));
  text-align: center;
  font-size: max(10px, calc(16 * var(--u)));
  font-weight: 500;
  color: #1a1a1a;
  @media (width <= 896px) {
    margin-top: 14px;
    font-size: 1rem;
    text-align: left;
  }
}
.car__note--white {
  color: #fff;
}
.point {
  margin-top: calc(68 * var(--u));
  @media (width <= 896px) {
    margin-top: 28px;
  }
}
.point__link {
  @media (hover: hover) {
    &:hover {
      opacity: 1;
    }
  }
}

/* UNDER50中古車 */
.under50 {
  background: #039;
  padding: calc(18 * var(--u)) 0 calc(120 * var(--u));
  @media (width <= 896px) {
    padding: 20px 0 48px;
  }
}
.under50__ttl {
  width: 83.75%;
  margin-left: 10.75%;
  @media (width <= 896px) {
    width: 100%;
    margin-left: 0;
  }

  a {
    display: block;
    @media (hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }
}
.used__list {
  margin-top: calc(9 * var(--u));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(24 * var(--u)) calc(28.5 * var(--u));
  list-style: none;
  padding: 0;
  @media (width <= 896px) {
    margin-top: 14px;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
  }

  a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    @media (hover: hover) {
      &:hover {
        opacity: 1;
      }
    }
  }
}

/* lavender (サービス季節商品 / おクルマ労り診断 / NEXT) */
.lavender {
  background: #c5c2d7 url("../images/stripe.png") center top / 100% auto repeat-y;
  padding: calc(100 * var(--u)) 0 calc(64 * var(--u));
  @media (width <= 896px) {
    padding: 32px 0 24px;
  }
}
.season {
  img {
    width: 100%;
  }
}

/* おクルマ労り診断 */
.care {
  margin-top: calc(68 * var(--u));
  border: calc(4 * var(--u)) solid #064f9e;
  border-radius: calc(30 * var(--u));
  background: linear-gradient(180deg, #b7e2f9 1%, #c3e6fa 8%, #d1edfb 15%, #dbf0fc 23%, #e0f3fd 30%, #e8f6fd 37%, #f2fafe 44%, #fbfeff 51%, #fff 58%);
  padding-bottom: 2.5%;
  @media (width <= 896px) {
    margin-top: 24px;
    border-radius: 14px;
    padding-bottom: 14px;
  }
}
:where(.care) img {
  width: 100%;
}
.care__head {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  @media (width <= 896px) {
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 3% 0;
  }
}
.care__bubble {
  flex: 0 0 18.1%;
  margin: 6.86% 0 0 3.03%;
  @media (width <= 896px) {
    flex: 0 0 34%;
    margin: 0 2% 0 0;
    order: 2;
    align-self: center;
  }
}
.care__headmain {
  flex: 0 0 61%;
  margin: 2.47% 0 0 -1.71%;
  @media (width <= 896px) {
    flex: 0 0 100%;
    margin: 0;
    order: 1;
  }
}
.care__ribbon {
  width: 72.5%;
  margin: 2% 0 0 12.43%;
  @media (width <= 896px) {
    width: 72.5%;
    margin: 0 auto;
  }
}
.care__price {
  flex: 0 0 27.6%;
  margin: 4.52% 0 0 -8.54%;
  @media (width <= 896px) {
    flex: 0 0 56%;
    margin: 0;
    order: 3;
  }
}
.care__panel {
  margin: 0 2.875%;
  padding: 3.3% 0.94% 0.8%;
  border-radius: calc(24 * var(--u));
  @media (width <= 896px) {
    margin: 0 3%;
    padding: 12px 3% 10px;
    border-radius: 10px;
  }
}
.care__check {
  margin-top: -3.6%;
  background: #064f9e;
  @media (width <= 896px) {
    margin-top: 10px;
  }
}
.care__list {
  display: flex;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4px;
  }
  @media (width <= 480px) {
    grid-template-columns: repeat(2, 1fr);
  }

  li {
    /* 画像の実寸（幅）の比で並べて高さを揃える */
    &:nth-child(1) { flex: 487 1 0; }
    &:nth-child(2),
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) { flex: 486 1 0; }
    &:nth-child(6) { flex: 690 1 0; }

    @media (width <= 896px) {
      &:nth-child(n) {
        flex: none;
      }

      /* 水洗いは1カラム（行全体を使う） */
      &:nth-child(6) {
        grid-column: 1 / -1;
        justify-self: center;
        width: 50%;
      }
    }

    @media (width <= 480px) {
      &:nth-child(6) {
        width: 66%;
      }
    }
  }
}
.care__note {
  margin-top: 0.4%;
  color: #fff;
  font-size: max(10px, calc(15 * var(--u)));
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  @media (width <= 896px) {
    margin: 8px 0 0;
    font-size: 1rem;
  }
}
.care__option {
  margin-top: 1.4%;
  background: #009dea;
  padding: 1%;
  @media (width <= 896px) {
    margin-top: 10px;
    padding: 12px 3%;
  }
}
.care__optionhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 1%;
  @media (width <= 896px) {
    flex-wrap: wrap;
  }
}
.care__optionlabel {
  flex: 0 0 72.8%;
  display: flex;
  align-items: center;
  gap: calc(38 * var(--u));
  box-sizing: border-box;
  min-height: calc(68 * var(--u));
  padding-left: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #fff33e;
  @media (width <= 896px) {
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    height: auto;
    padding: 5px;
    border-radius: 10px;
  }
}
.care__optiontag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(287 * var(--u));
  height: calc(51 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #009dea;
  color: #fff;
  font-size: calc(24 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  @media (width <= 896px) {
    width: auto;
    height: auto;
    padding: 5px 20px;
    border-radius: 10px;
    font-size: 1.2rem;
  }
}
.care__optiontxt {
  color: #009dea;
  font-size: calc(38 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  padding-block: 0.15em;
  @media (width <= 896px) {
    flex: 0 0 100%;
    font-size: 1.6rem;
    text-align: center;
  }

  em {
    color: #d7141a;
    font-style: normal;
  }
}
.care__optionsub {
  flex: 0 0 28.4%;
  margin-right: -1.3%;
  color: #fff;
  font-size: calc(22 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  @media (width <= 896px) {
    flex: 0 0 100%;
    text-align: center;
    font-size: 1.4rem;
  }
}
.care__optionlist {
  display: flex;
  list-style: none;
  padding: 0;
  margin-top: -0.2%;
  @media (width <= 896px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 4px;
    margin-top: 6px;
  }
  @media (width <= 480px) {
    grid-template-columns: repeat(2, 1fr);
  }

  li {
    flex: 0 0 19.9%;
    margin-left: -0.27%;

    &:first-child {
      margin-left: 0;
    }

    @media (width <= 896px) {
      &,
      &:first-child {
        flex: none;
        width: auto;
        margin-left: 0;
      }
    }
  }
}

/* NEXT */
.next {
  margin-top: calc(64 * var(--u));
  display: grid;
  grid-template-columns: 782fr 788fr;
  gap: calc(30 * var(--u));
  list-style: none;
  padding: 0;
  @media (width <= 896px) {
    margin-top: 24px;
    gap: 14px;
  }
  @media (width <= 480px) {
    grid-template-columns: 1fr;
  }
}

/* footer area */
.autumn {
  background: #c5c2d7 url("../images/stripe.png") center top / 100% auto repeat-y;
}
.autumn__wrapper {
  display: grid;
  width: 100%;
  @media (width <= 896px) {
    display: flex;
    flex-direction: column-reverse;
  }
}
.autumn__art {
  grid-area: 1 / 1;
  @media (width <= 896px) {
    margin-top: -1px;
    background: #fef7c7;
  }
}
.autumn__body {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(190 * var(--u));
  text-align: center;
  color: #e8381b;
  @media (width <= 896px) {
    padding: 11vw 4% 0;
    background: #fef7c7;
    /* PCと同じ円弧（幅1921pxで両端が約120px下がる＝半径約203vw）を維持 */
    clip-path: circle(203vw at 50% 203vw);
  }
}
.autumn__ttl {
  font-size: calc(60 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width <= 896px) {
    font-size: 1.9rem;
    line-height: 1.5;
  }
}
.autumn__txt {
  margin-top: calc(39 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 700;
  line-height: 2.2;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  @media (width <= 896px) {
    margin-top: 12px;
    font-size: 1.3rem;
    line-height: 1.9;
  }

  span {
    display: block;
    @media (width <= 896px) {
      display: inline;
    }
  }
}
.autumn__btn {
  margin-top: calc(110 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  box-sizing: border-box;
  width: calc(450 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 999px;
  background: #e8381b;
  color: #fff;
  font-size: calc(28 * var(--u));
  font-weight: 500;
  text-decoration: none;
  @media (width <= 896px) {
    margin-top: 20px;
    margin-bottom: 4px;
    width: 72%;
    max-width: 300px;
    height: 52px;
    gap: 10px;
    font-size: 1.5rem;
  }
}
.autumn__pin {
  flex: 0 0 auto;
  width: calc(39 * var(--u));
  height: auto;
  @media (width <= 896px) {
    width: 15px;
  }
}
.autumn__arrow {
  margin-left: calc(8 * var(--u));
}