:root {
--ink: #151515;
--ink-2: #4D4D4A;
--ink-3: #8A8A85;
--line: #E2E2DD;
--snow: #F6F6F3;
--cold: #2C5C8A;
--frozen: #1E4A7A;
--warn: #B5432F;
--disp: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", serif;
--serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
--sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
--font-head: var(--serif);
--font-body: var(--sans);
--ease: cubic-bezier(0.19, 1, 0.22, 1);
--radius: 0px;
--wrap: 1200px;
--gutter: 20px;
--hd-h: 64px;
--sec-pad: 72px;
}
.f-mincho {
--font-body: var(--serif);
}
.f-gothic {
--font-head: var(--sans);
}
.r-m {
--radius: 6px;
}
.r-l {
--radius: 18px;
}
.season-spring {
--accent: #B5536A;
--sec-bg: #F8EEF0;
--sec-txt: #3A2A2E;
}
.season-summer {
--accent: #2F6E9E;
--sec-bg: #EAF2F8;
--sec-txt: #1F2F3C;
}
.season-autumn {
--accent: #8C5A2B;
--sec-bg: #F6EFE6;
--sec-txt: #3C2E22;
}
.season-winter {
--accent: #22412F;
--sec-bg: #ECF1EC;
--sec-txt: #1E2A22;
}
.season-wa {
--accent: #A63A2B;
--sec-bg: #EFEBE3;
--sec-txt: #1C1B19;
}
.season-spring,
.season-summer,
.season-autumn,
.season-winter,
.season-wa {
--accent-txt: #FFFFFF;
}
@media (min-width: 768px) {
:root {
--gutter: 40px;
--sec-pad: 110px;
}
}
@media (min-width: 1000px) {
:root {
--hd-h: 76px;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
letter-spacing: 0.02em;
line-height: 1.9;
margin: 0;
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
}
body.drawer-open,
body.fav-open {
overflow: hidden;
}
[hidden] {
display: none !important;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: top;
}
a {
color: inherit;
text-decoration: none;
}
p {
margin: 0 0 1em;
}
p:last-child {
margin-bottom: 0;
}
ul,
ol {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-head);
font-size: inherit;
font-weight: 400;
line-height: 1.5;
margin: 0;
word-break: auto-phrase;
}
em {
font-style: normal;
}
button,
input,
select,
textarea {
color: inherit;
font: inherit;
letter-spacing: inherit;
}
html button,
html input,
html select,
html textarea {
font-family: inherit;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.wrap {
margin: 0 auto;
max-width: var(--wrap);
padding-left: var(--gutter);
padding-right: var(--gutter);
width: 100%;
}
.wrap--narrow {
max-width: 820px;
}
.en {
font-family: var(--disp);
font-style: italic;
font-weight: 400;
letter-spacing: 0.04em;
}
.secHead {
align-items: end;
display: grid;
gap: 16px;
grid-template-columns: 1fr;
margin-bottom: 40px;
}
.secHead__title {
font-size: 26px;
letter-spacing: 0.04em;
line-height: 1.4;
overflow-wrap: anywhere;
}
.secHead__title .en {
color: var(--ink-3);
font-size: 0.85em;
margin-left: 0.4em;
white-space: nowrap;
}
.secHead__lead {
color: var(--ink-3);
font-size: 13px;
margin: 6px 0 0;
}
.secHead__more {
border-bottom: 1px solid currentColor;
font-size: 13px;
letter-spacing: 0.1em;
padding-bottom: 2px;
white-space: nowrap;
}
@media (min-width: 768px) {
.secHead {
grid-template-columns: 1fr auto;
margin-bottom: 48px;
}
.secHead__title {
font-size: 32px;
}
}
.btn {
align-items: center;
background: transparent;
border: 1px solid currentColor;
border-radius: 999px;
color: inherit;
cursor: pointer;
display: inline-flex;
font-size: 14px;
justify-content: center;
letter-spacing: 0.12em;
line-height: 1.4;
min-height: 52px;
padding: 8px 30px;
text-align: center;
transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s var(--ease);
}
.btn:hover {
transform: translateY(-2px);
}
.btn--fill {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-txt);
}
.btn--white {
background: #fff;
border-color: #fff;
color: var(--ink);
}
.btn--white:hover {
background: transparent;
color: #fff;
}
.btn:disabled {
cursor: default;
opacity: 0.4;
transform: none;
}
.textLink {
border-bottom: 1px solid currentColor;
display: inline-block;
font-size: 13px;
letter-spacing: 0.1em;
padding-bottom: 2px;
}
.pill {
background: #fff;
border-radius: 999px;
color: var(--ink-2);
display: inline-block;
font-size: 11px;
letter-spacing: 0.08em;
line-height: 1.5;
padding: 4px 10px;
}
.pill--accent {
background: var(--accent);
color: var(--accent-txt);
}
.js .rv {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .rv.in {
opacity: 1;
transform: none;
}
.js .rv-d1 {
transition-delay: 0.1s;
}
.js .rv-d2 {
transition-delay: 0.2s;
}
.js .rv-d3 {
transition-delay: 0.3s;
}
.js .rv-pic {
clip-path: inset(100% 0 0 0);
transition: clip-path 1.3s var(--ease);
}
.js .rv-pic > img {
transform: scale(1.12);
transition: transform 1.6s var(--ease);
}
.js .rv-pic.in {
clip-path: inset(0 0 0 0);
}
.js .rv-pic.in > img {
transform: none;
}
.lines span {
display: block;
overflow: hidden;
}
.lines span i {
display: block;
font-style: normal;
}
.js .lines span i {
transform: translateY(110%);
transition: transform 1.1s var(--ease);
}
.js .lines.in span i {
transform: none;
}
.js .lines.in span:nth-child(2) i {
transition-delay: 0.15s;
}
.js .lines.in span:nth-child(3) i {
transition-delay: 0.3s;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js .rv,
.js .rv-pic,
.js .rv-pic > img,
.js .lines span i {
clip-path: none;
opacity: 1;
transform: none;
transition: none;
}
}
.hd {
background: #fff;
box-shadow: 0 1px 0 var(--line);
color: var(--ink);
position: sticky;
top: 0;
transition: background 0.5s, color 0.5s, box-shadow 0.5s;
z-index: 40;
}
.hd--static {
position: relative;
}
.hd__inner {
align-items: center;
column-gap: 12px;
display: grid;
grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
height: var(--hd-h);
}
.hd__start {
align-items: center;
display: flex;
gap: 4px;
grid-column: 1;
justify-self: start;
}
.hero-first .hd {
background: transparent;
box-shadow: none;
color: #fff;
margin-bottom: calc(var(--hd-h) * -1);
}
.hero-first .hd.on {
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 0 var(--line);
color: var(--ink);
}
.hero-first .hd:not(.on) .hd__logo,
.hero-first .hd:not(.on) .nav {
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.hd__logo {
font-family: var(--disp);
font-size: 22px;
font-weight: 500;
grid-column: 2;
letter-spacing: 0.08em;
line-height: 1.2;
min-width: 0;
text-align: center;
}
.hd__logo a {
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 2;
max-width: 100%;
overflow: hidden;
overflow-wrap: anywhere;
}
.hd__logo .logoImage {
max-height: 40px;
width: auto;
}
.nav {
display: none;
}
.hd__tools {
align-items: center;
display: flex;
gap: 14px;
grid-column: 3;
justify-self: end;
}
.searchForm {
display: none;
}
.hd #baseMenu {
position: static;
}
.hd #baseMenu ul {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
}
.hd #baseMenu li {
float: none;
list-style: none;
margin: 0;
}
.hd #baseMenu li a {
align-items: center;
background: #fff;
border-radius: 999px;
box-shadow: 0 0 0 1px var(--line);
display: flex;
height: 36px;
padding: 0 10px;
}
.hd #baseMenu img {
display: block;
height: 20px;
width: auto;
}
@media (max-width: 400px) {
.hd__inner {
gap: 10px;
}
.hd__logo {
font-size: 19px;
}
.hd #baseMenu ul {
gap: 6px;
}
.hd #baseMenu li a {
height: 32px;
padding: 0 7px;
}
.hd #baseMenu img {
height: 18px;
}
}
.cart {
position: relative;
}
.cart-badge {
display: block !important;
}
.cart-qty {
background: var(--accent);
border-radius: 50%;
color: var(--accent-txt);
font-size: 10px;
font-weight: 700;
line-height: 16px;
min-width: 16px;
padding: 0 2px;
position: absolute;
right: -4px;
text-align: center;
top: -4px;
}
.menuBtn {
background: none;
border: 0;
cursor: pointer;
height: 40px;
padding: 0;
position: relative;
width: 32px;
}
.menuBtn::before,
.menuBtn::after {
background: currentColor;
content: "";
height: 1.5px;
left: 4px;
position: absolute;
right: 4px;
transition: transform 0.4s var(--ease);
}
.menuBtn::before {
top: 14px;
}
.menuBtn::after {
bottom: 14px;
}
.menuBtn__label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
}
@media (min-width: 1180px) {
.menuBtn {
display: none;
}
.hd__start {
display: none;
}
.hd__logo {
font-size: 26px;
grid-column: 1;
justify-self: start;
text-align: left;
}
.nav {
display: flex;
font-size: 13px;
gap: clamp(14px, 1.6vw, 24px);
grid-column: 2;
justify-content: center;
letter-spacing: 0.1em;
}
.nav > li {
position: relative;
}
.nav a,
.nav button {
background: none;
border: 0;
cursor: pointer;
display: inline-block;
padding: 4px 0;
position: relative;
white-space: nowrap;
}
.nav a::after,
.nav button::after {
background: currentColor;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s var(--ease);
}
.nav a:hover::after,
.nav button:hover::after,
.nav .is-open > button::after {
transform: scaleX(1);
transform-origin: left;
}
.catPanel {
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
color: var(--ink);
display: none;
left: 50%;
min-width: 220px;
padding: 18px 22px;
position: absolute;
top: calc(100% + 10px);
transform: translateX(-50%);
white-space: nowrap;
z-index: 5;
}
.nav .is-open .catPanel {
display: block;
}
.catPanel a {
display: block;
font-size: 13px;
letter-spacing: 0.06em;
padding: 5px 0;
}
.catPanel ul ul a {
color: var(--ink-3);
font-size: 12px;
padding-left: 14px;
}
.searchForm {
border-bottom: 1px solid currentColor;
display: flex;
width: 150px;
}
html .searchForm input {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
font-size: 13px;
height: auto;
line-height: 1.6;
margin: 0;
min-width: 0;
padding: 6px 0;
width: 100%;
}
.searchForm input::placeholder {
color: inherit;
opacity: 0.7;
}
.searchForm button {
background: none;
border: 0;
cursor: pointer;
font-size: 12px;
letter-spacing: 0.1em;
padding: 0 0 0 8px;
white-space: nowrap;
}
}
.drawerOverlay,
.favOverlay {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background: rgba(20, 16, 12, 0.5);
inset: 0;
opacity: 0;
pointer-events: none;
position: fixed;
transition: opacity 0.5s var(--ease);
z-index: 60;
}
.drawer,
.favPanel {
background: #fff;
bottom: 0;
color: var(--ink);
max-width: 360px;
overflow-y: auto;
padding: 24px var(--gutter) 40px;
position: fixed;
right: 0;
top: 0;
transform: translateX(100%);
transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
visibility: hidden;
width: 86%;
z-index: 61;
}
.drawer-open .drawerOverlay,
.fav-open .favOverlay {
opacity: 1;
pointer-events: auto;
}
.drawer-open .drawer,
.fav-open .favPanel {
transform: none;
transition: transform 0.6s var(--ease);
visibility: visible;
}
.drawer__close {
background: none;
border: 0;
cursor: pointer;
font-size: 12px;
letter-spacing: 0.14em;
margin-left: auto;
padding: 8px 0;
}
.drawer__head {
display: flex;
margin-bottom: 20px;
}
.drawer__nav a {
align-items: baseline;
border-bottom: 1px solid var(--line);
display: flex;
gap: 12px;
justify-content: space-between;
padding: 15px 0;
}
.drawer__ja {
font-family: var(--font-head);
font-size: 16px;
letter-spacing: 0.08em;
}
.drawer__en {
color: var(--ink-3);
font-family: var(--disp);
font-size: 13px;
font-style: italic;
letter-spacing: 0.06em;
}
.drawer__nav a,
.drawer__cat,
.drawer__search,
.drawer__sub {
opacity: 0;
transform: translateX(18px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.drawer-open .drawer__nav a,
.drawer-open .drawer__cat,
.drawer-open .drawer__search,
.drawer-open .drawer__sub {
opacity: 1;
transform: none;
}
.drawer-open .drawer__nav a:nth-child(1) { transition-delay: 0.12s; }
.drawer-open .drawer__nav a:nth-child(2) { transition-delay: 0.17s; }
.drawer-open .drawer__nav a:nth-child(3) { transition-delay: 0.22s; }
.drawer-open .drawer__nav a:nth-child(4) { transition-delay: 0.27s; }
.drawer-open .drawer__nav a:nth-child(5) { transition-delay: 0.32s; }
.drawer-open .drawer__nav a:nth-child(6) { transition-delay: 0.37s; }
.drawer-open .drawer__nav a:nth-child(7) { transition-delay: 0.42s; }
.drawer-open .drawer__cat { transition-delay: 0.47s; }
.drawer-open .drawer__search { transition-delay: 0.52s; }
.drawer-open .drawer__sub { transition-delay: 0.57s; }
@media (hover: hover) {
.drawer__nav a .drawer__ja {
transition: letter-spacing 0.4s var(--ease);
}
.drawer__nav a:hover .drawer__ja {
letter-spacing: 0.14em;
}
}
@media (prefers-reduced-motion: reduce) {
.drawer__nav a,
.drawer__cat,
.drawer__search,
.drawer__sub {
opacity: 1;
transform: none;
transition: none;
}
.drawerOverlay {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.drawer__cat {
margin-top: 22px;
}
.drawer__label {
align-items: baseline;
color: var(--ink-3);
display: flex;
font-size: 12px;
justify-content: space-between;
letter-spacing: 0.16em;
margin-bottom: 8px;
}
.drawer__cat a {
display: block;
font-family: var(--font-head);
font-size: 14px;
letter-spacing: 0.06em;
padding: 7px 0;
}
.drawer__cat ul ul a {
color: var(--ink-3);
font-size: 13px;
padding-left: 16px;
}
.drawer__search {
border-bottom: 1px solid var(--ink);
display: flex;
margin-top: 22px;
}
html .drawer__search input {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
font-size: 16px;
height: auto;
line-height: 1.6;
margin: 0;
min-width: 0;
padding: 10px 0;
width: 100%;
}
.drawer__search button {
background: none;
border: 0;
cursor: pointer;
flex: none;
font-size: 13px;
letter-spacing: 0.1em;
padding: 0 0 0 10px;
white-space: nowrap;
}
.drawer__sub {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 28px;
}
.drawer__sub a {
color: var(--ink-3);
font-size: 12px;
}
.pageHead {
padding-bottom: 32px;
padding-top: 32px;
}
.pageHead__title {
font-size: 26px;
letter-spacing: 0.04em;
line-height: 1.4;
overflow-wrap: anywhere;
}
.pageHead__title .en {
color: var(--ink-3);
font-size: 0.8em;
margin-left: 0.4em;
}
.crumb {
color: var(--ink-3);
font-size: 12px;
margin-bottom: 14px;
overflow-wrap: anywhere;
}
.crumb a {
border-bottom: 1px solid transparent;
}
.crumb a:hover {
border-bottom-color: currentColor;
}
.catChildren {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.catChildren a {
border: 1px solid var(--line);
border-radius: 999px;
display: block;
font-size: 12px;
letter-spacing: 0.06em;
padding: 6px 14px;
transition: border-color 0.3s;
}
.catChildren a:hover {
border-color: var(--ink);
}
@media (min-width: 768px) {
.pageHead {
padding-bottom: 48px;
padding-top: 48px;
}
.pageHead__title {
font-size: 34px;
}
}
.slotArea {
display: flex;
flex-direction: column;
}
.blk {
order: 500;
padding-bottom: var(--sec-pad);
padding-top: var(--sec-pad);
}
.blk--tint {
background: var(--sec-bg);
color: var(--sec-txt);
}
.blk--snow {
background: var(--snow);
}
.itemsSection {
order: 500;
padding-bottom: var(--sec-pad);
padding-top: var(--sec-pad);
}
.blk-hero {
padding: 0;
}
.hero {
align-items: flex-end;
color: #fff;
display: flex;
min-height: 520px;
overflow: hidden;
position: relative;
}
.hero--full {
min-height: calc(100vh - var(--banner-h, 0px));
min-height: calc(100svh - var(--banner-h, 0px));
}
.hero--normal {
min-height: 420px;
}
@media (min-width: 768px) {
.hero--normal {
min-height: 0;
aspect-ratio: 21 / 9;
}
}
.hero__media {
background: var(--snow);
inset: 0;
overflow: hidden;
position: absolute;
}
.hero__img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
transform-origin: 60% 40%;
width: 100%;
}
.js .hero-single .hero__img {
animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom {
from {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.hero__media.has-sp .hero__img--sp {
display: block;
}
.hero__media.has-sp .hero__img--pc {
display: none;
}
@media (min-width: 768px) {
.hero__media.has-sp .hero__img--sp {
display: none;
}
.hero__media.has-sp .hero__img--pc {
display: block;
}
}
.hero-single .hero__img--2,
.hero-single .hero__img--3 {
display: none;
}
.hero-slide .hero__img--1,
.hero-slide .hero__img--2,
.hero-slide .hero__img--3 {
animation: heroFade 18s infinite;
opacity: 0;
}
.hero-slide .hero__img--1 {
animation-delay: 0s;
}
.hero-slide .hero__img--2 {
animation-delay: 6s;
}
.hero-slide .hero__img--3 {
animation-delay: 12s;
}
@keyframes heroFade {
0%,
28% {
opacity: 1;
}
33%,
95% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-slide .hero__img--1,
.hero-slide .hero__img--2,
.hero-slide .hero__img--3 {
animation: none;
opacity: 0;
}
.hero-slide .hero__img--1 {
opacity: 1;
}
}
.hero::after {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 60%);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.hero__body {
padding-bottom: 64px;
padding-top: calc(var(--hd-h) + 48px);
position: relative;
z-index: 2;
}
.hero__title {
font-size: clamp(25px, 7.2vw, 64px);
letter-spacing: 0.04em;
line-break: strict;
line-height: 1.3;
max-width: 16em;
overflow-wrap: anywhere;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}
.hero__title .is-en {
font-family: var(--disp);
font-style: italic;
letter-spacing: 0;
}
.hero__sub {
font-size: 15px;
color: rgba(255, 255, 255, 0.92);
margin: 18px 0 0;
max-width: 34em;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.hero__hint {
background: rgba(255, 255, 255, 0.5);
bottom: 18px;
height: 44px;
left: 50%;
overflow: hidden;
position: absolute;
width: 1px;
z-index: 2;
}
.hero__hint::after {
animation: heroDrop 1.8s var(--ease) infinite;
background: #fff;
content: "";
height: 50%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@keyframes heroDrop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(200%);
}
}
@media (min-width: 768px) {
.hero__body {
padding-bottom: 80px;
}
}
.blk-ticker {
border-bottom: 1px solid var(--line);
border-top: 1px solid var(--line);
color: var(--ink-2);
font-size: 12.5px;
letter-spacing: 0.14em;
overflow: hidden;
padding-bottom: 12px;
padding-top: 12px;
white-space: nowrap;
}
.ticker__track {
display: inline-block;
padding-left: 20px;
}
.ticker__track.is-ready {
animation: tickerSlide 40s linear infinite;
padding-left: 0;
}
.ticker__track span {
display: inline-block;
margin: 0 28px;
}
.ticker__track.is-ready span::before {
color: var(--accent);
content: "\25E6";
margin-right: 28px;
}
@keyframes tickerSlide {
to {
transform: translateX(-50%);
}
}
.blk-ticker:hover .ticker__track {
animation-play-state: paused;
}
.season {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
.season__title {
font-size: 26px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.season__title .en {
color: var(--accent);
display: block;
font-size: 17px;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.season__body {
margin-top: 16px;
max-width: 34em;
opacity: 0.85;
}
.season__link {
margin-top: 22px;
}
.season__pic {
background: rgba(0, 0, 0, 0.04);
border-radius: var(--radius);
overflow: hidden;
}
.season__pic img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.timeline {
margin-top: 28px;
}
.timeline__bar {
background: rgba(0, 0, 0, 0.1);
height: 2px;
position: relative;
}
.timeline__fill {
background: var(--accent);
bottom: 0;
left: 0;
max-width: 0;
position: absolute;
top: 0;
transition: max-width 1.6s var(--ease) 0.3s;
}
.timeline.in .timeline__fill,
html:not(.js) .timeline__fill {
max-width: 100%;
}
.timeline__dot {
background: var(--accent);
border-radius: 50%;
height: 12px;
position: absolute;
top: -5px;
transform: translateX(-50%);
width: 12px;
}
.timeline__tick {
display: flex;
font-size: 12px;
justify-content: space-between;
letter-spacing: 0.06em;
margin-top: 10px;
opacity: 0.8;
}
.timeline__now {
color: var(--accent);
font-weight: 500;
}
@media (min-width: 768px) {
.season {
gap: 72px;
grid-template-columns: 1fr 1fr;
}
.season__title {
font-size: 30px;
}
}
.scenesNav {
display: none;
gap: 10px;
}
.scenesNav button {
background: #fff;
border: 1px solid var(--line);
border-radius: 50%;
cursor: pointer;
font-size: 16px;
height: 44px;
transition: border-color 0.3s;
width: 44px;
}
.scenesNav button:hover {
border-color: var(--ink);
}
@media (min-width: 768px) {
.scenesNav {
display: flex;
}
}
.scenesWrap {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: auto;
padding-left: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
padding-right: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
scroll-padding-left: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
scroll-padding-right: max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter)));
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.scenesWrap::-webkit-scrollbar {
display: none;
}
.scenes {
display: flex;
gap: 20px;
padding-bottom: 6px;
width: max-content;
}
.scene {
display: block;
scroll-snap-align: start;
width: 230px;
}
.scene__pic {
background: var(--snow);
border-radius: var(--radius);
overflow: hidden;
}
.scene__pic img {
aspect-ratio: 3 / 4;
object-fit: cover;
transition: transform 1s var(--ease);
width: 100%;
}
.scene:hover .scene__pic img {
transform: scale(1.06);
}
.scene__title {
font-size: 18px;
margin-top: 14px;
}
.scene__sub {
color: var(--ink-3);
font-size: 13px;
margin: 2px 0 0;
}
@media (min-width: 768px) {
.scene {
width: 300px;
}
}
.pickupList {
display: grid;
gap: 24px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.pickupList {
gap: 24px;
grid-template-columns: repeat(3, 1fr);
}
}
.pickup__img {
aspect-ratio: 3 / 2;
background: var(--snow);
border-radius: var(--radius);
display: block;
overflow: hidden;
}
.pickup__img img {
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
width: 100%;
}
.pickup a:hover .pickup__img img {
transform: scale(1.04);
}
.pickup__title {
display: block;
font-family: var(--font-head);
font-size: 16px;
letter-spacing: 0.04em;
margin-top: 14px;
overflow-wrap: anywhere;
}
.catList {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.catList ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.catList li {
display: contents;
}
.catList a {
border: 1px solid var(--line);
border-radius: 999px;
display: inline-block;
font-size: 13px;
letter-spacing: 0.08em;
padding: 9px 20px;
transition: border-color 0.3s;
}
.catList a:hover {
border-color: var(--ink);
}
.specIntro {
align-items: start;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
.specIntro__title {
font-size: 24px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.specIntro__title .en {
color: var(--accent);
display: block;
font-size: 16px;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.specIntro__body {
color: var(--ink-2);
margin-top: 16px;
max-width: 28em;
}
@media (min-width: 768px) {
.specIntro {
gap: 80px;
grid-template-columns: 5fr 7fr;
}
.specIntro__title {
font-size: 30px;
}
}
.feature {
align-items: center;
display: grid;
gap: 32px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.feature {
gap: 80px;
grid-template-columns: 1fr 1fr;
}
.feature--rev .feature__media {
order: 2;
}
}
.feature__media {
border-radius: var(--radius);
overflow: hidden;
}
.feature__media img {
width: 100%;
}
.feature__title {
font-size: 24px;
letter-spacing: 0.04em;
line-height: 1.6;
margin-bottom: 18px;
overflow-wrap: anywhere;
}
.feature__title .en {
color: var(--accent);
display: block;
font-size: 16px;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.feature__body {
opacity: 0.85;
}
.feature__link {
margin-top: 22px;
}
@media (min-width: 768px) {
.feature__title {
font-size: 30px;
}
}
.maker {
align-items: center;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
.maker__pics {
aspect-ratio: 1;
position: relative;
}
.maker__p1,
.maker__p2 {
overflow: hidden;
position: absolute;
}
.maker__p1 {
left: 0;
top: 0;
width: 68%;
}
.maker__p2 {
bottom: 0;
right: 0;
width: 46%;
}
.maker__p1 img,
.maker__p2 img {
border-radius: var(--radius);
object-fit: cover;
width: 100%;
}
.maker__p1 img {
aspect-ratio: 3 / 4;
}
.maker__p2 img {
aspect-ratio: 4 / 5;
}
.maker__pics--single {
aspect-ratio: auto;
}
.maker__pics--single .maker__p1 {
position: static;
width: 100%;
}
.maker__title {
font-size: 26px;
line-height: 1.6;
overflow-wrap: anywhere;
}
.maker__body {
color: var(--ink-2);
margin-top: 18px;
}
.maker__sign {
color: var(--ink-3);
font-size: 18px;
margin-top: 22px;
}
.maker__link {
margin-top: 22px;
}
@media (min-width: 768px) {
.maker {
gap: 80px;
grid-template-columns: 1fr 1fr;
}
.maker__title {
font-size: 30px;
}
}
.colList {
counter-reset: colnum;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.colList {
gap: 48px;
grid-template-columns: repeat(3, 1fr);
}
}
.col {
counter-increment: colnum;
}
.col__icon {
height: 56px;
margin-bottom: 16px;
object-fit: contain;
width: auto;
}
.col__num {
color: var(--accent);
display: block;
font-family: var(--disp);
font-size: 18px;
font-style: italic;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.col__num::before {
content: "0" counter(colnum);
}
.col__title {
font-size: 18px;
letter-spacing: 0.04em;
margin-bottom: 10px;
overflow-wrap: anywhere;
}
.col__body {
color: var(--ink-2);
font-size: 14px;
}
.voice__body {
font-size: 14px;
}
.voice__body::before {
color: var(--accent);
content: "\201C";
display: block;
font-family: var(--disp);
font-size: 40px;
line-height: 0.6;
margin-bottom: 14px;
}
.voice__name {
color: var(--ink-3);
font-size: 12px;
letter-spacing: 0.1em;
margin-top: 14px;
}
.info {
margin: 0 auto;
max-width: 640px;
}
.info__title {
font-size: 20px;
margin-bottom: 12px;
}
.info__body {
color: var(--ink-2);
font-size: 14px;
}
.info__link {
margin-top: 18px;
}
.calWrap {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.calWrap {
align-items: center;
gap: 72px;
grid-template-columns: 1fr 1fr;
}
}
.calMonth {
font-family: var(--disp);
font-size: 20px;
font-style: italic;
letter-spacing: 0.1em;
margin-bottom: 10px;
}
.calGrid {
display: grid;
gap: 2px;
grid-template-columns: repeat(7, 1fr);
max-width: 420px;
}
.calGrid div {
align-items: center;
aspect-ratio: 1 / 1;
border-radius: 50%;
display: flex;
font-size: 13px;
justify-content: center;
justify-self: center;
max-width: 40px;
width: 100%;
}
.calGrid .calHead {
aspect-ratio: auto;
border-radius: 0;
color: var(--ink-3);
font-size: 11px;
letter-spacing: 0.08em;
max-width: none;
padding: 6px 0;
}
.calGrid .is-closed {
background: var(--accent);
color: var(--accent-txt);
}
.calLegend {
color: var(--ink-3);
font-size: 12px;
margin-top: 14px;
}
.calLegend b {
background: var(--accent);
border-radius: 50%;
color: var(--accent-txt);
display: inline-block;
font-weight: normal;
height: 12px;
margin-right: 8px;
vertical-align: middle;
width: 12px;
}
.calNote {
color: var(--ink-2);
font-size: 14px;
margin-top: 16px;
}
.calTitle {
font-size: 24px;
line-height: 1.6;
}
.calTitle .en {
color: var(--accent);
display: block;
font-size: 16px;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
@media (min-width: 768px) {
.calTitle {
font-size: 30px;
}
}
.blogPinned {
border-bottom: 1px solid var(--line);
border-top: 1px solid var(--line);
display: block;
font-family: var(--font-head);
font-size: 17px;
margin-bottom: 28px;
padding: 22px 0;
}
.blogPinned .en {
color: var(--accent);
display: block;
font-size: 14px;
letter-spacing: 0.1em;
margin-bottom: 4px;
}
.blk-blog.has-list .blogPinned {
display: none;
}
.blogMore {
margin: 0;
text-align: center;
}
.blogList {
display: grid;
gap: 16px 12px;
grid-template-columns: repeat(2, 1fr);
margin: 0 0 36px;
padding: 0;
}
@media (min-width: 768px) {
.blogList {
gap: 28px 24px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 48px;
}
}
.blogCard {
display: flex;
min-width: 0;
}
.blogCard__link {
display: flex;
flex-direction: column;
width: 100%;
}
.blogCard__pic {
aspect-ratio: 4 / 3;
background: var(--snow);
border-radius: var(--radius);
display: block;
overflow: hidden;
}
.blogCard__pic img {
display: block;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
width: 100%;
}
.blogCard__link:hover .blogCard__pic img {
transform: scale(1.05);
}
.blogCard__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 6px;
padding-top: 12px;
}
.blogCard__date {
color: var(--ink-3);
font-family: var(--disp);
font-size: 13px;
font-style: italic;
letter-spacing: 0.1em;
}
.blogCard__title {
-webkit-box-orient: vertical;
display: -webkit-box;
font-family: var(--font-head);
font-size: 15px;
-webkit-line-clamp: 2;
line-height: 1.7;
margin: 0;
overflow: hidden;
overflow-wrap: anywhere;
}
.blogCard__excerpt {
-webkit-box-orient: vertical;
color: var(--ink-2);
display: none;
font-size: 13px;
-webkit-line-clamp: 2;
line-height: 1.85;
margin: 0;
overflow: hidden;
overflow-wrap: anywhere;
}
@media (min-width: 768px) {
.blogCard__title {
font-size: 17px;
}
.blogCard__excerpt {
display: -webkit-box;
}
}
.blogCard--text .blogCard__link {
background: var(--snow);
border-radius: var(--radius);
justify-content: space-between;
min-height: 168px;
padding: 16px 14px;
}
.blogCard--text .blogCard__body {
padding-top: 0;
}
.blogCard--text .blogCard__title {
font-size: 16px;
-webkit-line-clamp: 4;
line-height: 1.7;
}
.blogCard--text .blogCard__excerpt {
-webkit-line-clamp: 3;
}
.blogCard__more {
border-bottom: 1px solid currentColor;
color: var(--ink-2);
font-size: 12px;
letter-spacing: 0.1em;
margin-top: 14px;
align-self: flex-start;
}
.blogCard:not(.blogCard--text) .blogCard__more {
display: none;
}
@media (min-width: 768px) {
.blogCard--text .blogCard__link {
min-height: 240px;
padding: 26px 24px;
}
.blogCard--text .blogCard__title {
font-size: 21px;
-webkit-line-clamp: 5;
}
.blogCard--text .blogCard__excerpt {
-webkit-line-clamp: 4;
}
}
.blogCard__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.instaGrid {
display: grid;
gap: 4px;
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 768px) {
.instaGrid {
grid-template-columns: repeat(6, 1fr);
}
}
.instaGrid span {
aspect-ratio: 1 / 1;
background: var(--snow);
display: block;
overflow: hidden;
}
.instaGrid img {
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease);
width: 100%;
}
.instaGrid span:hover img {
transform: scale(1.05);
}
.instaLink {
margin-top: 28px;
text-align: center;
}
.mailmag {
margin: 0 auto;
max-width: 560px;
text-align: center;
}
.mailmag__title {
font-size: 24px;
}
.mailmag__title .en {
color: var(--accent);
display: block;
font-size: 15px;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.mailmag__body {
margin: 14px 0 24px;
opacity: 0.85;
}
.mailmag form {
max-width: 100%;
}
.mailmag .mailMagazineSubscribe_field {
border-bottom: 1px solid currentColor;
display: flex;
margin: 0 auto;
max-width: 420px;
}
.mailmag input[type="email"],
.mailmag input[type="text"] {
background: transparent;
border: 0;
flex: 1;
font-size: 16px;
min-width: 0;
padding: 12px 0;
width: 100%;
}
.mailmag button,
.mailmag input[type="submit"] {
background: none;
border: 0;
cursor: pointer;
font-size: 13px;
letter-spacing: 0.12em;
padding: 0 0 0 12px;
white-space: nowrap;
}
.mailmag .mailMagazineSubscribe_confirm {
font-size: 14px;
margin-top: 16px;
white-space: pre-line;
}
.itemList {
display: grid;
gap: 36px 16px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.itemList {
gap: 56px 24px;
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1000px) {
.itemList {
grid-template-columns: repeat(4, 1fr);
}
}
.favBtn,
.hdFav {
display: none;
}
.has-fav .favBtn {
display: flex;
}
.has-fav .hdFav,
.has-seen .hdFav {
display: flex;
}
.has-fav .hdFav--pc,
.has-seen .hdFav--pc {
display: none;
}
@media (min-width: 1180px) {
.has-fav .hdFav--pc,
.has-seen .hdFav--pc {
display: flex;
}
}
.heart {
fill: none;
height: 18px;
stroke: currentColor;
stroke-width: 1.6;
transition: fill 0.25s, stroke 0.25s;
width: 18px;
}
.hdFav {
align-items: center;
background: none;
border: 0;
color: inherit;
cursor: pointer;
height: 40px;
justify-content: center;
padding: 0;
position: relative;
width: 36px;
}
.hdFav .heart {
height: 21px;
width: 21px;
}
.favCount {
background: var(--accent);
border-radius: 999px;
color: var(--accent-txt);
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
line-height: 16px;
min-width: 16px;
padding: 0 4px;
position: absolute;
right: -2px;
text-align: center;
top: 3px;
}
.favCount[hidden] {
display: none;
}
.card {
position: relative;
}
.favBtn {
align-items: center;
background: rgba(255, 255, 255, 0.92);
border: 0;
border-radius: 50%;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
color: var(--ink);
cursor: pointer;
height: 36px;
justify-content: center;
padding: 0;
position: absolute;
right: 8px;
top: 8px;
width: 36px;
z-index: 3;
}
.favBtn[aria-pressed="true"] .heart {
fill: var(--warn);
stroke: var(--warn);
}
.favBtn.is-pop .heart {
animation: favPop 0.45s var(--ease);
}
@keyframes favPop {
0% {
transform: scale(1);
}
40% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.has-fav .favBtn--item {
display: inline-flex;
}
.favBtn--item {
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
box-shadow: none;
font-size: 13px;
gap: 8px;
height: auto;
letter-spacing: 0.06em;
margin: 14px 0 0;
padding: 8px 16px;
position: static;
width: auto;
}
.favSec + .favSec {
margin-top: 36px;
}
.favSec[hidden],
.favEmpty[hidden],
.blk-fav[hidden],
.blk-seen[hidden] {
display: none;
}
.favSec__title {
font-size: 18px;
margin: 0 0 8px;
}
.favSec__title .en {
color: var(--ink-3);
font-family: var(--disp);
font-size: 13px;
font-style: italic;
margin-left: 10px;
white-space: nowrap;
}
.favList {
margin: 0;
padding: 0;
}
.favItem {
align-items: center;
border-bottom: 1px solid var(--line);
display: flex;
gap: 12px;
padding: 12px 0;
}
.favItem__link {
align-items: center;
display: flex;
flex: 1;
gap: 12px;
min-width: 0;
}
.favItem__link img {
aspect-ratio: 1 / 1;
background: var(--snow);
border-radius: var(--radius);
flex: none;
object-fit: cover;
width: 64px;
}
.favItem__name {
display: block;
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.favItem__price {
color: var(--ink-2);
display: block;
font-size: 13px;
margin-top: 2px;
}
.favItem__remove {
background: none;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
flex: none;
font-size: 12px;
padding: 6px 12px;
}
.favEmpty {
color: var(--ink-3);
font-size: 13px;
margin: 8px 0 0;
}
.itemActions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.itemActions .favBtn--item {
margin: 0;
}
.itemActions:not(:has(> *:not([hidden]))) {
display: none;
}
.share {
position: relative;
}
.shareBtn {
align-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink);
cursor: pointer;
display: inline-flex;
font-size: 13px;
gap: 8px;
letter-spacing: 0.06em;
padding: 8px 16px;
}
.shareIcon,
.toTop svg {
fill: none;
height: 16px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.6;
width: 16px;
}
.shareMenu {
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
left: 0;
min-width: 180px;
padding: 6px;
position: absolute;
top: calc(100% + 6px);
z-index: 20;
}
.shareMenu[hidden] {
display: none;
}
.shareMenu__item {
background: none;
border: 0;
border-radius: 6px;
color: var(--ink);
cursor: pointer;
display: block;
font-size: 14px;
padding: 10px 12px;
text-align: left;
width: 100%;
}
.shareMenu__item:hover {
background: var(--snow);
}
.shareStatus {
color: var(--ink-2);
font-size: 12px;
margin-left: 4px;
}
.shipEta {
background: var(--snow);
border-radius: var(--radius);
font-size: 14px;
line-height: 1.7;
margin: 14px 0 0;
padding: 12px 14px;
}
.shipEta[hidden] {
display: none;
}
.shipEta b {
font-weight: 500;
}
.shipEta small {
color: var(--ink-3);
display: block;
font-size: 12px;
}
.gallery[data-zoom] .gallery__main {
cursor: zoom-in;
}
.zoom {
align-items: center;
background: rgba(12, 10, 8, 0.94);
display: flex;
inset: 0;
justify-content: center;
position: fixed;
z-index: 80;
}
.zoom[hidden] {
display: none;
}
.zoom__img {
max-height: 88vh;
max-width: 92vw;
object-fit: contain;
touch-action: pan-y;
user-select: none;
}
.zoom__btn {
align-items: center;
background: rgba(255, 255, 255, 0.12);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
display: flex;
font-size: 22px;
height: 44px;
justify-content: center;
line-height: 1;
position: absolute;
width: 44px;
}
.zoom__btn:hover {
background: rgba(255, 255, 255, 0.24);
}
.zoom__close {
right: 14px;
top: 14px;
}
.zoom__prev {
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.zoom__next {
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.zoom__count {
bottom: 16px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
left: 0;
letter-spacing: 0.1em;
margin: 0;
position: absolute;
right: 0;
text-align: center;
}
.zoom__btn:focus-visible,
.shareBtn:focus-visible,
.shareMenu__item:focus-visible,
.favBtn:focus-visible,
.hdFav:focus-visible,
.toTop:focus-visible,
.gallery__main:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.zoom__btn:focus-visible {
outline-color: #fff;
}
body.zoom-open {
overflow: hidden;
}
.toTop {
align-items: center;
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--line);
border-radius: 50%;
bottom: 88px;
color: var(--ink-2);
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
opacity: 0;
padding: 0;
position: fixed;
right: 14px;
transition: opacity 0.3s, visibility 0s linear 0.3s;
visibility: hidden;
width: 40px;
z-index: 40;
}
.toTop.is-on {
opacity: 1;
transition: opacity 0.3s;
visibility: visible;
}
.listTools {
border-bottom: 1px solid var(--line);
margin: 0 0 28px;
padding: 0 0 16px;
}
.listTools[hidden],
.listEmpty[hidden],
.itemList > [hidden] {
display: none;
}
.listTools__row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
justify-content: space-between;
}
.listTools__sort {
align-items: center;
display: flex;
font-size: 13px;
gap: 10px;
}
.listTools__sort span {
color: var(--ink-3);
letter-spacing: 0.08em;
}
.listTools__sort select {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
padding: 6px 10px;
}
.listTools__stock {
align-items: center;
cursor: pointer;
display: flex;
font-size: 13px;
gap: 6px;
}
.listTools__stock input {
accent-color: var(--accent);
height: 16px;
width: 16px;
}
.listTools__bands {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.bandChip {
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-2);
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
padding: 6px 14px;
}
.bandChip[aria-pressed="true"] {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-txt);
}
.bandChip:focus-visible,
.listTools__sort select:focus-visible,
.listTools__stock input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.listTools__status {
color: var(--ink-3);
font-size: 12px;
margin: 10px 0 0;
min-height: 1em;
}
.listTools__status:empty {
display: none;
}
.listEmpty {
padding: 32px 0;
text-align: center;
}
.listEmpty p {
color: var(--ink-2);
margin: 0 0 16px;
}
.catTiles {
display: grid;
gap: 12px;
grid-template-columns: repeat(2, 1fr);
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.catTiles {
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
}
.catTiles:not(:has(li)) {
display: none;
}
.blk-category:has(.catTile) .catList {
display: none;
}
.catTile {
border-radius: var(--radius);
color: #fff;
display: block;
overflow: hidden;
position: relative;
}
.catTile__pic {
background: var(--snow);
display: block;
}
.catTile__pic img {
aspect-ratio: 4 / 5;
display: block;
object-fit: cover;
transition: transform 1.2s var(--ease);
width: 100%;
}
.catTile:hover .catTile__pic img {
transform: scale(1.06);
}
.catTile::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
content: "";
inset: 0;
position: absolute;
}
.catTile__name {
bottom: 14px;
font-family: var(--font-head);
font-size: 17px;
left: 14px;
letter-spacing: 0.08em;
line-height: 1.4;
position: absolute;
right: 14px;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
z-index: 1;
}
@media (min-width: 768px) {
.catTile__name {
bottom: 20px;
font-size: 21px;
left: 20px;
}
}
.catTile:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.ico {
fill: none;
flex: none;
height: 16px;
opacity: 0.65;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.4;
width: 16px;
}
.ft__nav a,
.drawer__sub a,
.drawer__ja {
align-items: center;
display: inline-flex;
gap: 8px;
}
.drawer__ja {
gap: 10px;
}
.card__link {
display: block;
}
.card__pic {
background: var(--snow);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.ratio-square .card__pic {
aspect-ratio: 1 / 1;
}
.ratio-portrait .card__pic {
aspect-ratio: 4 / 5;
}
.ratio-landscape .card__pic {
aspect-ratio: 4 / 3;
}
.card__img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
transition: transform 1.2s var(--ease);
width: 100%;
}
.card__link:hover .card__img {
transform: scale(1.05);
}
.card__mark {
left: 10px;
position: absolute;
right: 10px;
top: 10px;
z-index: 2;
}
.card__quick {
backdrop-filter: blur(6px);
background: rgba(255, 255, 255, 0.92);
border-radius: 999px;
bottom: 12px;
color: var(--ink);
display: none;
font-size: 12px;
left: 12px;
letter-spacing: 0.1em;
line-height: 40px;
opacity: 0;
position: absolute;
right: 12px;
text-align: center;
transform: translateY(16px);
transition: transform 0.5s var(--ease), opacity 0.4s;
}
@media (hover: hover) and (min-width: 768px) {
.card__quick {
display: block;
}
.card__link:hover .card__quick {
opacity: 1;
transform: none;
}
}
.card__title {
font-size: 15px;
letter-spacing: 0.02em;
line-height: 1.7;
margin-top: 14px;
overflow-wrap: anywhere;
}
.card__meta {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
justify-content: space-between;
margin-top: 4px;
}
.card__price {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 2px 10px;
margin: 0;
}
.price {
font-family: var(--disp);
font-size: 19px;
font-weight: 500;
letter-spacing: 0.02em;
overflow-wrap: anywhere;
}
.price--proper {
color: var(--ink-3);
font-family: var(--font-body);
font-size: 12px;
text-decoration: line-through;
}
.price--sale,
.price__rate {
color: var(--warn);
}
.price__rate {
font-size: 12px;
}
.price__label {
color: var(--ink-3);
font-size: 11px;
letter-spacing: 0.1em;
}
.card__status {
color: var(--ink-3);
font-size: 11px;
letter-spacing: 0.18em;
}
.card__tag {
color: var(--accent);
font-size: 11px;
letter-spacing: 0.1em;
}
.stockLow {
color: var(--warn);
font-size: 12px;
letter-spacing: 0.08em;
}
.stockLow:empty {
display: none;
}
.more {
margin-top: 48px;
text-align: center;
}
.emptyItems {
color: var(--ink-3);
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
}
.emptyItems a {
border-bottom: 1px solid currentColor;
}
.itemCrumb {
padding-top: 24px;
}
.itemPage {
align-items: start;
display: grid;
gap: 32px;
grid-template-columns: 1fr;
padding-bottom: var(--sec-pad);
padding-top: 24px;
}
@media (min-width: 900px) {
.itemPage {
gap: 72px;
grid-template-columns: 7fr 5fr;
padding-top: 32px;
}
}
.gallery {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
.gallery__main {
background: var(--snow);
border-radius: var(--radius);
overflow: hidden;
position: relative;
}
.gallery__main img {
display: block;
transition: opacity 0.3s;
width: 100%;
}
.gallery__main img.is-swapping {
opacity: 0.4;
}
.gallery__mark {
left: 14px;
position: absolute;
right: 14px;
top: 14px;
z-index: 2;
}
.thumbs {
display: grid;
gap: 8px;
grid-template-columns: repeat(6, 1fr);
}
.thumb {
background: var(--snow);
border: 0;
border-radius: var(--radius);
cursor: pointer;
opacity: 0.5;
overflow: hidden;
padding: 0;
transition: opacity 0.3s;
}
.thumb img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
.thumb.is-on,
.thumb:hover {
opacity: 1;
}
@media (min-width: 900px) {
.gallery {
grid-template-columns: 72px 1fr;
}
.gallery__main {
order: 2;
}
.gallery__main:only-child {
grid-column: 1 / -1;
}
.thumbs {
align-content: start;
grid-template-columns: 1fr;
}
}
.buy {
position: relative;
}
@media (min-width: 900px) {
.buy {
position: sticky;
top: calc(var(--hd-h) + 16px);
}
.hd--static ~ .wrap .buy {
top: 16px;
}
}
.buy__title {
font-size: 24px;
letter-spacing: 0.02em;
line-height: 1.5;
overflow-wrap: anywhere;
}
@media (min-width: 768px) {
.buy__title {
font-size: 30px;
}
}
.priceBox {
margin-top: 16px;
}
.priceBox .price {
font-size: 26px;
}
.priceBox .price--proper {
font-size: 14px;
}
.price__row {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
.statusTag {
display: inline-block;
font-size: 12px;
letter-spacing: 0.18em;
margin-top: 10px;
}
.statusTag--soldout {
color: var(--ink-3);
}
.statusTag--coming {
color: var(--accent);
}
.itemPage .stockLow {
display: block;
font-size: 13px;
margin-top: 8px;
}
#itemAttention {
color: var(--ink-3);
font-size: 12.5px;
line-height: 1.8;
margin: 16px 0;
}
#itemAttention p {
margin: 0 0 4px;
}
#itemAttention a {
border-bottom: 1px solid currentColor;
}
#itemAttention .preOrder__label,
#itemAttention .lottery__label,
#itemAttention .takeout__label,
#itemAttention .communityLabel__title {
color: var(--accent);
font-weight: 500;
}
.purchase {
margin-top: 20px;
}
.purchase label,
.purchase .itemOption__name {
color: var(--ink-3);
display: block;
font-size: 12px;
letter-spacing: 0.12em;
margin-bottom: 6px;
}
.purchase select,
.purchase input[type="text"],
.purchase input[type="number"],
.purchase textarea,
body #purchase_form select {
appearance: none;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
color: var(--ink);
display: block;
font-family: var(--font-body);
font-size: 16px;
height: auto;
line-height: 1.5;
margin-bottom: 16px;
min-height: 50px;
min-width: 0;
padding: 12px 40px 12px 14px;
transition: border-color 0.3s;
width: 100%;
}
.purchase input[type="text"],
.purchase input[type="number"],
.purchase textarea {
padding-right: 14px;
}
.purchase select:hover,
.purchase input[type="text"]:focus,
.purchase textarea:focus,
body #purchase_form select:hover {
border-color: var(--ink-3);
}
.purchase select,
body #purchase_form select,
html body #purchase_form #itemSelect #valiationSelect,
html body #purchase_form #itemSelect #amountSelect,
html body #purchase_form #itemSelect select.itemOption__select {
background-color: #fff;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
background-repeat: no-repeat;
background-size: 5px 5px, 5px 5px;
color: var(--ink);
font-family: var(--font-body);
height: auto;
line-height: 1.5;
min-height: 50px;
padding: 12px 40px 12px 14px;
white-space: normal;
}
.purchase .purchaseElement {
max-width: 100%;
}
.purchase .itemOptionElement {
margin-bottom: 8px;
}
.purchase .itemOption__caption {
color: var(--ink-3);
font-size: 12px;
margin-bottom: 6px;
}
.purchase .itemOption__bottomCaptionBlock {
align-items: baseline;
display: flex;
gap: 12px;
justify-content: space-between;
margin: -8px 0 12px;
}
.purchase .itemOption__count {
color: var(--ink-3);
font-size: 12px;
margin-left: auto;
white-space: nowrap;
}
.purchase .itemOption__count--error,
.purchase .itemOption__caption--error,
.purchase .ErrorMessages {
color: var(--warn);
font-size: 13px;
}
.purchase .itemOption__caption--error {
display: block;
}
.purchase .itemOption__caption--error::before {
content: "!";
border: 1px solid currentColor;
border-radius: 50%;
display: inline-grid;
font-size: 10px;
height: 15px;
line-height: 1;
margin-right: 6px;
place-items: center;
vertical-align: 1px;
width: 15px;
}
.purchase .itemOption__select[data-has-error="true"],
.purchase .itemOption__input[data-has-error="true"],
html body #purchase_form #itemSelect select.itemOption__select[data-has-error="true"] {
background-color: #FBF3F1;
border-color: var(--warn);
}
.purchase .purchaseButton__btn,
body #purchase_form .purchaseButton__btn,
.purchase button[type="submit"],
.purchase input[type="submit"],
.purchase .btn {
background: var(--accent);
border: 1px solid var(--accent);
border-radius: 999px;
box-shadow: none;
color: var(--accent-txt);
cursor: pointer;
display: block;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
height: auto;
letter-spacing: 0.12em;
line-height: 1.4;
margin-top: 6px;
min-height: 58px;
padding: 18px 24px;
text-align: center;
text-decoration: none;
text-shadow: none;
transition: background 0.3s, color 0.3s, opacity 0.3s, transform 0.4s var(--ease);
width: 100%;
}
.purchase .purchaseButton__btn:hover,
body #purchase_form .purchaseButton__btn:hover {
transform: translateY(-2px);
}
.purchase .purchaseButton__btn:disabled,
body #purchase_form .purchaseButton__btn:disabled,
body #purchase_form .purchaseButton__btn--disabled,
body #purchase_form .purchaseButton__btn--soldOut,
body #purchase_form .purchaseButton__btn--endOfSale,
body #purchase_form .purchaseButton__btn--comingSoonStay,
body #purchase_form .purchaseButton__btn--notApplying,
body#shopDetailPage #purchase_form .purchaseButton .purchaseButton__btn--disabled:hover {
background: var(--snow);
border-color: var(--line);
color: var(--ink-3);
cursor: default;
opacity: 1;
transform: none;
}
body #purchase_form .purchaseButton__btn--requestRestockMail,
body #purchase_form .purchaseButton__btn--comingSoon {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
body #purchase_form .purchaseButton__btn--requestRestockMail:hover,
body #purchase_form .purchaseButton__btn--comingSoon:hover {
background: var(--ink);
color: #fff;
}
.purchase .communityButton,
.purchase .buttonPayid {
margin-top: 6px;
}
.purchase .ageVerificationWarning {
border-left: 2px solid var(--warn);
color: var(--ink);
font-family: var(--font-head);
font-size: 28px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.5;
margin: 16px 0;
padding-left: 16px;
}
.purchase .ageVerificationWarning .si-attentionTriangle {
color: var(--warn);
margin-right: 6px;
}
.countdown {
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--accent);
font-size: 13px;
letter-spacing: 0.08em;
margin-top: 12px;
padding: 8px 18px;
text-align: center;
}
.countdown:empty {
display: none;
}
.subNote {
background: var(--sec-bg);
border-radius: var(--radius);
color: var(--sec-txt);
font-size: 13px;
margin-top: 16px;
padding: 14px 18px;
}
.gift {
border-top: 1px solid var(--line);
margin-top: 28px;
padding-top: 24px;
}
.gift__title {
font-size: 18px;
}
.gift__title .en {
color: var(--accent);
font-size: 15px;
margin-left: 8px;
}
.gift__note {
color: var(--ink-2);
font-size: 13px;
margin: 6px 0 0;
}
.steps {
display: grid;
gap: 8px;
margin-top: 16px;
}
.step {
align-items: center;
border: 1px solid var(--line);
border-radius: var(--radius);
display: grid;
gap: 12px;
grid-template-columns: 28px 1fr;
padding: 12px 14px;
transition: border-color 0.3s;
}
.step:hover {
border-color: var(--accent);
}
.step__num {
border: 1px solid var(--accent);
border-radius: 50%;
color: var(--accent);
display: grid;
font-family: var(--disp);
font-size: 15px;
font-weight: 500;
height: 28px;
place-items: center;
width: 28px;
}
.step__name {
font-size: 14px;
min-width: 0;
overflow-wrap: anywhere;
}
.step__sub {
color: var(--ink-3);
display: block;
font-size: 12px;
}
.reportRow {
margin-top: 24px;
}
.reportRow a {
color: var(--ink-3);
font-size: 12px;
}
.desc {
display: grid;
gap: 40px;
grid-template-columns: 1fr;
padding-bottom: var(--sec-pad);
}
@media (min-width: 900px) {
.desc {
gap: 72px;
grid-template-columns: 7fr 5fr;
}
}
.desc__title {
font-size: 22px;
margin-bottom: 20px;
}
.desc__title .en {
color: var(--ink-3);
font-size: 16px;
margin-left: 10px;
}
.itemDetail {
color: var(--ink-2);
line-height: 2;
overflow-wrap: anywhere;
}
.itemDetail a {
border-bottom: 1px solid currentColor;
}
.seasonNote {
background: var(--sec-bg);
border-left: 2px solid var(--accent);
color: var(--sec-txt);
font-size: 13.5px;
margin-top: 24px;
padding: 16px 20px;
}
.seasonNote .en {
color: var(--accent);
display: block;
font-size: 16px;
margin-bottom: 4px;
}
.giftNote {
background: var(--sec-bg);
border-radius: var(--radius);
color: var(--sec-txt);
font-size: 13px;
margin-top: 24px;
padding: 14px 18px;
}
.specTitle {
font-size: 22px;
margin: 0 0 20px;
}
.specTable {
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr;
margin: 0;
}
.specTable dt {
color: var(--ink-3);
font-size: 13px;
letter-spacing: 0.06em;
padding: 14px 0 0;
}
.specTable dd {
border-bottom: 1px solid var(--line);
font-size: 14px;
margin: 0;
overflow-wrap: anywhere;
padding: 4px 0 14px;
}
@media (min-width: 600px) {
.specTable {
grid-template-columns: 8em 1fr;
}
.specTable dt {
border-bottom: 1px solid var(--line);
padding: 16px 0;
}
.specTable dd {
padding: 16px 0;
}
}
.specTable .is-strong {
color: var(--ink);
}
.chipRow {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 2px 0;
}
.chip {
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--accent);
display: inline-block;
font-size: 12.5px;
letter-spacing: 0.06em;
line-height: 1.7;
padding: 2px 12px;
}
.tempBadge {
background: var(--ink-2);
border-radius: 999px;
color: #fff;
display: inline-block;
font-size: 12.5px;
letter-spacing: 0.08em;
line-height: 1.7;
padding: 3px 14px;
}
.tempBadge--cold {
background: var(--cold);
}
.tempBadge--frozen {
background: var(--frozen);
}
.digital {
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 13px;
margin-top: 24px;
overflow-wrap: anywhere;
padding: 14px 18px;
}
.digital .en {
color: var(--accent);
margin-right: 8px;
}
.itemTail {
display: flex;
flex-direction: column;
}
.itemTail > .desc {
order: 1;
}
.reviewArea {
order: 4;
padding-bottom: var(--sec-pad);
}
.reviewArea--after {
order: 2;
}
.relatedSection {
order: 3;
padding-bottom: var(--sec-pad);
}
@media (min-width: 1000px) {
.relatedSection .itemList {
grid-template-columns: repeat(3, 1fr);
}
}
.stickyCart {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.95);
border-top: 1px solid var(--line);
bottom: 0;
left: 0;
position: fixed;
right: 0;
transform: translateY(100%);
transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
visibility: hidden;
z-index: 30;
}
.stickyCart.is-on {
transform: none;
transition: transform 0.6s var(--ease);
visibility: visible;
}
.stickyCart__inner {
align-items: center;
display: flex;
gap: 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
padding-top: 10px;
}
.stickyCart__t {
display: none;
flex: 1;
min-width: 0;
}
.stickyCart__name {
display: block;
font-family: var(--font-head);
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stickyCart__price {
font-size: 20px;
white-space: nowrap;
}
.stickyCart .btn {
flex: 1;
min-height: 48px;
}
@media (min-width: 768px) {
.stickyCart__t {
display: block;
}
.stickyCart .btn {
flex: 0 0 auto;
padding-left: 36px;
padding-right: 36px;
}
}
body.has-stickyCart {
padding-bottom: 72px;
}
.aboutPage {
padding-bottom: var(--sec-pad);
}
.aboutPage__img {
border-radius: var(--radius);
margin-bottom: 40px;
overflow: hidden;
}
.aboutPage__img img {
aspect-ratio: 21 / 9;
object-fit: cover;
width: 100%;
}
.aboutLead {
color: var(--ink-2);
font-size: 17px;
margin: 0 0 32px;
}
.aboutBody {
color: var(--ink-2);
line-height: 2.1;
overflow-wrap: anywhere;
}
.aboutSec.blk {
padding-bottom: 0;
}
.aboutGuide,
.aboutFaq {
padding-top: var(--sec-pad);
}
.guideGrid {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.guideGrid {
gap: 18px;
grid-template-columns: repeat(2, 1fr);
}
}
.guideCard {
background: var(--snow);
border-radius: var(--radius);
padding: 20px 22px;
}
.guideCard[hidden] {
display: none;
}
.guideCard__title {
font-size: 16px;
margin: 0 0 8px;
}
.guideCard p {
color: var(--ink-2);
font-size: 14px;
line-height: 1.85;
margin: 0;
}
.guidePay__title {
font-size: 16px;
margin: 32px 0 12px;
}
.faqList {
border-top: 1px solid var(--line);
}
.aboutFaq:not(:has(details)) {
display: none;
}
.faqItem {
border-bottom: 1px solid var(--line);
}
.faqItem summary {
cursor: pointer;
display: flex;
font-family: var(--font-head);
font-size: 16px;
gap: 12px;
justify-content: space-between;
list-style: none;
padding: 18px 4px;
}
.faqItem summary::-webkit-details-marker {
display: none;
}
.faqItem summary::after {
content: "＋";
color: var(--ink-3);
flex: none;
transition: transform 0.3s var(--ease);
}
.faqItem[open] summary::after {
transform: rotate(45deg);
}
.faqItem summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.faqItem__a {
color: var(--ink-2);
font-size: 14px;
line-height: 1.9;
margin: 0;
padding: 0 4px 20px;
}
.aboutContact {
padding-bottom: var(--sec-pad);
padding-top: 48px;
text-align: center;
}
.shopInfo {
border-top: 1px solid var(--line);
display: grid;
gap: 0;
grid-template-columns: 1fr;
margin: 40px 0 0;
}
.shopInfo dt {
color: var(--ink-3);
font-size: 13px;
letter-spacing: 0.06em;
padding: 14px 0 0;
}
.shopInfo dd {
border-bottom: 1px solid var(--line);
margin: 0;
overflow-wrap: anywhere;
padding: 4px 0 14px;
}
@media (min-width: 600px) {
.shopInfo {
grid-template-columns: 8em 1fr;
}
.shopInfo dt {
border-bottom: 1px solid var(--line);
padding: 16px 0;
}
.shopInfo dd {
padding: 16px 0;
}
}
.shopMap {
aspect-ratio: 16 / 9;
border: 0;
border-radius: var(--radius);
margin-top: 24px;
width: 100%;
}
.richText h2,
.richText h3,
.richText h4 {
font-weight: 500;
line-height: 1.6;
margin: 1.8em 0 0.7em;
}
.richText h2 {
font-size: 22px;
}
.richText h3 {
font-size: 18px;
}
.richText h4 {
font-size: 16px;
}
.richText a {
border-bottom: 1px solid currentColor;
color: var(--accent);
}
.richText ul {
padding-left: 1.4em;
}
.richText ol {
padding-left: 1.6em;
}
.richText ul li {
list-style: disc;
}
.richText ol li {
list-style: decimal;
}
.richText img {
border-radius: var(--radius);
display: block;
margin: 1.5em 0;
}
.richText table {
border-collapse: collapse;
display: block;
max-width: 100%;
overflow-x: auto;
width: 100%;
}
.richText th,
.richText td {
border: 1px solid var(--line);
padding: 8px 12px;
text-align: left;
}
.richText hr {
border: 0;
border-top: 1px solid var(--line);
margin: 2em 0;
}
.richText blockquote {
border-left: 2px solid var(--accent);
color: var(--ink-2);
margin: 1.5em 0;
padding-left: 1.2em;
}
.pageContents {
overflow-wrap: anywhere;
}
.pageHead + .pageContents .main {
padding-top: 0;
}
.pageContents #privacy,
.pageContents #law,
.pageContents .main,
.pageContents .membership,
.pageContents .communityMain {
box-sizing: border-box;
margin: 0 auto;
max-width: 820px;
padding: 48px var(--gutter) var(--sec-pad);
width: 100%;
}
.pageContents .content {
max-width: 100%;
width: auto;
}
.pageContents .inquirySection {
margin: 0 auto;
max-width: 640px;
}
.pageContents .inquirySection h1 {
font-family: var(--disp);
font-size: 30px;
font-style: italic;
font-weight: 400;
letter-spacing: 0.06em;
margin: 0 0 8px;
}
.pageContents .inquirySection dl {
margin: 24px 0 0;
}
.pageContents .inquirySection dt {
color: var(--ink-2);
font-size: 13px;
letter-spacing: 0.06em;
margin: 22px 0 0;
}
.pageContents .inquirySection dt span {
color: var(--warn);
font-size: 11px;
margin-left: 4px;
}
.pageContents .inquirySection dd {
margin: 8px 0 0;
}
.pageContents .inquirySection dd.error:empty {
display: none;
}
.pageContents .inquirySection dd.error {
color: var(--warn);
font-size: 12px;
}
.pageContents .inquirySection input[type="text"],
.pageContents .inquirySection input[type="email"],
.pageContents .inquirySection input[type="tel"],
.pageContents .inquirySection textarea {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-sizing: border-box;
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
padding: 12px 14px;
width: 100%;
}
.pageContents .inquirySection textarea {
min-height: 180px;
}
.pageContents .inquirySection input:focus,
.pageContents .inquirySection textarea:focus {
border-color: var(--ink);
outline: none;
}
.pageContents .inquirySection .control-panel {
margin-top: 36px;
text-align: center;
}
.pageContents .inquirySection .control-panel input[type="submit"] {
background: var(--accent);
border: 0;
border-radius: 999px;
color: var(--accent-txt);
cursor: pointer;
font-family: var(--font-body);
font-size: 15px;
letter-spacing: 0.12em;
min-width: 240px;
padding: 16px 32px;
}
.pageContents #privacy h2,
.pageContents #law h2,
.pageContents .message,
.pageContents .communityTitle {
font-family: var(--font-head);
font-size: 26px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.4;
margin: 0 0 32px;
}
.pageContents #privacy h3,
.pageContents #law h3,
.pageContents #privacy dt {
color: var(--ink);
font-size: 15px;
font-weight: 500;
margin: 24px 0 6px;
}
.pageContents #privacy dd,
.pageContents #law dd {
color: var(--ink-2);
margin: 0;
}
.pageContents #privacy p,
.pageContents #law p {
color: var(--ink-2);
}
.pageContents #privacy a,
.pageContents #law a,
.pageContents .point-info-login-link {
border-bottom: 1px solid currentColor;
color: var(--accent);
}
.pageContents .telnumValid__txt {
font-size: 12px;
}
.pageContents .point-info-login {
font-weight: 400;
}
body .pageContents .main #about > .blog_inner {
border-bottom: 1px solid var(--line);
padding: 32px 0 72px;
position: relative;
}
body .pageContents .main #about.blogDetail > .blog_inner {
padding: 0 0 40px;
}
body .pageContents .main #about .blog_head_image {
margin-bottom: 20px;
}
body .pageContents .main #about .blog_head_image.hide {
display: none;
}
body .pageContents .main #about .blog_head_image img {
border-radius: var(--radius);
display: block;
height: auto;
max-height: 480px;
max-width: 100%;
object-fit: cover;
width: auto;
}
body .pageContents .main #about .blog_title h2,
body .pageContents .main #about .blog_title h1,
body .pageContents .main #about.blogListMain h2 {
font-family: var(--font-head);
font-size: 22px;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0 0 6px;
overflow-wrap: anywhere;
}
body .pageContents .main #about.blogDetail .blog_title h2 {
font-size: 28px;
}
body .pageContents .main #about .blog_publish,
body .pageContents .main #about .blog_publish .publish_date,
body .pageContents .main #about .publish_date {
color: var(--ink-3);
font-family: var(--disp);
font-size: 15px;
font-style: italic;
letter-spacing: 0.08em;
margin: 0 0 16px;
}
body .pageContents .main #about.blogListMain > .blog_inner .blog_contents {
color: var(--ink-2);
height: auto;
max-height: 7.6em;
overflow: hidden;
}
body .pageContents .main #about.blogListMain > .blog_inner .blog_contents .read_more {
background: none;
bottom: 24px;
left: 0;
padding: 0;
position: absolute;
width: auto;
}
body .pageContents .main #about.blogDetail > .blog_inner .blog_contents {
height: auto;
max-height: none;
overflow: visible;
}
body .pageContents .main #about .read_more a {
border-bottom: 1px solid currentColor;
color: var(--ink);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.1em;
text-decoration: none;
}
body .pageContents .main #about .blog_contents {
line-height: 2;
}
body .pageContents .main #about .blog_body p,
body .pageContents .main #about .blog_body li,
body .pageContents .main #about .blog_body span,
body .pageContents .main #about .blog_body div {
color: var(--ink-2) !important;
font-family: var(--font-body) !important;
}
body .pageContents .main #about .blog_body h1,
body .pageContents .main #about .blog_body h2,
body .pageContents .main #about .blog_body h3 {
color: var(--ink) !important;
font-family: var(--font-head) !important;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.6;
margin: 1.8em 0 0.7em;
}
body .pageContents .main #about .blog_body h1 {
font-size: 24px;
}
body .pageContents .main #about .blog_body h2 {
font-size: 22px;
}
body .pageContents .main #about .blog_body h3 {
font-size: 18px;
}
body .pageContents .main #about .blog_body b,
body .pageContents .main #about .blog_body strong {
font-weight: 700;
}
body .pageContents .main #about .blog_body i,
body .pageContents .main #about .blog_body em {
font-style: italic;
}
body .pageContents .main #about .blog_body a {
border-bottom: 1px solid currentColor;
color: var(--accent);
text-decoration: none;
}
body .pageContents .main #about .blog_body img {
border-radius: var(--radius);
height: auto;
margin: 1.2em 0;
max-width: 100%;
}
body .pageContents .main #about .blog_body iframe {
aspect-ratio: 16 / 9;
height: auto;
max-width: 100%;
width: 100%;
}
body .pageContents .main #about .blog_body ul {
padding-left: 1.4em;
}
body .pageContents .main #about .blog_body ul li {
list-style: disc;
}
body .pageContents .main #about .blog_body ol {
padding-left: 1.6em;
}
body .pageContents .main #about .blog_body ol li {
list-style: decimal;
}
body .pageContents .main #about .social {
margin: 40px 0 0;
text-align: center;
}
body .pageContents .main #about .social > ul {
display: inline-flex;
gap: 16px;
}
body .pageContents .main #about .social ul li {
float: none;
margin: 0;
}
body .pageContents ul.paginate {
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
}
body .pageContents .paginate li {
background: transparent;
border: 1px solid var(--line);
border-radius: 999px;
margin: 4px;
overflow: hidden;
}
body .pageContents .paginate li a {
color: var(--ink-2);
font-size: 13px;
min-width: 40px;
padding: 10px 14px;
text-align: center;
}
body .pageContents .paginate .current a,
body .pageContents .paginate li a:hover {
background: var(--accent);
color: var(--accent-txt);
}
.pageContents .main.communityData {
max-width: none;
padding: 0;
}
.pageContents .communityMain {
text-align: left;
width: 100%;
}
.pageContents .communityMain .communityTitle {
font-family: var(--font-head);
font-size: 26px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.5;
margin: 0;
overflow-wrap: anywhere;
text-align: center;
}
.pageContents .communityMain .communityContent {
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 32px;
padding: 24px 20px;
}
.pageContents .communityMain .communityOverview {
color: var(--ink-2);
flex: 1;
font-size: 14px;
line-height: 2;
min-width: 0;
overflow-wrap: anywhere;
width: auto;
}
.pageContents .communityMain .communityNav {
margin-left: 0;
width: auto;
}
@media (min-width: 768px) {
.pageContents .communityMain .communityTitle {
font-size: 30px;
}
.pageContents .communityMain .communityContent {
flex-direction: row;
gap: 40px;
padding: 32px;
}
.pageContents .communityMain .communityNav {
flex: 0 0 320px;
}
}
.pageContents .communityMain .communityPrice h3,
.purchase .communityPrice h3 {
color: var(--ink-3);
font-family: var(--font-body);
font-size: 12px;
font-weight: 400;
letter-spacing: 0.14em;
margin: 0;
}
.pageContents .communityMain .communityPrice p,
.purchase .communityPrice p {
font-family: var(--disp);
font-size: 30px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.3;
margin: 4px 0 16px;
}
.pageContents .communityMain .communityPrice p:empty,
.purchase .communityPrice p:empty,
.purchase .communityTitle:empty {
display: none;
}
.pageContents .communityMain .communityButton,
.purchase .buttonPayid {
align-items: center;
border-radius: 999px;
box-sizing: border-box;
cursor: pointer;
display: flex;
gap: 4px;
justify-content: center;
min-height: 52px;
padding: 12px 20px;
text-decoration: none;
transition: opacity 0.3s, transform 0.4s var(--ease);
width: 100%;
}
.purchase .buttonPayid {
background-color: #000435;
color: #fff;
margin: 16px 0 12px;
}
.pageContents .communityMain .communityButton:hover,
.purchase .buttonPayid:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.purchase .buttonPayid__icon {
display: block;
height: auto;
width: 88px;
}
.pageContents .communityMain .communityRegister p,
.pageContents .communityMain .communitySignin p,
.purchase .communityRegister p {
color: var(--ink-2);
font-size: 12px;
line-height: 1.8;
margin: 8px 0 0;
}
.pageContents .communityMain .communityTerm a,
.pageContents .communityMain .communityLink a,
.pageContents .communityMain .payidLogoutText a,
.pageContents .communityMain .openLeaveModal,
.purchase .communityTerms a,
.purchase .communityLinkMore a {
border-bottom: 1px solid currentColor;
color: var(--ink);
text-decoration: none;
}
.purchase .communityLinkMore {
font-size: 13px;
}
.pageContents .communityMain .communitySignin {
background: var(--snow);
border: 0;
border-radius: var(--radius);
margin-top: 20px;
padding: 18px;
}
.pageContents .communityMain .communitySignin p {
margin: 0 0 12px;
}
.pageContents .communityMain .communityItemHeader,
.pageContents .communityMain .communityUrlHeader {
border-bottom: 1px solid var(--line);
font-family: var(--font-head);
font-size: 20px;
font-weight: 400;
letter-spacing: 0.04em;
margin: 56px 0 20px;
padding-bottom: 12px;
}
.pageContents .communityMain #limitedItem,
.pageContents .communityMain #limitedUrl {
width: auto;
}
.pageContents .communityMain section.limited p {
color: var(--ink-2);
font-size: 14px;
margin: 0;
}
.pageContents .communityMain #productsLimitedUrl {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
margin-top: 20px;
}
@media (min-width: 768px) {
.pageContents .communityMain #productsLimitedUrl {
grid-template-columns: 1fr 1fr;
}
}
.pageContents .communityMain #productsLimitedUrl .urlBox,
.pageContents .communityMain #productsLimitedUrl .urlBox:nth-child(n) {
background: var(--snow);
border: 0;
border-radius: var(--radius);
margin: 0;
min-width: 0;
padding: 18px 20px;
width: auto;
}
.pageContents .communityMain #productsLimitedUrl .urlBox .url {
overflow-wrap: anywhere;
white-space: normal;
}
.pageContents .communityMain .communityItems {
display: grid;
gap: 32px 16px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
.pageContents .communityMain .communityItems {
grid-template-columns: repeat(3, 1fr);
}
}
.pageContents .communityMain .communityItems .communityItem,
.pageContents .communityMain .communityItems .communityItem:nth-child(n) {
margin: 0;
min-width: 0;
}
.pageContents .communityMain .communityItems .communityItem .communityImageContainer {
aspect-ratio: 1 / 1;
background: var(--snow);
border-radius: var(--radius);
height: auto;
overflow: hidden;
width: 100%;
}
.pageContents .communityMain .communityItems .communityItem .communityItemTitle {
font-family: var(--font-head);
margin: 12px 0 6px;
max-height: none;
overflow-wrap: anywhere;
width: auto;
}
.pageContents .communityMain .communityItems .communityItem .communityItemLabelBlock.community {
background: var(--accent);
border-radius: 999px;
color: var(--accent-txt);
font-weight: 500;
}
.pageContents .communityMain .communityItems .communityItem .communityItemPrice .discount {
background: var(--warn);
}
.pageContents .communityMain .communityOverlay,
.purchase .communityOverlay {
background: rgba(21, 21, 21, 0.45);
inset: 0;
position: fixed;
z-index: 20000;
}
.pageContents .communityMain .communityModal,
.purchase .communityModal {
background: #fff;
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
box-sizing: border-box;
left: 50%;
max-height: calc(100% - 32px);
max-width: 480px;
min-width: 0;
overflow-y: auto;
padding: 24px 24px 32px;
position: fixed;
text-align: left;
top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 32px);
z-index: 20001;
}
.pageContents .communityMain .communityModalHeader,
.purchase .communityModalHeader {
border-bottom: 1px solid var(--line);
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.06em;
margin: 0 0 20px;
padding: 0 32px 16px !important;
position: relative;
text-align: center;
}
.pageContents .communityMain .communityModalHeader .communityModalClose,
.purchase .communityModalClose {
cursor: pointer;
font-style: normal;
height: 32px;
position: absolute;
right: 0;
top: -4px;
width: 32px;
}
.pageContents .communityModalClose::before,
.purchase .communityModalClose::before {
content: "\00D7";
display: block;
font-family: var(--font-body);
font-size: 26px;
font-weight: 400;
line-height: 32px;
text-align: center;
}
.pageContents .communityMain .communityModalText,
.pageContents .communityMain .communityModalTextNotice,
.purchase .communityTextNotice {
color: var(--ink-2);
font-size: 13px;
}
.pageContents .communityMain .communityModalTable {
background: var(--snow);
border-radius: var(--radius);
margin-top: 16px;
padding: 12px 16px;
}
.pageContents .communityMain .communityModalTable__Title {
color: var(--ink-3);
font-size: 12px;
font-weight: 400;
margin: 8px 0 0;
}
.pageContents .communityMain .communityModalButton.communityButton__red,
.pageContents .communityMain .communityModalButton.communityButton__gray {
border: 1px solid var(--ink);
border-radius: 999px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.1em;
max-width: 280px;
padding: 14px 16px;
width: 100%;
}
.pageContents .communityMain .communityModalButton.communityButton__red {
background: var(--warn);
border-color: var(--warn);
color: #fff;
}
.pageContents .communityMain .communityModalButton.communityButton__gray {
background: transparent;
color: var(--ink);
}
.pageContents .communityMain .communityLogout,
.pageContents .communityMain .openLeaveModal {
font-size: 13px;
margin: 40px 0 0;
text-align: center;
}
.pageContents .main > #membership {
max-width: none;
padding: 0;
}
.pageContents .membership .draft {
min-height: 0;
}
.pageContents .membership .draft .content .message,
.pageContents .membership .draft .heading {
font-family: var(--font-head);
font-size: 24px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.5;
margin: 0 0 8px;
}
.pageContents .membership .draft .content .point-info-login {
font-weight: 400;
margin-top: 24px;
}
.pageContents .membership .draft .content .point-info-login-link {
border: 1px solid var(--ink);
border-radius: 999px;
color: var(--ink);
display: inline-block;
font-size: 14px;
letter-spacing: 0.1em;
padding: 13px 32px;
text-decoration: none;
transition: background 0.3s, color 0.3s;
}
.pageContents .membership .draft .content .point-info-login-link:hover {
background: var(--ink);
color: #fff;
}
.pageContents .membership .draft .content .definition-term {
font-size: 14px;
font-weight: 500;
}
.pageContents .membership .draft .content .definition-description {
background: var(--snow);
border-radius: var(--radius);
}
.pageContents .membership .draft .content .definition-description .point-amount {
font-family: var(--disp);
font-size: 28px;
font-weight: 500;
}
.pageContents .membership .draft .logout,
.pageContents .membership .draft .leave-wrapper .leave,
.pageContents .membership .draft .content .about-wrapper .about,
.pageContents .membership .draft .content .definition-description .point-history .link {
color: var(--ink-2);
font-family: var(--font-body);
font-weight: 400;
}
.pageContents .membership .flash-message,
.pageContents .membership .flash-message.success {
background: var(--sec-bg);
border-radius: var(--radius);
}
.pageContents .membership .flash-message .contents,
.pageContents .membership .flash-message.success .contents {
color: var(--sec-txt);
}
.pageContents .membership .flash-message.error {
background: #FBF3F1;
}
.pageContents .membership .flash-message.error .contents {
color: var(--warn);
}
.pageContents .membership .draft .leave-modal-wrapper .leave-overlay {
background: rgba(21, 21, 21, 0.45);
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal {
border-radius: var(--radius);
height: auto;
max-width: calc(100% - 32px);
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal-header {
font-family: var(--font-head);
font-weight: 500;
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal-subtext-wrapper {
background: var(--snow);
border-radius: var(--radius);
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal-button-wrapper .leave-modal-button {
border-radius: 999px;
font-weight: 500;
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal-button-wrapper .leave-modal-button.red {
background-color: var(--warn);
}
.pageContents .membership .draft .leave-modal-wrapper .leave-modal-button-wrapper .leave-modal-button.gray {
background-color: var(--ink-2);
}
.pageContents .membership .guide .content .heading,
.pageContents .membership .guide .about-point .heading-point,
.pageContents .membership .guide .reward-list .title,
.pageContents .membership .guide .register .heading,
.pageContents .membership .login .heading {
font-family: var(--font-head);
font-weight: 500;
letter-spacing: 0.04em;
}
.pageContents .membership .guide .content .heading,
.pageContents .membership .login .heading {
font-size: 26px;
font-weight: 400;
line-height: 1.5;
}
.pageContents .membership .guide .content .description > p,
.pageContents .membership .guide .about-point .description .description-details,
.pageContents .membership .guide .reward-list .description {
color: var(--ink-2);
line-height: 2;
}
.pageContents .membership .guide .img-wrapper .img,
.pageContents .membership .guide .reward-list .reward-card-list .reward-card .reward-image {
border-radius: var(--radius);
}
.pageContents .membership .guide .reward-list .bar {
background-color: var(--line);
}
.pageContents .membership .guide .reward-list .reward-card-list .reward-card .reward-detail-wrapper .title {
font-family: var(--font-head);
font-weight: 500;
}
.pageContents .membership .guide .register {
background-color: var(--sec-bg);
border-radius: var(--radius);
color: var(--sec-txt);
padding: 32px 20px;
}
.pageContents .membership .guide .register .description,
.pageContents .membership .guide .register .login,
.pageContents .membership .login .register-description {
font-weight: 400;
}
.pageContents .membership .guide .register .mail-magazine .mail-magazine-wrapper .label {
font-weight: 500;
}
.pageContents .membership .guide .register .link,
.pageContents .membership .guide .mypage-link .link,
.pageContents .membership .login .link {
background: var(--accent);
border-radius: 999px;
color: var(--accent-txt);
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.12em;
text-decoration: none;
transition: transform 0.4s var(--ease);
}
.pageContents .membership .guide .register .link:hover,
.pageContents .membership .guide .mypage-link .link:hover,
.pageContents .membership .login .link:hover {
transform: translateY(-2px);
}
.pageContents .membership .guide .register .description-link,
.pageContents .membership .guide .register .login-link,
.pageContents .membership .login .register-link {
color: inherit;
}
.pageContents #law .bnplTerm,
.pageContents #law .btTerm {
background: var(--snow);
border-radius: var(--radius);
margin: 10px 0 0;
padding: 14px 16px;
}
.pageContents #law .bnplTerm p,
.pageContents #law .btTerm p {
font-size: 14px;
margin: 0;
}
.pageContents #law .bnplTerm__title,
.pageContents #law .btTerm__title {
color: var(--ink);
font-weight: 500;
margin-bottom: 4px;
}
.pageContents #law .law__telnum {
flex-wrap: wrap;
gap: 8px;
}
.pageContents .telnumValid__txt {
background: var(--ink);
color: #fff;
font-size: 11px;
padding: 4px 8px;
}
.pageContents input[type="text"],
.pageContents input[type="email"],
.pageContents input[type="tel"],
.pageContents input[type="password"],
.pageContents textarea,
.pageContents select {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: 16px;
max-width: 100%;
padding: 11px 12px;
}
#itemAttention .postageOpen,
#itemAttention #postageOpenInternational {
border-bottom: 1px solid currentColor;
color: var(--ink-2);
cursor: pointer;
font-weight: 500;
margin: 0 0 0 4px;
text-decoration: none;
}
#itemAttention .postageOpen:hover {
color: var(--ink);
}
#itemAttention .free__text {
color: var(--accent);
font-weight: 500;
}
#itemAttention .salesPeriod {
color: var(--ink-2);
}
#itemAttention .salesPeriod--term,
#itemAttention .salesPeriod--willStart {
color: var(--accent);
font-size: 13px;
font-weight: 500;
}
.buy .comingSoon {
color: var(--accent);
font-size: 12px;
letter-spacing: 0.18em;
margin: 10px 0 0;
}
#itemAttention .preOrder,
#itemAttention .lottery,
#itemAttention .takeout,
#itemAttention .communityLabel {
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink-2);
font-size: 13px;
margin: 0 0 12px;
padding: 12px 16px;
}
#itemAttention .preOrder__label,
#itemAttention .lottery__label,
#itemAttention .takeout__label,
#itemAttention .communityLabel__title {
background: var(--accent);
border-radius: 999px;
color: var(--accent-txt);
display: inline-block;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.6;
margin: 0 0 6px;
padding: 2px 12px;
}
#itemAttention .preOrder p,
#itemAttention .lottery p,
#itemAttention .communityLabel p {
margin: 0;
}
#itemAttention .lottery__data--announce {
color: var(--ink-3);
}
#itemAttention .takeout__text--anker {
border-bottom: 1px solid currentColor;
cursor: pointer;
}
#itemAttention .membershipPoint {
background: var(--sec-bg);
border-radius: var(--radius);
color: var(--sec-txt);
margin: 0 0 12px;
padding: 12px 16px;
}
#itemAttention .membershipPoint__amountWrapper {
font-size: 13px;
font-weight: 500;
margin: 0;
}
#itemAttention .membershipPoint__amount {
font-family: var(--disp);
font-size: 24px;
font-weight: 500;
line-height: 1.2;
margin-right: 4px;
}
#itemAttention .membershipPoint__pointName {
margin-right: 2px;
}
#itemAttention .membershipPoint__attention {
color: inherit;
font-size: 12px;
margin: 2px 0 0;
opacity: 0.85;
}
#itemAttention .membershipPoint__attentionLink {
font-weight: 400;
padding-right: 2px;
text-decoration: none;
}
#itemAttention .shippingModal {
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.8;
max-width: calc(100% - 32px);
}
#itemAttention .shippingModal p {
margin: 0;
}
#itemAttention .shippingModal a {
border-bottom: 0;
}
#itemAttention .shippingModal .shippingInfo__title {
border-bottom-color: var(--line);
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.06em;
}
#itemAttention .shippingModal .shippingInfo__intro {
color: var(--ink-2);
}
#itemAttention .shippingModal .shippingInfo__intro b {
color: var(--ink);
font-weight: 500;
}
#itemAttention .shippingModal .shippingInfo__tabButton {
border-bottom-color: var(--line);
color: var(--ink-3);
font-family: var(--font-body);
letter-spacing: 0.08em;
}
#itemAttention .shippingModal .shippingInfo__tabButton.is_active {
border-bottom-color: var(--ink);
color: var(--ink);
font-weight: 500;
}
#itemAttention .shippingModal .shippingList {
border-bottom-color: var(--line);
}
#itemAttention .shippingModal .shippingList__title {
font-family: var(--font-head);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
}
#itemAttention .shippingModal .shippingList__description {
color: var(--ink-2);
font-size: 13px;
}
#itemAttention .shippingModal .shippingList__info .price {
color: var(--ink);
font-family: var(--font-body);
font-size: 15px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.02em;
}
#itemAttention .cot-shipping-methodArea,
#itemAttention .cot-shipping-sizeContainer {
border-bottom-color: var(--line);
}
#itemAttention .cot-shipping-methodAreaName,
#itemAttention .cot-shipping-methodAreaAmount,
#itemAttention .cot-shipping-methodInfoAmount,
#itemAttention .cot-shipping-methodInfoToggle,
#itemAttention .cot-shipping-accordionLabel,
#itemAttention .cot-shipping-sizeHeadName,
#itemAttention .cot-shipping-methodAreaPrefectureAmount,
#itemAttention .cot-shipping-methodAreaCountryAmount {
font-weight: 500;
}
#itemAttention .cot-shipping-methodInfoToggle {
font-size: 13px;
letter-spacing: 0.06em;
}
#itemAttention .cot-shipping-methodAreaPrefectures,
#itemAttention .cot-shipping-sizeHeadPrefectures {
color: var(--ink-3);
}
#itemAttention .cot-shipping-methodAreaPrefecture,
#itemAttention .cot-shipping-methodAreaCountry {
background-color: var(--snow);
border-radius: var(--radius);
}
#itemAttention .cot-shipping-sizeBody table thead tr {
background-color: var(--snow);
}
#itemAttention .cot-shipping-sizeBody table thead tr th,
#itemAttention .cot-shipping-sizeBody table tbody tr td {
border-color: var(--line);
}
#itemAttention .cot-shipping-sizeBody table tbody tr td {
font-weight: 500;
}
#itemAttention .cot-shipping .cot-iconAngleBottom::before {
border-color: var(--ink-2);
border-width: 0 1px 1px 0;
}
#itemAttention .shippingModal__closeIcon::before,
#itemAttention .shippingModal__closeIcon::after {
background-color: var(--ink);
height: 1px;
}
#itemAttention .shippingModal__overlay {
background: rgba(21, 21, 21, 0.45);
}
@media screen and (max-width: 768px) {
#itemAttention .shippingModal {
border-radius: 0;
max-width: none;
}
}
@media (min-width: 900px) {
.buy:has(.shippingModal:not(.hide)),
.buy:has(.communityOverlay[style*="block"]),
.buy:has(.irBG[style*="block"]),
.buy:has(.irContainer[style*="block"]) {
z-index: 70;
}
}
body .purchaseButtonModal__wrapper,
body #salesPeriodModal {
background: rgba(21, 21, 21, 0.45);
}
body .purchaseButtonModal__container,
body .salesPeriodModal__container,
body .takeoutModal__container {
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
color: var(--ink);
font-family: var(--font-body);
}
body .purchaseButtonModal__title,
body .salesPeriodModal__title,
body .takeoutModal__title {
border-bottom-color: var(--line);
color: var(--ink);
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.06em;
}
body .purchaseButtonModal__text,
body .salesPeriodModal__text,
body .takeoutModal__text {
color: var(--ink-2);
line-height: 1.8;
}
body .purchaseButtonModal__label,
body .salesPeriodModal__label,
body .takeoutModal__head {
color: var(--ink);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
}
body .purchaseButtonModal__input,
body .salesPeriodModal__input {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
height: 50px;
line-height: 50px;
padding: 0 14px;
}
body .purchaseButtonModal__input:focus,
body .salesPeriodModal__input:focus {
border-color: var(--ink);
}
body .purchaseButtonModal__input.ageVerificationModal__input {
text-align: center;
width: 96px;
}
body .purchaseButtonModal__input.ageVerificationModal__input[aria-invalid=true] {
background-color: #FBF3F1;
border-color: var(--warn);
}
body .purchaseButtonModal__information {
background: var(--snow);
border-radius: var(--radius);
}
body .purchaseButtonModal__informationText {
color: var(--ink-2);
}
body .purchaseButtonModal__error,
body .salesPeriodModal__error {
background: #FBF3F1;
border-radius: var(--radius);
color: var(--warn);
font-weight: 500;
}
body .purchaseButtonModal__error.ageVerificationModal__error {
background: none;
}
body .is_success .purchaseButtonModal__resultText {
background: var(--sec-bg);
border-radius: var(--radius);
color: var(--sec-txt);
font-weight: 500;
}
body .purchaseButtonModal__btn,
body .salesPeriodModal__btn {
border-radius: 999px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
height: 52px;
letter-spacing: 0.12em;
line-height: 52px;
transition: background 0.3s, color 0.3s, transform 0.4s var(--ease);
}
body .purchaseButtonModal__btn:hover,
body .salesPeriodModal__btn:hover {
opacity: 1;
transform: translateY(-2px);
}
body .purchaseButtonModal__btn--submit,
body .salesPeriodModal__btn--submit {
background: var(--accent);
color: var(--accent-txt);
}
body .purchaseButtonModal__btn--close,
body .salesPeriodModal__btn--close {
background: transparent;
box-shadow: inset 0 0 0 1px var(--ink);
color: var(--ink);
}
body .purchaseButtonModal__btn--submit:disabled {
opacity: 0.4;
transform: none;
}
body .purchaseButtonModal__closeIcon::before,
body .purchaseButtonModal__closeIcon::after {
background: var(--ink);
height: 1px;
}
body .purchaseButtonModal__inner.ageVerificationModal__footer {
border-top-color: var(--line);
}
@media screen and (max-width: 828px) {
body .purchaseButtonModal__container {
border-radius: 0;
}
body .purchaseButtonModal__input {
border-color: var(--line);
}
body .purchaseButtonModal__btn {
height: 54px;
line-height: 54px;
}
}
.reportRow #irContainer {
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}
html body #irContainer legend {
border-bottom-color: var(--line);
color: var(--ink);
font-family: var(--font-head);
font-size: 18px;
font-weight: 500;
line-height: 1.6;
margin-bottom: 16px;
padding-bottom: 10px;
}
html body #irContainer select,
html body #irContainer textarea,
html body #irContainer input[type="text"] {
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: none;
color: var(--ink);
font-size: 16px;
height: auto;
line-height: 1.5;
max-width: 100%;
padding: 8px 10px;
width: 100%;
}
html body #irContainer .btn.btn-danger {
background: var(--warn);
border: 0;
border-radius: 999px;
box-shadow: none;
font-family: var(--font-body);
font-size: 15px;
letter-spacing: 0.1em;
line-height: 1.4;
padding: 13px 12px;
width: 100% !important;
}
#irContainer .ErrorMessages {
color: var(--warn);
font-size: 12px;
}
.reviewArea .review01 {
margin: 0;
}
.reviewArea .review01__title {
font-family: var(--font-head);
font-size: 26px !important;
font-weight: 400 !important;
letter-spacing: 0.04em;
line-height: 1.4;
padding: 0 0 24px;
}
.reviewArea .review01__title::after {
color: var(--ink-3);
content: "Reviews";
font-family: var(--disp);
font-size: 0.85em;
font-style: italic;
letter-spacing: 0.04em;
margin-left: 0.4em;
}
@media (min-width: 768px) {
.reviewArea .review01__title {
font-size: 32px !important;
}
}
.reviewArea .review01__tabWrap {
border-bottom: 1px solid var(--line);
border-top: 1px solid var(--line);
}
.reviewArea .review01__tab::after {
border-bottom: 1px solid var(--ink);
}
.reviewArea .review01__radio + label {
color: var(--ink-3);
font-size: 13px;
letter-spacing: 0.08em;
}
.reviewArea .review01__radio:checked + label {
color: var(--ink);
font-weight: 500;
}
.reviewArea .review01__tabIcon {
height: 20px;
opacity: 0.85;
width: 20px;
background-size: 20px;
}
.reviewArea .review01__trigger::before {
border-color: var(--ink-3);
border-width: 0 1px 1px 0;
}
.reviewArea .review01__list {
border-bottom: 1px solid var(--line);
}
.reviewArea .review01__listChild + .review01__listChild {
border-top-color: var(--line);
}
.reviewArea .review01__img {
border-radius: var(--radius);
}
.reviewArea .review01__itemName {
font-family: var(--font-head);
}
.reviewArea .review01__itemVariation,
.reviewArea .review01__date {
color: var(--ink-3);
}
.reviewArea .review01__comment {
color: var(--ink);
line-height: 1.9;
}
.reviewArea .review01__reply {
background-color: var(--snow);
border-radius: var(--radius);
color: var(--ink-2);
}
body .desc #appsItemDetailCustomTag .appsItemDetailCustomTag_heading {
font-family: var(--font-head);
font-size: 20px;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.6;
}
body .desc #appsItemDetailCustomTag .appsItemDetailCustomTag_description {
color: var(--ink-2);
font-size: 15px;
letter-spacing: 0.02em;
word-break: normal;
}
body .desc #appsItemDetailCustomTag .appsItemDetailCustomTag_image {
border-radius: var(--radius);
}
.bundleSaleRelation_title {
font-family: var(--font-head);
font-weight: 500;
}
.itemPage .bundleSaleRelation_button {
background-color: var(--accent);
border: 0;
border-radius: 999px;
color: var(--accent-txt);
letter-spacing: 0.1em;
}
.card__mark .label_image,
.gallery__mark .label_image {
display: block;
height: auto;
max-width: none;
width: 52px;
}
@media (min-width: 900px) {
.gallery__mark .label_image {
width: 72px;
}
}
.hero-first .hd:not(.on) .hd__logo .logoText {
color: inherit !important;
}
.crumb .breadcrumb {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.crumb .breadcrumb__child + .breadcrumb__child::before {
color: var(--ink-3);
content: "\FF0F";
margin: 0 0.5em;
}
.crumb .breadcrumb__notlink {
color: var(--ink);
}
.i18n #i18 {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.i18n #i18 form,
.i18n #i18 .input {
margin: 0;
}
.reviewArea .review01__comment,
.reviewArea .review01__reply {
white-space: pre-wrap;
}
.catList .appsItemCategoryTag_lowerLink {
color: var(--ink-2);
font-size: 12px;
padding: 7px 16px;
}
.catList .appsItemCategoryTag_lowerLink::before {
content: "\2014\00A0";
color: var(--ink-3);
}
body .pageContents .main #about .blog_body [style] {
background-color: transparent !important;
line-height: 2 !important;
}
body .pageContents .main #about .blog_body blockquote {
border-left: 2px solid var(--accent);
color: var(--ink-2);
margin: 1.5em 0;
padding: 0.2em 0 0.2em 1.2em;
}
body .pageContents .main #about .blog_body table {
border-collapse: collapse;
display: block;
margin: 1.5em 0;
max-width: 100%;
overflow-x: auto;
}
body .pageContents .main #about .blog_body th,
body .pageContents .main #about .blog_body td {
border: 1px solid var(--line);
padding: 8px 12px;
text-align: left;
vertical-align: top;
}
body .pageContents .main #about .blog_body th {
background: var(--snow);
font-weight: 500;
}
body .pageContents .main #about .blog_body hr {
border: 0;
border-top: 1px solid var(--line);
margin: 2em 0;
}
body .pageContents .main #about .blog_body h4 {
font-family: var(--font-head);
font-size: 16px;
font-weight: 500;
margin: 1.6em 0 0.6em;
}
body .pageContents .main #about .blog_body figure {
margin: 1.5em 0;
}
body .pageContents .main #about .blog_body figcaption {
color: var(--ink-3);
font-size: 12px;
margin-top: 6px;
}
body .pageContents .paginate-wrp {
margin-top: 48px;
}
body .pageContents .paginate li a:hover {
background: var(--accent);
}
body .pageContents .main #about .social img {
display: block;
height: 28px;
width: 28px;
}
.ft {
background: var(--foot-bg);
border-top: 1px solid var(--line);
color: var(--foot-txt);
padding-bottom: 32px;
padding-top: 64px;
}
.ft a {
color: inherit;
}
.ft__grid {
display: grid;
gap: 32px;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.ft__grid {
gap: 40px;
grid-template-columns: 1.6fr 1fr 1fr;
}
}
.ft__name {
font-family: var(--disp);
font-size: 24px;
font-weight: 500;
letter-spacing: 0.08em;
overflow-wrap: anywhere;
}
.ft__note {
font-size: 13.5px;
margin-top: 12px;
max-width: 28em;
opacity: 0.8;
}
.ft__social {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 18px;
}
.ft__social a {
font-size: 12px;
letter-spacing: 0.14em;
}
.ft__label {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.24em;
margin-bottom: 12px;
opacity: 0.6;
}
.ft__nav a {
align-items: center;
display: inline-flex;
font-size: 13.5px;
gap: 8px;
line-height: 2.2;
}
.ft__guide {
border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
display: grid;
gap: 28px;
grid-template-columns: 1fr;
margin-top: 48px;
padding-top: 32px;
}
.ft__guide:not(:has(> div)) {
display: none;
}
@media (min-width: 768px) {
.ft__guide {
gap: 40px;
grid-template-columns: 1.6fr 1fr 1fr;
}
.ft__guide .ft__pay {
grid-column: 1 / -1;
}
.ft__guide.has-ship .ft__pay {
grid-column: 2 / -1;
}
}
.ft__head {
font-size: 13px;
letter-spacing: 0.08em;
margin: 0 0 12px;
}
.ft__head .en,
.guidePay__title .en {
font-family: var(--disp);
font-size: 12px;
font-style: italic;
letter-spacing: 0.1em;
margin-left: 0.8em;
opacity: 0.6;
}
.ft__shipBody {
-webkit-box-orient: vertical;
display: -webkit-box;
font-size: 13px;
-webkit-line-clamp: 3;
line-height: 1.8;
margin: 0;
opacity: 0.85;
overflow: hidden;
}
.ft__more {
border-bottom: 1px solid currentColor;
display: inline-block;
font-size: 12px;
letter-spacing: 0.1em;
margin-top: 8px;
}
.payLogos .paymentMethodsLogoTag {
background: color-mix(in srgb, currentColor 5%, transparent);
border-radius: 6px;
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 14px;
}
.payLogos .paymentMethodsLogoTag > .paymentMethodsLogoTag__method,
.payLogos .paymentMethodsLogoTag > .paymentMethodsLogoTag__method + .paymentMethodsLogoTag__method {
display: contents;
list-style: none;
margin: 0;
}
.payLogos .paymentMethodsLogoTag > .paymentMethodsLogoTag__method > p {
display: none;
}
.payLogos .paymentMethodsLogoTag .paymentMethodsLogoTag__imgWrapper {
display: contents;
}
.payLogos .paymentMethodsLogoTag .paymentMethodsLogoTag__img {
background: #fff;
border-radius: 4px;
box-sizing: content-box;
height: 24px;
padding: 6px 10px;
width: auto;
}
@media (max-width: 767px) {
.payLogos .paymentMethodsLogoTag {
gap: 5px;
padding: 10px;
}
.payLogos .paymentMethodsLogoTag .paymentMethodsLogoTag__img {
height: 18px;
padding: 4px 7px;
}
}
.ft__copy {
display: flex;
flex-wrap: wrap;
font-size: 11px;
gap: 6px 20px;
justify-content: space-between;
letter-spacing: 0.14em;
margin-top: 40px;
opacity: 0.6;
}
.i18n {
font-size: 12px;
margin-top: 18px;
}
html .i18n select {
background: transparent;
border: 1px solid currentColor;
border-radius: 999px;
color: inherit;
font-size: 12px;
height: auto;
line-height: 1.5;
margin: 0;
min-width: 0;
padding: 4px 10px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}