@charset "UTF-8";
/*
* top.css
*
*/
/* --------------------------------
  top
-------------------------------- */
/* --------------------------------
  bg
-------------------------------- */
.un_page_bg {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  background-image: url(/special/holiday_gift_2025/assets/img/bg_img.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 767.98px) {
  .un_page_bg {
    display: none;
  }
}

.un_page_mainArea {
  overflow-x: clip;
  width: 100%;
  box-shadow: 0 0 min(3.2vw, 16px) color-mix(in srgb, var(--srk-holiday-gift-bg-base), transparent 15%);
}
@media (min-width: 768px) {
  .un_page_mainArea {
    width: min(100vw, 500px);

    margin-inline: auto;
  }
}

.un_page_top {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
}

.un_kv {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
}

.un_kv_mv {
  width: 100%;
  height: 100%;
}
.un_kv_mv img,
.un_kv_mv video {
  width: 100%;
  height: 100%;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.un_kv_txt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  letter-spacing: 0.05em;
  pointer-events: none;
  font-size: min(8.5333333333vw, 42.6666666667px);
  font-weight: 500;
  line-height: 1.5;

  translate: 0 -50%;
  padding-inline: min(6.4vw, 32px);
}
.un_kv_txt span {
  display: block;
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  line-height: inherit;

  -webkit-margin-after: min(3.4666666667vw, 17.3333333333px);

          margin-block-end: min(3.4666666667vw, 17.3333333333px);
}

.un_kv_scroll {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  right: min(6.4vw, 32px);
  bottom: min(6.4vw, 32px);
}
.is-min-size .un_kv_scroll {
  position: fixed;
}
@media (min-width: 768px) {
  .is-min-size .un_kv_scroll {
    right: calc((100vw - min(100vw, 500px)) / 2 + min(5.3333333333vw, 26.6666666667px));
  }
}

@-webkit-keyframes scroll_bar {
  0% {
    transform-origin: 0 0;

    scale: 1 0;
  }
  30% {
    transform-origin: 0 0;

    scale: 1 1;
  }
  51% {
    transform-origin: 0 100%;

    scale: 1 1;
  }
  82% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
  100% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
}

@keyframes scroll_bar {
  0% {
    transform-origin: 0 0;

    scale: 1 0;
  }
  30% {
    transform-origin: 0 0;

    scale: 1 1;
  }
  51% {
    transform-origin: 0 100%;

    scale: 1 1;
  }
  82% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
  100% {
    transform-origin: 0 100%;

    scale: 1 0;
  }
}
.un_kv_scroll_bar {
  overflow: hidden;
  position: relative;
  width: 1px;
  height: 9vh;
  max-height: min(17.6vw, 88px);
  background-color: color-mix(in srgb, var(--srk-holiday-gift-font-color-white), transparent 80%);
}
.un_kv_scroll_bar::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  -webkit-animation: scroll_bar 2.2s infinite;
          animation: scroll_bar 2.2s infinite;
  background-color: var(--srk-holiday-gift-font-color-white);

  translate: -50% 0;
}

.un_kv_scroll_text {
  letter-spacing: 0.05em;
  font-size: min(3.7333333333vw, 18.6666666667px);
  line-height: 1.2;

  writing-mode: vertical-lr;
  -webkit-margin-before: min(0.8vw, 4px);
          margin-block-start: min(0.8vw, 4px);
}

/* --------------------------------
  concept
-------------------------------- */
.un_concept {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
}

.un_concept_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--srk-holiday-gift-bg-base);
  pointer-events: none;
}

.un_concept_section {
  padding-block: min(21.3333333333vw, 106.6666666667px);
}

.un_concept_section_inner p:nth-of-type(2) {
  -webkit-margin-before: min(5.3333333333vw, 26.6666666667px);
          margin-block-start: min(5.3333333333vw, 26.6666666667px);
}
.un_concept_section_inner p:last-of-type {
  -webkit-margin-before: min(21.3333333333vw, 106.6666666667px);
          margin-block-start: min(21.3333333333vw, 106.6666666667px);
}

.un_concept_mvWrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;

  gap: min(6.4vw, 32px);
  -webkit-margin-before: min(21.3333333333vw, 106.6666666667px);
          margin-block-start: min(21.3333333333vw, 106.6666666667px);
}

.un_concept_mvBox {
  overflow: hidden;
  position: relative;
}
.un_concept_mvBox:first-of-type {
  width: min(71.7333333333vw, 358.6666666667px);
  height: min(95.7333333333vw, 478.6666666667px);

  -webkit-margin-start: auto;

          margin-inline-start: auto;
}
.un_concept_mvBox:last-of-type {
  width: min(74.6666666667vw, 373.3333333333px);
  height: min(74.6666666667vw, 373.3333333333px);

  -webkit-margin-start: min(6.4vw, 32px);

          margin-inline-start: min(6.4vw, 32px);
}

.un_concept_mv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.un_concept_mv video {
  width: 100%;
}

/* --------------------------------
  item
-------------------------------- */
.un_item {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
  background-color: var(--srk-holiday-gift-bg-base);
}

.un_item_kv {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;

  aspect-ratio: 375/532;
}

.un_item_kv_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  translate: 0 -70px;
}

.un_item_heading {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-margin-start: min(6.4vw, 32px);

          margin-inline-start: min(6.4vw, 32px);
  -webkit-margin-before: min(17.0666666667vw, 85.3333333333px);
          margin-block-start: min(17.0666666667vw, 85.3333333333px);
  gap: min(6.4vw, 32px);
}

.un_item_section_inner {
  position: relative;
  background-color: var(--srk-holiday-gift-bg-base);

  padding-block: min(0.5333333333vw, 2.6666666667px) min(21.3333333333vw, 106.6666666667px);
}
.un_item_section_inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  border-radius: 0 999px 0 0;
  width: 100%;
  height: min(10.6666666667vw, 53.3333333333px);
  background-color: var(--srk-holiday-gift-bg-base);

  translate: 0 -100%;
}

.un_item_lead {
  -webkit-padding-after: min(10.6666666667vw, 53.3333333333px);
          padding-block-end: min(10.6666666667vw, 53.3333333333px);
}

.un_item_lead_txts {
  display: flex;
  flex-direction: column;

  gap: min(6.5333333333vw, 32.6666666667px);
  -webkit-margin-after: min(2.1333333333vw, 10.6666666667px);
          margin-block-end: min(2.1333333333vw, 10.6666666667px);
}
.un_item_lead_txts sup {
  position: relative;
  top: -0.375rem;
}

.un_item_contents {
  display: flex;
  flex-direction: column;
  position: relative;

  -webkit-padding-before: min(10.6666666667vw, 53.3333333333px);

          padding-block-start: min(10.6666666667vw, 53.3333333333px);
  gap: min(21.3333333333vw, 106.6666666667px);
}

.un_item_line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--srk-holiday-gift-color-border);

  translate: 0 -50%;
}

.un_item_content {
  display: flex;
  flex-direction: column;

  gap: min(6.4vw, 32px);
}

.un_item_content_heading {
  display: flex;
  flex-direction: column;

  gap: min(1.0666666667vw, 5.3333333333px);
}

.un_item_content_imgBox,
.un_item_content_movie {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.un_item_content_img {
  width: 100%;

  aspect-ratio: 327/219;
}

.un_item_content_movie {
  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-move: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  aspect-ratio: 327/184;
}
.un_item_content_movie::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: color-mix(in srgb, #d2af70, transparent 30%);
}
.un_item_content_movie span {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(21.3333333333vw, 106.6666666667px);
  color: var(--srk-holiday-gift-font-color-white);

  gap: min(1.0666666667vw, 5.3333333333px);
  translate: -50% -50%;
  aspect-ratio: 1;
}
.un_item_content_movie span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: min(0.2666666667vw, 1.3333333333px) solid var(--srk-holiday-gift-color-white);
  border-radius: 999px;
  width: 100%;
  height: 100%;
  transition: scale 0.35s var(--_ease-move);

  translate: -50% -50%;
  scale: 1;
}
.un_item_content_movie span::after {
  content: "";
  display: block;
  width: min(2.1333333333vw, 10.6666666667px);
  height: min(2.1333333333vw, 10.6666666667px);
  background-image: url(/special/holiday_gift_2025/assets/img/icon_arw.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(2.1333333333vw, 10.6666666667px) min(2.1333333333vw, 10.6666666667px);
}
@media (hover: hover) and (pointer: fine) {
  .un_item_content_movie:where(:-webkit-any-link, :enabled, summary):hover span::before {
    -webkit-transition: scale 0.45s var(--_ease-move);
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
  .un_item_content_movie:where(:-moz-any-link, :enabled, summary):hover span::before {
    -moz-transition: scale 0.45s var(--_ease-move);
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
  .un_item_content_movie:where(:any-link, :enabled, summary):hover span::before {
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .un_item_content_movie.is-touched span::before {
    transition: scale 0.45s var(--_ease-move);

    scale: 1.03;
  }
}

/* --------------------------------
  lineup
-------------------------------- */
.un_lineup {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
  background-color: var(--srk-holiday-gift-bg-gold);
  color: var(--srk-holiday-gift-font-color-white);
}

/*--------------------------------
  special
--------------------------------*/
.un_special {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
  background-color: var(--srk-holiday-gift-bg-base);
}

.un_special_kv {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;

  aspect-ratio: 375/211;
}
.un_special_kv video {
  width: 100%;
  height: auto;

  -o-object-fit: cover;

     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.un_special_section {
  position: relative;
}

.un_special_section_inner {
  background-color: var(--srk-holiday-gift-bg-base);

  padding-block: min(10.6666666667vw, 53.3333333333px) min(21.3333333333vw, 106.6666666667px);
}
.un_special_section_inner::before {
  content: "";
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  border-radius: 0 999px 0 0;
  width: 100%;
  height: min(10.6666666667vw, 53.3333333333px);
  background-color: var(--srk-holiday-gift-bg-base);

  translate: 0 -100%;
}

.un_special_heading {
  display: flex;
  flex-direction: column;

  gap: min(2.1333333333vw, 10.6666666667px);
  -webkit-margin-after: min(10.6666666667vw, 53.3333333333px);
          margin-block-end: min(10.6666666667vw, 53.3333333333px);
}

.un_special_content_imgBox {
  overflow: hidden;
  position: relative;
  width: 100%;

  aspect-ratio: 1;
}

.un_special_content_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  translate: 0 -70px;
}

.un_special_content_txts {
  display: flex;
  flex-direction: column;

  -webkit-margin-before: min(10.6666666667vw, 53.3333333333px);

          margin-block-start: min(10.6666666667vw, 53.3333333333px);
  gap: min(2.1333333333vw, 10.6666666667px);
}

/* --------------------------------
  buy
-------------------------------- */
.un_buy {
  position: relative;
  z-index: var(--srk-holiday-gift-z_index-container);
  background-color: var(--srk-holiday-gift-bg-base);
}

.un_buy_section_inner {
  padding-block: min(10.6666666667vw, 53.3333333333px) min(21.3333333333vw, 106.6666666667px);
}

.un_buy_heading {
  display: flex;
  flex-direction: column;

  gap: min(2.1333333333vw, 10.6666666667px);
}

.un_buy_btns {
  display: flex;
  flex-direction: column;

  gap: min(6.4vw, 32px);
  -webkit-margin-before: min(10.6666666667vw, 53.3333333333px);
          margin-block-start: min(10.6666666667vw, 53.3333333333px);
}

.un_buy_txt {
  -webkit-margin-before: min(6.9333333333vw, 34.6666666667px);
          margin-block-start: min(6.9333333333vw, 34.6666666667px);
}

.js_snow_container {
  position: fixed;
  z-index: var(--srk-holiday-gift-z_index-container);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.js_snowBox {
  opacity: var(--opacity);
  position: absolute;
  width: var(--size);
  height: var(--size);
  -webkit-animation: snowFall var(--speed) linear infinite, snowRotate var(--rotation-speed) linear infinite;
          animation: snowFall var(--speed) linear infinite, snowRotate var(--rotation-speed) linear infinite;
}

.js_snow {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #fff 0%, #e8f4f8 70%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.4);
}

@-webkit-keyframes snowFall {
  0% {
    translate: 0 -100px;
  }
  100% {
    translate: 0 calc(100lvh + 400px);
  }
}

@keyframes snowFall {
  0% {
    translate: 0 -100px;
  }
  100% {
    translate: 0 calc(100lvh + 400px);
  }
}
@-webkit-keyframes snowRotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: -360deg;
  }
}
@keyframes snowRotate {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: -360deg;
  }
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .js_snow {
    width: 4px;
    height: 4px;
  }
}