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

index.html

* ============================================================= */
/* common
* ============================================================= */
/* p-index-en
============================== */
.p-index-en {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--key-color);
  font-size: calc(15px + var(--slope-1px) * 3);
  font-family: var(--en-font-family);
  line-height: 1;
}

.p-index-en._current-color {
  color: currentColor;
}

.p-index-en:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(10px + var(--slope-1px) * 2);
  height: calc(3px + var(--slope-1px) * 1);
  border-radius: 4px;
  background: currentColor;
}

/* p-index-title
============================== */
.p-index-title {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(20px + var(--slope-1px) * 4);
}

.p-index-title__main {
  margin-block: var(--leading-trim);
  letter-spacing: 0;
  font-weight: 700;
  font-size: calc(36px + var(--slope-1px) * 12);
}

/* p-index-section
============================== */
.p-index-section {
  display: grid;
  align-items: center;
  grid-template-columns: 100%;
  gap: calc(32px + var(--slope-1px-md) * 16);
  padding-block: calc(56px + var(--slope-1px-md) * 56);
}

@media screen and (min-width: 769px) {
  .p-index-section {
    grid-template-columns: 1fr auto;
  }
}

@media screen and (min-width: 769px) {
  .p-index-section__body {
    grid-column: span 2;
  }
}

.p-index-section__foot {
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 769px) {
  .p-index-section__foot {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}

/* contents
* ============================================================= */
/* p-index-mv
============================== */
.p-index-mv {
  position: relative;
  left: 50%;
  width: calc(var(--vw) * 100);
  height: calc(var(--vh) * 100);

  translate: -50% 0;
}

.p-index-mv__slider {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;

  --d: 4.5s;
  --n: 3;
}

.p-index-mv__slider > li {
  display: contents;

  --i: 0;
}

.p-index-mv__slider > li:nth-child(2) {
  --i: 1;
}

.p-index-mv__slider > li:nth-child(3) {
  --i: 2;
}

.p-index-mv__slider > li:nth-child(4) {
  --i: 3;
}

.p-index-mv__slider > li img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

body.is-loaded .p-index-mv__slider > li img {
  animation: fade calc(var(--n) * var(--d)) infinite calc(var(--i) * var(--d));
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  33.33333% {
    opacity: 1;
  }
  39.33333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* p-index-intro
============================== */
.p-index-intro {
  overflow: hidden;
  width: calc(100% + var(--outer-margin) * 2);
  margin-inline: calc(var(--outer-margin) * -1);
  margin-bottom: calc(56px + var(--slope-1px-md) * 64);
  padding-inline: var(--outer-margin);
  padding-top: calc(64px + var(--slope-1px-md) * 80);
  letter-spacing: 0;
}

.p-index-intro__head {
  gap: 48px;
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(36px + var(--slope-1px-md) * 44);
  line-height: calc(46.8px + var(--slope-1px-md) * 57.2);
}

.p-index-intro__head em {
  position: relative;
  top: .05em;
  display: inline-block;
  padding-inline: .1em;
  font-size: 1.25em;
}

.p-index-intro__body {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 48px;
}

@media screen and (max-width: 768px) {
  .p-index-intro__body {
    grid-template-columns: 100%;
    margin-top: 56px;
  }
}

.p-index-intro__contents {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px-md) * 16);
  padding-bottom: calc(100% / 600 * 53);
}

.p-index-intro__text {
  margin-block: var(--leading-trim);
  font-size: calc(17px + var(--slope-1px-md) * 9);
  line-height: 2;
}

@media screen and (max-width: 768px) {
  .p-index-intro__logo {
    width: calc(100% / 345 * 177);
    margin-left: auto;
  }
}

.p-index-intro__logo img {
  width: calc(100% / 600 * 730);
  max-width: none;
}

@media screen and (max-width: 768px) {
  .p-index-intro__logo img {
    width: calc(100% / 177 * 200);
  }
}

.p-index-intro:after {
  content: "CAR PLAT";
  position: relative;
  left: 50%;
  display: block;
  width: fit-content;
  margin-top: calc(32px + var(--slope-1px-full) * 40);
  padding-bottom: .05em;
  color: #fff3e5;
  white-space: nowrap;
  letter-spacing: calc(-4.4px + var(--slope-1px-full) * -4.6);
  font-weight: 500;
  font-weight: 500;
  font-size: calc(88px + var(--slope-1px-full) * 232);
  font-family: var(--en-font-family);
  line-height: .65;
  transform: translateX(-50%);
}

/* p-index-notice
============================== */
.p-index-notice-section {
  display: grid;
  grid-template-columns: 100%;
  gap: 12px;
  margin-bottom: calc(56px + var(--slope-1px-md) * 40);
}

@media screen and (max-width: 768px) {
  .p-index-notice-section {
    gap: 16px;
  }
}

.p-index-notice {
  display: grid;
  align-items: center;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "icon date text";
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  text-decoration: none;
  font-weight: 500;
  transition: opacity .2s ease-out;
}

@media (any-hover: hover) {
  .p-index-notice:hover {
    opacity: .7;
  }
}

@media screen and (max-width: 768px) {
  .p-index-notice {
    grid-template-areas: "icon date" "icon text";
  }
}

.p-index-notice._important {
  color: #e00;
}

.p-index-notice:before {
  content: "";
  display: block;
  grid-area: icon;
  width: calc(22px + var(--slope-1px) * 6);
  aspect-ratio: 1/1;
  background: currentColor;
  mask: var(--icon-caution) 50% 50%/contain no-repeat;
}

.p-index-notice__date {
  grid-area: date;
  margin-block: var(--leading-trim);
  font-family: var(--base-font-family);
}

.p-index-notice__text {
  grid-area: text;
  margin-block: var(--leading-trim);
}

/* p-index-recommend
============================== */
.p-index-recommend {
  position: relative;
  padding-bottom: calc(40px + var(--slope-1px-md) * 84);
}

.p-index-recommend__inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: calc(100% + var(--outer-margin));
}

.p-index-recommend__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 0;
  margin-bottom: calc(32px + var(--slope-1px) * 16);
}

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

.p-index-recommend__title {
  padding-bottom: calc(18px + var(--slope-1px-md) * 6);
  border-bottom: 1px solid var(--key-color);
  font-weight: 700;
  font-size: calc(26px + var(--slope-1px) * 6);
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .p-index-recommend__title {
    border-bottom: 0;
    background: linear-gradient(to right, var(--key-color) 6em, var(--border-color) 6em) bottom left/100% 1px no-repeat;
  }
}

.p-index-recommend__lead {
  font-weight: 500;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1;
}

@media screen and (min-width: 769px) {
  .p-index-recommend__lead {
    padding-top: .5em;
    padding-bottom: calc(18px + var(--slope-1px-md) * 6);
    padding-left: 16px;
    border-bottom: 1px solid var(--border-color);
  }
}

.p-index-recommend__line {
  position: absolute;
  top: 0;
  left: calc(var(--outer-margin) * -1);
  z-index: -1;
  width: calc(var(--vw) * 100);
}

@media screen and (max-width: 768px) {
  .p-index-recommend__line {
    transform: translateY(-10%);
  }
}

.p-index-recommend-slider {
  overflow: hidden;
  width: 100%;

  --gap: 40px;
  --slide-width: 640px;
}

@media screen and (max-width: 768px) {
  .p-index-recommend-slider {
    --gap: var(--outer-margin);
    --slider-width: 100%;
  }
}

.p-index-recommend-slider__list {
  overflow: visible;
  width: calc((var(--slide-width) + var(--gap)) * 2);
  margin-inline: calc(var(--gap) * -.5);
}

@media screen and (max-width: 768px) {
  .p-index-recommend-slider__list {
    width: 100%;
    margin-inline: 0;
  }
}

.p-index-recommend-slider__list .slick-list {
  overflow: visible;
}

.p-index-recommend-slider__list img {
  border-radius: 20px;
}

.p-index-recommend-slider__list:has(.p-index-recommend-slider__item:nth-child(2):last-child) {
  width: 100%;
}

.p-index-recommend-slider__item {
  padding-inline: calc(var(--gap) * .5);
}

@media screen and (max-width: 768px) {
  .p-index-recommend-slider__item {
    padding-inline: 0 var(--gap);
  }
}

.p-index-recommend-slider__item a {
  display: block;
  transition: opacity .2s ease-out;
}

@media (any-hover: hover) {
  .p-index-recommend-slider__item a:hover {
    opacity: .7;
  }
}

.p-index-recommend-slider__control {
  padding-right: var(--outer-margin);
}

/* p-index-search
============================== */
.p-index-search {
  position: relative;
  padding-block: calc(64px + var(--slope-1px-md) * 56) calc(56px + var(--slope-1px-md) * 48);
}

.p-index-search:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--bg-color);
  transform: translateX(-50%);
}

.p-index-search__head {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 32px 40px;
  margin-bottom: calc(32px + var(--slope-1px-md) * 16);
}

@media screen and (max-width: 1000px) {
  .p-index-search__head {
    grid-template-columns: auto 1fr;
  }
}

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

.p-index-search__text {
  margin-block: var(--leading-trim);
  font-size: calc(15px + var(--slope-1px-md) * 1);
  line-height: 1.75;
}

.p-index-search__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 24px 32px;
}

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

.p-index-search__foot {
  margin-top: calc(32px + var(--slope-1px-md) * 24);
}

.p-index-search__line {
  position: absolute;
  top: 0;
  left: calc(var(--outer-margin) * -1);
  z-index: -1;
  width: calc(var(--vw) * 100);
}

/* p-index-search-counter
============================== */
.p-index-search-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
}

@media screen and (max-width: 1000px) {
  .p-index-search-counter {
    grid-column: span 2;
  }
}

@media screen and (max-width: 768px) {
  .p-index-search-counter {
    grid-column: span 1;
  }
}

.p-index-search-counter__head {
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px-md) * 4);
  line-height: 1.3;
}

.p-index-search-counter__body {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.p-index-search-counter__number {
  display: contents;
}

.p-index-search-counter__number > span {
  display: block;
  padding: 10px 4px calc(10px + .05em);
  border-radius: 6px;
  background: var(--base-color);
  color: #fff;
  font-weight: 500;
  font-size: calc(56px + var(--slope-1px-md) * 16);
  line-height: .7;
}

.p-index-search-counter__unit {
  padding-bottom: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}

/* p-index-search-block
============================== */
.p-index-search-block {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px) * 8);
  padding: calc(40px + var(--slope-1px) * 8) calc(24px + var(--slope-1px) * 16);
  border-radius: 20px;
  background: #fff;
}

.p-index-search-block__head {
  margin-top: var(--leading-trim);
  border-bottom: 1px solid var(--border-color);
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px) * 4);
}

.p-index-search-block__head span {
  position: relative;
  display: block;
  width: fit-content;
  padding-bottom: calc(18px + var(--slope-1px) * 2 + var(--leading-trim));
}

.p-index-search-block__head span:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--key-color);
}

.p-index-search-block__body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-index-search-block__body._price {
  grid-template-columns: repeat(2, 1fr);
}

.p-index-search-block__body a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  color: var(--base-color);
  text-decoration: none;
  font-weight: 700;
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1;
  transition: all .2s ease-out;
}

@media (any-hover: hover) {
  .p-index-search-block__body a:hover {
    background: var(--base-color);
    color: #fff;
  }
}

.p-index-search-block__body a em {
  font-weight: 400;
  font-size: calc(22px + var(--slope-1px) * 2);
  font-family: var(--en-font-family);
}

.p-index-search-block__body a:has(em) {
  align-items: baseline;
  padding-top: 12px;
}

/* p-index-search-nav
============================== */
.p-index-search-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px + var(--slope-1px) * 4);
  width: 560px;
  max-width: 100%;
  margin-inline: auto;
  font-weight: 700;
}

.p-index-search-nav__label {
  display: flex;
  justify-content: center;
  margin-block: var(--leading-trim);
  letter-spacing: 0;
  font-size: calc(13px + var(--slope-1px) * 3);
}

.p-index-search-nav__label:before {
  content: "\FF3C";
}

.p-index-search-nav__label:after {
  content: "\FF0F";
}

.p-index-search-nav__button {
  position: relative;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: calc(72px + var(--slope-1px-md) * 48);
  padding-inline: 16px;
  border: 1px solid var(--key-color);
  border-radius: var(--ovall-radius);
  background: linear-gradient(242deg, var(--g-color-0) var(--g-pos-0), var(--g-color-1) var(--g-pos-1));
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(20px + var(--slope-1px-md) * 12);
  transition: .3s cubic-bezier(.215, .61, .355, 1);
  transition-property: all, --g-color-0, --g-pos-0, --g-color-1, --g-pos-1;

  --g-color-0: #ffbc2c;
  --g-pos-0: 0%;
  --g-color-1: #f40;
  --g-pos-1: 100%;
}

.p-index-search-nav__button:hover {
  --g-pos-1: 0%;
}

.p-index-search-nav__button:before {
  content: "";
  display: block;
  width: calc(26px + var(--slope-1px-md) * 16);
  aspect-ratio: 1/1;
  background: currentColor;
  mask: var(--icon-car) 50% 50%/contain no-repeat;
}

/* p-index-latest
============================== */
.p-index-latest {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  gap: calc(32px + var(--slope-1px-md) * 35);
  padding-block: calc(64px + var(--slope-1px-md) * 59) calc(64px + var(--slope-1px-md) * 47);
  color: #fff;
}

.p-index-latest:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--key-gradation);
  transform: translateX(-50%);
}

/* p-index-latest-slider
============================== */
.p-index-latest-slider {
  display: grid;
  grid-template-columns: 100%;
  gap: 23px;
  overflow: hidden;
  width: calc(100% + var(--outer-margin) * 2);
  margin-inline: calc(var(--outer-margin) * -1);
}

.p-index-latest-slider__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--card-width));
  gap: var(--gap);
  width: calc(var(--slider-width) * 2);
  padding-right: var(--gap);

  --slider-width: calc(var(--card-width) * 3 + var(--gap) * 3);
  --card-width: 675px;
  --gap: 24px;
  --duration: 30s;
}

@media screen and (max-width: 768px) {
  .p-index-latest-slider__list {
    --card-width: 345px;
    --duration: 20s;
  }
}

.p-index-latest-slider__list.is-moving {
  animation: latestSlider var(--duration) linear infinite;
}

.p-index-latest-slider__list._second.is-moving {
  animation: latestSlider var(--duration) linear reverse infinite;
}

@keyframes latestSlider {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--slider-width) * -1));
  }
}

/* p-index-latest-card
============================== */
.p-index-latest-card {
  display: grid;
  grid-template-columns: 284px 1fr auto;
  grid-template-areas: "image contents arrow";
  gap: var(--card-gap);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  color: var(--base-color);
  text-decoration: none;
  font-family: var(--base-font-family);
  transition: opacity .2s ease-out;

  --card-gap: 32px;
  --item-gap: 16px;
}

@media (any-hover: hover) {
  .p-index-latest-card:hover {
    opacity: .8;
  }
}

@media screen and (max-width: 768px) {
  .p-index-latest-card {
    grid-template-columns: 136px 1fr auto;
    grid-template-areas: "image head arrow" "body body arrow";

    --card-gap: 16px;
    --item-gap: 12px;
  }
}

.p-index-latest-card:after {
  content: "";
  align-self: center;
  grid-area: arrow;
  width: calc(16px + var(--slope-1px) * 4);
  height: calc(16px + var(--slope-1px) * 4);
  margin-right: var(--card-gap);
  background: currentColor;
  mask: var(--icon-angle) 50% 50%/contain no-repeat;
}

.p-index-latest-card__image {
  grid-area: image;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .p-index-latest-card__image {
    border-bottom-right-radius: 20px;
  }
}

.p-index-latest-card__image img {
  width: 100%;
  height: 217px;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .p-index-latest-card__image img {
    height: 104px;
  }
}

.p-index-latest-card__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-area: contents;
  gap: var(--card-gap);
}

@media screen and (max-width: 768px) {
  .p-index-latest-card__contents {
    display: contents;
  }
}

.p-index-latest-card__head {
  display: grid;
  align-self: center;
  grid-template-columns: 100%;
  grid-area: head;
  gap: var(--item-gap);
  font-size: calc(12px + var(--slope-1px) * 1);
}

.p-index-latest-card__head > * {
  margin-block: var(--leading-trim);
}

.p-index-latest-card__car {
  font-weight: 700;
  font-size: calc(18px + var(--slope-1px) * 2);
}

.p-index-latest-card__detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-index-latest-card__body {
  display: grid;
  grid-template-columns: 100%;
  grid-area: body;
  gap: var(--item-gap);
}

@media screen and (max-width: 768px) {
  .p-index-latest-card__body {
    padding-bottom: 24px;
    padding-left: 24px;
  }
}

.p-index-latest-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-weight: 500;
  font-size: calc(12px + var(--slope-1px) * 2);
}

.p-index-latest-card__price > dl {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
}

.p-index-latest-card__price > dl > dd:has(em) {
  color: var(--key-color);
  font-size: calc(13px + var(--slope-1px) * 1);
}

.p-index-latest-card__price > dl > dd em {
  font-weight: 500;
  font-size: calc(20px + var(--slope-1px) * 2);
}

/* p-index-wide-image
============================== */
.p-index-wide-image {
  position: relative;
  left: 50%;
  overflow: hidden;
  width: calc(var(--vw) * 100);
  height: calc(300px + var(--slope-1px) * 220);
  transform: translateX(-50%);
}

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

/* p-index-showroom
============================== */
.p-index-showroom {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 50%;
  gap: 56px 80px;
  width: 100%;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .p-index-showroom {
    grid-template-columns: 100%;
    padding-block: 72px 64px;
  }
}

.p-index-showroom:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--key-color);
  transform: translateX(-50%);
}

.p-index-showroom__contents {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(32px + var(--slope-1px-md) * 32);
  width: 100%;
}

.p-index-showroom__head {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(32px + var(--slope-1px-md) * 8);
}

.p-index-showroom__body {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(16px + var(--slope-1px-md) * 8);
  width: 100%;
}

.p-index-showroom__text {
  letter-spacing: 0;
}

.p-index-showroom__nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

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

/* p-index-showroom-gallery
============================== */
.p-index-showroom-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  overflow: hidden;
  width: 100%;
  height: var(--gallery-height);

  --gallery-height: 644px;
  --image-width: 100%;
  --gap: calc(16px + var(--slope-1px) * 8);
  --length: 5;
}

@media screen and (max-width: 768px) {
  .p-index-showroom-gallery {
    grid-template-columns: 100%;
    gap: var(--gap) 0;
    width: calc(100% + var(--inner-padding) * 2);
    height: auto;
    margin-inline: calc(var(--inner-padding) * -1);

    --image-width: calc(100 / 375 * 184 * var(--vw));
  }
}

.p-index-showroom-gallery__slider {
  display: grid;
  grid-template-columns: 100%;
  gap: var(--gap);
}

@media screen and (max-width: 768px) {
  .p-index-showroom-gallery__slider {
    grid-template-columns: repeat(2, 1fr);
    width: calc(var(--image-width) * var(--length) + var(--gap) * var(--length));
    padding-left: var(--gap);
  }
}

.p-index-showroom-gallery__slider._first {
  transform: translateY(calc(-100% + var(--gallery-height)));

  --direction: 1;
}

@media screen and (max-width: 768px) {
  .p-index-showroom-gallery__slider._first {
    transform: translateX(calc(var(--vw) * 100 - 200%));
  }
}

.p-index-showroom-gallery__slider._second {
  --direction: -1;
}

.p-index-showroom-gallery__slider.is-moving > * {
  animation: verticalMarquee linear calc(6.5s * var(--length)) infinite;
}

@media screen and (max-width: 768px) {
  .p-index-showroom-gallery__slider.is-moving > * {
    animation: horizontalMarquee linear calc(6.5s * var(--length)) infinite;
  }
}

.p-index-showroom-gallery__list {
  display: grid;
  grid-template-columns: 100%;
  gap: var(--gap);
}

@media screen and (max-width: 768px) {
  .p-index-showroom-gallery__list {
    grid-template-columns: repeat(var(--length), 1fr);
  }
}

.p-index-showroom-gallery__list > li {
  overflow: hidden;
  width: var(--image-width);
  aspect-ratio: 288/380;
  border-radius: 16px;
}

.p-index-showroom-gallery__list > li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes verticalMarquee {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100% * var(--direction)));
  }
}

@keyframes horizontalMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% * var(--direction)));
  }
}

/* p-index-feature
============================== */
.p-index-feature {
  position: relative;
  left: calc(var(--outer-margin) * -1);
  width: calc(var(--vw) * 100);
  padding-inline: var(--inner-padding);

  --sticky-pos: 0px;
  --padding-block: calc(56px + var(--slope-1px-md) * 64);
  --item-height: calc(var(--vh) * 100 - var(--sticky-height));
  --card-height: min(476px, calc(100vh - var(--sticky-height)));
}

@media screen and (min-width: 769px) {
  .p-index-feature {
    --sticky-pos: calc((100vh - var(--card-height)) / 2);
    --item-height: calc(var(--vh) * 100);
    --card-height: min(660px, calc(100vh - var(--header-height)));
  }
}

.p-index-feature:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: calc(var(--vw) * 100);
  height: 100%;
  background: var(--bg-color);
  transform: translateX(-50%);
}

.p-index-feature__inner {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 24px 85px;
  width: var(--inner-width-px);
  max-width: 100%;
  margin-inline: auto;
  padding-block: var(--padding-block);
}

@media screen and (max-width: 768px) {
  .p-index-feature__inner {
    grid-template-columns: 100%;
    width: calc(345px + var(--slope-1px) * 30);
  }
}

.p-index-feature__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

@media screen and (min-width: 769px) {
  .p-index-feature__head {
    position: sticky;
    top: var(--header-height);
    align-self: flex-start;
    grid-column: 2/3;
    gap: calc(40px + var(--slope-1px-md) * 24);
    min-height: calc(100vh - var(--header-height));
  }
}

@media screen and (max-width: 768px) {
  .p-index-feature__head {
    display: contents;
  }
}

.p-index-feature__body {
  display: grid;
  grid-template-columns: 100%;
  gap: 24px;
}

@media screen and (min-width: 769px) {
  .p-index-feature__body {
    grid-column: 1/2;
    grid-row: 1/2;
    gap: 50vh;
  }
}

.p-index-feature__item {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--item-height);

  --scroll-progress: 0;
  --entry-progress: -1;
}

@media screen and (max-width: 768px) {
  .p-index-feature__item {
    margin-block: calc((var(--card-height) - var(--item-height)) * .25);
  }
}

.p-index-feature__line {
  position: sticky;
  z-index: -1;
  width: calc(var(--vw) * 100 / 1366 * 520);
  pointer-events: none;
}

.p-index-feature__line._top {
  top: 0;
}

.p-index-feature.is-passed .p-index-feature__line._top {
  opacity: 0;
}

.p-index-feature__line._top svg {
  top: 0;
}

.p-index-feature__line._bottom {
  bottom: 0;
  opacity: 0;
}

.p-index-feature.is-passed .p-index-feature__line._bottom {
  opacity: 1;
}

.p-index-feature__line._bottom svg {
  top: calc(var(--vh) * -100);
}

.p-index-feature__line svg {
  position: absolute;
  left: calc(var(--outer-margin) * -1);
}

@media screen and (min-width: 769px) {
  .p-index-feature__line {
    grid-column: span 2;
  }
}

/* p-index-feature-title
============================== */
.p-index-feature-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  font-size: calc(36px + var(--slope-1px-md) * 20);
  line-height: 1;
}

.p-index-feature-title:before {
  content: "";
  display: block;
  width: calc(80px + var(--slope-1px-md) * 240);
  aspect-ratio: 320/202;
  margin-bottom: calc(32px + var(--slope-1px-md) * 16);
  background: url(../img/logo-symbol.svg) 50% 50%/contain no-repeat;
}

.p-index-feature-title:after {
  content: attr(data-en);
  margin-top: calc(22px + var(--slope-1px-md) * 6);
  color: var(--key-color);
  font-weight: 500;
  font-size: calc(16px + var(--slope-1px-md) * 2);
  font-family: var(--en-font-family);
}

/* p-index-feature-block
============================== */
.p-index-feature-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: var(--card-height);
  padding: calc(30px + var(--slope-1px-md) * 26) calc(24px + var(--slope-1px-md) * 24);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .06);
  text-align: center;
  line-height: 1;
  transform: scale(calc(1 - var(--scroll-progress) * .05)) translateY(calc(-2% * var(--scroll-progress)));
  transform-origin: top center;
}

@media screen and (min-width: 769px) {
  .p-index-feature-block {
    height: auto;
  }
}

.p-index-feature-block__head {
  margin-bottom: calc(32px + var(--slope-1px-md) * 8);
}

.p-index-feature-block__index {
  margin-bottom: 1em;
  color: var(--key-color);
  font-weight: 400;
  font-size: calc(24px + var(--slope-1px-md) * 8);
  font-family: var(--en-font-family);
  line-height: .8;
}

.p-index-feature-block__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px-md) * 8);
}

.p-index-feature-block__title:after {
  content: attr(data-en);
  color: #aaa;
  font-weight: 400;
  font-size: calc(12px + var(--slope-1px-md) * 2);
  font-family: var(--en-font-family);
  line-height: .8;
}

.p-index-feature-block__body {
  margin-block: var(--leading-trim);
  letter-spacing: 0;
  font-size: calc(15px + var(--slope-1px-md) * 1);
  line-height: 1.75;
}

.p-index-feature-block__body > p {
  width: calc(100% + .5em);
  margin-inline: -.25em;
  white-space: nowrap;
}

.p-index-feature-block__image {
  margin-top: calc(32px + var(--slope-1px-md) * 16);
}

@media screen and (max-width: 768px) {
  .p-index-feature-block__image {
    width: 297px;
    margin-inline: auto;
  }
}

/* p-index-feature-pager
============================== */
.p-index-feature-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
}

@media screen and (max-width: 768px) {
  .p-index-feature-pager {
    position: sticky;
    bottom: calc(var(--sticky-height) + 10px);
    z-index: 2;
    grid-row: 3/4;
  }
}

.p-index-feature-pager > li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 32px;
  border: 1px solid #fff;
  border-radius: 32px;
  color: var(--base-color);
  font-weight: 400;
  font-family: var(--en-font-family);
}

.p-index-feature-pager > li.is-current {
  background: #fff;
  color: var(--key-color);
}

/* p-index-footer
============================== */
.p-index-footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px calc(100% / 1200 * 48);
  padding-block: calc(56px + var(--slope-1px-md) * 32);
}

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

/* p-index-footer-block
============================== */
.p-index-footer-block {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-color);
}

.p-index-footer-block__contents {
  padding: calc(48px + var(--slope-1px-md) * 16) calc(24px + var(--slope-1px-md) * 24) calc(40px + var(--slope-1px-md) * 8);
}

.p-index-footer-block._maintenance .p-index-footer-block__contents {
  background: url(../img/index/nav-maintenance-line.svg) bottom right /72.47387% no-repeat;
}

.p-index-footer-block._guarantee .p-index-footer-block__contents {
  background: url(../img/index/nav-guarantee-line.svg) bottom left/100% auto no-repeat;
}

.p-index-footer-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(32px + var(--slope-1px-md) * 8);
  font-weight: 700;
  font-size: calc(24px + var(--slope-1px-md) * 8);
  line-height: 1;
}

.p-index-footer-block__head:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(10px + var(--slope-1px-md) * 2);
  height: calc(3px + var(--slope-1px-md) * 1);
  border-radius: 4px;
  background: var(--key-color);
}

.p-index-footer-block__body {
  margin-block: var(--leading-trim);
  font-size: calc(15px + var(--slope-1px-md) * 1);
  line-height: 1.75;
}

.p-index-footer-block__foot {
  justify-self: flex-start;
  width: calc(297px + var(--slope-1px-md) * 23);
  margin-top: calc(24px + var(--slope-1px-md) * 8);
}

.p-index-footer-block__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: calc(54px + var(--slope-1px-md) * 10);
  border-radius: 64px;
  background: var(--base-color);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(16px + var(--slope-1px-md) * 4);
  transition: opacity .2s ease-out;
}

@media (any-hover: hover) {
  .p-index-footer-block__button:hover {
    opacity: .8;
  }
}

.p-index-footer-block__button > i {
  display: block;
  flex-shrink: 0;
  width: calc(22px + var(--slope-1px-md) * 6);
  aspect-ratio: 1/1;
}

.p-index-footer-block__button > i svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.p-index-footer-block__image {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 576/290;
}

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

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

showroom

* ============================================================= */
/* p-showroom-nearby
============================== */
.p-showroom-nearby .c-nearby-block__search {
  padding-block: calc(24px + var(--slope-1px) * 24);
}

.p-showroom-nearby .c-nearby-block__head {
  display: none;
}

.p-showroom-nearby .c-nearby-nav-container {
  display: none;
}

/* p-showroom-map
============================== */
.p-showroom-map {
  overflow: hidden;
  width: 100%;
  height: calc(310px + var(--slope-1px) * 190);
  border-radius: 20px;
  background: var(--bg-color);
}

.p-showroom-map iframe {
  width: 100%;
  height: 100%;
}

/* p-showroom-filter
============================== */
.p-showroom-filter {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px) * 8);
}

.p-showroom-filter__body {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 24px 32px;
  max-width: 100%;
  padding: calc(24px + var(--slope-1px) * 8);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .13);
}

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

.p-showroom-filter__title {
  margin-block: var(--leading-trim);
}

.p-showroom-filter__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: fit-content;
}

@media screen and (max-width: 768px) {
  .p-showroom-filter__list {
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    width: 100%;
  }
}

.p-showroom-filter__list label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 236px;
  height: 52px;
  padding-inline: 24px;
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  font-size: calc(15px + var(--slope-1px) * 1);
  cursor: pointer;
  transition: all .2s;
}

@media screen and (max-width: 768px) {
  .p-showroom-filter__list label {
    width: 100%;
  }
}

@media (any-hover: hover) {
  .p-showroom-filter__list label:hover {
    background: var(--base-color);
    color: #fff;
  }
}

.p-showroom-filter__list label input {
  width: calc(15px + var(--slope-1px) * 2);
  border: 1px solid var(--base-color);
  border-radius: 3px;
  background: #fff;

  accent-color: var(--base-color);
}

.p-showroom-filter__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.p-showroom-filter__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: calc(275px + var(--slope-1px) * -43);
  height: 56px;
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: var(--base-color);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: all .2s;
  appearance: none;
}

.p-showroom-filter__button:hover {
  opacity: .8;
}

.p-showroom-filter__button._clear {
  background: #fff;
  color: var(--base-color);
}

.p-showroom-filter__button._search:before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(15px + var(--slope-1px) * 3);
  aspect-ratio: 1/1;
  background: currentColor;
  mask: var(--icon-search) 50% 50%/contain no-repeat;
}

/* p-showroom-list
============================== */
.p-showroom-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: calc(40px + var(--slope-1px) * 24);
}

.p-showroom-list__item {
  display: contents;
}

/* p-showroom-card
============================== */
.p-showroom-card {
  display: none;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
}

.p-showroom-card.is-show {
  display: block;
}

.p-showroom-card__image {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2/1;
}

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

.p-showroom-card__image:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 115, 0, .4);
  transition: transform .45s cubic-bezier(.23, 1, .32, 1);
  transform: scaleY(0);
  transform-origin: left bottom;
}

.p-showroom-card:hover .p-showroom-card__image:after {
  transform: scaleY(1);
}

.p-showroom-card__contents {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  gap: calc(24px + var(--slope-1px) * 8);
  padding: 32px calc(24px + var(--slope-1px) * 8) 40px;
}

.p-showroom-card__head {
  margin-block: var(--leading-trim);
  font-weight: 700;
  font-size: calc(22px + var(--slope-1px) * 2);
}

.p-showroom-card__body {
  position: relative;
  margin-block: var(--leading-trim);
  font-size: calc(15px + var(--slope-1px) * 1);
}

.p-showroom-card__body:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  display: block;
  width: 18px;
  aspect-ratio: 1/1;
  background: currentColor;
  mask: var(--icon-arrow) 50% 50%/contain no-repeat;
}

/* gmapOpen
============================== */
.gmapOpen_shopName {
  margin-bottom: .25em;
  font-weight: bold;
}

.gmapOpen_shopName span {
  display: block;
}

.gmapOpen_shopName em {
  font-weight: bold;
  font-style: normal;
  font-size: 1.2em;
}

.gmapOpen_shopLocation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
}

.gmapOpen_shopUrl {
  margin-top: .25em;
}

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

sr.html

* ============================================================= */
/* p-sr-header-sp
============================== */
.p-sr-header-sp {
  margin-bottom: 32px;
}

@media screen and (min-width: 1001px) {
  .p-sr-header-sp {
    display: none;
  }
}

/* p-sr-header-pc
============================== */
.p-sr-header-pc {
  container-type: inline-size;
}

@media screen and (max-width: 1000px) {
  .p-sr-header-pc {
    display: none;
  }
}

/* p-sr-introduction
============================== */
.p-sr-introduction {
  display: grid;
  grid-template-columns: auto min(378px, 40%);
  gap: 24px 32px;
}

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

/* p-sr-image
============================== */
.p-sr-image {
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 2/1;
  border-radius: 20px;
}

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

/* p-sr-nav
============================== */
@media screen and (min-width: 1001px) {
  .p-sr-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .13);
  }
}

.p-sr-nav .c-sr-header {
  align-items: end;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.p-sr-nav .c-sr-header__nav {
  display: contents;
}

.p-sr-nav .c-sr-header__info {
  grid-column: span 2;
}

@media screen and (min-width: 769px) {
  .p-sr-nav .c-sr-header__info {
    grid-row: 3/4;
  }
}

.p-sr-nav__foot {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

.p-sr-nav__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: calc(48px + var(--slope-1px) * -2);
  border: 1px solid var(--base-color);
  border-radius: var(--ovall-radius);
  background: #fff;
  color: var(--base-color);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  font-size: calc(14px + var(--slope-1px) * 1);
  line-height: 1;
  transition: all .2s;
}

@media (any-hover: hover) {
  .p-sr-nav__button:hover {
    background: var(--base-color);
    color: #fff;
  }
}

.p-sr-nav__button > i {
  display: block;
  flex-shrink: 0;
  width: 22px;
  aspect-ratio: 1/1;
}

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

.p-sr-nav__button > i svg path {
  fill: currentColor;
}

/* p-sr-information
============================== */
.p-sr-information {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(28px + var(--slope-1px) * 12);
  margin-top: calc(56px + var(--slope-1px) * 24);
  margin-bottom: calc(40px + var(--slope-1px) * 32);
}

.p-sr-information__head {
  border-bottom: 1px solid var(--border-color);
}

.p-sr-information__title {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: -1px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--key-color);
  font-weight: 700;
  font-size: calc(22px + var(--slope-1px) * 4);
  line-height: 1;
}

.p-sr-information__body {
  display: grid;
  align-items: flex-start;
  grid-template-columns: auto min(378px, 40%);
  gap: 32px;
}

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

/* p-sr-profile
============================== */
.p-sr-profile {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(26px + var(--leading-trim));
  font-size: calc(15px + var(--slope-1px) * 1);

  --padding-block: calc(12px + var(--slope-1px) * 4 + var(--leading-trim));
  --padding-inline: calc(12px + var(--slope-1px) * 4);
}

@media screen and (min-width: 769px) {
  .p-sr-profile {
    gap: 0px;
    border-top: 1px solid var(--border-color);

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

.p-sr-profile__item {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(16px + var(--leading-trim));
}

@media screen and (min-width: 769px) {
  .p-sr-profile__item {
    grid-template-columns: calc(96px + var(--slope-1px) * 16) 1fr;
    gap: 0px;
    border-bottom: 1px solid var(--border-color);
  }
}

.p-sr-profile__head {
  display: flex;
  align-items: center;
  padding: var(--padding-block) var(--padding-inline);
  background: var(--bg-color);
}

@media screen and (min-width: 769px) {
  .p-sr-profile__head {
    border-right: 1px solid var(--border-color);
  }
}

.p-sr-profile__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-self: center;
  gap: .25em 1em;
  padding: var(--padding-block) var(--padding-inline);
}

@media screen and (max-width: 768px) {
  .p-sr-profile__body {
    align-items: flex-start;
    padding-block: 0;
  }
}

/* p-sr-facility
============================== */
.p-sr-facility {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
  gap: 6px 24px;
  width: 100%;
  font-size: calc(14px + var(--slope-1px) * 1);
  line-height: 18px;
}

.p-sr-facility > li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.p-sr-facility > li > i {
  display: block;
  flex-shrink: 0;
  width: calc(22px + var(--slope-1px) * 2);
}

.p-sr-facility > li > i svg {
  width: 100%;
}

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

/* p-sr-calendar
============================== */
.p-sr-calendar {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--base-border-radius);
  background: #fff;
}

.p-sr-calendar__head {
  padding: 18px;
  background: var(--bg-color);
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* p-sr-gallery-message
============================== */
.p-sr-gallery-message {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 33px;
}

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

.p-sr-gallery-message__item {
  display: grid;
  grid-template-columns: 100%;
  gap: calc(20px + var(--slope-1px) * 4);
}

.p-sr-gallery-message__image {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 378/284;
  border-radius: 20px;
}

.p-sr-gallery-message__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-sr-gallery-message__text {
  font-size: calc(14px + var(--slope-1px) * 1);
  line-height: 1.75;
}

/* p-sr-gallery-slider
============================== */
.p-sr-gallery-slider {
  width: calc(100% + var(--gap));
  margin-inline: calc(var(--gap) * -.5);

  --gap: 33px;
}

.p-sr-gallery-slider:not(.slick-initialized) {
  display: flex;
  overflow: hidden;
}

.p-sr-gallery-slider:not(.slick-initialized) .p-sr-gallery-slider__item {
  flex-shrink: 0;
  width: calc(100% / 3);
}

.p-sr-gallery-slider__item {
  padding-inline: calc(var(--gap) * .5);
}

.p-sr-gallery-slider__image {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 378/284;
  border-radius: 20px;
}

.p-sr-gallery-slider__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* p-sr-map
============================== */
.p-sr-map {
  width: 100%;
  height: calc(345px + var(--slope-1px) * 135);
  background: #fff;
}

.p-sr-map iframe {
  width: 100%;
  height: 100%;
}

/* p-sr-access
============================== */
.p-sr-access {
  display: grid;
  display: grid;
  grid-template-columns: 100%;
  grid-template-columns: auto 1fr;
  gap: 32px;
  margin-top: calc(24px + var(--slope-1px) * 16);
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  .p-sr-access {
    grid-template-columns: 100%;
    gap: 24px;
  }
}

.p-sr-access__item {
  display: contents;
}

@media screen and (max-width: 768px) {
  .p-sr-access__item {
    display: grid;
    grid-template-columns: 100%;
    gap: 16px;
  }
}

.p-sr-access__head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(12px + var(--slope-1px) * 4);
  background: #fff;
  text-align: center;
  line-height: 1;
}

.p-sr-access__body {
  margin-block: var(--leading-trim);
}

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

.p-sr-streetview iframe {
  display: block;
  width: 100%;
  height: 600px;
}

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

staff.html

* ============================================================= */
/* p-staff-contents
============================== */
.p-staff-contents {
  margin-bottom: calc(40px + var(--slope-1px) * 48);
}

.p-staff-contents .ATC-shop-contents-staff {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

@media screen and (max-width: 768px) {
  .p-staff-contents .ATC-shop-contents-staff {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 560px) {
  .p-staff-contents .ATC-shop-contents-staff {
    grid-template-columns: 100%;
  }
}

.p-staff-contents .ATC-shop-contents-staff-list {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: #fff;
}

.p-staff-contents .ATC-shop-contents-staff-list > ul {
  padding: 24px calc(24px + var(--slope-1px) * 8);
}

.p-staff-contents .ATC-shop-contents-staff-list.is-notready {
  width: 100%;
  border: 0;
}

.p-staff-contents .ATC-photo-thumb-frame {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 250 / 280;
  margin-inline: auto;
  line-height: 0;
}

.p-staff-contents .ATC-photo-thumb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-staff-contents .ATC-shop-contents-staff-list-name {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(20px + var(--leading-trim));
  overflow: hidden;
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
  font-size: 18px;
}

.p-staff-contents .ATC-shop-contents-staff-list-name > * {
  width: fit-content;
  max-width: 100%;
  color: var(--type-color);
  font-size: 14px;
  line-height: 1;
  line-height: 1;

  --type-color: var(--base-color);
}

.p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg01, .p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg10 {
  --type-color: #ff7300;
}

.p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg02 {
  --type-color: #0a5dc9;
}

.p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg03, .p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg04, .p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg05 {
  --type-color: #00aa8b;
}

.p-staff-contents .ATC-shop-contents-staff-list-name > *.ATC-staff-type-bg06 {
  --type-color: #f32ec1;
}

.p-staff-contents .ATC-shop-contents-staff-list-qualification {
  margin-block: var(--leading-trim);
  font-size: 13px;
}

.p-staff-contents .ATC-shop-contents-staff-list-qualification.is-empty {
  padding: 0;
  background: transparent;
}

.p-staff-contents .ATC-shop-contents-staff-list-comment {
  margin-top: 24px;
  padding: 10px;
  border-radius: 4px;
  background: var(--bg-color);
  font-size: 13px;
}

.p-staff-contents .ATC-shop-contents-staff-list-comment.is-empty {
  padding: 0;
  background: transparent;
}

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

blog.html

* ============================================================= */
/* p-blog-control
============================== */
.p-blog-control {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: auto 1fr;
  gap: 16px;
  width: 832px;
  max-width: 100%;
  margin-inline: auto;
  margin-bottom: calc(48px + var(--slope-1px) * 24);
  font-size: calc(15px + var(--slope-1px) * 1);
  line-height: 1;
}

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

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

.p-blog-control__form select {
  width: 100%;
  padding: 18px 40px 18px 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  background: var(--icon-down) right 24px top 50%/15px 15px no-repeat #fff;
  color: var(--base-color);
  font-size: 15px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

/* p-blog-contents
============================== */
.p-blog-contents {
  overflow: hidden;
  padding: calc(32px + var(--slope-1px) * 32) calc(24px + var(--slope-1px) * 40);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .13);
}

.p-blog-contents:not(:last-child) {
  margin-bottom: calc(40px + var(--slope-1px) * 40);
}

/* p-blog-pager
============================== */
.p-blog-pager {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin-top: calc(20px + var(--slope-1px) * 4);
  border-bottom: 1px solid var(--border-color);
}

.p-blog-pager:has(.p-blog-pager__nav) {
  padding-block: calc(20px + var(--slope-1px) * 4);
  border-top: 1px solid var(--border-color);
}

.p-blog-pager__nav {
  display: flex;
  align-items: center;
  gap: 1em;
  text-decoration: none;
  font-size: calc(14px + var(--slope-1px) * 1);
  transition: opacity .2s;
}

.p-blog-pager__nav:hover {
  opacity: .6;
}

.p-blog-pager__nav:after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  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;
  transform: rotate(180deg);
}

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

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

calendar

* ============================================================= */
/* p-calendar-control
============================== */
.p-calendar-control {
  display: none;
  margin-bottom: calc(32px + var(--slope-1px) * 8);
  font-size: 15px;
}

@media screen and (max-width: 768px) {
  .p-calendar-control {
    display: block;
  }
}

.p-calendar-control__head {
  margin-block: var(--leading-trim);
  padding-bottom: 16px;
}

.p-calendar-control__body select {
  width: 100%;
  padding: 18px 40px 18px 24px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  background: var(--icon-down) right 24px top 50%/15px 15px no-repeat #fff;
  color: var(--base-color);
  font-size: 15px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  appearance: none;
}

/* p-calendar-grid
============================== */
.p-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 33px;
  margin-bottom: calc(40px + var(--slope-1px) * 48);
}

@media screen and (max-width: 768px) {
  .p-calendar-grid {
    display: block;
    width: calc(100% + 20px);
    margin-inline: -10px;
  }
  .p-calendar-grid .c-calendar-item {
    align-self: flex-start;
    margin-inline: 10px;
  }
}

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

contact

* ============================================================= */
/* p-contact-lead-block
============================== */
.p-contact-lead-block {
  margin-block: var(--leading-trim);
}

/* p-contact-nearby
============================== */
.p-contact-nearby {
  margin-top: calc(28px + var(--slope-1px) * 12);
}