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

/* html */
html * {
  color: #231815;
}
html body {
  overflow-x: clip;
}
html a {
  transition: 0.3s;
}
html a:hover, html a:active {
  opacity: 0.85;
}
html img {
  width: 100%;
  height: 100%;
  vertical-align: unset;
}

/* .visually-hidden */
.visually-hidden {
  position: fixed;
  contain: strict;
  visibility: initial;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  inset: 0px;
  margin: unset;
  padding: unset;
  border: unset;
}

/* .popup */
.popup[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: unset;
  overflow: hidden;
}
.popup[popover]::backdrop {
  background-color: rgb(from #b1b1b1 r g b/0.5);
}
.popup__close-btn {
  width: clamp(1.28rem, 0rem + 6.4vw, 3rem);
  aspect-ratio: 1;
  padding: clamp(0.1066666667rem, 0rem + 0.5333333333vw, 0.25rem);
}
.popup__close-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/icon_close.png");
  background-image: image-set(url("../img/icon_close.png") 1x, url("../img/icon_close@2x.png") 2x);
}

/* .wrapper */
.wrapper {
  overflow-x: clip;
  background-image: url("../img/bg_wrapper.png");
  background-image: image-set(url("../img/bg_wrapper.png") 1x, url("../img/bg_wrapper@2x.png") 2x);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.wrapper header.header,
.wrapper main.main {
  width: 100%;
  max-width: 750px;
  margin-inline: auto;
}

/* .header */
.header {
  height: clamp(2.1333333333rem, 0rem + 10.6666666667vw, 5rem);
  padding-inline: clamp(0.84rem, 0rem + 4.2vw, 1.96875rem) clamp(0.9333333333rem, 0rem + 4.6666666667vw, 2.1875rem);
  background-color: #ffffff;
}
.header__container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo_nissan {
  width: clamp(5.9466666667rem, 0rem + 29.7333333333vw, 13.9375rem);
  aspect-ratio: 223/26;
}
.header__logo_kyoto-nissan a {
  display: block;
  width: clamp(4.4266666667rem, 0rem + 22.1333333333vw, 10.375rem);
  aspect-ratio: 166/41;
}

/* .main */
main.main {
  padding-bottom: env(safe-area-inset-bottom);
}

/* .main-visual */
.main-visual__img {
  aspect-ratio: 750/322;
}

/* .section1 */
.section1__container {
  display: grid;
  justify-items: center;
  max-width: 750px;
  padding-top: clamp(1.0666666667rem, 0rem + 5.3333333333vw, 2.5rem);
}
.section1__title {
  width: 88.2666666667%;
  aspect-ratio: 662/117;
}
.section1__content {
  padding-top: clamp(0.72rem, 0rem + 3.6vw, 1.6875rem);
  padding-bottom: clamp(0.96rem, 0rem + 4.8vw, 2.25rem);
}
.section1__bottom {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: inherit;
  background-color: #fff;
  padding-top: clamp(1.4666666667rem, 0rem + 7.3333333333vw, 3.4375rem);
  padding-bottom: clamp(1.4133333333rem, 0rem + 7.0666666667vw, 3.3125rem);
}

/* .slider */
.slider {
  width: fit-content;
  max-width: 706px;
  max-height: 490px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: clamp(1.28rem, 0rem + 6.4vw, 3rem) max-content clamp(1.28rem, 0rem + 6.4vw, 3rem);
  align-items: center;
  justify-content: center;
}
.slider__prev-btn, .slider__next-btn {
  aspect-ratio: 1;
  background-size: 45.8333333333% 83.3333333333%;
  background-position: center;
  background-repeat: no-repeat;
}
.slider__prev-btn {
  background-image: url("../img/icon_chevron-left.png");
  background-image: image-set(url("../img/icon_chevron-left.png") 1x, url("../img/icon_chevron-left@2x.png") 2x);
}
.slider__next-btn {
  background-image: url("../img/icon_chevron-right.png");
  background-image: image-set(url("../img/icon_chevron-right.png") 1x, url("../img/icon_chevron-right@2x.png") 2x);
}
.slider__contents {
  width: clamp(16.2666666667rem, 0rem + 81.3333333333vw, 38.125rem);
}
.slider__slide-item {
  width: clamp(16.2666666667rem, 0rem + 81.3333333333vw, 38.125rem);
  max-width: 610px;
  height: clamp(13.0666666667rem, 0rem + 65.3333333333vw, 30.625rem);
  max-height: 490px;
  aspect-ratio: 610/490;
}

/* #popup-column */
#popup-column__open-btn {
  width: 81.3333333333%;
  aspect-ratio: 610/97;
  transition: scale 0.2s;
}
#popup-column__open-btn:hover, #popup-column__open-btn:active {
  scale: 1.03;
}
#popup-column[popover] {
  --modal-padding-y: clamp(0.4266666667rem, 0rem + 2.1333333333vw, 1rem);
  width: clamp(16.2666666667rem, 0rem + 81.3333333333vw, 38.125rem);
  height: clamp(24.6666666667rem, 0rem + 123.3333333333vw, 57.8125rem);
  max-height: min(925px, 80vh);
  background-color: #fff;
  padding-block: var(--modal-padding-y);
}
#popup-column[popover]:popover-open {
  display: grid;
  grid-template-rows: clamp(1.28rem, 0rem + 6.4vw, 3rem) 1fr;
}
#popup-column__close-btn {
  position: sticky;
  top: 0;
  left: 100%;
  margin-right: clamp(0.3733333333rem, 0rem + 1.8666666667vw, 0.875rem);
  z-index: 1;
}
#popup-column .popup__container {
  overflow-y: auto;
  mask-image: linear-gradient(transparent, #000 var(--modal-padding-y) calc(100% - var(--modal-padding-y)), transparent);
  padding-inline: clamp(0.8rem, 0rem + 4vw, 1.875rem);
  padding-top: clamp(0.7466666667rem, 0rem + 3.7333333333vw, 1.75rem);
  padding-bottom: clamp(0.64rem, 0rem + 3.2vw, 1.5rem);
}
#popup-column .popup__note {
  margin-top: 1em;
  text-wrap-mode: nowrap;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: clamp(0.3733333333rem, 0rem + 1.8666666667vw, 0.875rem);
  line-height: 1.2857142857;
  font-feature-settings: "palt";
  letter-spacing: 0.25px;
}
#popup-column .popup__note a:hover,
#popup-column .popup__note a:active {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-position: from-font;
}

/* .section2 */
.section2 {
  background-color: #fff;
}
.section2__container {
  background-image: url("../img/bg_section2.png");
  background-image: image-set(url("../img/bg_section2.png") 1x, url("../img/bg_section2@2x.png") 2x);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  justify-items: center;
  width: min(750px, 100vw);
  padding-top: clamp(1.44rem, 0rem + 7.2vw, 3.375rem);
}
.section2__title {
  width: 76.5333333333%;
  aspect-ratio: 574/115;
  margin-bottom: clamp(1.0666666667rem, 0rem + 5.3333333333vw, 2.5rem);
}
.section2__banner {
  width: 81.3333333333%;
  aspect-ratio: 610/210;
  margin-bottom: clamp(0.48rem, 0rem + 2.4vw, 1.125rem);
}
.section2__content {
  width: 81.8666666667%;
  aspect-ratio: 614/972;
  margin-bottom: clamp(0.48rem, 0rem + 2.4vw, 1.125rem);
}
.section2__sns-link {
  width: 81.3333333333%;
  aspect-ratio: 610/100;
  margin-bottom: clamp(2.1866666667rem, 0rem + 10.9333333333vw, 5.125rem);
  display: flex;
  column-gap: clamp(0.5333333333rem, 0rem + 2.6666666667vw, 1.25rem);
}

/* .section3 */
.section3 {
  background-color: #fff;
}
.section3__container {
  display: grid;
  justify-items: center;
  max-width: 750px;
  padding-top: clamp(1.4933333333rem, 0rem + 7.4666666667vw, 3.5rem);
}
.section3__title {
  width: 76.5333333333%;
  aspect-ratio: 574/116;
  margin-bottom: clamp(0.8533333333rem, 0rem + 4.2666666667vw, 2rem);
}
.section3__content {
  width: 81.3333333333%;
  max-width: 610px;
  margin-bottom: clamp(2.4rem, 0rem + 12vw, 5.625rem);
}

.section3__content {
  display: grid;
  grid-template-rows: repeat(3, [img-start] auto [img-end] clamp(1.28rem, 0rem + 6.4vw, 3rem));
  grid-template-columns: [img-start] 1fr [title-start] max-content [title-end btn-start] clamp(4.5066666667rem, 0rem + 22.5333333333vw, 10.5625rem) [btn-end img-end];
  column-gap: clamp(0.4266666667rem, 0rem + 2.1333333333vw, 1rem);
}

.ariya,
.leaf,
.sakura {
  grid-row: span 2;
  grid-column: span 3;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  align-items: center;
  position: relative;
}
.ariya__catchphrase,
.leaf__catchphrase,
.sakura__catchphrase {
  position: absolute;
  z-index: 5;
}
.ariya__img,
.leaf__img,
.sakura__img {
  grid-area: img;
  position: relative;
  z-index: 1;
  mix-blend-mode: multiply;
}
.ariya__title,
.leaf__title,
.sakura__title {
  grid-area: title;
  z-index: 5;
}
.ariya__btn,
.leaf__btn,
.sakura__btn {
  grid-area: btn;
  z-index: 9;
}
.ariya__btn::after,
.leaf__btn::after,
.sakura__btn::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ariya .popup__open-btn,
.leaf .popup__open-btn,
.sakura .popup__open-btn {
  height: 100%;
  aspect-ratio: 1;
  padding: clamp(0.1066666667rem, 0rem + 0.5333333333vw, 0.25rem);
}
.ariya .popup__open-btn::before,
.leaf .popup__open-btn::before,
.sakura .popup__open-btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../img/icon_plus.png");
  background-image: image-set(url("../img/icon_plus.png") 1x, url("../img/icon_plus@2x.png") 2x);
}
.ariya::after,
.leaf::after,
.sakura::after {
  content: "";
  position: absolute;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.ariya .popup__close-btn,
.leaf .popup__close-btn,
.sakura .popup__close-btn {
  margin: clamp(0.5066666667rem, 0rem + 2.5333333333vw, 1.1875rem);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

/* .ariya */
.ariya__catchphrase {
  top: clamp(0.32rem, 0rem + 1.6vw, 0.75rem);
  left: clamp(0.1333333333rem, 0rem + 0.6666666667vw, 0.3125rem);
  width: clamp(2.2133333333rem, 0rem + 11.0666666667vw, 5.1875rem);
  aspect-ratio: 83/233;
}
.ariya__img {
  margin-bottom: calc(-1 * clamp(0.0533333333rem, 0rem + 0.2666666667vw, 0.125rem));
  top: 0;
  left: clamp(1.4666666667rem, 0rem + 7.3333333333vw, 3.4375rem);
  width: clamp(13.3866666667rem, 0rem + 66.9333333333vw, 31.375rem);
  aspect-ratio: 502/252;
}
.ariya__title {
  justify-self: center;
  width: clamp(5.28rem, 0rem + 26.4vw, 12.375rem);
  aspect-ratio: 198/33;
}
.ariya::after {
  top: 0;
  right: calc(-1 * clamp(0.8266666667rem, 0rem + 4.1333333333vw, 1.9375rem));
  width: clamp(2.7733333333rem, 0rem + 13.8666666667vw, 6.5rem);
  aspect-ratio: 104/323;
  background-image: url("../img/img_paw-prints_1.png");
  background-image: image-set(url("../img/img_paw-prints_1.png") 1x, url("../img/img_paw-prints_1@2x.png") 2x);
}
.ariya .popup {
  width: clamp(16.2933333333rem, 0rem + 81.4666666667vw, 38.1875rem);
  height: clamp(11.5466666667rem, 0rem + 57.7333333333vw, 27.0625rem);
  aspect-ratio: 611/433;
}

/* .leaf */
.leaf__catchphrase {
  top: clamp(1.7866666667rem, 0rem + 8.9333333333vw, 4.1875rem);
  right: calc(-1 * clamp(0.0533333333rem, 0rem + 0.2666666667vw, 0.125rem));
  width: clamp(2.64rem, 0rem + 13.2vw, 6.1875rem);
  aspect-ratio: 99/148;
}
.leaf__img {
  margin-top: calc(-1 * clamp(0.8rem, 0rem + 4vw, 1.875rem));
  margin-bottom: calc(-1 * clamp(0.8533333333rem, 0rem + 4.2666666667vw, 2rem));
  top: calc(-1 * clamp(0.1866666667rem, 0rem + 0.9333333333vw, 0.4375rem));
  left: clamp(0.72rem, 0rem + 3.6vw, 1.6875rem);
  width: clamp(14.72rem, 0rem + 73.6vw, 34.5rem);
  aspect-ratio: 552/347;
}
.leaf__title {
  grid-row: 2;
  grid-column: 1/3;
  position: relative;
  left: clamp(2.8533333333rem, 0rem + 14.2666666667vw, 6.6875rem);
  display: flex;
  column-gap: clamp(0.9333333333rem, 0rem + 4.6666666667vw, 2.1875rem);
}
.leaf__title .new {
  width: clamp(2.16rem, 0rem + 10.8vw, 5.0625rem);
  aspect-ratio: 81/34;
}
.leaf__title .title {
  width: clamp(4.7733333333rem, 0rem + 23.8666666667vw, 11.1875rem);
  aspect-ratio: 179/33;
}
.leaf::after {
  top: clamp(5.2rem, 0rem + 26vw, 12.1875rem);
  left: calc(-1 * clamp(0.5866666667rem, 0rem + 2.9333333333vw, 1.375rem));
  width: clamp(1.8133333333rem, 0rem + 9.0666666667vw, 4.25rem);
  aspect-ratio: 68/210;
  background-image: url("../img/img_paw-prints_2.png");
  background-image: image-set(url("../img/img_paw-prints_2.png") 1x, url("../img/img_paw-prints_2@2x.png") 2x);
}
.leaf .popup {
  width: clamp(16.2933333333rem, 0rem + 81.4666666667vw, 38.1875rem);
  height: clamp(11.5466666667rem, 0rem + 57.7333333333vw, 27.0625rem);
  aspect-ratio: 611/433;
}

/* .sakura */
.sakura__catchphrase {
  top: clamp(1.3866666667rem, 0rem + 6.9333333333vw, 3.25rem);
  left: clamp(0.96rem, 0rem + 4.8vw, 2.25rem);
  width: clamp(2.6666666667rem, 0rem + 13.3333333333vw, 6.25rem);
  aspect-ratio: 100/167;
}
.sakura__img {
  margin-bottom: clamp(0.08rem, 0rem + 0.4vw, 0.1875rem);
  left: clamp(2.5066666667rem, 0rem + 12.5333333333vw, 5.875rem);
  width: clamp(13.0666666667rem, 0rem + 65.3333333333vw, 30.625rem);
  aspect-ratio: 490/296;
}
.sakura__title {
  justify-self: center;
  width: clamp(7.0666666667rem, 0rem + 35.3333333333vw, 16.5625rem);
  aspect-ratio: 265/31;
}
.sakura::after {
  top: clamp(5.5733333333rem, 0rem + 27.8666666667vw, 13.0625rem);
  right: calc(-1 * clamp(0.08rem, 0rem + 0.4vw, 0.1875rem));
  width: clamp(2.1866666667rem, 0rem + 10.9333333333vw, 5.125rem);
  aspect-ratio: 82/206;
  background-image: url("../img/img_paw-prints_3.png");
  background-image: image-set(url("../img/img_paw-prints_3.png") 1x, url("../img/img_paw-prints_3@2x.png") 2x);
}
.sakura .popup {
  width: clamp(16.2933333333rem, 0rem + 81.4666666667vw, 38.1875rem);
  height: clamp(11.5466666667rem, 0rem + 57.7333333333vw, 27.0625rem);
  aspect-ratio: 611/433;
}

/* .fixed-link */
.fixed-link {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}
:has(+ .fixed-link) {
  padding-bottom: clamp(2.6666666667rem, 0rem + 13.3333333333vw, 6.25rem);
}
.fixed-link::after {
  content: "";
  display: block;
  height: env(safe-area-inset-bottom);
  background-color: rgb(from #fff r g b/0.5);
  backdrop-filter: blur(16px);
}
.fixed-link__container {
  display: flex;
  overflow-y: hidden;
  justify-content: center;
  gap: clamp(0.5333333333rem, 0rem + 2.6666666667vw, 1.25rem);
}
.fixed-link a {
  display: block;
  width: clamp(9.1733333333rem, 0rem + 45.8666666667vw, 21.5rem);
  height: clamp(2.6133333333rem, 0rem + 13.0666666667vw, 6.125rem);
  translate: 0 clamp(0.125rem, 0.0319767442rem + 0.4651162791vw, 0.25rem);
}
.fixed-link a:hover, .fixed-link a:active {
  opacity: 1;
  translate: 0 0;
}/*# sourceMappingURL=style.css.map */