@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  background-color: #000;
}

body {
  background: #000;
  color: #fff;
  font-family: var(--font-family);
  font-feature-settings: "palt";
  letter-spacing: .1em;
  line-height: 1.4;
}

#main {
  position: relative;
  width: 100%;
  height: 100dvh;
  margin: 0 auto;
}

/* ===== parts */

h2 {
  font-weight: 500;
  text-align: center;
}

.text-center {
  text-align: center;
}

.text-small {
  font-size: .8em;
}

.section-notes {
  margin: 1.3rem auto 0;
  font-size: .65rem;
  text-align: center;
}

.button-outline,
.button-white {
  display: block;
  width: min(100%, 18rem);
  margin-inline: auto;
  text-align: center;
  text-decoration: none;
}

.button-outline {
  padding: .9rem;
  background: transparent;
  border: 1px solid currentColor;
  color: #fff;
  font-family: var(--font-family);
  font-size: 1rem;
}

.button-white {
  position: relative;
  padding: 1.2em .9rem;
  background: #fff;
  color: #000;
  font-size: 1.4rem;
  line-height: 1.1;
}

.button-white::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(90deg, #a87a15, #fcdb3f 21%, #a87a15 47%, #fcdb3f 73%, #a87a15);
  z-index: 5;
}

.button-white::after {
  content: '';
  position: absolute;
  inset: 5px;
  background: #fff;
  z-index: 10;
}

.button-white-content {
  position: relative;
  z-index: 15;
}

.button-white small {
  font-size: .65em;
}

/* ===== video */

.video-wrapper {
  position: absolute;
  inset: 0 auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #0006;
}

.bg-video {
  position: absolute;
  inset: 0 auto auto;
  width: auto;
  height: calc(100% - 15vw);
  margin: auto;
  object-fit: cover;
}

/* ===== splide */

.splide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.splide__track {
  height: 100%;
}

.splide__slide {
  overflow-y: auto;
}

.splide__slide:not(:has(> #opening)) {
  background-color: #000;
}

.slide-inner {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: fit-content;
  padding: 1rem 1rem 3rem;
}

.splide__arrows {
  position: absolute;
  inset: auto .7rem .7rem;
  display: flex;
  justify-content: space-between;
  z-index: 30;
  translate: 0 3rem;
  transition: translate 1.5s .5s;
}

body.loaded .splide__arrows {
  translate: 0;
}

.splide__arrow {
  width: 1.4rem;
  height: 1.4rem;
  padding: .3rem;
  appearance: none;
  border: none;
  border-radius: 50%;
}

.splide__arrow svg {
  width: 100%;
  height: auto;
}

.splide__arrow--prev svg {
  rotate: 180deg;
}

.splide__pagination {
  position: absolute;
  inset: auto 3rem 1rem;
  gap: .15rem;
  z-index: 30;
  translate: 0 3rem;
  transition: translate 1.5s .5s;
}

body.loaded .splide__pagination {
  translate: 0;
}

.splide__pagination__page {
  appearance: none;
  width: .8rem;
  height: .3rem;
  background: #fff5;
  border: none;
  border-radius: 0;
}

.splide__pagination__page.is-active {
  background: #fff;
}

#swipe-prompt {
  content: 'swipe →';
  position: absolute;
  inset: .5rem .7rem auto auto;
  translate: 0 -2em;
  transition: translate 1s 1s;
}

body.loaded #swipe-prompt {
  translate: 0;
}

body.loaded #swipe-prompt.is-hidden {
  opacity: 0;
  transition: opacity .5s;
}

.swipe-prompt-text {
  display: inline-block;
  text-shadow: 0 0 .5em #0005;
  animation: swipe-prompt 1.8s ease 5.5s both infinite;
}

/* ===== opening */

@keyframes swipe-prompt {
  0% { translate: 0 0; }
  50% { translate: -.7rem 0; }
  100% { translate: 0 0; }
}

#opening {
  background: url(img/showroom-front.webp) 0% 100% / 100% auto no-repeat;
  padding-bottom: min(7rem, 20vh);
}

#opening .slide-content {
  opacity: 0;
  transition: opacity 1.5s;
}

body.loaded #opening .slide-content {
  opacity: 1 !important;
}

h1 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.8;
}

.opening-feature-list {
  list-style: none;
  display: flex;
  justify-content: center;
  column-gap: 1.4em;
  margin: 1.7rem 0 3.5rem;
  padding: 0;
}

.opening-feature-item {
  display: grid;
  place-items: center;
  width: 6.8em;
  height: 6.8em;
  border: 1px solid;
  border-radius: 50%;
  font-size: 1.05em;
  text-align: center;
  line-height: 1.3;
}

/* ===== campaign */

#campaign {
  background: url(img/bg-ribbon-top.png) 0% 0% / 75% auto no-repeat,
      url(img/bg-ribbon-bottom.png) 100% 100% / 95% auto no-repeat,
      url(img/bg-sparkle.png) 100% 100% / 100% auto no-repeat,
      linear-gradient(90deg, #000, #553800);
}

.campaign-heading {
  font-size: 1.45rem;
  line-height: 1.25;
  text-shadow: 0 0 .6em #553800, 0 0 .2em #553800;
}

.campaign-heading .text-small {
  font-size: .7em;
}

.campaign-item {
  margin: 1.5rem auto 0;
}

.campaign-item-heading {
  display: flex;
  justify-content: center;
  align-items: baseline;
  column-gap: .3em;
  margin: 0 auto .4rem;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
}

.campaign-item-heading::before,
.campaign-item-heading::after {
  content: '';
  display: inline-block;
  width: calc(2.61em * 0.7);
  height: calc(1em * 0.7);
  vertical-align: baseline;
}

.campaign-item-heading::before {
  background: url(img/ornament-left.png) 50% / contain no-repeat;
}

.campaign-item-heading::after {
  background: url(img/ornament-right.png) 50% / contain no-repeat;
}

.campaign-item-figure {
  text-align: center;
}

.campaign-item-image {
  width: min(52%, 250px);
  height: auto;
  margin: 0 auto .4rem;
}

/* ===== line up */

#lineup {
  padding-top: 2.3rem;
}

.heading-with-line {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .8em;
  margin: .7em 0 .8em;
  font-weight: 500;
}

.heading-with-line::before,
.heading-with-line::after {
  content: '';
  flex: 1 0 auto;
  border-bottom: 1px solid;
}

.lineup-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: 1rem;
  row-gap: .4rem;
}

.lineup-item-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.lineup-item-caption {
  width: 100%;
  height: 2lh;
  margin: .3em auto 0;
  font-size: .72em;
  text-align: center;
  letter-spacing: .05em;
  transform: scale(.9, 1.1);
}

/* ===== experience */

#experience {
  justify-content: start;
}

.experience-image {
  width: calc(100% + 2rem);
  height: auto;
  max-height: 40vh;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 40% 50%;
  margin: -1rem -1rem 1.3rem;
}

.experience-list {
  width: fit-content;
  margin: 0 auto;
}

.experience-item {
  margin: 1.2rem auto 0;
  padding: .7rem;
  border: 1px solid;
  text-align: center;
}

.experience-item-title {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: .5em;
}

.experience-item-icon {
  max-width: 3rem;
  max-height: 2rem;
  aspect-ratio: initial;
}

.experience-item-title-inner {
  display: inline-block;
  line-height: 1.15;
}

.experience-item-title-text {
  display: inline-block;
  font-size: 1.3em;
  letter-spacing: 0.03em;
  transform: scaleX(.9);
}

.experience-item-explain {
  margin: .7em 0 0;
  font-size: .7em;
  letter-spacing: .06em;
}

/* ===== shop */

#shop {
  justify-content: start;
}

.shop-image {
  width: calc(100% + 2rem);
  height: auto;
  max-height: 45vh;
  object-fit: cover;
  object-position: 50% 80%;
  margin: -1rem -1rem 2rem;
}

.shop-heading {
  margin: 0 auto 1rem;
  font-size: 1.2rem;
}

hr {
  align-self: stretch;
  width: 96%;
  margin: 1.8rem auto;
}

address {
  font-style: normal;
  text-align: center;
}

.shop-name-wrapper {
  margin: 0 auto .85rem;
}

.shop-label {
  margin: 0 auto .3em;
  font-size: .8rem;
}

.shop-name {
  font-size: 1.3rem;
  font-weight: 500;
}

.shop-explain {
  font-size: .72rem;
  letter-spacing: .05em;
}

.shop-tel {
  display: block;
  margin: .2rem auto;
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
}

.shop-tags {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1rem;
  margin: 1.5rem auto 0;
  font-size: .72rem;
}

.shop-tag {
  width: 10.5em;
  padding: .25em 0;
  border: 1px solid;
}

/* ===== action */

#action {
  padding-top: clamp(1rem, 10vh, 8vw);
  /* background: url(img/car-front.webp) 0% 100% / contain no-repeat;
  background: image-set(url(img/car-front.webp) 1x, url(img/car-front@2x.webp) 2x) 0% 100% / contain no-repeat; */
}

.emblem-image {
  width: 60%;
  height: auto;
  margin: 0 auto clamp(1rem, 3vh, 8vw);
}

.action-heading {
  margin: 0 auto 1.7rem;
  font-size: 1.2rem;
}

#action .button-white {
  margin-block: 0 2rem;
}

#action .section-notes {
  padding-bottom: 2rem;
}

/* ===== responsive */

@media screen and (min-width: 780px) {
  .bg-video {
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  #main {
    width: calc(100svh * 0.45);
  }
}

@media (hover: hover) {
  .button-white,
  .button-outline {
    transition: all .6s;
    cursor: pointer;
  }

  .button-white:hover,
  .button-outline:hover {
    opacity: .6;
    transition: all .3s;
  }
}