html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    outline: 0
}

* {
    box-sizing: border-box
}

body {
    line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

nav ul,
ul,
li {
    list-style: none
}

blockquote,
q {
    quotes: none
}

a {
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0);
    font-size: 100%
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
    border: 0
}

input,
select {
    vertical-align: middle
}

a {
    color: #252c32
}

a:link,
a:visited,
a:hover,
a:active {
    color: #252c32;
    outline: none
}

a:hover {
    color: #596a78
}

img {
    line-height: 1;
    vertical-align: bottom
}

input,
textarea,
select {
    outline: none
}

/* textarea はフォントを継承せず等幅になるため、本文と同じフォントにする */
textarea {
    font-family: inherit
}

input[type=radio] {
    display: none
}

input[type=checkbox] {
    display: none
}

input[type=submit],
input[type=button] {
    border: none;
    border-radius: 0;
    -webkit-box-sizing: content-box;
    box-sizing: border-box;
    -webkit-appearance: button;
    appearance: button;
    -webkit-appearance: none
}

input[type=submit]:-webkit-search-decoration,
input[type=button]:-webkit-search-decoration {
    display: none
}

input[type=submit]:focus,
input[type=button]:focus {
    outline-offset: -2px
}

::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .5)
}

:-ms-input-placeholder {
    color: rgba(0, 0, 0, .5)
}

::placeholder {
    color: rgba(0, 0, 0, .5)
}

[class^=icon-],
[class*=" icon-"] {
    display: inline-flex;
    font-style: normal;
    line-height: 1
}

[class^=icon-] svg,
[class*=" icon-"] svg {
    width: 1em;
    height: 1em;
    fill: currentColor
}

.icon-facebook,
.icon-twiter,
.icon-instagram {
    color: #fff
}

html {
    height: 100%;
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased
}

body {
    position: relative;
    line-height: 1.5;
    overflow-x: hidden;
    font-family: var(--font-base);
    font-weight: 400;
    font-size: 1.4rem;
    text-decoration: none
}

img {
    max-width: 100%;
    max-height: 100%
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes slide_up_down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@keyframes slide_up_down {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }
}

@-webkit-keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotate-center {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

:root {
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --font-number: Roboto, "Helvetica Neue", Arial, sans-serif;
    --color-black: #111;
    --color-gray: #ececec;
    --color-gray-bg: #f4f4f4;
    --color-primary: #4f5de0;
    --color-red: #e23434;
    --color-green: #42a846;
    --color-text-muted: #6b7280;
    --color-main-grad: linear-gradient(to right, #6345ed 0%, #e15cfc 100%)
}

.l-navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    padding: 8px 16px;
    border-bottom: 1px solid #e9e9ea;
    background: #fff
}

/* モバイルはヘッダーが 1 行(ロゴ・アイコン・ハンバーガー)なので縦中央揃え。
   PC は検索バー＋メニューバーの 2 段ナビに合わせて上揃えにする */
.l-navbar .l-container {
    display: flex;
    align-items: center;
    gap: 16px
}

@media(min-width: 768px) {
    .l-navbar .l-container {
        align-items: flex-start
    }
}

.logo {
    display: flex;
    width: 40px;
    align-items: center
}

@media(min-width: 768px) {
    .logo {
        width: 70px
    }
}

.logo img {
    width: 100%;
    height: auto
}

.navButton {
    display: block;
    position: relative;
    z-index: 1000;
    height: 0;
    margin-left: 16px;
    padding: 12px;
    cursor: pointer
}

@media(min-width: 768px) {
    .navButton {
        display: none
    }
}

.navButton span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background: #666;
    transition: transform .3s
}

.navButton span:nth-of-type(1) {
    top: 3px
}

.navButton span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto
}

.navButton span:nth-of-type(3) {
    bottom: 3px
}

/* ドロワー展開中は ✕ 表示。ヘッダー(白背景)上に残るので線色は変えない */
.navButton.is-active span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 11px
}

.navButton.is-active span:nth-of-type(2) {
    display: none
}

.navButton.is-active span:nth-of-type(3) {
    transform: rotate(-45deg);
    bottom: 11px
}

/* モバイルのドロワー。ヘッダー(お知らせバー＋ナビバー)の直下から画面下端まで
   広げる。上端は main.js が開閉時に --ec-drawer-top へ書き込む */
.nav {
    display: none;
    position: fixed;
    top: var(--ec-drawer-top, 0px);
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: 24px 20px;
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, .9)
}

/* ドロワー展開中は背面ページのスクロールを止める(ヘッダー位置がずれないように) */
@media(max-width: 767px) {
    html.is-drawerOpen {
        overflow: hidden
    }
}

@media(min-width: 768px) {
    .nav {
        display: flex;
        position: relative;
        top: auto;
        bottom: auto;
        height: auto;
        overflow: visible;
        flex-wrap: wrap;
        flex: 1;
        align-items: center;
        align-content: center;
        gap: 12px 16px;
        width: 100%;
        margin: 0;
        margin-left: 32px;
        padding: 0;
        background: #fff
    }
}

.nav.is-open {
    display: flex
}

.nav .dropdown {
    display: block;
    position: relative;
    top: 0;
    left: 20px;
    z-index: 1000;
    width: 100%;
    padding: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
    text-align: left;
    background: none
}

@media(min-width: 768px) {
    .nav .dropdown {
        display: none;
        position: absolute;
        top: 30px;
        left: 0;
        background: #fff;
        width: 200px;
        padding: 10px 20px
    }
}

.nav .dropdown.is-active {
    display: block
}

.nav__item {
    display: flex;
    width: 100%;
    line-height: 1.1;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-size: 1.4rem;
    text-align: left;
    gap: 8px
}

@media(min-width: 768px) {
    .nav__item {
        width: auto
    }
}

.nav__item+.nav__item {
    margin-left: 0
}

@media(min-width: 768px) {
    .nav__item+.nav__item {
        margin-left: 0
    }
}

.nav__item--search {
    width: 100%;
    flex: 1 1 320px
}

/* The basis equals the min width: the field still grows to fill the row, but
   only wraps under Home / Card lists / Releases once it would be narrower than
   that. Tablets get a smaller minimum so the header stays on one line. */
@media(min-width: 768px) {
    .nav__item--search {
        min-width: 320px;
        flex: 1 1 320px
    }
}

@media(min-width: 1024px) {
    .nav__item--search {
        min-width: 420px;
        flex: 1 1 420px
    }
}

.nav__item--menuBar {
    width: 100%;
    flex: 1 1 100%;
    align-items: stretch;
    padding: 0
}

.nav__item i {
    display: none;
    margin-left: 8px;
    font-size: 2rem
}

@media(min-width: 768px) {
    .nav__item i {
        display: block
    }
}

/* ドロワー内の検索ボタンの虫眼鏡はモバイルでも表示する */
.nav__item .search button i {
    display: block;
    margin-left: 0
}

.nav__item a {
    display: inline-flex;
    width: 100%;
    align-items: center;
    padding: 12px 8px;
    color: #fff;
    text-decoration: none
}

@media(min-width: 768px) {
    .nav__item a {
        width: auto;
        padding: 8px 0;
        color: #111
    }
}

.menuBar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

@media(min-width: 768px) {
    .menuBar {
        flex-wrap: wrap;
        gap: 12px;
        overflow: visible
    }
}

.menuBar__item {
    flex: 0 0 auto;
    min-width: 150px
}

@media(min-width: 768px) {
    .menuBar__item {
        flex: 1 1 200px
    }
}

.menuBar__item a {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f7f7f7;
    color: #111;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease
}

.menuBar__item a:hover {
    color: var(--color-primary);
    border-color: #cfd3f7;
    background: rgba(79, 93, 224,.1)
}

.menuBar__item--group {
    position: relative
}

.menuBar__caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8px;
    vertical-align: middle;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor
}

/* プルダウン内のリンクはチップ風の .menuBar__item a スタイルを打ち消してリスト表示にする */
.menuBar__sub {
    list-style: none;
    margin: 0
}

.menuBar__sub .menuBar__subItem a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: #111;
    font-weight: 500;
    text-align: left
}

.menuBar__sub .menuBar__subItem a:hover {
    color: var(--color-primary);
    background: rgba(79, 93, 224, .1)
}

@media(min-width: 768px) {
    .menuBar__item--group .dropdown {
        top: calc(100% + 4px);
        width: 100%;
        min-width: 180px;
        padding: 8px;
        border-radius: 8px
    }
}

/* モバイルのドロワー内では常時展開のサブリンクを白文字で表示する */
@media(max-width: 767px) {
    .menuBar__item--group .dropdown {
        left: 0;
        box-shadow: none
    }

    .menuBar__sub .menuBar__subItem a {
        color: #fff
    }
}

/* モバイルは 1 行ヘッダーの中央に置く。PC は検索バーの高さ(55px)に合わせて上揃え */
.action {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 40px;
    margin-left: auto
}

.action__item {
    display: flex;
    width: 24px;
    height: 40px;
    align-items: center;
    justify-content: center
}

@media(min-width: 768px) {
    .action {
        align-self: flex-start;
        height: 55px
    }

    .action__item {
        height: 55px
    }
}

.action__item img {
    display: block
}

.action__item+.action__item {
    margin-left: 16px
}

@media(min-width: 768px) {
    .action__item+.action__item {
        margin-left: 24px
    }
}

.action__item a {
    text-decoration: none;
    position: relative;
    display: inline-flex
}

/* 数量バッジはオーバーレイ配置にする。position:relative(フロー内)のままだと
   バッジの確保幅がアイコンの右側に残り、隣のアイコンとの間隔が不自然に広がる */
.action__item a .badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #fcb425;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
    border-radius: 50%;
    padding: 0 3px;
    min-width: 22px;
    height: 22px;
    text-align: center
}

.action__item.sp {
    display: none
}


.l-wrap {
    position: relative;
    padding: 40px 20px
}

.l-wrap--gray {
    background: #f7f7f7
}

.l-container {
    z-index: 5;
    max-width: 1170px;
    margin: auto;
    padding: 0 15px
}

@media screen and (max-width: 800px) {
    .l-container {
        display: block;
        padding: 0
    }
}

@media(min-width: 1024px) {
    .l-container {
        max-width: 1280px;
        padding: 0 24px
    }
}

.l-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.l-layout__main {
    width: 100%
}

@media(min-width: 768px) {
    .l-layout__main {
        width: 78.5%
    }
}

.l-layout__main .l-card {
    width: 100%
}

.l-layout .l-card {
    width: 100%
}

@media(min-width: 768px) {
    .l-layout .l-card {
        width: 78.5%;
        justify-content: start
    }
}

.l-layout .card {
    margin-right: 4%
}

.l-layout .card:nth-child(2n) {
    margin-right: 0
}

@media(min-width: 768px) {
    .l-layout .card {
        width: 32%;
        margin-right: 2%
    }

    .l-layout .card:nth-child(2n) {
        margin-right: 2%
    }

    .l-layout .card:nth-child(3n) {
        margin-right: 0
    }
}

@media (min-width: 768px) {
    .l-layout__main .l-card {
        width: 100% !important
    }
}

.l-banner {
    width: 100%;
    margin-bottom: 40px
}

.l-section {
    width: 100%;
    margin-bottom: 64px
}

.l-sideMenu {
    margin-bottom: 24px;
    width: 100%;
    background: #fff
}

@media(min-width: 768px) {
    .l-sideMenu {
        width: 20%
    }
}

@media(min-width: 768px) {
    .l-section .l-sideMenu {
        min-height: 760px
    }
}

@media(min-width: 768px) {
    .sideMenu {
        position: sticky;
        top: var(--ec-navbar-h, 0px);
        max-height: calc(100vh - var(--ec-navbar-h, 0px));
        overflow-y: auto;
        overscroll-behavior: contain
    }
}

.sideMenuCat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px
}

@media(min-width: 768px) {
    .sideMenuCat {
        display: block;
        height: auto;
        padding: 12px;
        border: 1px solid #e0e0e0;
        box-shadow: 0 1px 3px rgba(51, 51, 51, .1)
    }
}

.sideMenuCat__ttl {
    grid-column: 1 / -1;
    padding: 4px 0 8px;
    font-size: 1.6rem
}

@media(min-width: 768px) {
    .sideMenuCat__ttl {
        padding: 4px 8px 12px
    }
}

.sideMenuCat__sub {
    display: none;
    list-style: none;
    margin: 12px 0 0;
    padding-left: 12px
}

@media(min-width: 768px) {
    .sideMenuCat__sub {
        display: block
    }
}

.sideMenuCat__sub.is-hidden {
    display: none
}

.sideMenuCat__subItem+.sideMenuCat__subItem {
    margin-top: 6px
}

.sideMenuCat__sub a {
    display: block;
    font-size: 1.3rem;
    color: #666;
    text-decoration: none
}

@media(min-width: 768px) {
    .sideMenuCat__sub a {
        padding: 12px 8px;
        border-radius: 6px
    }

    .sideMenuCat__sub a:hover {
        color: var(--color-primary);
        background: rgba(79, 93, 224, .1)
    }
}

.sideMenuCat__sub a.is-active {
    color: var(--color-primary);
    font-weight: 600
}

/* タイトル配下のサブカテゴリ(Single Cards / Box / Pack)はモバイルでも常時表示し、
   カード内にチップとして横並びにする。PC は .sideMenuCat__sub のリスト表示に従う */
@media(max-width: 767px) {
    .sideMenuCat__sub--children {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0 8px 12px
    }

    .sideMenuCat__sub--children .sideMenuCat__subItem+.sideMenuCat__subItem {
        margin-top: 0
    }

    .sideMenuCat__sub--children a {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f4f4f4;
        font-size: 1.2rem;
        line-height: 1.4;
        color: #555
    }

    .sideMenuCat__sub--children a.is-active {
        color: var(--color-primary);
        background: rgba(79, 93, 224, .1)
    }
}

/* モバイルは 2 カラムのカード表示。タイトルリンクの下にサブカテゴリ
   (Single Cards / Box / Pack)をチップで並べ、カード内に収める */
.sideMenuCat__item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    min-height: 64px
}

@media(min-width: 768px) {
    .sideMenuCat__item {
        display: block;
        background: none;
        border: none;
        border-radius: 0;
        min-height: 0
    }
}

/* タイトルリンクのみ対象(サブカテゴリのリンクには当てない) */
.sideMenuCat__item>a,
.sideMenuCat__itemMain>a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 8px;
    font-size: 1.6rem;
    text-decoration: none;
    border-radius: 12px
}

@media(min-width: 768px) {
    .sideMenuCat__item>a,
    .sideMenuCat__itemMain>a {
        display: block;
        text-align: left;
        padding: 12px 8px;
        border-radius: 6px;
        min-height: 0
    }
}

.sideMenuCat__item>a.is-active,
.sideMenuCat__itemMain>a.is-active {
    color: var(--color-primary);
    background: rgba(79, 93, 224,.1)
}

.sideMenuCat__item>a:hover,
.sideMenuCat__itemMain>a:hover {
    color: var(--color-primary);
    background: rgba(79, 93, 224,.1)
}

.sideMenuCat__item--withSub {
    position: relative
}

.sideMenuCat__itemMain {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column
}

@media(min-width: 768px) {
    .sideMenuCat__itemMain {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px
    }
}

.sideMenuCat__toggle {
    display: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    align-items: center;
    justify-content: center
}

@media(min-width: 768px) {
    .sideMenuCat__toggle {
        display: flex
    }
}

.sideMenuCat__toggleIcon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    transform: rotate(45deg);
    transition: transform 0.2s ease
}

.sideMenuCat__item--withSub.is-open .sideMenuCat__toggleIcon {
    transform: rotate(225deg)
}

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

.l-breadcrumbs {
    background: rgba(79, 93, 224,.1)
}

.breadcrumbs {
    display: flex;
    max-width: 1170px;
    overflow: hidden;
    overflow-x: auto;
    margin: auto;
    padding: 8px 15px;
    font-size: 1.3rem;
    white-space: nowrap
}

.breadcrumbs a {
    color: var(--color-primary)
}

.breadcrumbs__item {
    display: flex;
    align-items: center
}

.breadcrumbs__item:nth-child(1):before {
    display: none;
    background: none
}

.breadcrumbs__item:before {
    width: 24px;
    height: 24px;
    margin: 0 4px;
    background: url(../img/icn/arrow-right.svg) no-repeat;
    opacity: .7;
    content: ""
}

.sectionHead {
    line-height: 1.4;
    margin-bottom: 24px;
    font-weight: 800;
    font-size: 2.4rem;
    text-align: center
}

@media(min-width: 768px) {
    .sectionHead {
        margin-bottom: 32px;
        font-size: 3.2rem
    }
}

.sectionHead span {
    color: var(--color-primary)
}

/* Shipping note under section head */
.shipping-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 8px auto 20px;
    padding: 10px 14px;
    text-align: center;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--color-primary);
    background: linear-gradient(180deg, rgba(79, 93, 224,0.08), rgba(232, 244, 255, 0.65));
    border: 1px solid rgba(79, 93, 224,0.35);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.shipping-note:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/icn/truck.svg) no-repeat center/20px;
    opacity: 0.9;
}

@media (min-width: 768px) {
    .shipping-note {
        font-size: 1.8rem;
        padding: 12px 16px;
    }
}

.tabMenu {
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e0e0e0
}

.tabMenu__item {
    display: inline-flex;
    width: 100%;
    height: 48px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: #f2f2f2;
    cursor: pointer
}

.tabMenu__item:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    background: rgba(0, 0, 0, .1);
    transition: all .3s
}

.tabMenu__item+.tabMenu__item {
    margin-left: 16px
}

.tabMenu__item.is-active {
    color: #fff;
    background: var(--color-primary)
}

.tabCont {
    display: none
}

.tabCont.is-active {
    display: block
}

.search {
    position: relative;
    width: 100%;
    border-radius: 3px
}

.search input {
    width: 100%;
    height: 55px;
    padding: 5px 16px;
    border: none;
    border-radius: 6px;
    box-sizing: border-box;
    background: #f4f4f4;
    font-size: 1.4rem;
    outline: none
}

.search input::placeholder {
    color: #666666
}

.search button {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 55px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 0 6px 6px 0;
    background: var(--color-black);
    cursor: pointer;
    transition: background .2s ease
}

.search button i {
    color: #fff;
    font-size: 2.4rem
}

.search button.is-loading {
    pointer-events: none;
    background: linear-gradient(135deg, #0f0f0f 0%, #2f2f2f 100%);
}

.search button.is-loading i {
    opacity: 0;
}

.search button.is-loading::before,
.search button.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.search button.is-loading::before {
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 35%, rgba(255, 255, 255, 0) 100%);
    filter: blur(1px);
    animation: search-spinner-glow 1.2s ease-in-out infinite;
}

.search button.is-loading::after {
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-right-color: rgba(255, 255, 255, 0.75);
    animation: search-spinner-rotate .65s linear infinite;
}

@keyframes search-spinner-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes search-spinner-glow {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.85;
    }
}

.selectbox {
    position: relative
}

.selectbox:before,
.selectbox:after {
    position: absolute;
    content: "";
    pointer-events: none
}

.selectbox:before {
    display: inline-block;
    right: 0;
    width: 2.8em;
    height: 46px
}

.selectbox:after {
    position: absolute;
    top: 50%;
    right: 25px;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--color-black);
    border-bottom: 2px solid var(--color-black);
    transform: translate(50%, -50%) rotate(45deg)
}

.selectbox select {
    width: 100%;
    min-width: 230px;
    height: 40px;
    padding: 0 16px;
    border: none;
    border: 1px solid var(--color-gray);
    border-radius: 6px;
    color: var(--color-black);
    background: #fafafa;
    font-size: 1.6rem;
    cursor: pointer;
    appearance: none
}

.l-card {
    display: flex;
    flex-wrap: wrap
}

.l-card--table {
    display: block;
    width: 100%;
    overflow-x: auto
}

.l-card--table>table {
    width: 100%
}

.l-card--table nav {
    margin-top: 16px
}

@media screen and (max-width: 1024px) {
    .l-card--table>table {
        min-width: 720px
    }
}

.card {
    /* flex column so .card__info fills the stretched grid cell and the
       ADD TO CART button can pin to the bottom (see .card__info__btn) */
    display: flex;
    flex-direction: column;
    position: relative;
    width: 48%;
    margin-bottom: 10px;
    border: 1px solid var(--color-gray);
    border-radius: 16px;
    background: #f4f4f4;
    text-decoration: none
}

@media(min-width: 768px) {
    .card {
        width: 32%;
        margin-bottom: 18px;
        margin-right: 2%
    }
}

.card:hover {
    border-color: #6345ed;
    box-shadow: 0 0 20px rgba(99, 69, 237, .2)
}

.card__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    border-radius: 15px;
    background: #fff
}

.card__info__img {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding-top: 100%;
    text-decoration: none;
    color: inherit;
}

.card__info__img img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    border-radius: 6px;
    transform: translate(-50%, -50%);
    aspect-ratio: 5 / 7;
    object-fit: contain;
    display: block;
}

.card__info__wrap {
    padding: 12px
}

@media(min-width: 768px) {
    .card__info__wrap {
        padding: 20px
    }
}

.card__info__wrap+.card__info__wrap {
    border-top: 1px solid var(--color-gray)
}

/* The text block (name / price / button) takes the remaining height so
   the button lands at the same position in every card of a row */
.card__info>.card__info__wrap:last-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto
}

.card__info__name {
    min-height: 48px;
    display: -webkit-box;
    overflow: hidden;
    font-size: 1.6rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-decoration: none;
    color: inherit;
}

.card__info__price {
    /* price + "/ N packs" sit on one line and the unit wraps to its own
       line (instead of splitting mid-price) when the card is too narrow */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 3px;
    line-height: 1.3;
    margin-top: 8px;
    font-family: var(--font-number);
    text-transform: uppercase;
    font-size: 2.0rem;
}

.card__info__price-unit,
.information__price-unit,
.orderInfo__txt__unit {
    margin-left: 3px;
    font-family: var(--font-number);
    font-size: 1.0rem;
    font-weight: 400;
    text-transform: none;
    color: #9ca3af;
    white-space: nowrap;
}

/* Inside the flex price block the gap comes from column-gap, so the unit
   is not indented when it wraps onto its own line */
.card__info__price .card__info__price-unit {
    margin-left: 0
}

.card__info__btn {
    /* margin-top:auto pushes the button to the bottom of the card so all
       buttons in a row align even when the price/unit wraps to 2 lines */
    margin-top: auto;
    padding-top: 10px
}

.card__info__btn .btnOutline {
    width: 100%;
    height: auto;
    min-height: 40px;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.2;
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transition: background-color .2s, border-color .2s
}

@media(min-width: 768px) {
    .card__info__btn {
        padding-top: 16px
    }

    .card__info__btn .btnOutline {
        min-height: 44px;
        padding: 8px 12px;
        font-size: 1.4rem
    }
}

.card__info__btn .btnOutline:not(.is-disabled):hover {
    background: #3d4bc4;
    border-color: #3d4bc4
}

.card__info__btn .btnOutline .btnOutline__spinner {
    border-color: rgba(255, 255, 255, .3);
    border-top-color: rgba(255, 255, 255, .9)
}

.js-highlight-container {
    position: relative;
    min-height: 260px
}

.card--placeholder {
    opacity: .3;
    pointer-events: none
}

.js-highlight-container.is-loading .card--placeholder {
    animation: highlight-skeleton 1.2s linear infinite
}

.card__info__img--placeholder {
    width: 160px;
    height: 160px;
    background: #f0f0f0
}

.card__info__name--placeholder,
.card__info__price--placeholder {
    height: 16px;
    margin: 8px 0;
    background: #f0f0f0
}

.card-loader {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    width: 100%;
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1
}

.js-highlight-container.is-loading .card-loader {
    display: flex
}


.card-loader .spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, .15);
    border-top-color: rgba(0, 0, 0, .7);
    animation: highlight-spinner-rotate .7s linear infinite
}

.card-loader .spinner__label {
    margin-left: 12px;
    font-size: .85rem;
    color: #555;
    letter-spacing: .02em;
    white-space: nowrap
}

.card__info__price--soldout {
    color: #c23b3b;
    font-weight: 600
}

.no-results--error {
    text-align: center
}

@keyframes highlight-skeleton {
    0% {
        opacity: .2
    }

    50% {
        opacity: .45
    }

    100% {
        opacity: .2
    }
}

@keyframes highlight-spinner-rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes explore-button-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.pages {
    max-width: 800px;
    margin: auto
}

.pages__cont {
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

@media(min-width: 768px) {
    .pages__cont {
        padding: 32px
    }
}

.pages__cont p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 40px
}

.pages__cont__ttl {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 24px
}

.pages__cont__ttl--mt48 {
    margin-top: 48px
}

.pagesInfo {
    border-top: 1px solid #e0e0e0
}

.pagesInfo__item {
    display: flex;
    font-size: 1.6rem;
    padding: 24px;
    border-bottom: 1px solid #e0e0e0
}

.pagesInfo__item__ttl {
    width: 30%;
    font-weight: bold
}

.pagesInfo__item__txt {
    width: 70%
}

/* スマホでは 30% 列に「Established」等の長い見出しが収まらず本文へ重なるため、見出し→本文の縦積みにする */
@media (max-width: 767px) {
    .pagesInfo__item {
        flex-direction: column;
        gap: 6px;
        padding: 20px 16px
    }

    .pagesInfo__item__ttl,
    .pagesInfo__item__txt {
        width: auto
    }
}

.pagesMap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.packagingGallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0 40px;
    /* フォールド下の遅延ロード画像群。オフスクリーン時の高さを事前確保して
       スクロール到達時の CLS を防ぐ(9 枚 = PC 3 段 / SP 9 段の概算) */
    content-visibility: auto;
    contain-intrinsic-size: auto 900px
}

.packagingGallery__item {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 12px;
    text-align: center
}

.packagingGallery__img {
    width: 100%;
    height: 200px;
    display: block;
    border-radius: 2px;
    object-fit: cover
}

.packagingGallery__caption {
    font-size: 1.3rem;
    margin-top: 8px;
    color: #555
}

.pagesMap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.pagesQa {
    font-size: 1.6rem;
    line-height: 1.8
}

.pagesQa__parent {
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    transition: .3s;
    padding: 16px 16px 16px 72px
}

.pagesQa__parent:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    width: 20px;
    height: 2px;
    background: #666
}

.pagesQa__parent:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    transform: translateY(-50%);
    transition: all .3s;
    width: 2px;
    height: 20px;
    background: #666
}

.pagesQa__parent.is-open {
    background: rgba(79, 93, 224,.1)
}

.pagesQa__parent.is-open:after {
    top: 25%;
    transform: rotate(90deg);
    opacity: 0
}

.pagesQa__child {
    padding: 16px 24px
}

.pagesHeader {
    width: 100%;
    height: 260px;
    background: url(../img/campanyBg.jpg) no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center
}

.pagesHeader img {
    width: 124px;
    height: auto
}

.pagesHeader__ttl {
    font-size: 3.2rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #1d2129
}

.aboutHero {
    position: relative;
    margin: 16px 0 32px;
    padding: 32px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #111a3a 0%, #223888 50%, #4c6fff 100%);
    color: #fff;
    overflow: hidden
}

@media(min-width: 768px) {
    .aboutHero {
        margin: 32px 0 40px;
        padding: 64px 56px;
        border-radius: 18px
    }
}

.aboutHero:after {
    content: "";
    position: absolute;
    top: -80px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 60%)
}

.aboutHero__container {
    position: relative;
    display: grid;
    gap: 24px;
    align-items: center;
    z-index: 1
}

@media(min-width: 768px) {
    .aboutHero__container {
        grid-template-columns: 3fr 2fr;
        gap: 32px
    }
}

.aboutHero__eyebrow {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 1.2rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.aboutHero__title {
    margin: 12px 0;
    font-size: 3rem;
    line-height: 1.3
}

.aboutHero__lead {
    max-width: 720px;
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .9);
    line-height: 1.8
}

.aboutHero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.aboutHero__badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    font-size: 1.2rem;
    letter-spacing: .02em
}

.aboutHero__card {
    padding: 24px;
    border-radius: 14px;
    background: #fff;
    color: #111;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
    width: min(360px, 100%);
    margin: 0 auto 0 0
}

.aboutHero__cardTtl {
    margin-bottom: 12px;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: .02em
}

.aboutHero__list {
    margin: 0 0 20px 16px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    list-style: disc
}

.aboutHero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.aboutHero__cta .btnOutline {
    width: auto;
    min-width: 140px;
    height: 48px;
    padding: 0 16px
}

.aboutGrid {
    display: grid;
    gap: 16px
}

@media(min-width: 768px) {
    .aboutGrid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.aboutGrid__item {
    padding: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .05)
}

.aboutGrid__eyebrow {
    color: var(--color-primary);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase
}

.aboutGrid__ttl {
    margin: 8px 0 12px;
    font-size: 2rem;
    line-height: 1.4
}

.aboutGrid__txt {
    font-size: 1.4rem;
    line-height: 1.7;
    color: #4b5563
}

.aboutHighlights__grid {
    display: grid;
    gap: 12px;
    margin-top: 16px
}

@media(min-width: 768px) {
    .aboutHighlights__grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.aboutHighlights__item {
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .06)
}

.aboutHighlights__item h4 {
    margin-bottom: 10px;
    font-size: 1.8rem
}

.aboutHighlights__item p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #4b5563
}

.aboutSteps {
    margin-top: 32px
}

.aboutSteps__list {
    display: grid;
    gap: 12px
}

@media(min-width: 768px) {
    .aboutSteps__list {
        grid-template-columns: repeat(3, 1fr)
    }
}

.aboutSteps__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    padding: 18px;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fff;
    align-items: center
}

.aboutSteps__item h4 {
    margin-bottom: 6px;
    font-size: 1.6rem
}

.aboutSteps__item p {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #4b5563
}

.aboutSteps__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(153, 165, 255, .15);
    color: var(--color-primary);
    font-weight: bold
}

.aboutCTA {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(79, 93, 224,.12), rgba(155, 166, 255, .14));
    border: 1px solid rgba(79, 93, 224,.14)
}

@media(min-width: 768px) {
    .aboutCTA {
        flex-direction: row;
        align-items: center;
        gap: 32px;
        padding: 28px 32px
    }
}

.aboutCTA__text h3 {
    margin-bottom: 6px;
    font-size: 2rem
}

.aboutCTA__text p {
    margin: 0;
    font-size: 1.4rem;
    color: #4b5563
}

.aboutCTA__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.aboutCTA__actions .btnOutline {
    width: 200px;
    max-width: 100%
}

.menuBar {
    flex-wrap: wrap;
    gap: 8px
}

@media(min-width: 768px) {
    .menuBar {
        flex-wrap: wrap;
        gap: 12px
    }
}

.menuBar__item {
    flex: 0 0 auto;
    min-width: 120px
}

@media(min-width: 768px) {
    .menuBar__item {
        flex: 0 0 auto;
        min-width: 130px
    }
}

.btnAll {
    display: block;
    position: relative;
    width: 285px;
    height: 56px;
    margin: auto;
    border: none;
    border-radius: 50px;
    background: none;
    font-weight: bold;
    font-size: 1.6rem;
    transition: all .2s;
    cursor: pointer
}

.btnAll:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    background: linear-gradient(135deg, rgb(99, 69, 237) 0%, rgb(220, 57, 252) 100%) border-box border-box;
    content: "";
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude
}

.btnAll span {
    background: linear-gradient(135deg, #6345ed 0%, #e15cfc 100%);
    background: -webkit-linear-gradient(-45deg, #6345ed 0%, #e15cfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

.btnAll:hover {
    background: rgba(99, 69, 237, .1)
}

.btnBlack {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 24px;
    color: #fff;
    background: var(--color-black);
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer
}

.btnOutline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 56px;
    padding: 0 14px;
    border: var(--color-primary) 1px solid;
    border-radius: 6px;
    color: var(--color-primary);
    background: #fff;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer
}

/* <a> で書いたボタン: a:link / a:visited (0,1,1) が単独クラス (0,1,0) に勝って文字が #252c32 になるので、
   ボタン本来の文字色を a 付きで指定し直す */
a.btnPrimar:link,
a.btnPrimar:visited,
a.btnPrimar:hover,
a.btnPrimar:active {
    color: #fff
}

a.btnOutline:link,
a.btnOutline:visited,
a.btnOutline:hover,
a.btnOutline:active {
    color: var(--color-primary)
}

.btnOutline--home {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 16px auto 0
}

.btnOutline.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none
}

.btnOutline.is-added {
    opacity: .85
}

.btnOutline__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(51, 51, 51, .25);
    border-top-color: rgba(51, 51, 51, .75);
    animation: explore-button-spin .75s linear infinite
}

.btnOutline__spinner.is-visible {
    display: inline-block
}

.btnOutlineGray {
    display: block;
    width: 240px;
    height: 40px;
    padding: 0 14px;
    border: #e0e0e0 1px solid;
    border-radius: 6px;
    color: #666;
    background: #fff;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer
}

/* Cart summary wrapper swapped in place after +/- and Delete; adds no box of its own */
.cartNext__summary {
    display: contents
}

.btnOutlineGray--with-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem
}

.btnOutlineGray.is-loading {
    cursor: progress;
    opacity: .7
}

.btnPrimar {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    color: #fff;
    background: var(--color-primary);
    font-weight: bold;
    font-size: 1.6rem;
    text-align: center;
    cursor: pointer
}

.btnPrimar--with-spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem
}

.btnPrimar__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: btn-primar-spin .75s linear infinite
}

.btnPrimar__spinner.is-visible {
    display: inline-block
}

.btnPrimar.is-loading {
    cursor: progress;
    pointer-events: none
}

@keyframes btn-primar-spin {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.l-detail {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.l-detail__img {
    display: none;
    position: sticky;
    top: 0;
    width: 47%;
    height: 100%
}

@media(min-width: 768px) {
    .l-detail__img {
        display: block
    }
}

.l-detail__img img {
    width: 100%
}

@media(min-width: 768px) {
    .l-detail__info {
        width: 50%
    }
}

.detail {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    padding: 0;
    list-style-position: inside
}

.detail i {
    margin-right: 8px
}

.detail i:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/chack.svg) no-repeat center/cover;
    content: ""
}

.detail__item {
    display: inline-flex;
    width: 100%;
    font-weight: 700;
    font-size: 15px
}

.detail__item+.detail__item {
    margin-top: 10px
}

.information__head {
    position: relative
}

.information__head__ttl {
    line-height: 1.5;
    font-weight: 700;
    font-size: 2.4rem
}

.information__img {
    display: block;
    max-width: 280px;
    margin: 24px auto 0
}

.information__img img {
    width: 100%;
    height: auto
}

@media(min-width: 768px) {
    .information__img {
        display: none
    }
}

.information__price {
    line-height: 1.3;
    margin-top: 16px;
    font-family: var(--font-number);
    font-weight: bold;
    font-size: 2rem;
    letter-spacing: .1rem
}

.information__flu {
    margin-top: 24px
}

@media(min-width: 768px) {
    .information__flu {
        margin-top: 32px
    }
}

.information__flu__item {
    color: #545454;
    font-size: 1.6rem;
    list-style-type: disc;
    list-style-position: inside
}

.information__flu__item+.information__flu__item {
    margin-top: 8px
}

.information__flu+.information__flu {
    margin-top: 4px
}

.information__buy {
    border-top: 1px solid #e0e0e0;
    padding-top: 32px;
    margin-top: 32px
}

.information__buy__item+.information__buy__item {
    margin-top: 24px
}

@media(min-width: 768px) {
    .information__buy__item+.information__buy__item {
        margin-top: 32px
    }
}

.information__buy__item .sns {
    color: #666;
    font-size: 2.4rem;
    display: inline-flex
}

.information__buy__item .sns__item {
    margin-right: 8px
}

.information__buy__item .sns__item i:before {
    color: #666
}

.information__buy__item .sns__item a {
    text-decoration: none
}

.costs {
    display: inline-flex
}

.costs__wrap {
    display: inline-flex;
    border: 1px solid #e7e7e7;
    border-radius: 6px
}

.costs__operate {
    height: 56px
}

.costs__number {
    height: 56px
}

.costs__buy {
    margin-left: 16px
}

.costs__buy .btnPrimar {
    width: 200px;
    height: 56px
}

.costs__buy .btnPrimar img {
    margin-right: 8px
}

/* Product detail ADD TO CART: spinner while sending, "ADDED ✓" afterwards */
.costs__buy .btnPrimar .btnPrimar__spinner {
    margin-right: 8px;
    vertical-align: middle
}

.costs__buy .btnPrimar.is-added {
    background: #16a34a
}

/* Add-to-cart result toast (fixed, so it never pushes the layout) */
.cartToast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: fit-content;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 20px;
    border-radius: 8px;
    background: #14532d;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s
}

.cartToast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.cartToast--error {
    background: #b91c1c
}

.cartToast .cartToast__link {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
    white-space: nowrap
}

.btnNumber {
    width: 40px;
    height: 56px;
    padding: 0;
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #1c1c1c;
    background: #f8f8f8;
    font-size: 1.6rem;
    cursor: pointer
}

.costs__operate .js-cart-unit-form {
    display: contents
}

.btnNumber:disabled {
    opacity: .35;
    cursor: not-allowed
}

.btnNumber.is-loading {
    position: relative;
    cursor: progress;
    pointer-events: none
}

.btnNumber.is-loading img {
    visibility: hidden
}

.btnNumber.is-loading::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    height: 14px;
    margin: auto;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #1c1c1c;
    animation: btn-primar-spin .75s linear infinite;
    content: ""
}

.inputNumber {
    height: 56px;
    padding: 8px;
    border: none;
    border-right: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
    font-size: 1.6rem;
    text-align: center
}

.inputNumber::-webkit-outer-spin-button,
.inputNumber::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inputNumber[type=number] {
    -moz-appearance: textfield;
}

.l-select {
    position: relative;
    width: 200px;
    margin-top: 8px
}

.l-select:before {
    position: absolute;
    top: 5px;
    right: 12px;
    width: 2.2rem;
    height: 2.2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='translate(0,960) scale(1,-1)' fill='%23666666' d='M542.17 289.83c-16.661-16.661-43.678-16.661-60.339 0l-213.334 213.333c-16.662 16.661-16.662 43.677 0 60.34s43.677 16.662 60.34 0l183.163-183.164 183.164 183.164c16.661 16.662 43.678 16.662 60.339 0s16.661-43.678 0-60.34l-213.333-213.333z'/%3E%3C/svg%3E") no-repeat center/contain;
    content: "";
    pointer-events: none
}

.select {
    width: 200px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fafafa;
    font-size: 1.6rem;
    -webkit-appearance: none
}

.l-related .sectionHead {
    text-align: left;
    font-size: 2.4rem
}

.l-related .btnAll {
    margin: 16px auto 56px
}

@media(min-width: 768px) {
    .l-related .btnAll {
        margin-top: 23px
    }
}

.detailSecond {
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 1px px rgba(56, 56, 56, .1)
}

.detailSecond__tab .tabMenu {
    border-bottom: 1px solid #e0e0e0;
    padding: 0 24px;
    margin-bottom: 0
}

@media(min-width: 768px) {
    .detailSecond__tab .tabMenu {
        padding: 0 30px
    }
}

.detailSecond__tab .tabMenu__item {
    position: relative;
    width: auto;
    padding: 0 16px;
    background: none;
    color: #545454
}

.detailSecond__tab .tabMenu__item:hover {
    box-shadow: none
}

.detailSecond__tab .tabMenu__item:before {
    position: absolute;
    bottom: 0;
    content: "";
    background: #fff;
    width: 100%;
    height: 2px
}

.detailSecond__tab .tabMenu__item.is-active {
    font-weight: bold;
    color: var(--color-primary);
    background: #fff
}

.detailSecond__tab .tabMenu__item.is-active:before {
    background: var(--color-primary)
}

.detailSecond__cont {
    padding: 16px 24px
}

@media(min-width: 768px) {
    .detailSecond__cont {
        padding: 24px 30px
    }
}

.detailSecond__cont .tabCont {
    font-size: 1.4rem;
    line-height: 1.6;
    color: #545454
}

@media(min-width: 768px) {
    .detailSecond__cont .tabCont {
        font-size: 1.6rem
    }
}

.mypage {
    padding-bottom: 80px
}

@media(min-width: 768px) {
    .mypage {
        display: flex;
        width: 1100px;
        justify-content: space-between;
        margin: auto
    }
}

.mypage--small {
    max-width: 460px;
    margin: auto;
    background: #fff;
    padding: 32px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1)
}

@media(min-width: 768px) {
    .mypage--small {
        display: block
    }
}

.mypage--small .sectionHead {
    font-weight: normal;
    font-size: 2.4rem;
    margin-bottom: 20px;
    text-align: left
}

/* Signup incentive for guests at checkout (orders/_signup_credit_note.html) */
.checkoutSignupCredit {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 1.3rem;
    line-height: 1.6;
}
.checkoutSignupCredit__link {
    color: #065f46;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Signup incentive on the Create account card (one sentence + terms) */
.signupCredit {
    margin: -8px 0 4px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #065f46;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
}
.signupCredit__terms {
    margin-bottom: 16px;
    color: #6b7280;
    font-size: 1.2rem;
    line-height: 1.6;
}

.mypage--smallBgNone {
    flex-wrap: wrap;
    background: none;
    padding-bottom: 0
}

.mypage--smallBgNone .btnOutlineGray {
    margin: 0 auto
}

.mypage .sectionHead {
    margin-bottom: 24px
}

@media(min-width: 768px) {
    .mypage .sectionHead {
        margin-bottom: 20px
    }
}

.mypage__or {
    text-align: center;
    position: relative;
    margin: 40px 0 32px;
    width: 100%
}

.mypage__or span {
    position: relative;
    color: #666666;
    font-size: 1.3rem;
    z-index: 1;
    background: #f7f7f7;
    padding: 0 16px
}

.mypage__or:before {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    content: "";
    width: 100%;
    height: 1px;
    background: #e0e0e0
}

.mypage__nav {
    background: #fff;
    margin-bottom: 24px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

@media(min-width: 768px) {
    .mypage__nav {
        width: 285px;
        min-height: 400px
    }
}

.mypage__nav__item {
    display: inline-flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.6rem
}

.mypage__nav__item+.mypage__nav__item {
    margin-top: 8px
}

.mypage__nav__item a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-decoration: none;
    padding: 8px 12px;
    width: 100%;
    border-radius: 6px
}

.mypage__nav__item a.is-active {
    color: var(--color-primary);
    background: rgba(79, 93, 224,.1)
}

.mypage__nav__item img {
    width: 24px;
    height: auto;
    margin-right: 12px
}

.mypage__cont {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    padding: 20px
}

@media(min-width: 768px) {
    .mypage__cont {
        width: 790px;
        margin-left: 40px;
        padding: 32px
    }

    .mypage__cont .input {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .mypage__cont .input input {
        padding: 10px 15px
    }

    .mypage__cont .input__wrap {
        width: 49%;
        margin-top: 0 !important;
        margin-bottom: 32px
    }

    .mypage__cont .input__wrap--full {
        width: 100%
    }
}

.mypage__cont .input span {
    color: #fa3434
}

/* 上の赤字は必須マーク(*)用。チェックボックスの文言は通常色に戻す */
.mypage__cont .input .checkboxInput__txt {
    color: #212121
}

.mypage__ttl {
    font-size: 2.4rem
}

@media(min-width: 768px) {
    .mypage__ttl {
        font-size: 3.2rem
    }
}

.mypage__txt {
    font-size: 1.6rem;
    line-height: 1.8
}

.mypage__txt a {
    color: var(--color-primary)
}

/* マイページのカード(ストアクレジット・紹介リンク) */
.mypageCard {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff
}

.mypageCard--invite {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #eef2ff 0, #fff 160px)
}

.mypageCard__head {
    margin-bottom: 14px
}

.mypageCard__label {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280
}

.mypageCard__balance {
    margin: 0;
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111827
}

.mypageCard__sub {
    margin: 6px 0 0;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #4b5563
}

.mypageCredit__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #f3f4f6
}

.mypageCredit__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6
}

.mypageCredit__amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827
}

.mypageCredit__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 1.4rem;
    color: #6b7280
}

.mypageCredit__tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 1.2rem;
    font-weight: 700
}

.mypageInvite__rewards {
    display: grid;
    /* 2 つ並ぶ幅が無い端末では縦に積む(金額を折り返させない) */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px
}

.mypageInvite__reward {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06)
}

.mypageInvite__rewardWho {
    font-size: 1.3rem;
    color: #6b7280
}

.mypageInvite__rewardAmount {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--color-primary)
}

.mypageInvite__fieldLabel {
    display: block;
    margin-bottom: 6px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #374151
}

.mypageInvite__row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px
}

.mypageInvite__input {
    flex: 1;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 1.5rem;
    background: #fff
}

.mypageInvite__copy {
    flex: none;
    padding: 11px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer
}

.mypageInvite__notes {
    margin: 0;
    padding-left: 1.2em;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #6b7280
}

.mypageInvite__notes li {
    list-style: disc
}

.mypageInvite__notes li+li {
    margin-top: 4px
}

.mypageInvite__rewardWho,
.mypageInvite__rewardAmount {
    white-space: nowrap
}

@media(max-width: 480px) {
    .mypageCard {
        padding: 16px 14px
    }

    .mypageCard__balance {
        font-size: 2.8rem
    }

    .mypageInvite__reward {
        padding: 10px 12px
    }

    .mypageInvite__rewardAmount {
        font-size: 1.9rem
    }
}

/* マイページの注文履歴(My Orders) */
.myOrders__card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}
.myOrders__card + .myOrders__card {
    margin-top: 12px;
}
.myOrders__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.myOrders__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.myOrders__id {
    font-size: 1.4rem;
    font-weight: 700;
}
.myOrders__date {
    font-size: 1.2rem;
    color: #6b7280;
}
.myOrders__badges {
    display: flex;
    gap: 6px;
}
.myOrders__badge {
    display: inline-block;
    background-color: #f3f4f6;
    color: #374151;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.myOrders__badge--hold {
    background: linear-gradient(135deg, #f6e27a 0%, #e6b83c 45%, #c9921e 100%);
    color: #4a2f04;
    border: 1px solid #b8860b;
}
.myOrders__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 1.3rem;
}
.myOrders__item-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 4px;
    background: #f9fafb;
    flex-shrink: 0;
}
.myOrders__item-title {
    flex: 1;
    min-width: 0;
}
.myOrders__item-qty {
    color: #6b7280;
    white-space: nowrap;
}
/* 商品行ごとの進捗。バッジと揃う見込み日で高さが変わらないよう最小高さを確保する */
.myOrders__item-progress {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    min-height: 22px;
    margin-left: auto;
    text-align: right;
}
/* 準備中は既定の状態なので、バッジにせず静かな文字で出す（同じ状態の行が
   並んだときにバッジが埋め尽くさないようにする） */
.myOrders__item-state {
    color: #6b7280;
    font-size: 1.1rem;
    white-space: nowrap;
}
/* 行動につながる Ready to ship と、完了の Shipped だけバッジにする */
.myOrders__itemBadge {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.myOrders__itemBadge--ready {
    background-color: #dcfce7;
    color: #166534;
}
.myOrders__itemBadge--shipped {
    background-color: #dbeafe;
    color: #1e40af;
}
/* 仕入れできず商品単位でキャンセルした分。発送の進捗ではないので灰色で出す */
.myOrders__itemBadge--cancelled {
    background-color: #f3f4f6;
    color: #4b5563;
}
.myOrders__item-ready,
.myOrders__item-refund {
    color: #6b7280;
    font-size: 1.1rem;
    white-space: nowrap;
}
/* 商品行の追跡番号。灰色の小さい文字だと見落とされるので、配送会社名つきのリンクにする */
.myOrders__item-tracking {
    color: #1e40af;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.myOrders__refunded {
    color: #6b7280;
}

/* Product review from the order card (services/product_reviews.py). The fold-out keeps
   the item rows compact; the stars are CSS-only radios laid out right-to-left */
.myOrders__review {
    margin: 2px 0 8px 56px;
    font-size: 1.2rem;
}
.myOrders__review--done {
    color: #166534;
}
.myOrders__reviewSummary {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.reviewForm {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f9fafb;
}
.reviewForm__stars {
    border: 0;
    margin: 0;
    padding: 0;
}
.reviewForm__label {
    display: block;
    color: #374151;
    font-size: 1.2rem;
    font-weight: 700;
}
.reviewForm__starRow {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}
.reviewForm__star {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.reviewForm__starLabel {
    color: #d1d5db;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
}
/* The radios run 5 → 1 in the DOM and are drawn right-to-left, so "this star and every
   lower one" is the label plus its following siblings (~). Hovering previews a rating:
   it first greys every star, then lights the hovered one and the lower ones. */
.reviewForm__star:checked ~ .reviewForm__starLabel {
    color: #f59e0b;
}
.reviewForm__starRow:hover .reviewForm__starLabel {
    color: #d1d5db;
}
.reviewForm__starRow .reviewForm__starLabel:hover,
.reviewForm__starRow .reviewForm__starLabel:hover ~ .reviewForm__starLabel {
    color: #f59e0b;
}
.reviewForm__star:focus-visible + .reviewForm__starLabel {
    outline: 2px solid var(--color-primary);
    border-radius: 4px;
}
.reviewForm__body {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1.3rem;
    line-height: 1.6;
}
.reviewForm__photoRow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.reviewForm__photoBtn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
}
.reviewForm__photoBtn:hover {
    background: #eef0fc;
}
.reviewForm__photoInput:focus-visible + .reviewForm__photoRow .reviewForm__photoBtn {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.reviewForm__photoName {
    min-width: 0;
    color: #6b7280;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}
/* Same size as the other My Orders action (Request delivery): the base .btnPrimar
   is full width, so give it an auto width with the same minimum */
.reviewForm__btn {
    align-self: flex-start;
    width: auto;
    min-width: 200px;
    max-width: 100%;
    margin-top: 6px;
}
/* Phones: the item image indent leaves the form too narrow, so start it at the card edge */
@media screen and (max-width: 767px) {
    .myOrders__review {
        margin-left: 0;
    }
    .reviewForm__btn {
        align-self: stretch;
        min-width: 0;
    }
}
.reviewForm__note {
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1.6;
}
.myOrders__note {
    color: #6b7280;
    font-size: 1.1rem;
    margin-top: 6px;
}
/* My Orders 上部の取り置きパネル(発送依頼) */
.holdPanel {
    border: 1px solid #e6b83c;
    border-radius: 8px;
    background: #fffbeb;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.holdPanel__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.holdPanel__stage + .holdPanel__stage,
.holdPanel__waiting {
    border-top: 1px solid #f3e3b0;
    margin-top: 12px;
    padding-top: 12px;
}
.holdPanel__lead {
    font-size: 1.4rem;
    font-weight: 700;
}
.holdPanel__txt {
    color: #4b5563;
    font-size: 1.2rem;
    margin-top: 4px;
}
.holdPanel__btn {
    width: auto;
    min-width: 200px;
    margin-top: 10px;
}
.holdPanel__pay {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.holdPanel__payLink {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: 700;
}
.holdPanel__list {
    font-size: 1.2rem;
    margin-top: 4px;
    padding-left: 1.4em;
    list-style: disc;
}
.holdPanel__ready {
    color: #6b7280;
}
/* 発送希望日("Ship on or after")。日付欄は 1 つだけで、初期値が最短の発送日 */
.holdPanel__when {
    margin-top: 10px;
}
.holdPanel__whenLabel {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 4px;
}
.holdPanel__whenRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.holdPanel__date {
    height: 40px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 1.4rem;
    font-family: inherit;
}
.holdPanel__whenHint {
    font-size: 1.1rem;
    color: #6b7280;
}
/* 依頼後の「Change date」。開くと同じ日付欄だけが出る(JS なし) */
.holdPanel__change {
    margin-top: 8px;
}
.holdPanel__changeSummary {
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--color-primary);
    text-decoration: underline;
}
@media screen and (max-width: 768px) {
    .myOrders__item {
        flex-wrap: wrap;
    }
    .myOrders__item-progress {
        width: 100%;
        justify-content: flex-start;
        margin-left: 56px;
    }
}
.myOrders__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-top: 1px solid #f3f4f6;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 1.3rem;
}
.myOrders__tracking {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: #6b7280;
}
.myOrders__tracking-link {
    color: #1e40af;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.myOrders__tracking-carrier {
    font-weight: 700;
}
.myOrders__total {
    font-weight: 700;
    margin-left: auto;
}
.myOrders__invoice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 4px 10px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-primary);
    background: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}
.myOrders__billing {
    border-color: #d1d5db;
    color: #555;
}
.myOrders__invoiceForm {
    display: inline-flex;
    margin: 0;
}
.myOrders__invoice--btn {
    font-family: inherit;
    cursor: pointer;
}
.myOrders__invoice--btn .btnPrimar__spinner {
    width: 12px;
    height: 12px;
    border-color: rgba(0, 0, 0, .15);
    border-top-color: var(--color-primary);
}
.myOrders__invoice--btn.is-loading {
    cursor: progress;
    pointer-events: none;
}
.myOrders__invoice--btn.is-disabled,
.myOrders__invoice--btn[disabled] {
    color: #9a9a9a;
    border-color: #d1d5db;
    cursor: not-allowed;
    pointer-events: none;
}

.input__wrap--pass {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0
}

.input__wrap--pass a {
    color: #545454;
    font-size: 1.4rem
}

.input__wrap+.input__wrap {
    margin-top: 20px
}

.input__wrap__select {
    position: relative;
    width: 100%;
    margin-top: 8px
}

.input__wrap__select::before {
    position: absolute;
    top: 26px;
    right: 12px;
    width: 2.2rem;
    height: 2.2rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='translate(0,960) scale(1,-1)' fill='%23666666' d='M542.17 289.83c-16.661-16.661-43.678-16.661-60.339 0l-213.334 213.333c-16.662 16.661-16.662 43.677 0 60.34s43.677 16.662 60.34 0l183.163-183.164 183.164 183.164c16.661 16.662 43.678 16.662 60.339 0s16.661-43.678 0-60.34l-213.333-213.333z'/%3E%3C/svg%3E") no-repeat center/contain;
    content: "";
    pointer-events: none
}

.input__wrap__select select {
    width: 100%;
    height: 44px;
    padding: 0 8px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fafafa;
    font-size: 1.6rem;
    -webkit-appearance: none
}

.input__wrap input {
    width: 100%;
    padding: 15px;
    height: 40px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    font-size: 1.6rem;
    letter-spacing: .1rem;
    background: #fafafa
}

.passwordField {
    position: relative
}

.passwordField__input {
    height: 48px;
    padding: 0 56px 0 16px;
    border-radius: 12px;
    border: 1px solid #f3f4f6;
    background: #f3f4f6;
    letter-spacing: 0
}

.passwordField__input::placeholder {
    color: #9ca3af
}

.passwordField__toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.passwordField__toggle:focus-visible {
    outline: 2px solid #9db7ff;
    outline-offset: 2px;
    border-radius: 6px
}

.passwordField__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.passwordField__icon--hide {
    display: none
}

.passwordField__toggle.is-active .passwordField__icon--show {
    display: none
}

.passwordField__toggle.is-active .passwordField__icon--hide {
    display: inline-flex
}

.passwordField__svg {
    width: 20px;
    height: 20px;
    fill: currentColor
}

.input__wrap input.mt16 {
    margin-top: 16px
}

.input__wrap a span {
    color: #2196f3
}

.input__wrap button+button {
    margin-top: 24px
}

.input__wrap .checkboxInput {
    display: flex;
    align-items: center;
    cursor: pointer
}

.input__wrap .checkboxInput__input {
    margin: 0;
    width: 0;
    opacity: 0
}

.input__wrap .checkboxInput__txt {
    color: #212121;
    margin-left: 12px;
    display: block;
    font-size: 1.6rem
}

.input__wrap .checkboxInput__input:checked+.checkboxInput__icn {
    border: solid 1px var(--color-primary);
    background: #fff
}

.input__wrap .checkboxInput__input:checked+.checkboxInput__icn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary) url("../img/icn/check.svg") no-repeat center;
    background-size: contain
}

.input__wrap .checkboxInput__icn {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    border: solid 2px #ccc;
    background: #fff;
    border-radius: 4px
}

.input__ttl {
    color: #666;
    font-size: 1.4rem;
    margin-bottom: 4px
}

.input__note {
    margin-top: 8px;
    color: #fa3434
}

.optionalField {
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0
}

.optionalField__summary {
    color: #666;
    font-size: 1.4rem;
    cursor: pointer
}

.optionalField__note {
    margin-top: 8px;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #888
}

.optionalField__body .input__wrap {
    margin-top: 16px;
    margin-bottom: 0
}

.input__note--hidden {
    display: none;
    margin-top: 4px;
    font-size: 1.3rem
}

.order__item {
    border: 1px solid #e0e0e0;
    padding: 16px 12px;
    border-radius: 6px
}

@media(min-width: 768px) {
    .order__item {
        padding: 16px 20px
    }
}

.order__item+.order__item {
    margin-top: 16px
}

/* カート行の画像: モバイルは全幅にせず 96px のサムネイルとしてテキストの横に置く */
.order__item .orderInfo__img {
    width: 96px
}

@media(min-width: 768px) {
    .order__item .orderInfo__img {
        width: 20%
    }
}

.orderInfo {
    display: flex;
    flex-wrap: wrap;
    text-decoration: none;
    align-items: flex-start;
}

.orderInfo__img {
    width: 96px;
    height: auto;
    flex-shrink: 0;
}

@media(min-width: 768px) {
    .orderInfo__img {
        width: 140px
    }
}

.orderInfo__img img {
    display: block;
    width: 100%;
    height: auto
}

.orderInfo__txt {
    min-width: 0;
    margin-left: 16px;
    flex: 1 1 0;
}

@media(min-width: 768px) {
    .orderInfo__txt {
        margin-left: 20px
    }
}

.orderInfo__txt__ttl {
    font-size: 1.6rem
}

.orderInfo__txt__yen {
    font-family: var(--font-number);
    margin-top: 8px
}

/* パック: 端数ロット(100 パック未満)のとき「あと 1 セットで ¥X お得」の案内 */
.orderInfo__txt__lot-hint {
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #047857;
}

/* Pack rows in the cart: quiet note that packs are checked for authenticity only (not guaranteed unsearched) */
.orderInfo__txt__pack-notice {
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #6b7280;
}

.orderInfo__txt__pack-notice a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

/* Pre-order line in the cart: informational blue, matching the product page badge */
.orderInfo__txt__preorder {
    margin-top: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1d4ed8;
}

.orderInfo__txt .costs {
    margin-top: 16px
}

.orderInfo__txt .costs .btnOutlineGray {
    width: 100%;
    height: 48px
}

@media(min-width: 768px) {
    .orderInfo__txt .costs {
        margin-top: 32px
    }

    .orderInfo__txt .costs .btnOutlineGray {
        width: auto;
        height: 58px
    }
}

.order__empty {
    padding: 24px 0;
    text-align: center;
    font-size: 1.4rem;
    color: #666
}

.alert {
    display: flex;
    align-items: center;
    color: #00b517;
    border: 1px solid #00b517;
    background: rgba(0, 181, 23, .1);
    border-radius: 4px;
    padding: 4px 12px;
    margin-bottom: 24px
}

.alert img {
    margin-right: 8px
}

.address__txt {
    font-size: 1.4rem
}

.addressList {
    margin-top: 24px;
    display: flex
}

.addressList__item {
    border: 1px solid #e0e0e0;
    font-size: 1.4rem;
    padding: 16px;
    width: 50%
}

.addressList__item+.addressList__item {
    margin-left: 16px
}

.addressList__item__head {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem
}

.addressList__item__txt {
    font-size: 1.4rem;
    color: #666;
    margin-top: 8px
}

.addressList__item .btnOutline {
    width: 60px;
    height: 30px;
    font-size: 1.4rem;
    line-height: 28px
}

.addressInput__ttl {
    font-size: 2rem;
    margin-bottom: 24px
}

.addressInput__ttl--mt32 {
    margin-top: 32px
}

.addressInput__ttl--line {
    padding-top: 24px;
    border-top: 1px solid #e0e0e0
}

.addressInput__item .btnPrimar {
    width: 144px
}

.addressInput__item--border {
    padding-top: 24px;
    border-top: 1px solid #e0e0e0
}

/* 請求先(インボイスの Billed to)。配送先フォームの下に区切って置く */
.addressInput--billing {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e0e0e0
}

.addressInput__note {
    margin-bottom: 24px;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #666
}

.addressInput__note a {
    text-decoration: underline
}

/* 長いボタン文言(Save and Update Invoice など)は基底の 144px に収まらない */
.addressInput__item .btnPrimar.addressInput__wideBtn {
    width: auto;
    padding: 0 24px
}

.addressInput__item--border .addressInput__clear {
    width: auto;
    height: 48px;
    margin-left: 12px;
    font-family: inherit;
    background: #fff;
    cursor: pointer
}

.cart {
    width: 100%;
    margin: auto;
    display: block;
    justify-content: space-between
}

@media(min-width: 768px) {
    .cart {
        display: flex;
        width: 92%;
        align-items: stretch
    }
}

/* スマホはカード(28px)と行(20px)の余白が二重に効いて商品名の列が 120px 程度まで
   細り、名前が 8 行に割れていた。外側の余白を詰めて 768px 以上は従来どおり */
.cart__cont {
    width: 100%;
    background: #fff;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .12)
}

@media(min-width: 768px) {
    .cart__cont {
        width: 66%;
        padding: 28px;
        margin-bottom: 0
    }
}

.cart__nav {
    width: 100%;
    background: #fff;
    position: relative;
    top: 0;
    border: 1px solid #edf0f5;
    border-radius: 28px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .12)
}

@media(min-width: 768px) {
    .cart__nav {
        width: 30%;
        position: sticky;
        top: 24px;
        align-self: stretch;
        display: flex
    }
}

.checkoutSection {
    margin-bottom: 24px
}

.checkoutTabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px
}

.checkoutTabs__btn {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    font-size: 1.4rem;
    font-weight: 600;
    color: #475569;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease
}

.checkoutTabs__btn.is-active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
    box-shadow: 0 8px 16px rgba(29, 78, 216, .22)
}

.checkoutSection__banner {
    background: #eef5ff;
    border: 1px solid #cfe0ff;
    border-radius: 16px;
    padding: 20px 22px
}

.checkoutSection__banner--login {
    background: #ecfdf3;
    border-color: #b7f7c8
}

.checkoutSection__banner--login .checkoutSection__title,
.checkoutSection__banner--login .checkoutSection__lead {
    color: #166534
}

.checkoutSection__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #23408f;
    margin-bottom: 6px
}

.checkoutSection__lead {
    font-size: 1.4rem;
    color: #23408f;
    margin: 0
}

.checkoutSection--account-fields {
    margin-top: 18px
}

.checkoutSection--shipping {
    margin-top: 4px;
    margin-bottom: 12px
}

.checkout-page .cart__cont {
    padding-top: 20px
}

.checkout-page .cartNext {
    padding-top: 20px
}

.checkout-page .checkoutSection--shipping {
    margin-top: 0
}

.checkoutSection__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px
}

.checkoutSection__heading {
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 18px
}

.checkoutSection__note {
    margin: 12px 0 0;
    color: #166534;
    font-size: 1.4rem;
    font-weight: 600
}

.checkoutSection__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1
}

.checkoutSection__field--half {
    grid-column: span 1
}

.checkoutSection__field .input__ttl {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0
}

.checkoutSection__field input,
.checkoutSection__field select {
    width: 100%;
    height: 50px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f3f4f6;
    font-size: 1.6rem;
    letter-spacing: 0
}

.checkoutSection__field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #f3f4f6;
    font-size: 1.6rem;
    letter-spacing: 0;
    resize: vertical;
    line-height: 1.6
}

.checkoutSection__field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
        linear-gradient(135deg, #94a3b8 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px
}

.checkoutSection__field input:focus,
.checkoutSection__field select:focus,
.checkoutSection__field textarea:focus {
    outline: none;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
    background: #f8fafc
}

.checkoutSection__field .input__note {
    margin-top: 6px;
    font-size: 1.3rem;
    color: #dc2626
}

/* チェックアウトの入力エラー(ec/src/proceed_page.ts が blur 後・注文ボタン押下後に出す) */
.checkoutField__error,
.checkoutAction__error {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.5;
    color: #dc2626
}

.checkoutAction__error {
    margin-top: 8px;
    text-align: center
}

.checkoutField__error[hidden],
.checkoutAction__error[hidden] {
    display: none
}

.checkoutSection__field input.is-invalid,
.checkoutSection__field select.is-invalid {
    border-color: #dc2626;
    background: #fef2f2
}

.input__optional {
    font-weight: 400;
    color: #6b7280
}

.input__optional[hidden] {
    display: none
}

@media(max-width: 767px) {
    .checkoutSection__fields {
        grid-template-columns: minmax(0, 1fr)
    }
}

/* スマホではメールアドレス(途中で改行できない長い 1 語)が本文列の最小幅になり、
   Logout リンクが枠の外へ押し出されていた。本文列を縮められるようにしてメールは
   どこでも折り返し、Logout はスマホだけ本文の下の行に置く */
.checkoutStatus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 2px solid #16a34a;
    background: #ecfdf3;
    color: #166534
}

.checkoutStatus__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.checkoutStatus__svg {
    width: 20px;
    height: 20px;
    fill: #16a34a
}

.checkoutStatus__body {
    flex: 1 1 0;
    min-width: 0
}

.checkoutStatus__title {
    font-size: 1.7rem;
    font-weight: 700;
    overflow-wrap: anywhere
}

.checkoutStatus__subtitle {
    font-size: 1.4rem;
    margin-top: 4px
}

/* アイコン(36px)＋間隔(16px)ぶん字下げして本文の先頭に揃える */
.checkoutStatus__action {
    flex-basis: 100%;
    padding-left: 52px
}

@media(min-width: 768px) {
    .checkoutStatus {
        flex-wrap: nowrap
    }

    .checkoutStatus__action {
        flex: 0 0 auto;
        padding-left: 0
    }
}

.checkoutStatus__link {
    font-size: 1.4rem;
    font-weight: 700;
    color: #166534;
    text-decoration: underline
}

.checkoutSection__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px
}

.checkoutSection__actions--right {
    justify-content: flex-end
}

.checkoutSection__link {
    font-size: 1.3rem;
    color: #1d4ed8
}

.checkoutSection__button {
    margin-top: 4px
}

.is-hidden {
    display: none
}

.cartNext {
    padding: 36px 32px 32px;
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1
}

.cartNext__ttl {
    font-weight: 700;
    font-size: 1.9rem;
    margin-bottom: 2px;
    color: #111;
    letter-spacing: 0
}

.cartNext__wrap {
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px
}

.cartNext__wrap[hidden] {
    display: none
}

.cartNext__wrap__txt {
    flex: 1 1 0;
}

.cartNext__wrap__txt--label {
    text-align: left;
    color: #5a6275;
    font-weight: 500
}

.cartNext__wrap__txt--value {
    text-align: right;
    color: #111;
    font-weight: 600
}


.cartNext__valueLine {
    display: block;
    line-height: 1.5
}

.cartNext__valueLine.is-hidden {
    display: none
}

.cartNext__valueLine-spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin: 4px 0;
    border-radius: 50%;
    border: 2px solid rgba(17, 17, 17, .15);
    border-top-color: #111;
    animation: btn-primar-spin .75s linear infinite
}

.cartNext__valueLine-spinner.is-visible {
    display: inline-block
}

.cartNext__wrap--line {
    border-top: 1px solid #e5e7eb;
    padding-top: 18px;
    margin-top: 2px
}

.cartNext__wrap--line .cartNext__wrap__txt--label,
.cartNext__wrap--line .cartNext__wrap__txt--value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111
}

.cartNext__wrap+.cartNext__wrap {
    margin-top: 0
}

/* Total 下の関税/VAT 注記。金額行に見せず控えめなグレー1行にする(転換率配慮) */
.cartNext__duties-note {
    margin: 6px 0 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #9ca3af;
    text-align: right;
}

.cartNext__duties-note[hidden] {
    display: none
}

.checkoutSteps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}

.checkoutSteps__step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #9ca3af;
    text-decoration: none;
}

.checkoutSteps__step--active {
    color: #111;
}

.checkoutSteps__step--future {
    color: #d1d5db;
}

.checkoutSteps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 1.2rem;
    font-weight: 700;
    background: #e5e7eb;
    color: #9ca3af;
}

.checkoutSteps__step--active .checkoutSteps__num {
    background: #111;
    color: #fff;
}

.checkoutSteps__step--future .checkoutSteps__num {
    background: #f3f4f6;
    color: #d1d5db;
}

.checkoutSteps__sep {
    width: 32px;
    height: 1px;
    background: #e5e7eb;
    margin: 0 8px;
}

/* 320px 級では「3 Confirmation」が右へ 7px はみ出すため、区切り線と間隔を詰める */
@media (max-width: 359px) {
    .checkoutSteps__step {
        gap: 4px;
        font-size: 1.2rem;
    }

    .checkoutSteps__sep {
        width: 12px;
        margin: 0 4px;
    }
}

.cartNext__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.cartNext__edit-cart {
    font-size: 1.2rem;
    font-weight: 500;
    color: #6b7280;
    text-decoration: underline;
    white-space: nowrap;
}

.cartNext__edit-cart:hover {
    color: #111;
}

.cartNext__shipping-note {
    font-size: 1.1rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 2px;
}
/* カートの送料目安と「あと 1 個で送料 +¥X だけ」(ec/shipping_estimate.py)。
   +/- の後もサーバー描画の HTML で差し替わる */
.cartNext__shipEstimate {
    margin-top: 12px;
}
/* 国名が長くても 3 行に折れないよう、金額側は内容幅にしてラベルに幅を回す */
.cartNext__shipEstimate .cartNext__wrap__txt--label {
    flex: 1 1 auto;
    min-width: 0;
}
.cartNext__shipEstimate .cartNext__wrap__txt--value {
    flex: 0 0 auto;
    white-space: nowrap;
}
.cartNext__bundleNudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 4px 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #ecfdf5;
    color: #047857;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
}
.cartNext__bundleNudgeText {
    flex: 1 1 160px;
    margin: 0;
    min-width: 0;
}
.cartNext__bundleNudgeForm {
    flex: 0 0 auto;
    margin: 0;
}
/* 「+ Add 1 more」。指で押せるよう 44px 以上(サーバー描画なのでレイアウトはずれない)。
   押下中は .is-loading + disabled + aria-busy でスピナーを出す(ec/src/cart_page.ts) */
.cartNext__bundleNudgeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    min-width: 132px;
    padding: 0 14px;
    border: 1px solid #047857;
    border-radius: 6px;
    background: #fff;
    color: #047857;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.cartNext__bundleNudgeBtn:hover {
    background: #d1fae5;
}
.cartNext__bundleNudgeBtn:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
}
.cartNext__bundleNudgeBtn.is-loading,
.cartNext__bundleNudgeBtn:disabled {
    cursor: progress;
    opacity: .7;
}
/* 送料行の配送方法名(DHL or FedEx / Japan Post)。発送・到着目安より少し強く出す */
.cartNext__shipping-method {
    font-weight: 500;
    color: var(--color-text-muted);
}
.cartNext__shipping-method[hidden] {
    display: none;
}
.cartNext__shipping-free {
    color: #16a34a;
    font-weight: 600;
}

/* VIP限定の取り置き(Hold)選択。cartNext__wrap の横並びを縦に上書きし、
   「どちらか選べる」ことが伝わるカード型の2択にする */
.cartNext__hold {
    display: block;
}
.cartNext__hold-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
}
.cartNext__hold-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
}
.cartNext__hold-option + .cartNext__hold-option {
    margin-top: 6px;
}
.cartNext__hold-option input {
    accent-color: #b45309;
    margin-top: 3px;
    flex-shrink: 0;
}
.cartNext__hold-option:has(input:checked) {
    border-color: #b45309;
    background-color: #fffbeb;
}
.cartNext__hold-option-name {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
}
.cartNext__hold-option-desc {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    color: #6b7280;
    margin-top: 2px;
}
.cartNext__hold-vip {
    display: inline-block;
    background: linear-gradient(135deg, #f6e27a 0%, #e6b83c 45%, #c9921e 100%);
    color: #4a2f04;
    border: 1px solid #b8860b;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 8px;
    vertical-align: 2px;
}

.cartNext__items-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 600;
    color: #4b3ff0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cartNext__items-toggle-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.cartNext__items-toggle[aria-expanded="true"] .cartNext__items-toggle-icon {
    transform: rotate(180deg);
}

.cartNext__items-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cartNext__items-list[hidden] {
    display: none;
}

.cartNext__wrap--item {
    gap: 12px;
    align-items: flex-start;
}

.cartNext__item-name {
    flex: 1 1 0;
    color: #5a6275;
    font-weight: 500;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cartNext__wrap--terms {
    margin-top: 12px;
    justify-content: flex-start;
    align-items: center
}

.cartNext__wrap--terms .checkboxInput__txt {
    font-size: 1.3rem
}

.cartNext__wrap--terms .checkboxInput {
    display: flex;
    align-items: center;
    cursor: pointer
}

.cartNext__wrap--terms .checkboxInput__input {
    margin: 0;
    width: 0;
    opacity: 0
}

.cartNext__wrap--terms .checkboxInput__txt {
    color: #212121;
    margin-left: 12px;
    display: block
}

.cartNext__wrap--terms .checkboxInput__input:checked+.checkboxInput__icn {
    border: solid 1px var(--color-primary);
    background: #fff
}

.cartNext__wrap--terms .checkboxInput__input:checked+.checkboxInput__icn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary) url("../img/icn/check.svg") no-repeat center;
    background-size: contain
}

.cartNext__wrap--terms .checkboxInput__icn {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    border: solid 2px #ccc;
    background: #fff;
    border-radius: 4px
}
.cartNext__note {
    padding: 18px 20px;
    border-radius: 18px;
    border: 2px solid #c7d2fe;
    background: #eef2ff;
    color: #2f2f6b
}

.cartNext__note-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2b2f87;
    margin-bottom: 14px
}

.cartNext__note-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px
}

.cartNext__note-item {
    position: relative;
    padding-left: 24px;
    font-size: 1.2rem;
    color: #2f3278;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}

.cartNext__note-item::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: #4b4ce4
}

.cartNext__wrap--action {
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
}

/* Checkout payment method choice (PayPal instant / Wise). Selected option gets
   an accent border; the PayPal fee row and next-steps list follow the choice. */
.cartNext__payment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cartNext__payment-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    margin: 0;
}

.cartNext__payment-option.is-selected {
    border: 2px solid var(--color-primary);
    padding: 9px 11px;
    background: #f8fafc;
}

.cartNext__payment-radio {
    margin: 4px 0 0;
    flex: 0 0 auto;
    accent-color: var(--color-primary);
}

.cartNext__payment-option .cartNext__payment-icon {
    margin-top: 2px;
}

.cartNext__payment-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.oc-payment--paid .oc-payment__card {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.cartNext__payment {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fafafa;
}

.cartNext__payment-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #5a6275;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
}

.cartNext__payment-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cartNext__payment-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cartNext__payment-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.cartNext__payment-icon--wise {
    fill: #163300;
}

.cartNext__payment-icon--paypal {
    fill: #003087;
}

.cartNext__payment-icon--card {
    fill: #334155;
}

.cartNext__payment-badge-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cartNext__payment-badge-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111;
}

.cartNext__payment-badge-note {
    font-size: 1.1rem;
    color: #5a6275;
}

/* カード(Stripe)の 1 注文上限を超えたとき: 選べないことを見せ、理由を赤字で添える */
.cartNext__payment-option.is-unavailable {
    opacity: .55;
    cursor: not-allowed;
}

.cartNext__payment-badge-limit {
    display: block;
    margin-top: 4px;
    font-size: 1.1rem;
    color: var(--color-red);
}

/* display: block が UA の [hidden] を打ち消すので、上限以内のときは明示的に消す */
.cartNext__payment-badge-limit[hidden] {
    display: none;
}

.ab-hidden {
    display: none;
}

.cartNext__button {
    width: 100%;
    height: 58px;
    padding: 0 24px;
    border-radius: 18px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .01em;
    background: #4b3ff0;
    box-shadow: 0 10px 18px rgba(75, 63, 240, .28)
}

.cartNext__button:disabled {
    box-shadow: none;
    opacity: .6
}

/* Cart: mobile sticky checkout bar (carts/index.html + ec/src/cart_page.ts).
   Shown while "Proceed to checkout" is off screen; toggled with transform/visibility only
   so it never shifts layout. The body padding is set from the first paint (server-rendered
   class) so the bar never covers the end of the footer. */
.cartStickyBar {
    display: none
}

@media(max-width: 767px) {
    body.has-cartStickyBar {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px))
    }

    .cartStickyBar {
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #e5e7eb;
        box-shadow: 0 -6px 18px rgba(15, 23, 42, .1);
        transition: transform .2s ease, visibility .2s
    }

    .cartStickyBar.is-offscreen {
        transform: translateY(100%);
        visibility: hidden
    }
}

.cartStickyBar__button {
    height: 56px;
    border-radius: 16px;
    font-size: 1.6rem;
    background: #4b3ff0
}

.cartNext__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    color: #6b7280;
    font-size: 1.1rem;
}

.cartNext__secure-icon {
    width: 14px;
    height: 14px;
    fill: #6b7280;
    flex-shrink: 0;
}

.cartNext__terms-notice {
    margin-top: 8px;
    text-align: center;
    font-size: 1.1rem;
    color: #9ca3af;
}

.cartNext__terms-notice a {
    color: #6b7280;
    text-decoration: underline;
}

.cartNext__coupon-wrap {
    margin-top: 24px;
}

/* 卸売/VIP割引行の下に出す「クーポン併用不可」の説明 */
.cartNext__coupon-note {
    margin: 4px 0 0;
    font-size: 1.1rem;
    color: #9ca3af;
}

.cartNext__coupon-note[hidden] {
    display: none;
}

.cartNext__coupon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #555;
    font-size: 1.3rem;
    cursor: pointer;
    margin-left: -10px;
    transition: border-color .15s, background .15s;
}

.cartNext__coupon-toggle[aria-expanded="true"] {
    border-color: #d1d5db;
    background: #f9fafb;
}

.cartNext__coupon-toggle:hover {
    color: #111;
}

.cartNext__coupon-tag-icon {
    flex-shrink: 0;
    fill: currentColor;
}

.cartNext__coupon-chevron {
    flex-shrink: 0;
    fill: currentColor;
    transition: transform .2s;
}

.cartNext__coupon-toggle[aria-expanded="true"] .cartNext__coupon-chevron {
    transform: rotate(180deg);
}

.cartNext__coupon-drawer {
    margin-top: 10px;
}
.cartNext__coupon-drawer[hidden],
.cartNext__coupon-applied-row[hidden],
.cartNext__coupon-error[hidden] {
    display: none;
}

.cartNext__coupon-row {
    display: flex;
    gap: 8px;
}

.cartNext__coupon-input {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1.4rem;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}

.cartNext__coupon-input:focus {
    border-color: #999;
}

.cartNext__coupon-apply {
    padding: 9px 18px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.cartNext__coupon-apply:hover:not(:disabled) {
    background: #333;
}

.cartNext__coupon-apply:disabled {
    opacity: .5;
    cursor: default;
}

.cartNext__coupon-error {
    margin-top: 6px;
    font-size: 1.2rem;
    color: var(--color-red);
}

.cartNext__coupon-applied-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #f0fdf4;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 1.3rem;
}

/* クーポンコード(SHIPCREDIT-XXXXXXXX 等の改行できない 1 語)の幅でラベル列が縮まず、
   割引額と削除ボタンが行の外へ押し出されていた。ラベル列を縮められるようにして
   コードは途中で折り返す */
.cartNext__coupon-applied-label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #16a34a;
    font-weight: 600;
    fill: #16a34a;
}

.cartNext__coupon-applied-label svg {
    flex-shrink: 0;
}

.cartNext__coupon-applied-right {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

/* 購入還元の行(カート・チェックアウト)。ラベルの下に注釈を 1 行で置き、
   金額(+¥X)は割引行(-¥X)と同じ右寄せにする */
.cartNext__cashback {
    align-items: flex-start;
}

.cartNext__cashback-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* 金額は「-」「¥1,500」「JPY」が別々の行に割れないよう折り返さない */
.cartNext__coupon-applied-amount {
    color: #16a34a;
    font-weight: 600;
    white-space: nowrap;
}

.cartNext__coupon-remove-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #16a34a;
    fill: #16a34a;
    border-radius: 50%;
}

.cartNext__coupon-remove-btn:hover {
    color: #15803d;
    fill: #15803d;
}

.oc-order__total-row--discount .oc-order__total-value--discount {
    color: #16a34a;
    font-weight: 600;
}

.l-footer {
    padding-top: 40px;
    background: #3a49c3
}

@media(min-width: 768px) {
    .l-footer {
        padding-top: 60px
    }
}

.footer {
    justify-content: space-between
}

@media(min-width: 768px) {
    .footer {
        display: flex;
        flex-wrap: wrap
    }
}

.footer__nav {
    width: 100%;
    padding: 0 20px
}

@media(min-width: 768px) {
    .footer__nav {
        width: 20%
    }
}

.footer__nav+.footer__nav {
    margin-top: 40px
}

@media(min-width: 768px) {
    .footer__nav+.footer__nav {
        margin-top: 0
    }
}

.footer__nav__ttl {
    margin-bottom: 16px;
    color: #fff;
    font-weight: bold
}

@media(min-width: 768px) {
    .footer__nav__ttl {
        margin-bottom: 24px
    }
}

.footer__nav__item {
    display: block;
    margin-bottom: 4px;
    color: #fff
}

.footer__nav__item:link,
.footer__nav__item:visited,
.footer__nav__item:hover,
.footer__nav__item:active {
    color: #fff
}

.footer__nav__sns {
    display: inline-block;
    margin-top: 24px;
    margin-right: 8px;
    font-size: 2.4rem;
    text-decoration: none
}

@media(min-width: 768px) {
    .footer__nav__sns {
        margin-top: 72px
    }
}

.footer__nav__txt {
    color: #fff
}

.footerCopy {
    width: 100%;
    margin-top: 40px;
    padding: 24px 0;
    color: #fff;
    background: #303fb9;
    font-size: 1.2rem;
    text-align: center
}

@media(min-width: 768px) {
    .footerCopy {
        margin-top: 64px
    }
}



/* ===== Mobile sticky search bar =====
   Phones only: the header nav (and its search field) is behind the hamburger,
   so this bar is the visible search entry point. It sticks directly under the
   navbar using the height main.js measures into --ec-navbar-h. Desktop keeps
   the inline nav search and hides this. */
.l-spSearch {
    display: none;
}

@media (max-width: 767px) {
    .l-spSearch {
        display: block;
        position: sticky;
        top: var(--ec-navbar-h, 56px);
        z-index: 9;
        border-bottom: 1px solid #e9e9ea;
        background: #f4f4f4;
    }

    .spSearch {
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 6px 10px;
    }

    /* Outlined + grid icon so it reads as "opens a list", not as a second
       primary CTA competing with search. Filled while its sheet is open. */
    .spSearch__cat {
        display: inline-flex;
        flex: 0 0 auto;
        gap: 5px;
        align-items: center;
        height: 34px;
        padding: 0 10px;
        border: 1.5px solid var(--color-primary);
        border-radius: 5px;
        box-sizing: border-box;
        background: #fff;
        color: var(--color-primary);
        font-size: 1.2rem;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .spSearch__cat[aria-expanded="true"] {
        background: var(--color-primary);
        color: #fff;
    }

    .spSearch__catIcon {
        flex: 0 0 auto;
    }

    /* Input and magnifier form one control; the icon-only submit leaves the
       input the width it needs for long card names */
    .spSearch__form {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
    }

    .spSearch__input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        height: 34px;
        padding: 0 10px;
        border: 1px solid #c9c9cf;
        border-right: none;
        border-radius: 5px 0 0 5px;
        box-sizing: border-box;
        background: #fff;
        font-size: 1.4rem;
        outline: none;
    }

    .spSearch__input::placeholder {
        color: #8a8a92;
    }

    /* outline を消しているぶん、キーボード操作でどこにいるか分かる代替を出す */
    .spSearch__input:focus-visible {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(79, 93, 224, .45);
    }

    .spSearch__submit {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 34px;
        border: none;
        border-radius: 0 5px 5px 0;
        background: var(--color-primary);
        color: #fff;
        cursor: pointer;
    }

    .spSearch__submit span {
        display: flex;
    }

    /* The bar replaces the magnifier + full-screen modal on phones */
    .action__item.js-searchBtn {
        display: none;
    }

    /* ...and the nav's own search field, which would otherwise appear a second
       time inside the drawer */
    .nav__item--search {
        display: none;
    }

    /* Opened from "Categories": show the category menu only, so the drawer
       matches the button. The hamburger still opens the whole nav. */
    .nav.is-catOnly .nav__item:not(.nav__item--menuBar) {
        display: none;
    }

    /* Both drawers are presented as a white sheet with a title, a close button
       and divider-separated rows, like hareruya2's category popup. Only the
       contents differ: the hamburger adds the non-category items. */
    .nav {
        /* A sheet that hugs its rows, over a dimmed page — not a full-height
           drawer. Tapping the dimmed area closes it. */
        bottom: auto;
        max-height: calc(100vh - var(--ec-drawer-top, 0px));
        /* The drawer's 12px row gap would show the dimmed backdrop between rows */
        gap: 0;
        padding: 0;
        overflow-y: auto;
        background: #fff;
    }

    /* Dim from the panel's own top edge down, so the header and the search bar
       above it stay legible and usable */
    .nav::after {
        content: "";
        position: fixed;
        z-index: -1;
        top: var(--ec-drawer-top, 0px);
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .5);
    }

    /* The dim below is a negative-z-index pseudo element, which paints over the
       panel's own background but under its children, so each row carries its
       own background rather than relying on the panel's */
    .nav .navCat__head {
        display: flex;
        position: relative;
        width: 100%;
        align-items: center;
        padding: 14px 52px 14px 12px;
        background: #fff;
    }

    .navCat__title {
        font-size: 1.8rem;
        font-weight: 700;
    }

    /* The hamburger shows the whole nav, the search bar's button only the
       categories, so the sheet names which one you opened */
    .navCat__title--cat {
        display: none;
    }

    .nav.is-catOnly .navCat__title--menu {
        display: none;
    }

    .nav.is-catOnly .navCat__title--cat {
        display: inline;
    }

    /* Plain nav rows (Home) match the category rows: the drawer's white-on-dark
       link colour is unreadable on the sheet */
    .nav .nav__item>a {
        padding: 12px;
        border-top: 1px solid #e0dfe3;
        background: #fff;
        color: var(--color-primary);
    }

    .navCat__close {
        position: absolute;
        top: 50%;
        right: 10px;
        width: 32px;
        height: 32px;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid #e0dfe3;
        border-radius: 5px;
        background: #fff;
        color: #111;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav .menuBar {
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    .nav .menuBar__item {
        width: 100%;
        min-width: 0;
    }

    .nav .menuBar__item a {
        padding: 12px;
        border: 0;
        border-top: 1px solid #e0dfe3;
        border-radius: 0;
        background: #fff;
        color: var(--color-primary);
        font-weight: 400;
        text-align: left;
    }

    /* Collapsed until tapped. The drawer's base rule is display:block, which
       makes the js-dropdown toggle a no-op and leaves the caret lying about
       being expandable. */
    .nav .dropdown {
        display: none;
        left: 0;
    }

    .nav .dropdown.is-active {
        display: block;
    }

    /* Caret to the right edge, and flipped while open */
    .nav .menuBar__item--group>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav .menuBar__item--group>a[aria-expanded="true"] .menuBar__caret {
        transform: rotate(180deg);
    }

    /* Sub categories read as nested rows, not as links on the dark drawer */
    .nav .menuBar__sub .menuBar__subItem a {
        padding: 12px 12px 12px 24px;
        border-top: 1px solid #e0dfe3;
        border-radius: 0;
        background: #f0f0f0;
        color: #111;
    }

    .nav .navCat__foot {
        display: block;
        width: 100%;
    }

    .navCat__closeBar {
        width: 100%;
        padding: 12px 0;
        border: 0;
        background: #222;
        color: #fff;
        font-size: 1.4rem;
        cursor: pointer;
    }

    /* The sticky bar's Categories button covers this, and on phones the block
       filled the first screen before any result was visible */
    .l-sideMenu {
        display: none;
    }
}

/* Panel-only chrome: hidden unless the drawer was opened from "Categories" */
.navCat__head,
.navCat__foot {
    display: none;
}

.spSearch__submit.is-loading {
    pointer-events: none;
}

.spSearch__submit.is-loading span {
    opacity: 0;
}

.spSearch__submit.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    animation: search-spinner-rotate .65s linear infinite;
}

.l-search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.96);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    display: none;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.l-search.is-open {
    opacity: 1;
    visibility: visible;
    display: flex;
}

/* 検索モーダルの閉じるボタン(右上の ✕) */
.l-search .close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 44px;
    height: 44px;
    cursor: pointer
}

.l-search .close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 2px;
    margin: -1px 0 0 -14px;
    border-radius: 2px;
    background: #333
}

.l-search .close span:nth-of-type(1) {
    transform: rotate(45deg)
}

.l-search .close span:nth-of-type(2) {
    transform: rotate(-45deg)
}

.l-search.is-open .search {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.l-search.is-open .search input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ccc;
}

.search__form {
    display: flex;
    gap: 0;
}

.search__form input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px 0 0 8px;
    height: 48px;
}

/* 検索モーダル内のボタン専用で上書き */
.l-search .search__form button {
    all: unset;
    /* 一度リセット */
    background: #333;
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0 16px;
    font-size: 18px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.l-search .search__form button i {
    font-size: 20px;
    line-height: 1;
}

.l-search .search__form button.is-loading {
    pointer-events: none;
    background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
}

.l-search .search__form button.is-loading i {
    opacity: 0;
}

.l-search .search__form button.is-loading::before,
.l-search .search__form button.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.l-search .search__form button.is-loading::before {
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 100%);
    filter: blur(1px);
    animation: search-spinner-glow 1.2s ease-in-out infinite;
}

.l-search .search__form button.is-loading::after {
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-right-color: rgba(255, 255, 255, 0.75);
    animation: search-spinner-rotate .65s linear infinite;
}
.country-name-field {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid #c4c4c4;
    border-radius: 0.35rem;
    background-color: #f9f9f9;
    font-size: 1rem;
    font-weight: 400;
    color: #1f1f1f;
}

.country-name-field:disabled {
    cursor: not-allowed;
    opacity: 1;
}

/* Instagram Feed */
.instagram-section {
    margin-top: 60px;
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.instagram-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.instagram-section__handle {
    color: #777;
    font-size: 0.95rem;
    font-weight: 500;
}

.instagram-feed {
    margin-top: 16px;
}

.instagram-feed__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    min-height: 200px;
}

.instagram-feed__item {
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.instagram-feed__item:focus-visible {
    outline: 2px solid #5a64ff;
    outline-offset: 2px;
}

.instagram-feed__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #f2f2f2;
}

.instagram-feed__play {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
}

.instagram-feed__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
}

.instagram-feed__empty {
    margin-top: 16px;
    color: #666;
    font-size: 0.95rem;
}

.instagram-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 11000;
    padding: 24px;
}

.instagram-modal.is-open {
    display: flex;
}

.instagram-modal__backdrop {
    position: absolute;
    inset: 0;
}

.instagram-modal__dialog {
    position: relative;
    background: #1f2328;
    border-radius: 18px;
    width: min(100%, 1000px);
    max-height: 92vh;
    display: flex;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.instagram-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #222;
    font-size: 22px;
    line-height: 36px;
    cursor: pointer;
    z-index: 2;
}

.instagram-modal__media {
    flex: 1 1 60%;
    background: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

.instagram-modal__image {
    max-width: 100%;
    max-height: 92vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.instagram-modal__video {
    max-width: 100%;
    max-height: 92vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0d0d0d;
}

.instagram-modal__permalink {
    display: inline-block;
    margin-top: 14px;
    color: #9fd0ff;
    font-size: 0.9rem;
    text-decoration: underline;
}

.instagram-modal__content {
    flex: 0 0 40%;
    padding: 24px 26px;
    overflow-y: auto;
    background: #1f2328;
    color: #f5f5f5;
}

.instagram-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    background: #1f2328;
    color: #f5f5f5;
    padding: 16px 22px 10px;
    margin: -24px -26px 14px;
    border-top-right-radius: 18px;
}

.instagram-modal__profile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.instagram-modal__profile-link:hover {
    opacity: 0.9;
}

.instagram-modal__profile-link:focus-visible {
    outline: 2px solid rgba(122, 162, 255, 0.9);
    outline-offset: 2px;
    border-radius: 8px;
}

.instagram-modal__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}

.instagram-modal__username {
    font-size: 1.05rem;
    color: #ffffff;
    padding: 4px 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-weight: 600;
}

.instagram-modal__caption {
    color: #f5f5f5;
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: normal;
    margin-bottom: 16px;
}

.instagram-modal__caption.is-empty {
    color: #9aa0a6;
}

.instagram-modal__time {
    color: #9aa0a6;
    font-size: 0.85rem;
    margin-top: 10px;
}

.instagram-modal__hashtag {
    color: #7aa2ff;
}

body.has-instagram-modal {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .instagram-feed__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .instagram-feed__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .instagram-modal__dialog {
        flex-direction: column;
    }

    .instagram-modal__content {
        flex: 1 1 auto;
        width: 100%;
    }

    .instagram-modal__media {
        min-height: 280px;
    }
}

@media (max-width: 520px) {
    .instagram-feed__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .instagram-modal {
        padding: 12px;
    }

    .instagram-modal__close {
        top: 8px;
        right: 8px;
    }
}

/* ---------- detail page ---------- */
/* List price struck through when a wholesale/VIP discount is already taken off */
.information__price-was {
    margin-right: 6px;
    font-size: 1.6rem;
    font-weight: 400;
    color: #9ca3af;
}

.information__price--soldout {
    color: #c23b3b;
    font-weight: 600;
}

.btnPrimar.is-disabled {
    background-color: #9a9a9a;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Order Complete Page ---------- */
.oc-page {
    background: var(--color-gray-bg);
    min-height: 60vh;
    padding: 32px 0 0;
}

.oc-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 15px 32px;
}

.oc-header {
    background: #fff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    margin-bottom: 16px;
}

.oc-header__badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e6f9ea;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.oc-header__check {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--color-green);
}

.oc-header__title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
    margin-bottom: 8px;
}

.oc-header__sub {
    font-size: 1.4rem;
    color: #666;
    line-height: 1.5;
}

.oc-header__order-id {
    color: var(--color-primary);
}

.oc-payment {
    border-radius: 12px;
    border: 2px solid #2563eb;
    background: #eff6ff;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.08);
    padding: 24px;
    margin-bottom: 16px;
}

.oc-payment__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.oc-payment__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-payment__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e40af;
    line-height: 1.4;
}

.oc-payment__timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.oc-payment__timer-label {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 4px;
}

.oc-payment__timer-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-red);
    font-family: var(--font-number);
    letter-spacing: 0.02em;
}

.oc-payment__card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

.oc-payment__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.oc-payment__card-title {
    font-weight: 700;
    font-size: 1.5rem;
    color: #111;
}

.oc-payment__no-fee {
    background: #e6f9ea;
    color: var(--color-green);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 1.1rem;
    font-weight: 600;
    /* 幅の狭い端末で「✓ No」「Fee」と 2 行に割れたピルにならないようにする */
    white-space: nowrap;
}

.oc-payment__wise-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 64px;
    background: var(--color-green);
    color: #fff;
    border-radius: 10px;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: background .2s;
}

.oc-payment__wise-btn:link,
.oc-payment__wise-btn:visited,
.oc-payment__wise-btn:hover,
.oc-payment__wise-btn:active {
    color: #fff;
}

.oc-payment__wise-btn:hover {
    background: #3a903d;
}

.oc-payment__wise-icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
    flex-shrink: 0;
}

.oc-payment__paypal {
    margin-top: 12px;
    text-align: center;
}

.oc-payment__paypal-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3rem;
    color: #666;
    text-decoration: underline;
}

.oc-payment__paypal-link:link,
.oc-payment__paypal-link:visited {
    color: #666;
}

.oc-payment__paypal-link:hover {
    color: #0070ba;
}

.oc-payment__paypal-link:hover .oc-payment__paypal-icon {
    fill: #0070ba;
}

.oc-payment__paypal-icon {
    width: 16px;
    height: 16px;
    fill: #003087;
    flex-shrink: 0;
}

.oc-payment__meta {
    border-top: 1px solid #ececec;
    padding-top: 12px;
    margin-top: 16px;
}

.oc-payment__meta-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

.oc-payment__meta-row:last-child {
    margin-bottom: 0;
}

/* 長いメールアドレスがカードの外へはみ出さないよう、どこでも折り返せるようにする */
.oc-payment__meta-email {
    font-weight: 600;
    color: #4b5563;
    overflow-wrap: anywhere;
}

.oc-payment__warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-red);
    line-height: 1.5;
}

.oc-order {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    margin-bottom: 16px;
}

.oc-order__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
}

.oc-order__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #ececec;
}

.oc-order__item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.oc-order__item--hidden {
    display: none;
}

.oc-order__item-img {
    width: 48px;
    height: 68px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.oc-order__item-placeholder {
    width: 48px;
    height: 68px;
    border-radius: 4px;
    background: #ececec;
    flex-shrink: 0;
}

.oc-order__item-name {
    flex: 1;
    font-size: 1.3rem;
    color: #4b5563;
    line-height: 1.5;
}

.oc-order__item-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    font-family: var(--font-number);
    flex-shrink: 0;
}

/* 幅の狭い端末では価格列に幅を取られて商品名が 10 行近くに割れるため、
   画像の右に商品名、その下に価格を置く */
@media (max-width: 479px) {
    .oc-order__item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
    }

    .oc-order__item-img,
    .oc-order__item-placeholder {
        grid-row: span 2;
    }

    .oc-order__item-name {
        min-width: 0;
    }
}

.oc-order__show-more {
    width: 100%;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    color: var(--color-primary);
    font-size: 1.3rem;
    cursor: pointer;
    margin-top: 16px;
    transition: background .2s;
}

.oc-order__show-more:hover {
    background: var(--color-gray-bg);
}

.oc-order__totals {
    border-top: 1px solid #e0e0e0;
    padding-top: 16px;
    margin-top: 16px;
}

.oc-order__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    color: #4b5563;
    margin-bottom: 10px;
}

.oc-order__total-row--final {
    font-size: 1.8rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 0;
    margin-top: 4px;
}

.oc-order__total-value {
    font-weight: 700;
    font-family: var(--font-number);
}

.oc-order__total-value--accent {
    color: var(--color-primary);
}

.oc-order__shipping-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.oc-order__shipping-note {
    font-size: 1.1rem;
    color: var(--color-green);
}
/* 注文完了画面の購入還元の行。ラベルの下に注釈を 1 行で置く */
.oc-order__cashback-label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Total 下の関税/VAT 注記(DDU)。金額行に見せず控えめなグレー1行にする */
.oc-order__duties-note {
    margin: 8px 0 0;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #9ca3af;
    text-align: right;
}
.oc-order__shipping-free {
    color: #16a34a;
    font-weight: 600;
}

.oc-cta {
    margin-bottom: 0;
}

.oc-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background .2s;
    text-decoration: none;
}

.oc-cta__btn:link,
.oc-cta__btn:visited,
.oc-cta__btn:hover,
.oc-cta__btn:active {
    color: #666;
}

.oc-cta__btn:hover {
    background: var(--color-gray-bg);
}

/* ---------- Contact Page ---------- */
.contactAlert {
    padding: 14px 16px;
    border-radius: 6px;
    margin: 0 auto 24px;
    max-width: 640px;
    font-size: 1.5rem;
}

.contactAlert--success {
    background: #e6f4ea;
    color: #1e6b3a;
    border: 1px solid #a8d5b5;
}

.contactAlert--error {
    background: #fdecea;
    color: #b71c1c;
    border: 1px solid #f5c6c6;
}

.contactLayout {
    max-width: 640px;
    margin: 0 auto;
}

.contactInfo {
    margin-bottom: 32px;
}

.contactInfo__title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.contactInfo__lead {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

.contactInfo__list {
    list-style: disc;
    padding-left: 20px;
    font-size: 1.5rem;
    color: #444;
    margin-bottom: 20px;
}

.contactInfo__list li + li {
    margin-top: 6px;
}

.contactInfo__note {
    font-size: 1.3rem;
    color: #888;
}

.contactFormWrap {
    width: 100%;
}

.contactForm textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1.5rem;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    min-height: 140px;
}

/* ============================================================
   /review page
   ============================================================ */
.review {
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 40px 0;
}

.review__card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    padding: 40px;
}

.review__header {
    border-top: 4px solid #4f5de0;
    text-align: center;
}

.review__badge {
    display: inline-block;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 6px 20px;
    margin-bottom: 16px;
    color: #4f5de0;
    font-weight: 700;
    font-size: 1.4rem;
}

.review__title {
    font-size: 3.2rem;
    font-weight: 800;
    color: #111111;
    line-height: 1.3;
    margin-bottom: 16px;
}

.review__title__accent {
    color: #4f5de0;
    display: block;
}

.review__header__desc {
    color: #4b5563;
    font-size: 1.6rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.review__header__desc strong {
    color: #4f5de0;
    font-weight: 600;
}

.review__sectionTitle {
    font-size: 2.4rem;
    font-weight: 800;
    color: #111111;
    text-align: center;
    margin-bottom: 32px;
}

.review__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.review__step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fafafa;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #4f5de0;
    transition: box-shadow .2s ease;
}

.review__step:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

.review__step--green {
    border-left-color: #42a846;
}

.review__step__num {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #4f5de0;
    color: #fff;
    font-weight: 700;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review__step--green .review__step__num {
    background: #42a846;
}

/* 本文列が flex の min-width:auto で縮まず、@ハンドル等の長い語でカード右端から切れるのを防ぐ */
.review__step__body {
    min-width: 0;
    overflow-wrap: anywhere
}

.review__step__ttl {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
}

.review__step__body p {
    color: #4b5563;
    font-size: 1.4rem;
    line-height: 1.7;
    margin: 4px 0;
}

.review__step__body ul {
    color: #4b5563;
    font-size: 1.4rem;
    line-height: 1.7;
    margin: 4px 0 16px;
    padding-left: 20px;
}

.review__step__body ul li strong {
    color: #111111;
}

.review__stepBtn,
.review__stepBtn:link,
.review__stepBtn:visited,
.review__stepBtn:active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4f5de0;
    color: #fff;
    padding: 0 24px;
    height: 44px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.6rem;
    text-decoration: none;
    transition: opacity .2s ease;
}

.review__stepBtn:hover {
    opacity: .9;
    color: #fff;
}

/* 基本ルールより後に置く(同じ詳細度のため) */
@media (max-width: 767px) {
    .review__card {
        padding: 24px 16px
    }

    .review__step {
        gap: 12px;
        padding: 16px
    }

    .review__step__num {
        width: 36px;
        height: 36px;
        font-size: 1.6rem
    }

    /* 固定 height だと狭幅で 2 行に折り返した文言がボタンからはみ出す */
    .review__stepBtn,
    .review__stepBtn:link,
    .review__stepBtn:visited,
    .review__stepBtn:active {
        height: auto;
        min-height: 44px;
        padding: 8px 20px
    }
}

.review__coupon {
    color: #42a846;
    font-weight: 700;
}

.review__proTip {
    background: #f0f9f1;
    border: 1px solid #42a846;
    border-radius: 6px;
    padding: 12px;
    margin-top: 12px;
    font-size: 1.3rem;
    color: #111111;
    line-height: 1.6;
}

.review__exampleSub {
    color: #4b5563;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 24px;
}

.review__cta {
    background: linear-gradient(90deg, #6345ed 0%, #e15cfc 100%);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 12px 24px rgba(0,0,0,.18);
}

.review__ctaTitle {
    font-size: 2.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.review__ctaSub {
    color: rgba(255,255,255,.9);
    font-size: 1.6rem;
    margin-bottom: 24px;
}

.review__ctaBtn,
.review__ctaBtn:link,
.review__ctaBtn:visited,
.review__ctaBtn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff;
    color: #4f5de0;
    /* 固定 height だとスマホで 2 行に折り返したとき矢印がボタンからはみ出す */
    padding: 12px 24px;
    min-height: 56px;
    text-align: center;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.6rem;
    text-decoration: none;
    transition: opacity .2s ease;
}

.review__ctaBtn:hover {
    opacity: .95;
    color: #4f5de0;
}

/* ---------- Trust / Payment & Shipping Bar ---------- */
/* モバイルではラベル・キャプションを隠しロゴ1行のスリムなストリップに
   畳む（ファーストビューを商品コンテンツに譲るため）。768px以上は
   従来のラベル＋2グループ構成を維持する。 */
.l-trust-bar {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.trust-bar {
    width: 100%;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: center;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .trust-bar {
        padding: 12px 48px;
        gap: 40px;
    }
}

.trust-bar__label {
    display: none;
    font-size: 1.6rem;
    font-weight: 900;
    color: #111;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .trust-bar__label {
        display: block;
    }
}

.trust-bar__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.trust-bar__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .trust-bar__logos {
        gap: 12px;
    }
}

.trust-bar__logos li {
    display: flex;
    align-items: center;
}

.trust-bar__logos img {
    display: block;
    height: 28px;
    width: auto;
}

/* トップページのストリップだけモバイルでロゴを縮める（詳細ページは対象外） */
@media (max-width: 767px) {
    .l-trust-bar .trust-bar__logos img {
        height: 20px;
    }
}

/* 320px級の狭い端末でも5ロゴが1行に収まるように一段縮める */
@media (max-width: 374px) {
    .l-trust-bar .trust-bar__logos img {
        height: 16px;
    }
}

.trust-bar__caption {
    display: none;
    font-size: 1.15rem;
    color: #6b7280;
    white-space: nowrap;
    margin: 0;
}

@media (min-width: 768px) {
    .trust-bar__caption {
        display: block;
    }
}

.trust-bar__divider {
    display: none;
}

@media (min-width: 768px) {
    .trust-bar__divider {
        display: block;
        width: 1px;
        height: 48px;
        background: #e5e7eb;
        flex-shrink: 0;
    }
}

/* Section panel */
.section-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px
}

/* Box 見出しはカテゴリリンクが 3 本あり、折り返さないとスマホで横にはみ出して
   ページ全体が横スクロールになる。見出し・リンクとも折り返しを許す */
.section-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px
}

.section-panel__title {
    font-size: 2.4rem;
    font-weight: 700
}

.section-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px
}

.section-panel__see-all {
    color: #f97316;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap
}

.section-panel__see-all:hover {
    color: #ea580c
}

/* Brand filter
   Pack / Box 見出しのカテゴリリンク（.section-panel__see-all）と同じテキスト表示に揃える。
   <button> は font / color を継承しないため明示しないと iOS Safari で青文字・システムフォントになる */
.brand-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 16px
}

.brand-filter__btn {
    padding: 4px 0;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    color: #252c32;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s
}

.brand-filter__btn:hover {
    color: #596a78
}

.brand-filter__btn.is-active {
    font-weight: 700;
    color: #252c32;
    border-bottom-color: currentColor
}

/* 5-column card grid */
.l-card--5col .card {
    width: 48%;
    margin-right: 4%
}

.l-card--5col .card:nth-child(2n) {
    margin-right: 0
}

/* 5 per row only from 1024px: at 768-1023px five columns leave <90px of text
   width and the amount ("¥109,500 JPY") cannot fit on one line, so tablets
   use the horizontal-scroll layout below instead */
@media (min-width: 1024px) {
    .l-card--5col .card {
        width: 18.4%;
        margin-right: 2%
    }

    .l-card--5col .card:nth-child(2n) {
        margin-right: 2%
    }

    .l-card--5col .card:nth-child(5n) {
        margin-right: 0
    }
}

/* The homepage cards are narrow (43% of a phone screen, ~120-170px of text
   width at 1024-1280px with 5 per row): scale the price / button text down
   slightly so the amount ("¥109,500 JPY") and "ADD TO CART" stay on one line
   instead of breaking "JPY" / "CART" onto a second line */
.l-card--5col .card__info__price {
    font-size: clamp(1.5rem, 1.5vw + .2rem, 2rem)
}

.l-card--5col .card__info__btn .btnOutline {
    padding-left: 6px;
    padding-right: 6px;
    font-size: clamp(1.2rem, 1.1vw, 1.4rem)
}

/* Mobile / tablet: horizontal scroll for homepage section grids */
@media (max-width: 1023px) {
    .l-card--5col {
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .l-card--5col::-webkit-scrollbar {
        display: none
    }

    .l-card--5col .card {
        flex: 0 0 43%;
        width: 43%;
        margin-right: 0;
        margin-bottom: 0;
        scroll-snap-align: start
    }

    .l-card--5col .card:nth-child(2n) {
        margin-right: 0
    }

    .l-card--5col.js-section-grid {
        min-height: 0
    }
}

/* Phone (<768px): cards are 43% of the screen (~120px), so trim the side
   padding a little to keep a 6-digit amount ("¥109,500 JPY") on one line */
@media (max-width: 767px) {
    .l-card--5col .card__info__wrap {
        padding-left: 10px;
        padding-right: 10px
    }

    .l-card--5col .card__info__btn .btnOutline {
        padding-left: 4px;
        padding-right: 4px
    }
}

/* 320px 級の端末では 43% のカードが文字幅 ~75px まで細り、価格(¥13,456 / JPY)と
   ADD TO / CART が 2 行に割れる。カードを広げて 1.5 枚見せにする(横スクロールで
   続きがあることは半分見えるカードで伝わる) */
@media (max-width: 359px) {
    .l-card--5col .card {
        flex: 0 0 62%;
        width: 62%
    }
}

/* Tablet (768-1023px): still the horizontal-scroll layout, but wider cards
   (3+ visible) so the price and button fit on one line. Must come after the
   max-width:1023px block above to win the cascade */
@media (min-width: 768px) and (max-width: 1023px) {
    .l-card--5col .card {
        flex: 0 0 30%;
        width: 30%
    }
}

/* Card badge (New / rank) */
.card-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    z-index: 2;
    pointer-events: none
}

.card-badge--rank {
    right: auto;
    left: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px
}

/* Brand label in ranking cards */
.card-brand-label {
    font-size: 1.2rem;
    color: #9ca3af;
    margin-bottom: 4px
}

/* CLS guard for section grids */
.js-section-grid {
    min-height: 380px
}

/* Condition badge */
.condition-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.condition-badge__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}

/* Detail page: conversion improvements */
.stock-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e23434;
}

.stock-badge__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e23434;
    flex-shrink: 0;
    animation: stock-pulse 1.5s ease-in-out infinite;
}

@keyframes stock-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* パック詳細: 価格ラダー(1 セット / 2 セット=満ロットの合計とパック単価) */
.price-ladder {
    margin-top: 10px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-gray);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--font-number);
}

.price-ladder__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    padding: 8px 12px;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #545454;
}

.price-ladder__row + .price-ladder__row {
    border-top: 1px solid var(--color-gray);
}

.price-ladder__row--best {
    background-color: #ecfdf5;
    color: #065f46;
}

.price-ladder__qty {
    grid-column: 1;
}

.price-ladder__total {
    grid-column: 2;
    text-align: right;
    font-weight: 700;
    color: var(--color-black);
}

.price-ladder__row--best .price-ladder__total {
    color: #047857;
}

.price-ladder__per {
    grid-column: 1 / -1;
    font-size: 1.2rem;
    color: #777;
}

.price-ladder__row--best .price-ladder__per {
    color: #047857;
    font-weight: 700;
}

.price-ladder__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background-color: #047857;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    vertical-align: middle;
}

@media (min-width: 768px) {
    .price-ladder__row {
        grid-template-columns: 1fr auto auto;
    }
    .price-ladder__total {
        grid-column: 2;
    }
    .price-ladder__per {
        grid-column: 3;
        min-width: 11em;
        text-align: right;
    }
}

.shipping-info {
    margin-top: 12px;
    font-size: 1.4rem;
    color: #545454;
}

.shipping-info__arrival {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    color: #777;
}

/* Pre-order: informational (blue), never warning red — the release date is part of
   the offer, so it must not read as a problem with the order */
.shipping-info--preorder {
    color: #1d4ed8;
}

/* シールド品の送料目安(国が分かるときだけサーバー描画)。発送目安の直下に置く */
.shipping-info__estimate {
    margin-top: 6px;
    font-size: 1.3rem;
    color: #545454;
}

.shipping-info__estimate strong {
    color: #111;
}

.shipping-info__estimate-note {
    display: block;
    margin-top: 2px;
    font-size: 1.1rem;
    color: #9ca3af;
}

.preorder-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.preorder-badge__label {
    font-weight: 700;
}

.preorder-badge__date {
    font-weight: 500;
}

/* Search results / card grid: state the release date before the buyer clicks in */
.card__info__preorder {
    display: block;
    margin-top: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d4ed8;
}

/* 承認済みレビューの評価（「★★★★★ 4.8 (3)」）。商品名の下・価格の上に 1 行。
   件数が無いカードには出さない（ec/services/review_stats.py） */
.card__info__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #374151;
}
.card__info__rating__stars {
    color: #f59e0b;
    font-size: 1.3rem;
    letter-spacing: 1px;
    line-height: 1;
}
.card__info__rating__star--muted {
    color: #d1d5db;
}
.card__info__rating__avg {
    font-weight: 700;
}
.card__info__rating__count {
    color: #6b7280;
}

/* 販売実績（「🔥 20+ sold this week」）。予約表示と同じ大きさで、色は暖色にして区別する */
.card__info__sold {
    display: block;
    margin-top: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #c2410c;
}

/* My Orders: review progress box (users/orders.html, updated by main.js after each review) */
.reviewProgress {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
}
.reviewProgress__title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}
.reviewProgress__amount {
    margin: 0 0 8px;
    font-size: 1.4rem;
    color: #374151;
}
.reviewProgress__amount strong {
    color: #b45309;
}
.reviewProgress__bar {
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: #fde68a;
    overflow: hidden;
    appearance: none;
}
.reviewProgress__bar::-webkit-progress-bar {
    background: #fde68a;
    border-radius: 999px;
}
.reviewProgress__bar::-webkit-progress-value {
    background: #f59e0b;
    border-radius: 999px;
}
.reviewProgress__bar::-moz-progress-bar {
    background: #f59e0b;
    border-radius: 999px;
}
.reviewProgress__meta {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 1.2rem;
}

/* Product reviews on the detail page (approved reviews only, services/product_reviews.py) */
.productReviews {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.productReviews__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
}
.productReviews__stars {
    color: #f59e0b;
    font-size: 1.8rem;
    letter-spacing: 1px;
    line-height: 1;
}
.productReviews__stars--muted {
    color: #d1d5db;
}
.productReviews__avg {
    font-size: 1.6rem;
    font-weight: 800;
}
.productReviews__count {
    color: #6b7280;
    font-size: 1.3rem;
}
.productReviews__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.productReviews__item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding-top: 10px;
    border-top: 1px solid #f3f4f6;
    font-size: 1.3rem;
    line-height: 1.6;
}
.productReviews__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    color: #374151;
    font-size: 1.2rem;
}
.productReviews__name {
    font-weight: 700;
}
.productReviews__flag {
    font-size: 1.5rem;
    line-height: 1;
}
.productReviews__date {
    color: #9ca3af;
}
.productReviews__itemStars {
    color: #f59e0b;
    font-size: 1.3rem;
    letter-spacing: 1px;
}
.productReviews__body {
    grid-column: 1;
    margin: 0;
    color: #374151;
    overflow-wrap: anywhere;
}
.productReviews__photo {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    background: #f3f4f6;
}
.productReviews--page {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px;
}
.productReviews__title {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
}
.productReviews__note {
    margin: 0 0 6px;
    color: #6b7280;
    font-size: 1.2rem;
    line-height: 1.6;
}
@media (max-width: 767px) {
    .productReviews--page {
        padding: 16px;
    }
}

/* One-line rating under the product title (links to #product-reviews) */
.productRating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: #374151;
    font-size: 1.3rem;
    text-decoration: none;
}
.productRating__stars {
    color: #f59e0b;
    font-size: 1.5rem;
    letter-spacing: 1px;
    line-height: 1;
}
.productRating__avg {
    font-weight: 700;
}
.productRating__count {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sold-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    margin-right: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pack-inspection {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #cde8dd;
    border-radius: 8px;
    background: #f2faf6;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #2f6b52;
}

.pack-inspection__icon {
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 0;
}

.pack-inspection__link {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

.costs__buy--stacked {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.costs__buy--stacked .btnPrimar,
.costs__buy--stacked .btnBuyNow {
    width: auto;
    min-width: 140px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .costs {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    .costs__wrap {
        width: 100%;
    }

    .costs__number {
        flex: 1;
        display: flex;
    }

    .costs__number .inputNumber {
        width: 100%;
    }

    .costs__buy {
        margin-left: 0;
        width: 100%;
    }

    .costs__buy--stacked {
        flex-direction: column;
    }

    .costs__buy--stacked .btnPrimar,
    .costs__buy--stacked .btnBuyNow {
        width: 100%;
        min-width: 0;
    }
}

.detail-payment .trust-bar__logos img[alt="Wise"] {
    height: 22px;
}

.detail-payment .trust-bar__logos img[alt="PayPal"] {
    height: 18px;
}

.btnBuyNow {
    display: block;
    width: 200px;
    height: 56px;
    border: 2px solid #4f5de0;
    border-radius: 4px;
    background: transparent;
    color: #4f5de0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.btnBuyNow:hover {
    background: #4f5de0;
    color: #fff;
}

.btnBuyNow.is-loading {
    cursor: progress;
    pointer-events: none;
    opacity: 0.6;
}

.btnBuyNow.is-loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    vertical-align: middle;
    border-radius: 50%;
    border: 2px solid rgba(79, 93, 224, .3);
    border-top-color: #4f5de0;
    animation: btn-primar-spin .75s linear infinite;
}

.detail-payment {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
}

.detail-payment__caption {
    font-size: 1.15rem;
    color: #6b7280;
    margin: 0;
}

/* Desktop product detail: image size, price prominence, CTA width */
@media (min-width: 768px) {
    /* Prevent portrait card image from being excessively tall */
    .l-detail {
        align-items: flex-start;
    }
    .l-detail__img {
        height: auto;
    }
    .l-detail__img img {
        max-height: 520px;
        object-fit: contain;
    }
    /* Larger price to draw attention on desktop */
    .information__price {
        font-size: 2.8rem;
    }
    /* CTA buttons fill the full info-panel width */
    .costs {
        display: flex;
        width: 100%;
    }
    .costs__buy {
        flex: 1;
    }
    .costs__buy--stacked .btnPrimar,
    .costs__buy--stacked .btnBuyNow {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}

/* ---------- Trust signals: condition tooltip ---------- */
.condition-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.condition-tooltip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.condition-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 240px;
    background: #1f2937;
    color: #f9fafb;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 1.2rem;
    line-height: 1.6;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.condition-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border: 6px solid transparent;
    border-top-color: #1f2937;
}

.condition-tooltip dl {
    margin: 0;
    padding: 0;
}

.condition-tooltip dt {
    font-weight: 700;
    color: #d1fae5;
    margin-top: 8px;
}

.condition-tooltip dt:first-child {
    margin-top: 0;
}

.condition-tooltip dd {
    margin: 0;
    color: #e5e7eb;
}

.condition-badge-wrap:hover .condition-tooltip,
.condition-tooltip-btn:focus + .condition-tooltip {
    visibility: visible;
    opacity: 1;
}

/* ---------- Trust signals: return policy link ---------- */
.return-policy-link {
    display: block;
    margin-top: 10px;
    font-size: 1.3rem;
    color: #4f5de0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.return-policy-link:hover {
    color: #3b4bcb;
}

/* ---------- Product detail: link to the set's card list (/sets/<code>) ---------- */
.detail-set-link {
    display: block;
    margin-top: 16px;
    padding: 12px 40px 12px 16px;
    position: relative;
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    text-decoration: none;
}
/* Colors live on the children: the global a:link rule outranks a single class */
.detail-set-link::after {
    content: "\2192";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: var(--color-primary);
}
.detail-set-link:hover {
    border-color: var(--color-primary);
}
.detail-set-link__title {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-primary);
}
.detail-set-link__note {
    display: block;
    margin-top: 2px;
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

/* ---------- Trust signals: payment security note ---------- */
.detail-payment__security {
    font-size: 1.15rem;
    color: #6b7280;
    margin: 0;
}

.detail-payment__security::before {
    content: "✓ ";
    color: #16a34a;
    font-weight: 700;
}

/* ---------- Stock filter toggle ---------- */
.stockFilter {
    margin-top: 20px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(51, 51, 51, .1);
}

@media(min-width: 768px) {
    .stockFilter {
        margin-top: 16px;
    }
}

.stockFilter__label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 1.4rem;
    color: #333;
    user-select: none;
}

.stockFilter__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--color-primary, #4f5de0);
}

/* Hide sold-out cards when filter is active */
#card-results.is-stock-filtered .card--soldout {
    display: none;
}

/* ---------- Wholesale page ---------- */
.wholesaleList {
    margin: 0 0 40px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.8;
    list-style: disc;
    list-style-position: inside;
}

.wholesaleList li+li {
    margin-top: 8px;
}

.wholesaleCta {
    margin: 0 0 40px;
    text-align: center;
}

.wholesaleCta__btn {
    display: inline-block;
    width: auto;
    min-width: 240px;
    padding: 0 32px;
    line-height: 44px;
    text-decoration: none;
}

/* 登録の主 CTA の横に「在庫を見る」の副 CTA を並べる(狭い幅では縦積み)。
   .btnOutline は高さ 56px なので主 CTA(44px)に揃える */
.wholesaleCta__btn--secondary {
    height: 44px;
    margin-left: 12px;
}

@media (max-width: 599px) {
    .wholesaleCta__btn--secondary {
        margin: 12px 0 0;
    }
}

.pages__cont .wholesaleNote {
    margin-bottom: 0;
    font-size: 1.2rem;
    color: #6b7280;
}

/* ---------- Wholesale: header announcement bar ---------- */
/* 通常フローで sticky ナビの上に置く(スクロールで流れ、CLS を起こさない)。 */
/* Development-environment banner (APP_STAGE=dev): the dev store is a copy of
   live data and otherwise indistinguishable, so mark it on every page. */
.stageBanner {
    padding: 6px 16px;
    background: #fef3c7;
    color: #92400e;
    border-bottom: 2px solid #f59e0b;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.announceBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 28px;
    padding: 6px 16px;
    background: var(--color-primary);
    text-align: center;
}

/* Guest-only signup incentive next to the wholesale CTA (wraps to its own line on phones) */
.announceBar__link--signup {
    font-weight: 600;
}

.announceBar__link,
.announceBar__link:link,
.announceBar__link:visited,
.announceBar__link:active {
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.announceBar__link:hover {
    color: #fff;
    opacity: .85;
}

.announceBar__cta {
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* Review credit nudge: light yellow with a gold rule, like the review box on My Orders (a reward, not site chrome).
   Kept pale so it does not out-shout the products; the dark pill button carries the attention */
.announceBar--review {
    background: #fef3c7;
    border-bottom: 1px solid #fcd34d;
}

.announceBar--review .announceBar__link,
.announceBar--review .announceBar__link:link,
.announceBar--review .announceBar__link:visited,
.announceBar--review .announceBar__link:active,
.announceBar--review .announceBar__link:hover {
    color: #422006;
}

.announceBar__cta--button {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 12px;
    border-radius: 999px;
    background: #422006;
    color: #fff;
    text-decoration: none;
}

/* Secondary detail in the bar (e.g. "— 12 items to review"): dropped on phones so the bar stays on one line */
@media (max-width: 767px) {
    .announceBar__extra {
        display: none;
    }
}

.action__item--wholesale {
    width: auto;
}

.wholesaleBadge {
    display: inline-block;
    background-color: #059669;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* VIP は卸売(緑)と一目で区別できるゴールドグラデーションにする。
   金地に白文字はコントラスト不足のため文字は濃茶にする */
.wholesaleBadge--vip {
    background: linear-gradient(135deg, #f6e27a 0%, #e6b83c 45%, #c9921e 100%);
    color: #4a2f04;
    border: 1px solid #b8860b;
    letter-spacing: 0.05em;
}

.wholesaleHint {
    display: inline-block;
    background-color: #ecfdf5;
    color: #047857;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

/* ===== Top page editor slots (/management/ec_top_page) ===== */

/* Custom announcement without a link reuses the link typography */
.announceBar__text {
    display: inline-block;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Draft preview indicator (staff only) */
.previewNotice {
    padding: 8px 16px;
    background: #b45309;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
}

/* Floating shortcut to the editor, rendered only on staff browsers */
.topPageEditLink,
.topPageEditLink:link,
.topPageEditLink:visited {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    padding: 10px 16px;
    background: #1d4ed8;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    text-decoration: none;
}

.topPageEditLink:hover {
    opacity: .9;
    color: #fff;
}

/* ===== Top banner carousel (2+ banners) =====
   Mirrors hareruya2: a 960px stage holding one 16:9 slide with 160px of the
   neighbouring slides peeking either side, chevron arrows, bar-shaped dots
   overlaid on the slide, and an eight-column thumbnail strip. aspect-ratio
   reserves the stage height before images load (CLS).
   960px, not the slider's own max-width of 1100px: on hareruya2 the slider sits
   inside .content-wrapper, which caps it at 960px. The centre slide is
   960 - 320 = 640px wide. */
.l-topBanner {
    /* Width of each neighbouring slide left visible either side of the centre one */
    --ec-banner-peek: 160px;
    max-width: 960px;
    margin: 16px auto 0;
    padding-bottom: 20px;
    overflow: hidden;
}

.topBanner__stage {
    position: relative;
}

.topBanner__viewport {
    /* The peeking neighbours are clipped by .l-topBanner, not here */
    overflow: visible;
}

.topBanner__track {
    display: flex;
    gap: 0;
    /* Centre the first slide without JS: pad by the peek width */
    padding-left: var(--ec-banner-peek);
    transition: transform .45s ease;
    will-change: transform;
}

.topBanner__slide {
    flex: 0 0 auto;
    display: block;
    /* 100% here is the track's content box, which padding-left has already
       reduced by one peek, so subtracting one more leaves stage - 2 * peek */
    width: calc(100% - var(--ec-banner-peek));
    aspect-ratio: 16 / 9;
    overflow: hidden;
    opacity: .35;
    transform: scale(.9);
    transition: opacity .25s ease, transform .25s ease;
}

.topBanner__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

/* Edge clones only ever peek, so they keep the inactive treatment */
.topBanner__slide--clone {
    cursor: pointer;
}

/* Only one banner published: there is no track, so 100% here is the whole stage
   and both peeks have to come off to land on the same 640px box a carousel
   slide gets. Filling the stage instead would make the banner half again as
   large as hareruya2's. */
.topBanner__slide--single {
    width: calc(100% - var(--ec-banner-peek) * 2);
    margin: 0 auto;
    opacity: 1;
    transform: none;
}

.topBanner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* <picture> is inline by default, which would collapse the img's height: 100% */
.topBanner__slide > picture,
.topBanner__thumb > picture {
    display: block;
    height: 100%;
}

.topBanner__arrow {
    position: absolute;
    top: 50%;
    left: auto;
    right: auto;
    transform: translateY(-50%);
    z-index: 5;
    width: 27px;
    height: 44px;
    padding: 30px 10px;
    box-sizing: content-box;
    border: none;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .1);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 27px 44px;
    font-size: 0;
    cursor: pointer;
}

.topBanner__arrow:hover {
    background-color: rgba(0, 0, 0, .2);
}

.topBanner__arrow--prev {
    left: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.topBanner__arrow--next {
    right: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

/* Bars overlaid across the bottom of the slide */
.topBanner__dots {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    padding: 5px;
    text-align: center;
}

.topBanner__dot {
    display: inline-block;
    width: 50px;
    height: 8px;
    margin: 0 5px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.topBanner__dot.is-active {
    background-color: rgba(0, 0, 0, .5);
}

.topBanner__thumbs {
    display: flex;
    max-width: 800px;
    gap: 6px;
    margin: 12px auto 0;
    justify-content: center;
    overflow-x: auto;
    padding: 0;
}

.topBanner__thumb {
    /* Eight columns across, matching the 7 gaps of 6px */
    flex: 0 0 calc((100% - 42px) / 8);
    aspect-ratio: 16 / 9;
    padding: 0;
    border: none;
    border-radius: 3px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease;
}

.topBanner__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topBanner__thumb.is-active {
    opacity: 1;
}

.topBanner__thumb:hover {
    opacity: .8;
}

/* Mobile mirrors hareruya2 too, but with its own numbers: one edge-to-edge
   16:9 slide (no peeks, no scaling), round dots in flow under it, and a
   six-column thumbnail strip */
@media (max-width: 767px) {
    .l-topBanner {
        max-width: 100%;
        margin: 16px 0 0;
        padding-bottom: 10px;
    }

    .topBanner__viewport {
        overflow: hidden;
    }

    .topBanner__track {
        padding-left: 0;
    }

    .topBanner__slide {
        width: 100%;
        /* Neighbours are fully off-screen, so no dimming or scaling */
        opacity: 1;
        transform: none;
    }

    /* Swipe replaces the arrows on touch layouts */
    .topBanner__arrow {
        display: none;
    }

    .topBanner__dots {
        display: flex;
        position: static;
        justify-content: center;
        gap: 20px;
        padding: 5px;
    }

    .topBanner__dot {
        width: 8px;
        height: 8px;
        margin: 0;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, .3);
    }

    .topBanner__dot.is-active {
        background-color: rgba(0, 0, 0, .5);
    }

    .topBanner__thumbs {
        max-width: 100%;
        margin-top: 10px;
        padding: 0 10px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .topBanner__thumbs::-webkit-scrollbar {
        display: none;
    }

    .topBanner__thumb {
        /* Six columns across, matching the 5 gaps of 6px inside the padding */
        flex: 0 0 calc((100% - 30px) / 6);
        scroll-snap-align: center;
    }
}

/* ===== Product detail gallery (/management/ec_items sub images) ===== */
.detailGallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.detailGallery__thumb {
    width: 72px;
    height: 101px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    opacity: .65;
    transition: opacity .3s ease, border-color .3s ease;
}

.detailGallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* スマホの画像枠(最大 280px)では 72px 固定のサムネイルが 3 枚で折り返し、4 枚目だけ
   次の行にずれる。4 列のグリッドで枠幅に合わせて縮める */
.information__img .detailGallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.information__img .detailGallery__thumb {
    width: auto;
    height: auto;
    aspect-ratio: 72 / 101;
}

.detailGallery__thumb.is-active {
    border-color: var(--color-primary);
    opacity: 1;
}

.detailGallery__thumb:hover {
    opacity: 1;
}

/* Per-item description shown above the shared customs note */
.tabCont__desc {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray);
}

/* 信頼情報ブロック(ec/templates/ec/_trust_facts.html)。
   about / 商品詳細 / チェックアウト / 注文完了で共通。数値・文言はテンプレ側 */
.trustFacts {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #e0e4f5;
    border-radius: 12px;
    background: #f6f7fd;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #333
}

.trustFacts__ttl {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: .06em;
    text-transform: uppercase
}

.trustFacts__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.trustFacts__item strong {
    color: #111
}

.trustFacts__item a {
    color: var(--color-primary);
    text-decoration: underline
}

.trustFacts--compact {
    margin: 16px 0 0;
    padding: 14px 16px;
    font-size: 1.25rem;
    line-height: 1.6
}

.trustFacts--compact .trustFacts__ttl {
    margin-bottom: 8px;
    font-size: 1.15rem
}

.trustFacts--compact .trustFacts__list {
    gap: 6px
}

/* /about: 買い手(ショップ / リセラー)向けの条件カード */
.aboutHero__list strong {
    color: var(--color-primary)
}

.aboutHero__note {
    margin: 0 0 16px;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #4b5563
}

/* /company: 補足行(登録ページの言語注記など) */
.pagesInfo__item__note {
    display: block;
    margin-top: 6px;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #6b7280
}

/* /packaging: 保証の撮影ルール(開封前に読ませる) */
.packagingRule {
    margin: 24px 0;
    padding: 16px 20px;
    border: 1px solid #cde8dd;
    border-radius: 8px;
    background: #f2faf6;
    color: #2f6b52;
    font-size: 1.4rem;
    line-height: 1.7
}

.packagingRule__ttl {
    margin: 0 0 6px;
    font-weight: bold
}

.packagingRule a {
    color: inherit;
    text-decoration: underline
}

/* /packaging: 実注文の Box / PSA 写真(横長)は 2 列・高めのタイルで見せる */
/* 列幅の下限 280px が枠(360px 幅の端末で約 280px)より広いとはみ出すため、枠幅で頭打ちにする */
.packagingGallery--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    contain-intrinsic-size: auto 420px
}

.packagingGallery__img--wide {
    height: 280px
}

/* ---- Sold-out card button: muted but clickable (card link → item page → "Notify me") ---- */
.btnOutline--soldout {
    border-color: var(--color-text-muted);
    color: var(--color-text-muted);
    background: var(--color-gray-bg);
}
/* ---- Back-in-stock alert (product page, sold out) ---- */
.restock-notify {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-gray);
    border-radius: 10px;
    background: var(--color-gray-bg);
}
.restock-notify__label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}
.restock-notify__row {
    display: flex;
    gap: 8px;
}
.restock-notify__input {
    flex: 1 1 200px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-gray);
    border-radius: 6px; /* ボタン(.btnPrimar)と同じ角丸 */
    font-size: 16px;
    background: #fff;
}
/* .btnPrimar は width:100% なので、横並びでは幅を自動にしないと入力欄が潰れる */
.restock-notify__row .btnPrimar.restock-notify__btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 140px;
    white-space: nowrap;
}
/* ログイン中はメール欄が無いので、ボタンを上の SOLD OUT と同じ全幅にする */
.restock-notify__row--member .btnPrimar.restock-notify__btn {
    flex: 1 1 auto;
    width: 100%;
}
.restock-notify__note strong {
    color: var(--color-black);
    word-break: break-all;
}
@media (max-width: 480px) {
    .restock-notify__row {
        flex-wrap: wrap;
    }
    .restock-notify__row .btnPrimar.restock-notify__btn {
        width: 100%;
    }
}
.restock-notify__note {
    margin: 8px 0 0;
    font-size: 1.2rem; /* html が 62.5%(=10px) 基準。0.85rem だと 8.5px で読めなかった。rem のままにして文字サイズ設定に追従させる */
    color: var(--color-text-muted);
}
.restock-notify__message {
    margin: 8px 0 0;
    font-size: 1.3rem;
    color: var(--color-green);
}
.restock-notify__message.is-error {
    color: var(--color-red);
}

/* Category list: intro under the h1 and plain page links (crawlers; hidden by JS infinite scroll) */
.cardlistIntro {
    max-width: 720px;
    margin: -12px auto 24px;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1.6;
    text-align: center;
}
/* Phones: the list is also the ad landing page, so keep products near the top (full text stays in the HTML) */
@media (max-width: 767px) {
    .cardlistIntro {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 16px;
        font-size: 1.3rem;
    }
}
.cardlistPager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
/* display: flex would override the hidden attribute set by the infinite-scroll script */
.cardlistPager[hidden] {
    display: none;
}
.cardlistPager__link {
    color: var(--color-primary);
    font-size: 1.4rem;
    font-weight: 700;
}
.cardlistPager__link--next {
    margin-left: auto;
}

/* Product page: "About this booster box" (sealed items, ec/services/seo.py sealed_product_about) */
.productAbout {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.productAbout__title {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
}
.productAbout__intro {
    margin: 0 0 16px;
    font-size: 1.4rem;
    line-height: 1.7;
}
.productAbout__facts {
    display: grid;
    gap: 8px;
    margin: 0;
}
.productAbout__fact {
    display: grid;
    grid-template-columns: minmax(110px, 30%) 1fr;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
    font-size: 1.4rem;
}
.productAbout__fact dt {
    color: var(--color-text-muted);
    font-weight: 600;
}
.productAbout__fact dd {
    margin: 0;
}
/* ログイン不要のレビュー画面(users/review_write.html)。マイページの右カラムと同じ白い面 */
.reviewWrite {
    max-width: 790px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
@media(min-width: 768px) {
    .reviewWrite {
        padding: 32px;
    }
}
.reviewWrite__lead {
    margin: 0 0 16px;
    color: #374151;
    font-size: 1.4rem;
    line-height: 1.6;
}
.reviewWrite__foot {
    margin: 20px 0 0;
    color: #6b7280;
    font-size: 1.2rem;
    line-height: 1.6;
}
.reviewWrite__shop {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 280px;
}