:root {
  --collection-font: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --collection-body: .9375rem;
  --collection-small: .8125rem;
}

html { scroll-behavior: smooth; }
body, button, input, .font-sans, .font-serif { font-family: var(--collection-font) !important; }
body { font-size: var(--collection-body); line-height: 1.7; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #c8a974; outline-offset: 3px; }
.collection01-theme .collection-search input:focus, .collection01-theme .collection-search-panel input:focus { outline: 0 !important; box-shadow: none !important; }
[hidden] { display: none !important; }

.mega-nav-item { position: static; }
.mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: white;
  transition: color .2s;
}
.mega-trigger:hover, .mega-nav-item.is-open .mega-trigger { color: #c8a974; }
.mega-chevron { width: 15px; height: 15px; transition: transform .2s; }
.mega-nav-item.is-open .mega-chevron { transform: rotate(180deg); }
.mega-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(820px, calc(100vw - 32px));
  transform: translate(-50%, 8px);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: #fffdfa;
  border: 1px solid #d7c6a4;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  color: #252525;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.mega-nav-item.is-open .mega-panel,
.mega-nav-item:focus-within .mega-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mega-panel-inner { padding: 22px 26px 26px; }
.mega-panel-title { font-size: 1.125rem; font-weight: 600; padding-bottom: 13px; border-bottom: 1px solid #e5dfd4; }
.mega-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 15px; }
.mega-columns h3 { font-size: .9rem; font-weight: 700; margin-bottom: 4px; }
.mega-columns a { display: inline-flex; align-items: center; min-height: 30px; }
.mega-columns a:hover { color: #96733d; }
.mega-columns ul { font-size: .8125rem; color: #666; }
.mega-columns ul ul { margin-left: 11px; padding-left: 10px; border-left: 1px solid #e8e1d5; color: #777; font-size: .75rem; }
.mega-columns li { list-style: none; }

.hero-section { --hero-overlay-height: 172px; position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #101820; }
.hero-section .swiper, .hero-section .swiper-wrapper, .hero-section .swiper-slide { height: 100%; }
.hero-slide { position: relative; }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,9,16,.72), rgba(3,9,16,.25) 54%, transparent 82%), linear-gradient(0deg, rgba(3,9,16,.45), transparent 35%); }
.hero-copy { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: center; max-width: 1440px; margin: auto; padding: var(--hero-overlay-height) 30px 0; color: white; text-align: center; }
.hero-copy-inner { max-width: 540px; }
.hero-copy h1, .hero-copy h2 { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.35; letter-spacing: .13em; font-weight: 600; margin: 0 0 17px; text-shadow: 0 2px 12px #000a; }
.hero-copy p { font-size: clamp(.9rem, 1.25vw, 1.125rem); line-height: 2; letter-spacing: .11em; margin: 0 0 26px; text-shadow: 0 2px 10px #000; }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 28px; background: linear-gradient(135deg,#b99c67,#927745); border: 1px solid #d2b87e; color: white; font-size: .875rem; letter-spacing: .12em; }
.hero-cta:hover { background: #8b6f40; }
.hero-arrow { position: absolute; z-index: 4; top: calc(50% + 86px); transform: translateY(-50%); width: 46px; height: 46px; display: grid; place-items: center; color: white; background: rgba(5,9,13,.55); border: 1px solid #ffffff80; border-radius: 50%; }
.hero-arrow:hover { background: rgba(5,9,13,.9); }
.hero-prev { left: 18px; } .hero-next { right: 18px; }
.hero-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero-pagination { position: absolute; z-index: 5; bottom: 20px !important; display: flex; justify-content: center; gap: 7px; }
.hero-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; background: #fff; opacity: .75; }
.hero-pagination .swiper-pagination-bullet-active { background: #d8bc72; opacity: 1; }

.collection-category img { width: 100%; height: 100%; object-fit: cover; }
.collection-category .category-overlay { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(0,0,0,.7),transparent 58%); }
.collection-category h3 { z-index: 2; }
.collection-category .category-arrow { z-index: 2; }

.product-rail { overflow: hidden; }
.product-rail .rail-controls { display: flex !important; gap: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
.product-rail:hover .rail-controls, .product-rail:focus-within .rail-controls { opacity: 1; visibility: visible; pointer-events: auto; }
.product-rail.is-locked .rail-controls, .product-rail.is-locked .rail-pagination { display: none !important; }
.rail-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #cdb88f; border-radius: 50%; background: white; color: #8b6f40; }
.rail-controls button:hover { background: #f4ede1; }
.product-swiper { width: 100%; overflow: hidden; padding-bottom: 3px; }
.product-swiper .swiper-slide { height: auto; display: flex; flex-direction: column; border: 1px solid #e9e4dc; box-shadow: none; }
.product-swiper .swiper-slide:focus-visible { outline: 2px solid #8b6f40; outline-offset: -3px; }
.product-swiper .product-media { background: white; }
.product-swiper .product-cutout { display: block; width: 100%; height: 100%; padding: 0; object-fit: contain; mix-blend-mode: normal; }
.product-swiper .swiper-slide > h3 { margin-bottom: 0 !important; }
.product-swiper .swiper-slide .product-price { margin-top: 0 !important; padding-top: 0 !important; }
.product-swiper .swiper-slide h3 { font-size: var(--collection-small); line-height: 1.5; min-height: 1.5em; }
.product-swiper .swiper-slide .product-price { font-size: var(--collection-body); }
.rank-badge { color: #fff; background: #151b2a; border-radius: 2px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 1px 4px #0004; }
.rank-badge.rank-gold { background: linear-gradient(135deg, #d9b94a, #9c7621); }
.rank-badge.rank-silver { background: linear-gradient(135deg, #cfd4d9, #7f8994); }
.rank-badge.rank-bronze { background: linear-gradient(135deg, #c9824d, #874728); }
.rail-pagination { display: flex; justify-content: center; gap: 4px; margin-top: 20px; }
.rail-dot { width: 7px; height: 7px; padding: 0; margin: 0 2px; border: 0; border-radius: 50%; background: #b7b5b1; cursor: pointer; }
.rail-dot.is-active { background: #202938; }
.collection-journal { padding: 64px 48px 68px; color: #202938; border-block: 1px solid #e6e1d8; background: #f8f7f4; }
.collection-journal-shell { width: min(100%, 1344px); margin-inline: auto; }
.collection-journal-head { padding-bottom: 22px; margin-bottom: 0; }
.collection-journal-heading { display: flex; align-items: center; justify-content: center; gap: 16px; }
.collection-journal-heading::before, .collection-journal-heading > span { display: block; width: 40px; height: 1px; flex: 0 0 auto; content: ""; background: rgba(139,111,64,.58); }
.collection-journal-heading h2 { margin: 0; color: #202938; font-size: 28px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; }
.collection-journal-list { border: 0; }
.collection-journal-row + .collection-journal-row { border-top: 1px solid #e2ddd4; }
.collection-journal-summary { display: grid; grid-template-columns: 112px minmax(0,1fr); min-height: 62px; align-items: center; gap: 20px; padding: 15px 0 5px; }
.collection-journal-summary time { color: #8b6f40; font-size: 14px; line-height: 1.7; letter-spacing: .1em; white-space: nowrap; }
.collection-journal-title { min-width: 0; margin: 0; color: #202938; font-size: 16px; font-weight: 700; line-height: 1.7; letter-spacing: .06em; }
.collection-journal-content { padding: 0 0 19px 132px; color: #706c64; font-size: 14px; line-height: 1.9; letter-spacing: .04em; overflow-wrap: anywhere; }
.promo-banner img { object-position: center; }
.category-desktop { height: clamp(280px, 38.7vw, 560px) !important; }
.category-desktop > a:first-child { width: 38% !important; flex-shrink: 0; }
.category-desktop > div:last-child { width: 62% !important; min-width: 0; }
.category-desktop > div:last-child > div:first-child > a:first-child { width: 42% !important; }
.category-desktop > div:last-child > div:first-child > a:last-child { width: 58% !important; }

.mobile-menu-panel { display: none; }
@media (max-width: 1023px) {
  .hero-section { --hero-overlay-height: 106px; }
  .hero-arrow { top: calc(50% + 53px); }
  .mobile-menu-panel { position: fixed; z-index: 100; inset: 0; display: none; }
  .mobile-menu-panel.is-open { display: block; }
  .mobile-menu-backdrop { position: absolute; inset: 0; background: #0009; }
  .mobile-menu-content { position: relative; width: min(360px, 90vw); height: 100%; overflow-y: auto; background: #101824; color: white; padding: 20px; box-shadow: 10px 0 30px #0005; }
  .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 1.1rem; }
  .mobile-menu-close { min-width: 44px; min-height: 44px; font-size: 1.5rem; }
  .mobile-menu-content details { border-top: 1px solid #ffffff25; padding: 10px 0; }
  .mobile-menu-content summary { cursor: pointer; min-height: 38px; display: flex; align-items: center; }
  .mobile-menu-content ul { padding-left: 16px; font-size: .875rem; color: #d0c4af; }
  .mobile-menu-content li { padding: 5px 0; }
  .mobile-menu-content ul ul { padding-left: 14px; font-size: .8125rem; }
  body.mobile-menu-open { overflow: hidden; }
}
@media (max-width: 767px) {
  .hero-image { object-position: 60% center; }
  .hero-copy { padding-inline: 30px; }
  .hero-copy-inner { max-width: 78%; }
  .hero-copy h1, .hero-copy h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .hero-copy p { font-size: .875rem; }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-prev { left: 5px; } .hero-next { right: 5px; }
  .product-rail .rail-controls { display: none !important; }
  .product-swiper { overflow: visible; }
  .product-swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .product-swiper:not(.swiper-initialized) .swiper-slide:nth-child(n+2) { display: none; }
  .collection-journal { padding: 42px 16px 46px; }
  .collection-journal-heading h2 { font-size: 24px; }
  .collection-journal-heading::before, .collection-journal-heading > span { width: 28px; }
  .collection-journal-summary { grid-template-columns: minmax(0,1fr); gap: 2px; padding: 16px 0 5px; }
  .collection-journal-summary time { font-size: 13px; }
  .collection-journal-title { font-size: 14px; }
  .collection-journal-content { padding: 0 0 18px; font-size: 14px; }
}
@media (max-width: 650px) {
  .hero-section { --hero-overlay-height: 101px; }
  .hero-arrow { top: calc(50% + 50.5px); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .mega-panel { width: min(620px, calc(100vw - 24px)); }
  .hero-image { object-position: center; }
  .hero-copy { padding-inline: 30px; }
  .hero-copy h1, .hero-copy h2 { font-size: 2.3rem; }
  .hero-copy p { font-size: .875rem; }
  #categories { padding: 30px 26px 22px !important; }
  #categories > div:first-child { margin-bottom: 24px !important; }
  .category-mobile { display: none !important; }
  .category-desktop { display: flex !important; gap: 8px !important; }
  .category-desktop > div:last-child { gap: 8px !important; }
  .category-desktop > div:last-child > div { gap: 8px !important; }
  .category-desktop h3 { font-size: .875rem !important; }
  .product-rail { padding: 14px 26px !important; }
  .product-rail > div:first-child { margin-bottom: 12px !important; }
  .product-swiper .swiper-slide h3 { min-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .product-swiper .swiper-slide .product-price { padding-top: 0 !important; }
  .product-swiper .swiper-slide .product-media { margin-bottom: 7px !important; }
  .product-swiper .swiper-slide { padding-bottom: 7px !important; }
  .product-swiper { overflow: hidden !important; }
  .product-rail .rail-controls { display: flex !important; }
  .product-rail .rail-pagination { margin-top: 10px; }
  .promo-banner { height: 170px !important; padding: 20px !important; }
  .promo-banner h3 { font-size: 1rem !important; margin-bottom: 8px !important; }
  .promo-banner p { font-size: .75rem !important; margin-bottom: 12px !important; }
  .promo-banner > div > div { min-height: 36px; }
  .promo-banner > div { width: 62% !important; }
  .promo-banner img { width: 50% !important; }
  main > section:has(.promo-banner) { flex-direction: row !important; padding: 3px 26px !important; gap: 8px !important; }
  main > section:has(.promo-banner) > a { width: 50% !important; }
  main > section:has(.promo-banner) + section { padding: 8px 26px 13px !important; }
  main > section:has(.promo-banner) + section > div:first-child { margin-bottom: 15px !important; }
  main > section:has(.promo-banner) + section > div:last-child { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 12px !important; }
  main > section:has(.promo-banner) + section .aspect-\[4\/3\] { aspect-ratio: 3 / 2 !important; }
  main > section:has(.promo-banner) + section .aspect-\[4\/3\] + div { padding: 6px !important; height: 75px !important; }
  main > section:has(.promo-banner) + section h3 { font-size: .75rem !important; letter-spacing: 0 !important; margin-bottom: 4px !important; }
  main > section:has(.promo-banner) + section p { font-size: .6875rem !important; line-height: 1.45 !important; }
  main > section:has(.promo-banner) + section + section { padding: 10px 0 !important; }
  main > section:has(.promo-banner) + section + section > div { flex-direction: row !important; }
  main > section:has(.promo-banner) + section + section > div > div { padding: 6px !important; }
  main > section:has(.promo-banner) + section + section .material-symbols-outlined { font-size: 30px !important; margin-bottom: 5px !important; }
  main > section:has(.promo-banner) + section + section h4 { margin-bottom: 2px !important; }
  footer#footer { padding: 10px 0 5px !important; }
  footer#footer > div { padding-inline: 26px !important; }
  footer#footer > div > div:first-child { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 12px !important; margin-bottom: 8px !important; }
  footer#footer > div > div:first-child > div:last-child { grid-column: auto !important; }
  footer#footer h4 { margin-bottom: 8px !important; font-size: .75rem !important; }
  footer#footer > div > div:first-child > div:last-child h4:first-child { font-size: .625rem !important; letter-spacing: 0 !important; white-space: nowrap; }
  footer#footer > div > div:first-child > div:last-child .flex.gap-3 { gap: 6px !important; margin-bottom: 8px !important; }
  footer#footer > div > div:first-child > div:last-child .w-8.h-8 { width: 24px !important; height: 24px !important; }
  footer#footer > div > div:first-child > div:last-child .w-max { width: 100% !important; gap: 3px !important; padding: 3px !important; }
  footer#footer > div > div:first-child > div:last-child .w-max > div { width: 24px !important; height: 16px !important; }
  footer#footer ul { font-size: .6875rem !important; line-height: 1.4 !important; }
  footer#footer ul.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 4px !important; }
  footer#footer .pt-6 { padding-top: 5px !important; flex-direction: row !important; gap: 8px !important; }
  footer#footer .pt-6 > p { font-size: .625rem !important; }
  footer#footer .pt-6 > div { padding: 3px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* The copied Collection01 #popular rule must not remove Collection01 rail gutters. */
.collection01-home-page #popular.product-rail { padding: 64px 48px !important; }
@media (min-width: 700px) and (max-width: 1023px) {
  .collection01-home-page #popular.product-rail { padding: 14px 26px !important; }
}
@media (max-width: 699px) {
  .collection01-home-page #popular.product-rail { padding: 48px 16px !important; }
}