@charset "UTF-8";
@font-face {
  font-family: "audi_type";
  src: local("AudiType-Normal"), url("/common/footer/font/AudiTypeV02-Normal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "audi_type";
  src: local("AudiType-Bold"), url("/common/footer/font/AudiTypeV02-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "audi_type_extended";
  src: local("AudiType-ExtendedNormal"), url("/common/footer/font/AudiTypeV02-ExtendedNormal.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "audi_type_extended";
  src: local("AudiType-ExtendedBold"), url("/common/footer/font/AudiTypeV02-ExtendedBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: min(15.2777777778vw, 220px);
  height: min(3.1944444444vw, 46px);
  border-radius: min(2.4305555556vw, 35px);
  padding-inline: min(1.5277777778vw, 22px);
  gap: min(0.6944444444vw, 10px);
  background-color: #657081;
  color: #fcfcfd;
  text-decoration: none;
  transition: background-color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
@media screen and (min-width: 769px) {
  .button:hover {
    background-color: #2c343f;
  }
}
@media screen and (max-width: 768px) {
  .button {
    min-width: 66.6666666667vw;
    height: 11.7948717949vw;
    border-radius: 8.9743589744vw;
    padding-inline: 5.641025641vw;
    gap: 2.5641025641vw;
  }
}
.button.colorBlack {
  background-color: #101319;
  min-width: min(17.7777777778vw, 256px);
}
@media screen and (min-width: 769px) {
  .button.colorBlack:hover {
    background-color: rgb(44, 52, 63);
  }
}
@media screen and (max-width: 768px) {
  .button.colorBlack {
    min-width: 85.641025641vw;
  }
}

.button-txt {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: min(0.9722222222vw, 14px);
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .button-txt {
    font-size: 3.5897435897vw;
  }
}

.button-icon {
  display: flex;
  width: min(0.8333333333vw, 12px);
  height: min(0.8333333333vw, 12px);
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .button-icon {
    width: 3.0769230769vw;
    height: 3.0769230769vw;
  }
}
.button-icon svg {
  width: 100%;
  height: 100%;
}

.mv {
  position: relative;
  height: 100vh;
  background-color: #020203;
}

.mv-panels {
  display: flex;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  .mv-panels {
    flex-direction: column;
  }
}

.mv-panel {
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .mv-panel {
    flex: 0 0 50%;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .mv-panel {
    flex: 1;
    width: 100%;
  }
}
.mv-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 768px) {
  .mv-panel--person {
    order: -1;
  }
}

.mv-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  margin: 0;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}
@media screen and (min-width: 769px) {
  .mv-overlay {
    flex-direction: row;
    gap: min(3.8194444444vw, 55px);
    left: 50%;
    bottom: min(5.5555555556vw, 80px);
  }
}
@media screen and (max-width: 768px) {
  .mv-overlay {
    flex-direction: column;
    align-items: center;
    gap: 8.2051282051vw;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
  }
}

@media screen and (min-width: 769px) {
  .mv-overlay-rings {
    width: min(12.3611111111vw, 178px);
  }
}
@media screen and (max-width: 768px) {
  .mv-overlay-rings {
    width: 47.9487179487vw;
  }
}

@media screen and (min-width: 769px) {
  .mv-overlay-cross {
    width: min(1.7361111111vw, 25px);
  }
}
@media screen and (max-width: 768px) {
  .mv-overlay-cross {
    width: 5.641025641vw;
  }
}

@media screen and (min-width: 769px) {
  .mv-overlay-text {
    width: min(48.0555555556vw, 692px);
  }
}
@media screen and (max-width: 768px) {
  .mv-overlay-text {
    width: 44.1025641026vw;
  }
}

.mv-overlay-text--inline {
  display: none;
}
@media screen and (min-width: 769px) {
  .mv-overlay-text--inline {
    width: min(48.125vw, 693px);
  }
}

@media screen and (min-width: 769px) {
  .mv--intro .mv-overlay {
    flex-direction: column;
    align-items: center;
    gap: 1.8055555556vw;
  }
}

@media screen and (min-width: 769px) {
  .mv--intro .mv-overlay-rings {
    width: 10.8333333333vw;
  }
}

@media screen and (min-width: 769px) {
  .mv--intro .mv-overlay-cross {
    width: 1.3194444444vw;
  }
}

@media screen and (min-width: 769px) {
  .mv--intro .mv-overlay-text {
    width: 10vw;
  }
}

@media screen and (min-width: 769px) {
  .mv--done .mv-overlay-text {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .mv--done .mv-overlay-text--inline {
    display: block;
  }
}

.mv-js .mv-panel,
.mv-js .mv-overlay-rings,
.mv-js .mv-overlay-cross,
.mv-js .mv-overlay-text {
  opacity: 0;
}

.mv-js .site-header {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.artcar {
  position: relative;
  background-color: #fcfcfd;
  --car: 1;
  --art: 1;
  --swap: 1;
  --soon: 1;
}

.artcar-track {
  position: relative;
}
@media screen and (min-width: 769px) {
  .artcar-track {
    height: 300vh;
  }
}
@media screen and (max-width: 768px) {
  .artcar-track {
    height: 280vh;
  }
}

.artcar-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: #101319;
  color: #fcfcfd;
}

.artcar-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 0;
}
@media screen and (min-width: 769px) {
  .artcar-inner {
    justify-content: flex-start;
    padding: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-inner {
    justify-content: flex-start;
    justify-content: safe center;
    min-height: 0;
    padding-inline: 2.5641025641vw;
    padding-block: 5.1282051282vw;
  }
}

/* ===== 見出し・リード ===== */
.artcar-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  .artcar-intro {
    width: 100%;
    gap: min(0.9722222222vw, 14px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-intro {
    gap: 3.5897435897vw;
  }
}

.artcar-catch {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .artcar-catch {
    font-size: min(1.5277777778vw, 22px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-catch {
    font-size: 5.1282051282vw;
  }
}

.artcar-title {
  font-family: "audi_type_extended", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
}
@media screen and (min-width: 769px) {
  .artcar-title {
    font-size: min(2.9166666667vw, 42px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-title {
    font-size: 4.8717948718vw;
  }
}

.artcar-lead {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .artcar-lead {
    margin-top: min(3.8888888889vw, 56px);
    display: flex;
    flex-direction: column;
    gap: min(2.5694444444vw, 37px);
    font-size: min(1.25vw, 18px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .artcar-lead {
    margin-top: 6.4102564103vw;
    display: flex;
    flex-direction: column;
    gap: 5.1282051282vw;
    font-size: 3.8461538462vw;
    line-height: 1.8;
  }
}
.artcar-lead p {
  margin: 0;
}

/* ===== ビジュアル（車＋アート） ===== */
.artcar-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 0;
}
@media screen and (min-width: 769px) {
  .artcar-visual {
    flex: 1 1 0;
    margin-top: min(2.5vw, 36px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-visual {
    flex: 1 1 0;
    container-type: size;
  }
}

.artcar-car {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  aspect-ratio: 1024/576;
  flex-shrink: 1;
  min-width: 0;
  min-height: 0;
}
@media screen and (min-width: 769px) {
  .artcar-car {
    --car-max-width: min(55.4166666667vw, 798px);
    --car-max-height: calc(min(55.4166666667vw, 798px) * 576 / 1024);
    height: min(var(--car-max-height), 100%);
    width: auto;
    max-width: min(var(--car-max-width), 100%);
  }
}
@media screen and (max-width: 768px) {
  .artcar-car {
    --car-max-width: 153.8461538462vw;
    --car-max-height: 86.5384615385vw;
    width: min(var(--car-max-width), 100cqi, 177.7777777778cqh);
    height: auto;
  }
}

.artcar-car-panel {
  flex: 1;
  background-image: url("/kinashi/images/artcar-q5.png");
  background-repeat: no-repeat;
  background-size: 100% calc(var(--n) * 100%);
  background-position-x: center;
  background-position-y: calc(var(--i) / (var(--n) - 1) * 100%);
  --feather: 5;
  --reveal: clamp(0, calc((var(--car) * (var(--n) + var(--feather)) - (var(--n) - 1 - var(--i))) / var(--feather)), 1);
  filter: grayscale(var(--reveal)) saturate(calc(1 + 0.8 * (1 - var(--reveal)))) brightness(calc(1 - 0.12 * var(--reveal)));
  opacity: calc(1 - 0.5 * var(--reveal));
}

.artcar-art {
  position: absolute;
  top: 23.5%;
  left: auto;
  right: -6%;
  width: 26.06%;
  margin: 0;
  overflow: visible;
}
@media screen and (max-width: 768px) {
  .artcar-art {
    left: auto;
    right: 5%;
  }
}
.artcar-art picture,
.artcar-art img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  clip-path: inset(0 calc((1 - var(--art)) * 100%) 0 0);
}

.artcar-soon {
  position: absolute;
  bottom: calc(100% + 0.6em);
  left: 0;
  font-family: "audi_type_extended", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  font-feature-settings: "palt" 1;
  opacity: var(--soon);
}
@media screen and (min-width: 769px) {
  .artcar-soon {
    font-size: min(0.9722222222vw, 14px);
    left: auto;
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  .artcar-soon {
    font-size: 2.8205128205vw;
  }
}

/* ===== 下部の大テキスト（Q5 ⇄ Audi × Art） ===== */
.artcar-caption {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  flex-shrink: 0;
}
@media screen and (min-width: 769px) {
  .artcar-caption {
    margin-top: min(2.2222222222vw, 32px);
    height: min(5.1388888889vw, 74px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-caption {
    height: 12.3076923077vw;
  }
}

.artcar-caption-text {
  grid-area: 1/1;
  font-family: "audi_type_extended", sans-serif;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (min-width: 769px) {
  .artcar-caption-text {
    font-size: min(4.4444444444vw, 64px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-caption-text {
    font-size: 10.2564102564vw;
  }
}
.artcar-caption-text--q5 {
  opacity: calc(0.5 * (1 - var(--swap)));
}
.artcar-caption-text--art {
  opacity: calc(0.5 * var(--swap));
}

/* ===== スクロールインジケーター（上：小ドット／下：大ドット） ===== */
.artcar-indicator {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .artcar-indicator {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    gap: min(0.9027777778vw, 13px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-indicator {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    gap: 2.8205128205vw;
  }
}

.artcar-indicator-dot {
  border-radius: 50%;
  background-color: rgba(252, 252, 253, 0.4);
  transition: width 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), height 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), background-color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
@media screen and (min-width: 769px) {
  .artcar-indicator-dot {
    width: min(0.2777777778vw, 4px);
    height: min(0.2777777778vw, 4px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-indicator-dot {
    width: 0.7692307692vw;
    height: 0.7692307692vw;
  }
}
.artcar-indicator-dot.is-active {
  background-color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .artcar-indicator-dot.is-active {
    width: min(0.8333333333vw, 12px);
    height: min(0.8333333333vw, 12px);
  }
}
@media screen and (max-width: 768px) {
  .artcar-indicator-dot.is-active {
    width: 2.5641025641vw;
    height: 2.5641025641vw;
  }
}

@media screen and (min-width: 769px) and (min-height: 860px) {
  .artcar-inner {
    justify-content: center;
  }
  .artcar-visual {
    flex: 0 1 auto;
  }
  .artcar-car {
    height: var(--car-max-height);
    width: auto;
    max-width: min(var(--car-max-width), 100%);
  }
}
@media screen and (min-width: 1440px) and (max-height: 1100px) {
  .artcar-inner {
    padding-block: min(1.6666666667vw, 24px);
  }
  .artcar-lead {
    margin-top: min(2.2222222222vw, 32px);
    gap: min(1.3888888889vw, 20px);
  }
  .artcar-visual {
    margin-top: min(2.7777777778vw, 40px);
  }
  .artcar-caption {
    margin-top: min(0.6944444444vw, 10px);
    height: min(3.4722222222vw, 50px);
  }
}
/* ===== アニメーション ===== */
.artcar-inner .artcar-catch,
.artcar-inner .artcar-title,
.artcar-inner .artcar-lead,
.artcar-inner .artcar-visual,
.artcar-inner .artcar-caption {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.artcar-inner.is-inview .artcar-catch,
.artcar-inner.is-inview .artcar-title {
  opacity: 1;
  transform: translateY(0);
}
.artcar-inner.is-inview .artcar-lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.artcar-inner.is-inview .artcar-visual {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}
.artcar-inner.is-inview .artcar-caption {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.comingsoon {
  position: relative;
  background-color: #020203;
  --converge: 0;
}

.comingsoon-track {
  position: relative;
}

.comingsoon-stage {
  position: relative;
  overflow: hidden;
  background-color: #020203;
}
@media screen and (min-width: 769px) {
  .comingsoon-stage {
    height: min(62.5vw, 900px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-stage {
    height: 216.4102564103vw;
  }
}

.comingsoon.is-converge .comingsoon-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
}

.comingsoon-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  will-change: transform, opacity;
}

.comingsoon.is-converge .comingsoon-bg {
  opacity: 0;
}

.comingsoon-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .comingsoon-hero {
    height: min(41.6666666667vw, 600px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-hero {
    height: 100vw;
  }
}

.comingsoon.is-converged .comingsoon-hero {
  visibility: hidden;
}

.comingsoon-hero-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate(0, 0);
  will-change: transform, width, height;
}
.comingsoon-hero-frame picture,
.comingsoon-hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comingsoon-hero-dim {
  position: absolute;
  inset: 0;
  background-color: #020203;
  opacity: 0;
  pointer-events: none;
}

.comingsoon-photo-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comingsoon-photo {
  position: absolute;
  transform: translateX(-50%) translate3d(0, var(--parallax, 0px), 0);
}

.comingsoon-photo-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.comingsoon-photo-inner picture,
.comingsoon-photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comingsoon.is-converge:not(.is-converged) .comingsoon-photo--01 .comingsoon-photo-inner {
  opacity: 0;
}

.comingsoon-overlay {
  position: absolute;
  inset: 0;
  background-color: #020203;
  opacity: 0.7;
}

.comingsoon-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fcfcfd;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .comingsoon-content {
    gap: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-content {
    gap: 8.2051282051vw;
  }
}

.comingsoon-cta {
  pointer-events: auto;
}
@media screen and (max-width: 768px) {
  .comingsoon-cta .button {
    width: 66.6666666667vw;
  }
}

.comingsoon-title {
  font-family: "audi_type_extended", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .comingsoon-title {
    font-size: min(4.4444444444vw, 64px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-title {
    font-size: 6.6666666667vw;
  }
}

.comingsoon-lead {
  font-weight: 400;
  color: #fcfcfd;
  margin: 0;
}
@media screen and (min-width: 769px) {
  .comingsoon-lead {
    font-size: min(1.25vw, 18px);
    line-height: 2;
    max-width: min(55.5555555556vw, 800px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-lead {
    font-size: 3.8461538462vw;
    line-height: 1.8;
    max-width: 100vw;
  }
}

.comingsoon-photo--01 {
  aspect-ratio: 143/95;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--01 {
    left: calc(50% - min(11.8402777778vw, 170.5px));
    top: min(14.7222222222vw, 212px);
    width: min(9.9305555556vw, 143px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--01 {
    left: calc(50% - 7.0512820513vw);
    top: 44.6153846154vw;
    width: 25.4743589744vw;
  }
}

.comingsoon-photo--02 {
  aspect-ratio: 240/160;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--02 {
    left: calc(50% + min(13.4027777778vw, 193px));
    top: min(7.6388888889vw, 110px);
    width: min(16.6666666667vw, 240px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--02 {
    left: calc(50% + 27.5641025641vw);
    top: 12.5641025641vw;
    width: 32.6923076923vw;
  }
}

.comingsoon-photo--03 {
  aspect-ratio: 200/133;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--03 {
    left: calc(50% - min(37.5vw, 540px));
    top: min(43.3333333333vw, 624px);
    width: min(13.8888888889vw, 200px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--03 {
    left: calc(50% - 43.4615384615vw);
    top: 126.4102564103vw;
    width: 27.3769230769vw;
  }
}

.comingsoon-photo--04 {
  aspect-ratio: 240/156;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--04 {
    left: calc(50% + min(36.1111111111vw, 520px));
    top: min(44.1270833333vw, 635.43px);
    width: min(16.6666666667vw, 240px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--04 {
    left: calc(50% - 23.5897435897vw);
    top: 174.1025641026vw;
    width: 29.5846153846vw;
  }
}

.comingsoon-photo--05 {
  aspect-ratio: 240/160;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--05 {
    left: calc(50% + min(1.3888888889vw, 20px));
    top: min(54.2361111111vw, 781px);
    width: min(16.6666666667vw, 240px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--05 {
    left: calc(50% + 25vw);
    top: 183.8461538462vw;
    width: 37.6923076923vw;
  }
}

.comingsoon-photo--06 {
  aspect-ratio: 320/213;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--06 {
    left: calc(50% - min(36.1111111111vw, 520px));
    top: min(11.875vw, 171px);
    width: min(22.2222222222vw, 320px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--06 {
    left: calc(50% - 38.5897435897vw);
    top: 17.4358974359vw;
    width: 34.6692307692vw;
  }
}

.comingsoon-photo--07 {
  aspect-ratio: 320/213;
}
@media screen and (min-width: 769px) {
  .comingsoon-photo--07 {
    left: calc(50% + min(36.1111111111vw, 520px));
    top: min(18.2638888889vw, 263px);
    width: min(22.2222222222vw, 320px);
  }
}
@media screen and (max-width: 768px) {
  .comingsoon-photo--07 {
    left: calc(50% + 34.1025641026vw);
    top: 49.4871794872vw;
    width: 19.6461538462vw;
  }
}

@media screen and (min-width: 769px) {
  .comingsoon.is-converge .comingsoon-photo--01 {
    top: 23.5555555556%;
  }
  .comingsoon.is-converge .comingsoon-photo--02 {
    top: 12.2222222222%;
  }
  .comingsoon.is-converge .comingsoon-photo--03 {
    top: 69.3333333333%;
  }
  .comingsoon.is-converge .comingsoon-photo--04 {
    top: 70.6033333333%;
  }
  .comingsoon.is-converge .comingsoon-photo--05 {
    top: 86.7777777778%;
  }
  .comingsoon.is-converge .comingsoon-photo--06 {
    top: 19%;
  }
  .comingsoon.is-converge .comingsoon-photo--07 {
    top: 29.2222222222%;
  }
}
@media screen and (max-width: 768px) {
  .comingsoon.is-converge .comingsoon-photo--01 {
    top: 20.6161137441%;
  }
  .comingsoon.is-converge .comingsoon-photo--02 {
    top: 5.8056872038%;
  }
  .comingsoon.is-converge .comingsoon-photo--03 {
    top: 58.4123222749%;
  }
  .comingsoon.is-converge .comingsoon-photo--04 {
    top: 80.4502369668%;
  }
  .comingsoon.is-converge .comingsoon-photo--05 {
    top: 84.9526066351%;
  }
  .comingsoon.is-converge .comingsoon-photo--06 {
    top: 8.0568720379%;
  }
  .comingsoon.is-converge .comingsoon-photo--07 {
    top: 22.8672985782%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .comingsoon.is-converge .comingsoon-photo {
    will-change: transform;
  }
  .comingsoon.is-converge .comingsoon-photo-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo picture {
    animation: comingsoon-float 14s ease-in-out infinite;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(even) picture {
    animation-name: comingsoon-float-alt;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(1) picture {
    animation-duration: 13s;
    animation-delay: -1.6s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(2) picture {
    animation-duration: 14s;
    animation-delay: -3.2s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(3) picture {
    animation-duration: 15s;
    animation-delay: -4.8s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(4) picture {
    animation-duration: 16s;
    animation-delay: -6.4s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(5) picture {
    animation-duration: 17s;
    animation-delay: -8s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(6) picture {
    animation-duration: 18s;
    animation-delay: -9.6s;
  }
  .comingsoon.is-gallery-settled .comingsoon-photo:nth-child(7) picture {
    animation-duration: 19s;
    animation-delay: -11.2s;
  }
}
@keyframes comingsoon-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes comingsoon-float-alt {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}
/* テキスト: 集約完了後にタイトル → リード → ボタンの順でフェードイン */
.comingsoon-content .comingsoon-title,
.comingsoon-content .comingsoon-lead,
.comingsoon-content .comingsoon-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.comingsoon-content .comingsoon-lead {
  transition-delay: 0.15s;
}
.comingsoon-content .comingsoon-cta {
  transition-delay: 0.3s;
}
.comingsoon-content.is-inview .comingsoon-title,
.comingsoon-content.is-inview .comingsoon-lead,
.comingsoon-content.is-inview .comingsoon-cta {
  opacity: 1;
  transform: translateY(0);
}

.comingsoon:not(.is-converge) .comingsoon-content .comingsoon-title,
.comingsoon:not(.is-converge) .comingsoon-content .comingsoon-lead,
.comingsoon:not(.is-converge) .comingsoon-content .comingsoon-cta {
  opacity: 1;
  transform: translateY(0);
}
.comingsoon:not(.is-converge) .comingsoon-photo-inner {
  opacity: 1;
  transform: none;
}

.profile {
  background-color: #101319;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .profile {
    padding: min(8.3333333333vw, 120px) min(15.2777777778vw, 220px);
  }
}
@media screen and (max-width: 768px) {
  .profile {
    padding: 16.4102564103vw 7.1794871795vw;
  }
}

.profile-inner {
  display: flex;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .profile-inner {
    align-items: center;
    gap: min(6.9444444444vw, 100px);
    max-width: min(72.2222222222vw, 1040px);
  }
}
@media screen and (max-width: 768px) {
  .profile-inner {
    flex-direction: column;
    align-items: center;
    gap: 8.2051282051vw;
    max-width: 85.641025641vw;
  }
}

.profile-photo {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 10px;
}
@media screen and (min-width: 769px) {
  .profile-photo {
    width: min(22.2222222222vw, 320px);
    height: min(30.4166666667vw, 438px);
  }
}
@media screen and (max-width: 768px) {
  .profile-photo {
    width: 53.8461538462vw;
    height: 73.8461538462vw;
  }
}
.profile-photo picture,
.profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .profile-info {
    gap: min(1.6666666667vw, 24px);
    width: min(43.0555555556vw, 620px);
  }
}
@media screen and (max-width: 768px) {
  .profile-info {
    gap: 6.1538461538vw;
    width: 100%;
  }
}

.profile-info-body {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .profile-info-body {
    gap: min(2.2222222222vw, 32px);
  }
}
@media screen and (max-width: 768px) {
  .profile-info-body {
    gap: 8.2051282051vw;
  }
}

.profile-heading {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .profile-heading {
    gap: min(1.1111111111vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .profile-heading {
    gap: 4.1025641026vw;
  }
}

.profile-name-box {
  display: inline-grid;
  line-height: 1;
}

.profile-name {
  grid-column: 1;
  grid-row: 1;
  font-weight: 400;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .profile-name {
    font-size: min(2.2222222222vw, 32px);
  }
}
@media screen and (max-width: 768px) {
  .profile-name {
    font-size: 7.1794871795vw;
  }
}

.profile-name-kana {
  grid-column: 1;
  grid-row: 1;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  white-space: nowrap;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .profile-name-kana {
    margin-top: min(0.6944444444vw, 10px);
    margin-left: min(9.9305555556vw, 143px);
    font-size: min(1.3888888889vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .profile-name-kana {
    margin-top: 2.3076923077vw;
    margin-left: 30.7692307692vw;
    font-size: 4.1025641026vw;
  }
}

.profile-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background-color: rgba(252, 252, 253, 0.3);
}

.profile-bio {
  font-weight: 400;
  opacity: 0.7;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .profile-bio {
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .profile-bio {
    font-size: 3.5897435897vw;
    line-height: 1.8;
  }
}
.profile-bio p + p {
  margin-top: 0;
}

.present {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fcfcfd;
  color: #020203;
}
@media screen and (min-width: 769px) {
  .present {
    gap: min(8.3333333333vw, 120px);
    padding-bottom: min(9.7222222222vw, 140px);
    padding-top: min(4.4444444444vw, 64px);
  }
}
@media screen and (max-width: 768px) {
  .present {
    gap: 18.4615384615vw;
    padding-bottom: 20.5128205128vw;
    padding-top: 16.4102564103vw;
  }
}

/* ===== 上部の流れる画像帯（右 → 左） ===== */
.present-marquee {
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .present-marquee {
    height: min(12.9166666667vw, 186px);
  }
}
@media screen and (max-width: 768px) {
  .present-marquee {
    height: 25.641025641vw;
  }
}

.present-marquee-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: present-marquee-scroll 60s linear infinite;
}

.present-marquee-item {
  flex: none;
  height: 100%;
}
@media screen and (min-width: 769px) {
  .present-marquee-item {
    margin-right: min(1.1111111111vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .present-marquee-item {
    margin-right: 2.0512820513vw;
  }
}
.present-marquee-item picture,
.present-marquee-item img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}

@keyframes present-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .present-marquee-track {
    animation: none;
  }
}
/* ===== 中央コンテンツ ===== */
.present-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-inner {
    gap: min(6.1111111111vw, 88px);
    max-width: min(86.1111111111vw, 1240px);
    padding-inline: min(1.3888888889vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .present-inner {
    gap: 18.4615384615vw;
    padding-inline: 7.1794871795vw;
  }
}

/* ===== オリジナルグッズをプレゼント ===== */
.present-goods {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .present-goods {
    gap: min(4.4444444444vw, 64px);
  }
}
@media screen and (max-width: 768px) {
  .present-goods {
    gap: 8.2051282051vw;
  }
}

.present-head {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-head {
    gap: min(3.3333333333vw, 48px);
    align-items: center;
    max-width: min(55.5555555556vw, 800px);
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .present-head {
    gap: 8.2051282051vw;
    align-items: stretch;
    max-width: 85.641025641vw;
    text-align: left;
  }
}

.present-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-heading {
    gap: min(1.6666666667vw, 24px);
  }
}
@media screen and (max-width: 768px) {
  .present-heading {
    gap: 6.1538461538vw;
  }
}

.present-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media screen and (min-width: 769px) {
  .present-logo {
    height: min(2.6388888889vw, 38px);
  }
}

.present-logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.3846153846vw;
  width: 100%;
}

.present-logo-sp-item {
  display: block;
  flex: none;
  object-fit: contain;
}
.present-logo-sp-item--audi {
  width: 31.7948717949vw;
  height: 10.9230769231vw;
}
.present-logo-sp-item--cross {
  width: 4.8717948718vw;
  height: 4.1794871795vw;
}
.present-logo-sp-item--text {
  width: 29.2307692308vw;
  height: 9.9487179487vw;
}

.present-title {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .present-title {
    font-size: min(2.9166666667vw, 42px);
  }
}
@media screen and (max-width: 768px) {
  .present-title {
    font-size: 6.1538461538vw;
  }
}

.present-lead {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
}
.present-lead p {
  margin: 0;
}
@media screen and (min-width: 769px) {
  .present-lead {
    font-size: min(1.25vw, 18px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .present-lead {
    font-size: 3.8461538462vw;
    line-height: 1.8;
    text-align: left;
  }
}

.present-goods-list {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 769px) {
  .present-goods-list {
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.5vw, 36px);
  }
}
@media screen and (max-width: 768px) {
  .present-goods-list {
    grid-template-columns: 1fr;
    gap: 8.2051282051vw;
  }
}

.present-goods-item {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .present-goods-item {
    gap: min(1.6666666667vw, 24px);
  }
}
@media screen and (max-width: 768px) {
  .present-goods-item {
    gap: 6.1538461538vw;
  }
}

.present-goods-img {
  overflow: hidden;
  border-radius: 10px;
  background-color: #f6f6f6;
  aspect-ratio: 376/251;
}
.present-goods-img picture,
.present-goods-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.present-goods-img.present-goods-img--cover {
  background-color: transparent;
}
.present-goods-img.present-goods-img--cover picture,
.present-goods-img.present-goods-img--cover img {
  object-fit: cover;
}

.present-goods-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-goods-body {
    gap: min(1.1111111111vw, 16px);
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  .present-goods-body {
    gap: 3.0769230769vw;
  }
}

.present-goods-name {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.5;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .present-goods-name {
    font-size: min(1.5277777778vw, 22px);
  }
}
@media screen and (max-width: 768px) {
  .present-goods-name {
    font-size: 5.1282051282vw;
  }
}

.present-goods-text {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-goods-text {
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .present-goods-text {
    font-size: 3.8461538462vw;
    line-height: 1.8;
    text-align: left;
  }
}

/* ===== 応募要項 ===== */
.present-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-entry {
    gap: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .present-entry {
    gap: 6.1538461538vw;
  }
}

.present-entry-title {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .present-entry-title {
    font-size: min(2.9166666667vw, 42px);
  }
}
@media screen and (max-width: 768px) {
  .present-entry-title {
    font-size: 5.641025641vw;
  }
}

.present-entry-table {
  width: 100%;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .present-entry-table {
    border-top: 1px solid #0b0b0b;
  }
}

@media screen and (min-width: 769px) {
  .present-entry-row {
    display: grid;
    grid-template-columns: min(15.2777777778vw, 220px) 1fr;
    gap: min(2.2222222222vw, 32px);
  }
}
@media screen and (max-width: 768px) {
  .present-entry-row {
    display: flex;
    flex-direction: column;
    gap: 2.0512820513vw;
    padding: 4.1025641026vw 0;
    border-bottom: 1px solid #0b0b0b;
  }
}

@media screen and (min-width: 769px) {
  .present-entry-label,
  .present-entry-value {
    padding: min(1.1111111111vw, 16px) min(0.5555555556vw, 8px);
    border-top: 1px solid rgba(2, 2, 3, 0.2);
  }
}

@media screen and (min-width: 769px) {
  .present-entry-label {
    border-top-color: #020203;
  }
}

@media screen and (min-width: 769px) {
  .present-entry-row:last-child .present-entry-label {
    border-bottom: 1px solid #020203;
  }
  .present-entry-row:last-child .present-entry-value {
    border-bottom: 1px solid rgba(2, 2, 3, 0.2);
  }
}

.present-entry-label {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .present-entry-label {
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .present-entry-label {
    font-size: 4.1025641026vw;
    line-height: 1.8;
  }
}

.present-entry-value {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  .present-entry-value {
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .present-entry-value {
    font-size: 3.5897435897vw;
    line-height: 1.8;
  }
}

.present-notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (min-width: 769px) {
  .present-notice-list {
    font-size: min(1.1111111111vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .present-notice-list {
    font-size: 3.0769230769vw;
  }
}

.present-notice-item {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.8;
}
.present-notice-item::before {
  content: "※";
  position: absolute;
  left: 0;
}

.present-entry-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .present-entry-footer {
    gap: min(2.2222222222vw, 32px);
  }
}
@media screen and (max-width: 768px) {
  .present-entry-footer {
    margin-top: 2.0512820513vw;
    gap: 8.2051282051vw;
  }
}
@media screen and (max-width: 768px) {
  .present-entry-footer .button {
    padding-inline: 15.3846153846vw;
  }
}

.present-terms {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
  color: #020203;
  transition: opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
@media screen and (min-width: 769px) {
  .present-terms {
    gap: min(0.5555555556vw, 8px);
    font-size: min(0.9722222222vw, 14px);
    line-height: 1.8;
  }
  .present-terms:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .present-terms {
    gap: 2.0512820513vw;
    font-size: 3.5897435897vw;
  }
}
.present-terms span {
  border-bottom: 1px solid #020203;
}
@media screen and (min-width: 769px) {
  .present-terms svg {
    width: min(1.1111111111vw, 16px);
    height: min(1.1111111111vw, 16px);
  }
}
@media screen and (max-width: 768px) {
  .present-terms svg {
    width: 4.1025641026vw;
    height: 4.1025641026vw;
  }
}

/* ===== 応募規約モーダル ===== */
body.is-present-modal-open {
  overflow: hidden;
}

.present-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .present-modal {
    align-items: flex-start;
    padding: min(5.5555555556vw, 80px) min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .present-modal {
    align-items: flex-start;
    padding: 20vw 3.0769230769vw 6.1538461538vw;
  }
}
.present-modal.is-open {
  pointer-events: auto;
}
.present-modal[hidden] {
  display: none;
}

.present-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: #101319;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.present-modal.is-open .present-modal-overlay {
  opacity: 0.9;
}

.present-modal-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.present-modal.is-open .present-modal-dialog {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .present-modal-dialog {
    max-width: min(94.4444444444vw, 1360px);
    padding: min(5.5555555556vw, 80px);
  }
}
@media screen and (max-width: 768px) {
  .present-modal-dialog {
    max-width: 93.8461538462vw;
    padding: 6.1538461538vw 4.1025641026vw;
  }
}

.present-modal-close {
  position: fixed;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  mix-blend-mode: difference;
}
.present-modal.is-open .present-modal-close {
  opacity: 1;
}
@media screen and (min-width: 769px) {
  .present-modal-close {
    top: min(1.6666666667vw, 24px);
    right: min(2.7777777778vw, 40px);
    width: min(2.5vw, 36px);
    height: min(2.5vw, 36px);
  }
}
@media screen and (max-width: 768px) {
  .present-modal-close {
    top: 6.1538461538vw;
    right: 3.0769230769vw;
    width: 6.4102564103vw;
    height: 6.4102564103vw;
  }
}
.present-modal-close::before, .present-modal-close::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: rgb(239, 236, 230);
  border-radius: 2px;
}
.present-modal-close::before {
  transform: rotate(45deg);
}
.present-modal-close::after {
  transform: rotate(-45deg);
}
@media screen and (max-width: 768px) {
  .present-modal-close::before, .present-modal-close::after {
    height: 2px;
  }
}

.present-modal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media screen and (min-width: 769px) {
  .present-modal-inner {
    gap: min(2.7777777778vw, 40px);
    max-width: min(83.3333333333vw, 1200px);
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  .present-modal-inner {
    gap: 6.1538461538vw;
  }
}

.present-modal-title {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "palt" 1;
  text-align: center;
  color: #020203;
}
@media screen and (min-width: 769px) {
  .present-modal-title {
    font-size: min(2.9166666667vw, 42px);
  }
}
@media screen and (max-width: 768px) {
  .present-modal-title {
    font-size: 5.641025641vw;
    line-height: 1.5;
  }
}

.present-modal-content {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 10px;
  color: #020203;
}
@media screen and (min-width: 769px) {
  .present-modal-content {
    padding: min(3.3333333333vw, 48px) min(5.5555555556vw, 80px);
  }
}
@media screen and (max-width: 768px) {
  .present-modal-content {
    padding: 8.2051282051vw 5.1282051282vw;
  }
}

.present-modal-lead {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  .present-modal-lead {
    margin-bottom: min(1.6666666667vw, 24px);
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .present-modal-lead {
    margin-bottom: 4.1025641026vw;
    font-size: 3.5897435897vw;
    line-height: 1.8;
  }
}

.present-modal-list {
  margin: 0;
  padding-left: 1.5em;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  .present-modal-list {
    font-size: min(1.1111111111vw, 16px);
    line-height: 2;
  }
}
@media screen and (max-width: 768px) {
  .present-modal-list {
    font-size: 3.5897435897vw;
    line-height: 1.8;
  }
}
@media screen and (min-width: 769px) {
  .present-modal-list li + li {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .present-modal-overlay,
  .present-modal-dialog,
  .present-modal-close {
    transition: none;
  }
}
.experience {
  background-color: #101319;
  color: #fcfcfd;
  padding-block: min(9.7222222222vw, 140px);
}
@media screen and (max-width: 768px) {
  .experience {
    padding-block: 20.5128205128vw;
  }
}

.experience-inner {
  margin-inline: auto;
  max-width: min(86.1111111111vw, 1240px);
  padding-inline: min(1.3888888889vw, 20px);
}
@media screen and (max-width: 768px) {
  .experience-inner {
    max-width: none;
    padding-inline: 7.1794871795vw;
  }
}

.experience-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.6666666667vw, 24px);
}
@media screen and (max-width: 768px) {
  .experience-title {
    gap: 4.1025641026vw;
  }
}
.experience-title span {
  color: #fcfcfd;
}
.experience-title span:first-child {
  font-size: min(2.9166666667vw, 42px);
  font-weight: 700;
  line-height: 120%;
  font-feature-settings: "palt" on;
}
@media screen and (max-width: 768px) {
  .experience-title span:first-child {
    font-size: 5.1282051282vw;
    line-height: 150%;
  }
}
.experience-title span:last-child {
  font-size: min(3.6111111111vw, 52px);
  font-weight: 700;
  line-height: normal;
  font-family: "audi_type_extended", sans-serif;
}
@media screen and (max-width: 768px) {
  .experience-title span:last-child {
    font-size: 8.2051282051vw;
  }
}

.experience-cardlist {
  margin-top: min(5.5555555556vw, 80px);
}
@media screen and (max-width: 768px) {
  .experience-cardlist {
    margin-top: 8.2051282051vw;
  }
}

.experience-card {
  display: flex;
  align-items: center;
  gap: min(6.1111111111vw, 88px);
}
.experience-card + .experience-card {
  margin-top: min(6.9444444444vw, 100px);
}
@media screen and (max-width: 768px) {
  .experience-card {
    flex-direction: column;
    gap: 8.2051282051vw;
  }
  .experience-card + .experience-card {
    margin-top: 16.4102564103vw;
  }
}

.experience-card-photo {
  flex-shrink: 0;
  width: min(40.2777777778vw, 580px);
  overflow: hidden;
  border-radius: min(1.3888888889vw, 20px);
}
@media screen and (max-width: 768px) {
  .experience-card-photo {
    width: 100%;
    border-radius: 5.1282051282vw;
  }
}
.experience-card-photo picture,
.experience-card-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.experience-card-body {
  flex: 1;
}

.experience-card-title {
  color: #fcfcfd;
  font-size: min(1.9444444444vw, 28px);
  font-weight: 700;
  line-height: 200%;
}
@media screen and (max-width: 768px) {
  .experience-card-title {
    font-size: 5.641025641vw;
    line-height: 150%;
  }
}
.experience-card-title.en {
  font-family: "audi_type_extended", sans-serif;
}

.experience-card-lead {
  color: rgba(252, 252, 253, 0.7);
  font-size: min(1.1111111111vw, 16px);
  font-weight: 400;
  line-height: 200%;
  margin-top: min(1.6666666667vw, 24px);
}
@media screen and (max-width: 768px) {
  .experience-card-lead {
    font-size: 3.8461538462vw;
    line-height: 180%;
    margin-top: 6.1538461538vw;
  }
}

.experience-card-cta {
  margin-top: min(1.6666666667vw, 24px);
}
@media screen and (max-width: 768px) {
  .experience-card-cta {
    margin-top: 6.1538461538vw;
  }
}
.experience-card-cta .button {
  padding-inline: min(3.125vw, 45px);
}
@media screen and (max-width: 768px) {
  .experience-card-cta .button {
    width: 100%;
    padding-inline: 27.6923076923vw;
  }
}

/* アニメーション */
.experience-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.experience-title.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.experience-card-photo,
.experience-card-body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-card-body {
  transition-delay: 0.15s;
}

.experience-card.is-inview .experience-card-photo,
.experience-card.is-inview .experience-card-body {
  opacity: 1;
  transform: translateY(0);
}

.welcome {
  position: relative;
  width: 100vw;
  height: min(56.25vw, 810px);
  background: url("/kinashi/images/welcome-bg-pc.webp") no-repeat center center/cover;
}
@media screen and (max-width: 768px) {
  .welcome {
    height: 100vw;
    background-color: #101319;
    background-image: linear-gradient(180deg, rgba(16, 19, 25, 0) 47%, #101319 100%), url("/kinashi/images/welcome-bg-sp.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

.welcome-body {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(2.7777777778vw, 40px);
  bottom: min(4.8611111111vw, 70px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
@media screen and (max-width: 768px) {
  .welcome-body {
    bottom: 12.1717948718vw;
    gap: 5.0076923077vw;
  }
}

.welcome-lead {
  text-align: center;
  color: #fcfcfd;
  font-size: min(1.9444444444vw, 28px);
  line-height: 200%;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .welcome-lead {
    font-size: 3.3333333333vw;
    line-height: 180%;
  }
}

@media screen and (max-width: 768px) {
  .welcome-cta {
    width: 100%;
    padding-inline: 7.1794871795vw;
  }
}
@media screen and (max-width: 768px) {
  .welcome-cta .button {
    width: 100%;
    max-width: none;
  }
}

/* アニメーション */
.welcome-lead,
.welcome-cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.05s cubic-bezier(0.4, 0, 0.2, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.welcome-cta {
  transition-delay: 0.15s;
}

.welcome.is-inview .welcome-lead,
.welcome.is-inview .welcome-cta {
  opacity: 1;
  transform: translateY(0);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .site-header {
    padding: 1.3888888889vw 2.0833333333vw 0;
  }
}
@media screen and (max-width: 768px) {
  .site-header {
    padding: 6.1538461538vw 5.1282051282vw 0;
  }
}

.site-header-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: "audi_type_extended", sans-serif;
  letter-spacing: 0.05em;
  font-size: 14px;
  transition: color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
@media screen and (min-width: 769px) {
  .site-header-menu:hover {
    opacity: 0.7;
  }
}
.site-header.is-light .site-header-menu {
  color: #020203;
}

.site-header-menu-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 1px;
  background-color: currentColor;
  flex-shrink: 0;
  transition: background-color 0.15s ease 0.1s;
}
.site-header-menu-icon::before, .site-header-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
}
.site-header-menu-icon::before {
  top: -5px;
  transition: top 0.25s ease 0.1s, transform 0.25s ease;
}
.site-header-menu-icon::after {
  bottom: -5px;
  transition: bottom 0.25s ease 0.1s, transform 0.25s ease;
}

.site-header-menu[aria-expanded=true] .site-header-menu-icon {
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.site-header-menu[aria-expanded=true] .site-header-menu-icon::before {
  top: 0;
  transform: rotate(45deg);
  transition: top 0.25s ease, transform 0.25s ease 0.1s;
}
.site-header-menu[aria-expanded=true] .site-header-menu-icon::after {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 0.25s ease, transform 0.25s ease 0.1s;
}

.site-header-logo {
  display: block;
  transition: opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
.site-header-logo img {
  display: block;
  min-width: 28px;
  height: auto;
}
@media screen and (min-width: 769px) {
  .site-header-logo img {
    width: 129px;
  }
}
@media screen and (max-width: 768px) {
  .site-header-logo img {
    width: 84px;
  }
}
.site-header.is-scrolled .site-header-logo {
  opacity: 0;
  pointer-events: none;
}

.site-header-q5 {
  font-family: "audi_type_extended", sans-serif;
  letter-spacing: 0.05em;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}
@media screen and (min-width: 769px) {
  .site-header-q5 {
    font-size: 19px;
  }
  .site-header-q5:hover {
    opacity: 0.7;
  }
}
@media screen and (max-width: 768px) {
  .site-header-q5 {
    font-size: 14px;
  }
}
.site-header.is-scrolled .site-header-q5 {
  opacity: 0;
  pointer-events: none;
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: #020203;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.75, 0.02, 0.5, 1);
}
.site-nav.is-open {
  opacity: 1;
}

.site-nav-inner {
  display: flex;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .site-nav-inner {
    flex-direction: column;
  }
}

.site-nav-panel--links {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .site-nav-panel--links {
    flex: 0 0 45%;
    border-right: 1px solid rgba(252, 252, 253, 0.1);
  }
}
@media screen and (max-width: 768px) {
  .site-nav-panel--links {
    flex: 1;
    overflow-y: auto;
  }
}

.site-nav-content {
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 769px) {
  .site-nav-content {
    max-width: 17.7777777778vw;
    margin-top: 12.7777777778vw;
  }
}
@media screen and (max-width: 768px) {
  .site-nav-content {
    max-width: 74.358974359vw;
    padding: 39.2307692308vw 0 12.8205128205vw;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}

.site-nav-panel--visual {
  flex: 1;
}

.site-nav-panel--visual picture,
.site-nav-panel--visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.site-nav-list {
  list-style: none;
  margin-bottom: 3.3333333333vw;
}
@media screen and (max-width: 768px) {
  .site-nav-list {
    margin-bottom: 10.2564102564vw;
  }
}

@media screen and (min-width: 769px) {
  .site-nav-item:not(:first-child) {
    margin-top: 2.2222222222vw;
  }
}
@media screen and (max-width: 768px) {
  .site-nav-item:not(:first-child) {
    margin-top: 8.2051282051vw;
  }
}

.site-nav-link {
  font-family: "audi_type", sans-serif;
  color: #fcfcfd;
  text-decoration: none;
}
@media screen and (min-width: 769px) {
  .site-nav-link {
    font-size: 1.25vw;
  }
}
@media screen and (max-width: 768px) {
  .site-nav-link {
    font-size: 4.6153846154vw;
  }
}
@media screen and (min-width: 769px) {
  .site-nav-link:hover {
    text-decoration: underline;
  }
}

.site-nav-actions {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .site-nav-actions {
    margin-top: 3.8888888889vw;
    gap: 1.6666666667vw;
  }
}
@media screen and (max-width: 768px) {
  .site-nav-actions {
    margin-top: 14.358974359vw;
    gap: 6.1538461538vw;
  }
}
@media screen and (min-width: 769px) {
  .site-nav-actions .button {
    padding-inline: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .site-nav-actions .button {
    padding-inline: 14.1025641026vw;
  }
}

.site-nav-campaign {
  width: 100%;
  cursor: pointer;
  background-color: #181d25;
  border: 1px solid #2c343f;
}
@media screen and (min-width: 769px) {
  .site-nav-campaign:hover {
    background-color: #2c343f;
  }
}

body.is-nav-open {
  overflow: hidden;
}
body.is-nav-open .site-header-logo {
  opacity: 0;
  pointer-events: none;
}
body.is-nav-open .site-header .site-header-q5 {
  opacity: 1;
  pointer-events: auto;
}
body.is-nav-open .site-header .site-header-menu {
  color: #fcfcfd;
}

.sticky-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 900;
  background-color: #020203;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.sticky-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-actions-inner {
  display: flex;
  align-items: center;
}
@media screen and (min-width: 769px) {
  .sticky-actions-inner {
    justify-content: center;
    gap: 0.9722222222vw;
    padding: 1.1111111111vw;
  }
}
@media screen and (max-width: 768px) {
  .sticky-actions-inner {
    justify-content: space-between;
    gap: 3.5897435897vw;
    padding: 4.1025641026vw;
  }
}

@media screen and (min-width: 769px) {
  .sticky-actions .button {
    min-width: min(17.7777777778vw, 256px);
    padding-inline: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .sticky-actions .button {
    min-width: unset;
    width: 44.1025641026vw;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .sticky-actions .button:first-child {
    padding-inline: 10vw;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .sticky-actions .button:last-child {
    padding-inline: 7.1794871795vw;
  }
}

.sticky-actions-campaign {
  background-color: #181d25;
  border: 1px solid #2c343f;
}

.footer .audi-footer__categories-link {
  font-family: "audi_type_extended", sans-serif;
}
@media screen and (min-width: 769px) {
  .footer .audi-footer__categories-link {
    font-size: 18px;
  }
}
.footer .audi-footer__links-link {
  font-family: "audi_type", sans-serif;
}
@media screen and (min-width: 769px) {
  .footer .audi-footer__links-link {
    font-size: 14px;
  }
}
.footer ul,
.footer li {
  list-style: none;
}

.schedule {
  background-color: #020203;
  color: #fcfcfd;
}

.schedule-inner {
  max-width: min(72.2222222222vw, 1040px);
  margin: 0 auto;
  padding-block: min(6.9444444444vw, 100px) min(8.3333333333vw, 120px);
  display: flex;
  gap: min(4.4444444444vw, 64px);
}
@media screen and (max-width: 768px) {
  .schedule-inner {
    max-width: none;
    width: 100%;
    padding: min(8.2051282051vw, 32px) min(7.1794871795vw, 28px) min(16.4102564103vw, 64px);
    flex-direction: column;
    gap: min(6.1538461538vw, 24px);
  }
}

.schedule-content {
  width: min(27.7777777778vw, 400px);
}
@media screen and (max-width: 768px) {
  .schedule-content {
    width: 100%;
  }
}

.schedule-title {
  font-weight: 700;
  line-height: 1.5;
  color: #fcfcfd;
}
@media screen and (min-width: 769px) {
  .schedule-title {
    font-size: min(2.2222222222vw, 32px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-title {
    text-align: center;
    font-size: min(5.1282051282vw, 20px);
  }
}

.schedule-text {
  line-height: 2;
  color: rgba(252, 252, 253, 0.7);
}
@media screen and (min-width: 769px) {
  .schedule-text {
    font-size: min(1.1111111111vw, 16px);
    margin-top: min(2.7777777778vw, 40px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-text {
    font-size: min(3.5897435897vw, 14px);
    line-height: 1.8;
    margin-top: min(6.1538461538vw, 24px);
  }
}

.schedule-info {
  flex: 1;
  border: 1px solid #3f4247;
}
@media screen and (min-width: 769px) {
  .schedule-info {
    padding: min(1.6666666667vw, 24px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-info {
    padding: min(5.1282051282vw, 20px);
    border-radius: min(2.5641025641vw, 10px);
  }
}
.schedule-info ul,
.schedule-info li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-info-title {
  color: rgba(252, 252, 253, 0.7);
  font-weight: 400;
  line-height: 200%;
}
@media screen and (min-width: 769px) {
  .schedule-info-title {
    font-size: min(1.1805555556vw, 17px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-info-title {
    font-size: min(3.3333333333vw, 13px);
    line-height: 1.8;
  }
}

@media screen and (min-width: 769px) {
  .schedule-list {
    margin-top: min(0.2777777778vw, 4px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-list {
    margin-top: min(1.5384615385vw, 6px);
  }
}

@media screen and (min-width: 769px) {
  .schedule-item + .schedule-item {
    margin-top: min(0.2777777778vw, 4px);
  }
}
@media screen and (max-width: 768px) {
  .schedule-item + .schedule-item {
    margin-top: min(1.5384615385vw, 6px);
  }
}

.schedule-item-content {
  display: inline-flex;
  align-items: center;
  gap: min(1.6666666667vw, 24px);
}
.schedule-item-content p {
  font-size: min(1.1111111111vw, 16px);
  line-height: 2;
  color: rgba(252, 252, 253, 0.7);
}
.schedule-item-content a {
  font-size: min(1.1111111111vw, 16px);
  line-height: 2;
  color: rgba(252, 252, 253, 0.7);
  display: flex;
  align-items: center;
  gap: min(0.5555555556vw, 8px);
}
.schedule-item-content a svg {
  width: min(1.1111111111vw, 16px);
  height: min(1.1111111111vw, 16px);
}

@media screen and (max-width: 768px) {
  .schedule-item-link {
    text-decoration: none;
    font-size: min(3.3333333333vw, 13px);
    line-height: 1.8;
    color: rgba(252, 252, 253, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .schedule-item-link svg {
    width: min(4.1025641026vw, 16px);
    height: min(4.1025641026vw, 16px);
  }
}

.schedule-title,
.schedule-text,
.schedule-info {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-animation.is-inview .schedule-title {
  opacity: 1;
  transform: translateY(0);
}
.js-animation.is-inview .schedule-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
.js-animation.is-inview .schedule-info {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

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

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
}

@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .sp-only {
    display: block;
  }
}

@media screen and (min-width: 769px) {
  .pc-only {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}