/*
YOSHIMORI TOMIOKA ARTWORKS（tomi.official.ec）のテーマの見た目。
BASE のテーマは 150,000 文字までなので、CSS は theme.html から切り出し、テーマエディタの
ファイルアップローダーで上げたファイルを読み込む。直したら tools/css_upload.py で上げ直す。
*/
@font-face {
font-family: "EB Garamond Fallback";
src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times");
font-weight: 400;
size-adjust: 95.1%;
ascent-override: 106.2%;
descent-override: 31.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "EB Garamond Fallback";
src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Times Bold");
font-weight: 600 700;
size-adjust: 95.7%;
ascent-override: 105.5%;
descent-override: 31.3%;
line-gap-override: 0%;
}
@font-face {
font-family: "EB Garamond Fallback 2";
src: local("Noto Serif"), local("NotoSerif"), local("Droid Serif");
size-adjust: 87%;
ascent-override: 116%;
descent-override: 34.5%;
line-gap-override: 0%;
}
@font-face {
font-family: "baseicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/baseicon.woff?317xhh") format("woff"),
url("https://static.thebase.in/font/v1/baseicon.ttf?317xhh") format("truetype");
}
@font-face {
font-family: "shopicon";
font-style: normal;
font-weight: normal;
src: url("https://static.thebase.in/font/v1/shopicon.woff?317xhh") format("woff"),
url("https://static.thebase.in/font/v1/shopicon.ttf?317xhh") format("truetype");
}
:root {
--ease: cubic-bezier(.3, 0, .2, 1);
--dur-state: .15s;
--dur-move: .3s;
--kent: #f8f8f8;
--ink: #101010;
--hatch: #9d9d9d;
--hatch-shade: #6d6d6d;
--paper-press: #ebebeb;
--gold: #eed50a;
--gold-shade: #716400;
--line: #e2e2e2;
--frame: #efefef;
--bg: var(--kent);
--font-jp: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
--font-text: "EB Garamond", "EB Garamond Fallback", "EB Garamond Fallback 2", var(--font-jp);
--font-head: "EB Garamond", "EB Garamond Fallback", "EB Garamond Fallback 2", "Shippori Mincho", var(--font-jp);
--font-name: "Shippori Mincho", var(--font-jp);
--safe-t: env(safe-area-inset-top, 0px);
--safe-r: env(safe-area-inset-right, 0px);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-l: env(safe-area-inset-left, 0px);
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-m: var(--sp-4);
--sp-l: var(--sp-5);
--sp-xl: var(--sp-6);
--sp-section: var(--sp-7);
--ul-offset: 4px;
--gutter-base: var(--sp-4);
--gutter: max(var(--gutter-base), var(--safe-l), var(--safe-r));
--measure: 40rem;
--header-h: calc(56px + var(--safe-t));
--dpr: 1;
}
@media (min-resolution: 1.01dppx) {
:root {
--dpr: 1.25;
}
}
@media (min-resolution: 1.26dppx) {
:root {
--dpr: 1.5;
}
}
@media (min-resolution: 1.51dppx) {
:root {
--dpr: 1.75;
}
}
@media (min-resolution: 1.76dppx) {
:root {
--dpr: 2;
}
}
@media (min-resolution: 2.01dppx) {
:root {
--dpr: 2.25;
}
}
@media (min-resolution: 2.26dppx) {
:root {
--dpr: 2.5;
}
}
@media (min-resolution: 2.51dppx) {
:root {
--dpr: 2.625;
}
}
@media (min-resolution: 2.63dppx) {
:root {
--dpr: 2.75;
}
}
@media (min-resolution: 2.76dppx) {
:root {
--dpr: 3;
}
}
@media (min-resolution: 3.01dppx) {
:root {
--dpr: 3.5;
}
}
@media (min-resolution: 3.51dppx) {
:root {
--dpr: 4;
}
}
@media (min-width: 600px) {
:root {
--gutter-base: var(--sp-5);
}
}
@media (min-width: 768px) {
:root {
--sp-m: var(--sp-5);
--sp-l: var(--sp-6);
--sp-xl: var(--sp-7);
--sp-section: var(--sp-8);
}
}
@media (min-width: 900px) {
:root {
--gutter-base: var(--sp-6);
}
}
@media (min-width: 1200px) {
:root {
--sp-m: var(--sp-6);
--sp-l: var(--sp-7);
--sp-xl: var(--sp-8);
--sp-section: var(--sp-9);
--gutter-base: var(--sp-7);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
}
html.is-locked {
overflow: hidden;
}
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .2s;
}
@media (prefers-reduced-motion: reduce) {
@view-transition {
navigation: none;
}
}
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
background-color: var(--kent);
color: var(--ink);
font-family: var(--font-text);
font-size: 1.0625rem;
font-weight: 400;
line-height: 1.9;
letter-spacing: .02em;
line-break: strict;
font-kerning: normal;
text-spacing-trim: normal;
text-autospace: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.shop {
background-color: var(--kent);
}
main {
flex: 1 0 auto;
}
main:focus {
outline: none;
}
img {
max-width: 100%;
height: auto;
display: block;
border: 0;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: var(--ul-offset);
}
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
margin: 0;
}
ul,
ol {
padding: 0;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-head);
font-weight: 600;
line-height: 1.45;
letter-spacing: .03em;
margin: 0 0 var(--sp-4);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button {
cursor: pointer;
}
[hidden] {
display: none !important;
}
::selection {
background: var(--ink);
color: var(--kent);
}
:where(h1, h2, h3, h4, h5, h6, .bx, .brand, .nav, button, label, legend, figcaption, .section-title, .wv-title, .wv-no, .wg-cap, .site-footer) {
font-feature-settings: "palt";
}
.bx {
word-break: keep-all;
overflow-wrap: anywhere;
}
@supports (word-break: auto-phrase) {
.bx {
word-break: auto-phrase;
}
}
.num {
font-variant-numeric: lining-nums tabular-nums;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 1px solid var(--ink);
outline-offset: 2px;
box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--ink);
}
:is(a, button, summary, select, label, input, [role="button"]) {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
a:hover {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
a:active {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
a:has(img):active img {
opacity: .78;
}
.skip-link {
position: fixed;
top: 0;
left: 0;
z-index: 200;
padding: var(--sp-3) var(--sp-4);
background: var(--ink);
color: var(--kent);
font-size: .95rem;
transform: translateY(-120%);
}
.skip-link:focus,
.skip-link:focus-visible {
transform: none;
outline: 2px solid var(--kent);
outline-offset: -4px;
}
.container {
width: 100%;
max-width: 1440px;
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--sp-xl) var(--sp-section);
}
.section-title {
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.15;
letter-spacing: .01em;
margin: 0;
}
.subsection-title {
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
margin: var(--sp-xl) 0 var(--sp-4);
}
.muted {
color: var(--hatch-shade);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
min-height: 44px;
padding: 0 var(--sp-5);
border: 1px solid var(--ink);
border-radius: 0;
background: var(--bg);
color: var(--ink);
font-size: 1rem;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition: box-shadow var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease), color var(--dur-state) var(--ease);
}
.btn:hover {
text-decoration: none;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
}
.btn:active {
background: var(--ink);
color: var(--kent);
}
.btn--solid {
background: var(--ink);
color: var(--kent);
}
.btn--solid:active {
background: var(--hatch-shade);
border-color: var(--hatch-shade);
}
.btn[aria-busy="true"] {
color: var(--hatch-shade);
border-color: var(--hatch);
cursor: progress;
}
.site-header {
position: sticky;
top: 0;
z-index: 70;
background-color: var(--bg);
padding-top: var(--safe-t);
}
.site-header__inner {
height: calc(var(--header-h) - var(--safe-t));
display: flex;
align-items: center;
gap: var(--sp-5);
}
.brand {
display: flex;
align-items: baseline;
gap: var(--sp-3);
min-width: 0;
margin-right: auto;
text-decoration: none;
white-space: nowrap;
}
.brand:hover {
text-decoration: none;
}
.brand .logoText {
display: block;
overflow: hidden;
text-overflow: ellipsis;
color: var(--ink) !important;
font-family: var(--font-text);
font-size: .95rem;
text-transform: uppercase;
letter-spacing: .22em;
}
.brand .logoImage {
display: block;
width: auto;
height: auto;
max-width: min(46vw, 260px);
max-height: 36px;
object-fit: contain;
align-self: center;
}
@media (max-width: 420px) {
.brand .logoText {
font-size: .88rem;
letter-spacing: .14em;
}
}
@media (max-width: 350px) {
.brand .logoText {
font-size: .8rem;
letter-spacing: .08em;
}
}
.brand__sub {
font-family: var(--font-name);
font-weight: 600;
font-size: .9rem;
letter-spacing: .14em;
}
.brand:has(.logoImage) .brand__sub {
display: none;
}
.brand:hover .logoText,
.brand:hover .brand__sub {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.nav__list {
display: flex;
align-items: center;
gap: var(--sp-m);
list-style: none;
margin: 0;
padding: 0;
}
.nav__link {
font-size: .95rem;
letter-spacing: .03em;
text-decoration: none;
white-space: nowrap;
}
.nav__link[aria-current] {
text-decoration-line: underline;
text-decoration-thickness: 1px;
}
.nav__sub,
.nav__extra {
display: none;
}
.nav-toggle {
display: none;
flex: none;
width: 44px;
height: 44px;
margin-right: -10px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: none;
color: var(--ink);
}
.nav-toggle span {
position: relative;
display: block;
width: 22px;
height: 1.5px;
background: var(--ink);
}
.nav-toggle span::before,
.nav-toggle span::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 1.5px;
background: var(--ink);
}
.nav-toggle span::before {
top: -7px;
}
.nav-toggle span::after {
top: 7px;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
transition: transform var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease), top var(--dur-state) var(--ease);
}
.nav-toggle[aria-expanded="true"] span {
background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
top: 0;
transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
top: 0;
transform: rotate(-45deg);
}
.nav-toggle:active {
background: var(--paper-press);
}
#baseMenu {
flex: none;
position: static;
}
#baseMenu > ul {
display: flex;
align-items: center;
gap: var(--sp-1);
margin: 0;
padding: 0;
list-style: none;
}
#baseMenu > ul::after {
content: none;
}
#baseMenu > ul > li {
float: none;
margin: 0;
list-style: none;
}
#baseMenu > ul > li a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 44px;
padding: 0 var(--sp-2);
margin: 0;
background: none;
border-radius: 0;
box-shadow: none;
color: var(--ink);
text-decoration: none;
}
#baseMenu > ul > li a:hover {
padding: 0 var(--sp-2);
box-shadow: none;
opacity: .7;
}
#baseMenu img {
width: auto;
height: 22px;
max-width: none;
}
#baseMenu [class^="icon-"],
#baseMenu [class*=" icon-"] {
font-size: 22px;
}
.cart {
position: relative;
}
.cart-badge {
display: block !important;
}
.cart-qty {
position: absolute;
top: 5px;
right: 0;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--ink);
color: var(--kent);
font-family: var(--font-text);
font-size: 10px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0;
text-align: center;
font-variant-numeric: lining-nums tabular-nums;
}
[class^="icon-"],
[class*=" icon-"] {
font-family: "baseicon" !important;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cart::before {
content: "\e900";
}
.icon-search::before {
content: "\e912";
}
.icon-information::before {
content: "\e919";
}
.icon-tipi::before {
content: "\e922";
}
.icon-pin::before {
content: "\e929";
}
.si-information::before {
font-family: "shopicon";
content: "\e919";
font-style: normal;
}
@media (max-width: 960px) {
.site-header__inner {
gap: var(--sp-2);
}
.nav-toggle {
display: inline-flex;
}
.brand__sub {
display: none;
}
.nav {
position: fixed;
top: var(--header-h);
right: 0;
bottom: 0;
left: 0;
z-index: 69;
padding: var(--sp-4) var(--gutter) calc(var(--sp-7) + var(--safe-b));
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--bg);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-state) var(--ease), visibility 0s linear var(--dur-state);
}
.nav[data-open="true"] {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-state) var(--ease);
}
.nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav__link {
display: block;
padding: var(--sp-3) 0;
font-size: 1.35rem;
white-space: normal;
}
.nav__sub {
display: grid;
gap: 0;
margin: calc(-1 * var(--sp-2)) 0 var(--sp-2);
padding: 0;
list-style: none;
}
.nav__sub a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 1.05rem;
text-decoration: none;
}
.nav__sub a[aria-current] {
text-decoration-line: underline;
text-decoration-thickness: 1px;
}
.nav__cat > ul {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-5);
margin: 0 0 var(--sp-1);
padding: 0 0 0 var(--sp-4);
border-left: 1px solid var(--line);
list-style: none;
}
.nav__cat > ul a {
font-size: .95rem;
}
.nav__extra {
display: block;
margin-top: var(--sp-6);
}
.nav__fine {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-5);
margin-top: var(--sp-6);
padding: 0;
list-style: none;
font-size: .9rem;
color: var(--hatch-shade);
}
.nav__fine a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
.nav {
transition: none;
}
}
.wg-head {
display: grid;
gap: var(--sp-4) var(--sp-6);
padding-block: var(--sp-xl) var(--sp-l);
}
.wg-title {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sp-2) var(--sp-4);
}
.wg-kicker {
flex-basis: 100%;
margin: 0;
color: var(--hatch-shade);
font-size: .95rem;
line-height: 1.7;
}
.crumbs {
flex-basis: 100%;
font-size: .9rem;
color: var(--hatch-shade);
}
.crumbs .breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
}
.crumbs .breadcrumb__child {
display: inline;
}
.crumbs .breadcrumb__child + .breadcrumb__child::before {
content: "/";
margin: 0 .6em;
color: var(--hatch);
}
.crumbs .breadcrumb__link {
color: var(--ink);
}
.works-note {
max-width: var(--measure);
margin: 0;
font-size: 1rem;
line-height: 1.9;
}
.works-note p + p {
margin-top: var(--sp-2);
}
.wg-result {
max-width: var(--measure);
margin: 0;
font-size: 1rem;
overflow-wrap: anywhere;
}
.notice {
margin: 0;
font-size: 1rem;
}
.notice__label {
margin-right: var(--sp-3);
color: var(--hatch-shade);
font-size: .9rem;
}
.wg-filter {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-4) var(--sp-6);
margin-top: var(--sp-2);
}
.wg-cats {
display: grid;
gap: 0;
min-width: 0;
}
.wg-cats__list,
.wg-cats__sub {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-5);
margin: 0;
padding: 0;
list-style: none;
}
.wg-cats__label {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--hatch-shade);
font-size: .85rem;
}
@media (max-width: 599px) {
.wg-cats__list,
.wg-cats__sub {
gap: 0 var(--sp-4);
}
}
.wg-cat {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 1rem;
text-decoration: none;
white-space: nowrap;
}
.wg-cats__sub .wg-cat {
font-size: .95rem;
}
.wg-cat[aria-current] {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: var(--ul-offset);
}
.wg-children {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-5);
margin: 0;
padding: 0;
list-style: none;
}
.search {
display: flex;
flex-direction: column;
gap: var(--sp-1);
flex: 0 1 18rem;
min-width: min(100%, 14rem);
}
.search__label {
font-size: .85rem;
color: var(--hatch-shade);
}
.search__row {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--ink);
}
.search__input {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
padding: var(--sp-1) 0;
border: 0;
border-radius: 0;
background: transparent;
font-size: 1rem;
-webkit-appearance: none;
appearance: none;
}
.search__input::placeholder {
color: var(--hatch-shade);
opacity: 1;
}
.search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.search__input:focus-visible {
outline: none;
box-shadow: none;
}
.search__row:focus-within {
box-shadow: inset 0 -1px 0 var(--ink);
}
.search__btn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
min-height: 44px;
margin-right: -12px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
}
.search__btn svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.2;
}
@media (max-width: 700px) {
.search {
flex-basis: 100%;
}
}
.wg-count {
margin: 0;
color: var(--hatch-shade);
font-size: 1rem;
}
.wg-list {
padding-bottom: var(--sp-section);
}
.wg-range {
position: sticky;
top: var(--header-h);
z-index: 4;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--sp-4);
align-items: end;
margin: 0 0 var(--sp-2);
padding: var(--sp-2) 0;
background-color: var(--bg);
}
.wg-range__name {
margin: 0;
font-size: .9rem;
white-space: nowrap;
}
.wg-range__name .num {
margin-left: var(--sp-1);
color: var(--hatch-shade);
}
.wg-range__track,
.wv-scale {
--tick: calc(100% / var(--n));
}
.wg-range__track {
position: relative;
height: 20px;
border-bottom: 1px solid var(--ink);
background: repeating-linear-gradient(90deg, var(--hatch) 0 1px, transparent 1px var(--tick)) bottom / 100% 5px no-repeat;
cursor: pointer;
touch-action: none;
user-select: none;
}
.wg-range__seg {
position: absolute;
bottom: -1px;
height: 5px;
background: var(--ink);
transition: left var(--dur-state) var(--ease), width var(--dur-state) var(--ease);
}
.wg-range__txt {
min-width: 7.5em;
margin: 0;
color: var(--hatch-shade);
font-size: .9rem;
text-align: right;
}
.scale-year {
position: absolute;
bottom: 0;
height: 6px;
border-left: 1px solid var(--hatch-shade);
}
.scale-year.is-label {
height: 9px;
border-left-color: var(--ink);
}
.scale-year span {
position: absolute;
bottom: 14px;
left: -1px;
color: var(--gold-shade);
font-size: .72rem;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
}
@media (max-width: 599px) {
.wg-range {
gap: var(--sp-3);
}
.wg-range__name,
.wg-range__txt {
font-size: .8rem;
}
.wg-range__txt {
min-width: 0;
}
.wg-range__track .scale-year span {
display: none;
}
}
@media (max-width: 700px) {
.wg-range__track,
.wv-scale {
--tick: calc(500% / var(--n));
}
.wg-range__track .scale-year.is-tight {
height: 6px;
border-left-color: var(--hatch-shade);
}
.wg-range__track .scale-year.is-tight span {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wg-range__seg {
transition: none;
}
}
.wg-grid {
--cell: 11.5rem;
--gx: var(--sp-m);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(var(--cell), calc((100% - var(--gx)) / 2)), 1fr));
gap: var(--sp-l) var(--gx);
margin: 0;
padding: 0;
list-style: none;
}
.wg-item {
position: relative;
min-width: 0;
padding-top: var(--sp-5);
scroll-margin-top: calc(var(--header-h) + 64px);
}
.wg-item.is-new {
opacity: 0;
}
.wg-item.is-in {
opacity: 1;
transition: opacity var(--dur-move) var(--ease);
}
.wg-link {
display: block;
color: var(--ink);
text-decoration: none;
}
.wg-link:hover,
.wg-link:active {
text-decoration: none;
}
.wg-thumb {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
aspect-ratio: 1 / 1;
}
.wg-thumb img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
background-color: var(--frame);
-webkit-touch-callout: none;
-webkit-user-drag: none;
user-select: none;
}
.wg-item:not(.is-art) .wg-thumb img {
width: 100%;
height: 100%;
}
.wg-thumb .label_image {
position: absolute !important;
top: var(--sp-2);
left: var(--sp-2);
z-index: 1;
width: 48px;
height: auto;
max-height: 48px;
background: none !important;
pointer-events: none;
}
.wg-cap {
display: flex;
gap: var(--sp-2);
align-items: baseline;
margin-top: var(--sp-2);
font-size: .95rem;
line-height: 1.45;
}
.wg-no {
flex: none;
color: var(--hatch-shade);
}
.wg-name {
min-width: 0;
overflow-wrap: anywhere;
}
.wg-link:hover .wg-name,
.wg-link:focus-visible .wg-name {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.wg-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--sp-3);
margin-top: 1px;
color: var(--hatch-shade);
font-size: .85rem;
line-height: 1.5;
}
.wg-price s {
margin-right: var(--sp-2);
text-decoration-thickness: 1px;
}
.wg-rate {
color: var(--gold-shade);
}
.wg-flag {
font-size: .75rem;
letter-spacing: .08em;
white-space: nowrap;
}
.wg-year {
position: absolute;
top: 0;
left: 0;
display: none;
padding-left: var(--sp-2);
border-left: 1px solid var(--hatch);
color: var(--gold-shade);
font-size: .85rem;
line-height: 1;
}
.wg-item.is-ystart .wg-year {
display: block;
}
.wg-more {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-xl);
}
.wg-more__btn {
min-width: 12rem;
}
.wg-more__status {
min-height: 1.5em;
margin: 0;
color: var(--hatch-shade);
font-size: .9rem;
}
.wg-empty {
max-width: var(--measure);
margin: 0;
color: var(--hatch-shade);
}
.wg-empty a {
color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
.wg-item.is-new {
opacity: 1;
}
}
.first {
display: grid;
grid-template-columns: minmax(0, auto) minmax(14rem, 20rem);
justify-content: center;
align-items: end;
gap: var(--sp-l) var(--sp-xl);
min-height: calc(100svh - var(--header-h));
max-width: 1440px;
margin-inline: auto;
padding: var(--sp-m) var(--gutter) var(--sp-l);
}
.first__work {
position: relative;
justify-self: center;
align-self: center;
width: calc(min(calc(100svh - var(--header-h) - 2 * clamp(16px, 3vw, 40px)), 960px, calc(var(--src-h, 1280px) / var(--dpr, 1))) * var(--ar));
max-width: 100%;
aspect-ratio: var(--ar);
}
.first__work a {
display: block;
width: 100%;
height: 100%;
}
.first__work img {
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--frame);
-webkit-touch-callout: none;
-webkit-user-drag: none;
user-select: none;
}
.first__name {
margin: 0;
font-weight: 400;
line-height: 1.25;
}
.first__name-main {
display: block;
font-family: var(--font-text);
font-size: clamp(1.7rem, 2.8vw, 2.5rem);
letter-spacing: .04em;
}
.first__name-sub {
display: block;
margin-top: var(--sp-1);
font-family: var(--font-name);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: .24em;
}
.first__role {
margin: var(--sp-3) 0 0;
font-size: 1rem;
}
.first__caption {
margin: var(--sp-6) 0 0;
font-size: 1rem;
line-height: 1.7;
}
@media (max-width: 720px) {
.first {
grid-template-columns: 1fr;
align-content: start;
min-height: 0;
gap: var(--sp-4);
}
.first__work {
width: min(76vw, calc(60svh * var(--ar)), calc(var(--src-w, 1280px) / var(--dpr, 1)));
}
.first__caption {
margin-top: var(--sp-4);
}
}
.wv {
--info-w: clamp(19rem, 26vw, 24rem);
--bar-h: 3.5rem;
--pad: 32px;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--info-w);
grid-template-rows: var(--bar-h) minmax(0, 1fr) auto;
height: calc(100svh - var(--header-h));
min-height: 600px;
padding: 0 var(--safe-r) 0 var(--safe-l);
}
.wv-bar {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--sp-4);
padding: 0 var(--gutter);
}
.wv-pos {
display: flex;
align-items: baseline;
gap: var(--sp-3);
margin: 0 auto 0 0;
color: var(--hatch-shade);
font-size: .95rem;
}
.wv-kind {
color: var(--ink);
font-size: 1.15rem;
}
.wv-close {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--sp-3);
border: 1px solid var(--ink);
background: var(--bg);
color: var(--ink);
font-size: 1rem;
text-decoration: none;
}
.wv-close:hover {
text-decoration: none;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
}
.wv-close:active {
background: var(--ink);
color: var(--kent);
}
.wv-stage {
position: relative;
grid-row: 2;
grid-column: 1;
min-height: 0;
overflow: hidden;
}
.gl {
position: absolute;
inset: 0;
}
.gl-track {
display: flex;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gl-track::-webkit-scrollbar {
display: none;
}
.gl-slide {
flex: 0 0 100%;
min-width: 0;
height: 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.gl-zoom {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: var(--pad);
cursor: zoom-in;
}
.gl-zoom img {
width: auto;
height: auto;
max-width: min(100%, calc(var(--img-w, 9999px) / var(--dpr, 1)));
max-height: 100%;
object-fit: contain;
background-color: var(--frame);
-webkit-touch-callout: none;
-webkit-user-drag: none;
user-select: none;
}
.gl-zoom .label_image {
position: absolute !important;
top: var(--pad);
left: var(--pad);
width: 56px;
height: auto;
background: none !important;
pointer-events: none;
}
.wv-edge {
position: absolute;
top: 50%;
z-index: 2;
display: none;
width: 44px;
height: 88px;
margin-top: -44px;
align-items: center;
justify-content: center;
background: rgba(248, 248, 248, .82);
color: var(--ink);
text-decoration: none;
}
.wv-edge svg {
width: 12px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 1.2;
}
.wv-edge--prev {
left: 0;
}
.wv-edge--next {
right: 0;
}
.wv-edge:active {
background: var(--paper-press);
}
@media (hover: hover) and (pointer: fine) {
.wv-edge:not([hidden]) {
display: flex;
}
}
.wv-scale {
position: relative;
grid-row: 3;
grid-column: 1;
height: 48px;
margin: 0 var(--pad) var(--sp-2);
cursor: pointer;
touch-action: none;
user-select: none;
}
.wv-scale__track {
position: absolute;
right: 0;
bottom: 12px;
left: 0;
height: 22px;
border-bottom: 1px solid var(--ink);
background: repeating-linear-gradient(90deg, var(--hatch) 0 1px, transparent 1px var(--tick)) bottom / 100% 6px no-repeat;
}
.wv-scale__thumb {
position: absolute;
bottom: -5px;
width: 5px;
height: 17px;
border-right: 1px solid var(--ink);
border-left: 1px solid var(--ink);
transform: translate(-2.5px);
}
.wv-scale__out {
position: absolute;
bottom: 38px;
display: none;
padding: 0 var(--sp-1);
background: var(--bg);
font-size: .85rem;
white-space: nowrap;
transform: translate(-50%);
pointer-events: none;
}
.wv-scale.is-active .wv-scale__out,
.wv-scale.is-hover .wv-scale__out {
display: block;
}
.wv-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: var(--pad);
object-fit: contain;
pointer-events: none;
}
.wv-stage.is-preview .gl,
.wv-stage.is-preview .wv-edge {
visibility: hidden;
}
.wv-info {
grid-row: 2 / 4;
grid-column: 2;
display: flex;
flex-direction: column;
min-height: 0;
padding: var(--sp-4) var(--gutter) var(--sp-5) var(--sp-5);
overflow: auto;
overscroll-behavior: contain;
}
.wv-views {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin: var(--sp-4) 0 0;
padding: 0;
list-style: none;
}
.wv-views button {
display: block;
width: 48px;
height: 48px;
padding: 0;
border: 0;
background: none;
opacity: .5;
transition: opacity var(--dur-state) var(--ease);
}
.wv-views img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: var(--frame);
}
.wv-views button:hover,
.wv-views button[aria-current="true"] {
opacity: 1;
}
.wv-views button[aria-current="true"] {
outline: 1px solid var(--ink);
outline-offset: 2px;
}
.wv-foot {
position: sticky;
bottom: calc(-1 * var(--sp-5));
margin: auto 0 calc(-1 * var(--sp-5));
padding: var(--sp-6) 0 var(--sp-5);
background: linear-gradient(rgba(248, 248, 248, 0), var(--bg) var(--sp-5));
}
.wv-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.wv-nav a {
display: flex;
flex-direction: column;
min-height: 44px;
text-decoration: none;
}
.wv-nav a[aria-hidden="true"] {
visibility: hidden;
}
.wv-nav__k {
font-size: .95rem;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: var(--ul-offset);
}
.wv-nav a:hover .wv-nav__k {
text-decoration-style: double;
text-underline-offset: 3px;
}
.wv-nav__t {
color: var(--hatch-shade);
font-size: .9rem;
line-height: 1.45;
}
.wv-next {
align-items: flex-end;
text-align: right;
}
body:has(#x_startMessenger) .wv-help {
padding-right: 72px;
}
.wv-help {
margin: var(--sp-4) 0 0;
color: var(--hatch-shade);
font-size: .95rem;
line-height: 1.65;
}
.wv-after {
padding-bottom: var(--sp-section);
}
@media (max-width: 899px) {
.wv {
--bar-h: 3.25rem;
--pad: 12px;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--bar-h) auto auto auto;
height: auto;
min-height: 0;
}
.wv-bar {
padding: 0 var(--sp-3) 0 var(--gutter);
}
.wv-stage {
--stage-w: min(calc(100vw - 2 * var(--pad) - var(--safe-l) - var(--safe-r)), calc(var(--src-w, 9999px) / var(--dpr, 1)));
height: min(calc(var(--stage-w) / var(--ar, 1) + 2 * var(--pad)), calc(100svh - var(--header-h) - var(--bar-h) - 11rem - 24px));
}
.wv-scale {
margin: 0 var(--gutter) var(--sp-1);
height: 44px;
}
.wv-info {
grid-row: auto;
grid-column: 1;
overflow: visible;
padding: var(--sp-3) var(--gutter) var(--sp-4);
border-top: 1px solid var(--line);
}
.wv-title {
font-size: 1.3rem;
}
.wv-foot {
position: static;
order: -1;
margin: 0 0 var(--sp-2);
padding: 0;
background: none;
}
.wv-help {
display: none;
}
}
.wv-no {
margin: 0;
color: var(--hatch-shade);
font-size: .95rem;
}
.wv-title {
margin: var(--sp-1) 0 var(--sp-2);
font-size: clamp(1.4rem, 2vw, 1.8rem);
line-height: 1.35;
letter-spacing: .06em;
overflow-wrap: anywhere;
}
.wv-meta {
margin: 0;
font-size: 1rem;
line-height: 1.75;
}
.wv-desc {
margin-top: var(--sp-4);
font-size: 1rem;
line-height: 1.9;
overflow-wrap: anywhere;
}
.wv-desc a {
text-decoration-line: underline;
}
.wv-price {
margin-top: var(--sp-5);
}
.price {
display: grid;
gap: var(--sp-1);
}
.price + .price {
margin-top: var(--sp-2);
}
.price__row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--sp-2);
}
.price__label {
font-size: .9rem;
}
.price__value {
font-size: 1.1rem;
letter-spacing: .02em;
}
.price__mainValue {
font-size: 1.25rem;
}
.price__value--proper {
color: var(--hatch-shade);
font-size: 1rem;
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.price__discountRate {
color: var(--gold-shade);
font-size: .9rem;
}
.price__tax {
color: var(--hatch-shade);
font-size: .85rem;
}
.wv-price[data-soldout] .price__value {
color: var(--hatch-shade);
}
.wv-status {
margin: var(--sp-2) 0 0;
color: var(--hatch-shade);
font-size: .9rem;
letter-spacing: .08em;
}
.wv-status--soon {
color: var(--ink);
}
.wv-status p {
margin: 0;
}
.wv-buy {
margin-top: var(--sp-4);
}
.wv-buy > * + * {
margin-top: var(--sp-4);
}
#itemAttention {
margin: var(--sp-4) 0 0;
color: var(--hatch-shade);
font-size: .9rem;
line-height: 1.7;
}
#itemAttention .attention {
margin: 0;
}
#itemAttention .attention + .attention {
margin-top: var(--sp-1);
}
#itemAttention a {
color: var(--ink);
text-decoration-line: underline;
cursor: pointer;
}
#itemAttention .attention.free,
#itemAttention .attention.free .free__text {
color: var(--ink);
font-weight: 400;
}
#itemAttention .attention.deliveryShortestDay {
display: inline-block;
padding: 0;
border: 0;
color: var(--ink);
font-size: .9rem;
font-weight: 400;
}
#itemAttention .takeout__text {
color: var(--ink);
text-decoration: underline;
cursor: pointer;
}
#itemAttention .salesPeriod {
margin: 0 0 var(--sp-3);
padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
border-left: 1px solid var(--ink);
color: var(--ink);
font-size: .95rem;
font-weight: 400;
text-align: left;
background: none;
}
#itemAttention .salesPeriod--finish {
border-left-color: var(--hatch);
color: var(--hatch-shade);
}
.preOrder,
.lottery,
.takeout,
.community {
margin: var(--sp-3) 0 0;
}
.preOrder__label,
.lottery__label,
.takeout__label {
display: inline-block;
margin: 0 0 var(--sp-1);
padding: 2px var(--sp-2);
border: 1px solid var(--ink);
color: var(--ink);
font-size: .8rem;
letter-spacing: .06em;
}
.preOrder__data,
.lottery__data,
.takeout__data {
display: block;
color: var(--hatch-shade);
font-size: .9rem;
}
#purchase_form {
margin: var(--sp-5) 0 0;
color: var(--ink);
}
#purchase_form .purchaseElement,
#purchase_form .itemOptionElement,
#purchase_form #variationSelectWrap {
display: grid;
gap: var(--sp-1);
max-width: 100%;
margin: 0 0 var(--sp-4);
overflow: visible;
}
#purchase_form .purchaseElement.is-single {
display: none !important;
}
#purchase_form label,
#purchase_form .itemOption__name {
display: block;
margin: 0;
color: var(--hatch-shade);
font-size: .85rem;
line-height: 1.5;
}
body form#purchase_form[id] select,
body form#purchase_form[id] input[type="text"],
body form#purchase_form[id] input[type="number"],
body form#purchase_form[id] input:not([type]),
body form#purchase_form[id] textarea {
display: block;
width: 100%;
max-width: 100%;
min-height: 44px;
margin: 0;
padding: var(--sp-1) 28px var(--sp-1) 0;
border: 0;
border-bottom: 1px solid var(--ink);
border-radius: 0;
background-color: transparent;
box-shadow: none;
color: var(--ink);
font-size: 1rem;
line-height: 1.5;
white-space: normal;
text-overflow: ellipsis;
-webkit-appearance: none;
appearance: none;
}
body form#purchase_form[id] select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101010' stroke-width='1.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 12px 8px;
}
body form#purchase_form[id] input[type="text"],
body form#purchase_form[id] input:not([type]),
body form#purchase_form[id] textarea {
padding-right: 0;
}
#purchase_form select:focus-visible,
#purchase_form input:focus-visible,
#purchase_form textarea:focus-visible {
outline: none;
box-shadow: inset 0 -1px 0 var(--ink);
}
#purchase_form input::placeholder {
color: var(--hatch);
opacity: 1;
}
#purchase_form .itemOption__caption {
margin: 0;
color: var(--hatch-shade);
font-size: .85rem;
line-height: 1.6;
}
#purchase_form .itemOption__bottomCaptionBlock {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
overflow: visible;
}
#purchase_form .itemOption__bottomCaptionBlock::after {
content: none;
}
#purchase_form .itemOption__caption--error,
#purchase_form .itemOption__count {
float: none;
font-size: .85rem;
line-height: 1.5;
}
#purchase_form .itemOption__caption--error {
color: #9b1c1c;
}
#purchase_form .itemOption__count {
margin-left: auto;
color: var(--hatch-shade);
}
#purchase_form .itemOption__count--error {
color: #9b1c1c;
}
#purchase_form [data-dirty="true"][data-has-error="true"] {
border-bottom-color: #9b1c1c;
}
.ageVerificationWarning {
margin: var(--sp-4) 0;
font-size: 1.3rem;
line-height: 1.6;
}
.purchaseButton {
margin: var(--sp-5) 0 0;
text-align: left;
}
.purchaseButton__btn,
.easyOverseasSales .purchaseButton__btn,
#purchase_form button[type="submit"] {
display: block;
width: 100%;
min-height: 52px;
margin: 0;
padding: var(--sp-3) var(--sp-5);
border: 1px solid var(--ink);
border-radius: 0;
background: var(--ink);
color: var(--kent);
font-family: var(--font-text);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
letter-spacing: .06em;
text-align: left;
cursor: pointer;
transition: box-shadow var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease);
}
.purchaseButton__btn:hover:not(:disabled),
#purchase_form button[type="submit"]:hover:not(:disabled) {
opacity: 1;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
}
.purchaseButton__btn:active:not(:disabled),
#purchase_form button[type="submit"]:active:not(:disabled) {
background: var(--hatch-shade);
border-color: var(--hatch-shade);
}
.purchaseButton__btn:disabled,
.purchaseButton__btn--disabled,
.purchaseButton__btn--soldOut,
.purchaseButton__btn--endOfSale,
.purchaseButton__btn--comingSoonStay,
.purchaseButton__btn--notApplying,
#purchase_form button[type="submit"]:disabled {
border-color: var(--hatch);
background: transparent;
color: var(--hatch-shade);
box-shadow: none;
cursor: not-allowed;
opacity: 1;
}
.purchaseButton__btn--requestRestockMail,
.purchaseButton__btn--comingSoon {
background: var(--bg);
color: var(--ink);
}
.easyOverseasSales__label {
display: block;
margin: 0 0 var(--sp-2);
color: var(--hatch-shade);
font-size: .85rem;
}
.easyOverseasSalesArea {
margin-top: var(--sp-3);
font-size: .9rem;
}
.easyOverseasSalesArea__link {
color: var(--ink);
text-decoration: underline;
cursor: pointer;
}
.wv-links {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-5);
margin: var(--sp-5) 0 0;
padding: 0;
list-style: none;
font-size: .95rem;
}
.wv-links a,
.wv-links button {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font-size: inherit;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: var(--ul-offset);
}
.wv-links button:hover {
text-decoration-style: double;
text-underline-offset: 3px;
}
.wv-share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--sp-4);
margin: var(--sp-2) 0 0;
padding: 0;
list-style: none;
color: var(--hatch-shade);
font-size: .9rem;
}
.wv-share__label {
margin-right: var(--sp-1);
}
.wv-share a,
.wv-share button {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font-size: inherit;
text-decoration: none;
}
.wv-share a:hover,
.wv-share button:hover {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.wv-report {
margin-top: var(--sp-3);
font-size: .85rem;
color: var(--hatch-shade);
}
.wv-report a,
.wv-report button,
.report a,
.report button {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--hatch-shade);
font-size: .85rem;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.wv-report a:hover,
.wv-report button:hover {
color: var(--ink);
text-decoration: underline;
}
.wv-section {
margin-top: var(--sp-section);
}
.wv-section__h {
margin: 0 0 var(--sp-l);
font-size: clamp(1.3rem, 2.2vw, 1.6rem);
font-weight: 400;
}
#appsItemDetailCustom {
max-width: 54rem;
}
#appsItemDetailCustom #appsItemDetailCustomTag > * + * {
margin-top: var(--sp-6);
}
#appsItemDetailCustom #appsItemDetailCustomTag .appsItemDetailCustomTag_heading {
margin: var(--sp-7) 0 var(--sp-3);
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 600;
}
#appsItemDetailCustom #appsItemDetailCustomTag .appsItemDetailCustomTag_description {
font-size: 1rem;
line-height: 1.9;
}
#appsItemDetailCustom #appsItemDetailCustomTag .appsItemDetailCustomTag_image {
width: 100%;
height: auto;
}
#appsItemDetailCustom #appsItemDetailCustomTag iframe {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
.back-link {
margin: var(--sp-section) 0 0;
font-size: 1rem;
}
.lb {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: var(--bg);
color: var(--ink);
overflow: hidden;
}
.lb::backdrop {
background: var(--bg);
}
.lb[open] {
display: block;
}
.lb__bar {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 3;
display: flex;
align-items: center;
gap: var(--sp-4);
height: calc(56px + var(--safe-t));
padding: var(--safe-t) var(--gutter) 0;
background: var(--bg);
}
.lb__title {
margin: 0 auto 0 0;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1rem;
}
.lb__count {
color: var(--hatch-shade);
font-size: .9rem;
}
.lb__close {
flex: none;
min-width: 44px;
height: 44px;
padding: 0 var(--sp-3);
}
.lb__stage {
position: absolute;
top: calc(56px + var(--safe-t));
right: 0;
bottom: 0;
left: 0;
display: flex;
overflow: hidden;
overscroll-behavior: contain;
cursor: zoom-in;
}
.lb.is-zoomed .lb__stage {
overflow: auto;
cursor: zoom-out;
}
.lb__img {
margin: auto;
width: auto;
height: auto;
max-width: calc(100% - 2 * var(--gutter));
max-height: calc(100% - var(--sp-6) - var(--safe-b));
object-fit: contain;
-webkit-touch-callout: none;
-webkit-user-drag: none;
user-select: none;
}
.lb.is-zoomed .lb__img {
max-width: none;
max-height: none;
}
.lb__img.is-loading {
cursor: progress;
opacity: .78;
}
.lb__edge {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
width: 44px;
height: 88px;
margin-top: -16px;
padding: 0;
align-items: center;
justify-content: center;
border: 0;
background: rgba(248, 248, 248, .82);
color: var(--ink);
}
.lb__edge svg {
width: 12px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-width: 1.2;
}
.lb__edge--prev {
left: 0;
}
.lb__edge--next {
right: 0;
}
.lb.is-zoomed .lb__edge {
display: none;
}
.buybar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-2) var(--gutter) calc(var(--sp-2) + var(--safe-b));
border-top: 1px solid var(--line);
background: var(--bg);
transform: translateY(105%);
transition: transform var(--dur-move) var(--ease);
}
.buybar.is-on {
transform: none;
}
.buybar__info {
min-width: 0;
margin-right: auto;
line-height: 1.35;
}
.buybar__title {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .9rem;
}
.buybar__price {
display: block;
font-size: 1rem;
}
.buybar__btn {
flex: none;
min-height: 44px;
padding: 0 var(--sp-5);
}
@media (max-width: 899px) {
.has-buybar .site-footer {
padding-bottom: calc(var(--sp-7) + 64px + var(--safe-b));
}
#x_startMessenger {
transition: bottom var(--dur-move) var(--ease);
}
html.is-buybar-on #x_startMessenger {
bottom: calc(76px + var(--safe-b)) !important;
}
}
@media (min-width: 900px) {
.buybar {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.buybar {
transition: none;
}
}
body .purchaseButtonModal__wrapper,
body #salesPeriodModal {
position: fixed;
inset: 0;
z-index: 10000;
align-items: center;
justify-content: center;
padding: var(--gutter);
background: rgba(16, 16, 16, .4);
}
body .purchaseButtonModal__container,
body .salesPeriodModal__container {
position: relative;
width: min(100%, 30rem);
max-height: calc(100svh - 2 * var(--gutter));
overflow: auto;
padding: var(--sp-6) var(--sp-5) var(--sp-5);
background: var(--kent);
color: var(--ink);
font-family: var(--font-text);
border-radius: 0;
box-shadow: none;
}
body .purchaseButtonModal__inner,
body .salesPeriodModal__inner {
padding: 0;
text-align: left;
}
body .purchaseButtonModal__title,
body .salesPeriodModal__title {
margin: 0 var(--sp-6) var(--sp-4) 0;
padding: 0;
border: 0;
color: var(--ink);
text-align: left;
font-family: var(--font-head);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.45;
}
body .purchaseButtonModal__text,
body .purchaseButtonModal__resultText,
body .salesPeriodModal__text {
margin: 0 0 var(--sp-3);
font-size: .95rem;
line-height: 1.8;
}
body .salesPeriodModal__subText,
body .purchaseButtonModal__informationText {
margin: 0 0 var(--sp-3);
color: var(--hatch-shade);
font-size: .85rem;
line-height: 1.7;
}
body .purchaseButtonModal__information {
margin: var(--sp-3) 0 0;
padding: 0;
border-radius: 0;
background: none;
display: flex;
gap: var(--sp-2);
color: var(--hatch-shade);
}
body .purchaseButtonModal__label,
body .salesPeriodModal__label {
margin: var(--sp-4) 0 var(--sp-1);
color: var(--hatch-shade);
font-size: .85rem;
}
body .purchaseButtonModal__input,
body .salesPeriodModal__input {
display: block;
width: 100%;
height: auto;
margin: 0;
line-height: 1.5;
color: var(--ink);
min-height: 44px;
padding: var(--sp-1) 0;
border: 0;
border-bottom: 1px solid var(--ink);
border-radius: 0;
background: transparent;
font-size: 1rem;
-webkit-appearance: none;
appearance: none;
}
body .purchaseButtonModal__inputArea {
display: flex;
align-items: center;
gap: var(--sp-2);
}
body .purchaseButtonModal__inputArea .purchaseButtonModal__input {
width: 5em;
text-align: center;
}
body .purchaseButtonModal__error,
body .salesPeriodModal__error {
margin: var(--sp-2) 0 0;
color: #9b1c1c;
font-size: .85rem;
}
body .purchaseButtonModal__errorIcon,
body .salesPeriodModal__errorIcon {
display: inline-block;
width: 14px;
height: 14px;
margin-right: 4px;
vertical-align: -2px;
}
body .purchaseButtonModal__btn,
body .salesPeriodModal__btn {
display: block;
width: 100%;
min-height: 48px;
margin-top: var(--sp-5);
padding: var(--sp-2) var(--sp-5);
border: 1px solid var(--ink);
border-radius: 0;
background: var(--ink);
color: var(--kent);
font-size: 1rem;
letter-spacing: .06em;
}
body .purchaseButtonModal__btn--close,
body .salesPeriodModal__btn--close {
background: var(--kent);
color: var(--ink);
}
body .purchaseButtonModal__btn:disabled {
border-color: var(--hatch);
background: transparent;
color: var(--hatch-shade);
cursor: not-allowed;
}
body .purchaseButtonModal__ageVerificationWarningText {
margin: var(--sp-4) 0 0;
font-size: .9rem;
}
body .purchaseButtonModal__closeIcon,
body .salesPeriodModal__closeIcon {
position: absolute;
top: var(--sp-3);
right: var(--sp-3);
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
}
body .purchaseButtonModal__closeIcon::before,
body .purchaseButtonModal__closeIcon::after,
body .salesPeriodModal__closeIcon::before,
body .salesPeriodModal__closeIcon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 1.5px;
margin: -1px 0 0 -10px;
background: var(--ink);
transform: rotate(45deg);
}
body .purchaseButtonModal__closeIcon::after,
body .salesPeriodModal__closeIcon::after {
transform: rotate(-45deg);
}
.section-narrow {
max-width: calc(var(--measure) + 2 * var(--gutter));
margin-inline: auto;
}
.prose {
max-width: var(--measure);
font-size: 1.0625rem;
line-height: 2;
overflow-wrap: anywhere;
}
.prose > * + * {
margin-top: var(--sp-5);
}
.prose a {
text-decoration-line: underline;
}
.page-head {
margin-bottom: var(--sp-l);
}
.page-sub {
margin: var(--sp-3) 0 0;
color: var(--hatch-shade);
font-size: .95rem;
line-height: 1.7;
}
.lead {
max-width: var(--measure);
margin: 0 0 var(--sp-xl);
font-size: 1.0625rem;
line-height: 2;
overflow-wrap: anywhere;
}
.lead a {
text-decoration-line: underline;
}
.activity-list {
display: flex;
flex-direction: column;
gap: var(--sp-6);
max-width: var(--measure);
}
.activity__head {
display: flex;
gap: var(--sp-4);
align-items: baseline;
margin-bottom: var(--sp-2);
}
.activity__name {
font-family: var(--font-head);
font-weight: 600;
font-size: 1.15rem;
}
.activity__since {
color: var(--hatch-shade);
font-size: .95rem;
}
.activity__body {
margin: 0;
}
.more-links {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1) var(--sp-5);
margin: var(--sp-6) 0 0;
padding: 0;
list-style: none;
}
.more-links a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.contact-links {
max-width: var(--measure);
margin: 0;
padding: 0;
list-style: none;
}
.contact-links li + li {
margin-top: var(--sp-4);
}
.contact-links a {
display: grid;
grid-template-columns: 8rem 1fr;
gap: var(--sp-4);
text-decoration: none;
}
.contact-links .label {
color: var(--hatch-shade);
}
.contact-links .value {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: var(--ul-offset);
overflow-wrap: anywhere;
}
.contact-links a:hover .value {
text-decoration-style: double;
text-underline-offset: 3px;
}
@media (max-width: 480px) {
.contact-links a {
grid-template-columns: 1fr;
gap: 0;
}
}
@media (min-width: 1100px) {
.section-narrow {
max-width: 1440px;
display: grid;
grid-template-columns: [rail-start] minmax(12rem, 1fr) [rail-end main-start] minmax(0, var(--measure)) [main-end side-start] minmax(0, 1fr) [side-end];
column-gap: var(--sp-xl);
align-items: start;
}
.section-narrow > * {
grid-column: main;
min-width: 0;
}
.section-narrow > .page-head {
grid-column: rail;
grid-row: 1 / span 40;
position: sticky;
top: calc(var(--header-h) + 2.2rem);
margin: 0;
}
.section-narrow > .page-head .section-title {
font-size: clamp(2.1rem, 2.6vw, 2.6rem);
}
}
.pc:not(:has(*)) {
display: none;
}
.pc {
padding-block: var(--sp-xl) var(--sp-section);
}
.pc .main {
width: auto;
max-width: var(--measure);
height: auto;
margin: 0;
padding: 0;
background: none;
text-align: left;
}
.pc .inquirySection,
#privacy,
#law {
width: auto;
max-width: var(--measure);
margin: 0;
padding: 0;
background: none;
font-family: var(--font-text);
font-size: 1rem;
line-height: 1.9;
color: var(--ink);
text-align: left;
}
.inquirySection h1,
#privacy h2,
#law h2 {
margin: 0 0 var(--sp-l);
font-family: var(--font-head);
font-weight: 400;
font-size: clamp(2.1rem, 5vw, 3.4rem);
line-height: 1.15;
letter-spacing: .01em;
text-transform: capitalize;
color: var(--ink);
}
#privacy h2,
#law h2 {
font-size: clamp(1.7rem, 4vw, 2.6rem);
line-height: 1.3;
text-transform: none;
}
.inquirySection p {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ink);
}
.inquirySection form {
width: auto;
max-width: 36rem;
margin: var(--sp-6) 0 0;
}
.inquirySection dl {
margin: 0;
}
.inquirySection dl dt {
margin: 0 0 var(--sp-1);
color: var(--ink);
font-size: .95rem;
line-height: 1.6;
}
.inquirySection dl dt span {
margin-left: var(--sp-2);
color: var(--hatch-shade);
font-size: .85rem;
line-height: 1;
}
.inquirySection dl dd {
margin: 0 0 var(--sp-5);
font-size: 1rem;
}
.inquirySection dl dd.error,
.inquirySection dl dd dd.error {
margin: var(--sp-1) 0 0;
color: #9b1c1c;
font-size: .85rem;
}
.inquirySection dl dd.error:empty {
display: none;
}
.inquirySection input[type="text"],
.inquirySection input[type="email"],
.inquirySection input[type="tel"],
.inquirySection input:not([type]),
.inquirySection textarea {
display: block;
width: 100%;
min-height: 48px;
margin: 0;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--hatch);
border-radius: 0;
background: #fff;
box-shadow: none;
font-size: 1rem;
line-height: 1.6;
-webkit-appearance: none;
appearance: none;
transition: border-color var(--dur-state) var(--ease);
}
.inquirySection textarea {
min-height: 12rem;
resize: vertical;
}
.inquirySection input:focus,
.inquirySection textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 1px var(--ink);
}
.inquirySection .control-panel {
margin-top: var(--sp-6);
}
.inquirySection .control-panel input[type="submit"],
.inquirySection .control-panel button,
#inquiryCompleteSection a {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 12rem;
min-height: 52px;
margin: 0 var(--sp-3) var(--sp-3) 0;
padding: 0 var(--sp-6);
border: 1px solid var(--ink);
border-radius: 0;
background: var(--ink);
color: var(--kent);
font-family: var(--font-text);
font-size: 1rem;
font-weight: 400;
letter-spacing: .1em;
text-decoration: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: box-shadow var(--dur-state) var(--ease);
}
.inquirySection .control-panel input[type="submit"]:hover,
.inquirySection .control-panel button:hover,
#inquiryCompleteSection a:hover {
opacity: 1;
box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink);
text-decoration: none;
}
.inquirySection .control-panel input[type="submit"]:not(#buttonLeave):not(:last-of-type) {
background: var(--bg);
color: var(--ink);
}
#inquiryConfirmSection dd {
padding: 0;
font-size: 1rem;
white-space: pre-wrap;
}
#inquiryCompleteSection p {
margin: var(--sp-5) 0 0;
line-height: 1.9;
}
#inquiryCompleteSection a {
margin-top: var(--sp-6);
}
.inquirySection form + p,
.inquirySection form > p[style] {
margin-left: 0 !important;
}
#privacy .privacy_intro {
margin: 0 0 var(--sp-6);
}
#privacy dl {
margin: 0;
}
#privacy dt,
#privacy h3 {
margin: var(--sp-7) 0 var(--sp-3);
font-family: var(--font-head);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.6;
}
#privacy dd {
margin: 0;
}
#privacy ul {
margin: var(--sp-3) 0 0;
padding: 0;
list-style: none;
}
#privacy li + li {
margin-top: var(--sp-2);
}
#privacy a,
#law a {
overflow-wrap: anywhere;
text-decoration-line: underline;
}
#law h3 {
margin: var(--sp-6) 0 var(--sp-1);
padding-top: var(--sp-5);
border-top: 1px solid var(--line);
color: var(--hatch-shade);
font-family: var(--font-text);
font-size: .9rem;
font-weight: 400;
letter-spacing: .04em;
}
#law h2 + h3 {
border-top: 0;
padding-top: 0;
}
#law p {
margin: 0;
}
#law .law_attention {
margin: var(--sp-3) 0 0;
padding: 0 0 0 var(--sp-4);
border-left: 1px solid var(--hatch);
background: none;
color: var(--hatch-shade);
font-size: .9rem;
line-height: 1.8;
}
#law .law_anchor:link,
#law .law_anchor:visited {
color: var(--ink);
font-weight: 400;
}
#law .law__telnum {
flex-wrap: wrap;
gap: var(--sp-2);
}
#law .law__telnum img {
display: inline-block;
vertical-align: middle;
}
#law div[class$="Term"] {
margin-top: var(--sp-3);
}
#law div[class$="Term"] p {
margin: 0;
}
#law [class$="Term__title"],
#law .atobaraiTerm__title {
margin: 0 0 var(--sp-1);
font-size: .95rem;
}
#law [class$="Term__body"] {
padding-left: var(--sp-4);
}
.pc .main #about {
width: auto;
max-width: var(--measure);
margin: 0;
padding: 0;
color: var(--ink);
}
html:not(.js) .pc .main #about.blogListMain::before {
content: "Blog";
display: block;
margin: 0 0 var(--sp-l);
padding: 0;
border: 0;
font-family: var(--font-head);
font-size: clamp(2.1rem, 5vw, 3.4rem);
font-weight: 400;
line-height: 1.15;
color: var(--ink);
}
.pc .main #about .blog_inner {
display: block;
margin: 0;
padding: 0;
border: 0;
}
.pc .main #about.blogListMain .blog_inner + .blog_inner {
margin-top: var(--sp-7);
}
.pc .main #about .blog_title {
margin: 0;
}
.pc .main #about .blog_title h2 {
margin: 0;
font-family: var(--font-head);
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
font-weight: 600;
line-height: 1.45;
letter-spacing: .03em;
text-transform: none;
}
.pc .main #about.blogDetail .blog_title h2 {
font-size: clamp(1.4rem, 6.4vw, 2.5rem);
line-height: 1.4;
}
.pc .main #about .blog_title h2 a {
text-decoration: none;
}
.pc .main #about .blog_title h2 a:hover {
text-decoration-line: underline;
text-decoration-style: double;
}
.pc .main #about .blog_publish,
.pc .main #about .publish_date {
margin: var(--sp-2) 0 0;
color: var(--hatch-shade);
font-size: .95rem;
}
.publish_date.blog_pinned::before {
content: "\e929";
font-family: "shopicon";
padding: 0 4px 0 0;
}
.pc .main #about .blog_head_image {
height: auto;
margin: var(--sp-4) 0 0;
padding: 0;
overflow: visible;
}
.pc .main #about .blog_head_image img {
position: static;
width: 100%;
height: auto;
transform: none;
}
.pc .main #about .blog_body,
.pc .main #about .blog_contents {
margin-top: var(--sp-4);
font-size: 1.0625rem;
line-height: 2;
overflow-wrap: anywhere;
}
.pc .main #about .blog_body > * + * {
margin-top: var(--sp-5);
}
.pc .main #about .blog_body h1,
.pc .main #about .blog_body h2,
.pc .main #about .blog_body h3 {
margin-top: var(--sp-7);
font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.pc .main #about .blog_body b,
.pc .main #about .blog_body strong {
font-weight: 600;
}
.pc .main #about .blog_body i,
.pc .main #about .blog_body em {
font-style: italic;
}
.pc .main #about .blog_body a {
text-decoration-line: underline;
}
.pc .main #about .blog_body img {
width: auto;
max-width: 100%;
height: auto;
margin-inline: auto;
}
.pc .main #about .blog_body iframe {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
.pc .main #about .read_more {
margin-top: var(--sp-3);
}
.pc .main #about .read_more > a {
display: inline;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font-size: 1rem;
text-decoration-line: underline;
}
.pc .main #about .social {
margin-top: var(--sp-5);
text-align: left;
}
.pc .main #about .social > ul {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
}
.pc .main #about .social ul li {
float: none;
margin: 0;
}
.pc .paginate-wrp,
.pc .paginate {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
margin-top: var(--sp-7);
padding: 0;
list-style: none;
font-size: 1rem;
}
.pc .paginate a,
.pc .paginate span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.pc .main .communityMain {
width: auto;
padding: 0;
}
@media (max-width: 768px) {
.pc .main .communityMain .communityItems,
.pc .main .communityMain #productsLimitedUrl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.pc .main .communityMain .communityItems .communityItem {
width: 48%;
margin: 0 0 12px 0;
}
.pc .main .communityMain #productsLimitedUrl .urlBox {
width: 100%;
margin: 0 0 12px 0 !important;
}
}
.site-footer {
margin-top: auto;
padding-block: var(--sp-6) calc(var(--sp-7) + var(--safe-b));
color: var(--hatch-shade);
font-size: .95rem;
}
.site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-4) var(--sp-6);
}
.site-footer__links {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--sp-2);
}
.site-footer .links {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--sp-2) var(--sp-5);
margin: 0;
padding: 0;
list-style: none;
}
.site-footer a {
color: var(--ink);
}
.site-footer .links--fine a {
color: var(--hatch-shade);
}
@media (max-width: 700px) {
.site-footer__links {
align-items: flex-start;
}
.site-footer .links {
justify-content: flex-start;
}
}
#i18 {
position: static;
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
z-index: auto;
}
#i18 .lang,
#i18 .currency {
position: relative;
float: none;
margin: 0;
}
#i18 .lang::before,
#i18 .currency::before {
content: "";
position: absolute;
top: 50%;
right: 2px;
width: 7px;
height: 7px;
margin-top: -5px;
border-right: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
background: none;
transform: rotate(45deg);
pointer-events: none;
}
#i18 select,
.x_i18nSelectBox {
min-height: 44px;
padding: 0 20px 0 0;
border: 0;
border-bottom: 1px solid var(--ink);
border-radius: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-text);
font-size: .95rem;
line-height: 1.4;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.informationBanner {
position: relative;
z-index: 71;
}
@media print {
html,
body {
background: #fff !important;
color: #000;
}
.skip-link,
.site-header,
.nav,
.buybar,
.wg-filter,
.wg-more,
.wv-links,
.wv-share,
.wv-report,
.wv-bar,
.wv-edge,
.wv-scale,
.wv-views,
.wv-nav,
.wv-help,
.wg-range,
.site-footer .links {
display: none !important;
}
.wv {
display: block;
height: auto;
}
.wv-stage {
height: 70vh;
}
.wv-info {
overflow: visible;
}
}