@charset "UTF-8";
/* html */
/* Safariバージョン10.1~12.0対策 */
* {
  min-height: 0vw;
  min-height: 0;
}

/* html */
html {
  scroll-behavior: smooth;
}
html * {
  color: #231815;
}
html body {
  overflow-x: hidden;
}
html body .wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  /*
  &__inner {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding-bottom: rclamp(48, 112, 320, 1500);
    background-image: url("../img/bg_wrapper__inner.jpg");
    background-image: image-set(url("../img/bg_wrapper__inner.jpg") 1x, url("../img/bg_wrapper__inner.jpg") 2x);
    background-size: cover;
  }
  */
}
html a {
  transition: 0.3s;
}
html a:hover, html a:active {
  opacity: 0.85;
}
html img {
  width: 100%;
  height: 100%;
}

/* .header */
.header__logo_container {
  width: 100%;
  height: clamp(2.8125rem, 0.6091101695rem + 11.0169491525vw, 10.9375rem);
  background-color: #000;
  margin-inline: auto;
}
.header__logo_container_inner {
  display: flex;
  width: 1500px;
  max-width: 100%;
  align-items: center;
  margin-inline: auto;
  justify-content: space-between;
}
.header__logo-nissan {
  display: flex;
  height: 100%;
  padding-top: clamp(0.125rem, 0.0063559322rem + 0.593220339vw, 0.5625rem);
  padding-left: 1.2%;
  align-items: center;
}
.header__logo-nissan h1 {
  width: clamp(3.125rem, 0.9555084746rem + 10.8474576271vw, 11.125rem);
  aspect-ratio: 178/159;
}
.header__logo-nissan h1 img {
  width: 100%;
  height: 100%;
}
.header__logo-nissan-osaka {
  display: flex;
  height: 100%;
  padding-right: 2.2%;
  align-items: center;
}
@media (max-width: 756px) {
  .header__logo-nissan-osaka {
    padding-right: 3.2%;
  }
}
.header__logo-nissan-osaka h1 {
  display: flex;
  height: 100%;
  align-items: center;
}
.header__logo-nissan-osaka h1 a {
  display: block;
  width: clamp(5rem, 2.0169491525rem + 14.9152542373vw, 16rem);
  aspect-ratio: 256/60;
}
.header__logo-nissan-osaka h1 a img {
  width: 100%;
  height: 100%;
}
.header__title_container {
  width: 100%;
  height: clamp(1.875rem, 0.3326271186rem + 7.7118644068vw, 7.5625rem);
  background-color: #c3002f;
}

.contents_1500 {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
}

/* .main-visual */
.fv {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  background-color: #fffff5;
  background-image: url("../img/section_1_bg.png");
  background-image: image-set(url("../img/section_1_bg.png") 1x, url("../img/section_1_bg@2x.png") 2x);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding-bottom: clamp(3.75rem, 1.5296610169rem + 11.1016949153vw, 11.9375rem);
}
.fv .countdown_timer {
  width: 90%;
  max-width: 1300px;
  max-height: clamp(3.125rem, 0.5826271186rem + 12.7118644068vw, 12.5rem);
  margin-block: clamp(0.375rem, 0.0427966102rem + 1.6610169492vw, 1.6rem);
  margin-inline: auto;
  background-color: #ffc92d;
  border-radius: clamp(0.3125rem, 0.0582627119rem + 1.2711864407vw, 1.25rem);
  padding: clamp(0.25rem, 0.0466101695rem + 1.0169491525vw, 1rem) clamp(0.1875rem, 0.0688559322rem + 0.593220339vw, 0.625rem);
}
.fv .countdown_timer #timer_container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 0;
  line-height: 0;
}
.fv .countdown_timer #timer_container img {
  display: block;
  width: auto;
  height: clamp(1.875rem, -0.0063559322rem + 9.406779661vw, 8.8125rem);
}
.fv .countdown_timer #timer_container img[id^=timer_] {
  background-color: #000;
}
.fv .countdown_timer #timer_container .title {
  height: clamp(1.875rem, -0.0572033898rem + 9.6610169492vw, 9rem);
  margin-right: clamp(0.3125rem, 0.0718220339rem + 1.2033898305vw, 1.2rem);
}
.fv .countdown_timer #timer_container .day {
  width: clamp(0.75rem, 0.156779661rem + 2.9661016949vw, 2.9375rem);
  height: clamp(1.875rem, -0.0063559322rem + 9.406779661vw, 8.8125rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 clamp(0.625rem, 0.1165254237rem + 2.5423728814vw, 2.5rem) clamp(0.125rem, 0.0233050847rem + 0.5084745763vw, 0.5rem) clamp(0.1875rem, 0.0349576271rem + 0.7627118644vw, 0.75rem);
}
.fv .countdown_timer #timer_container .day img {
  height: clamp(0.875rem, 0.1800847458rem + 3.4745762712vw, 3.4375rem);
}
.fv .countdown_timer #timer_container .dot {
  background-color: #000;
  height: clamp(1.875rem, -0.0063559322rem + 9.406779661vw, 8.8125rem);
}
.fv .fv_runner {
  position: relative;
  background-image: url("../img/fv_runner.png");
  background-image: image-set(url("../img/fv_runner.png") 1x, url("../img/fv_runner@2x.png") 2x);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  aspect-ratio: 1500/878;
}
.fv .fv_runner .fv_runner_picture {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: 58%;
}
.fv .fv_runner .fv_runner_picture img {
  width: 100%;
  height: auto;
  animation: zoominout 1s ease 0s infinite alternate;
  transform-origin: center;
}
.fv .fv_map {
  position: relative;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 1500/994;
  margin-inline: auto;
}
.fv .fv_map .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fv .fv_map .mapbutton {
  position: absolute;
  bottom: 2%;
  left: 46%;
  width: clamp(9.74375rem, -0.0037076271rem + 48.7372881356vw, 45.6875rem);
  height: clamp(1.94375rem, -0.0037076271rem + 9.7372881356vw, 9.125rem);
}

.section__2 {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  background-color: #fff;
  background-image: url("../img/section_2_bg.png");
  background-image: image-set(url("../img/section_2_bg.png") 1x, url("../img/section_2_bg@2x.png") 2x);
  background-size: contain;
  background-position: center top;
  background-repeat: repeat-y;
}
.section__2 .section__2_1,
.section__2 .section__2_2,
.section__2 .section__2_3,
.section__2 .section__2_4 {
  position: relative;
}
.section__2 .section__2_1 {
  --balloon-top: 2%;
  --balloon-left: 39%;
  --balloon-width: 54.3%;
  --balloon-height: 47.1%;
}
.section__2 .section2_base {
  display: block;
  width: 100%;
  height: auto;
}
.section__2 .section__2_1_balloon,
.section__2 .section__2_2_balloon,
.section__2 .section__2_3_balloon,
.section__2 .section__2_4_balloon {
  position: absolute;
  width: auto;
  height: auto;
  z-index: 10;
}
.section__2 .section__2_1_balloon {
  top: var(--balloon-top);
  left: var(--balloon-left);
  width: clamp(10.85625rem, 0.0037076271rem + 54.2627118644vw, 50.875rem);
  height: clamp(5.85625rem, 0.0037076271rem + 29.2627118644vw, 27.4375rem);
  animation: zoominout 1s ease 0s infinite alternate;
  transform-origin: center;
}
.section__2 .section__2_1_balloon_link {
  position: absolute;
  top: var(--balloon-top);
  left: var(--balloon-left);
  width: var(--balloon-width);
  height: var(--balloon-height);
  z-index: 20;
  display: block;
  background-color: rgba(0, 0, 0, 0);
}
.section__2 .section__2_2_balloon {
  top: 2.5%;
  left: 7%;
  width: clamp(9.89375rem, 0.000529661rem + 49.4661016949vw, 46.375rem);
  height: clamp(5.46875rem, 0.0026483051rem + 27.3305084746vw, 25.625rem);
  animation: zoominout 1s ease 0s infinite alternate;
  transform-origin: center;
}
.section__2 .section__2_3_balloon {
  top: 4.5%;
  left: 49%;
  width: clamp(8.1625rem, 0.0031779661rem + 40.7966101695vw, 38.25rem);
  height: clamp(4.70625rem, -0.000529661rem + 23.5338983051vw, 22.0625rem);
  animation: zoominout 1s ease 0s infinite alternate;
  transform-origin: center;
}
.section__2 .section__2_4_balloon {
  top: 5.1%;
  left: 5%;
  width: clamp(9.89375rem, 0.000529661rem + 49.4661016949vw, 46.375rem);
  height: clamp(5.48125rem, 0.0015889831rem + 27.3983050847vw, 25.6875rem);
  animation: zoominout 1s ease 0s infinite alternate;
  transform-origin: center;
}

.section__3 {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
}
.section__3 .contents_both {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.section__3 .button_container {
  position: relative;
}
.section__3 .button_base {
  display: block;
  width: clamp(20rem, 0rem + 100vw, 93.75rem);
}
.section__3 .button_3_1,
.section__3 .button_3_2,
.section__3 .button_3_3,
.section__3 .button_3_4,
.section__3 .button_3_5 {
  position: absolute;
  top: 0;
  left: 0;
}
.section__3 .serena .button_base {
  height: clamp(6.89375rem, 0.000529661rem + 34.4661016949vw, 32.3125rem);
}
.section__3 .sakura .button_base {
  height: clamp(6.70625rem, -0.000529661rem + 33.5338983051vw, 31.4375rem);
}
.section__3 .ariya .button_base {
  height: clamp(6.73125rem, -0.0026483051rem + 33.6694915254vw, 31.5625rem);
}
.section__3 .x-trail .button_base {
  height: clamp(6.8rem, 0rem + 34vw, 31.875rem);
}
.section__3 .leaf .button_base {
  height: clamp(8.91875rem, -0.0015889831rem + 44.6016949153vw, 41.8125rem);
}
.section__3 .button_3_1 {
  width: clamp(5.08125rem, 0.0015889831rem + 25.3983050847vw, 23.8125rem);
  height: clamp(0.90625rem, -0.000529661rem + 4.5338983051vw, 4.25rem);
  top: 74%;
  left: 15.5%;
}
.section__3 .button_3_2 {
  top: 72%;
  left: 59%;
}
.section__3 .button_3_3 {
  top: 73%;
  left: 15.3%;
}
.section__3 .button_3_4 {
  top: 72%;
  left: 59%;
}
.section__3 .button_3_5 {
  top: 75%;
  left: 14.5%;
}
.section__3 .button_3_2,
.section__3 .button_3_3,
.section__3 .button_3_4,
.section__3 .button_3_5 {
  width: clamp(5.06875rem, 0.0026483051rem + 25.3305084746vw, 23.75rem);
  height: clamp(0.90625rem, -0.000529661rem + 4.5338983051vw, 4.25rem);
}
.section__3 .serena {
  height: clamp(6.8125rem, -0.1027542373rem + 34.5762711864vw, 32.3125rem);
}
.section__3 .sakura {
  height: clamp(6.6875rem, -0.0243644068rem + 33.5593220339vw, 31.4375rem);
}
.section__3 .ariya {
  height: clamp(6.6875rem, -0.0582627119rem + 33.7288135593vw, 31.5625rem);
}
.section__3 .x-trail {
  height: clamp(6.8125rem, 0.0158898305rem + 33.9830508475vw, 31.875rem);
}
.section__3 .leaf {
  height: clamp(8.875rem, -0.0572033898rem + 44.6610169492vw, 41.8125rem);
}
@media (min-width: 1500px) {
  .section__3 .serena {
    max-height: 517px;
  }
  .section__3 .sakura {
    max-height: 503px;
  }
  .section__3 .ariya {
    max-height: 505px;
  }
  .section__3 .x-trail {
    max-height: 510px;
  }
  .section__3 .leaf {
    max-height: 669px;
  }
}

.section_cta {
  background-image: url("../img/cta_bg.png");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: none;
  padding-bottom: clamp(3.125rem, 2.2775423729rem + 4.2372881356vw, 6.25rem);
}
@media (max-width: 1300px) {
  .section_cta {
    background-size: 150%;
  }
}

.popup-trigger {
  cursor: pointer;
}

.popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.popup.is-open {
  display: flex;
}
.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.popup__dialog {
  position: relative;
  z-index: 1;
  width: min(90vw, 900px);
  max-height: calc(100dvh - 48px);
  background-color: #ffffff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .popup__dialog {
    max-height: calc(80dvh - 48px);
  }
}
@media (max-width: 768px) {
  .popup__dialog {
    max-height: calc(80dvh - 48px);
  }
}
.popup__close {
  align-self: flex-end;
  background: #000;
  color: #fff;
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
}
.popup__content {
  margin-top: 16px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}

@keyframes zoominout {
  from {
    transform: scale(0.9, 0.9);
  }
  to {
    transform: scale(1, 1);
  }
}

/*# sourceMappingURL=style.css.map */