@charset "UTF-8";

#about,
#products,
#stores,
#faq {
  scroll-margin-top: clamp(5rem, 4.489rem + 2.1vw, 6.375rem);
}

/*! CSS Used from: https://www.capsule-serum.tw/css/index.css?v=260519 */
.allHead {
  color: var(--color-brand);
  font-weight: 400;
}

@media (max-width: 1023px) {
  .allHead {
    margin-bottom: var(--space-3xl);
  }
}
.allBtn {
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
  border-radius: 100px;
  width: 210px;
  padding: 12px 17px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  transition: 0.4s;
  background-color: rgba(255, 255, 255, 0.8);
}

.allBtn:hover {
  background-color: var(--color-brand);
  color: #fff;
  transition: 0.4s;
}

.salesBg {
  background-color: #ffffff;
}

.salesBg .salesBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.salesBg .item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.salesBg .title {
  font-size: 30px;
  text-align: center;
  margin: 0 0 16px 0;
}

.salesBox {
  gap: 2rem;
}

.salesBox .item {
  flex: 1;
  height: 300px;
  justify-content: flex-end;
}

.salesBox .pic {
  display: flex;
  align-items: center;
  width: 75%;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .salesBg {
    padding-bottom: var(--space-2xl);
  }
  .salesBg .salesBox {
    flex-direction: column;
  }
  .salesBg .title {
    font-size: 16px;
  }
  .salesBox .pic img {
    width: 350px;
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .salesBox .item {
    max-width: 65dvw;
    margin-bottom: 2rem;
  }
}
/* ==========================================================================
   Basic SCSS Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

/* 基礎樣式：隱藏光芒，等待觸發 */
[data-glow-gold] {
  /* 1. 讓金色變寬：我把黑色的範圍從 45% 退到 40%，讓金色的漸層過渡區間變大 */
  background: linear-gradient(120deg, #333333 40%, #c5a86a 50%, #333333 60%);
  background-size: 300% auto;
  /* 預設停留在右側黑色的地方 */
  background-position: 100% center;
  color: #333333;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 2. 把動畫獨立成一個 class，只要加上這個 class 就會發光 */
[data-glow-gold].is-glowing {
  /* 3. 速度變慢：原本 1.5 秒，現在調慢到 3.5 秒 (你可以自行微調這個數字) */
  animation: sweep-glow 3.5s linear forwards;
}

/* 我們只需要一個最單純的從右掃到左的動畫 */
@keyframes sweep-glow {
  0% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
/* 1. 讓容器剛好包覆住圖片大小 */
[data-glow-white] {
  position: relative;
  display: inline-block; /* 確保容器寬高與圖片一致 */
}

[data-glow-white] img {
  display: block; /* 消除圖片底部的預設小空隙 */
  width: 100%;
}

/* 2. 這是一層覆蓋在圖片上的白光 */
[data-glow-white]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 設定白光漸層：透明 -> 半透明白 -> 透明 */
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%);
  background-size: 300% 100%;
  background-position: 100% center;
  /* 【關鍵魔法】把圖片當作遮罩，光只會在有像素的地方顯示！ */
  /* ⚠️ 注意：這裡的 URL 必須填寫你那張 PNG 的路徑 */
  -webkit-mask-image: url("../images/top_concept/logo.png");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  /* 避免光芒遮擋到 LOGO 的點擊事件或右鍵 */
  pointer-events: none;
}

/* 3. 搭配 JS 觸發光芒 (沿用原本的動畫設定) */
[data-glow-white].is-glowing::after {
  animation: sweep-glow 1.25s linear forwards;
}

/* 1. 定義斷點變數 (已同步你的命名方式) */
/* 對應 tablet-h */
/* 對應 tablet-v */
/* 對應 mobile */
/* 對應 mobile-sm */
/* 2. 建立 Mixin */
.showinSP {
  display: none;
}

@media (max-width: 1023px) {
  .showinPC {
    display: none;
  }
  .showinSP {
    display: block;
  }
}
sup {
  font-size: var(--fs-text-md);
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.text {
  font-family: var(--font-base);
  color: var(--color-text);
  font-weight: 500;
  text-wrap: pretty;
}

.serif {
  font-family: var(--font-serif);
}

.en {
  font-family: var(--font-en);
}

.goldText {
  color: var(--color-brand);
}

.hero {
  position: relative;
}
.hero .fv picture,
.hero .fv img {
  width: 100%;
}
.hero .fv img {
  margin-top: clamp(0rem, 12.0536rem - 10.0446vw, 5.625rem);
}
@media (max-width: 1023px) {
  .hero .fv {
    height: 75dvh;
  }
  .hero .fv picture {
    height: 100%;
  }
  .hero .fv img {
    margin-top: 0px;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .hero {
    margin-bottom: var(--space-3xl);
  }
}
.hero .brand {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 50%;
}
@media (max-width: 1023px) {
  .hero .brand {
    width: 75%;
  }
}

.concept {
  background-color: #f7f4ed;
}
.concept .wrap {
  display: flex;
  flex-direction: column;
}
.concept .box {
  display: flex;
  flex-direction: row;
  align-items: center;
  -moz-column-gap: var(--space-xl);
       column-gap: var(--space-xl);
  text-align: center;
}
@media (max-width: 1023px) {
  .concept .box {
    margin-bottom: var(--space-3xl);
  }
}
.concept .box.custom_d {
  max-width: 90dvw;
  margin-left: 10dvw;
}
@media (max-width: 1023px) {
  .concept .box.custom_d {
    max-width: calc(100% - 20px);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: var(--space-3xl);
  }
}
.concept .box:nth-of-type(1) .block {
  text-align: left;
}
@media (max-width: 767px) {
  .concept .box:nth-of-type(2) .block:nth-of-type(1) {
    display: none;
  }
}
.concept .box:nth-of-type(2) .block:nth-of-type(1) {
  flex: 2;
}
.concept .box:nth-of-type(2) .block:nth-of-type(2) {
  flex: 1;
  text-align: left;
}
.concept .box:nth-of-type(2) .block:nth-of-type(2) h3 {
  text-wrap: nowrap;
  text-align: center;
}
@media (max-width: 1023px) {
  .concept .box {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}
.concept .box .block {
  flex: 1;
}
.concept .box:first-of-type .block:last-of-type {
  flex: 1.8;
}
.concept .box:nth-of-type(3) {
  text-align: center;
}
.concept .box:nth-of-type(3) h3 {
  text-align: center;
}
@media (max-width: 1023px) {
  .concept .box:nth-of-type(3) div {
    text-align: left;
  }
  .concept .box:nth-of-type(3) h3 {
    text-align: center;
  }
}
.concept .box:nth-of-type(3) h4 {
  text-wrap: balance;
}
@media (max-width: 1023px) {
  .concept .box:nth-of-type(3) .block:nth-of-type(1) {
    order: 2;
  }
}

.custom_a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(2rem, 4vw, 3rem) 0;
  color: white;
  text-wrap: balance;
  font-size: var(--fs-h5);
}
.custom_a div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(11.25rem, 18vw, 14.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  font-size: clamp(1.5rem, 1.291rem + 0.86vw, 2.0625rem);
  text-align: center;
  line-height: 1.5;
  padding: 0px clamp(1.5625rem, 2.2321rem - 0.558vw, 1.875rem);
  box-sizing: border-box;
  mix-blend-mode: multiply;
}
@media (max-width: 1023px) {
  .custom_a div {
    width: clamp(9.75rem, 30vw, 12rem);
    font-size: clamp(1.25rem, 0.971rem + 1.14vw, 1.75rem);
  }
}

@media (max-width: 480px) {
  .custom_a div {
    width: clamp(8.5rem, 41vw, 10.5rem);
    padding-inline: var(--space-xs);
    font-size: clamp(1.125rem, 0.429rem + 2.86vw, 1.375rem);
  }
}

.custom_a div:first-child {
  background-color: rgba(199, 161, 89, 0.9);
}

.custom_a div:last-child {
  background-color: rgba(153, 148, 139, 0.9);
  margin-left: clamp(-2.5rem, -3vw, -1.75rem);
}

.custom_a div span {
  text-wrap: nowrap;
  position: relative;
  max-width: 150px;
  font-family: var(--font-serif);
}
.custom_a div span sup {
  position: absolute;
  top: -0.5em;
  right: 0em;
  font-family: sans-serif;
}
@media (max-width: 1023px) {
  .custom_a div span sup {
    top: -0.5em;
    right: -0.5em;
  }
}

.technology {
  background-color: #fffefc;
}
.technology .box:nth-of-type(1) {
  display: flex;
  flex-direction: row;
}
@media (max-width: 1023px) {
  .technology .box:nth-of-type(1) {
    flex-direction: column;
    align-items: flex-start;
  }
}
.technology .box:nth-of-type(1) h3.block {
  flex: 1;
}
.technology .box:nth-of-type(1) .block {
  flex: 1.5;
}
.technology .box:nth-of-type(3) {
  text-align: center;
}
.technology .box:nth-of-type(3) .explain {
  display: inline-block;
  text-align: left;
}
.technology .box:nth-of-type(3) .explain span {
  display: block;
}

.slider-card {
  margin: 0 10px;
  padding: 20px;
  width: 250px;
  background-color: #fffbf5;
}

.products .box:nth-of-type(1) {
  margin-right: auto;
}
.products .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.products .box {
  display: flex;
  flex-direction: row;
  -moz-column-gap: var(--space-lg);
       column-gap: var(--space-lg);
}
@media (max-width: 767px) {
  .products .box {
    flex-direction: column;
  }
}
.products .box:not(:nth-of-type(1)) {
  width: 95%;
  row-gap: var(--space-md);
}
.products .box .block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1023px) {
  .products .box .block:nth-of-type(1) {
    align-items: flex-start;
  }
}
.products .box .block:nth-of-type(2) {
  position: relative;
}
.products .box .block:nth-of-type(2) .text:not(.custom_b) {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translate(50%, -15%);
  writing-mode: vertical-rl;
  color: rgba(196, 167, 104, 0.14);
  font-size: var(--fs-h1);
  font-family: var(--font-serif);
}
.products .box .block .custom_b {
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(-50%, -15%);
  writing-mode: vertical-rl;
  color: rgba(196, 167, 104, 0.14);
  font-size: var(--fs-h1);
  font-family: var(--font-serif);
}
.products .box .block .brick {
  text-align: left;
}
.products .box .block .brick .text {
  text-wrap: nowrap;
}
.products .box .block .brick .text:nth-of-type(1):not(.custom_c) {
  font-size: var(--fs-text-lg);
  margin-bottom: var(--space-sm);
  font-family: var(--font-serif);
  color: var(--color-brand-muted);
}
.products .box .block .brick .text:nth-child(2) {
  font-size: var(--fs-h3);
}
.products .box .block .brick .text:nth-child(3) {
  font-size: var(--fs-h4);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.products .box .block .brick .text:nth-child(4) {
  font-size: var(--fs-text-md);
}
.products .box .block .brick .text:nth-child(5) {
  font-size: var(--fs-text-md);
  margin-bottom: var(--space-sm);
}
.products .box .block .brick .text:nth-child(6) {
  font-size: var(--fs-text-sm);
}
.products .box .block:nth-of-type(2) {
  flex: 1.25;
}
@media (max-width: 1023px) {
  .products .box .block:nth-of-type(2) {
    order: -1;
  }
}
.products .box:nth-of-type(1) .block {
  text-align: left;
}
.products .box:nth-of-type(3) {
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .products .box:nth-of-type(3) {
    flex-direction: column;
  }
}

.slider .slick-track {
  display: flex !important;
}

.slider .slick-slide {
  height: auto !important;
  display: flex;
}

.slider-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.faq {
  background-image: url(../images/top_concept/faq-2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 1023px) {
  .faq {
    background-image: none;
    background-color: var(--color-brand-surface);
    height: auto;
    margin-bottom: 0;
  }
}
.faq .wrap {
  height: 100%;
}
.faq .box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.faq .block div:nth-of-type(1) {
  font-family: var(--font-serif);
}
.faq .text:last-child {
  color: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: 50%;
  background-color: #ffffff;
  width: 35%;
  min-width: 150px;
  max-width: 150px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  cursor: pointer;
  transition: 0.4s ease;
}
@media (max-width: 1023px) {
  .faq .text:last-child {
    min-width: 125px;
    max-width: 125px;
    font-size: var(--fs-text-sm);
  }
}
.faq .text:last-child:hover {
  color: #ffffff;
  background-color: var(--color-brand);
  border: 1px solid #ffffff;
  scale: 0.95;
}

.slider-card {
  font-family: var(--font-serif);
}
.slider-card sup {
  font-size: var(--fs-2xs);
}
.slider-card div:not(:first-of-type) {
  text-align: center;
}
.slider-card div:nth-of-type(1) {
  color: var(--color-brand-text);
  font-size: var(--fs-h6);
  color: var(--color-brand);
  margin-bottom: var(--space-xs);
  font-family: var(--font-serif);
}
.slider-card div:nth-of-type(2) {
  display: grid;
  min-block-size: 3.4em;
  place-items: center;
  font-size: var(--fs-text-md);
  margin-bottom: var(--space-2xs);
  font-family: var(--font-serif);
  line-height: 1.7;
}
.slider-card div:nth-of-type(3) {
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: var(--fs-text-sm);
  margin-bottom: var(--space-2xs);
  background-color: var(--color-brand-page);
  border-radius: 20px;
  margin-bottom: var(--space-xs);
}

.slider-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.custom_c {
  font-family: var(--font-serif);
  display: inline;
  cursor: pointer;
}
.custom_c::after {
  content: "→";
  margin-left: var(--space-xs);
  color: var(--color-brand);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-brand);
  border-radius: 50%;
  padding: 14px;
}

.custom_e.box {
  -moz-column-gap: 0;
       column-gap: 0;
}
.custom_e .block:first-of-type {
  margin-left: max(50% - 600px, var(--container-gutter));
}
@media (max-width: 1023px) {
  .custom_e .block:first-of-type * {
    padding-right: 0;
  }
}
@media (max-width: 1023px) {
  .custom_e .block:first-of-type {
    margin-left: 0;
  }
  .custom_e .block {
    padding: 0 var(--container-gutter);
  }
}