*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote,
dl, dd, ul, ol {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  padding: 0 0 0 0;
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  background: #fafaf7;
  color: #000;
  font-family: "Noto Sans TC", sans-serif;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0 0 0 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html.lenis,
html.lenis body {
  height: auto;
}

.moreBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
  min-width: min(300px, 100%);
  height: 50px;
  padding: 0 32px 0 32px;
  background: #000;
  color: #fafaf7;
}
.moreBtn span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: max(16px, 0.9615384615cqi);
  line-height: normal;
}
.moreBtn .bracket.mirror {
  transform: scaleX(-1);
}

.moreBtn {
  overflow: hidden;
  transition: background-color 0.5s;
}
.moreBtn span {
  text-shadow: 0 50px currentColor;
  transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.moreBtn .arrow {
  filter: drop-shadow(0 50px 0 #fafaf7);
  transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.08s;
}
.moreBtn:hover, .moreBtn:focus-visible {
  background: #bab59b;
}
.moreBtn:hover span,
.moreBtn:hover .arrow, .moreBtn:focus-visible span,
.moreBtn:focus-visible .arrow {
  translate: 0 -50px;
}

.swipeHint {
  position: absolute;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 26px 20px 26px;
  background: rgba(0, 0, 0, 0.5);
  color: #fafaf7;
  pointer-events: none;
  translate: -50% -50%;
}
.swipeHint.show {
  display: flex;
}
.swipeHint img {
  width: 32px;
  height: auto;
  animation: swipeHand 1.25s ease-out infinite;
}
.swipeHint span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 13px;
  white-space: nowrap;
}

@keyframes swipeHand {
  to {
    opacity: 0;
    translate: -30px 0;
  }
}
.swipeHint {
  transition: opacity 0.6s;
}
.swipeHint.hide {
  opacity: 0;
}

header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fafaf7;
}
header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 20px 24px;
}
@media (max-width: 1280px) {
  header .wrap {
    gap: 16px;
  }
}
@media (max-width: 1280px) {
  header .logo {
    position: relative;
    z-index: 1;
  }
}
header .logo a {
  text-box: trim-both cap alphabetic;
  display: block;
  font-family: "Asset", serif;
  font-size: 24px;
  line-height: normal;
  white-space: nowrap;
}
@media (max-width: 480px) {
  header .logo a {
    font-size: 16px;
  }
}
header .menuBtn {
  display: none;
}
@media (max-width: 1280px) {
  header .menuBtn {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 32px;
    height: 24px;
    padding: 0 0 0 0;
    border: 0;
    background: none;
  }
}
header .menuBtn span {
  display: block;
  height: 1px;
  background: #000;
}
.menuOpen header .menuBtn span:first-child {
  transform: translateY(4.5px) rotate(45deg) scaleX(0.7);
}
.menuOpen header .menuBtn span:last-child {
  transform: translateY(-4.5px) rotate(-45deg) scaleX(0.7);
}
header .navBox {
  display: contents;
}
@media (max-width: 1280px) {
  header .navBox {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    padding: 106px 24px 40px 24px;
    overflow-y: auto;
    background: #fafaf7;
    opacity: 0;
    visibility: hidden;
  }
  .menuOpen header .navBox {
    opacity: 1;
    visibility: visible;
  }
}
header .menuBox .menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  header .menuBox .menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
}
@media (max-width: 1280px) {
  header .menuBox .menuItem {
    display: flex;
    align-items: center;
    height: 72px;
    border-bottom: 1px solid #ccc;
  }
}
header .menuBox .mainLink {
  position: relative;
  display: block;
}
header .menuBox.menuZh .mainLink {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
}
@media (max-width: 768px) {
  header .menuBox.menuZh .mainLink {
    font-size: 16px;
  }
}
@media (max-width: 1280px) {
  header .menuBox.menuEn .menuItem {
    justify-content: flex-end;
  }
}
header .menuBox.menuEn .mainLink {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  header .menuBox.menuEn .mainLink {
    font-size: 24px;
  }
}
header .toolBox {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 1280px) {
  header .toolBox {
    grid-column: 1/-1;
    align-self: end;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-top: 48px;
  }
}
header .searchBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 180px;
  padding-bottom: 5px;
  border-bottom: 1px solid #000;
}
@media (max-width: 1280px) {
  header .searchBox {
    width: 100%;
  }
}
header .searchBox .searchInput {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  header .searchBox .searchInput {
    font-size: 24px;
  }
}
header .searchBox .searchInput {
  flex: 1;
  min-width: 0;
  height: 20px;
  margin-inline-end: 0;
  padding: 0 0 0 0;
  border: 0;
  background: none;
  outline: none;
  line-height: 20px;
}
header .searchBox .searchInput::-moz-placeholder {
  color: #000;
  opacity: 1;
}
header .searchBox .searchInput::placeholder {
  color: #000;
  opacity: 1;
}
header .searchBox .searchInput::-webkit-search-cancel-button {
  display: none;
}
header .searchBox .searchBtn {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0 0 0 0;
  border: 0;
  background: none;
}
header .socialList {
  display: none;
  padding: 0 0 0 0;
  list-style: none;
}
@media (max-width: 1280px) {
  header .socialList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }
}
header .socialList img {
  display: block;
  width: auto;
  height: 26px;
}
header .languageBox {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  white-space: nowrap;
}
header .languageBox .languageIcon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
}
header .languageBox .languageList {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
}
header .languageBox .languageList li {
  display: flex;
}
header .languageBox .languageList li + li::before {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  header .languageBox .languageList li + li::before {
    font-size: 24px;
  }
}
header .languageBox .languageList li + li::before {
  content: "/";
  margin-inline: 0.25em;
}
header .languageBox .languageList a {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  header .languageBox .languageList a {
    font-size: 24px;
  }
}
header .languageBox .languageList a {
  margin-block: -8px;
  padding-block: 8px;
}
header .languageBox .languageList a[lang^=zh] {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
}
@media (max-width: 768px) {
  header .languageBox .languageList a[lang^=zh] {
    font-size: 16px;
  }
}

header .menuBox .mainLink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
@media (max-width: 1280px) {
  header .menuBox .mainLink::after {
    display: none;
  }
}
header .menuBox .mainLink:hover::after, header .menuBox .mainLink:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
header .searchBox {
  transition: border-color 0.6s ease;
}
header .searchBox .searchInput::-moz-placeholder {
  -moz-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
header .searchBox .searchInput::placeholder {
  transition: opacity 0.6s ease;
}
header .searchBox .searchBtn img {
  transition: opacity 0.6s ease;
}
header .searchBox:hover .searchInput::-moz-placeholder {
  opacity: 0.5;
}
header .searchBox:hover .searchInput::placeholder {
  opacity: 0.5;
}
header .searchBox:focus-within {
  border-color: rgba(0, 0, 0, 0.4);
}
header .searchBox .searchInput:focus::-moz-placeholder {
  opacity: 0.25;
}
header .searchBox .searchInput:focus::placeholder {
  opacity: 0.25;
}
header .searchBox .searchBtn:hover img {
  opacity: 0.5;
}
header .socialList a {
  transition: opacity 0.6s ease;
}
header .socialList a:hover {
  opacity: 0.5;
}
header .languageList a:not(.current) {
  position: relative;
}
header .languageList a:not(.current)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
header .languageList a:not(.current):hover::after, header .languageList a:not(.current):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
header .menuBtn span {
  transition: transform 0.4s ease;
}
@media (max-width: 1280px) {
  header .navBox {
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
}

.menuOpen {
  overflow: hidden;
}

.js header:not(.show) {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

footer {
  padding: 70px 0 20px 0;
  background: #f2f0e7;
}
@media (max-width: 768px) {
  footer {
    padding: 56px 0 24px 0;
  }
}
footer .wrap {
  container-type: inline-size;
  padding: 0 24px 0 24px;
}
footer .mainBox {
  display: grid;
  grid-template-columns: minmax(min(370px, 100%), 1fr) minmax(max-content, 23.1837606838cqi) minmax(min-content, max-content);
  gap: 90px 4.2735042735cqi;
}
@media (max-width: 1180px) {
  footer .mainBox {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 64px max(40px, 8cqi);
  }
}
@media (max-width: 768px) {
  footer .mainBox {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 40px 32px;
  }
}
footer .boxTitle {
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: max(28px, 2.297008547cqi);
  font-family: "Aoboshi One", serif;
  font-size: max(20px, 1.2820512821cqi);
  line-height: normal;
}
footer .zh,
footer .en {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
}
footer .zh {
  font-size: 16px;
}
footer .en {
  font-family: "Chathura", sans-serif;
  font-size: 24px;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  footer .mailSubscribeBox {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 595px);
    -moz-column-gap: 48px;
         column-gap: 48px;
    align-items: end;
  }
}
@media (max-width: 768px) {
  footer .mailSubscribeBox {
    display: block;
  }
}
footer .mailSubscribeBox .title {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: max(20px, 1.2820512821cqi);
  font-weight: 500;
  line-height: 38px;
}
footer .mailSubscribeBox .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: 20px;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 768px) {
  footer .mailSubscribeBox .text {
    margin-top: 12px;
    font-size: 15px;
  }
}
footer .mailSubscribe {
  display: flex;
  gap: 15px;
  margin-top: 51px;
}
@media (max-width: 1180px) {
  footer .mailSubscribe {
    grid-column: 2;
    grid-row: 1/3;
    margin-top: 0;
  }
}
@media (max-width: 768px) {
  footer .mailSubscribe {
    margin-top: 20px;
  }
}
footer .mailSubscribe .moreBtn {
  flex-shrink: 0;
  gap: 15px;
  width: 160px;
  min-width: 0;
  height: 65px;
  padding: 0 0 0 0;
  border: 0;
}
@media (max-width: 768px) {
  footer .mailSubscribe .moreBtn {
    width: 120px;
    height: 48px;
  }
}
@media (max-width: 480px) {
  footer .mailSubscribe .moreBtn {
    gap: 10px;
    width: 100px;
  }
}
footer .mailInput {
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
  height: 65px;
  padding: 0 20px 0 20px;
  border: 1px solid #ccc;
  background: none;
  font-family: "Aoboshi One", serif;
  font-size: 22px;
  outline: none;
}
@media (max-width: 768px) {
  footer .mailInput {
    max-width: none;
    height: 48px;
    font-size: 18px;
  }
}
footer .mailInput::-moz-placeholder {
  color: #bab59b;
  opacity: 1;
}
footer .mailInput::placeholder {
  color: #bab59b;
  opacity: 1;
}
@media (max-width: 768px) {
  footer .footerMenu {
    display: none;
  }
}
footer .menuList {
  display: grid;
  grid-template-rows: repeat(3, 38px);
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  -moz-column-gap: max(40px, 4.2735042735cqi);
       column-gap: max(40px, 4.2735042735cqi);
  margin-block: -13px;
  padding: 0 0 0 0;
  list-style: none;
}
footer .menuList a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}
footer .menuList a::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
  --line: 0;
  bottom: 7px;
  background: #000;
}
footer .hoursList {
  display: flex;
  flex-wrap: wrap;
  gap: 24px max(40px, 4.2735042735cqi);
}
@media (max-width: 480px) {
  footer .hoursList {
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
footer .hoursItem {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 150px;
}
@media (max-width: 480px) {
  footer .hoursItem {
    width: auto;
  }
}
footer .hoursItem dt {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
footer .hoursItem dd {
  text-box: trim-both cap alphabetic;
  font-family: "Aoboshi One", serif;
  font-size: 20px;
  line-height: normal;
  white-space: nowrap;
}
@media (max-width: 480px) {
  footer .hoursItem dd {
    font-size: 18px;
  }
}
footer .hoursBox .note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  row-gap: 6px;
  margin-top: 30px;
}
footer .hoursBox .note span {
  white-space: nowrap;
}
@media (max-width: 768px) {
  footer .socialBox {
    display: none;
  }
}
footer .socialList {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 0 0 0 0;
  list-style: none;
}
footer .infoBox {
  grid-column: 2/4;
}
@media (max-width: 1180px) {
  footer .infoBox {
    grid-column: auto;
  }
}
footer .infoList {
  display: flex;
  align-items: flex-end;
  gap: max(32px, 3.6324786325cqi);
  padding: 0 0 0 0;
  list-style: none;
}
@media (max-width: 1180px) {
  footer .infoList {
    flex-wrap: wrap;
    row-gap: 24px;
  }
}
@media (max-width: 768px) {
  footer .infoList {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
footer .infoItem.phone,
footer .infoItem.mail {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Aoboshi One", serif;
  font-size: 14px;
  line-height: 28px;
  white-space: nowrap;
}
footer .infoItem.address {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 219px;
  white-space: nowrap;
}
footer .copyrightBox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 45px -24px 0 -24px;
  padding: 45px 24px 0 24px;
  border-top: 1px solid transparent;
}
@media (max-width: 1180px) {
  footer .copyrightBox {
    flex-wrap: wrap;
    gap: 24px 40px;
  }
}
@media (max-width: 768px) {
  footer .copyrightBox {
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    padding-top: 32px;
  }
}
footer .copyrightBox::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
footer .payList {
  display: flex;
  gap: 20px;
  padding: 0 0 0 0;
  list-style: none;
}
footer .privacyLink {
  display: flex;
  gap: max(40px, 3.2051282051cqi);
  padding: 0 0 0 0;
  list-style: none;
}
footer .privacyLink a {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  display: block;
  font-family: "Chathura", sans-serif;
  font-size: 24px;
  line-height: 38px;
  text-transform: uppercase;
}
footer .copyright {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  footer .copyright {
    flex-basis: 100%;
    justify-content: center;
  }
}
@media (max-width: 768px) {
  footer .copyright {
    flex-wrap: wrap;
    text-align: center;
    white-space: normal;
  }
}
footer .copyright p {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}
footer .copyright .ibestLink {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
}

footer:not(.played) a,
footer:not(.played) input,
footer:not(.played) button {
  pointer-events: none;
}

footer .menuList a::after {
  transition: transform 0.6s ease;
}
footer .menuList a:hover::after,
footer .menuList a:focus-visible::after {
  --line: 1;
}
footer .socialItem a,
footer .privacyLink a,
footer .ibestLink a {
  transition: opacity 0.6s ease;
}
footer .socialItem a:hover, footer .socialItem a:focus-visible,
footer .privacyLink a:hover,
footer .privacyLink a:focus-visible,
footer .ibestLink a:hover,
footer .ibestLink a:focus-visible {
  opacity: 0.5;
}
footer .mailInput {
  transition: border-color 0.6s ease;
}
footer .mailInput:focus {
  border-color: rgba(0, 0, 0, 0.4);
}

.loadingArea {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #fafaf7;
  touch-action: none;
}
.js .loadingArea {
  display: block;
}
.loadingArea .wrap {
  position: relative;
  height: 100%;
  visibility: hidden;
}
.loadingArea img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.loadingArea .frameBox {
  position: absolute;
}
.loadingArea .bracket {
  position: absolute;
  top: 37.5%;
  width: 3.2svh;
  translate: 0 -50%;
}
.loadingArea .bracket.left {
  right: calc(85.2% + 4.5svh);
}
.loadingArea .bracket.right {
  left: calc(85.2% + 4.5svh);
}
.loadingArea .fillBox {
  height: 100%;
}
.loadingArea .photoBox {
  --size: 75%;
  position: relative;
  height: 100%;
  -webkit-mask-image: url(../img/explore-bottle.svg);
          mask-image: url(../img/explore-bottle.svg);
  -webkit-mask-position: center top;
          mask-position: center top;
  -webkit-mask-size: var(--size) var(--size);
          mask-size: var(--size) var(--size);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.loadingArea .photoBox .shot {
  position: absolute;
  inset: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.loadingArea .caption {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .loadingArea .caption {
    font-size: 24px;
  }
}
.loadingArea .caption {
  position: absolute;
  top: calc(73.5% + 3svh);
  left: 50%;
  display: flex;
  gap: 10px;
  font-size: 22px;
  white-space: nowrap;
  translate: -50% 0;
}
@media (max-width: 768px) {
  .loadingArea .caption {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .loadingArea .caption {
    gap: 8px;
    font-size: 14px;
  }
}
.loadingArea .caption .name {
  margin: 0 0 0 14px;
}
.loadingArea .titleItem {
  position: absolute;
}
.loadingArea .titleItem.wear {
  top: 7svh;
  left: 4vw;
}
.loadingArea .titleItem.landscape {
  right: 4vw;
  bottom: 7svh;
}
.loadingArea .titleItem .decoTitle {
  text-box: trim-both cap alphabetic;
  display: inline-block;
  font-family: "Asset", serif;
  font-weight: 400;
  font-size: max(3.6vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(1.62);
  display: block;
  font-style: normal;
}
@media (max-width: 480px) {
  .loadingArea .titleItem .decoTitle {
    font-size: min(28px, 7vw);
  }
}
.loadingArea .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(20vw, 220px);
  translate: -50% -50%;
}

.bannerArea .wrap {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100svh;
  padding: 30px 24px 0 24px;
}
@media (max-width: 768px) {
  .bannerArea .wrap {
    padding-top: 20px;
  }
}
.bannerArea .titleBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.8995726496cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox {
    flex-direction: column;
    gap: 18px;
    height: auto;
    padding: 4px 0 4px 0;
  }
}
.bannerArea .titleBox .titleItem {
  position: relative;
}
.bannerArea .titleBox .titleItem .decoTitle {
  text-box: trim-both cap alphabetic;
  display: inline-block;
  font-family: "Asset", serif;
  font-weight: 400;
  font-size: 3.4775641026cqi;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: scaleY(1.62);
  display: block;
  margin-inline: -0.045em -0.03em;
  font-style: normal;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .titleItem .decoTitle {
    font-size: min(24px, 7.2cqi);
  }
}
.bannerArea .titleBox .titleItem .subtitle {
  text-box: trim-both cap alphabetic;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: normal;
}
@media (max-width: 768px) {
  .bannerArea .titleBox .titleItem .subtitle {
    font-size: 12px;
  }
}
.bannerArea .titleBox .titleItem .subtitle {
  position: absolute;
  top: 50%;
  padding: 7px 20px 7px 20px;
  background: #000;
  color: #fafaf7;
  white-space: nowrap;
  translate: 0 -50%;
}
@media (max-width: 768px) {
  .bannerArea .titleBox .titleItem .subtitle {
    padding: 3px 8px 3px 8px;
  }
}
.bannerArea .titleBox .titleItem .subtitle span {
  display: block;
}
.bannerArea .titleBox .titleItem.wear .subtitle {
  left: 49.2%;
}
.bannerArea .titleBox .titleItem.landscape .subtitle {
  left: 1.95%;
}
.bannerArea .titleBox .title {
  display: flex;
  align-items: center;
  gap: 0.5341880342cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .title {
    gap: 8px;
  }
}
.bannerArea .titleBox .title img {
  max-width: none;
  height: auto;
}
.bannerArea .titleBox .title .bracket.outer {
  width: 1.2596153846cqi;
  margin-inline: -0.0961538462cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .title .bracket.outer {
    width: 18px;
    margin-inline: -1.5px;
  }
}
.bannerArea .titleBox .title .bracket.inner {
  width: 2.3103632479cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .title .bracket.inner {
    width: 32px;
  }
}
.bannerArea .titleBox .title .bracket.mirror {
  transform: scaleX(-1);
}
.bannerArea .titleBox .title .Img {
  padding: 0 0.4807692308cqi 0 0.4540598291cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .title .Img {
    padding: 0 7px 0 6px;
  }
}
.bannerArea .titleBox .title .Img img {
  width: 9.3215811966cqi;
}
@media (max-width: 480px) {
  .bannerArea .titleBox .title .Img img {
    width: 131px;
  }
}

.js:not(.ready) .bannerArea {
  visibility: hidden;
}

.bannerArea .exploreBox {
  flex: 1;
  display: grid;
  grid-template: minmax(0, 1fr)/minmax(0, 1fr);
  min-height: 0;
  margin-top: 28px;
}
@media (max-width: 768px) {
  .bannerArea .exploreBox {
    margin-top: 20px;
  }
}
.bannerArea .exploreBox .imgList {
  grid-area: 1/1;
  display: flex;
  margin: 0;
  padding: 0 0 0 0;
  list-style: none;
}
@media (max-width: 768px) {
  .bannerArea .exploreBox .imgList {
    display: grid;
    grid-template: repeat(2, minmax(0, 1fr))/repeat(2, minmax(0, 1fr));
  }
}
.bannerArea .exploreBox .imgList .imgItem {
  flex: 1;
  overflow: hidden;
}
.bannerArea .exploreBox .imgList .imgItem img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform, filter;
}
.bannerArea .exploreBox .bottleBox {
  grid-area: 1/1;
  place-self: center;
  position: relative;
  width: 329px;
  height: 499px;
}
.bannerArea .exploreBox .bottleBox .bottle {
  position: absolute;
  inset: 0;
}
.bannerArea .exploreBox .bottleBox .Txt {
  position: absolute;
  left: 47px;
  bottom: 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 235px;
}
.bannerArea .exploreBox .bottleBox .logo {
  margin: 0 0 24px;
}
.bannerArea .exploreBox .bottleBox .logo img {
  display: block;
}
.bannerArea .exploreBox .nameBox {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 22px;
}
.bannerArea .exploreBox .nameBox .subtitle {
  text-box: trim-both cap alphabetic;
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
}
.bannerArea .exploreBox .nameBox .title {
  position: relative;
  width: 118px;
  height: 132px;
  margin: 0;
}
.bannerArea .exploreBox .nameBox .title img {
  position: absolute;
  max-width: none;
}
.bannerArea .exploreBox .nameBox .title .bracket.left {
  left: -1px;
  top: 38px;
}
.bannerArea .exploreBox .nameBox .title .bracket.right {
  left: 105px;
  top: 38px;
}
.bannerArea .exploreBox .nameBox .title .Img img {
  left: 36px;
  top: 0;
}
.bannerArea .exploreBox .textBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.bannerArea .exploreBox .textBox p {
  margin: 0;
}
.bannerArea .exploreBox .textBox .lineTitle {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.bannerArea .exploreBox .textBox .lineTitle::before, .bannerArea .exploreBox .textBox .lineTitle::after {
  content: "";
  width: 40px;
  height: 1px;
  background: #000;
  transform: scaleX(var(--lineScale, 1));
}
.bannerArea .exploreBox .textBox .lineTitle::before {
  transform-origin: right;
}
.bannerArea .exploreBox .textBox .lineTitle::after {
  transform-origin: left;
}
.bannerArea .exploreBox .textBox .lineTitle span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 13px;
  line-height: 20px;
}
.bannerArea .exploreBox .textBox .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 20px;
}
.bannerArea .exploreBox .textBox .enText,
.bannerArea .exploreBox .textBox .number {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-size: 18px;
  line-height: 17px;
}
.bannerArea .exploreBox .textBox .enText {
  margin-bottom: 22px;
}
.bannerArea .exploreBox .textBox .number span {
  margin-inline: 1.45em;
}

.js:not(.ready) .notesArea {
  visibility: hidden;
}

.notesArea {
  margin-top: 80px;
}
.notesArea .discoverBox {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 0 24px;
}
.notesArea .discoverBox img {
  width: auto;
  height: max(40px, 5.1282051282cqi);
}
.notesArea .discoverBox .bracket {
  height: max(42px, 5.235042735cqi);
}
.notesArea .discoverBox .bracket.mirror {
  transform: scaleX(-1);
}
.notesArea .discoverBox .titleText {
  display: flex;
  align-items: center;
  gap: 10.7905982906cqi;
  margin-inline: 1.5491452991cqi;
}
@media (max-width: 480px) {
  .notesArea .discoverBox .titleText {
    gap: 10px;
    margin-inline: 6px;
  }
}
.notesArea .discoverBox .decoTitle {
  text-box: trim-both cap alphabetic;
  font-family: "Asset", serif;
  font-weight: 400;
  font-style: normal;
  font-size: max(12px, 1.2286324786cqi);
  line-height: 1.2;
  text-transform: uppercase;
}
.notesArea .chapterBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.notesArea .chapterBox .Img {
  display: flex;
  align-items: center;
  gap: 34px;
}
@media (max-width: 480px) {
  .notesArea .chapterBox .Img {
    gap: 20px;
  }
}
.notesArea .chapterBox .zhang {
  transform: scaleY(-1);
}
.notesArea .chapterBox .photo {
  -o-object-fit: cover;
     object-fit: cover;
}
.notesArea .chapterBox .subtitle {
  text-box: trim-both cap alphabetic;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  text-transform: uppercase;
}
.notesArea .titleBox {
  container-type: inline-size;
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-top: 213px;
  padding: 0 24px 0 24px;
}
@media (max-width: 1180px) {
  .notesArea .titleBox {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .notesArea .titleBox {
    margin-top: 140px;
  }
}
@media (max-width: 480px) {
  .notesArea .titleBox {
    gap: 32px;
    margin-top: 100px;
  }
}
.notesArea .titleBox .decoTitle {
  text-box: trim-both cap alphabetic;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  position: absolute;
  top: -0.52em;
  left: 19px;
  font-family: "Asset", serif;
  font-size: max(26px, 5.9829059829cqi);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.5;
}
.notesArea .titleBox .subtitle {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: max(12px, 2.0299145299cqi);
  font-weight: 500;
  font-size: max(28px, 1.8162393162cqi);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .notesArea .titleBox .subtitle {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  .notesArea .titleBox .subtitle {
    font-size: 18px;
  }
}
.notesArea .titleBox .title {
  position: relative;
  width: 100%;
  max-width: 769px;
  height: 1.72em;
  margin-left: max(80px, 12.0192307692cqi);
  font-family: "Asset", serif;
  font-weight: 400;
  font-size: min(70px, 9.0811965812cqi);
  line-height: normal;
}
@media (max-width: 1180px) {
  .notesArea .titleBox .title {
    margin-left: auto;
  }
}
.notesArea .titleBox .the,
.notesArea .titleBox .word {
  text-box: trim-both cap alphabetic;
  clip-path: inset(-50% -20% -0.15em -20%);
}
.notesArea .titleBox .the span,
.notesArea .titleBox .word span {
  text-box: trim-both cap alphabetic;
  display: block;
}
.notesArea .titleBox .the {
  position: absolute;
  top: 0;
  left: 0;
}
.notesArea .titleBox .notes {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.29em;
}
.notesArea .titleBox .tag {
  display: flex;
  align-items: center;
  gap: 0.43em;
  font-size: 0.4em;
}
.notesArea .titleBox .tag span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
  text-transform: uppercase;
}
.notesArea .titleBox .tag .bracket {
  width: auto;
  height: 1.04em;
}
.notesArea .titleBox .tag .bracket.mirror {
  transform: scaleX(-1);
}
.notesArea .noteList {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 75px;
  padding: 0 0 0 0;
  list-style: none;
}
@media (max-width: 1180px) {
  .notesArea .noteList {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .notesArea .noteList {
    margin-top: 56px;
  }
}
@media (max-width: 1180px) {
  .notesArea .noteList::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
    transform: scaleX(var(--line, 1));
    transform-origin: left;
  }
}
.notesArea .noteLink {
  position: relative;
  display: block;
}
@media (max-width: 1180px) {
  .notesArea .noteLink {
    display: grid;
    grid-template-columns: 130px 1fr;
  }
}
@media (max-width: 1180px) {
  .notesArea .noteLink::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
    transform: scaleX(var(--line, 1));
    transform-origin: left;
  }
}
.notesArea .chapter,
.notesArea .name,
.notesArea .textList li {
  position: relative;
  padding: 0 24px 0 24px;
  border-bottom: 1px solid transparent;
}
.notesArea .chapter {
  text-box: trim-both cap alphabetic;
  padding: 8px 24px 8px 24px;
  border-top: 1px solid transparent;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  .notesArea .chapter {
    display: flex;
    align-items: center;
    padding-right: 0;
    white-space: nowrap;
  }
}
.notesArea .chapter::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
.notesArea .chapter::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
@media (max-width: 1180px) {
  .notesArea .chapter::before, .notesArea .chapter::after {
    display: none;
  }
}
.notesArea .name {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 17px;
  padding-bottom: 17px;
  font-weight: 500;
  font-size: 28px;
  line-height: normal;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  .notesArea .name {
    margin-top: 0;
    padding: 16px 24px 16px 0;
  }
}
@media (max-width: 480px) {
  .notesArea .name {
    font-size: 20px;
  }
}
.notesArea .name span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
}
.notesArea .name span[lang] {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  line-height: 1.2;
}
.notesArea .name::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
@media (max-width: 1180px) {
  .notesArea .name::after {
    display: none;
  }
}
.notesArea .toggle {
  display: none;
  position: relative;
  width: 14px;
  height: 14px;
  margin-left: auto;
}
@media (max-width: 1180px) {
  .notesArea .toggle {
    display: block;
  }
}
.notesArea .toggle::before, .notesArea .toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}
.notesArea .toggle::after {
  transform: rotate(90deg);
  transition: transform 0.4s;
}
.notesArea .open .toggle::after {
  transform: rotate(0);
}
@media (max-width: 1180px) {
  .notesArea .detail {
    grid-column: 1/-1;
    height: 0;
    overflow: hidden;
  }
}
.notesArea .textList {
  padding: 0 0 0 0;
  list-style: none;
}
.notesArea .textList li {
  text-box: trim-both cap alphabetic;
  padding: 10px 24px 10px 24px;
  letter-spacing: 0.05em;
  font-size: 16px;
  line-height: 24px;
}
.notesArea .textList li::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
}
@media (max-width: 1180px) {
  .notesArea .textList li:first-child::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ccc;
    transform: scaleX(var(--line, 1));
    transform-origin: left;
  }
}
.notesArea .noteLink .photo,
.notesArea .noteLink .more {
  display: none;
}
@media (max-width: 1180px) {
  .notesArea .noteLink .photo {
    display: block;
    width: calc(100% - 48px);
    max-width: 320px;
    height: auto;
    aspect-ratio: 4/3;
    margin: 20px auto 24px;
    -o-object-fit: cover;
       object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s;
  }
}
@media (max-width: 1180px) {
  .notesArea .open .photo {
    opacity: 1;
    transition-delay: 0.2s;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1181px) {
  .js .notesArea .noteList.hovering {
    cursor: none;
  }
  .js .notesArea .noteLink .photo,
  .js .notesArea .noteLink .more {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    max-width: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }
  .js .notesArea .noteLink .photo {
    z-index: 8;
    width: 300px;
    box-shadow: 10px 10px 17px rgba(0, 0, 0, 0.1);
  }
  .js .notesArea .noteLink .more {
    z-index: 9;
  }
}
.js:not(.ready) .aboutArea {
  visibility: hidden;
}

.aboutArea {
  margin-top: 269px;
  padding-bottom: 120px;
  overflow-x: clip;
}
@media (max-width: 1180px) {
  .aboutArea {
    margin-top: 160px;
  }
}
@media (max-width: 768px) {
  .aboutArea {
    margin-top: 120px;
    padding-bottom: 80px;
  }
}
.aboutArea .wrap {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px 0 24px;
}
.aboutArea .tag {
  text-box: trim-both cap alphabetic;
  padding: 0.47em 1.33em 0.47em 1.33em;
  border: 1px solid #000;
  background: #fafaf7;
  font-weight: 500;
  font-size: max(12px, 0.8012820513cqi);
  line-height: normal;
  white-space: nowrap;
}
.aboutArea .titleBox {
  position: absolute;
  top: 4.3269230769cqi;
  left: calc(24px + 12.5534188034cqi);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(16px, 1.6025641026cqi);
}
@media (max-width: 1180px) {
  .aboutArea .titleBox {
    position: static;
    align-self: flex-start;
    margin-bottom: 32px;
  }
}
.aboutArea .titleBox .title {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-weight: 500;
  font-size: max(22px, 1.8162393162cqi);
  line-height: 1.2;
}
@media (max-width: 1180px) {
  .aboutArea .titleBox .title {
    font-size: 24px;
  }
}
.aboutArea .sceneBox {
  align-self: stretch;
}
.aboutArea .sceneBox.drag {
  cursor: grab;
}
.aboutArea .sceneBox.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 1180px) {
  .aboutArea .sceneBox {
    margin-inline: -24px;
    padding: 0 24px 0 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
}
@media (max-width: 1180px) {
  .aboutArea .sceneCrop {
    width: 1132px;
    overflow-x: clip;
  }
}
.aboutArea .scene {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1872/577;
}
@media (max-width: 1180px) {
  .aboutArea .scene {
    width: 111.3622843546%;
    margin-left: -3.8072575848%;
  }
}
.aboutArea .scene .tag {
  position: absolute;
  top: 0;
  left: 56.3568376068cqi;
}
.aboutArea .colorLight {
  position: absolute;
  top: -9.2414529915cqi;
  left: 0;
  width: 100%;
  height: calc(40.0641025641cqi + 280px);
  background: url(../img/about-color.jpg) center 37%/cover;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 11.1111111111cqi at var(--x, 78%) var(--y, 59%), #000 40%, transparent), linear-gradient(#000 calc(100% - 200px), transparent);
          mask-image: radial-gradient(circle 11.1111111111cqi at var(--x, 78%) var(--y, 59%), #000 40%, transparent), linear-gradient(#000 calc(100% - 200px), transparent);
  -webkit-mask-composite: source-in, xor;
          mask-composite: intersect;
}
@media (min-width: 1181px) {
  .aboutArea .colorLight {
    left: calc(50% - 50vw);
    width: 100vw;
  }
}
.aboutArea .deco {
  position: absolute;
  height: auto;
}
.aboutArea .deco.shadowRight {
  top: 8.2264957265cqi;
  left: 46.2606837607cqi;
  width: 24.0918803419cqi;
}
.aboutArea .deco.drop {
  top: 19.1773504274cqi;
  left: 46.5811965812cqi;
  width: 3.952991453cqi;
}
.aboutArea .deco.drops {
  top: 14.6367521368cqi;
  left: 67.8952991453cqi;
  width: 11.9123931624cqi;
}
.aboutArea .deco.honey {
  top: 13.0876068376cqi;
  left: 39.9572649573cqi;
  width: 9.188034188cqi;
}
.aboutArea .deco.shadowLeft {
  top: 6.6239316239cqi;
  left: 14.4764957265cqi;
  width: 25.0534188034cqi;
}
.aboutArea .deco.creamSwirl {
  top: 3.0448717949cqi;
  left: 24.5726495726cqi;
  width: 9.6153846154cqi;
}
.aboutArea .deco.agarwood {
  top: 13.9957264957cqi;
  left: 74.6260683761cqi;
  width: 14.2094017094cqi;
}
.aboutArea .deco.flower {
  top: 4.3269230769cqi;
  left: 57.8525641026cqi;
  width: 9.0811965812cqi;
}
.aboutArea .deco.line1 {
  top: 3.6858974359cqi;
  left: 32.3717948718cqi;
  width: 16.2927350427cqi;
}
.aboutArea .deco.line2 {
  top: 20.7799145299cqi;
  left: 20.2457264957cqi;
  width: 7.264957265cqi;
}
.aboutArea .deco.line3 {
  top: 9.2948717949cqi;
  left: 43.0021367521cqi;
  width: 26.8696581197cqi;
}
.aboutArea .deco.line4 {
  top: 17.7884615385cqi;
  left: 82.905982906cqi;
  width: 3.7927350427cqi;
}
.aboutArea .deco.pine {
  top: 17.4679487179cqi;
  left: 3.7927350427cqi;
  width: 6.0363247863cqi;
}
.aboutArea .deco.cream {
  top: -0.5341880342cqi;
  left: 17.2008547009cqi;
  width: 8.2799145299cqi;
}
.aboutArea .deco.goldLarge {
  top: 22.5961538462cqi;
  left: 19.764957265cqi;
  width: 4.3269230769cqi;
}
.aboutArea .deco.goldSmall {
  top: 16.1858974359cqi;
  left: 50cqi;
  width: 2.7243589744cqi;
}
.aboutArea .deco.sticks {
  top: 1.6025641026cqi;
  left: 26.2286324786cqi;
  width: 5.1816239316cqi;
}
.aboutArea .deco.cypress {
  top: 5.8226495726cqi;
  left: 86.1645299145cqi;
  width: 6.6239316239cqi;
}
.aboutArea .deco.orange {
  top: 14.3696581197cqi;
  left: 11.9658119658cqi;
  width: 9.6688034188cqi;
}
.aboutArea .decoTitle {
  text-box: trim-both cap alphabetic;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  position: absolute;
  top: 12.9807692308cqi;
  left: 12.5534188034cqi;
  font-family: "Asset", serif;
  font-size: 6.25cqi;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.5;
}
.aboutArea .labelItem {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.57em;
  translate: -50% 0;
  font-size: max(14px, 1.4957264957cqi);
}
.aboutArea .labelItem.notes {
  top: 18.6431623932cqi;
  left: 33.2264957265cqi;
}
.aboutArea .labelItem.scent {
  top: 6.3034188034cqi;
  left: 49.8397435897cqi;
}
.aboutArea .labelItem.origin {
  top: 18.6431623932cqi;
  left: 65.8653846154cqi;
}
.aboutArea .labelItem.landscape {
  top: 6.3034188034cqi;
  left: 76.3888888889cqi;
}
.aboutArea .enTitle {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.aboutArea .zhTitle {
  display: flex;
  align-items: center;
  gap: 0.79em;
  font-size: inherit;
}
.aboutArea .zhTitle img {
  width: auto;
  height: 1.71em;
}
.aboutArea .zhTitle .bracket {
  height: 1.38em;
}
.aboutArea .zhTitle .bracket.mirror {
  transform: scaleX(-1);
}
.aboutArea .colorDot {
  position: absolute;
  width: max(8px, 0.7478632479cqi);
  aspect-ratio: 1;
  border-radius: 50%;
}
.aboutArea .colorDot.notes {
  top: 15.5982905983cqi;
  left: 33.2264957265cqi;
  background: #176d83;
}
.aboutArea .colorDot.scent {
  top: 12.5534188034cqi;
  left: 49.4658119658cqi;
  background: #35463b;
}
.aboutArea .colorDot.origin {
  top: 15.811965812cqi;
  left: 66.0256410256cqi;
  background: #77644c;
}
.aboutArea .colorDot.landscape {
  top: 12.5534188034cqi;
  left: 76.014957265cqi;
  background: #d2cebc;
}
.aboutArea .pointList {
  padding: 0 0 0 0;
  list-style: none;
}
.aboutArea .pointItem {
  position: absolute;
  width: max(24px, 1.7094017094cqi);
}
.aboutArea .pointItem.cypress {
  top: 8.547008547cqi;
  left: 86.1645299145cqi;
}
.aboutArea .pointItem.honey {
  top: 17.5747863248cqi;
  left: 43.3760683761cqi;
}
.aboutArea .pointItem.cream {
  top: 6.0363247863cqi;
  left: 28.6324786325cqi;
}
.aboutArea .pointItem.orange {
  top: 18.3760683761cqi;
  left: 18.0021367521cqi;
}
.aboutArea .pointItem.agarwood {
  top: 19.8717948718cqi;
  left: 80.0747863248cqi;
}
.aboutArea .pointItem.open {
  z-index: 3;
}
.aboutArea .pointItem.toLeft .infoCard {
  right: -20px;
  left: auto;
}
.aboutArea .pointItem.toTop .infoCard {
  top: auto;
  bottom: -20px;
}
.aboutArea .pointBtn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 0 0 0;
  border: 0;
  background: none;
}
.aboutArea .pointBtn img {
  width: 100%;
  height: auto;
}
.aboutArea .pointBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #bab59b;
  border-radius: 50%;
  opacity: calc((1 - var(--pulse, 1)) * 0.8);
  transform: scale(calc(1 + var(--pulse, 1) * 0.8));
}
.aboutArea .infoCard {
  position: absolute;
  top: -20px;
  left: -20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max(200px, 12.9273504274cqi);
  padding: max(32px, 2.8846153846cqi) max(20px, 1.4957264957cqi) max(32px, 2.8846153846cqi) max(20px, 1.4957264957cqi);
  border-radius: max(14px, 1.0683760684cqi);
  background: #000;
  color: #fafaf7;
  text-align: center;
}
.aboutArea .infoCard .name {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-weight: 500;
  font-size: max(20px, 1.2820512821cqi);
  line-height: normal;
}
.aboutArea .infoCard .enName {
  text-box: trim-both cap alphabetic;
  margin-top: max(10px, 0.641025641cqi);
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: max(16px, 1.0683760684cqi);
  line-height: 1.2;
  text-transform: uppercase;
}
.aboutArea .infoCard .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: max(28px, 3.2051282051cqi);
  font-size: max(14px, 0.8547008547cqi);
  line-height: 1.5;
}
.aboutArea .infoCard .enText {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: max(12px, 0.8012820513cqi);
  font-family: "Chathura", sans-serif;
  font-size: max(18px, 1.1217948718cqi);
  line-height: 0.81;
}
@media (max-width: 1180px) {
  .aboutArea .moreBtn {
    margin-top: 24px;
  }
}

.aboutArea:not(.played) .pointList,
.aboutArea:not(.played) .moreBtn {
  pointer-events: none;
}
.aboutArea .colorLight {
  transition: opacity 0.8s;
}
.aboutArea .colorLight.show {
  opacity: 0.3;
}
.aboutArea .infoCard {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.4s, transform 0.4s, visibility 0.4s;
}
.aboutArea .open .infoCard {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.landscapeArea {
  margin-top: 128px;
  padding: 142px 0 109px 0;
  background: #f2f0e7;
}
@media (max-width: 1180px) {
  .landscapeArea {
    margin-top: 96px;
    padding: 106px 0 82px 0;
  }
}
@media (max-width: 768px) {
  .landscapeArea {
    margin-top: 64px;
    padding: 72px 0 56px 0;
  }
}
@media (max-width: 480px) {
  .landscapeArea {
    margin-top: 48px;
    padding: 56px 0 44px 0;
  }
}
.landscapeArea .wrap {
  container-type: inline-size;
  position: relative;
  padding: 0 24px 0 24px;
}
.landscapeArea .headBox,
.landscapeArea .conceptBox {
  display: grid;
  grid-template-columns: 456fr 600fr 768fr;
  gap: 24px;
}
.landscapeArea .headBox {
  align-items: end;
  padding-bottom: max(56px, 3.8461538462cqi);
  border-bottom: 1px solid #ccc;
}
@media (max-width: 1180px) {
  .landscapeArea .headBox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .landscapeArea .headBox {
    gap: 32px;
    padding-bottom: 40px;
  }
}
.landscapeArea .titleBox {
  grid-column: 1/3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(20px, 1.7094017094cqi);
}
@media (max-width: 480px) {
  .landscapeArea .titleBox {
    gap: 16px;
  }
}
.landscapeArea .titleBox .title {
  text-box: trim-both cap alphabetic;
  font-family: "Asset", serif;
  font-weight: 400;
  font-size: max(32px, 2.6709401709cqi);
  line-height: 1.26;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .landscapeArea .titleBox .title {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .titleBox .title {
    font-size: 17px;
  }
}
.landscapeArea .titleBox .subtitle {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-weight: 500;
  font-size: max(20px, 1.8162393162cqi);
  line-height: normal;
}
@media (max-width: 480px) {
  .landscapeArea .titleBox .subtitle {
    font-size: 16px;
  }
}
.landscapeArea .seriesBox {
  display: flex;
  align-items: flex-start;
  gap: 0.93em;
  font-size: max(18px, 1.4957264957cqi);
}
@media (max-width: 1180px) {
  .landscapeArea .seriesBox {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .landscapeArea .seriesBox {
    flex-wrap: wrap;
    font-size: 15px;
  }
}
.landscapeArea .tag {
  display: flex;
  align-items: center;
  gap: 0.43em;
  padding: 0.43em 0 0.43em 0;
}
@media (max-width: 480px) {
  .landscapeArea .tag {
    flex-basis: 100%;
  }
}
.landscapeArea .tag span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.landscapeArea .tag .bracket {
  width: auto;
  height: 1.04em;
}
.landscapeArea .tag .bracket.mirror {
  transform: scaleX(-1);
}
.landscapeArea .craft {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.54em;
}
.landscapeArea .craft img {
  width: auto;
  height: 2.06em;
}
.landscapeArea .craft img:first-child {
  grid-column: 1/-1;
}
.landscapeArea .craft .and {
  text-box: trim-both cap alphabetic;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  font-family: "Asset", serif;
  font-size: 1.79em;
  line-height: normal;
  opacity: 0.5;
}
.landscapeArea .seriesList {
  width: 5.07em;
  margin-left: 0.86em;
  padding: 0 0 0 0;
  border-bottom: 1px solid #ccc;
  list-style: none;
}
.landscapeArea .seriesList li {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  padding: 0.36em 0.36em 0.36em 0.36em;
  border-top: 1px solid #ccc;
  font-family: "Chathura", sans-serif;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.landscapeArea .conceptBox {
  padding-top: max(48px, 3.3653846154cqi);
}
@media (max-width: 1180px) {
  .landscapeArea .conceptBox {
    grid-template-columns: 1fr 2fr;
  }
}
@media (max-width: 768px) {
  .landscapeArea .conceptBox {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 40px;
  }
}
.landscapeArea .conceptBox .label {
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  grid-column: 2;
  font-weight: 500;
  font-size: max(16px, 1.0683760684cqi);
  line-height: 1.2;
}
@media (max-width: 1180px) {
  .landscapeArea .conceptBox .label {
    grid-column: 1;
  }
}
@media (max-width: 480px) {
  .landscapeArea .conceptBox .label {
    font-size: 15px;
  }
}
.landscapeArea .conceptBox .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 480px) {
  .landscapeArea .conceptBox .text {
    font-size: 14px;
    line-height: 22px;
  }
}
.landscapeArea .productBox {
  display: grid;
  grid-template-columns: 768fr 1104fr;
  align-items: center;
  gap: 24px;
  margin-top: max(120px, 8.547008547cqi);
  margin-right: -24px;
}
@media (max-width: 1180px) {
  .landscapeArea .productBox {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .landscapeArea .productBox {
    margin-top: 80px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .productBox {
    gap: 32px;
    margin-top: 64px;
  }
}
.landscapeArea .infoBox {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1180px) {
  .landscapeArea .infoBox {
    display: contents;
  }
}
.landscapeArea .tabList {
  display: flex;
  gap: max(20px, 1.6025641026cqi);
}
.landscapeArea .tabBtn {
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  position: relative;
  padding: 0 0 5px 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-weight: 500;
  font-size: max(17px, 1.0683760684cqi);
  line-height: 1.2;
}
@media (max-width: 768px) {
  .landscapeArea .tabBtn {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .tabBtn {
    font-size: 15px;
  }
}
.landscapeArea .tabBtn[aria-selected=true] {
  border-color: rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.5);
}
.landscapeArea .infoPanel .title {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-block: max(48px, 3.5256410256cqi) max(48px, 3.8461538462cqi);
  font-weight: 500;
  font-size: max(32px, 2.6709401709cqi);
  line-height: 1.2;
}
@media (max-width: 1180px) {
  .landscapeArea .infoPanel .title {
    margin-block: 0 40px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .infoPanel .title {
    margin-bottom: 32px;
    font-size: 22px;
  }
}
.landscapeArea .infoPanel .title span {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  text-transform: uppercase;
}
.landscapeArea .noteList {
  border-top: 1px solid #ccc;
}
.landscapeArea .noteItem,
.landscapeArea .ctrlBox {
  display: grid;
  grid-template-columns: 456fr 288fr;
  gap: 24px;
}
@media (max-width: 1180px) {
  .landscapeArea .noteItem,
  .landscapeArea .ctrlBox {
    grid-template-columns: 1fr 2fr;
  }
}
.landscapeArea .noteItem {
  padding: 24px 0 24px 0;
  border-bottom: 1px solid #ccc;
}
.landscapeArea .noteItem dt {
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Aoboshi One", serif;
  font-size: max(16px, 0.9615384615cqi);
  line-height: 1.2;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .landscapeArea .noteItem dt {
    font-size: 14px;
  }
}
.landscapeArea .noteItem dd {
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 480px) {
  .landscapeArea .noteItem dd {
    font-size: 14px;
  }
}
.landscapeArea .noteItem dd span {
  font-family: "Chathura", sans-serif;
  font-size: max(22px, 1.4957264957cqi);
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .landscapeArea .noteItem dd span {
    font-size: 20px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .noteItem dd span {
    font-size: 18px;
  }
}
.landscapeArea .ctrlBox {
  align-items: center;
  margin-top: max(80px, 6.5705128205cqi);
}
@media (max-width: 1180px) {
  .landscapeArea .ctrlBox {
    display: flex;
    justify-content: space-between;
    order: 2;
    margin-top: 0;
  }
}
.landscapeArea .arrowBox {
  display: flex;
}
.landscapeArea .arrowBtn {
  padding: 0 0 0 0;
  border: 0;
  background: none;
}
.landscapeArea .arrowBtn svg {
  width: max(44px, 3.2051282051cqi);
  height: auto;
}
@media (max-width: 480px) {
  .landscapeArea .arrowBtn svg {
    width: 40px;
  }
}
.landscapeArea .arrowBtn.prev svg {
  transform: scaleX(-1);
}
.landscapeArea .arrowBtn:disabled {
  opacity: 0.3;
  cursor: default;
}
.landscapeArea .chapter {
  text-box: trim-both cap alphabetic;
  font-family: "Chathura", sans-serif;
  font-weight: 700;
  font-size: max(22px, 1.4423076923cqi);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: pre;
}
@media (max-width: 480px) {
  .landscapeArea .chapter {
    font-size: 18px;
  }
}
.landscapeArea .galleryBox {
  overflow: hidden;
}
.landscapeArea .galleryList {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 0 0 0 0;
  list-style: none;
}
.landscapeArea .galleryItem {
  flex: none;
  width: calc((100% - 20px) / 2);
}
@media (max-width: 1180px) {
  .landscapeArea .galleryItem {
    width: calc((100% - 40px) / 3);
  }
}
@media (max-width: 768px) {
  .landscapeArea .galleryItem {
    width: calc((100% - 20px) / 2);
  }
}
@media (max-width: 480px) {
  .landscapeArea .galleryItem {
    width: 100%;
  }
}
.landscapeArea .galleryItem .Img {
  overflow: hidden;
}
.landscapeArea .galleryItem img {
  width: 100%;
  height: auto;
  aspect-ratio: 560/638;
  -o-object-fit: cover;
     object-fit: cover;
}
.landscapeArea .galleryItem .name {
  text-box: trim-both cap alphabetic;
  margin-top: max(16px, 1.1752136752cqi);
  padding-bottom: 4px;
  font-weight: 500;
  font-size: max(18px, 1.2820512821cqi);
  line-height: 1.2;
}
@media (max-width: 480px) {
  .landscapeArea .galleryItem .name {
    font-size: 16px;
  }
}
.landscapeArea .galleryItem .name span {
  font-family: "Aoboshi One", serif;
  font-weight: 400;
  font-size: max(16px, 1.0683760684cqi);
}
@media (max-width: 480px) {
  .landscapeArea .galleryItem .name span {
    font-size: 14px;
  }
}
.landscapeArea .videoBox {
  margin-top: max(160px, 12.5534188034cqi);
}
.landscapeArea .videoBox.drag {
  cursor: grab;
}
.landscapeArea .videoBox.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 1180px) {
  .landscapeArea .videoBox {
    margin-inline: -24px;
    padding: 0 24px 0 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
}
@media (max-width: 768px) {
  .landscapeArea .videoBox {
    margin-top: 100px;
  }
}
@media (max-width: 480px) {
  .landscapeArea .videoBox {
    margin-top: 80px;
  }
}
.landscapeArea .videoList {
  position: relative;
  display: grid;
  grid-template-columns: 260fr 308fr 260fr 24fr 260fr 500fr 260fr;
  padding: 0 0 0 0;
  list-style: none;
}
@media (max-width: 1180px) {
  .landscapeArea .videoList {
    grid-template-columns: 144px 120px 144px 12px 144px 200px 144px;
    justify-content: space-between;
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
  }
}
.landscapeArea .videoList::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ccc;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
  top: calc(13.8888888889cqi + 30px);
}
@media (max-width: 1180px) {
  .landscapeArea .videoList::after {
    top: 174px;
  }
}
.landscapeArea .videoItem:nth-child(2) {
  grid-column: 3;
}
.landscapeArea .videoItem:nth-child(3) {
  grid-column: 5;
}
.landscapeArea .videoItem:nth-child(4) {
  grid-column: 7;
}
.landscapeArea .videoItem .Img {
  position: relative;
  aspect-ratio: 1;
  background: #ccc;
}
.landscapeArea .videoItem .Img video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.landscapeArea .videoItem .Img video.front {
  z-index: 1;
}
.landscapeArea .videoItem .name {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: max(48px, 3.2585470085cqi);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
}
.landscapeArea .videoItem .name span[lang=en] {
  font-family: "Chathura", sans-serif;
  font-size: max(22px, 1.4957264957cqi);
  text-transform: uppercase;
}

.landscapeArea .tabBtn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.landscapeArea .tabBtn:not([aria-selected=true]):hover::after, .landscapeArea .tabBtn:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.landscapeArea .arrowBtn .fill {
  fill: #000;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease;
}
.landscapeArea .arrowBtn path:last-child {
  transition: fill 0.4s ease;
}
.landscapeArea .arrowBtn:not(:disabled):hover .fill, .landscapeArea .arrowBtn:focus-visible .fill {
  clip-path: inset(0);
}
.landscapeArea .arrowBtn:not(:disabled):hover path:last-child, .landscapeArea .arrowBtn:focus-visible path:last-child {
  fill: #fafaf7;
}

.js:not(.ready) .seeArea {
  visibility: hidden;
}

.seeArea {
  padding: 160px 0 100px 0;
  overflow-x: clip;
}
@media (max-width: 1180px) {
  .seeArea {
    padding: 120px 0 80px 0;
  }
}
@media (max-width: 768px) {
  .seeArea {
    padding: 88px 0 64px 0;
  }
}
@media (max-width: 480px) {
  .seeArea {
    padding: 64px 0 48px 0;
  }
}
.seeArea .wrap {
  container-type: inline-size;
  padding: 0 24px 0 24px;
}
.seeArea .sceneBox {
  position: relative;
  display: grid;
  width: min(100%, 5 * max(150px, 16.5064102564cqi) + 4 * max(12px, 1.0683760684cqi));
  margin-inline: auto;
}
.seeArea .headBox {
  grid-area: 1/1;
  z-index: 1;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 1.2286324786cqi;
  margin-top: 1.8696581197cqi;
}
@media (max-width: 1180px) {
  .seeArea .headBox {
    grid-area: auto;
    gap: 16px;
    margin: 0 0 16px;
  }
}
@media (max-width: 480px) {
  .seeArea .headBox {
    gap: 12px;
  }
}
.seeArea .tag {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0 0.6em 0;
  font-size: max(14px, 1.0683760684cqi);
}
@media (max-width: 480px) {
  .seeArea .tag {
    font-size: 12px;
  }
}
.seeArea .tag span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.seeArea .tag .bracket {
  width: auto;
  height: 1.35em;
}
.seeArea .tag .bracket.mirror {
  transform: scaleX(-1);
}
.seeArea .headBox .title {
  text-box: trim-both cap alphabetic;
  font-family: "Asset", serif;
  font-size: max(16px, 1.2286324786cqi);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .seeArea .headBox .title {
    font-size: 14px;
  }
}
.seeArea .cardList {
  grid-area: 1/1;
  display: flex;
  gap: max(12px, 1.0683760684cqi);
  padding: 0 0 0 0;
  list-style: none;
}
.seeArea .cardList.drag {
  cursor: grab;
}
.seeArea .cardList.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 1180px) {
  .seeArea .cardList {
    grid-area: auto;
    margin-inline: -24px;
    padding: 0 24px 0 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
}
.seeArea .cardItem {
  position: relative;
  flex: none;
  width: max(150px, 16.5064102564cqi);
}
.seeArea .cardItem img {
  height: auto;
}
.seeArea .cardItem .shape {
  width: 100%;
}
.seeArea .cardItem .photo {
  position: absolute;
  left: 8.09%;
  top: 37.79%;
  width: 84.14%;
  opacity: 0.8;
  will-change: transform;
}
.seeArea .cardItem .sketch {
  height: auto;
}
.seeArea .cardItem .brace {
  position: absolute;
  left: 7.44%;
  top: 48.85%;
  width: 4.53%;
}
.seeArea .cardItem .brace.mirror {
  left: 88.35%;
  transform: scaleX(-1);
}
.seeArea .bottle .Img {
  position: absolute;
  left: 15.21%;
  top: 30.48%;
  width: 69.9%;
  height: 64.09%;
  overflow: hidden;
}
.seeArea .bottle .photo {
  left: 0;
  top: -3.34%;
  width: 100%;
  height: 105.78%;
  opacity: 0.6;
}
.seeArea .bottle .logo {
  position: absolute;
  left: 13.92%;
  top: 68.89%;
  width: 71.99%;
}
.seeArea .titleBox {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  margin: 48px 2px 0 0;
}
@media (max-width: 768px) {
  .seeArea .titleBox {
    justify-self: center;
    margin: 72px 0 0;
  }
}
.seeArea .titleBox .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}
.seeArea .titleBox .text br {
  display: none;
}
@media (max-width: 480px) {
  .seeArea .titleBox .text br {
    display: inline;
  }
}
.seeArea .titleBox .title {
  display: flex;
  align-items: center;
  gap: 0.222em;
  font-size: max(48px, 3.8461538462cqi);
}
@media (max-width: 480px) {
  .seeArea .titleBox .title {
    font-size: 36px;
  }
}
.seeArea .titleBox .title img {
  width: auto;
  height: 0.833em;
}
.seeArea .titleBox .title .outline {
  height: 0.847em;
  margin: -0.017em -0.014em -0.014em -0.024em;
}
.seeArea .titleBox .title .bracket {
  height: 1em;
  margin-left: 0.167em;
}
.seeArea .titleBox .title .bracket.mirror {
  margin: 0 0.167em 0 0;
  transform: scaleX(-1);
}

.js:not(.ready) .originArea {
  visibility: hidden;
}

.originArea {
  overflow-x: clip;
}
.originArea .wrap {
  container-type: inline-size;
  padding: 0 24px 0 24px;
}
.originArea .sceneBox {
  position: relative;
  height: 193.9636752137cqi;
}
@media (max-width: 1180px) {
  .originArea .sceneBox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    row-gap: 140px;
    height: auto;
    padding: 120px 0 200px 0;
  }
}
@media (max-width: 768px) {
  .originArea .sceneBox {
    row-gap: 96px;
    padding: 100px 0 110px 0;
  }
}
@media (max-width: 480px) {
  .originArea .sceneBox {
    row-gap: 90px;
    padding: 100px 0 90px 0;
  }
}
.originArea .bottleTrack {
  position: absolute;
  left: 50%;
  top: 13.3547008547cqi;
  z-index: 2;
  height: 161.3782051282cqi;
  pointer-events: none;
}
.originArea .bottleBox {
  position: sticky;
  top: 50vh;
  height: 0;
}
.originArea .bottle {
  position: absolute;
  perspective: 3400px;
}
.originArea .model {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
}
.originArea .face {
  position: absolute;
  backface-visibility: hidden;
  background-size: 100% 100%;
  transition: background-image 0.6s, background-color 0.6s;
}
@media (hover: none) {
  .originArea .face {
    transition: background-color 0.6s;
  }
}
.originArea .face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0d0804;
  opacity: var(--sh, 0);
  -webkit-mask: var(--mask) center/100% 100% no-repeat;
          mask: var(--mask) center/100% 100% no-repeat;
}
.originArea .wordList {
  position: absolute;
  left: 0;
  top: 11.485042735cqi;
  display: flex;
  flex-direction: column;
  gap: 0.69em;
  font-size: 2.2435897436cqi;
}
@media (max-width: 1180px) {
  .originArea .wordList {
    position: static;
    grid-area: 1/1/2/3;
    gap: 0.5em;
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .originArea .wordList {
    font-size: 13px;
  }
}
.originArea .wordList .wordRow {
  display: flex;
  align-items: center;
  gap: 1.19em;
}
@media (max-width: 1180px) {
  .originArea .wordList .wordRow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em 1em;
  }
}
.originArea .wordList .wordRow:first-child {
  padding-left: 2.38em;
}
@media (max-width: 1180px) {
  .originArea .wordList .wordRow:first-child {
    padding-left: 0;
  }
}
.originArea .wordList .wordItem {
  display: flex;
  align-items: center;
  gap: 0.357em;
  white-space: nowrap;
}
.originArea .wordList [lang=en] {
  font-family: "Asset", serif;
  line-height: normal;
  text-transform: uppercase;
}
.originArea .wordList .hash {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
}
.originArea .wordList img {
  width: auto;
  height: 1.071em;
}
.originArea .caption {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  position: absolute;
  left: 50%;
  top: 31.0897435897cqi;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 22px;
  line-height: 20px;
  white-space: nowrap;
  translate: -50% 0;
}
@media (max-width: 1180px) {
  .originArea .caption {
    position: static;
    grid-area: 2/1/3/3;
    justify-self: center;
    margin-top: -32px;
    translate: none;
  }
}
@media (max-width: 768px) {
  .originArea .caption {
    font-size: 16px;
  }
}
.originArea .caption::before, .originArea .caption::after {
  content: "";
  width: 40px;
  height: 1px;
  background: #000;
  scale: var(--line, 1) 1;
  transform-origin: right;
}
.originArea .caption::after {
  transform-origin: left;
}
.originArea .textBox {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  white-space: nowrap;
}
@media (max-width: 1180px) {
  .originArea .textBox {
    position: static;
    padding-left: 32px;
    white-space: normal;
  }
}
@media (max-width: 768px) {
  .originArea .textBox {
    gap: 14px;
    padding-left: 12px;
  }
}
.originArea .textBox .title {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-bottom: max(8px, 0.8012820513cqi);
  font-family: "Aoboshi One", serif;
  font-weight: 700;
  font-size: max(24px, 1.4957264957cqi);
  line-height: max(32px, 2.1367521368cqi);
  color: var(--accent, #000);
  text-transform: uppercase;
  transition: color 0.6s;
}
@media (max-width: 768px) {
  .originArea .textBox .title {
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 22px;
  }
}
.originArea .textBox .subtitle {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-weight: 500;
  font-size: max(20px, 1.2820512821cqi);
  line-height: max(30px, 2.0299145299cqi);
}
@media (max-width: 768px) {
  .originArea .textBox .subtitle {
    font-size: 15px;
    line-height: 22px;
  }
}
.originArea .textBox .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 768px) {
  .originArea .textBox .text {
    font-size: 12px;
    line-height: 18px;
  }
}
.originArea .textBox .enText {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-family: "Chathura", sans-serif;
  font-size: max(20px, 1.2820512821cqi);
  line-height: 17px;
}
@media (max-width: 768px) {
  .originArea .textBox .enText {
    font-size: 15px;
    line-height: 12px;
  }
}
.originArea .textBox .line {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 1180px) {
  .originArea .textBox .line {
    text-wrap: balance;
    word-break: keep-all;
  }
}
.originArea .textBox.intro, .originArea .textBox.travel, .originArea .textBox.profile {
  align-items: flex-end;
  text-align: right;
}
@media (max-width: 1180px) {
  .originArea .textBox.intro, .originArea .textBox.travel, .originArea .textBox.profile {
    padding: 0 32px 0 0;
  }
}
@media (max-width: 768px) {
  .originArea .textBox.intro, .originArea .textBox.travel, .originArea .textBox.profile {
    padding-right: 12px;
  }
}
.originArea .textBox.intro .line, .originArea .textBox.travel .line, .originArea .textBox.profile .line {
  margin-left: auto;
}
.originArea .textBox.intro {
  right: 50%;
  top: 40.811965812cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.intro {
    grid-area: 3/1;
  }
}
.originArea .textBox.origin {
  left: calc(50% + 8.9743589744cqi);
  top: 57.8525641026cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.origin {
    grid-area: 4/2;
  }
}
.originArea .textBox.origin .title {
  margin-bottom: 0;
}
.originArea .textBox.origin .subtitle {
  font-size: max(22px, 1.4957264957cqi);
}
@media (max-width: 768px) {
  .originArea .textBox.origin .subtitle {
    font-size: 17px;
  }
}
.originArea .textBox.nature {
  left: calc(50% + 8.1196581197cqi);
  top: 76.3888888889cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.nature {
    grid-area: 5/2;
  }
}
.originArea .textBox.travel {
  right: calc(50% + 7.264957265cqi);
  top: 89.3162393162cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.travel {
    grid-area: 6/1;
  }
}
.originArea .textBox.profile {
  right: 50%;
  top: 146.8482905983cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.profile {
    grid-area: 9/1;
  }
}
.originArea .textBox.ritual {
  left: calc(50% + 1px);
  top: 168.4829059829cqi;
}
@media (max-width: 1180px) {
  .originArea .textBox.ritual {
    grid-area: 10/2;
  }
}
.originArea .textBox.ritual .enText {
  margin-top: 12px;
}
.originArea .quote {
  position: absolute;
  left: 50%;
  top: 106.4102564103cqi;
  display: flex;
  align-items: center;
  gap: max(32px, 3.2051282051cqi);
  translate: -50% 0;
}
@media (max-width: 1180px) {
  .originArea .quote {
    position: static;
    grid-area: 7/1/8/3;
    justify-self: center;
    translate: none;
  }
}
@media (max-width: 768px) {
  .originArea .quote {
    gap: 12px;
  }
}
.originArea .quote p {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  font-weight: 500;
  font-size: max(22px, 1.4957264957cqi);
  line-height: max(32px, 2.0299145299cqi);
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .originArea .quote p {
    font-size: 15px;
    line-height: 24px;
  }
}
.originArea .quote .bracket {
  width: auto;
  height: max(56px, 3.8461538462cqi);
}
@media (max-width: 768px) {
  .originArea .quote .bracket {
    height: 44px;
  }
}
.originArea .quote .bracket.mirror {
  transform: scaleX(-1);
}
.originArea .art {
  position: absolute;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1180px) {
  .originArea .art {
    position: static;
    justify-self: end;
  }
}
@media (max-width: 768px) {
  .originArea .art {
    scale: 1.4;
  }
}
@media (max-width: 768px) {
  .originArea .art.oil, .originArea .art.perfume, .originArea .art.skin, .originArea .art.leaves {
    display: none;
  }
}
@media (max-width: 1180px) {
  .originArea .art.oil, .originArea .art.perfume, .originArea .art.skin, .originArea .art.leaves {
    grid-area: 9/2;
    width: min(34%, 110px);
    justify-self: center;
    align-self: end;
  }
}
.originArea .art.bubbles {
  left: 69.1773504274cqi;
  top: 34.7222222222cqi;
  width: 5.0213675214cqi;
}
@media (max-width: 1180px) {
  .originArea .art.bubbles {
    grid-area: 3/2;
    width: min(16%, 64px);
    justify-self: center;
    align-self: start;
  }
}
.originArea .art.oil {
  left: 80.235042735cqi;
  top: 48.1303418803cqi;
  width: 9.6153846154cqi;
}
@media (max-width: 1180px) {
  .originArea .art.oil {
    grid-area: 4/1;
    width: min(52%, 170px);
    justify-self: start;
    align-self: end;
    margin-left: 8%;
  }
}
.originArea .art.vanilla {
  left: 14.5138888889cqi;
  top: 55.9829059829cqi;
  width: 9.6314102564cqi;
}
@media (max-width: 1180px) {
  .originArea .art.vanilla {
    grid-area: 5/1;
    width: min(34%, 120px);
    justify-self: center;
    align-self: start;
  }
}
.originArea .art.perfume {
  left: 5.6623931624cqi;
  top: 71.2072649573cqi;
  width: 8.2264957265cqi;
}
@media (max-width: 1180px) {
  .originArea .art.perfume {
    grid-area: 6/2;
    width: min(36%, 130px);
    justify-self: end;
    align-self: start;
    margin-right: 12%;
  }
}
.originArea .art.juniper {
  left: 81.7307692308cqi;
  top: 111.2179487179cqi;
  width: 10.0961538462cqi;
}
@media (max-width: 1180px) {
  .originArea .art.juniper {
    grid-area: 8/1;
    width: min(38%, 140px);
    justify-self: start;
    align-self: end;
    margin-left: 16%;
  }
}
.originArea .art.skin {
  left: -24px;
  top: 127.6709401709cqi;
  width: 14.7435897436cqi;
}
@media (max-width: 1180px) {
  .originArea .art.skin {
    grid-area: 8/2;
    width: min(64%, 230px);
    justify-self: end;
    align-self: start;
    margin-right: -24px;
  }
}
.originArea .art.dropA {
  left: 7.4786324786cqi;
  top: 146.6613247863cqi;
  width: 1.7040598291cqi;
}
@media (max-width: 1180px) {
  .originArea .art.dropA {
    grid-area: 10/1;
    width: min(7%, 26px);
    justify-self: start;
    align-self: start;
    margin-left: 44%;
  }
}
.originArea .art.dropB {
  left: 9.8290598291cqi;
  top: 148.5576923077cqi;
  width: 1.3888888889cqi;
}
@media (max-width: 1180px) {
  .originArea .art.dropB {
    grid-area: 10/1;
    width: min(5%, 20px);
    justify-self: start;
    align-self: start;
    margin: 10% 0 0 54%;
  }
}
.originArea .art.leaf {
  left: 3.4561965812cqi;
  top: 151.047008547cqi;
  width: 11.0737179487cqi;
}
@media (max-width: 1180px) {
  .originArea .art.leaf {
    grid-area: 10/1;
    width: min(40%, 150px);
    justify-self: start;
    align-self: end;
    margin-left: 4%;
  }
}
.originArea .art.leaves {
  left: 77.0833333333cqi;
  top: 157.7457264957cqi;
  width: 7.3717948718cqi;
}
.originArea .art.juniperSmall {
  left: 17.6816239316cqi;
  top: 172.8098290598cqi;
  width: 8.4294871795cqi;
}
@media (max-width: 1180px) {
  .originArea .art.juniperSmall {
    grid-area: 11/1;
    width: min(30%, 110px);
    justify-self: end;
    margin-right: 20%;
  }
}

.momentArea .wrap {
  container-type: inline-size;
  position: relative;
  padding: 0 24px 0 24px;
}
.momentArea .photoList {
  display: flex;
  gap: max(8px, 0.8547008547cqi);
  height: max(320px, 30.9829059829cqi);
  padding: 0 0 0 0;
  list-style: none;
}
.momentArea .photoList.drag {
  cursor: grab;
}
.momentArea .photoList.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 1180px) {
  .momentArea .photoList {
    gap: 12px;
    height: auto;
    margin-inline: -24px;
    padding: 0 24px 0 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
}
.momentArea .photoItem {
  position: relative;
  flex: 281.75 1 0;
  overflow: hidden;
}
@media (max-width: 1180px) {
  .momentArea .photoItem {
    flex: none;
    width: 360px;
    aspect-ratio: 3/4;
  }
}
@media (max-width: 768px) {
  .momentArea .photoItem {
    width: 300px;
  }
}
@media (max-width: 480px) {
  .momentArea .photoItem {
    width: min(280px, 78vw);
  }
}
.momentArea .photoItem:first-child {
  flex-grow: 685;
}
@media (max-width: 1180px) {
  .momentArea .photoItem:first-child {
    flex-grow: 0;
  }
}
.momentArea .photoItem img {
  position: absolute;
  top: var(--top);
  left: clamp(100% - var(--w), 50% - var(--focal), 0px);
  width: var(--w);
  max-width: none;
  height: var(--h);
}
@media (max-width: 1180px) {
  .momentArea .photoItem img {
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: var(--x, 50%) 50%;
       object-position: var(--x, 50%) 50%;
  }
}
.momentArea .photoItem.blossom {
  --top: -4.1666666667cqi;
  --w: 49.2521367521cqi;
  --h: 39.6367521368cqi;
  --focal: 25.7745726496cqi;
  --x: 52%;
}
.momentArea .photoItem.handcream {
  --top: -0.1068376068cqi;
  --w: 42.3076923077cqi;
  --h: 31.6773504274cqi;
  --focal: 24.3055555556cqi;
  --x: 57%;
}
.momentArea .photoItem.spray {
  --top: -7.1047008547cqi;
  --w: 36.5918803419cqi;
  --h: 48.7713675214cqi;
  --focal: 18.3760683761cqi;
}
.momentArea .photoItem.moss {
  --top: -1.7628205128cqi;
  --w: 36.5918803419cqi;
  --h: 48.7713675214cqi;
  --focal: 17.8952991453cqi;
}
.momentArea .photoItem.rest {
  --top: -10.6837606838cqi;
  --w: 36.5918803419cqi;
  --h: 48.7713675214cqi;
  --focal: 9.561965812cqi;
}

.findArea {
  overflow-x: clip;
  padding: 80px 0 139px 0;
}
@media (max-width: 1180px) {
  .findArea {
    padding: 64px 0 100px 0;
  }
}
@media (max-width: 480px) {
  .findArea {
    padding: 48px 0 80px 0;
  }
}
.findArea .wrap {
  position: relative;
  container-type: inline-size;
  padding: 0 24px 0 24px;
}
@media (max-width: 1180px) {
  .findArea .wrap {
    display: grid;
  }
}
.findArea .titleBox {
  position: relative;
}
.findArea .title {
  display: flex;
  flex-direction: column;
  gap: 2.1367521368cqi;
}
@media (max-width: 1180px) {
  .findArea .title {
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .findArea .title {
    gap: 10px;
  }
}
.findArea .title .Img {
  display: block;
}
.findArea .title .close {
  width: 58.7516025641cqi;
}
.findArea .title .remember {
  align-self: flex-end;
  width: 58.4070512821cqi;
}
@media (max-width: 1180px) {
  .findArea .title .close,
  .findArea .title .remember {
    width: min(92cqi, 620px);
  }
}
@media (max-width: 480px) {
  .findArea .title .close,
  .findArea .title .remember {
    width: 96cqi;
  }
}
.findArea .title img {
  width: 100%;
  height: auto;
}
.findArea .headBox {
  position: absolute;
  top: 0;
  left: 60.7905982906cqi;
  display: flex;
  align-items: center;
  gap: 2.0299145299cqi;
  height: 3.8819444444cqi;
}
@media (max-width: 1180px) {
  .findArea .headBox {
    position: static;
    justify-content: flex-end;
    gap: 24px;
    height: auto;
    margin-top: 28px;
  }
}
@media (max-width: 480px) {
  .findArea .headBox {
    gap: 16px;
    margin-top: 20px;
  }
}
.findArea .subtitle {
  display: flex;
  align-items: center;
  gap: 0.41em;
  font-size: max(16px, 1.8162393162cqi);
  font-weight: 500;
}
@media (max-width: 1180px) {
  .findArea .subtitle {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .findArea .subtitle {
    font-size: 16px;
  }
}
.findArea .subtitle span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  line-height: normal;
  white-space: nowrap;
}
.findArea .subtitle .bracket {
  width: auto;
  height: 1.978em;
  transform: scaleY(-1);
}
.findArea .subtitle .bracket.mirror {
  transform: scale(-1);
}
.findArea .tag {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0 0.6em 0;
  font-size: max(12px, 1.0683760684cqi);
}
.findArea .tag span {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px #000;
  font-family: "Aoboshi One", serif;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.findArea .tag .bracket {
  width: auto;
  height: 1.35em;
}
.findArea .tag .bracket.mirror {
  transform: scaleX(-1);
}
.findArea .line {
  position: absolute;
  height: auto;
  pointer-events: none;
}
@media (max-width: 1180px) {
  .findArea .line {
    position: static;
    max-width: none;
  }
}
.findArea .line.left {
  top: 6.3354700855cqi;
  left: calc(24px + 4.4764957265cqi);
  width: 29.4277777778cqi;
}
@media (max-width: 1180px) {
  .findArea .line.left {
    justify-self: start;
    width: min(70cqi, 440px);
    margin: 24px 0 0 calc(-24px - 12cqi);
  }
}
@media (max-width: 480px) {
  .findArea .line.left {
    width: 86cqi;
    margin-left: calc(-24px - 18cqi);
  }
}
.findArea .line.right {
  top: 13.2478632479cqi;
  left: calc(24px + 71.2072649573cqi);
  width: 25.6040598291cqi;
}
@media (max-width: 1180px) {
  .findArea .line.right {
    order: 1;
    justify-self: end;
    width: min(64cqi, 400px);
    margin: 8px calc(-24px - 12cqi) 0 0;
  }
}
@media (max-width: 480px) {
  .findArea .line.right {
    width: 80cqi;
    margin-right: calc(-24px - 18cqi);
  }
}
.findArea .textBox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6.6239316239cqi;
  text-align: center;
}
@media (max-width: 1180px) {
  .findArea .textBox {
    margin-top: 0;
  }
}
.findArea .label {
  text-box: trim-both cap alphabetic;
  padding: 6.5px 21.5px 6.5px 21.5px;
  border: 1px solid #000;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
}
.findArea .text {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: 25px;
  font-size: max(20px, 1.2820512821cqi);
  font-weight: 500;
  line-height: 38px;
}
@media (max-width: 768px) {
  .findArea .text {
    line-height: 1.6;
  }
}
@media (max-width: 480px) {
  .findArea .text {
    font-size: 17px;
  }
}
.findArea .text span {
  display: inline-block;
}
.findArea .enText {
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.05em;
  margin-inline-end: -0.05em;
  margin-top: 25px;
  font-family: "Chathura", sans-serif;
  font-size: max(20px, 1.2820512821cqi);
  line-height: 17px;
}
@media (max-width: 480px) {
  .findArea .enText {
    font-size: 18px;
  }
}
.findArea .moreBtn {
  margin-top: 60px;
}
@media (max-width: 480px) {
  .findArea .moreBtn {
    margin-top: 30px;
    gap: 12px;
    padding: 0 20px 0 20px;
  }
}

.findArea:not(.played) .moreBtn {
  pointer-events: none;
}