:root {
--gapWide: clamp(24px, calc(24px + (100vw - 769px) * 0.03456), 40px);
--gapNarrow: clamp(16px, calc(16px + (100vw - 375px) * 0.0204), 24px);
--sectionGap: clamp(64px, calc(64px + (100vw - 375px) * 0.03005), 96px);
--subSectionGap: clamp(48px, calc(48px + (100vw - 375px) * 0.01502), 64px);
--firstViewGap: var(--gapNarrow);
--shippingBarH: 32px;
--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10C40 -3 40 -3 80 10S120 23 160 10V20H0Z'/%3E%3C/svg%3E");
--c-base: #FFFFFF;
--c-surface: #FFFFFF;
--c-subtle: #F7F1E8;
--c-line: #E5D9CA;
--c-text: #4D3D2D;
--c-textSub: #76675A;
--c-yellow: #FFD93A;
--c-brown: #574030;
--c-navy: #384663;
--c-orange: #F5A04E;
--c-orangeTint: #FFE6CF;
--c-orangeMark: #FBC48E;
--c-orangeText: #A8530F;
--c-onDark: #FFFEFA;
--c-onDarkSub: #E9DED3;
}
body.shop { background-color: var(--c-base); color: var(--c-text); }
body.shop {
font-family: Lato, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", YuGothic, Meiryo, sans-serif;
}
body.shop button,
body.shop input,
body.shop select,
body.shop textarea {
font-family: inherit;
}
.informationBanner { display: none !important; }
body.shop #mainHeader {
padding-top: calc(62px + var(--shippingBarH));
}
.shippingBar {
position: fixed;
top: 62px;
left: 0;
right: 0;
z-index: 999;
height: var(--shippingBarH);
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
box-sizing: border-box;
background: var(--c-navy);
box-shadow: 0 2px 4px rgba(56, 70, 99, .15);
color: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: .04em;
white-space: nowrap;
}
.shippingBar strong {
color: inherit;
font-size: 16px;
margin: 0 2px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
body#shopTopPage .item a .itemTitle h2 {
white-space: normal;
overflow: visible;
line-height: 1.5;
font-size: clamp(14px, 0.25vw + 13px, 15px);
font-weight: 500;
color: var(--c-text);
}
body#shopTopPage .item .itemTitle {
margin-bottom: 12px;
}
body#shopTopPage .item .itemDetail .itemPrice,
body#shopTopPage .item .itemDetail .discountPrice__calcPrice {
font-size: 16px;
font-weight: bold;
color: var(--c-text);
letter-spacing: 0.5px;
}
body#shopTopPage .item .itemDetail .discountPrice__ratio {
font-size: 12px;
}
body#shopTopPage .itemList {
grid-template-columns: repeat(auto-fill, minmax(min(160px, calc(50% - 15px)), 1fr)) !important;
justify-content: start !important;
}
@media(min-width: 769px) {
body#shopTopPage .itemList {
gap: var(--gapWide) !important;
}
}
@media(max-width: 768px) {
body#shopTopPage .itemList {
gap: calc(var(--gapNarrow) + 6px) !important;
}
}
body#shopTopPage .itemList--collapsed {
max-height: 900px;
overflow: hidden;
position: relative;
}
body#shopTopPage .itemList {
row-gap: 0 !important;
}
body#shopTopPage .itemList .item {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
}
body#shopTopPage .item .itemImg {
align-self: end;
margin: 0;
container-type: inline-size;
}
body#shopTopPage .item .itemImg a::before {
display: none !important;
}
body#shopTopPage .item .itemImg img.image-resize {
position: static;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: contain;
display: block;
}
body#shopTopPage .item .itemImg img.image-resize.is-wide {
object-fit: cover;
}
body#shopTopPage .itemList .item > a {
padding-bottom: var(--gapWide);
}
@media(max-width: 768px) {
body#shopTopPage .itemList .item > a {
padding-bottom: calc(var(--gapNarrow) * 2);
}
}
.itemArea {
position: relative;
margin: calc(var(--sectionGap) + 18px) 0 calc(-1 * var(--sectionGap));
padding: var(--subSectionGap) 0 var(--sectionGap);
border-image: linear-gradient(var(--c-yellow), var(--c-yellow)) fill 0 / / 0 100vmax;
}
.itemArea::before {
content: '';
position: absolute;
top: -17px;
left: 50%;
width: 100vw;
height: 18px;
transform: translateX(-50%);
background: var(--c-yellow);
-webkit-mask: var(--wave) repeat-x 0 0 / 160px 18px;
mask: var(--wave) repeat-x 0 0 / 160px 18px;
}
body.shop {
overflow-x: clip;
}
.itemArea .itemSort {
display: none;
}
.itemArea .categoryBrowser {
margin: 0 0 28px;
}
.categoryBrowser {
margin: var(--subSectionGap) 0;
container-type: inline-size;
scroll-margin-top: calc(78px + var(--shippingBarH));
}
.categoryBrowser__panel {
padding-top: 16px;
}
.categoryBrowser__tagRow {
align-items: center;
gap: 4px 16px;
margin: 0;
}
.categoryBrowser__tagRow::before {
content: 'タグで探す';
font-size: 12px;
color: var(--c-text);
}
.categoryBrowser__tagRow .itemTags__chip {
padding: 2px 0;
border-radius: 0;
background-color: transparent;
color: var(--c-text);
font-weight: normal;
text-decoration: underline 2px var(--c-orange);
text-underline-offset: 4px;
}
.categoryBrowser__tagRow .itemTags__chip:hover,
.categoryBrowser__tagRow .itemTags__chip.is-active {
background-color: transparent;
color: var(--c-orangeText);
}
.categoryBrowser__tagResult {
margin: 16px 0 0;
font-size: 15px;
font-weight: bold;
color: var(--c-text);
}
.categoryBrowser__tabs {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 720px;
border: 1.5px solid var(--c-text);
border-radius: 6px;
overflow: hidden;
}
@container (min-width: 600px) {
.categoryBrowser__tabs {
grid-template-columns: repeat(4, 1fr);
}
}
.categoryBrowser__tab {
padding: 11px 8px;
border: none;
background: rgba(255, 255, 255, 0.35);
box-shadow: inset 0 0 0 0.75px var(--c-text);
font-size: clamp(12.5px, 0.5vw + 11px, 15px);
font-weight: bold;
color: var(--c-text);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.categoryBrowser__tab:hover {
background-color: rgba(255, 255, 255, 0.7);
}
.categoryBrowser__moreLink {
text-align: center;
margin: 20px 0 40px;
}
.categoryBrowser__moreLink a {
display: inline-block;
padding: 13px 20px;
border: 1px solid var(--c-textSub);
border-radius: 999px;
font-size: 13px;
font-weight: bold;
color: var(--c-text);
text-decoration: none;
}
.categoryBrowser__moreLink a:hover {
background: var(--c-orangeTint);
}
.itemSort {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 16px;
}
.itemSort__label {
font-size: 13px;
font-weight: bold;
color: var(--c-text);
}
.itemSort__btn {
padding: 10px 2px;
margin-right: 6px;
border: none;
border-bottom: 2px solid transparent;
background: none;
font-size: 13px;
color: var(--c-text);
cursor: pointer;
transition: border-color 0.2s ease;
}
.itemSort__btn:hover {
border-bottom-color: var(--c-orange);
}
.itemSort__btn.is-active {
font-weight: bold;
border-bottom-color: var(--c-text);
}
body#shopTopPage .item:hover .itemImg {
border: none;
padding: 1px;
}
body#shopTopPage .item:hover a {
color: var(--c-text);
}
body#shopTopPage .item .itemImg img {
transition: opacity 0.2s ease;
}
body#shopTopPage .item:hover .itemImg img {
opacity: 0.8;
}
.mainNav__categoryArrow {
display: inline-block;
margin-left: 4px;
vertical-align: middle;
transition: transform 0.2s ease;
}
.mainNav__categoryMenu.is-open .mainNav__categoryArrow {
transform: rotate(180deg);
}
.itemTags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 16px 0 0;
}
.itemTags__chip {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 999px;
background-color: var(--c-orangeTint);
color: var(--c-text);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}
.itemTags__chip:hover,
.itemTags__chip.is-active {
background-color: var(--c-orange);
color: var(--c-text);
}
.mainNav__megaSubList small, .mobileNav__linkList small, .siteFooter__list small { display: block; font-size: 11px; color: var(--c-textSub); font-weight: normal; }
body.shop #mainFooter .siteFooter__list small { color: var(--c-onDarkSub); }
.mainNav__megaPanel--simple .mainNav__megaSubList a { white-space: nowrap; }
@keyframes megaIn { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@keyframes megaOut { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
body.shop #shopHeader .mainNav__categoryMenu.is-open .mainNav__megaPanel,
body.shop #shopHeader .mainNav__categoryMenu:hover .mainNav__megaPanel { animation: megaIn .22s ease-out; }
body.shop #shopHeader .mainNav__categoryMenu.is-closing .mainNav__megaPanel { animation: megaOut .16s ease-in forwards; }
}
body.shop #mainHeader {
max-width: calc(100% - 20px);
}
body.shop #shopHeader nav ul li,
body.shop #shopHeader nav ul li:hover {
height: auto;
min-height: 40px;
border-bottom: none;
}
body.shop #shopHeader .mainNav__megaSubList a {
position: relative;
display: inline-block;
}
body.shop #shopHeader .mainNav__megaSubList a::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s ease;
}
body.shop #shopHeader .mainNav__megaSubList a:hover::after {
transform: scaleX(1);
}
body.shop #shopHeader .mainNav__megaSubList a:hover {
color: var(--c-orangeText);
}
body.shop #shopHeader .mainNav__megaSubList a {
font-size: 13px;
color: var(--c-textSub);
}
.mobileNav__subList a {
font-size: 14px;
color: var(--c-textSub);
}
body.shop #mainFooter .siteFooter__heading {
font-size: 14px;
}
body.shop #mainFooter .siteFooter__list a,
body.shop #mainFooter .siteFooter__text {
font-size: 13px;
line-height: 1.7;
}
body.shop #mainFooter .siteFooter__text a {
color: inherit;
text-decoration: underline;
}
body.shop #mainFooter .siteFooter__list--icon {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 16px;
}
.curryAround {
position: relative;
overflow: hidden;
margin: var(--firstViewGap) 0 0;
padding: 60px var(--gapWide);
box-sizing: border-box;
text-align: center;
background-color: var(--c-text);
min-height: 290px;
display: flex;
flex-direction: column;
justify-content: center;
}
.curryAround__bg {
position: absolute;
left: 0;
right: 0;
top: -150px;
bottom: -150px;
z-index: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), url('https://basefile.akamaized.net/pocketcurry-base-shop/6a919201b14b4/E382ABE383ACE383BCE794BBE5838F.png');
background-size: 100% 100%, cover;
background-position: center center, center center;
background-repeat: no-repeat;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
animation: fadeIn .35s ease;
}
@keyframes curryAroundParallax { from { transform: translateY(-80px); } to { transform: translateY(140px); } }
@media(prefers-reduced-motion: no-preference) {
.curryAround { view-timeline-name: --curryAround; }
.curryAround__bg {
animation: fadeIn .35s ease, curryAroundParallax linear both;
animation-timeline: auto, --curryAround;
animation-range: normal, cover;
}
}
.curryAround__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1152px;
margin: 0 auto;
}
@media(max-width: 768px) {
.curryAround {
padding-left: var(--gapNarrow);
padding-right: var(--gapNarrow);
}
}
@media(min-width: 769px) {
.curryAround {
min-height: 400px;
}
}
.curryAround__heading {
font-size: 22px;
font-weight: bold;
color: #fff;
margin: 0 0 28px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.curryAround__cards {
display: flex;
justify-content: center;
background-color: rgba(255, 255, 255, 0.82);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 12px;
overflow: hidden;
max-width: 620px;
margin: 0 auto;
}
.curryAround__card {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 20px 12px;
text-decoration: none;
border-right: 1px solid rgba(0, 0, 0, 0.08);
text-align: center;
box-sizing: border-box;
transition: background-color 0.2s;
}
.curryAround__card:hover {
background-color: rgba(255, 255, 255, 0.55);
}
.curryAround__card:last-child {
border-right: none;
}
.curryAround__icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.curryAround__icon img {
max-width: 100%;
max-height: 100%;
display: block;
}
.curryAround__cardText {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
min-width: 0;
}
.curryAround__cardTitle {
display: block;
font-size: 14px;
font-weight: bold;
color: var(--c-text);
}
.curryAround__cardDesc {
display: block;
font-size: 12px;
color: var(--c-textSub);
line-height: 1.4;
}
.nobr {
white-space: nowrap;
}
.curryAround__card:hover .curryAround__cardTitle {
color: var(--c-orangeText);
}
@media(max-width: 768px) {
.curryAround__cards {
flex-direction: column;
max-width: 440px;
}
.curryAround__card {
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.curryAround__card:last-child {
border-bottom: none;
}
}
.pickup__heading {
display: inline-block;
padding: 0 4px;
background: linear-gradient(transparent 62%, var(--c-orangeMark) 62%);
}
.pickup {
margin: var(--subSectionGap) 0 0;
}
.shopMain > .pickup ~ .pickup {
margin-top: var(--sectionGap);
}
#rankingSection,
#recommendSection {
scroll-margin-top: calc(78px + var(--shippingBarH));
}
.pickup__heading {
font-size: 20px;
font-weight: bold;
color: var(--c-text);
margin: 0 0 16px;
}
.pickup {
--rowGutter: var(--gapWide);
}
@media(max-width: 768px) {
.pickup {
--rowGutter: var(--gapNarrow);
}
}
.pickup__row {
display: flex;
gap: var(--rowGutter);
margin: 0 calc(-1 * var(--rowGutter));
padding: 0 var(--rowGutter) 4px;
scroll-padding-inline: var(--rowGutter);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.pickup__row::-webkit-scrollbar {
display: none;
}
.pickup__categoryGroup {
margin-bottom: 32px;
}
.pickup__categoryGroup:last-child {
margin-bottom: 0;
}
.pickup__more {
display: block;
width: fit-content;
margin: 24px auto 0;
padding: 13px 28px;
border: 1px solid var(--c-textSub);
border-radius: 999px;
font-size: 14px;
font-weight: bold;
color: var(--c-text);
text-decoration: none;
transition: background-color .2s;
}
.pickup__more:hover {
background: var(--c-orangeTint);
}
.pickup__card {
position: relative;
flex: 0 0 auto;
width: min(200px, calc((100% - 2 * var(--rowGutter)) / 2.4));
text-decoration: none;
color: var(--c-text);
}
.pickup__cardImage {
position: relative;
display: block;
width: 100%;
aspect-ratio: 25 / 32;
border-radius: 8px;
overflow: hidden;
}
.pickup__soldOut {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 4px 0;
background: rgba(77, 61, 45, .85);
color: #fff;
font-size: 12px;
font-weight: bold;
letter-spacing: .08em;
text-align: center;
}
.pickup__cardImage img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.pickup__cardImage img.is-wide {
height: auto;
aspect-ratio: 1;
margin-top: 14%;
object-fit: cover;
}
.pickup__cardTitle {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 8px;
font-size: 13px;
font-weight: 500;
line-height: 1.5;
}
.pickup__cardPrice {
display: block;
margin-top: 4px;
font-size: 15px;
font-weight: bold;
color: var(--c-text);
}
.pickup__categoryGroup {
position: relative;
}
.pickup__grid {
scroll-snap-type: x mandatory;
}
.pickup__grid .pickup__card {
scroll-snap-align: start;
width: min(200px, calc((100% - 2 * var(--rowGutter)) / 2.4));
}
.pickup__arrow {
position: absolute;
z-index: 2;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
color: var(--c-text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.pickup__arrow:hover {
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.pickup__arrow[hidden] {
display: none;
}
.pickup__arrow--prev { left: -20px; }
.pickup__arrow--next { right: -20px; }
@media(max-width: 768px) {
.pickup__arrow {
display: none;
}
}
.pickup__inner {
container-type: inline-size;
}
#rankingSection .pickup__row {
padding-top: 8px;
}
#rankingSection .pickup__card,
#rankingSection .pcSkel {
width: min(160px, calc((100% - 2 * var(--rowGutter)) / 2.4));
}
.pickup__lead:empty {
display: none;
}
.pickup__lead {
margin: -8px 0 16px;
font-size: 14px;
color: var(--c-textSub);
}
.pickup__rank {
position: absolute;
top: -8px;
left: -8px;
z-index: 1;
min-width: 32px;
height: 32px;
padding: 0 4px;
border-radius: 999px;
background: var(--c-text);
box-shadow: 0 0 0 2px #fff;
color: #fff;
font-size: 15px;
font-weight: bold;
line-height: 32px;
text-align: center;
box-sizing: border-box;
}
.pickup__rank--crown {
min-width: 40px;
height: 34px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: .3em;
background: none;
box-shadow: none;
color: var(--c-text);
line-height: 1;
filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.pickup__rank--crown::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: var(--crownColor);
-webkit-mask: var(--crown) center / contain no-repeat;
mask: var(--crown) center / contain no-repeat;
--crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M3 10L11 18L20 5L29 18L37 10L34 32H6Z'/%3E%3Ccircle cx='3' cy='9' r='3'/%3E%3Ccircle cx='20' cy='4' r='3'/%3E%3Ccircle cx='37' cy='9' r='3'/%3E%3C/svg%3E");
}
.pickup__rank--1 { --crownColor: #E6B422; }
.pickup__rank--2 { --crownColor: #B8BEC4; }
.pickup__rank--3 { --crownColor: #C8895A; }
.pickup__note {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.6;
color: var(--c-textSub);
}
.rankingList {
margin: 24px 0 32px;
}
.rankingList__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 24px 16px;
}
.rankingList__grid .pickup__card {
width: auto;
}
.blogDetail .blog_body .rankingList a {
color: var(--c-text);
text-decoration: none;
}
.blogDetail .blog_body .rankingList img {
width: 100%;
max-height: none;
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 0;
}
.main #about.blogDetail .rankingList p.pickup__note {
font-size: 12px;
line-height: 1.6;
}
.pickup__empty {
color: var(--c-textSub);
font-size: 13px;
}
@keyframes pcShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pcFadeUp { from { opacity: 0; translate: 0 10px; } }
.pcSkel::before,
.pcSkel::after {
content: '';
display: block;
border-radius: 8px;
background: linear-gradient(90deg, rgba(0, 0, 0, .06) 25%, rgba(0, 0, 0, .02), rgba(0, 0, 0, .06) 75%) 0 0 / 200% 100%;
animation: pcShimmer 1.6s ease-in-out infinite;
}
.pcSkel::before {
aspect-ratio: 25 / 32;
}
.pcSkel::after {
width: 80%;
height: 12px;
margin-top: 10px;
border-radius: 2px;
}
.pickup__row .pcSkel {
flex: 0 0 auto;
width: min(200px, calc((100% - 2 * var(--rowGutter)) / 2.4));
}
.pcWait {
opacity: 0;
}
.is-appearing {
animation: pcFadeUp .45s ease-out both;
animation-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
.pcSkel::before,
.pcSkel::after,
.is-appearing {
animation: none;
}
}
body#shopTopPage .shopMain {
max-width: 1232px;
margin: var(--sectionGap) auto;
padding: 0 var(--gapWide);
box-sizing: border-box;
}
body.shop #mainHeader .categoryTitle01 {
margin-top: var(--subSectionGap);
}
body.shop #shopHeader h1.categoryTitle01 {
font-size: 20px;
letter-spacing: inherit;
margin-bottom: 0;
}
.pcVisuallyHidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.catCrumbs {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
font-size: 12px;
line-height: 1.8;
color: var(--c-textSub);
}
.catCrumbs a {
color: var(--c-textSub);
text-decoration: underline;
text-underline-offset: 3px;
}
.catCrumbs > * + *::before {
content: '›';
margin: 0 8px;
color: var(--c-textSub);
}
.catCrumbs:not(:empty) + .categoryTitle01 {
margin-top: 24px !important;
}
.catSiblings {
position: relative;
display: flex;
overflow-x: auto;
scrollbar-width: none;
margin-top: 16px;
border-bottom: 1px solid var(--c-line);
font-size: 14px;
white-space: nowrap;
}
.catSiblings > * {
padding: 10px 12px;
color: var(--c-textSub);
text-decoration: none;
}
.catSiblings > :first-child {
margin-left: auto;
}
.catSiblings > :last-child {
margin-right: auto;
}
.catSiblings span,
.catSiblings a.is-going {
font-weight: bold;
color: var(--c-text);
box-shadow: inset 0 -3px var(--c-orange);
}
.catChips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
}
.catChips > * {
padding: 6px 14px;
border: 1px solid var(--c-line);
border-radius: 4px;
font-size: 13px;
color: var(--c-text);
text-decoration: none;
}
.catChips span,
.catChips a.is-going {
border-color: var(--c-brown);
background-color: var(--c-brown);
color: var(--c-onDark);
font-weight: bold;
}
.catSiblings.is-switching span {
font-weight: normal;
color: var(--c-textSub);
box-shadow: none;
}
.catChips.is-switching span {
border-color: var(--c-line);
background-color: transparent;
color: var(--c-text);
font-weight: normal;
}
body.is-catSwitching #mainContent {
opacity: .4;
transition: opacity .15s;
}
.catChips:not(:empty) + .childCategoryList01 {
display: none;
}
body#shopTopPage:has(.categoryTitle01) .shopMain {
margin-top: 16px;
}
.catRanking {
margin-top: 32px;
}
.catRanking .pickup__heading {
display: table;
margin-inline: auto;
}
.catRanking .pickup__lead {
text-align: center;
}
.catRanking + .catSiblings {
margin-top: var(--subSectionGap);
}
.categoryShortcuts {
--shortcutsGutter: var(--gapWide);
margin-top: var(--firstViewGap);
padding: 0;
}
@media(max-width: 768px) {
.categoryShortcuts {
--shortcutsGutter: var(--gapNarrow);
}
}
.categoryShortcuts__list {
padding: 0 var(--shortcutsGutter) 4px;
scroll-padding-inline: var(--shortcutsGutter);
}
.categoryShortcuts__fade {
right: 0;
}
.categoryShortcuts__list a {
width: clamp(56px, calc((100vw - 32px) / 5.5 - 6px), 92px);
padding: 8px 0 4px;
}
.categoryShortcuts__icon {
width: clamp(46px, calc((100vw - 32px) / 5.5 - 14px), 52px);
height: auto;
aspect-ratio: 1;
background-color: var(--c-orangeTint);
}
.categoryShortcuts__list a:hover .categoryShortcuts__icon {
background-color: var(--c-orange);
}
.categoryShortcuts__label {
font-size: 12px;
color: var(--c-text);
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
.cart-qty {
background: var(--c-orangeText);
}
body#shopDetailPage #itemAttention .attention.deliveryShortestDay,
body#shopDetailPage #itemAttention .attention.salesPeriod--term,
body#shopDetailPage #itemAttention .attention.salesPeriod--willStart {
border-color: var(--c-navy);
background: var(--c-subtle);
color: var(--c-navy);
}
body#shopDetailPage #itemAttention .attention.free .free__text {
color: var(--c-navy);
}
body#shopDetailPage #itemAttention {
font-size: 13px;
color: var(--c-textSub);
}
body#shopDetailPage #itemAttention .attention a.postageOpen {
display: inline-block;
padding: 12px 4px;
margin: -12px 0;
color: var(--c-text);
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
body#shopDetailPage .shippingNote {
margin: 0 0 12px;
padding: 10px 12px;
border-left: 4px solid var(--c-orange);
background: var(--c-orangeTint);
color: var(--c-orangeText);
font-size: 14px;
font-weight: bold;
line-height: 1.6;
}
body#shopDetailPage .shippingNote span {
white-space: nowrap;
}
body#shopDetailPage .itemPrice h2 {
margin: 12px 0 0;
line-height: 1.3;
}
body#shopDetailPage .itemPrice h2 .price__mainValue {
font-size: 30px;
font-weight: bold;
color: var(--c-text);
}
body#shopDetailPage .shipBox {
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px 0;
padding: 14px 0;
border-top: 1px solid var(--c-line);
border-bottom: 1px solid var(--c-line);
}
body#shopDetailPage .shipBox > * {
margin: 0;
}
body#shopDetailPage .shipBox .postageOpen {
align-self: flex-start;
font-size: 13px;
color: var(--c-text);
text-decoration: underline;
cursor: pointer;
}
body#shopDetailPage .shipBox__date {
font-size: 14px;
color: var(--c-text);
}
body#shopDetailPage .shipBox__date b {
color: var(--c-navy);
}
body#shopDetailPage .itemDescription a {
color: var(--c-orangeText);
font-weight: bold;
text-decoration: underline;
text-underline-offset: 3px;
}
body#shopDetailPage .itemDescription a::after {
content: ' ›';
}
body#shopDetailPage .itemMoreInfo {
margin-top: 24px;
border: 1px solid var(--c-line);
border-radius: 8px;
}
body#shopDetailPage .itemMoreInfo summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 8px;
background: var(--c-subtle);
font-size: 14px;
font-weight: bold;
list-style: none;
cursor: pointer;
}
body#shopDetailPage .itemMoreInfo summary::-webkit-details-marker {
display: none;
}
body#shopDetailPage .itemMoreInfo summary::after {
content: '＋';
flex: none;
font-size: 18px;
line-height: 1;
color: var(--c-orangeText);
}
body#shopDetailPage .itemMoreInfo[open] summary {
border-bottom: 1px solid var(--c-line);
border-radius: 8px 8px 0 0;
}
body#shopDetailPage .itemMoreInfo[open] summary::after {
content: '−';
}
body#shopDetailPage .itemMoreInfo p {
margin: 0;
padding: 16px;
}
body#shopDetailPage .madeToOrder {
margin: 16px 0;
padding: 10px 12px;
border-left: 4px solid var(--c-navy);
background: var(--c-subtle);
font-size: 14px;
line-height: 1.6;
color: var(--c-text);
}
body#shopDetailPage .madeToOrder b {
color: var(--c-navy);
}
body#shopDetailPage .purchase > .shippingNote {
margin: 12px 0 0;
}
body#shopDetailPage .purchase > .bnplBanner {
margin: 16px 0;
}
body#shopDetailPage .shippingBar:not(.is-ready),
body#shopDetailPage .shippingBar:not(.is-ready) * {
color: transparent;
}
body#shopDetailPage .partnerNote {
margin: 12px 0 0;
font-size: 12px;
line-height: 1.7;
color: var(--c-textSub);
}
body#shopDetailPage .priceShip {
margin-left: 10px;
font-size: 15px;
font-weight: normal;
color: var(--c-textSub);
}
body#shopDetailPage .priceShip.is-free {
font-weight: bold;
color: var(--c-orangeText);
}
body#shopDetailPage .shipCalc {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0 0 12px;
font-size: 14px;
color: var(--c-text);
}
body#shopDetailPage .shipCalc__label {
font-weight: bold;
}
body#shopDetailPage .shipCalc__select,
body#shopDetailPage #purchase_form #itemSelect #amountSelect,
body#shopDetailPage #purchase_form #itemSelect #valiationSelect,
body#shopDetailPage #purchase_form #itemSelect select.itemOption__select {
-webkit-appearance: none;
appearance: none;
min-height: 44px;
padding: 0 36px 0 12px;
border: 1px solid var(--c-line);
border-radius: 4px;
background: var(--c-surface) 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='%234D3D2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
color: var(--c-text);
font-size: 16px;
}
body#shopDetailPage .shipCalc__result {
flex-basis: 100%;
margin: 0;
color: var(--c-textSub);
}
body#shopDetailPage .shipCalc__sub {
flex-basis: 100%;
margin: 0;
font-size: 12px;
line-height: 1.6;
color: var(--c-textSub);
}
body#shopDetailPage .shipCalc__result.is-set {
color: var(--c-text);
font-weight: bold;
}
@media(max-width: 768px) {
body#shopDetailPage #mainContent{display:flex;flex-direction:column}
body#shopDetailPage #mainContent>.item{display:contents}
body#shopDetailPage #mainContent>*{order:5}
body#shopDetailPage #mainContent>header{order:0}
body#shopDetailPage #mainContent .itemImg{order:1;display:block;height:auto}
body#shopDetailPage #mainContent .itemTags{order:2;margin:16px 0 0}
body#shopDetailPage #mainContent .purchase{order:3;margin-top:16px;padding-bottom:24px;border-top:none;border-bottom:1px solid var(--c-line)}
body#shopDetailPage #mainContent .itemDescription{order:4;margin:24px 0 0;font-size:14px;line-height:1.9}
body#shopDetailPage h1.itemTitle{margin:8px 0 16px;font-size:clamp(18px,4.6vw,22px);line-height:1.45}
body#shopDetailPage .itemImgSlide{width:100%}
body#shopDetailPage #slideImg li{width:100%!important}
body#shopDetailPage #slideImg .imgBox img:not(.label_image){display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
body#shopDetailPage #slideImgPager{display:flex;gap:8px;overflow-x:auto;float:none;width:auto;height:auto;margin-top:10px;padding:0}
body#shopDetailPage #slideImgPager li+li{margin-top:0}
body#shopDetailPage #slideImgPager .smallImgBox{width:56px;height:56px;line-height:56px;border-radius:6px;overflow:hidden}
body#shopDetailPage #slideImgPager .smallImgBox img{max-width:56px;max-height:56px}
body#shopDetailPage #slideImgPager a.active .smallImgBox{outline:2px solid var(--c-text);outline-offset:-2px}
body#shopDetailPage #itemAttention{margin-bottom:16px}
body#shopDetailPage #purchase_form{margin-bottom:20px}
body#shopDetailPage #purchase_form #amountSelect,body#shopDetailPage #purchase_form #itemSelect #amountSelect{min-width:96px;min-height:44px;font-size:16px}
body#shopDetailPage #mainContent .purchaseButton{margin-top:16px}
body#shopDetailPage .purchaseButton__btn{padding:16px 0!important;border-radius:8px;font-size:15px!important;font-weight:bold}
}
body.shop .purchaseButton__btn--addToCart {
border-color: var(--c-navy) !important;
background-color: var(--c-navy) !important;
color: #fff !important;
}
.mobileNav__mid {
margin: 2px 0 12px 12px;
}
.mobileNav__midLink {
display: block;
font-size: 13px;
font-weight: bold;
color: var(--c-textSub);
text-decoration: none;
margin-bottom: 8px;
}
@media(max-width: 768px) {
body#shopTopPage .shopMain {
padding: 0 var(--gapNarrow);
}
}
.noticeBar {
display: flex;
align-items: center;
gap: 10px;
max-width: 1232px;
margin: 12px auto 0;
padding: 10px 14px;
box-sizing: border-box;
border: 1px solid var(--c-line);
border-left: 4px solid var(--c-navy);
background: var(--c-subtle);
color: var(--c-text);
font-size: 14px;
text-decoration: none;
}
@media(max-width: 768px) {
.noticeBar {
margin: 8px var(--gapNarrow) 0;
}
}
.noticeBar__label {
flex: none;
padding: 2px 8px;
border-radius: 3px;
background: var(--c-navy);
color: var(--c-onDark);
font-size: 12px;
font-weight: bold;
}
.noticeBar__title {
flex: 1;
min-width: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.5;
font-weight: bold;
}
.noticeBar__arrow {
flex: none;
font-size: 18px;
line-height: 1;
}
.newsList {
margin: var(--sectionGap) 0;
}
.newsList[hidden] {
display: none;
}
.newsList__inner {
max-width: 1232px;
margin: 0 auto;
padding: 0 var(--gapWide);
box-sizing: border-box;
}
.newsList__items {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--c-line);
}
.newsList__items a {
display: flex;
align-items: baseline;
gap: 20px;
padding: 16px 4px;
border-bottom: 1px solid var(--c-line);
color: var(--c-text);
text-decoration: none;
}
.newsList__items a:hover .newsList__title {
text-decoration: underline;
}
.newsList__date {
flex: none;
font-size: 13px;
color: var(--c-textSub);
font-variant-numeric: tabular-nums;
}
.newsList__title {
font-size: 15px;
line-height: 1.6;
}
.newsList__more {
display: block;
width: fit-content;
margin: 20px 0 0 auto;
font-size: 14px;
color: var(--c-text);
text-decoration: underline;
}
@media(max-width: 768px) {
.newsList__inner {
padding: 0 var(--gapNarrow);
}
.newsList__items a {
flex-direction: column;
gap: 4px;
}
}
.main #about.blogListMain,
.main #about.blogDetail {
width: auto;
max-width: 760px;
margin: 0 auto;
padding: 48px var(--gapWide) 0;
box-sizing: border-box;
color: var(--c-text);
}
.blogListMain .blog_inner {
padding: 0 0 32px;
margin: 0 0 32px;
border-bottom: 1px solid var(--c-line);
}
.main #about.blogListMain h2,
.main #about.blogDetail h2 {
margin: 0 0 8px;
font-size: clamp(20px, calc(20px + (100vw - 375px) * 0.0102), 24px);
font-weight: bold;
line-height: 1.5;
letter-spacing: .02em;
text-transform: none;
color: var(--c-text);
}
.main #about.blogListMain h2 a,
.main #about.blogDetail h2 a {
color: inherit;
text-decoration: none;
}
.main #about .publish_date {
margin: 0 0 20px;
font-size: 13px;
color: var(--c-textSub);
}
.blogListMain .blog_head_image img,
.blogDetail .blog_body img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: min(clamp(250px, calc(250px + (100vw - 375px) * 0.43), 420px), 55vh);
margin-left: auto !important;
margin-right: auto !important;
border-radius: 6px;
}
.blogListMain .blog_head_image {
margin: 0 0 16px;
}
.main #about.blogListMain p,
.main #about.blogDetail p {
font-size: 15px;
line-height: 1.9;
}
.blogDetail .blog_body a {
color: var(--c-orangeText);
text-decoration: underline;
}
.blogListMain .read_more a {
display: inline-block;
margin-top: 8px;
font-size: 14px;
font-weight: bold;
color: var(--c-text);
text-decoration: underline;
}
.blogListMain .paginate {
display: flex;
justify-content: center;
gap: 8px;
padding: 0;
list-style: none;
}
.blogListMain .paginate a {
display: inline-block;
min-width: 44px;
padding: 10px 0;
text-align: center;
color: var(--c-text);
}
.main #about.blogDetail .social {
margin: 40px 0 0;
padding-top: 24px;
border-top: 1px solid var(--c-line);
}
#appsItemDetailCustomTag .appsItemDetailCustomTag_slider {
display: none;
}
.itemRelated {
max-width: calc(830px + 2 * var(--gapWide));
margin: 48px auto 0;
padding: 40px var(--gapWide) 64px;
box-sizing: border-box;
border-top: 1px solid var(--c-line);
}
.itemRelated[hidden] {
display: none;
}
@media(min-width: 769px) {
.itemRelated .pickup__row {
gap: 32px;
margin: 0;
padding: 0 0 4px;
scroll-padding-inline: 0;
}
.itemRelated .pickup__grid .pickup__card {
width: calc((100% - 4 * 32px) / 5);
}
}
@media(max-width: 768px) {
.itemRelated {
margin-top: 32px;
padding: 32px var(--gapNarrow) 48px;
}
}
.itemRelated--maker {
padding-bottom: 0;
}
.blogRanking {
max-width: 760px;
margin: 0 auto;
padding: 40px var(--gapWide) 64px;
box-sizing: border-box;
}
@media(max-width: 768px) {
.blogRanking {
padding: 32px var(--gapNarrow) 48px;
}
}
.main #about.blogDetail .blog_inner {
border-bottom: 0;
}
.main #about.blogDetail .social li:not(.tw) {
display: none;
}
@media(max-width: 768px) {
.main #about.blogListMain,
.main #about.blogDetail {
padding: 32px var(--gapNarrow) 0;
}
}
.brandStory {
--story-bg: #fff;
background: var(--story-bg);
color: var(--c-text);
margin-top: var(--sectionGap);
}
.brandStory__inner {
display: grid;
grid-template-columns: 1fr;
margin: 0 auto;
position: relative;
}
.brandStory__visual {
position: relative;
height: 360px;
transition: height 0.25s ease;
overflow: hidden;
background: var(--c-text);
}
.brandStory__slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
transition: opacity 2s ease-in-out;
}
.brandStory__slide.is-active { opacity: 1; z-index: 1; }
.brandStory__slide.is-leaving { opacity: 0; z-index: 2; }
.brandStory__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity .35s ease;
}
.brandStory__image.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.brandStory__slide { transition: none; }
.brandStory__slide:first-child { opacity: 1; }
.brandStory__slide:not(:first-child) { display: none; }
}
.brandStory__content {
box-sizing: border-box;
width: min(100%, 880px);
margin: 0 auto;
padding: 72px 32px;
text-align: left;
}
.brandStory__eyebrow {
font-size: 12px;
letter-spacing: .12em;
margin: 0 0 20px;
}
.brandStory__heading {
font-weight: bold;
color: var(--c-text);
margin: 0 0 28px;
line-height: 1.6;
}
.brandStory__body {
font-size: 14px;
color: var(--c-text);
margin: 0;
}
.brandStory__body p { margin: 0 0 20px; }
.brandStory__body p:last-child { margin-bottom: 0; }
@media(min-width: 769px) {
.brandStory__content {
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
width: clamp(300px, 34%, 440px);
margin: 0;
padding:
clamp(10px, calc(10px + 14px * (100vw - 769px) / 831px), 24px)
clamp(38px, calc(38px + 18px * (100vw - 769px) / 831px), 56px);
background: rgba(77, 61, 45, .8);
color: #fff;
}
.brandStory__intro .brandStory__eyebrow,
.brandStory__intro .brandStory__heading,
.brandStory__body {
color: #fff;
}
.brandStory__intro { position: static; }
.brandStory__eyebrow {
font-size: clamp(10px, calc(10px + 2px * (100vw - 769px) / 831px), 12px);
}
.brandStory__intro .brandStory__eyebrow {
margin-bottom: clamp(4px, calc(4px + 8px * (100vw - 769px) / 831px), 12px);
}
.brandStory__heading {
font-size: clamp(19px, calc(19px + 15px * (100vw - 769px) / 831px), 34px);
line-height: clamp(1.25, calc(1.25 + 0.35 * (100vw - 769px) / 831px), 1.6);
}
.brandStory__intro .brandStory__heading {
margin-bottom: clamp(6px, calc(6px + 12px * (100vw - 769px) / 831px), 18px);
}
.brandStory__body {
font-size: clamp(14px, calc(14px + 2px * (100vw - 769px) / 831px), 16px);
line-height: clamp(1.6, calc(1.6 + 0.15 * (100vw - 769px) / 831px), 1.75);
margin-bottom: clamp(30px, calc(30px + 18px * (100vw - 769px) / 831px), 48px);
}
.brandStory__body p {
margin-bottom: clamp(6px, calc(6px + 6px * (100vw - 769px) / 831px), 12px);
}
}
@media(max-width: 768px) {
.brandStory__visual { width: 100%; height: 220px; }
.brandStory__image { object-position: center; }
.brandStory__content { padding: 40px 50px 44px; }
.brandStory__eyebrow { margin-bottom: 12px; }
.brandStory__heading {
font-size: clamp(20px, calc(20px + 4px * (100vw - 375px) / 393px), 24px);
margin-bottom: 20px;
}
.brandStory__body { margin-bottom: 20px; line-height: 1.85; }
.brandStory__body p { margin-bottom: 14px; }
.brandStory__body br { display: none; }
}