@charset "UTF-8";

/* 英文與數字使用 Google Sans；日文與中文依序使用 Noto Sans JP、TC。 */
body {
  font-family: "Google Sans", "Noto Sans JP", "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
button, input, select, textarea {
  font: inherit;
}
/* 基礎樣式 */
.mainframe {
  position: relative;
  padding: 0;
  margin: 0;
  background-color: #FFFFFF;
  font-size: 15px;
}

.mainframe a {
  text-decoration: none;
}

.mainframe img {
  max-width: 100%;
  display: block;
}

.mainframe p,
.mainframe a,
.mainframe p span {
  font-size: 15px;
  color: #000000;
  margin: 0;
}

/* 主視覺與介紹 */
.mainframe .section__top {
  margin: 0 auto;
  padding: 0;
}

.mainframe .section__top img {
  width: 100%;
  height: auto;
}

.section__video {
  width: 100%;
  padding: 48px 0;
  background: #fff;
}

.section__video .feature-video {
  display: block;
  width: min(100%);
  /*max-width: 600px;*/
  margin: 0 auto;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

@media screen and (max-width: 600px) {
  .section__video .feature-video {
    width: 90%;
  }
}

.mainframe .section__desc {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: max(560px, 41.6667vw);
  padding: clamp(48px, 6.5vw, 125px) clamp(24px, 4.7vw, 90px);
  background-color: #101a13;
  color: #FFFFFF;
  text-align: left;
}

.mainframe .section__desc .section__desc-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mainframe .section__desc-content {
  width: 100%;
  max-width: 720px;
}

.mainframe .section__desc p {
  color: inherit;
  font-size: clamp(13px, 1.04vw, 20px);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align:justify;
}

.mainframe .section__desc .section__desc-label {
  margin-bottom: 32px;
  font-size: clamp(10px, 0.73vw, 14px);
  letter-spacing: 0.22em;
}

.mainframe .section__desc h1 {
  margin: 0 0 32px;
  font-size: clamp(28px, 2.6vw, 50px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.mainframe .section__desc p + p {
  margin-top: 24px;
}
/* 主圖輪播：.look-gallery > .look-slider */
.mainframe .section__items .item .look-gallery {
  max-width: 760px;
  margin: 0 auto 5rem;
}

.mainframe .section__items .item .look-slider {
  min-width: 0;
}

.mainframe .section__items .item .look-slider.slick-initialized {
  display: block;
}

.mainframe .section__items .item .look-slider img {
  width: 100%;
}

.mainframe .section__items .item .look-slider .slick-dots {
  bottom: -32px;
}

.mainframe .section__items .item .look-slider .slick-dots li {
  width: 8px;
  height: 8px;
  margin: 0 5px;
}

.mainframe .section__items .item .look-slider .slick-dots li button {
  width: 8px;
  height: 8px;
  padding: 0;
}

.mainframe .section__items .item .look-slider .slick-dots li button:before {
  width: 8px;
  height: 8px;
  color: #000000;
  font-size: 8px;
  line-height: 8px;
}

.mainframe .look-hero-slider img {
  width: 100%;
  height: auto;
}

.mainframe .look-hero-slider:not(.slick-initialized) > div:not(:first-child) {
  display: none;
}

.mainframe .look-photo-slider {
  min-width: 0;
  margin-bottom: 30px;
}

/* Slick 無法載入時仍顯示第一張穿搭照。 */
.mainframe .look-photo-slider:not(.slick-initialized) > div:not(:first-child) {
  display: none;
}

.mainframe .look-photo-slider .slick-dots {
  bottom: -30px;
}

.mainframe .look-photo-slider .slick-dots li button:before {
  color: #000000;
  font-size: 8px;
}

/* --------------------
		footer
-------------------- */
.footer {
  padding: 16vw 0;
  background-color: #000; }
  @media screen and (min-width: 1000px) {
    .footer {
      padding: 3.90625vw 0; } }
  .footer img {
    width: 100%;
    height: auto; }
  .footer__logo {
    width: 29.33333vw;
    margin: 0 auto 4.26667vw; }
    @media screen and (min-width: 1000px) {
      .footer__logo {
        width: min(130px, 10.15625vw);
        margin: 0 auto 1.25vw; } }
    .footer__logo a {
      display: block; }
      @media screen and (min-width: 1000px) {
        .footer__logo a {
          transition: all 0.5s ease; }
          .footer__logo a:hover {
            opacity: 0.5; } }
  .footer__copyright {
    text-align: center;
    color: #fff;
    font-size: 2.93333vw;
    font-weight: 400;
    letter-spacing: 0.05em; }
    @media screen and (min-width: 1000px) {
      .footer__copyright {
        font-size: min(13px, 1.01563vw); } }

/* 圖片輪播尚未初始化時顯示第一張。 */
.mainframe .look-slider:not(.slick-initialized) > :not(:first-child) {
  display: none;
}

/* 商品輪播桌面排列。 */
.mainframe .section__items .item .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.mainframe .section__items .item .inner a.col {
  display: block;
  width: 280px;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .mainframe .section__desc {
    min-height: 560px;
    padding: 48px 24px;

  }
  .mainframe .section__desc-content {
    max-width: 420px;
  }
  .mainframe .section__desc .desktop-break {
    display: none;
  }
  .mainframe .section__items .item .inner {
    gap: 0;
  }
  .mainframe .section__items .item .inner.slick-initialized {
    display: block;
    max-width: 100%;
  }

.mainframe .section__items .item .inner.slick-initialized a.col {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .mainframe .section__items .item .inner.slick-initialized a.col:hover {
    transform: none;
  }

  .mainframe .section__items .item .inner.slick-initialized a.col .item-top img {
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
  }

  .mainframe .section__items .item .inner.slick-initialized a.col .item-bot p.item-name {
    margin-top: 1.5rem;
    font-size: 13px;
  }

  .mainframe .section__items .item .inner.slick-initialized .shop-button {
    margin-bottom: 1.5rem;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-prev,
  .mainframe .section__items .item .inner.slick-initialized .slick-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-prev {
    left: 0.2rem;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-next {
    right: 0.2rem;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-prev:before,
  .mainframe .section__items .item .inner.slick-initialized .slick-next:before {
    content: "";
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-prev span,
  .mainframe .section__items .item .inner.slick-initialized .slick-next span {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    border-top: 1.5px solid #9c9c9c;
    border-right: 1.5px solid #9c9c9c;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-prev span {
    transform: rotate(-135deg);
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-next span {
    transform: rotate(45deg);
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -5px;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-dots li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin: 0 1px;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-dots li button {
    position: relative;
    width: 15px;
    height: 15px;
    padding: 0;
    line-height: 1;
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-dots li button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7d7d7;
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .mainframe .section__items .item .inner.slick-initialized .slick-dots li.slick-active button:before {
    background: #666666;
  }

}





@media screen and (max-width: 600px) {
  .mainframe .section__desc .section__desc-bg {
    object-position: 58% center;
  }
}




/* 商品展示：主圖輪播與商品資訊。 */
.product-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #edeaea;
}
.product-gallery { position: relative; min-width: 0; background: #152019; }
.product-slider { margin: 0; }
.product-slider:not(.slick-initialized) > div:not(:first-child) { display: none; }
.mainframe .product-slider img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; }
.product-slider .slick-list { margin: 0; }
.product-slider .slick-arrow { position: absolute; top: 52%; width: 48px; height: 56px; z-index: 2; background: transparent; }
.product-slider .slick-prev { left: 20px; }
.product-slider .slick-next { right: 20px; }
.product-slider .slick-arrow:before { content: ''; display: block; width: 23px; height: 23px; border-top: 2px solid white; border-right: 2px solid white; opacity: 1; margin: auto; }
.product-slider .slick-prev:before { transform: rotate(-135deg); }
.product-slider .slick-next:before { transform: rotate(45deg); }
.mainframe .product-counter { position: absolute; top: 28px; right: 32px; display: flex; align-items: baseline; gap: 6px; color: #fff; font-weight: 400; line-height: 1; white-space: nowrap; pointer-events: none; }
.mainframe .product-counter .product-current { color: inherit; font-size: clamp(27px, 2.6vw, 50px); line-height: 1; }
.mainframe .product-counter .product-total { color: inherit; font-size: clamp(15px, 1.5vw, 29px); line-height: 1; }
.product-thumbnails { position: absolute; bottom: 30px; left: 6.5%; right: 6.5%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.product-thumbnails::-webkit-scrollbar { display: none; }
.product-thumbnails button { flex: 0 0 calc((100% - 30px) / 6); min-width: 0; border: 2px solid transparent; cursor: pointer; opacity: 085; }
.product-thumbnails button.is-active { border-color: white; opacity: 1; }
.mainframe .product-thumbnails img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.product-info { align-self: center; min-width: 0; padding: 64px clamp(40px, 5vw, 96px); }
.mainframe .product-label { font-size: clamp(15px, 1.2vw, 22px); letter-spacing: .06em; margin-bottom: 32px; }
.product-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.product-detail { cursor: zoom-in; }
.mainframe .product-detail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product-info h2 { font-size: clamp(20px, 1.6vw, 30px); font-weight: 400; letter-spacing: .06em; line-height: 1.5; margin: 24px 0 36px; overflow-wrap: anywhere; }
.mainframe .product-description { font-size: clamp(13px, 0.9vw, 16px); line-height: 2.2; letter-spacing: .08em;text-align: justify; }
.product-specs { margin: 42px 0; color: #888; font-size: clamp(12px, .85vw, 16px); line-height: 2.4; letter-spacing: .03em; }
.product-specs div { display: flex; }
.product-specs dd { margin: 0; }
.mainframe .product-shop { display: inline-flex; justify-content: center; align-items: center; gap: 7.5px; background: black; color: white; padding: 11.25px 25px; font-size: clamp(8.75px, .625vw, 11.875px); letter-spacing: .06em; }
.product-shop:hover { background: #333; }
.product-showcase button:focus-visible, .product-shop:focus-visible { outline: 2px solid #888; outline-offset: 4px; }
.photo-dialog { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; padding: 56px 20px 20px; border: 0; background: transparent; color: white; cursor: pointer; }
.photo-dialog::backdrop { background: rgba(0,0,0,.65); }
.mainframe .photo-dialog img { width: 100%; height: 100%; object-fit: contain; }
.photo-dialog-close { position: absolute; top: 8px; right: 20px; width: 44px; height: 44px; font-size: 36px; cursor: pointer; }
body.photo-open { overflow: hidden; }
@media screen and (max-width: 900px) {
  .product-showcase { grid-template-columns: 1fr; }
  .product-info { padding: 40px clamp(32px, 5vw, 48px) 56px; }
  .product-info h2 { font-size: 26px; margin-bottom: 24px; }
  .mainframe .product-description { font-size: 14px; }
  .product-specs { margin: 28px 0; font-size: 13px; }
  .product-thumbnails { bottom: 20px; }
  .mainframe .product-label { margin-bottom: 24px; }
}






/* 第二個商品：桌面左右交換，手機依照 HTML 先顯示輪播。 */
@media screen and (min-width: 901px) {
  .product-showcase--reverse {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product-showcase--reverse .product-gallery {
    grid-column: 2;
    grid-row: 1;
  }
  .product-showcase--reverse .product-info {
    grid-column: 1;
    grid-row: 1;
  }
}


/* 三種機能材質：桌面三等欄，手機單欄。 */
.materials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.material-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 56px clamp(24px, 3vw, 58px) 64px;
  background: #171c20;
  color: #fff;
}
.mainframe .material-background {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.material-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .6);
}
.material-content {
  max-width: 470px;
  margin: 0 auto;
}
.material-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  margin-bottom: 32px;
  padding: 16px;
}
.mainframe .material-logo img {
  width: 100%;
  max-width: 350px;
  height: 100%;
  object-fit: contain;
}
.material-card h2 {
  margin: 0 0 24px;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 500;
  letter-spacing: .05em;
  text-align: center;
}
.mainframe .material-card p {
  color: inherit;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  text-align:justify;
}
.mainframe .material-card p + p {
  margin-top: 20px;
}
@media screen and (max-width: 900px) {
  .materials { grid-template-columns: 1fr; }
  .material-card { padding: 40px 24px 48px; }
}

/* 商品總覽：整體最大 900px，三欄商品各自上圖下文。 */
.product-summary {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: 48px 24px;
  /*background: #f5f4f1;*/
}
.product-summary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 20px;
  min-width: 0;
}
.mainframe .product-summary-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.product-summary-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4px 0;
  text-align:center;
}
.product-summary-info h2 {
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.product-summary-info dl {
  margin: auto 0 16px;
  font-size: 13px;
  line-height: 1.8;
}
.product-summary-info dl div { display: flex; flex-wrap: wrap;justify-content: center }
.product-summary-info dd { margin: 0; }
.mainframe .product-summary-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: #222;
  color: #fff;
  font-size: 11px;
  letter-spacing: .05em;
}
.product-summary-link:hover { background: #444; }
.product-summary-link:focus-visible { outline: 2px solid #222; outline-offset: 4px; }
.product-showcase[id] { scroll-margin-top: 16px; }
@media screen and (max-width: 600px) {
  .product-summary { grid-template-columns: 1fr; gap: 40px; padding: 32px 24px; }
  .product-summary-card { width: 100%; max-width: 360px; margin: 0 auto; gap: 20px; }
  .mainframe .product-summary-link { font-size: 12px; }
}


/* 發售資訊。 */
.release-info {
  padding: 72px 24px 88px;
  text-align: center;
}
.release-info h2 {
  margin: 0 0 40px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .12em;
}
.release-info-group + .release-info-group {
  margin-top: 32px;
}
.release-info h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
}
.mainframe .release-info p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 600px) {
  .release-info { padding: 48px 24px 56px; }
  .release-info h2 { font-size: 22px; margin-bottom: 32px; }
  .mainframe .release-info p { font-size: 14px; }
}

.release-mobile-break { display: none; }
@media screen and (max-width: 600px) {
  .release-mobile-break { display: block; }
}




/* 柔和的進場與操作動態；僅 JS 啟用後才隱藏待進場內容。 */
.scroll-entrance {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.65,.3,1);
  transition-delay: var(--entrance-delay, 0ms);
}
.scroll-entrance.is-visible,
.scroll-entrance:focus-within {
  opacity: 1;
  transform: none;
}
.product-detail { overflow: hidden; }
.product-detail img { transition: transform 650ms ease, filter 650ms ease; }
.product-thumbnails button { transition: opacity 250ms ease, border-color 250ms ease; }
.product-summary-photo { transition: filter 450ms ease; }
.product-shop, .product-summary-link { transition: background-color 250ms ease; }
.product-shop span, .product-summary-link span { transition: transform 250ms ease; }
.photo-dialog[open] { animation: detail-open 250ms ease both; }
.photo-dialog[open]::backdrop { animation: detail-open 250ms ease both; }
@keyframes detail-open {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .product-detail:hover img { transform: scale(1.04); filter: brightness(1.05); }
  .product-thumbnails button:hover { opacity: 1; }
  .product-summary-card:hover .product-summary-photo { filter: brightness(1.04); }
  .product-shop:hover span, .product-summary-link:hover span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-entrance { opacity: 1; transform: none; transition: none; }
  .product-detail img, .product-thumbnails button, .product-summary-photo,
  .product-shop, .product-summary-link, .product-shop span, .product-summary-link span {
    transition: none;
    transform: none;
  }
  .photo-dialog[open], .photo-dialog[open]::backdrop { animation: none; }
}
@media print {
  .scroll-entrance { opacity: 1; transform: none; }
}

/* 白底載入頁淡出後，主視覺才開始淡入。 */
.page-loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .page-loader {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 1;
  transition: opacity 550ms ease;
}
html.is-loading .page-loader.is-leaving { opacity: 0; }
.page-loader-inner { width: min(280px, 65vw); }
.page-loader-inner img { display: block; width: 100%; height: auto; }
.page-loader-track { height: 1px; background: #e5e5e5; margin-top: 36px; overflow: hidden; }
.page-loader-progress { height: 100%; background: #000; transform: scaleX(0); transform-origin: left; transition: transform 450ms ease; }
html.is-loading .section__top { opacity: 0; }
html.is-ready .section__top { animation: hero-fade-in 2s ease both; }
@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-loading .page-loader, .page-loader-progress { transition: none; }
  html.is-ready .section__top { animation: none; }
}
@media print {
  html.is-loading { overflow: visible; }
  html.is-loading .page-loader { display: none; }
  html.is-loading .section__top { opacity: 1; }
  html.is-ready .section__top { animation: none; }
}

/* 固定回頁首按鈕，往下捲動後顯示。 */
.mainframe #backtop {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
}
.mainframe #backtop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.mainframe #backtop img { width: 30px; height: 30px; }
.mainframe #backtop:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
@media screen and (max-width: 600px) {
  .mainframe #backtop {         
		right: 10px;
        bottom:10px;
        width: 35px;
        height: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .mainframe #backtop { transition: none; transform: none; }
}
@media print {
  .mainframe #backtop { display: none; }
}