/* ============================================================= *

index

* ============================================================= */
/* p-index-loader
============================== */
.p-index-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  background: var(--grade-color);
  transition: opacity .4s linear 2s;
  pointer-events: auto;
}

@media screen and (max-width: 767px) {
  .p-index-loader {
    justify-content: flex-end;
  }
}

body.is-loading .p-index-loader {
  opacity: 0;
  pointer-events: none;
}

.p-index-loader .p-index-loader__item {
  flex: 1;
  opacity: 0;
  transform-origin: center center;
  animation: lightUp 1.2s ease-out forwards;

  scale: .9;
}

.p-index-loader .p-index-loader__item.--item-01 {
  position: relative;
  top: 10.15625%;
  z-index: 3;
  order: 1;
  width: 32.9429%;
  animation-delay: .4s;
}

@media screen and (max-width: 767px) {
  .p-index-loader .p-index-loader__item.--item-01 {
    top: 0;
    bottom: auto;
    width: 83.2%;
    transform: translateX(0) translateY(calc(1 * 10.22364%));
  }
}

.p-index-loader .p-index-loader__item.--item-02 {
  position: relative;
  top: 27.21354%;
  z-index: 1;
  order: 0;
  width: 26.93997%;
  transform: translateX(18.20652%);
  animation-delay: .5s;
}

@media screen and (max-width: 767px) {
  .p-index-loader .p-index-loader__item.--item-02 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-1 * 42.3913%);
    width: 97.06667%;
    margin-block: auto;
    transform: translateX(0) translateY(calc(-1 * 2.46781%));
  }
}

.p-index-loader .p-index-loader__item.--item-03 {
  position: relative;
  top: 43.35938%;
  z-index: 2;
  order: 2;
  width: 32.65007%;
  transform: translateX(calc(-1 * 44.39462%));
  animation-delay: .6s;
}

@media screen and (max-width: 767px) {
  .p-index-loader .p-index-loader__item.--item-03 {
    position: absolute;
    top: auto;
    right: calc(-1 * 20%);
    bottom: 0;
    width: 94.4%;
    transform: translateX(0) translateY(20%);
  }
}

@keyframes lightUp {
  0% {
    opacity: 0;

    scale: .9;
  }
  75% {
    opacity: 1;

    scale: 1;
  }
  100% {
    opacity: 0;

    scale: 1;
  }
}

.js-index-heading-fadeIn {
  opacity: 0;
}

body.is-loaded .js-index-heading-fadeIn {
  animation: fadeInHeading 1s cubic-bezier(.33, 1, .68, 1) forwards;
  animation-delay: 1.2s;
}

@keyframes fadeInHeading {
  0% {
    opacity: 0;
    filter: blur(10px);

    scale: 1.01;
  }
  100% {
    opacity: 1;
    filter: blur(0);

    scale: 1;
  }
}

/* p-index-section
============================== */
.p-index-section {
  max-width: calc(var(--inner-width-px) + var(--inner-padding)*2);
  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

.p-index-section__head {
  margin-block-end: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 24));
}

.p-index-section-title {
  display: flex;
  flex-direction: column;
  gap: calc(16px + var(--slope-1px) * 8);
}

.p-index-section-title > p {
  display: block;
  overflow: hidden;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: clamp(38px, -121.03614px + 13.25301vw, 60px);
  font-family: var(--en-font-family);

  margin-block-start: var(--leading-trim);
  margin-block-end: calc( var(--leading-trim) - .275em);
}

.p-index-section-title > h2 {
  display: block;
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: clamp(20px, -8.91566px + 2.40964vw, 24px);
  line-height: 1;
}

.p-index-section__head {
  grid-area: head;
}

.p-index-section__body {
  grid-area: body;
}

.p-index-section__foot {
  grid-area: foot;
}

.p-index-section__lead {
  display: block;

  margin-block-start: var(--leading-trim);
  margin-block-end: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
}

.p-index-section__button {
  display: flex;
  flex-direction: column;
  gap: calc(8px + var(--slope-1px) * 8);
}

@media screen and (max-width: 767px) {
  .p-index-section__button {
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: 81.34111%;
    margin-inline: auto;
  }
}

/* p-index-heading
============================== */
.p-index-heading {
  position: relative;
  display: grid;
  grid-template-rows: 60px 1fr 60px;
  grid-template-columns: 100%;
  width: 100cqi;
  height: auto;
  min-height: calc(100svh - var(--header-height));
  margin-inline: calc(50% - 50cqi);

  margin-block-start: var(--header-height);
}

@media screen and (max-width: 767px) {
  .p-index-heading {
    grid-template-rows: 1fr auto;
  }
}

.p-index-heading .p-index-heading__body {
  grid-row: 2/3;
}

@media screen and (max-width: 767px) {
  .p-index-heading .p-index-heading__body {
    grid-row: 1/2;
    padding-block: var(--inner-padding);
  }
}

.p-index-heading .p-index-heading__foot {
  grid-row: 3/4;
}

@media screen and (max-width: 767px) {
  .p-index-heading .p-index-heading__foot {
    grid-row: 2/3;
  }
}

.p-index-heading__image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #000;
}

.p-index-heading__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .15;
}

.p-index-heading__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-index-heading__body {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: 53.14961% 40.62992%;
  grid-template-areas: "title button";
  width: 100%;
  max-width: 1366px;
  margin-inline: auto;
  padding-inline: 3.07467% 3.73353%;
  column-gap: 6.45669%;
}

@media screen and (max-width: 1080px) {
  .p-index-heading__body {
    padding-inline: var(--inner-padding);
  }
}

@media screen and (max-width: 767px) {
  .p-index-heading__body {
    justify-content: center;
    align-self: center;
    grid-template-columns: 100%;
    grid-template-areas: "title"
 "button";
    gap: 40px;
    height: fit-content;
  }
}

.p-index-heading__title {
  grid-area: title;
}

.p-index-heading__button {
  grid-area: button;
}

.p-index-heading__title {
  display: grid;
  grid-template-columns: 100%;
  gap: 68px;
  height: fit-content;
}

@media screen and (max-width: 767px) {
  .p-index-heading__title {
    gap: 46px;
    margin-inline: auto;
  }
}

.p-index-heading__hansha {
  position: relative;
  display: block;
  width: fit-content;
  height: fit-content;
  color: var(--white);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: 0;
  font-weight: 700;
  font-size: min(calc( 100cqi * (120/1366)), 120px);
  font-family: var(--en-font-family);
  line-height: 1.25;

  margin-block-start: var(--leading-cap);
}

@media screen and (max-width: 767px) {
  .p-index-heading__hansha {
    font-size: calc(44px + var(--slope-1px) * 76);
  }
}

.p-index-heading__hansha em {
  display: block;
  letter-spacing: .01em;
  font-size: min(calc( 100cqi * (128/1366)), 128px);
  line-height: .75em;

  margin-block-end: var(--leading-cap);
}

@media screen and (max-width: 767px) {
  .p-index-heading__hansha em {
    font-size: calc(47px + var(--slope-1px) * 81);
  }
}

.p-index-heading__hansha::before {
  content: "";
  position: absolute;
  bottom: -32px;
  width: 100%;
  height: 2px;
  background: var(--white);
}

@media screen and (max-width: 767px) {
  .p-index-heading__hansha::before {
    bottom: -25px;
    margin-inline: auto;
  }
}

.p-index-heading__lead {
  display: block;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .2);
  white-space: nowrap;
  word-break: keep-all;
  font-weight: 700;
  font-size: 42px;
  font-size: min(calc( 100cqi * (42/1366)), 42px);
  line-height: 100%;
}

@media screen and (max-width: 767px) {
  .p-index-heading__lead {
    text-align: center;
    font-size: calc(27px + var(--slope-1px) * 15);
  }
}

/* p-index-heading__foot
============================== */
.p-index-heading__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .65);
  color: var(--white);
}

@media screen and (min-width: 768px) {
  .p-index-heading__foot {
    width: 100%;
    height: 60px;
    max-width: var(--inner-width-px);
    margin-inline: auto;
    border-radius: 24px 24px 0 0;
  }
}

@media screen and (max-width: 767px) {
  .p-index-heading__foot {
    padding: 15px var(--inner-padding);
  }
}

.p-index-heading__close {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px clamp(22px, -263.5082px + 22.95082vw, 50px);
  margin-block: var(--leading-cap);
  padding-block: calc(14px + var(--slope-1px) * 8);
  border-top: 2px solid;
  border-bottom: 2px solid;
}

@media screen and (max-width: 1080px) {
  .p-index-heading__close {
    margin-block-end: 48px;
  }
}

@media screen and (max-width: 767px) {
  .p-index-heading__close {
    margin-block-end: 16px;
  }
}

.p-index-close {
  display: inline-flex;
  align-items: baseline;
  margin-block: var(--leading-cap);
  font-family: var(--en-font-family);
}

@media screen and (max-width: 767px) {
  .p-index-close {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin-block: 0;
  }
}

.p-index-close__date {
  display: inline-flex;
  align-items: baseline;
  margin-block: var(--leading-cap);
}

.p-index-close__date em {
  color: var(--white);
  font-weight: 500;
  font-style: normal;
  font-size: 36px;
  line-height: 120%;
  /* 43.2px */
}

.p-index-close__date span {
  color: var(--white);
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  line-height: 110%;
  /* 26.4px */
}

.p-index-close__date::after {
  content: "";
  position: relative;
  display: inline-flex;
  align-self: center;
  width: 2px;
  height: 1.4lh;
  margin-inline: 30px;
  background: var(--white);
}

@media screen and (max-width: 767px) {
  .p-index-close__date::after {
    content: none;
  }
}

@media screen and (max-width: 767px) {
  .p-index-close__date {
    justify-content: center;
    margin-block: 0 10px;
    border-bottom: 1px solid;

    padding-block-end: calc(10px + var(--leading-trim));
  }
}

.p-index-close__open > p {
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 8);
  line-height: 1.1;
}

.p-index-close__list {
  display: flex;
  color: var(--white);
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .p-index-close__list {
    flex-direction: column;
    gap: 5px;
  }
}

.p-index-close__list li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block: var(--leading-trim);
  font-size: calc(12px + var(--slope-1px) * 4);
  font-feature-settings: normal;
}

.p-index-close__list li .u-icon {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  color: var(--white);
}

.p-index-close__list li .u-icon svg path {
  fill: var(--white);
}

@media screen and (max-width: 767px) {
  .p-index-close__list li {
    margin-block: 0;
  }
}

.p-index-close__list li:not(:first-child)::before {
  content: "/";
  position: relative;
  display: inline;
  padding-inline: 12px;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  line-height: 110%;
  /* 22px */
}

@media screen and (max-width: 767px) {
  .p-index-close__list li:not(:first-child)::before {
    content: none;
  }
}

.p-index-close__link {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-block: var(--leading-trim);
  color: var(--white);
  text-decoration: underline;
  transition: text-decoration-color .1s ease;

  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: currentColor;
}

.p-index-close__link:hover {
  text-decoration-color: transparent;
}

.p-index-close__arrow {
  display: inline-flex;
  overflow: hidden;
  width: 1em;
  height: 1em;
  margin-left: 5px;
  padding: 2px;
  border-radius: 50%;
  background: var(--base-color);
  color: var(--white);
}

.p-index-close__arrow img {
  width: 12px;
  height: 12px;
}

.p-index-heading__button {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(11px, 4.59766px + .83472vw, 16px);
}

.p-index-heading-button {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 25px 0;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(18px, 10.3172px + 1.00167vw, 24px);
  line-height: 1;
  transition: filter .3s var(--animation);
}

.p-index-heading-button.--column {
  gap: calc(5.5px + var(--slope-1px) * 6);
  padding: 23.5px 0 28.5px 0;
}

@media screen and (max-width: 767px) {
  .p-index-heading-button.--column {
    padding: 11px 0 18.5px 0;
  }
}

@media screen and (max-width: 767px) {
  .p-index-heading-button {
    padding: 16px;
  }
}

.p-index-heading-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(12px + var(--slope-1px) * 6);
  background: var(--white);
  transition: scale .2s var(--animation);
}

@media (any-hover: hover) {
  .p-index-heading-button:hover {
    filter: brightness(.92);
  }
  .p-index-heading-button:hover span._icon {
    translate: 0 -3px;
  }
  .p-index-heading-button:hover::before {
    scale: .99;
  }
}

.p-index-heading-button > * {
  position: relative;
  z-index: 1;
}

.p-index-heading-button span {
  display: block;
  margin-block: var(--leading-trim);
}

.p-index-heading-button span._icon {
  width: 60px;
  height: 60px;
  aspect-ratio: 1;
  transition: translate .2s var(--animation);

  translate: 0 0;
}

@media screen and (max-width: 767px) {
  .p-index-heading-button span._icon {
    width: 36px;
    height: 36px;
  }
}

.p-index-heading-button span._icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-index-heading-button span._icon svg path {
  fill: var(--key-color);
}

.p-index-heading-button p {
  display: block;
  margin-block: var(--leading-cap);
}

/* Mut-holidays
============================== */
.p-index-media .Mut-holidays {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100%;
  max-width: var(--inner-width-px);
  margin-inline: auto;
  padding-inline: var(--inner-padding);
  border-radius: var(--frame-border-radius);
  background: var(--white);
  font-size: calc(15px + var(--slope-1px) * 3);

  margin-block-end: 24px;
}

.p-index-media .Mut-holidays__date {
  text-align: center;
  text-wrap: balance;
}

.p-index-media .Mut-holidays__button {
  padding: .8em .4em 1em;
  border: 2px solid var(--base-color);
  border-radius: var(--base-border-radius);
}

.p-index-media .Mut-holidays__button:hover {
  background: var(--base-color);
}

/* p-index-information
============================== */
.p-index-information {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 100%;
  gap: calc(20px + var(--slope-1px) * -5);
  width: 100%;
  max-width: var(--inner-width-px);
  margin-inline: auto;

  margin-block-start: calc(40px + var(--slope-1px) * 40);
}

.p-index-information-nav {
  display: flex;
  align-items: center;
  padding: 16px calc(16px + var(--slope-1px) * 8);
  border-radius: var(--small-border-radius);
  background: var(--bg-color);
  text-decoration: none;
  transition: filter .2s;
}

@media screen and (max-width: 767px) {
  .p-index-information-nav {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon date"
 "icon text";
    gap: 8px 12px;
  }
}

@media (any-hover: hover) {
  .p-index-information-nav:hover {
    filter: brightness(.92);
  }
}

.p-index-information-nav__icon {
  grid-area: icon;
}

.p-index-information-nav__icon path {
  fill: currentColor;
}

.p-index-information-nav__date {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  grid-area: date;
  font-weight: 400;
  font-size: 15px;
  font-family: var(--en-font-family);
}

@media screen and (min-width: 768px) {
  .p-index-information-nav__date {
    margin-left: 14px;
    padding-right: 12px;
  }
}

@media screen and (max-width: 767px) {
  .p-index-information-nav__date {
    margin-block: var(--leading-trim);
  }
}

.p-index-information-nav__text {
  display: block;
  flex-grow: 1;
  grid-area: text;
  overflow: hidden;
  margin-block: var(--leading-trim);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(15px + var(--slope-1px) * 1);
}

.p-index-information-nav.is-important {
  background: var(--key-color);
  color: var(--white);
}

/* p-index-topics
=============================== */
.p-index-topics {
  position: relative;
  margin-inline: auto;

  margin-block-start: calc(56px + var(--slope-1px) * 24);
  margin-block-end: calc(32px + var(--slope-1px) * 24);
}

.p-index-topics__head {
  margin-block-end: calc(24px + var(--slope-1px) * 16);
}

/* p-index-topics-slider
============================== */
.p-index-topics-slider-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-inline: auto;

  margin-block-start: calc(12px + var(--slope-1px) * 12);
}

/* p-index-showroom
============================== */
.p-index-showroom {
  position: relative;
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
  padding-block: calc(48px + var(--slope-1px) * 52);
  background: linear-gradient(180deg, color-mix(in srgb, var(--grade-deep), transparent 10%) 0%, color-mix(in srgb, var(--grade-light), transparent 10%) 100%), url("../img/bg-showroom.jpg") no-repeat center/cover;
}

/* p-index-showroom__head
============================== */
.p-index-showroom__head {
  width: calc(100% - var(--inner-padding)* 2);
  max-width: var(--inner-width-px);
  margin-inline: auto;

  margin-block-end: calc(32px + var(--slope-1px) * 16);
}

@media screen and (max-width: 767px) {
  .p-index-showroom__head {
    max-width: 100%;
  }
}

.p-index-showroom-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.p-index-showroom-title .--en {
  position: relative;
  z-index: 0;
  grid-column: 1 / 2;
  grid-row: 1/2;
  width: 100cqi;
  margin-block: var(--leading-cap);
  margin-inline: calc(50% - 50cqi);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(80px + var(--slope-1px) * 48);
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .1;
}

.p-index-showroom-title h2.--ja {
  z-index: 1;
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-style: normal;
  font-size: calc(32px + var(--slope-1px) * 16);
  font-family: var(--ja-font-family);
  line-height: 140%;
}

/* p-index-showroom__body
============================== */
.p-index-showroom__body {
  width: calc(100% - var(--inner-padding)* 2);
  max-width: 760px;
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-index-showroom__body {
    max-width: 79.2%;
  }
}

.p-index-showroom__search {
  width: 100%;
  margin-block: 24px;
}

.p-index-showroom__button {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16px + var(--slope-1px) * 8);

  margin-block-start: calc(16px + var(--slope-1px) * 32);
  --key-color: var(--base-color);
}

@media screen and (max-width: 767px) {
  .p-index-showroom__button {
    grid-template-columns: 100%;
    max-width: 20.44444em;
    margin-inline: auto;
  }
}

/* p-index-car
============================== */
.p-index-car {
  position: relative;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(24px + var(--slope-1px) * 8);
  padding-block: calc(48px + var(--slope-1px) * 52);
}

@media screen and (max-width: 767px) {
  .p-index-car {
    grid-template-columns: 100%;
  }
}

.p-index-car::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100cqi;
  height: 100%;
  margin-inline: calc(50% - 50cqi);
  background: var(--light-color);
}

.p-index-car__bg {
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
}

@media screen and (max-width: 767px) {
  .p-index-car__bg {
    width: 200cqi;
    margin-inline: calc(10% - 100cqi);
  }
}

.p-index-car__bg img {
  width: 100%;
}

.p-index-car-block {
  display: grid;
  flex: 1 0 0;
  align-items: flex-start;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: calc(40px + var(--slope-1px) * 8);
  padding: calc(32px + var(--slope-1px) * 16) calc(32px + var(--slope-1px) * 16) calc(32px + var(--slope-1px) * 40) calc(32px + var(--slope-1px) * 16);
  border-radius: var(--frame-border-radius);
  background: var(--white);
  box-shadow: 0 0 14px 0 rgba(34, 34, 34, .12);
}

.p-index-car-block__image {
  margin-inline: auto;
  border-radius: var(--small-border-radius);
}

@media screen and (max-width: 767px) {
  .p-index-car-block__image {
    width: 100%;
  }
}

.p-index-car-block__head {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px) * 8);
  margin-block: var(--leading-trim);
}

.p-index-car-block-title {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px) * 8);
}

.p-index-car-block-title .--en {
  /* 22.4px */
  position: relative;
  margin-block: var(--leading-cap);
  padding-left: calc(var(--_dots-size) + 12px);
  color: var(--base-color);
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
  font-family: var(--en-font-family);
  line-height: 140%;

  --_dots-size:8px;
}

.p-index-car-block-title .--en::before {
  content: "";
  position: absolute;
  top: calc(.5lh - var(--_dots-size));
  left: 0;
  display: block;
  width: var(--_dots-size);
  height: var(--_dots-size);
  margin-block: auto;
  border-radius: 2px;
  background: var(--key-color);

  translate: 0 50%;
}

.p-index-car-block-title .--ja {
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(28px + var(--slope-1px) * 12);
  font-family: var(--ja-font-family);
  line-height: 1.4;
}

.p-index-car-block__lead {
  margin-block: var(--leading-trim);
  font-weight: 500;
}

.p-index-car-block__body {
  width: 100%;
}

.p-index-car-block__button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  justify-self: center;
  width: 100%;
}

/* p-index-usedcar-counter
============================== */
.p-index-usedcar-counter {
  display: flex;
  align-items: flex-end;
  gap: 16px 15px;
  width: 100%;
  max-width: fit-content;
  margin-inline: auto;

  margin-block-end: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
  margin-block-start: -2px;
}

@media screen and (max-width: 767px) {
  .p-index-usedcar-counter {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin-inline: auto;
  }
}

.p-index-usedcar-counter__title {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .p-index-usedcar-counter__title {
    text-align: left;
  }
}

.p-index-usedcar-counter__head {
  margin-block: var(--leading-trim);
  text-align: center;
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 1.3;
}

.p-index-usedcar-counter__body {
  margin-block: var(--leading-trim);
}

@media screen and (min-width: 768px) {
  .p-index-usedcar-counter__body {
    margin-inline: auto;
  }
}

.p-index-usedcar-counter__number {
  display: block;
  margin-block: var(--leading-trim);
}

.p-index-usedcar-counter__number em {
  display: inline-block;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 88px;
  font-family: var(--en-font-family);
  line-height: .7;
}

.p-index-usedcar-counter__number small {
  display: inline-block;
  font-weight: 500;
  font-size: calc(28px + var(--slope-1px) * 4);
}

/* p-index-maintenance
============================== */
.p-index-maintenance {
  position: relative;
  padding-block: calc(64px + var(--slope-1px) * 16) calc(64px + var(--slope-1px) * -8);
}

.p-index-maintenance-block {
  position: relative;
  overflow: hidden;
  max-width: var(--inner-width-px);
  margin-inline: auto;
  padding-block: 80px calc(80px + var(--slope-1px) * 48);
  border-radius: var(--frame-border-radius);
}

.p-index-maintenance-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--grade-deep), transparent 10%) 0%, color-mix(in srgb, var(--grade-light), transparent 10%) 100%), url("../img/index/index-maintenance.jpg") no-repeat center/cover;
  opacity: .9;
}

.p-index-maintenance-block__head {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(29px + var(--slope-1px) * 8);
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.p-index-maintenance-block-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.p-index-maintenance-block-title .--en {
  position: relative;
  z-index: -1;
  grid-column: 1 / 2;
  grid-row: 1/2;
  width: 100cqi;
  margin-block: var(--leading-cap);
  margin-inline: calc(50% - 50cqi);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: min(16cqi, calc(80px + var(--slope-1px) * 48));
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .1;
}

.p-index-maintenance-block-title h2.--ja {
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-style: normal;
  font-size: calc(32px + var(--slope-1px) * 16);
  font-family: var(--ja-font-family);
  line-height: 140%;
}

.p-index-maintenance-block__lead {
  margin-block: var(--leading-trim);
  color: var(--white);
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-size: calc(15px + var(--slope-1px) * 3);
  line-height: 175%;
  /* 31.5px */
}

.p-index-maintenance-block__body {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.p-index-maintenance-block__button {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16px + var(--slope-1px) * 8);

  margin-block-start: calc(40px + var(--slope-1px) * 24);
}

@media screen and (max-width: 767px) {
  .p-index-maintenance-block__button {
    grid-template-columns: 100%;
    max-width: 20.44444em;
    margin-inline: auto;
  }
}

/* p-index-blog
============================== */
.p-index-blog {
  position: relative;
  display: grid;
  grid-template-columns: calc( 33.33333% - 12px) calc(66.66667% + 12px);
  grid-template-areas: "head slide"
 "control slide";
  padding-block: 0 calc(70px + var(--slope-1px) * 48);
}

.p-index-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../img/bg-blog.jpg") no-repeat top center/cover;

  margin-block-start: 64px;
}

@media screen and (max-width: 767px) {
  .p-index-blog::before {
    margin-block-start: 200px;
  }
}

@media screen and (max-width: 767px) {
  .p-index-blog {
    grid-template-columns: 100%;
    grid-template-areas: "head"
 "slide"
 "control";
  }
}

.p-index-blog__head {
  grid-area: head;
  color: var(--white);

  margin-block-start: 112px;
}

@media screen and (max-width: 767px) {
  .p-index-blog__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-block-start: 0;
    margin-block-end: 16px;
  }
}

.p-index-blog-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.p-index-blog-title .--en {
  position: relative;
  z-index: -1;
  grid-column: 1 / 2;
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: left;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(80px + var(--slope-1px) * 48);
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .35;
}

@media screen and (max-width: 767px) {
  .p-index-blog-title .--en {
    color: var(--bg-color);
    opacity: 1;
  }
}

.p-index-blog-title h2.--ja {
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: left;
  font-weight: 700;
  font-style: normal;
  font-size: calc(32px + var(--slope-1px) * 16);
  font-family: var(--ja-font-family);
  line-height: 140%;
}

@media screen and (max-width: 767px) {
  .p-index-blog-title h2.--ja {
    color: var(--base-color);
  }
}

@media screen and (min-width: 768px) {
  .p-index-blog__more {
    color: var(--white);

    margin-block-start: 40px;
  }
}

@media screen and (max-width: 767px) {
  .p-index-blog__more {
    color: var(--base-color);
  }
}

#js-blog-slider-control {
  grid-area: control;
}

#js-blog-slider-control.c-slider-control {
  height: fit-content;

  margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  #js-blog-slider-control.c-slider-control {
    align-self: flex-end;
    justify-self: flex-start;

    margin-block-end: 24px;
  }
}

@media screen and (max-width: 767px) {
  #js-blog-slider-control.c-slider-control {
    align-self: center;
    justify-self: center;
  }
}

.p-index-blog__slider {
  grid-area: slide;
}

/* p-index-news
============================== */
.p-index-news {
  position: relative;

  padding-block-start: calc(48px + var(--slope-1px) * 52);
}

.p-index-news__head {
  margin-block-end: 32px;
}

.p-index-news__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;

  margin-block-start: calc(32px + var(--slope-1px) * -16);
}

/* ============================================================= *

lineup - rich

* ============================================================= */
.LINEUP-ROOT {
  --TPL-button-radius: var(--ovall-radius);
}

body[data-id="type"] .l-main-body,
body[data-id="detail"] .l-main-body {
  padding-block-start: 0;
}

body[data-id="type"] .l-main-head,
body[data-id="detail"] .l-main-head {
  padding-block: calc(20px + var(--slope-1px) * 10) calc(32px + var(--slope-1px) * 24);
  background: var(--bg-color);
  color: var(--base-color);
}

body[data-id="type"] .l-main-head::before,
body[data-id="detail"] .l-main-head::before {
  background: var(--bg-color);
}

body[data-id="type"] .l-main-head::after,
body[data-id="detail"] .l-main-head::after {
  content: none;
}

body[data-id="type"] .l-main-head .c-breadcrumbs,
body[data-id="detail"] .l-main-head .c-breadcrumbs {
  color: var(--base-color);
}

.l-wrapper .LINEUP-DETAIL-contents {
  padding-block-start: 0;
}

body[data-id="type"] .l-main-head {
  --bg-color: transparent;
}

/* ============================================================= *

detail

* ============================================================= */
/* ============================================================= *

Demo Car

* ============================================================= */
.DEMOCAR-ROOT {
  --TPL-button-radius: var(--ovall-radius);
}

/* ============================================================= *

Usedcar

* ============================================================= */
.p-usedcar-form {
  position: relative;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  grid-template-areas: "img main .";
  gap: 0 24px;
  margin-bottom: calc(24px + var(--slope-1px) * 16);
  padding: calc(32px + var(--slope-1px) * 16) calc(24px + var(--slope-1px) * 8) calc(20px + var(--slope-1px) * 4);
  border-radius: var(--frame-border-radius);
  background: var(--Root---key-color, #a0e9f4);
}

@media screen and (max-width: 767px) {
  .p-usedcar-form {
    grid-template-columns: 100%;
    grid-template-areas: "main"
 "img";
  }
}

.p-usedcar-form__inner {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 100%;
  grid-area: main;
  margin-inline: auto;
  padding-bottom: calc(20px + var(--slope-1px) * 4);
  text-align: center;

  place-content: center;
}

.p-usedcar-form__head {
  position: relative;
  z-index: 0;
}

.p-usedcar-form__en {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  display: block;
  grid-column: 1/3;
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
  margin-bottom: calc( var(--leading-trim) - .275em);
  color: var(--Root---key-light-color, #d2f7fd);
  letter-spacing: .02em;
  font-weight: 700;
  font-size: calc(40px + var(--slope-1px) * 30);
  font-family: var(--en-font-family);

  margin-block-start: var(--leading-trim);
}

.p-usedcar-form__title {
  position: relative;
  z-index: 1;
  display: block;
  margin-block: calc(var(--leading-trim) + calc(20px + var(--slope-1px) * 16)) calc(var(--leading-trim) + calc(26px + var(--slope-1px) * 8));
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: calc(17px + var(--slope-1px) * 9);
  font-feature-settings: 'halt' on;
  line-height: 130%;
}

.p-usedcar-form__button .c-button {
  max-height: 52px;
  margin-inline: auto;
}

.p-usedcar-form__image {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  grid-area: img;
}

@media screen and (max-width: 767px) {
  .p-usedcar-form__image {
    position: relative;
    right: auto;
    left: auto;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .p-usedcar-form__image img {
    width: 90px;
  }
}

.p-usedcar-online-banner {
  display: block;
  overflow: hidden;
  margin-bottom: calc(72px + var(--slope-1px) * 40);
  border-radius: var(--frame-border-radius);
  transition: filter .2s;
}

@media (any-hover: hover) {
  .p-usedcar-online-banner:hover {
    filter: brightness(.7);
  }
}

/* COMMON-UCAR-search
============================================================ */
.l-wrapper .COMMON-UCAR-search {
  padding: calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 30);
  border-radius: var(--frame-border-radius);
  background: var(--light-color);
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-search {
    padding: calc(20px + var(--slope-1px) * 10) 20px;
  }
}

.l-wrapper .COMMON-UCAR-search__body {
  width: 100%;
}

.l-wrapper .COMMON-UCAR-search__foot {
  width: 100%;

  margin-block-start: calc(12px + var(--slope-1px) * -4);
}

@media screen and (min-width: 768px) {
  .l-wrapper .COMMON-UCAR-search-button-block__item:not(:first-child) {
    margin-left: 16px;
  }
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-search-button-block__item:not(:first-child) {
    margin-left: 0;

    margin-block-start: 8px;
  }
}

.l-wrapper .COMMON-UCAR-search-button {
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--key-color);
  color: var(--white);
}

.l-wrapper .COMMON-UCAR-search-button._bg-gray {
  border: 1px solid var(--base-color);
  background: transparent;
  color: var(--base-color);
}

.l-wrapper .COMMON-UCAR-search-block-more:hover {
  color: var(--gray);
}

.l-wrapper .COMMON-UCAR-search-block-more {
  border-top-color: var(--light-color);
  background: var(--light-color);
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 4);
}

.l-wrapper .COMMON-UCAR-search-block-more:after {
  background: var(--light-color);
}

.l-wrapper .COMMON-UCAR-search-item__head {
  font-size: calc(12px + var(--slope-1px) * 4);
}

.l-wrapper .COMMON-UCAR-search-item__body {
  padding-right: 0;
}

.l-wrapper .COMMON-UCAR-search-item__body select {
  height: calc(40px + var(--slope-1px) * 10);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: none;
}

.l-wrapper .COMMON-UCAR-search-item__checkbox {
  font-size: calc(12px + var(--slope-1px) * 2);
}

.l-wrapper .COMMON-UCAR-search-item__checkbox > li {
  padding-right: .5em;
}

/* COMMON-UCAR-list
============================================================ */
.l-wrapper .COMMON-UCAR-list {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list {
    left: auto;
    width: 100%;
    transform: unset;
  }
}

.l-wrapper .COMMON-UCAR-list__grid {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin: -10px;
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list__grid {
    width: calc(100% + 10px);
    margin: -5px;
  }
}

.l-wrapper .COMMON-UCAR-list__grid > * {
  width: calc(100%/3 - 20px);
  margin: 10px;
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list__grid > * {
    width: calc(100%/2 - 10px);
    margin: 5px;
  }
}

.l-wrapper .COMMON-UCAR-list__head {
  font-size: calc(15px + var(--slope-1px) * 1);
}

.l-wrapper .COMMON-UCAR-list-paging__current em {
  color: var(--point-color);
}

.l-wrapper .COMMON-UCAR-list-paging__index a.is-current {
  color: var(--point-color);
}

.l-wrapper .COMMON-UCAR-list-paging__index a:hover {
  background: var(--key-color);
  color: #fff;
}

.l-wrapper .COMMON-UCAR-list-card {
  padding: calc(12px + var(--slope-1px) * 8);
  border: 1px solid var(--border-color);
  border-radius: var(--base-border-radius);
  background: var(--white);
}

.l-wrapper .COMMON-UCAR-list-card__image a {
  border-radius: var(--small-border-radius);
}

.l-wrapper .COMMON-UCAR-list-card__image a:hover {
  border-radius: var(--base-border-radius);
}

.l-wrapper .COMMON-UCAR-list-card__head {
  padding-bottom: calc(16px + var(--slope-1px) * 4);
}

.l-wrapper .COMMON-UCAR-list-card__name {
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
}

.l-wrapper .COMMON-UCAR-list-card__type {
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 2);

  margin-block-start: calc(var(--leading-trim) + calc(12px + var(--slope-1px) * 8));
}

@media screen and (min-width: 768px) {
  .l-wrapper .COMMON-UCAR-list-card__detail dt,
  .l-wrapper .COMMON-UCAR-list-card__detail dd {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list-card__detail dt,
  .l-wrapper .COMMON-UCAR-list-card__detail dd {
    padding: .25em 0;
    font-size: 12px;
  }
}

.l-wrapper .COMMON-UCAR-list-card__button {
  width: 100%;

  margin-block-start: calc(12px + var(--slope-1px) * 8);
}

.l-wrapper .COMMON-UCAR-list-card__link {
  width: 100%;
  height: fit-content;
  padding-block: calc(var(--leading-trim) + calc(7.5px + var(--slope-1px) * 8));
  border: none;
  border-radius: var(--ovall-radius);
  background: var(--key-color);
  color: var(--white);
  font-size: calc(16px + var(--slope-1px) * 2);
  line-height: 1.15;
  transition: background .2s ease-out, color .2s ease-out;
}

.l-wrapper .COMMON-UCAR-list-card__compare span {
  border-radius: var(--ovall-radius);
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 4);
  line-height: 1.15;
}

.l-wrapper .COMMON-UCAR-list-card__link:hover {
  color: var(--white);
}

@media screen and (min-width: 768px) {
  .l-wrapper .COMMON-UCAR-list-card__shop {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list-card__shop {
    font-size: 12px;
  }
}

.l-wrapper .COMMON-UCAR-list-card__shop a {
  color: var(--key-color);
  text-decoration: underline;
}

.l-wrapper .COMMON-UCAR-list-card__detail dl[data-type="total"] {
  color: var(--point-color);
}

.l-wrapper .COMMON-UCAR-list__foot {
  width: 100%;
  margin: 4rem 0 0;
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list__foot {
    justify-content: flex-end;
    gap: 30px;
  }
}

@media screen and (max-width: 767px) {
  .l-wrapper .COMMON-UCAR-list__foot .COMMON-UCAR-list-paging {
    margin-bottom: 0;
  }
}

.l-wrapper .COMMON-UCAR-list-paging__nav a:hover {
  background: var(--key-color);
  color: var(--white);
}

.l-wrapper .COMMON-UCAR-list-compare a {
  border-radius: var(--ovall-radius);
}

.l-page[data-category="usedcar"] {
  --en-used-font-family: var(--en-font-family);
}

.l-page[data-category="usedcar"] .p-usedcar {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-list-paging__index a {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-list-card__head {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-list-card__image a:before {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-detail-gallery__index {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-list-card__detail {
  font-family: var(--en-used-font-family);
}

.l-page[data-category="usedcar"] .COMMON-UCAR-detail-shop__tel {
  font-family: var(--en-used-font-family);
}

/* ============================================================= *

usedcar-detail

* ============================================================= */
@media print {
  body[data-id="usedcar-detail"] .l-main-body {
    padding-block-start: 1em;
  }
  body[data-id="usedcar-detail"] .l-main-body::before {
    border-radius: 0;
  }
  body[data-id="usedcar-detail"] .l-main-head {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  body[data-id="usedcar-detail"] .l-footer {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  body[data-id="usedcar-detail"] .l-sticky {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  body[data-id="usedcar-detail"] .COMMON-UCAR-detail-section.anotherList {
    display: none;
    visibility: hidden;
    opacity: 0;
  }
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail__pageback a {
  color: currentColor;
  transition: all .2s ease-out;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail__pageback a:hover {
  text-decoration-color: transparent;
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-shop__tel:before {
  background: var(--key-color);
  mask: url(/common-usedcar/v3/img/icon-tel.png) 50% 50%/contain no-repeat;
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-shop__name a {
  color: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-shop__tel a {
  color: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-price__item._total {
  border-top-color: var(--key-color);
  color: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-contact {
  background: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-contact__head {
  background: color-mix(in srgb, var(--key-color) 100%, #000 20%);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-condition {
  transition: opacity .1s ease-out;
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-print a {
  border-radius: var(--ovall-radius);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-section__head {
  margin-bottom: calc(var(--leading-trim) + 30px);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-gallery__arrow > button:before {
  border-left-color: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-gallery__arrow > button:first-child:before {
  border-right-color: var(--key-color);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-detail-gallery__item a.is-current:before {
  border-color: var(--key-color);
  background: color-mix(in srgb, var(--key-color) 40%, transparent);
}

body[data-id="usedcar-detail"] .COMMON-UCAR-list-compare {
  margin-block-start: 30px;
}

/* ============================================================= *

Showroom

* ============================================================= */
/* p-showroom-map
============================================================== */
.p-showroom-map {
  position: relative;

  margin-block-start: calc(32px + var(--slope-1px) * -2);
}

.p-showroom-map #js-gmap {
  overflow: hidden;
  width: 100%;
  height: calc(450px + var(--slope-1px) * 200);
  border-radius: var(--frame-border-radius);
  background: var(--bg-color);
}

@media screen and (max-width: 767px) {
  .p-showroom-map #js-gmap {
    height: auto;
    aspect-ratio: 1;
  }
}

#js-gmap .gmapOpen_shopName {
  font-weight: 700;

  padding-block-end: .5em;
}

#js-gmap .gmapOpen_shopLink {
  display: block;
  text-decoration: underline;
  transition: text-decoration-color .1s ease;

  margin-block-start: .5em;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

#js-gmap .gmapOpen_shopLink:hover {
  text-decoration-color: transparent;
}

/* p-showroom-facility
============================================================= */
.p-showroom-facility {
  display: block;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(33px + var(--slope-1px) * -3);
  padding: calc(20px + var(--slope-1px) * 15) calc(15px + var(--slope-1px) * 15) calc(20px + var(--slope-1px) * 25);
  border: 1px solid var(--border-color);
  border-radius: var(--frame-border-radius);

  margin-block-end: 30px;
}

.p-showroom-facility__head {
  display: block;
  width: fit-content;
  margin-inline: auto;
  border-bottom: 3px solid var(--border-color);
  text-align: center;
  font-weight: 500;
  /* 28px */
  font-size: calc(24px + var(--slope-1px) * 4);
  line-height: 100%;

  margin-block-start: var(--leading-trim);
  padding-block-end: calc(var(--leading-cap) + 10px);
}

.p-showroom-facility__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px 1px;
  width: 100%;
}

@media screen and (max-width: 1080px) {
  .p-showroom-facility__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .p-showroom-facility__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-showroom-facility__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
}

.p-showroom-facility__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 5px;
  background: var(--light-color);
}

.p-showroom-facility__icon :is(svg, img) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-showroom-facility__icon svg path {
  fill: var(--key-color);
}

.p-showroom-facility__text {
  /* 20px */
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 2);
  line-height: 125%;
}

/* p-showroom-repair
============================================================= */
.p-showroom-repair {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 40px;
  padding: calc(16px + var(--slope-1px) * 8) calc(16px + var(--slope-1px) * 8) calc(22px + var(--slope-1px) * 2);
  border-radius: var(--frame-border-radius);
  box-shadow: var(--shadow);
}

@media screen and (max-width: 767px) {
  .p-showroom-repair {
    grid-template-columns: 100%;
  }
}

.p-showroom-repair__contents {
  display: grid;
  grid-template-columns: 100%;
  margin-block: auto;
}

@media screen and (max-width: 767px) {
  .p-showroom-repair__contents {
    order: 2;
  }
}

.p-showroom-repair__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.p-showroom-repair__zip {
  display: block;
  margin-block: var(--leading-cap) calc(var(--leading-cap) + 20px);
  font-size: calc(16px + var(--slope-1px) * 2);
  font-family: var(--en-font-family);
}

.p-showroom-repair__address {
  display: block;
  margin-block: var(--leading-cap) calc(var(--leading-cap) + 20px);
  font-size: calc(16px + var(--slope-1px) * 2);
  font-family: var(--en-font-family);
}

.p-showroom-repair__tel {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-block: var(--leading-cap) var(--leading-trim);
  color: var(--key-color);
  font-weight: 500;
  font-size: calc(24px + var(--slope-1px) * 4);
  font-family: var(--en-font-family);
}

.p-showroom-repair__tel em {
  font-weight: 500;
  font-size: 28px;

  padding-inline-end: .25em;
}

.p-showroom-repair__text {
  /* 27px */
  display: block;
  font-size: calc(16px + var(--slope-1px) * 2);
  line-height: 150%;

  margin-block-start: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * -10));
}

@media screen and (max-width: 767px) {
  .p-showroom-repair__text {
    margin-block-end: var(--leading-trim);
  }
}

.p-showroom-repair__image {
  overflow: hidden;
  height: 100%;
  border-radius: var(--small-border-radius);
}

@media screen and (max-width: 767px) {
  .p-showroom-repair__image {
    order: 1;
  }
}

.p-showroom-repair__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-showroom-repair-title {
  position: relative;
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px) * 4);

  padding-block-end: calc(var(--leading-trim) + 20px);
  margin-block-end: 20px;
}

@media screen and (max-width: 767px) {
  .p-showroom-repair-title {
    margin-block-start: var(--leading-trim);
  }
}

/* ============================================================= *

sr

* ============================================================= */
/* p-sr-header
============================== */
.p-sr-header {
  display: grid;
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .p-sr-header {
    grid-template-columns: 50.87719% 44.73684%;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-header {
    grid-template-columns: 100%;
    gap: 32px;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-header__slide {
    order: 2;
  }
}

.p-sr-header__info {
  display: grid;
  justify-content: center;
  grid-template-columns: 100%;
  gap: 16px;
  padding-block: calc(24px + var(--slope-1px) * 11) calc(20px + var(--slope-1px) * 10);
  padding-inline: 20px;
  border-radius: var(--frame-border-radius);
  background: var(--white);
  box-shadow: var(--shadow);
  font-family: var(--en-font-family);

  margin-block-end: 24px;
}

@media screen and (max-width: 1080px) {
  .p-sr-header__info {
    grid-template-columns: 100%;
  }
}

.p-sr-header-info__head {
  width: 100%;
  max-width: 396px;
  margin-inline: auto;
  border-bottom: 1px solid var(--gray);

  padding-block-end: calc(17px + var(--slope-1px) * 5);
}

.p-sr-header-info__body {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.p-sr-close__day .c-open-information__text {
  /* 40px */
  margin-block: var(--leading-cap);
  color: #000;
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 200%;
}

.p-sr-close__day .c-open-information__text > em {
  color: var(--key-color);
  font-weight: 700;
  font-size: calc(28px + var(--slope-1px) * 4);
}

.p-sr-header__tel {
  display: flex;
  justify-content: flex-start;
  justify-content: center;
  align-items: center;

  margin-block-end: calc(10px + var(--slope-1px) * 4);
}

@media screen and (max-width: 767px) {
  .p-sr-header__tel {
    display: block;
  }
}

.p-sr-header__tel .c-button {
  width: 100%;
  max-width: 100%;
}

.p-sr-header-tel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  color: var(--key-color);
  font-weight: 600;
  font-size: calc(36px + var(--slope-1px) * 4);
  line-height: 1;
}

.p-sr-header-tel svg path {
  fill: none;

  stroke: var(--key-color);
}

.p-sr-header__close {
  display: block;
}

.p-sr-close__list {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: auto 1fr;
  gap: 10px 5px;

  margin-block-end: calc(21px + var(--slope-1px) * -6);
}

@media screen and (max-width: 767px) {
  .p-sr-close__list {
    align-items: baseline;
  }
}

.p-sr-close__list dt {
  position: relative;
  display: block;
  min-width: 80px;
  margin-block: var(--leading-trim);
  padding: 5px;
  border-radius: 3px;
  background: var(--light-color);
  text-align: center;
  letter-spacing: 0;
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 2);
  font-feature-settings: normal;
  font-feature-settings: "palt";
  line-height: 1;
  line-height: 125%;
}

@media screen and (max-width: 767px) {
  .p-sr-close__list dt {
    min-width: 70px;
    letter-spacing: -.02em;
  }
}

.p-sr-close__list dd {
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: -.03em;
  font-weight: 500;
  font-size: calc(14px + var(--slope-1px) * 2);
  font-feature-settings: "palt";
  line-height: 1.5;
}

.p-sr-header__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* p-sr-slider
============================== */
.p-sr-slider {
  width: 100%;
}

.p-sr-slider .c-slider-progress {
  --_bar-bg-color: var(--bg-color);
}

.p-sr-slider .c-slider-control {
  gap: 6px;
}

.p-sr-slider__list {
  position: relative;
  overflow: hidden;
  border-radius: calc(10px + var(--slope-1px) * 10);

  margin-block-end: 16px;
}

.p-sr-slider__item {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  transition: opacity .4s, scale .4s;
}

.p-sr-slider__item.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* p-sr-grid
============================== */
.p-sr-grid {
  display: grid;
  align-items: flex-start;
  gap: 24px 40px;

  margin-block-start: calc(40px + var(--slope-1px) * 10);
}

@media screen and (min-width: 768px) {
  .p-sr-grid {
    grid-template-columns: 50.87719% 44.73684%;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-grid {
    grid-template-rows: auto;
    grid-template-columns: 100%;
  }
}

/* p-sr-button-grid
============================== */
.p-sr-button-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: button;
  gap: calc(10px + var(--slope-1px) * 3);

  margin-block-end: 40px;
}

@media screen and (max-width: 767px) {
  .p-sr-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* p-sr-profile
============================================================== */
.p-sr-profile {
  display: grid;
  align-self: self-start;
  grid-template-columns: max-content 1fr;
  gap: var(--gap) 0;
  width: 100%;
  border-collapse: separate;
  font-size: calc(15px + var(--slope-1px) * 1);

  --gap: calc(var(--leading-trim) + 24px);
  padding-block-start: var(--gap);
}

.p-sr-profile__head {
  display: flex;
  align-items: flex-start;
  padding-right: calc(24px + var(--slope-1px) * 8);
  padding-left: 16px;
  border-bottom: 1px solid var(--border-color);

  padding-block-end: var(--gap);
}

.p-sr-profile__body {
  display: inline;
  border-bottom: 1px solid var(--border-color);

  padding-block-end: var(--gap);
}

.p-sr-profile__body span {
  display: inline-block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.p-sr-profile__body em {
  color: var(--key-color);
  font-weight: 700;
}

.p-sr-profile__body a[href^="tel:"] {
  color: var(--key-color);
}

.p-sr-profile__body small {
  font-size: calc(13px + var(--slope-1px) * 1);
}

@media screen and (max-width: 767px) {
  .p-sr-profile__body small {
    display: block;
  }
}

/* p-sr-logo-nsx
============================================================= */
.p-sr-logo-nsx {
  margin-block: var(--leading-trim) var(--leading-cap);
}

.p-sr-logo-nsx a {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all .3s ease-out;
}

.p-sr-logo-nsx a > img {
  width: 15.5em;
}

.p-sr-logo-nsx a:hover {
  opacity: .7;
}

/* p-sr-orange
============================================================= */
.p-sr-orange {
  transition: opacity .3s var(--animation);
}

.p-sr-orange img {
  max-height: 22px;
}

@media (any-hover: hover) {
  .p-sr-orange {
    opacity: .7;
  }
}

/* p-sr-facility
============================================================= */
.p-sr-facility {
  display: grid;
  grid-template-columns: 100%;
  gap: 24px;
  width: 100%;
  padding-block: calc(24px + var(--slope-1px) * 8);
  padding-inline: calc(20px + var(--slope-1px) * 12);
  border-radius: calc(10px + var(--slope-1px) * 10);
}

@media screen and (max-width: 560px) {
  .p-sr-facility {
    flex-direction: column;
  }
}

.p-sr-facility__list {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
}

@media screen and (max-width: 767px) {
  .p-sr-facility__list {
    grid-template-columns: 100%;
    gap: 5px;
  }
}

.p-sr-facility__item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: calc(15px + var(--slope-1px) * 1);
}

.p-sr-facility__item > i {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
}

.p-sr-facility__item > i img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-sr-facility__item > i svg path {
  fill: var(--key-color);
}

.p-sr-facility__item span {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* p-sr-calendar
============================== */
.p-sr-calendar {
  height: 100%;
  padding: 30px calc(20px + var(--slope-1px) * 10);
  border-radius: var(--frame-border-radius);
  background: var(--bg-color);

  place-content: center;
}

/* p-sr-blog
============================== */
.p-sr-blog {
  position: relative;
  display: grid;
  grid-template-columns: calc( 33.33333% - 12px) calc(66.66667% + 12px);
  grid-template-areas: "head slide"
 "control slide";
  padding-block: 0 calc(70px + var(--slope-1px) * 48);

  margin-block-start: calc(64px + var(--slope-1px) * -18);
}

.p-sr-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../img/bg-blog.jpg") no-repeat top center/cover;

  margin-block-start: 64px;
}

@media screen and (max-width: 767px) {
  .p-sr-blog::before {
    margin-block-start: 200px;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-blog {
    grid-template-columns: 100%;
    grid-template-areas: "head"
 "slide"
 "control";
  }
}

.p-sr-blog__head {
  grid-area: head;
  color: var(--white);

  margin-block-start: calc(145px + 24px);
}

@media screen and (max-width: 767px) {
  .p-sr-blog__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    margin-block-start: 0;
    margin-block-end: 16px;
  }
}

.p-sr-blog-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.p-sr-blog-title .--en {
  position: relative;
  z-index: -1;
  grid-column: 1 / 2;
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: left;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(80px + var(--slope-1px) * 48);
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .35;
}

@media screen and (max-width: 767px) {
  .p-sr-blog-title .--en {
    color: var(--bg-color);
    opacity: 1;
  }
}

.p-sr-blog-title h2.--ja {
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: left;
  font-weight: 700;
  font-style: normal;
  font-size: calc(32px + var(--slope-1px) * 16);
  font-family: var(--ja-font-family);
  line-height: 140%;
}

@media screen and (max-width: 767px) {
  .p-sr-blog-title h2.--ja {
    color: var(--base-color);
  }
}

@media screen and (min-width: 768px) {
  .p-sr-blog__more {
    color: var(--white);

    margin-block-start: 40px;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-blog__more {
    color: var(--base-color);
  }
}

#js-sr-blog-slider-control {
  grid-area: control;
}

#js-sr-blog-slider-control.c-slider-control {
  height: fit-content;

  margin-block-start: 0;
}

@media screen and (min-width: 768px) {
  #js-sr-blog-slider-control.c-slider-control {
    align-self: flex-end;
    justify-self: flex-start;

    margin-block-end: 24px;
  }
}

@media screen and (max-width: 767px) {
  #js-sr-blog-slider-control.c-slider-control {
    align-self: center;
    justify-self: center;
  }
}

.p-sr-blog__slider {
  grid-area: slide;
}

/* p-sr-topics
=============================== */
.p-sr-topics {
  position: relative;
  margin-inline: auto;

  margin-block-start: calc(56px + var(--slope-1px) * 24);
  margin-block-end: calc(64px + var(--slope-1px) * -34);
}

.p-sr-topics__head {
  margin-block-end: calc(24px + var(--slope-1px) * 16);
}

/* p-sr-topics-slider
============================== */
.p-sr-topics-slider-control {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-inline: auto;

  margin-block-start: calc(12px + var(--slope-1px) * 12);
}

/* p-sr-news
============================== */
.p-sr-news {
  position: relative;
}

.p-sr-news__head {
  margin-block-end: 32px;
}

.p-sr-news__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;

  margin-block-start: calc(32px + var(--slope-1px) * -16);
}

/* p-sr-map
============================================================== */
.p-sr-map {
  position: relative;

  margin-block-start: calc(32px + var(--slope-1px) * -2);
}

.p-sr-map #js-gmap {
  overflow: hidden;
  width: 100%;
  height: calc(343px + var(--slope-1px) * 107);
  border-radius: var(--frame-border-radius);
  background: var(--bg-color);
}

@media screen and (max-width: 767px) {
  .p-sr-map #js-gmap {
    height: auto;
    aspect-ratio: 1;
  }
}

.p-sr-access {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(17px + var(--slope-1px) * -7) 20px;

  margin-block-start: calc(15px + var(--slope-1px) * 15);
}

.p-sr-access__item {
  display: flex;
  align-items: flex-start;
  gap: 10px 20px;
  justify-items: flex-start;
}

@media screen and (max-width: 767px) {
  .p-sr-access__item {
    flex-direction: column;
  }
}

.p-sr-access__head {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1lh;
  min-width: 150px;
  border-radius: 5px;
  background: var(--key-color);
  color: var(--white);
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
}

@media screen and (max-width: 767px) {
  .p-sr-access__head {
    width: 1lh;
  }
}

.p-sr-access__body {
  display: flex;
  justify-content: flex-start;
}

@media screen and (max-width: 767px) {
  .p-sr-access__body {
    margin-block: var(--leading-trim);
  }
}

/* p-sr-contact
============================================================== */
.p-sr-contact {
  position: relative;
  width: 100cqi;
  margin-block: calc(64px + var(--slope-1px) * 46) calc(64px + var(--slope-1px) * 26);
  margin-inline: calc(50% - 50cqi);
  padding-block: calc(48px + var(--slope-1px) * 52) calc(80px + var(--slope-1px) * 48);
  background: linear-gradient(180deg, color-mix(in srgb, var(--grade-deep), transparent 10%) 0%, color-mix(in srgb, var(--grade-light), transparent 10%) 100%), url("../img/bg-showroom.jpg") no-repeat center/cover;
}

/* p-sr-contact__head
============================== */
.p-sr-contact__head {
  width: calc(100% - var(--inner-padding)* 2);
  max-width: var(--inner-width-px);
  margin-inline: auto;

  margin-block-end: calc(32px + var(--slope-1px) * 16);
}

@media screen and (max-width: 767px) {
  .p-sr-contact__head {
    max-width: 100%;
  }
}

.p-sr-contact-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
}

.p-sr-contact-title .--en {
  position: relative;
  z-index: 0;
  grid-column: 1 / 2;
  grid-row: 1/2;
  width: 100cqi;
  margin-block: var(--leading-cap);
  margin-inline: calc(50% - 50cqi);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(80px + var(--slope-1px) * 48);
  line-height: 100%;
  /* 128px */
  opacity: .1;
}

.p-sr-contact-title h2.--ja {
  z-index: 1;
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-style: normal;
  font-size: calc(32px + var(--slope-1px) * 16);
  line-height: 140%;
}

.p-sr-contact__text {
  display: block;
  margin-block: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 24)) calc(var(--leading-trim) + calc(41px + var(--slope-1px) * 15));
  text-align: center;
}

.p-sr-contact__body {
  width: calc(100% - var(--inner-padding)* 2);
  max-width: var(--inner-width-px);
  margin-inline: auto;
  color: var(--white);
}

.p-sr-contact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(11px + var(--slope-1px) * 1);
  margin-inline: auto;

  margin-block-start: calc(24px + var(--slope-1px) * 24);
}

@media screen and (max-width: 767px) {
  .p-sr-contact-grid .p-sr-contact-grid__item:not(:first-child):has(.c-reservation-wrap) {
    margin-block-start: 19px;
  }
}

.p-sr-contact-grid ._x2 {
  grid-column: span 2;
}

@media screen and (max-width: 767px) {
  .p-sr-contact-grid ._x2\:tablet {
    grid-column: span 2;
  }
}

@media screen and (max-width: 767px) {
  .p-sr-contact-grid ._x1\:tablet {
    grid-column: span 4;
  }
}

.p-sr-contact-grid._primary {
  gap: 10px 16px;
}

@media screen and (max-width: 767px) {
  .p-sr-contact-grid._primary {
    gap: 10px 16px;
  }
}

.p-sr-contact-grid + .p-sr-contact-grid {
  margin-block-start: calc(30px + var(--slope-1px) * -10);
}

/* ============================================================= *

Blog

* ============================================================= */
/* p-blog-control
============================== */
.p-blog-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: 100%;
  margin-block: 0 calc(32px + var(--slope-1px) * 16);
  margin-inline: auto;
}

.p-blog-control > p {
  margin-block: var(--leading-trim);
}

.p-blog-control__head {
  flex-shrink: 0;
}

.p-blog-control__body {
  flex-grow: 1;
}

.p-blog-control__body select {
  width: 100%;
  max-width: 760px;
  padding: 1.25em calc(40px + var(--slope-1px) * 16) 1.25em 1.25em;
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--icon-angle-down) right calc(12px + var(--slope-1px) * 8) top 50%/1em 1em no-repeat var(--white);
  color: var(--base-color);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

/* p-blog-pager
============================== */
.p-blog-pager {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  border-top: 1px solid var(--border-color);

  margin-block-start: calc(15px + var(--slope-1px) * 15);
  padding-block-start: calc(20px + var(--slope-1px) * 10);
}

.p-blog-pager__nav {
  display: flex;
  display: inline-flex;
  align-items: center;
  align-items: center;
  gap: 5px;
  margin-block: var(--leading-trim);
  text-decoration: none;
  text-decoration: underline;
  transition: color .2s;
  transition: text-decoration-color .1s ease;

  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.p-blog-pager__nav:hover {
  text-decoration-color: currentColor;
}

.p-blog-pager__nav:after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(15px + var(--slope-1px) * 1);
  height: calc(15px + var(--slope-1px) * 1);
  background: currentColor;
  mask: var(--icon-angle) 50% 50%/contain no-repeat;
}

.p-blog-pager__nav._prev {
  margin-right: auto;
}

.p-blog-pager__nav._prev:after {
  order: -1;
}

.p-blog-pager__nav._next {
  margin-left: auto;
}

.p-blog-pager__nav._next:after {
  transform: rotate(180deg);
}

/* p-blog-button-grid
============================== */
.p-blog-button-grid {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 10px;
  max-width: 890px;
  margin-block: calc(20px + var(--slope-1px) * 20) 0;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .p-blog-button-grid._x1 {
    grid-template-columns: min(100%, 290px);
  }
  .p-blog-button-grid._x2 {
    grid-template-columns: min(100%, 320px) min(100%, 320px);
  }
  .p-blog-button-grid._x3 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  }
}

@media screen and (max-width: 767px) {
  .p-blog-button-grid {
    grid-template-columns: 100%;
    min-width: 290px;
    max-width: calc(290 / 375 * 100cqi);
    margin-inline: auto;

    margin-block-start: 20px;
  }
}

/* ============================================================= *

Maintenance

* ============================================================= */
.p-maintenance-merit {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .p-maintenance-merit {
    text-align: left;
  }
}

.p-maintenance-merit-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(10px + var(--slope-1px) * 20);

  margin-block-end: calc(33px + var(--slope-1px) * -8);
}

.p-maintenance-merit-grid__item {
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--light-color);
}

@media screen and (max-width: 767px) {
  .p-maintenance-merit-grid__item {
    width: calc(50% - (calc(10px + var(--slope-1px) * 20) / 2));
  }
}

.p-maintenance-merit-grid__item {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: auto calc(30px + var(--slope-1px) * 40) 1fr;
  grid-template-columns: 100%;
}

.p-maintenance-merit-grid__number {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
  width: calc(33px + var(--slope-1px) * 27);
  height: calc(33px + var(--slope-1px) * 27);
  aspect-ratio: 1;
  margin-block: calc(14px + var(--slope-1px) * 12) calc(3px + var(--slope-1px) * 8);
  border-radius: 50%;
  background: var(--white);
  color: var(--base-color);
  text-align: center;
  font-weight: 400;
  font-style: normal;
  font-size: calc(18px + var(--slope-1px) * 14);
  font-family: var(--en-font-family);
  line-height: 100%;
}

.p-maintenance-merit-grid__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  width: 100%;
  height: calc(30px + var(--slope-1px) * 40);
}

.p-maintenance-merit-grid__icon svg path {
  fill: var(--key-color);
}

.p-maintenance-merit-grid__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-maintenance-merit-grid__text {
  align-self: flex-start;
  height: fit-content;
  text-align: center;
  letter-spacing: -.55px;
  font-size: calc(11px + var(--slope-1px) * 5);
  line-height: 1.5;

  margin-block-start: calc(var(--leading-cap) + calc(13px + var(--slope-1px) * 5));
}

/* p-maintenance-schedule base
============================== */
.p-maintenance-schedule-container {
  width: 100%;

  container-type: inline-size;
  margin-block-start: calc(var(--leading-trim) + calc(32px + var(--slope-1px) * 16));
  margin-block-end: calc(var(--leading-trim) + calc(40px + var(--slope-1px) * 32));
}

/* p-maintenance-schedule
============================== */
.p-maintenance-schedule {
  display: grid;
  grid-template-rows: 1fr auto auto;
  grid-auto-flow: column;
  gap: 0 calc(100cqi / 1140 * 20);
  overflow: hidden;
  width: 100%;
  padding-right: calc(100cqi / 1140 * 18);

  padding-block-start: 15px;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule {
    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 23px auto;
    grid-template-columns: 19.13043% 1fr 23.18841%;
    grid-auto-flow: row;
    gap: 0;
    padding-right: 0;
  }
}

.p-maintenance-schedule__main {
  display: flex;
  flex-direction: column;
  align-items: center;

  --_bg-color: #fff;
  --_text-color:var(--gray);
  --_border-color: var(--gray);
}

.p-maintenance-schedule__main._12month {
  --_bg-color: var(--base-color);
  --_text-color: var(--white);
  --_border-color: var(--base-color);
}

.p-maintenance-schedule__main._safety {
  --_bg-color: var(--gray);
  --_text-color: var(--white);
  --_border-color: var(--gray);
}

.p-maintenance-schedule__main._inspection {
  --_bg-color: var(--key-color);
  --_text-color: var(--white);
  --_border-color: var(--key-color);
}

.p-maintenance-schedule__sub {
  position: relative;
  z-index: 1;
}

.p-maintenance-schedule__sub:nth-child(2) {
  z-index: 2;
}

.p-maintenance-schedule__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: calc(100cqi / 1140 * 70);

  margin-block-end: calc(100cqi / 1140 * 40);
}

@media screen and (min-width: 768px) {
  ._first .p-maintenance-schedule__head {
    margin-block-start: calc(-1 * calc(100cqi / 1140 * 15));
  }
}

.p-maintenance-schedule__head:not(:last-child) {
  flex-grow: 1;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__head {
    width: 66px;
    height: 100%;
    min-height: 0;

    margin-block-end: 0;
  }
}

.p-maintenance-schedule__head:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: 150%;
  height: calc(100cqi / 1140 * 30);
  margin: auto 0;
  background: var(--border-color);
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__head:after {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 24px;
    height: 100%;
    min-height: 66px;
    margin: 0 auto;
  }
}

.p-maintenance-schedule__main:not(._first) .p-maintenance-schedule__head:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 2px;
  height: calc(2px + calc(100cqi / 1140 * 72));
  margin: 0 auto;
  background: var(--_border-color);
  transform: translateY(50%);
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__main:not(._first) .p-maintenance-schedule__head:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 100%;
    height: 2px;
    margin: auto 0 auto auto;
    transform: translateX(50%) translateY(0);
  }
}

.p-maintenance-schedule__main:nth-last-child(3) .p-maintenance-schedule__head:after {
  width: calc(50% + calc(100cqi / 1140 * 18));
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__main:nth-last-child(3) .p-maintenance-schedule__head:after {
    grid-row: 12/13;
    width: 24px;
    height: calc(33px + 24px);
    min-height: auto;
  }
}

.p-maintenance-schedule__terms {
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100cqi / 1140 * 16);
  aspect-ratio: 1 / 1;
  margin: auto;
  border-radius: 50%;
  background: var(--gray);
  font-weight: 500;
  font-size: calc(100cqi / 1140 * 20);
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__terms {
    flex-direction: column;
    width: 16px;
    font-size: 13px;
  }
}

.p-maintenance-schedule__terms em {
  display: block;
  font-size: calc(100cqi / 1140 * 40);
  font-family: var(--en-font-family);
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__terms em {
    display: block;
    font-size: 22px;
  }
}

.p-maintenance-schedule__terms > em {
  position: relative;
}

._first .p-maintenance-schedule__terms {
  position: relative;
  width: calc(100cqi / 1140 * 100);
  border: 5px solid var(--border-color);
  background: var(--white);
  color: var(--base-color);
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  ._first .p-maintenance-schedule__terms {
    width: 90.90909%;
    border-width: 3px;
    font-size: 13px;
  }
  ._first .p-maintenance-schedule__terms i {
    width: 28.8px;
    height: 28.8px;
  }
  ._first .p-maintenance-schedule__terms span {
    display: block;
    margin-block: var(--leading-trim);
  }
}

:is(._12month) .p-maintenance-schedule__terms {
  position: relative;
  z-index: 4;
  width: calc(100cqi / 1140 * 70);
  border: var(--base-color) 2px solid;
  background: var(--white);
  color: var(--base-color);
}

@media screen and (max-width: 767px) {
  :is(._12month) .p-maintenance-schedule__terms {
    width: 78.78788%;
  }
}

:is(._inspection) .p-maintenance-schedule__terms {
  width: calc(100cqi / 1140 * 70);
  border: var(--key-color) 2px solid;
  background: var(--white);
  color: var(--key-color);
}

@media screen and (max-width: 767px) {
  :is(._inspection) .p-maintenance-schedule__terms {
    width: 100%;
  }
}

.p-maintenance-schedule__terms svg {
  width: auto;
}

.p-maintenance-schedule__terms svg path {
  fill: var(--key-color);
}

.p-maintenance-schedule__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100cqi / 1140 * 60);
  height: calc(100cqi / 1140 * 252);
  padding: calc(100cqi / 1140 * 44) 0 calc(100cqi / 1140 * 80);
  border: 2px solid var(--_border-color);
  border-radius: var(--ovall-radius);
  background: var(--_bg-color);
  color: var(--_text-color);
  text-decoration: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: calc(100cqi / 1140 * 22);
  font-family: var(--ja-font-family);
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__body {
    z-index: 2;
    flex-direction: row;
    width: 100%;
    height: 52px;
    padding: 0 48px;
    font-size: 14px;
  }
}

.p-maintenance-schedule__body[href] {
  transition: filter .3s var(--animation);
}

.p-maintenance-schedule__body[href]:hover {
  filter: brightness(.92);
}

.p-maintenance-schedule__body[href]:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(100cqi / 1140 * 14);
  left: 0;
  display: block;
  width: calc(100cqi / 1140 * 32);
  aspect-ratio: 1/1;
  margin: 0 auto;
  background: currentColor;
  mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__body[href]:after {
    top: 0;
    right: 14px;
    bottom: 0;
    left: auto;
    width: 24px;
    margin: auto 0;
  }
}

.p-maintenance-schedule__text-stretch {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__text-stretch {
    flex-direction: row;
    justify-content: space-around;
  }
}

.p-maintenance-schedule__service {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100cqi / 1140 * 100);
  height: calc(100cqi / 1140 * 100);
  aspect-ratio: 1;
  margin: 0 auto;
  padding-block: calc(10px + var(--leading-trim));
  border: 5px solid var(--border-color);
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  font-size: calc(100cqi / 1140 * 16);
  line-height: 1.25;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__service {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    aspect-ratio: unset;
    margin-right: 0;
    border-width: 3px;
    border-radius: var(--ovall-radius);
    font-size: 13px;
    line-height: 1.15;
  }
}

.p-maintenance-schedule__foot:has(+ .p-maintenance-schedule__notes) .p-maintenance-schedule__options div:after {
  width: calc(100% + calc(100cqi / 1140 * 57));
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__foot:has(+ .p-maintenance-schedule__notes) .p-maintenance-schedule__options div:after {
    width: 1px;
    height: calc(50% + 24px);
  }
}

.p-maintenance-schedule__options {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__options {
    flex-direction: row;
    max-width: 80%;
    margin: 0 auto;
  }
}

.p-maintenance-schedule__options > div {
  position: relative;
}

.p-maintenance-schedule__options > div._ciao {
  --color: var(--ciao-color);
}

.p-maintenance-schedule__options > div._mamoru {
  --color: var(--mamoru-color);
}

.p-maintenance-schedule__options > div:before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100cqi / 1140 * 16);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color);
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__options > div:before {
    position: relative;
    top: 50%;
    width: 13px;
    transform: translateY(-50%);
  }
}

.p-maintenance-schedule__options > div._on:before {
  opacity: 1;
}

.p-maintenance-schedule__options > div:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  display: block;
  width: 200%;
  height: 2px;
  margin: auto 0;
  background: var(--color);
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__options > div:after {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 1px;
    height: calc(100% + 24px);
    margin: 0 auto;
  }
}

/* p-maintenance-schedule grid
============================== */
.p-maintenance-schedule__main {
  grid-row: 1/2;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__main {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    grid-row: unset;
  }
}

.p-maintenance-schedule__sub {
  grid-row: 3/4;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__sub {
    grid-column: 3/ 4;
    grid-row: unset;
  }
}

/* p-maintenance-schedule__notes
============================== */
.p-maintenance-schedule__notes {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1 / 13;
  grid-row: 2/3;
  margin-block: 11px 15px;
  text-align: right;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule__notes {
    grid-column: 1/4;
    grid-row: 14/15;
    margin-block: 20px;
    text-align: center;
  }
}

/* p-maintenance-schedule-notes
============================== */
.p-maintenance-schedule-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-block: clamp(0px, -9.56633px + 2.55102vw, 10px) 0;
  font-size: calc(13px + var(--slope-1px) * 1);
}

.p-maintenance-schedule-notes a {
  text-decoration: underline;
}

.p-maintenance-schedule-notes a:hover {
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .p-maintenance-schedule-notes {
    flex-direction: column;
  }
}

.p-maintenance-schedule-notes__plan > li._ciao {
  --_color: var(--ciao-color);
}

.p-maintenance-schedule-notes__plan > li._mamoru {
  --_color: var(--mamoru-color);
}

.p-maintenance-schedule-notes__plan i {
  color: var(--_color);
  font-style: normal;
}

.p-maintenance-schedule-notes__text > li i {
  color: var(--_color);
  font-style: normal;
}

/* ============================================================= *

Inspection

* ============================================================= */
/* p-inspection-description
============================== */
.p-inspection-description {
  display: grid;
  align-items: center;
  grid-template-columns: 100%;
  gap: calc(20px + var(--slope-1px) * 10);
  padding: calc(20px + var(--slope-1px) * 10);
  border-radius: var(--frame-border-radius);
  background: var(--light-color);
  font-size: calc(14px + var(--slope-1px) * 2);
}

.p-inspection-description__head {
  inline-size: fit-content;
  margin-block: var(--leading-trim);
  margin-inline: auto;
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 4);
}

/* p-inspection-needs
============================== */
.p-inspection-needs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(5px + var(--slope-1px) * 5);
}

@media screen and (max-width: 767px) {
  .p-inspection-needs {
    gap: 5px;
  }
}

.p-inspection-needs__item {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 10px;
  padding: calc(20px + var(--slope-1px) * 10) 5px;
  border-radius: var(--small-border-radius);
  background: var(--white);
}

@media screen and (max-width: 767px) {
  .p-inspection-needs__item {
    flex: unset;
    width: calc(50% - 5px / 2);
  }
}

.p-inspection-needs__item > span {
  display: inline-block;
  margin-block: var(--leading-trim);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  font-size: calc(15px + var(--slope-1px) * 3);
  line-height: 1.5;
}

/* p-inspection-spep
============================== */
.p-inspection-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30px + var(--slope-1px) * 20) 14px;

  margin-block-start: 50px;
}

@media screen and (max-width: 767px) {
  .p-inspection-step-grid {
    grid-template-columns: auto 1fr;

    padding-block-end: 50px;
  }
}

.p-inspection-step {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  gap: 20px 10px;
}

@media screen and (max-width: 767px) {
  .p-inspection-step {
    grid-template-rows: 100%;
    grid-template-columns: subgrid;
    grid-column: span 2;
  }
}

.p-inspection-step__head {
  display: flex;
  width: 100%;
}

.p-inspection-step__number {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  gap: 10px;
  width: 100%;
  font-family: var(--en-font-family);
}

@media screen and (max-width: 767px) {
  .p-inspection-step__number {
    grid-template-columns: 1fr auto;
  }
}

.p-inspection-step__number span {
  display: block;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  margin-block: var(--leading-cap);
  text-align: center;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .p-inspection-step__number span {
    line-height: 1;
  }
}

.p-inspection-step__number em {
  display: block;
  grid-column: 1/2;
  grid-row: 2/3;
  margin-block: var(--leading-cap);
  color: var(--key-color);
  text-align: center;
  font-weight: 500;
  font-style: normal;
  font-size: 41px;
  line-height: 1;
}

.p-inspection-step__number::before {
  content: "";
  position: relative;
  align-self: center;
  grid-column: 2/3;
  grid-row: 2/3;
  width: 100%;
  height: 2px;
  background: var(--base-color);
}

@media screen and (max-width: 767px) {
  .p-inspection-step__number::before {
    grid-row: 1/3;
    width: 2px;
    height: 100%;
  }
}

.p-inspection-step__number::after {
  content: "";
  position: relative;
  align-self: center;
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: flex-end;
  width: 2px;
  height: 14px;
  background: var(--base-color);
  transform: rotate(-45deg) translateY(-50%);
}

@media screen and (max-width: 767px) {
  .p-inspection-step__number::after {
    content: none;
  }
}

.p-inspection-step__body {
  display: grid;
  align-self: flex-start;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  gap: calc(15px + var(--slope-1px) * 5);
}

.p-inspection-step__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
}

.p-inspection-step__title small {
  font-size: .8em;
}

.p-inspection-step__text {
  display: block;
  margin-block: var(--leading-trim);
  letter-spacing: 0;
}

/* ============================================================= *

check

* ============================================================= */
/* p-check-option-table
============================== */
.p-check-option-table {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px 0;
  text-align: center;
  font-size: calc(14px + var(--slope-1px) * 2);
}

.p-check-option-table__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-column: span 3;
  grid-row: span 2;
  gap: 0;
  border-top: 1px solid var(--base-color);
  border-bottom: 1px solid var(--base-color);
  border-left: 1px solid var(--base-color);
  background: #fff;
}

.p-check-option-table__item:is(._01, ._02, ._03, ._12, ._13, ._14) {
  grid-column: span 4;
}

.p-check-option-table__item:is(._03, ._07, ._11, ._14) {
  border-right: 1px solid var(--base-color);
}

.p-check-option-table__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .4em;
  padding: calc(20px + var(--leading-trim)) 20px;
  background: var(--gray);
  color: #fff;
  font-weight: 700;
}

.p-check-option-table__head span {
  font-size: calc(11px + var(--slope-1px) * 1);
}

.p-check-option-table__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(11px + var(--slope-1px) * 4);
  padding: 20px;
  font-weight: 300;
  line-height: 1.5;
}

.p-check-option-table__body > * {
  margin-block: var(--leading-trim);
}

.p-check-option-table__body > * small {
  font-size: calc(12px + var(--slope-1px) * 1);
}

/* p-check-option-notes
============================== */
.p-check-option-notes {
  margin-block: calc(20px + var(--leading-trim));
  font-size: calc(12px + var(--slope-1px) * 1);
  line-height: 1.8;
}

/* ============================================================= *

Ciao

* ============================================================= */
/* p-ciao-heading
============================== */
.p-ciao-heading {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;

  margin-block-end: calc(40px + var(--slope-1px) * 56);
}

.p-ciao-heading__logo {
  width: min(644px, 100%);
  margin-block: calc(10px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * -10);
  margin-inline: auto;
}

@media screen and (max-width: 767px) {
  .p-ciao-heading__logo {
    width: 100%;
  }
}

.p-ciao-heading__lead {
  position: relative;
  display: inline-grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  margin-block: var(--leading-trim);
  margin-inline: auto;
  color: #0068b6;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 30px */
  letter-spacing: 0;
  font-weight: 700;
  font-style: normal;
  font-size: calc(15px + var(--slope-1px) * 1);
  font-size: calc(14px + var(--slope-1px) * 16);
  line-height: 100%;
}

@media screen and (max-width: 767px) {
  .p-ciao-heading__lead {
    gap: 0;
    font-size: 14px;
  }
}

.p-ciao-heading__lead > span {
  grid-column: 2/3;
  grid-row: 1/2;
  letter-spacing: -.05em;
  font-feature-settings: "palt";
  line-height: 1;

  margin-block-start: var(--leading-cap);
}

.p-ciao-heading__lead::before {
  content: "";
  position: relative;
  display: block;
  grid-column: 1/2;
  grid-row: 1/2;
  width: 1em;
  height: 1.33333em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M10.3183 17.1315L2.43312 2.54928e-06L-0.575479 1.73702L10.3183 17.1315Z" fill="%230068B6"/></svg>');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.p-ciao-heading__lead::after {
  content: "";
  position: relative;
  display: block;
  grid-column: 3/4;
  grid-row: 1/2;
  width: 1em;
  height: 1.33333em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M9.95633e-05 17.1315L7.88524 2.54928e-06L10.8938 1.73702L9.95633e-05 17.1315Z" fill="%230068B6"/></svg>');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* p-ciao-heading-plan
============================== */
.p-ciao-heading-plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px calc(5px + var(--slope-1px) * 7);
}

@media screen and (max-width: 767px) {
  .p-ciao-heading-plan {
    flex-direction: column;
  }
}

.p-ciao-heading-point__item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(12px + var(--slope-1px) * 4);
  padding: 12px 22px;
  border: .10714em solid #0068b6;
  border-radius: calc(8px + var(--slope-1px) * 2);
  background: #e2f2ff;
  font-size: calc(24px + var(--slope-1px) * 4);
}

.p-ciao-heading-point__plus {
  width: calc(32px + var(--slope-1px) * 4);
  height: calc(32px + var(--slope-1px) * 4);
}

.p-ciao-heading-point__head {
  /* 35px */
  margin-block: var(--leading-cap);
  color: #0068b6;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
  line-height: 125%;
}

.p-ciao-heading__text {
  inline-size: fit-content;
  /* 27px */
  margin-block: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 2));
  margin-inline: auto;
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 2);
  line-height: 150%;
}

.p-ciao-merit {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: calc(var(--_circle-size)/2 - var(--_gap)) calc(var(--_circle-size)/2  - var(--_gap)) 1fr calc(var(--_circle-size)/2 - var(--_gap)) calc(var(--_circle-size)/2  - var(--_gap)) 1fr calc(var(--_circle-size)/2 - var(--_gap)) calc(var(--_circle-size)/2  - var(--_gap)) 1fr;
  gap: 5px var(--_gap);

  --_gap: calc(5px + var(--slope-1px) * 10);
  --_circle-size:90px;
  margin-block-start: 1em;
}

@media screen and (max-width: 1080px) {
  .p-ciao-merit {
    grid-template-columns: calc(var(--_circle-size)/2 - var(--_gap)) calc(var(--_circle-size)/2  - var(--_gap)) 1fr;
  }
}

.p-ciao-merit__item {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-rows: 1fr;
  grid-template-columns: subgrid;
  grid-column: span 3;
  gap: 0;
  min-height: var(--_circle-size);
}

.p-ciao-merit__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 1/3;
  grid-row: 1/2;
  width: var(--_circle-size);
  height: var(--_circle-size);
  margin-block: var(--leading-cap);
  border-radius: 50%;
  background: #0068b6;
  color: var(--white);
  letter-spacing: 0;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;

  padding-block-end: .125em;
}

.p-ciao-merit__head.--large {
  font-size: 45px;
}

.p-ciao-merit__body {
  position: relative;
  z-index: 0;
  display: grid;
  align-items: center;
  align-self: stretch;
  grid-column: 2/4;
  grid-row: 1/2;
  padding-inline: calc(var(--_circle-size) / 2 + 11px) calc(15px + var(--slope-1px) * 4);
  border: 3px solid #0068b6;
  border-radius: 10px;
  background: #e2f2ff;
  text-align: left;
}

.p-ciao-merit__body > p {
  display: block;
  margin-block: var(--leading-cap);
  font-size: clamp(15px, 7.77108px + .60241vw, 16px);
  line-height: 1.5;
}

/* p-ciao-control
============================== */
.p-ciao-control {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  width: fit-content;
  margin-block: 40px calc(32px + var(--slope-1px) * 16);
  margin-inline: auto;
}

.p-ciao-control > p {
  margin-block: var(--leading-trim);
}

@media screen and (max-width: 767px) {
  .p-ciao-control {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }
}

.p-ciao-control__head {
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .p-ciao-control__head {
    margin-block: var(--leading-trim);
  }
}

.p-ciao-control__body {
  flex-grow: 1;
}

.p-ciao-control select {
  width: 100%;
  min-width: 600px;
  padding: 1.25em calc(40px + var(--slope-1px) * 16) 1.25em 1.25em;
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--icon-angle-down) right calc(12px + var(--slope-1px) * 8) top 50%/1em 1em no-repeat var(--white);
  color: var(--base-color);
  white-space: break-spaces;
  word-break: auto-phrase;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

@media screen and (max-width: 767px) {
  .p-ciao-control select {
    min-width: 100%;
  }
}

.p-ciao-control select option {
  white-space: break-spaces;
  word-break: auto-phrase;
}

/* p-ciao-lineup-container
============================== */
.p-ciao-lineup-container {
  position: relative;
  overflow: auto;
  width: 100%;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .p-ciao-lineup-container {
    overflow-x: scroll;
    width: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff 15px) 0 0/50px 100%, linear-gradient(to left, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) 0 0/20px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), #fff 15px) right/50px 100%, linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, .2)) right/20px 100%;
    background-color: #fff;
    background-attachment: local, scroll, local, scroll;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 767px) {
  .p-ciao-lineup-container__scroll {
    min-width: 48em;
  }
}

.p-ciao-lineup-notes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 5px 20px;

  margin-block-start: 20px;
}

.p-ciao-lineup-notes__head {
  padding-left: 1em;
  text-indent: -1em;
  font-weight: 700;
  font-style: normal;
  font-size: calc(16px + var(--slope-1px) * 2);
  line-height: 1.25;
  line-height: 1.5;
}

.p-ciao-lineup-notes__head:before {
  content: "\002605";
}

.p-ciao-lineup-notes__small {
  padding-left: 1em;
  text-indent: -1em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(13px + var(--slope-1px) * 1);
  line-height: 1.5;
}

.p-ciao-lineup-notes__small:before {
  content: "\203b";
}

/* p-ciao-notes
============================== */
.p-ciao-notes {
  display: block;

  margin-block-start: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
  margin-block-end: calc(var(--leading-trim) + 24px);
}

/* ============================================================= *

Insurance

* ============================================================= */
/* p-insurance-merit
============================================================ */
.p-insurance-merit-grid {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(11px + var(--slope-1px) * 9);
  margin-block: calc(30px + var(--slope-1px) * 20) 50px;
  font-family: var(--ja-font-family);
}

@media screen and (max-width: 1080px) {
  .p-insurance-merit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-insurance-merit-grid__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 100%;
  grid-row: span 3;
  gap: 20px;
  overflow: hidden;
  padding: calc(20px + var(--slope-1px) * 10);
  border-radius: var(--frame-border-radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.p-insurance-merit-grid__item .c-text {
  margin-block: var(--leading-cap);
  letter-spacing: 0;
}

.p-insurance-merit-grid__title {
  align-self: center;
  margin-block: var(--leading-cap);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .p-insurance-merit-grid__title {
    line-height: 1.25;
  }
}

.p-insurance-merit-grid__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(60px + var(--slope-1px) * 20);
  height: calc(60px + var(--slope-1px) * 20);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--key-color);
}

.p-insurance-merit-grid__icon svg path {
  fill: var(--white);
}

/* p-insurance-plan-frame
============================================================ */
.p-insurance-plan {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
}

.p-insurance-plan-frame {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  width: calc(50% - 20px);
  border-radius: var(--frame-border-radius);
  background: #fff;
  box-shadow: var(--shadow);
}

@media screen and (max-width: 767px) {
  .p-insurance-plan-frame {
    width: 100%;
  }
}

.p-insurance-plan-frame__image {
  position: relative;
}

.p-insurance-plan-frame__image.--white-border {
  position: relative;
  overflow: hidden;
}

.p-insurance-plan-frame__image.--white-border img {
  width: calc(100% + 1em);
  height: calc(100% + 1em);
  max-width: unset;
  margin: -.5em -.5em 0;
}

.p-insurance-plan-frame__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: fit-content;
  padding-block: calc(16px + var(--slope-1px) * 8) calc(20px + var(--slope-1px) * 10);
  padding-inline: calc(24px + var(--slope-1px) * 6);
  text-align: center;

  margin-block-start: auto;
}

/* p-insurance-logo-banner
============================================================ */
.p-insurance-logo-grid {
  display: flex;
  align-items: center;
  gap: 15px 21px;
}

@media screen and (max-width: 767px) {
  .p-insurance-logo-grid {
    flex-direction: column;
    width: 86.08696%;
    margin-inline: auto;
  }
}

.p-insurance-logo-banner {
  position: relative;
  display: flex;
  flex-basis: 366px;
  justify-content: center;
  align-items: center;
  height: calc(70px + var(--slope-1px) * 30);
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: #fff;
  transition: filter .3s var(--animation);

  --_arrow-size: calc(24px + var(--slope-1px) * 8);
}

@media screen and (max-width: 767px) {
  .p-insurance-logo-banner {
    flex-basis: auto;
    width: 100%;
  }
}

.p-insurance-logo-banner img {
  width: calc(var(--width) * 1px);
  height: calc(100% * var(--height) / 100);
  max-width: calc(100% * var(--width) / 366);
  object-fit: contain;

  --width: 320;
  --height: 61;
}

@media screen and (max-width: 1080px) {
  .p-insurance-logo-banner img {
    max-width: calc(100% * var(--width) / 420);
  }
}

.p-insurance-logo-banner:after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--_arrow-size) / 2);
  bottom: 0;
  display: block;
  width: var(--_arrow-size);
  height: var(--_arrow-size);
  margin-block: auto;
  background: var(--key-color);
  mask: var(--icon-right-circle) 50% 50%/contain no-repeat;
  transition: translate .3s var(--animation);
}

@media (any-hover: hover) {
  .p-insurance-logo-banner:hover {
    filter: brightness(.92);
  }
}

/* p-insurance-1day
============================================================ */
.p-insurance-1day {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(16px + var(--slope-1px) * 8);
}

@media screen and (max-width: 767px) {
  .p-insurance-1day {
    grid-template-columns: 100%;
  }
}

.p-insurance-1day-grid {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 21px;
  margin-block: calc(30px + var(--slope-1px) * 20) 30px;
  font-family: var(--ja-font-family);
}

@media screen and (max-width: 767px) {
  .p-insurance-1day-grid {
    grid-template-columns: 100%;
  }
}

.p-insurance-1day-grid__item {
  display: grid;
  align-items: center;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: calc(10px + var(--slope-1px) * 5);
  text-align: center;
}

@media screen and (max-width: 767px) {
  .p-insurance-1day-grid__item .c-button {
    justify-self: center;
    width: 86.08696%;
  }
}

.p-insurance-1day-grid__lead {
  display: block;
  margin-block: var(--leading-cap);
  font-size: 16px;
}

.p-insurance-1day-grid__logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* p-insurance-solicitation
============================================================ */
.p-insurance-solicitation__lead {
  margin-block: var(--leading-cap) calc(var(--leading-cap) + calc(30px + var(--slope-1px) * 20));
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 150%;

  margin-block-end: calc(32px + var(--slope-1px) * 16);
}

.p-insurance-solicitation__list {
  padding-left: 1.4375em;
  list-style: decimal;
  list-style-position: outside;
  font-family: var(--ja-font-family);
}

.p-insurance-solicitation__list > li {
  list-style: decimal;
  list-style-position: outside;
  text-align: justify;
  text-justify: auto;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1.5;
}

.p-insurance-solicitation__list > li:not(:last-child) {
  margin-block-end: calc(var(--leading-cap) + 30px);
}

.p-insurance-solicitation__foot {
  display: grid;
  grid-template-columns: 100%;
  gap: 15px;
  padding: 30px;
  border-radius: var(--frame-border-radius);
  background: var(--bg-color);
  text-align: center;
  font-family: var(--ja-font-family);

  margin-block-start: calc(30px + var(--slope-1px) * 20);
}

.p-insurance-solicitation__agency {
  display: block;
  margin-block: var(--leading-cap);
}

.p-insurance-solicitation__company {
  display: block;
  margin-block: var(--leading-cap);
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
}

/* p-insurance-fd
============================================================ */
.p-insurance-fd__lead {
  margin-block: var(--leading-cap) calc(var(--leading-cap) + calc(30px + var(--slope-1px) * 20));
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 1.5;

  margin-block-end: calc(32px + var(--slope-1px) * 16);
}

.p-insurance-fd-list {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(40px + var(--slope-1px) * 10);
  font-family: var(--ja-font-family);

  margin-block-end: calc(50px + var(--slope-1px) * 30);
}

.p-insurance-fd-list__item {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(20px + var(--slope-1px) * 13);
}

.p-insurance-fd-list__head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-items: baseline;
  letter-spacing: 0;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 2);
  line-height: 1.5;
}

.p-insurance-fd-list__head > p {
  display: inline-block;
  margin-block: var(--leading-trim);
}

.p-insurance-fd-list__head > p small {
  font-size: .81818em;
}

@media screen and (max-width: 767px) {
  .p-insurance-fd-list__head > p {
    display: block;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.p-insurance-fd-list__head > span {
  display: inline-block;
  flex-shrink: 0;
  margin-block: var(--leading-trim);
}

.p-insurance-fd-list__detail {
  display: block;
  margin-block: var(--leading-trim);
  line-height: 1.5;
}

.p-insurance-fd-table {
  width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  font-size: calc(16px + var(--slope-1px) * 2);
  font-family: var(--ja-font-family);
  line-height: 1.25;
}

.p-insurance-fd-table caption {
  padding: 20px 10px;
  background: var(--gray);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px) * 8);
}

.p-insurance-fd-table th,
.p-insurance-fd-table td {
  padding: calc(var(--leading-cap) + 1.25em) .625em;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.p-insurance-fd-table thead th {
  background: var(--light-color);
  color: var(--key-color);
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .p-insurance-fd-table thead th {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.p-insurance-fd-table tbody th, .p-insurance-fd-table tbody td {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.p-insurance-fd-table tbody th {
  width: 66.66667%;
}

@media screen and (max-width: 767px) {
  .p-insurance-fd-table tbody th {
    width: 43.76812%;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

.p-insurance-fd-table tbody td {
  width: 16.66667%;
}

@media screen and (max-width: 767px) {
  .p-insurance-fd-table tbody td {
    width: 28.11594%;
  }
}

/* ============================================================= *

welcome

* ============================================================= */
.p-welcome-heading {
  position: relative;
  position: relative;
  overflow: hidden;
  padding: calc(72px + var(--slope-1px) * -40) calc(20px + var(--slope-1px) * 30) calc(56px + var(--slope-1px) * 44);
  padding-inline: var(--inner-padding);
  border-radius: var(--frame-border-radius);
  background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url("../img/carlife/bg-welcome.jpg") no-repeat top center;
  background-size: cover;
}

.p-welcome-heading-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  margin-block: var(--leading-cap) calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 10));
  font-weight: 700;
}

.p-welcome-heading-title .--en {
  position: relative;
  z-index: 0;
  grid-column: 1 / 2;
  grid-row: 1/2;
  width: 100cqi;
  margin-block: var(--leading-cap);
  margin-inline: calc(50% - 50cqi);
  color: var(--bg-color);
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(80px + var(--slope-1px) * 48);
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .3;
}

.p-welcome-heading-title h2.--ja {
  position: relative;
  z-index: 1;
  display: block;
  align-self: flex-end;
  grid-column: 1 / 2;
  /* 67.2px */
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  color: var(--white);
  text-align: center;
  font-weight: 700;
  font-size: calc(26px + var(--slope-1px) * 10);
  font-family: var(--ja-font-family);
  line-height: 140%;
}

.p-welcome-heading-lead {
  display: block;
  margin-block: var(--leading-trim);
  color: var(--white);
  text-align: center;
  font-weight: 500;
  font-size: calc(18px + var(--slope-1px) * 6);
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .p-welcome-heading-lead {
    text-align: left;
    line-height: 1.5;
  }
}

/* p-welcome-nav-block-grid
============================== */
.p-welcome-nav-block-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: calc(15px + var(--slope-1px) * 21) calc(24px + var(--slope-1px) * 12);

  margin-block-start: calc(75px + var(--slope-1px) * 25);
}

/* p-welcome-block
============================== */
.p-welcome-nav-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  overflow: hidden;
  padding: calc(24px + var(--slope-1px) * 6);
  border-radius: var(--frame-border-radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.p-welcome-nav-block__image {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--small-border-radius);
}

.p-welcome-nav-block__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-welcome-nav-block__head {
  border-bottom: 3px dotted var(--border-color);
}

.p-welcome-nav-block__title {
  display: block;
  margin-block: calc(var(--leading-trim) + 30px);
  text-align: center;
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
}

.p-welcome-nav-block__text {
  display: block;

  margin-block-end: calc(var(--leading-trim) + 30px);
}

.p-welcome-nav-block__foot {
  display: grid;
  align-items: flex-start;
  grid-template-rows: repeat(3, 1fr);
  gap: 12px 9px;

  margin-block-start: calc(var(--leading-trim) + 30px);
}

@media screen and (max-width: 767px) {
  .p-welcome-nav-block__foot {
    grid-template-rows: auto;
  }
}

/* ============================================================= *

totalcare

* ============================================================= */
.p-htc {
  overflow: hidden;
  padding: 2.92826% 0;
  border: 1px solid var(--border-color);
  border-radius: var(--frame-border-radius);
  background: #f3f3f3;
}

@media screen and (max-width: 767px) {
  .p-htc {
    padding-top: 20px;
  }
}

.p-htc__head {
  background: url(/htc/bg_htc.gif) bottom center repeat-x;
  background-size: contain;
}

@media screen and (max-width: 767px) {
  .p-htc__head {
    background: none;
  }
}

.p-htc__head > picture {
  width: 1200px;
  max-width: 91.21523%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .p-htc__head > picture {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
}

.p-htc__body > picture {
  width: 1200px;
  max-width: 91.21523%;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .p-htc__body > picture {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .p-htc__body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-block: 20px 20px;
  }
}

/* ============================================================= *

campaign

* ============================================================= */
body[data-id="campaign"] .CMN-CMP-car-select__head {
  display: block;
  text-align: center;
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 170%;

  margin-block-start: 0;
  padding-block-start: 0;
  margin-block-end: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 16));
  margin-block-start: var(--leading-trim);
}

body[data-id="campaign"] .CMN-CMP-car-article__title {
  font-weight: 700;
  line-height: 1.65;
}

body[data-id="campaign"] .CMN-CMP-car-article__head {
  margin-block-end: calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 8));
}

@media screen and (max-width: 767px) {
  body[data-id="campaign"] .CMN-CMP-car-article__carIcon img {
    max-width: 70%;
  }
}

body[data-id="campaign"] .CMN-CMP-body__list {
  max-width: var(--inner-width-px);
  margin-inline: calc(-1 * var(--gap));
  padding: 0;

  --gap:calc(4px + var(--slope-1px) * 2);
  margin-block-start: calc(-2 * var(--gap));
}

body[data-id="campaign"] .CMN-CMP-body__item {
  padding: var(--gap);
}

body[data-id="campaign"] .CMN-CMP-car-select {
  padding-block-end: calc(24px + var(--slope-1px) * 8);
  margin-block-end: calc(24px + var(--slope-1px) * 16);
}

body[data-id="campaign"] .CMN-CMP-car-select__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin-inline: auto;
  padding-inline: calc(20px + var(--slope-1px) * 12);
}

@media screen and (max-width: 767px) {
  body[data-id="campaign"] .CMN-CMP-car-select__list {
    padding-inline: 0;
  }
}

body[data-id="campaign"] .CMN-CMP-car-select__item {
  max-width: 30%;
}

/* p-campaign-leaflet
============================================================ */
.p-campaign-leaflet {
  display: block;
  text-align: center;
}

.p-campaign-leaflet img {
  padding: 5px;
  border: 1px solid var(--border-color);
}

/* p-campaign-wrapper
============================================================ */
.p-campaign-tab .c-tab {
  margin-block-end: 0;
}

.p-campaign-wrapper {
  position: relative;

  margin-block-start: calc(var(--leading-trim) + calc(48px + var(--slope-1px) * 24));
}

/* ============================================================= *

infomercial

* ============================================================= */
.p-informercial-title {
  width: fit-content;
  margin-inline: auto;

  margin-block-end: calc(20px + var(--slope-1px) * 10);
}

@media screen and (max-width: 767px) {
  .p-informercial-title {
    max-width: calc(297 / 375 * 100cqi);
  }
}

.p-informercial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(11px + var(--slope-1px) * 9);
}

@media screen and (max-width: 767px) {
  .p-informercial-grid {
    grid-template-columns: 100%;
  }
}

.p-informercial-grid__item {
  padding: calc(12px + var(--slope-1px) * 6);
  border-radius: var(--base-border-radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.p-informercial-movie {
  width: 100%;
  aspect-ratio: 16 / 9;
  line-height: 1;
}

.p-informercial-movie > iframe {
  width: 100%;
  height: 100%;
}

/* ============================================================= *

company

* ============================================================= */
/* p-company-vision
============================== */
.p-company-vision {
  display: grid;
  gap: calc(24px + var(--slope-1px) * 6);
  padding: calc(40px + var(--slope-1px) * 20) calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  background: 50% 50%/auto calc(105px + var(--slope-1px) * 32) no-repeat #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="314" height="137" viewBox="0 0 314 137" fill="none"><path d="M14.5759 63.663C-30.5459 104.966 37.2526 133.119 106.613 137C84.2834 129.643 57.6731 123.85 49.0537 107.225C41.8805 93.3222 34.418 73.3949 150.809 9.8478C95.6218 13.729 38.8723 41.4186 14.5759 63.663ZM171.345 59.7818C171.345 59.7818 214.327 50.5133 223.525 8.2838C223.525 8.2838 260.49 5.7928 314 0C314 0 243.367 62.6782 171.345 59.7818ZM265.986 55.0317C265.986 55.0317 188.353 123.387 115.059 136.942C115.059 136.942 148.09 114.524 171.288 75.1328C171.288 75.1328 216.12 79.014 265.986 55.0317ZM191.592 32.4977C178.171 43.2144 168.222 44.5467 168.222 44.5467L158.792 10.0216L207.963 8.2258C207.963 8.2258 205.245 21.5493 191.592 32.4977Z" fill="%23E8F7FF"/></svg>');

  margin-block-end: calc(40px + var(--slope-1px) * 40);
}

.p-company-vision__head {
  margin-block: var(--leading-trim);
  color: var(--primary);
  text-align: center;
  font-weight: 500;
  font-size: calc(22px + var(--slope-1px) * 10);
}

.p-company-vision__body {
  width: fit-content;
  max-width: 100%;
  margin-block: var(--leading-trim);
  margin-inline: auto;
  text-align: flex;
  text-align: center;
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 4);
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .p-company-vision__body {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}

/* ============================================================= *

recruit

* ============================================================= */
/* recruit modal
=============================== */
.p-recruit-modal .l-modal__inner {
  max-width: var(--inner-width-px);

  container-type: inline-size;
  container-name: modal;
}

/* recruit header
=============================== */
.p-recruit-header {
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);
  padding-inline: 6%;

  margin-block-start: 40px;
}

.p-recruit-header__head {
  display: grid;
  height: 600px;
  max-width: 1366px;
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .p-recruit-header__head {
    grid-template-rows: 100%;
    grid-template-columns: 51.24451% 52.78184%;
  }
}

@media screen and (max-width: 1080px) {
  .p-recruit-header__head {
    height: clamp(420px, 189.51586px + 30.05008vw, 600px);
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-header__head {
    grid-template-columns: 100%;
    height: unset;
  }
}

.p-recruit-header__fireworks {
  position: relative;
  z-index: -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/2;
  grid-row: 1/2;
}

.p-recruit-header-firework-01 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(157px + var(--slope-1px) * 106);
  height: calc(153px + var(--slope-1px) * 103);
  opacity: 0;
  transition: scale 1s 2s, opacity .8s 2s;

  scale: .5;
}

@media screen and (max-width: 767px) {
  .p-recruit-header-firework-01 {
    translate: -5% 85%;
  }
}

.p-recruit-header-firework-01 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.is-loaded .p-recruit-header-firework-01 {
  opacity: 1;

  scale: 1;
}

.p-recruit-header-firework-02 {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(204px + var(--slope-1px) * 182);
  height: calc(198px + var(--slope-1px) * 177);
  opacity: 0;
  transition: scale 1s 2s, opacity .8s 2.4s;

  translate: 10% 0;
  scale: .5;
}

@media screen and (max-width: 767px) {
  .p-recruit-header-firework-02 {
    translate: 0 -10%;
  }
}

.p-recruit-header-firework-02 > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.is-loaded .p-recruit-header-firework-02 {
  opacity: 1;

  scale: 1;
}

.p-recruit-header__lead {
  grid-column: 1/2;
  grid-row: 1/2;
  width: fit-content;
  height: fit-content;
  margin-block: var(--leading-cap);
  margin-inline: auto;
  /* 160px */
  background: linear-gradient(86deg, var(--Background-Gradation--Dark, #054286) 3.29%, var(--Background-Gradation--Lite, #30b1b9) 72.91%);
  -webkit-background-clip: text;
          background-clip: text;
  letter-spacing: -.03em;
  font-weight: 400;
  font-style: normal;
  font-size: min(18cqi, 200px);
  font-family: "Bebas Neue", sans-serif;
  line-height: 80%;
  transform: rotate(-15deg);
  transform-origin: right;

  -webkit-text-fill-color: transparent;
}

@media screen and (min-width: 768px) {
  .p-recruit-header__lead {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--white);
    paint-order: stroke;
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-header__lead {
    transform-origin: top;
  }
}

@media screen and (max-width: 560px) {
  .p-recruit-header__lead {
    font-size: min(25cqi, 85px);
    transform-origin: center;
  }
}

.p-recruit-header__lead span {
  display: block;
}

@media screen and (max-width: 767px) {
  .p-recruit-header__lead span {
    display: inline;
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-header__lead span.--top {
    display: block;
  }
}

.p-recruit-header__image {
  position: relative;
  display: grid;
  align-self: flex-end;
  grid-template-rows: 1fr;
  grid-template-columns: 17.61442% 11.0957% 30.09709% 18.86269% 22.3301%;
  height: fit-content;
  max-width: 721px;
}

@media screen and (min-width: 768px) {
  .p-recruit-header__image {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}

.p-recruit-header__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  grid-column: 2/5;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  background-image: url(../img/recruit/recruit-bg-01.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: transform 1s 2.4s, opacity .8s 1s;
  transform: translateX(0);
}

.p-recruit-header__image .--customer {
  grid-column: 1/3;
  grid-row: 1/2;
  transition: opacity 1.2s .8s;
}

.p-recruit-header__image .--customer::before {
  background-image: url(../img/recruit/recruit-bg-03.png);
}

.p-recruit-header__image .--sales {
  z-index: 3;
  grid-column: 2/5;
  grid-row: 1/2;
  transition: opacity 1.2s .6s;
}

.p-recruit-header__image .--service {
  grid-column: 4/6;
  grid-row: 1/2;
  transition: opacity 1.2s .9s;
}

.p-recruit-header__image .--service::before {
  background-image: url(../img/recruit/recruit-bg-02.png);
}

body.is-loaded .p-recruit-header__image .p-recruit-header-image {
  opacity: 1;
}

body.is-loaded .p-recruit-header__image:before {
  opacity: 1;
  transform: translateX(20px);
}

body.is-loaded .p-recruit-header__image .p-recruit-header-image:before {
  opacity: 1;
  transform: translateX(20px);
}

.p-recruit-header-image {
  position: relative;
  display: flex;
  align-self: flex-end;
  opacity: 0;
}

.p-recruit-header-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.p-recruit-header-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: transform 1s 2.4s;
  transform: translateX(0);
}

.p-recruit-header__lead {
  transition: clip-path .8s cubic-bezier(.22, 1, .36, 1) 1.6s;
  clip-path: inset(0 100% 0 0);
}

body.is-loaded .p-recruit-header__lead {
  clip-path: inset(0 0 0 0);
}

/* recruit message
=============================== */
.p-recruit-message {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 100%;
  color: var(--white);

  padding-block-start: 50px;
}

.p-recruit-message::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100cqi;
  height: 100%;
  margin-inline: calc(50% - 50cqi);
  background: var(--key-color);
}

.p-recruit-message__head {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 767px) {
  .p-recruit-message__head {
    margin-block-start: var(--leading-cap);
  }
}

.p-recruit-message-title {
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  margin-block: 0 calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 12));
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .p-recruit-message-title {
    margin-block: var(--leading-trim) calc(var(--leading-trim) + calc(24px + var(--slope-1px) * 12));
  }
}

.p-recruit-message-title .--en {
  position: relative;
  z-index: -1;
  grid-column: 1 / 2;
  grid-row: 1/2;
  width: 100cqi;
  margin-block: var(--leading-cap);
  margin-inline: calc(50% - 50cqi);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: keep-all;
  letter-spacing: -.025em;
  font-weight: 500;
  font-style: normal;
  font-size: calc(50px + var(--slope-1px) * 30);
  font-family: var(--en-font-family);
  line-height: 100%;
  /* 128px */
  opacity: .1;
}

@media screen and (max-width: 767px) {
  .p-recruit-message-title .--en {
    color: var(--bg-color);
    opacity: .2;
  }
}

.p-recruit-message-title h2.--ja {
  display: block;
  align-self: center;
  grid-column: 1 / 2;
  grid-row: 1/2;
  margin-block: var(--leading-cap);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
  font-weight: 700;
  font-size: calc(26px + var(--slope-1px) * 4);
  font-family: var(--ja-font-family);
  line-height: 1.25;
}

@media screen and (max-width: 767px) {
  .p-recruit-message-title h2.--ja {
    align-self: flex-end;
  }
}

.p-recruit-message__lead {
  margin-block: calc(48px + var(--slope-1px) * 2);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: calc(24px + var(--slope-1px) * 16);
}

.p-recruit-message__body {
  position: relative;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr 26.31579%;
  grid-template-areas: "textHeader image"
 "textBody image"
 "textFooter image";
  width: 100%;
  margin-inline: auto;
}

.p-recruit-message__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100cqi;
  max-height: 295px;
  aspect-ratio: 1403/ 295;
  margin-block: auto;
  margin-inline: calc(50% - 50cqi);
  background-image: url(../img/recruit/bg-message.png);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media screen and (max-width: 767px) {
  .p-recruit-message__body::after {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    margin-block: 0 auto;
    background-size: contain;

    place-content: center;
    margin-block-start: -10%;
  }
}

@media screen and (max-width: 1140px) {
  .p-recruit-message__body {
    grid-template-areas: "textHeader textHeader"
 "textBody image"
 "textFooter image";
  }
}

@media screen and (max-width: 800px) {
  .p-recruit-message__body {
    grid-template-areas: "textHeader textHeader"
 "textBody textBody"
 "textFooter image";
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-message__body {
    grid-template-columns: 100%;
    grid-template-areas: "image"
 "textHeader"
 "textBody"
 "textFooter";
  }
}

.p-recruit-message__body .p-recruit-message__text.--header {
  grid-area: textHeader;
}

.p-recruit-message__body .p-recruit-message__text.--body {
  grid-area: textBody;
}

.p-recruit-message__body .p-recruit-message__text.--footer {
  grid-area: textFooter;
}

.p-recruit-message__body .p-recruit-message__image {
  grid-area: image;
}

.p-recruit-message__text {
  color: #fff;
  text-align: justify;
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px) * 2);
  line-height: 200%;

  paint-order: stroke;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--key-color);
}

.p-recruit-message__text p + p {
  margin-block: 1em;
}

.p-recruit-message__text.--header {
  margin-block-end: 1em;
}

.p-recruit-message__text.--body {
  margin-block-end: 1em;
}

.p-recruit-message__name {
  /* 28px */
  margin-block: 30px calc(50px + var(--slope-1px) * 25);
  text-align: right;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 175%;
}

.p-recruit-message__image {
  align-self: flex-end;
}

@media screen and (max-width: 767px) {
  .p-recruit-message__image {
    align-self: center;
    margin-inline: auto;

    margin-block-end: 20px;
    place-content: center;
  }
}

/* recruit interview
=============================== */
.p-recruit-interview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: calc(11px + var(--slope-1px) * 10);
}

@media screen and (max-width: 767px) {
  .p-recruit-interview {
    grid-template-columns: 100%;
  }
}

/* recruit interview card
=============================== */
.p-recruit-interview-card {
  padding: 24px;
  border-radius: var(--frame-border-radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.p-recruit-interview-card .c-button {
  justify-self: center;
}

.p-recruit-interview-card__image {
  overflow: hidden;
  border-radius: var(--base-border-radius);
}

.p-recruit-interview-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-recruit-interview-card__job {
  display: block;
  width: 100%;
  padding-block: calc(var(--leading-cap) + 20px) calc(var(--leading-cap) + 24px);
  border-bottom: 1px solid var(--border-color);
  color: var(--key-color);
  text-align: center;
  font-weight: 700;
  font-style: normal;
  font-size: calc(22px + var(--slope-1px) * 2);
  line-height: 140%;
  /* 33.6px */

  margin-block-end: 19px;
}

.p-recruit-interview-card__contents {
  display: grid;
  grid-template-columns: 100%;
}

.p-recruit-interview-card__profile {
  display: block;
  width: 100%;
  margin-block: var(--leading-cap) calc(var(--leading-cap) + 20px);
  text-align: center;
}

/* recruit interview article
=============================== */
.p-recruit-interview-article {
  width: 100%;

  --_header-gap:calc(30px + var(--slope-1px) * 5);
}

.p-recruit-interview-article__head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20px + var(--slope-1px) * 10);
  padding: calc(15px + var(--slope-1px) * 15);
  border-radius: var(--base-border-radius);
  background: var(--key-color);

  margin-block-end: calc(-1 * var(--_header-gap));
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-article__head {
    flex-direction: column;
    gap: 20px;
  }
}

.p-recruit-interview-job__head {
  flex-shrink: 0;
  padding: 10px;
  border-radius: var(--base-border-radius);
  background: var(--light-color);
  color: var(--key-color);
  text-align: center;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 1.25;
}

@media screen and (min-width: 768px) {
  .p-recruit-interview-job__head {
    aspect-ratio: 1;
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-job__head {
    flex-grow: 1;
    width: 100%;
  }
}

.p-recruit-interview-job__text {
  flex-grow: 1;
  color: var(--white);
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 150%;
  /* 24px */
}

/* recruit interview article header
=============================== */
.p-recruit-interview-header {
  display: grid;
  grid-template-rows: var(--_header-gap) 1fr;
  grid-template-columns: var(--_padding-inline) 490px 1fr 20.61404% var(--_padding-inline);
  width: 100cqi;
  margin-inline: calc(50% - 50cqi);

  margin-block-end: calc(50px + var(--slope-1px) * -25);
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header {
    grid-template-rows: var(--_header-gap) auto auto;
    grid-template-columns: var(--_padding-inline) 1fr var(--_padding-inline);
  }
}

.p-recruit-interview-header::before {
  content: "";
  position: relative;
  z-index: 0;
  display: grid;
  grid-column: 1/4;
  grid-row: 1/3;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, #fff 50%, rgba(255, 255, 255, 0) 100%);
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header::before {
    content: none;
  }
}

.p-recruit-interview-header__head {
  position: relative;
  z-index: 1;
  grid-column: 2/3;
  grid-row: 2/3;

  place-content: center;
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header__head {
    grid-column: 1/4;
    grid-row: 3/4;
    text-align: center;

    margin-block-start: 15px;
  }
}

.p-recruit-interview-header__image {
  z-index: -1;
  grid-column: 1/6;
  grid-row: 1/3;
}

@media screen and (min-width: 768px) {
  .p-recruit-interview-header__image {
    height: 450px;
  }
}

.p-recruit-interview-header__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75%;
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header__image img {
    object-position: 92.5%;
  }
  [data-job=customer] .p-recruit-interview-header__image img {
    object-position: 97.5%;
  }
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header__image {
    grid-column: 1/4;
    grid-row: 1/3;
    aspect-ratio: 1;
  }
}

.p-recruit-interview-header__title {
  color: var(--key-color);
  text-shadow: 0 0 4px #fff;
  letter-spacing: 0;
  font-weight: 500;
  font-style: normal;
  font-size: calc(22px + var(--slope-1px) * 10);
  line-height: 150%;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke;
  /* 48px */
  padding-block-end: calc(16px + var(--slope-1px) * 18);
}

@media screen and (min-width: 768px) {
  .p-recruit-interview-header__title {
    width: fit-content;
    border-bottom: 4px dotted var(--gray);

    margin-block-end: 30px;
  }
}

.p-recruit-interview-header__job {
  /* 48px */
  display: inline-flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
  color: var(--base-color);
  text-align: center;
  text-shadow: 0 0 4px #fff;
  font-weight: 500;
  font-style: normal;
  font-size: 32px;
  line-height: 150%;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke;
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header__job {
    display: block;
  }
}

.p-recruit-interview-header__profile {
  color: var(--base-color);
  text-align: center;
  text-shadow: 0 0 4px #fff;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 150%;

  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke;
  /* 24px */
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-header__profile {
    display: block;
  }
}

/* recruit interview block
=============================== */
.p-recruit-interview-block.--wide {
  margin-block-end: calc(20px + var(--slope-1px) * 30);
}

.p-recruit-interview-block {
  display: flex;
  flex-direction: column;
  gap: calc(13px + var(--slope-1px) * -3);
}

.p-recruit-interview-column {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 42.30769% 1fr;
  gap: calc(20px + var(--slope-1px) * -10) calc(20px + var(--slope-1px) * 30);

  margin-block-end: calc(30px + var(--slope-1px) * 10);
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-column {
    grid-template-columns: 100%;
  }
}

.p-recruit-interview-column.--image-left {
  grid-template-columns: 1fr 42.30769%;
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-column.--image-left {
    grid-template-columns: 100%;
  }
}

.p-recruit-interview-column.--image-right {
  grid-template-columns: 42.30769% 1fr;
}

@media screen and (max-width: 767px) {
  .p-recruit-interview-column.--image-right {
    grid-template-columns: 100%;
  }
}

.p-recruit-interview-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--small-border-radius);
}

.p-recruit-interview-block__head {
  position: relative;
  color: var(--key-color);
  font-weight: 500;
  font-size: calc(18px + var(--slope-1px) * 2);
  line-height: 150%;
}

.p-recruit-interview-block__body {
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
}

/* recruit interview article foot
=============================== */
.p-recruit-interview-article__foot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  border-top: 4px dotted var(--border-color);

  padding-block-start: calc(20px + var(--slope-1px) * -10);
}

.p-recruit-interview-article__button {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--base-color);
  text-align: right;
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1;
  transition: color .3s var(--animation);
  appearance: none;

  --_arrow-size: calc(18px + var(--slope-1px) * 6);
  --_arrow-color: var(--key-color);
}

.p-recruit-interview-article__button:hover {
  color: var(--key-color);
}

.p-recruit-interview-article__button::after {
  content: "";
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--_arrow-size);
  height: var(--_arrow-size);
  margin: auto 0;
  border-radius: 100%;
  background: var(--_arrow-color);
  mask: var(--icon-close-circle) 50% 50%/contain no-repeat;
  transition: background .2s;
  transition: translate .3s var(--animation);
}

/* ============================================================= *

Environment

* ============================================================= */
.p-environment-fig {
  position: relative;
  margin: 0 auto;
  padding-block: calc(72px + var(--slope-1px) * 28);
  background-color: #fff;
  line-height: 2;
}

.p-environment-fig sub {
  display: inline-block;
  font-size: 65%;
}

.p-environment-fig:before, .p-environment-fig:after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 50px;
  background-size: contain;
  background-repeat: repeat-x;
}

.p-environment-fig:before {
  top: 0;
  background-image: url(/environment/direction/common/img/bgHeaderTop.gif);
  background-position: center top;
}

.p-environment-fig:after {
  bottom: 0;
  background-image: url(/environment/direction/common/img/bgHeaderBottom.gif);
  background-position: center bottom;
}

.p-environment-fig__head {
  display: block;
  margin-block: var(--leading-trim);
  padding: 0 0 calc(var(--leading-trim) + calc(36px + var(--slope-1px) * 6));
  color: #7ea311;
  text-align: center;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 1.5;
}

.p-environment-fig__body {
  max-width: 56.25em;
  margin-block: var(--leading-trim);
  margin-inline: auto;
  padding: 0;
  background: url(/environment/direction/common/img/character_img01.jpg) left bottom no-repeat;
  color: #b18147;
}

.p-environment-fig__body dl {
  display: table;
  width: 100%;

  margin-block-start: var(--leading-trim);
  margin-block-end: calc(18px + var(--slope-1px) * 3);
}

@media screen and (max-width: 560px) {
  .p-environment-fig__body dl {
    display: block;
  }
}

.p-environment-fig__body dt {
  display: table-cell;
  width: 6em;
}

.p-environment-fig__body dt:before {
  content: "\25a0";
}

@media screen and (max-width: 560px) {
  .p-environment-fig__body dt {
    display: block;
  }
}

.p-environment-fig__body dd {
  display: table-cell;
  text-align: justify;
  text-justify: auto;
}

@media screen and (max-width: 560px) {
  .p-environment-fig__body dd {
    display: block;
  }
}

.p-environment-fig__body dd ol {
  padding-left: 1.3em;
  line-height: 2;
}

.p-environment-fig__body dd li {
  list-style: decimal;
  list-style-position: outside;
}

.p-environment-fig__title {
  background: url(/environment/direction/common/img/bg_policyTitle.gif) center center repeat-x;
  color: #b18147;
  text-align: center;
  font-weight: bold;
  font-weight: 700;
  font-style: normal;
  font-size: calc(20px + var(--slope-1px) * 4);
  line-height: 1.5;

  margin-block-end: calc(var(--leading-trim) + calc(36px + var(--slope-1px) * 6));
}

@media screen and (max-width: 767) {
  .p-environment-fig__title {
    background-size: auto 3px;
  }
}

.p-environment-fig__title span {
  display: inline-block;
  margin-block: var(--leading-trim);
  padding: 0 15px;
  background: #fff;
}

.p-environment-fig__sign {
  text-align: right;
}

/* ============================================================= *

terms

* ============================================================= */
/* p-terms-text
=============================== */
.p-terms-text {
  margin-bottom: var(--leading-trim);
  text-align: left;
  line-height: 1.5;
}

.p-terms-text + .p-terms-text {
  margin-block-start: calc(20px + var(--leading-trim));
}

.p-terms-text a {
  transition: text-decoration-color .1s ease;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.p-terms-text a:hover {
  text-decoration-color: transparent;
}

/* plugin
=============================== */
.p-terms-plugin {
  border: 1px solid var(--border-color);
  border-radius: var(--frame-border-radius);
  background: var(--white);

  margin-block-start: 30px;
}

.p-terms-plugin__link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  padding: 30px calc(24px + var(--slope-1px) * 26);
  text-decoration: none;
  transition: all .3s ease-out;
}

.p-terms-plugin__link:hover {
  opacity: .7;
}

@media screen and (max-width: 560px) {
  .p-terms-plugin__link {
    flex-direction: column;
  }
}

/* ssl
=============================== */
.p-terms-ssl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  padding: 30px calc(24px + var(--slope-1px) * 26);
  border: 1px solid var(--border-color);
  border-radius: var(--frame-border-radius);
  background: var(--white);

  margin-block-start: 30px;
}

.p-terms-ssl__head {
  font-weight: 700;
  font-size: calc(15px + var(--slope-1px) * 1);
}

.p-terms-ssl__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24px + var(--slope-1px) * 6);
}

.p-terms-ssl__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-left: 1em;
}

.p-terms-ssl__item > p {
  position: relative;
}

.p-terms-ssl__item > p:before {
  content: "\30fb";
  position: absolute;
  top: 0;
  left: -1em;
}

.p-terms-ssl__item > ul > li a {
  position: relative;
  transition: text-decoration-color .1s ease;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.p-terms-ssl__item > ul > li a:hover {
  text-decoration-color: transparent;
}

.p-terms-ssl__foot {
  margin-block-start: 20px;
}

/* ============================================================= *

privacy

* ============================================================= */
.p-privacy-lead {
  border-bottom: 4px dotted var(--border-color);
  line-height: 1.5;

  padding-block-end: calc(var(--leading-trim) + calc(30px + var(--slope-1px) * 10));
}

/* p-privacy-container
============================== */
.p-privacy-container {
  counter-reset: privacy;
  display: grid;
  grid-template-columns: 100%;
  gap: calc(30px + var(--slope-1px) * 20);
  line-height: 1.5;

  margin-block-start: 30px;
  container-name: privacy;
  container-type: inline-size;
}

/* p-privacy-block
============================== */
.p-privacy-block {
  counter-increment: privacy;
  position: relative;
  display: grid;
  align-items: baseline;
  grid-template-columns: var(--_padding-left) 1fr;
  gap: .85em 0;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1.5;

  --_padding-left: 1.125em;
}

.p-privacy-block:before {
  content: counter(privacy) ".";
  grid-column: 1/2;
  grid-row: 1/2;
  word-break: keep-all;
  font-family: var(--ja-font-family);
}

.p-privacy-block__head {
  grid-column: 2/3;
  gap: .375em;
}

.p-privacy-block__body {
  grid-column: 2/3;
}

.p-privacy-block a {
  display: inline;
  align-items: center;
  text-decoration: underline;
  white-space: wrap;
  transition: text-decoration-color .1s ease;

  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.p-privacy-block a:hover {
  text-decoration-color: transparent;
}

/* p-privacy-detail
============================== */
.p-privacy-detail {
  display: grid;
  grid-template-columns: 100%;
  gap: 15px;
  padding-left: 1.5em;
  font-family: var(--ja-font-family);

  margin-block-start: 15px;
}

.p-privacy-detail > li {
  display: list-item;
  list-style: lower-roman;
}

/* p-privacy-insurance
============================== */
.p-privacy-insurance {
  display: grid;
  grid-template-columns: 100%;
  width: calc(100% + 1.2em);
  margin-block: calc(15px + var(--slope-1px) * 10);
  margin-left: calc(1.2em * -1);
  padding: calc(20px + var(--slope-1px) * 10) calc(20px + var(--slope-1px) * 10);
  border: 1px solid var(--border-color);
  border-radius: var(--frame-border-radius);
}

.p-privacy-insurance__head {
  position: relative;
  display: block;
  text-indent: 0;
}

.p-privacy-insurance__list > li {
  display: list-item;
  padding-left: 1.2em;
  list-style: none;
  text-indent: -1.2em;
}

.p-privacy-insurance__list > li:before {
  content: "\30fb";
  padding-inline: .25em;
}

.p-privacy-insurance__list > li span {
  position: relative;
}

@media screen and (max-width: 767px) {
  .p-privacy-insurance__list > li span {
    display: block;
    padding-left: 1.2em;
  }
}

.p-privacy-insurance__list > li span::before {
  content: "-";
  position: relative;
  display: inline;
  padding-inline: .25em;
}

.p-privacy-insurance__list > li a {
  text-decoration: underline;
  transition: text-decoration-color .1s ease;

  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.p-privacy-insurance__list > li a:hover {
  text-decoration-color: transparent;
}

/* p-privacy-signature
============================== */
.p-privacy-signature {
  margin-block: var(--leading-trim);
  text-align: right;
}

/* p-privacy-banner
============================== */
.p-privacy-banner {
  margin-block-start: 40px;
}

.p-privacy-banner a {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  transition: all .2s;
}

.p-privacy-banner a:hover {
  opacity: .7;
}

/* ============================================================= *

harassment

* ============================================================= */
.p-harassment-list {
  margin-block: calc(var(--leading-trim) + 30px);
  font-size: calc(15px + var(--slope-1px) * 1);
}

.p-harassment-list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.p-harassment-list > li:before {
  content: "\30fb";
}

/* ============================================================= *

contact

* ============================================================= */
.p-contact-text {
  margin-block: 30px;
  font-weight: 500;
  line-height: 1.5;
}