@charset "UTF-8";

/* ==========================================
  Front Layout
  フロント（一般公開ページ）の骨組み
  〜1023px：1カラム＋ドロワー／1024px〜：コンテンツ＋右サイドバーの2カラム
========================================== */

.l-front{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-bg);}
.l-front__main{flex:1 0 auto;width:100%;padding-block:var(--space-m) var(--space-xl);}
.l-front__inner{display:flex;flex-direction:column;gap:var(--space-xl);}
.l-front__content{min-width:0;}
.l-front__section{margin-bottom: var(--space-l);}
.l-front__section:last-child{margin-bottom:0;}

@media (min-width:1024px) {
  .l-front__main {padding-block:var(--space-l) var(--space-2xl);}
  .l-front__inner {flex-direction:row;align-items:flex-start;gap:var(--space-l);}
  .l-front__content {flex:1 1 0;}
  .l-front__section {margin-bottom:var(--space-2xl);}
}

/* ==========================================
  Front Header
  上段：キャッチ＋サブメニュー（1024px〜のみ表示）
  下段：ロゴ（左）＋会員メニュー（右）。〜1023px はカート＋ハンバーガーのみ
  会員ボタンはピル型、カートはアクセント色（オレンジ）の独立ボタンで役割を分ける
========================================== */

.front-header{position:sticky;top:0;z-index:var(--z-header);background-color:var(--color-bg);border-bottom: 1px solid var(--color-border);}
.front-header__utility{display:none;background-color:var(--color-primary-pale);border-bottom:1px solid var(--color-primary-light);}
.front-header__utility-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-m);min-height:30px;overflow-x:auto;}
.front-header__catch{flex:none;font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.5;white-space:nowrap;}
.front-header__sub ul{display:flex;flex:none;gap:var(--space-l);}
.front-header__sub a{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);white-space:nowrap;transition:color var(--transition);}
.front-header__sub a i{flex:none;font-size:var(--fz-m);}
.front-header__sub a:hover{color:var(--color-primary);opacity:1;}
/* ここは nowrap のまま。wrap にすると幅が足りない時にカートだけが2段目に落ちてしまう
   （折り返しは会員メニュー .front-header__account の内側だけで起こす） */
.front-header__inner{display:flex;align-items:center;gap:var(--space-xs);min-height:56px;}
.front-header__logo{flex:none;margin-right:auto;}
/* ロゴは幅・高さを固定せず、max-height だけで原寸（180x45）を超えない範囲に収める */
.front-header__logo img{max-height:34px;}
/* flex:1 1 auto + flex-wrap で、幅が足りない時はロゴ・カートを動かさず会員メニューの中だけで折り返す */
.front-header__account{display:none;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-2xs) var(--space-xs);min-width:0;}
/* 出品者向けの2項目は、薄ピンクの地色で囲って1つの塊として認識できるようにする */
.front-header__seller-group{display:flex;flex:none;align-items:center;gap:1px;padding:3px;background-color:var(--color-primary-pale);border-radius:var(--radius-full);}
.front-header__seller-group .front-header__link{min-height:34px;background-color:transparent;border-color:transparent;}
.front-header__seller-group .front-header__link:hover{background-color:var(--color-bg);}
.front-header__divider{flex:none;width:1px;height:24px;background-color:var(--color-primary-light);}
.front-header__link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:40px;padding:0 var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-primary-light);border-radius:var(--radius-full);color:var(--color-primary);font-size:var(--fz-xs);font-weight:700;line-height:1.3;white-space:nowrap;transition:background-color var(--transition),color var(--transition);}
.front-header__link i{flex:none;font-size:var(--fz-m);}
.front-header__link:hover{background-color:var(--color-primary-pale);opacity:1;}
.front-header__link-sub{margin-right:2px;font-size:10px;font-weight:400;}
/* 出品者向けの2項目は本文色にして、購入者向けのピンク系ボタン群と系統を分ける */
.front-header__link--girls,
.front-header__link--key{color:var(--color-text);}
.front-header__link--girls i,
.front-header__link--key i{color:var(--color-primary);}
.front-header__link--primary{background-color:var(--color-primary);border-color:transparent;color:var(--color-text-invert);}
.front-header__link--primary:hover{background-color:var(--color-primary-dark);color:var(--color-text-invert);}
/* カートは会員メニューと役割が違うため、アクセント色（オレンジ）の独立ボタンにする */
.front-header__cart{display:flex;align-items:center;justify-content:center;flex:none;width:var(--tap-size);height:var(--tap-size);border-radius:var(--radius-m);background-color:var(--color-cart);color:var(--color-text-invert);font-size:var(--fz-l);transition:background-color var(--transition);}
.front-header__cart:hover{background-color:var(--color-cart-hover);opacity:1;}
.front-header__toggle{display:flex;align-items:center;justify-content:center;flex:none;width:var(--tap-size);height:var(--tap-size);border-radius:var(--radius-m);background-color:var(--color-primary);color:var(--color-text-invert);font-size:var(--fz-l);transition:background-color var(--transition);}
.front-header__toggle:hover{background-color:var(--color-primary-dark);}

@media (min-width:1024px) {
  .front-header__utility {display:block;}
  .front-header__inner {min-height:72px;gap:var(--space-s);}
  .front-header__logo img {max-height:40px;}
  .front-header__account {display:flex;}
  /* 会員メニューは項目数が多く、既定の padding だとコンテナ最大幅（1120px）に収まらないため少し詰める */
  .front-header__account .front-header__link {padding:0 var(--space-xs);}
  .front-header__cart {border-radius:var(--radius-full);}
  .front-header__toggle {display:none;}
  .front-header{border-bottom:none;}
}

/* ==========================================
  Front Global Nav
  〜1023px：3列のアイコングリッド（主要導線を即タップできるように）
  1024px〜：ピンクのピル帯に7項目を均等割り
========================================== */

.front-nav{background-color:var(--color-bg);border-bottom:1px solid var(--color-primary-light);}
.front-nav__inner{padding-block:var(--space-xs) var(--space-s);}
.front-nav__list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xs);}
/* 「ホーム」はロゴとドロワーの「トップ」から到達できるため、グリッドでは非表示にして3列×2段に収める */
.front-nav__item--home{display:none;}
.front-nav__link{display:flex;flex-direction: row;align-items:center;justify-content:center;gap:2px;/* height: 30px; */min-height: 35px;padding:var(--space-2xs);background-color:var(--color-primary-pale);border:1px solid var(--color-primary-light);border-radius:var(--radius-m);color:var(--color-primary);font-size:var(--fz-xs);font-weight:700;line-height:1.2;text-align:center;transition:background-color var(--transition),color var(--transition);}
.front-nav__link i{flex:none;font-size: var(--fz-m);margin-right: 2px;}
.front-nav__link:hover{background-color:var(--color-primary-light);opacity:1;}
.front-nav__link[aria-current="page"]{background-color:var(--color-primary);border-color:transparent;color:var(--color-text-invert);}

@media (min-width:1024px) {
  .front-nav__inner {padding-block:0 var(--space-s);}
  .front-nav__list {display:flex;gap:3px;padding:5px;background-color:var(--color-primary);border-radius:var(--radius-full);}
  .front-nav__item {flex:1 1 0;}
  .front-nav__item--home {display:block;}
  .front-nav__link {flex-direction:row;gap:var(--space-2xs);min-height:42px;padding:0 var(--space-xs);background-color:transparent;border-color:transparent;border-radius:var(--radius-full);color:var(--color-text-invert);font-size: var(--fz-m);white-space:nowrap;}
  .front-nav__link i {font-size:var(--fz-m);}
  .front-nav__link:hover {background-color:var(--color-overlay-white);}
  .front-nav__link[aria-current="page"] {background-color:var(--color-bg);color:var(--color-primary);}
}

/* ==========================================
  Front Drawer (〜1023px のメニュー)
========================================== */

.front-drawer{position:fixed;top:0;right:0;z-index:var(--z-drawer);display:flex;flex-direction:column;width:86%;max-width:340px;height:100dvh;background-color:var(--color-bg);box-shadow:var(--shadow-l);transform:translateX(100%);transition:transform var(--transition);visibility:hidden;}
.front-drawer.is-open{transform:translateX(0);visibility:visible;}
.front-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);flex:none;padding:var(--space-s) var(--space-m);border-bottom:1px solid var(--color-border);}
.front-drawer__title{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-m);font-weight:700;}
.front-drawer__title i{color:var(--color-primary);font-size:var(--fz-l);}
.front-drawer__close{display:flex;align-items:center;justify-content:center;width:var(--tap-size);height:var(--tap-size);margin-right:calc(var(--space-xs) * -1);border-radius:var(--radius-m);font-size:var(--fz-xl);color:var(--color-text-sub);}
.front-drawer__close:hover{background-color:var(--color-bg-sub);}
.front-drawer__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-m) var(--space-m) var(--space-2xl);}
.front-drawer__group{margin-bottom:var(--space-m);}
.front-drawer__group:last-child{margin-bottom:0;}
.front-drawer__group-title{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-2xs);padding:2px 0 2px var(--space-xs);border-left:3px solid var(--color-primary);font-size:var(--fz-xs);font-weight:700;line-height:1.4;color:var(--color-text-sub);letter-spacing:0.08em;}
.front-drawer__group-title i{font-size:var(--fz-m);}
.front-drawer__link{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-size);padding:var(--space-xs) var(--space-s);border-radius:var(--radius-m);color:var(--color-text);font-size:var(--fz-m);}
.front-drawer__link i{flex:none;color:var(--color-text-sub);font-size:var(--fz-l);}
.front-drawer__link:hover{background-color:var(--color-bg-sub);opacity:1;}
.front-drawer-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background-color:var(--color-overlay);opacity:0;visibility:hidden;transition:opacity var(--transition);}
.front-drawer-overlay.is-open{opacity:1;visibility:visible;}

@media (min-width:1024px) {
  .front-drawer {display:none;}
  .front-drawer-overlay {display:none;}
}

/* ==========================================
  Front Sidebar
  〜1023px：見出しタップで開閉するアコーディオン／1024px〜：常時展開の右カラム
========================================== */

.front-side{display:flex;flex-direction:column;gap:var(--space-s);min-width:0;}
.front-side__block{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);overflow:hidden;}
.front-side__title{font-size:var(--fz-base);font-weight:700;}
/* グループ見出しはメインカラーのベタ帯＋白文字にして、リンク一覧との主従をはっきりさせる
   （グレー地では他の要素に埋もれて見出しとして機能していなかったため） */
.front-side__toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);width:100%;min-height:var(--tap-size);padding:var(--space-xs) var(--space-m);background-color: var(--color-primary-pale);color: var(--color-primary);font-size:var(--fz-base);font-weight:700;letter-spacing:0.04em;text-align:left;/* border: 1px solid var(--color-grey); */}
.front-side__toggle span{display:inline-flex;align-items:center;gap:var(--space-xs);}
.front-side__toggle i{flex:none;color: var(--color-primary);font-size:var(--fz-xl);}
.front-side__chevron{color:var(--color-text-invert);opacity:0.9;transition:transform var(--transition);}
.front-side__toggle[aria-expanded="true"] .front-side__chevron{transform:rotate(180deg);}
.front-side__body{padding: var(--space-xs) var(--space-m) var(--space-m);}
.front-side__link{display:flex;align-items:center;min-height:var(--tap-size);padding:var(--space-2xs) 0;border-bottom:1px dashed var(--color-border);font-size:var(--fz-m);color:var(--color-text);line-height:1.5;}
.front-side__link:hover{color:var(--color-primary);opacity:1;}
.front-side__link--soldout{color:#2e94dc;font-size:var(--fz-l);font-weight:700;}
.front-side__body--pink .front-side__link{color:var(--color-primary-dark);}
.front-side__subtitle{margin-top:var(--space-s);padding: var(--space-s) var(--space-s);background-color:var(--color-primary-light);border-radius:var(--radius-s);font-size:var(--fz-s);font-weight:700;color:var(--color-primary-dark);margin: 5px 0;}
.front-side__subtitle:first-child{margin-top: 3px;}
/* new アイコンは画像（newico.gif）。リンクが flex で全幅を取るため、親の li を横並びにして同じ行に置く */
.front-side__item--new{display:flex;align-items:center;gap:var(--space-2xs);border-bottom:1px dashed var(--color-border);}
.front-side__item--new .front-side__link{flex:1 1 auto;border-bottom:none;}
.front-side__new{flex:none;width:auto;}
.front-side__note{font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.7;}
.front-side__term{margin-block:var(--space-xs);font-size:var(--fz-s);font-weight:700;}
/* セラーランキング上位3名：メダル画像を廃止し「王冠＋順位ラベル → 大きな顔写真 → 大きな名前」の縦積みに変更 */
.front-side__rank{display:flex;flex-direction:column;gap:var(--space-s);}
.front-side__rank-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-s) var(--space-xs);background-color:var(--color-bg-sub);border:1px solid var(--color-border);border-radius:var(--radius-l);}
.front-side__rank-place{display:inline-flex;align-items:center;gap:var(--space-2xs);padding:3px 12px;border-radius:var(--radius-full);background-color:var(--color-rank-3);color:var(--color-text-invert);font-size:var(--fz-s);font-weight:700;letter-spacing:0.08em;line-height:1.4;}
.front-side__rank-crown{font-size:var(--fz-l);line-height:1;}
.front-side__rank-thumb{width:100%;max-width:132px;}
.front-side__rank-thumb img{width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-m);object-fit:cover;background-color:var(--color-border);}
.front-side__rank-name{font-size:var(--fz-base);font-weight:700;line-height:1.4;text-align:center;word-break:break-word;}
.front-side__rank-item--1{background-color:var(--color-primary-pale);border-color:var(--color-rank-1);}
.front-side__rank-item--1 .front-side__rank-place{background-color:var(--color-rank-1);}
.front-side__rank-item--1 .front-side__rank-thumb{max-width:168px;}
.front-side__rank-item--1 .front-side__rank-name{font-size:var(--fz-l);}
.front-side__rank-item--2 .front-side__rank-place{background-color:var(--color-rank-2);}
.front-side__rank-item--2 .front-side__rank-thumb{max-width:148px;}
.front-side__rank-item--3 .front-side__rank-place{background-color:var(--color-rank-3);}
.front-side__rank-more{margin-top:var(--space-s);font-size:var(--fz-s);}
.front-side__rank-more a{text-decoration:underline;}

@media (min-width:1024px) {
  /* サイドバーは左カラム（buyer のマイページと配置を統一）。DOM順はコンテンツ優先のまま order で入れ替える */
  .front-side {order:-1;flex:none;width:260px;}
  .front-side__toggle {cursor:default;pointer-events:none;}
  .front-side__chevron {display:none;}
  .front-side__body {display:block;}
  .front-side__body[hidden] {display:block;}
  .front-side__link {min-height:auto;padding:var(--space-2xs) 0;font-size:var(--fz-s);}
}

/* ==========================================
  Front Page Top (ページ先頭へ戻る)
========================================== */

.front-pagetop{position:fixed;right:var(--space-m);bottom:var(--space-m);z-index:var(--z-header);}
.front-pagetop a{display:flex;align-items:center;justify-content:center;width:var(--tap-size);height:var(--tap-size);border-radius:var(--radius-full);background-color:var(--color-accent);color:var(--color-text-invert);font-size:var(--fz-xl);box-shadow:var(--shadow-m);}
.front-pagetop a:hover{background-color:var(--color-primary);opacity:1;}

/* ==========================================
  Front Footer
========================================== */

.front-footer{flex:none;margin-top:auto;padding-block:var(--space-xl);background-color:var(--color-footer-bg);color:var(--color-text-invert);}
.front-footer__sitemap{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-m);}
.front-footer__group-title{margin-bottom:var(--space-xs);padding-bottom:var(--space-2xs);border-bottom:1px solid rgba(255, 255, 255, 0.25);font-size:var(--fz-s);font-weight:700;}
.front-footer__group li{margin-bottom:var(--space-2xs);}
.front-footer__group a{display:inline-flex;align-items:center;min-height:32px;font-size:var(--fz-xs);color:rgba(255, 255, 255, 0.8);}
.front-footer__group a:hover{color:var(--color-text-invert);opacity:1;}
.front-footer__company{grid-column:1 / -1;}
.front-footer__company-text{font-size:var(--fz-xs);color:rgba(255, 255, 255, 0.8);line-height:1.8;}
.front-footer__company-form{margin-top:var(--space-xs);}
.front-footer__company-form a{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:var(--tap-size);padding:0 var(--space-m);border:1px solid rgba(255, 255, 255, 0.4);border-radius:var(--radius-m);color:var(--color-text-invert);font-size:var(--fz-xs);font-weight:700;}
.front-footer__company-form a:hover{background-color:rgba(255, 255, 255, 0.12);opacity:1;}
.front-footer__company-cre{margin-top:var(--space-xs);}
.front-footer__logo{display:flex;justify-content:center;margin-top:var(--space-l);}
.front-footer__logo img{max-height:40px;}
.front-footer__copyright{margin-top:var(--space-s);font-size:var(--fz-xs);font-style:normal;text-align:center;color:rgba(255, 255, 255, 0.7);}

@media (min-width:768px) {
  .front-footer__sitemap {grid-template-columns:repeat(4, 1fr);}
  .front-footer__company {grid-column:1 / -1;}
}

@media (min-width:1024px) {
  .front-footer__sitemap {grid-template-columns:repeat(5, 1fr);}
  .front-footer__company {grid-column:auto;}
}

/* ==========================================
  Static Page (運営者情報・規約等の固定ページ)
========================================== */

.static-page__title{margin-bottom:var(--space-l);}
.static-page__section{margin-bottom:var(--space-xl);}
.static-page__section:last-child{margin-bottom:0;}
.static-page__lead{margin-bottom:var(--space-m);font-size:var(--fz-m);line-height:1.9;}
.static-page__spec{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.static-page__spec .c-detail-list__row{grid-template-columns:1fr;gap:var(--space-2xs);padding-bottom:var(--space-s);border-bottom:1px dashed var(--color-border-strong);}
.static-page__spec .c-detail-list__row:last-child{padding-bottom:0;border-bottom:none;}
.static-page__spec .c-detail-list__label{font-size:var(--fz-s);color:var(--color-primary-dark);}
.static-page__spec .c-detail-list__value a{text-decoration:underline;}
.static-page__spec-img{max-width:200px;}
.static-page__pay{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);}
.static-page__pay-img{width:auto;height:30px;}

@media (min-width:768px) {
  .static-page__spec .c-detail-list__row {grid-template-columns:12em 1fr;gap:var(--space-m);align-items:start;}
}

/* ==========================================
  FAQ (よくある質問・トラブルシューティング)
  質問をタップで開閉するアコーディオン
========================================== */

.faq__index{margin-bottom:var(--space-xl);}
.faq__index ul{display:grid;grid-template-columns:1fr;gap:var(--space-xs);}
.faq__group-title{display:flex;align-items:center;gap:var(--space-xs);margin-block:var(--space-l) var(--space-s);padding:var(--space-2xs) 0 var(--space-2xs) var(--space-xs);border-left:4px solid var(--color-primary);font-size:var(--fz-base);font-weight:700;line-height:1.4;}
.faq__group-title i{color:var(--color-primary);font-size:var(--fz-l);}
.faq{display:flex;flex-direction:column;gap:var(--space-xs);margin-bottom:var(--space-l);}
.faq__item{background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);overflow:hidden;}
.faq__question{font-size:var(--fz-m);}
.faq__trigger{display:flex;align-items:flex-start;gap:var(--space-xs);width:100%;min-height:var(--tap-size);padding:var(--space-s) var(--space-m);background-color:var(--color-bg);color:var(--color-text);font-size:var(--fz-m);font-weight:700;text-align:left;line-height:1.6;}
.faq__trigger:hover{background-color:var(--color-primary-light);}
.faq__trigger[aria-expanded="true"]{background-color:var(--color-primary-light);}
.faq__mark{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:var(--radius-full);background-color:var(--color-primary);color:var(--color-text-invert);font-size:var(--fz-s);line-height:1;}
.faq__label{flex:1 1 0;min-width:0;}
.faq__chevron{flex:none;margin-top:2px;color:var(--color-text-sub);font-size:var(--fz-l);transition:transform var(--transition);}
.faq__trigger[aria-expanded="true"] .faq__chevron{transform:rotate(180deg);}
.faq__answer{padding:var(--space-s) var(--space-m) var(--space-m);border-top:1px dashed var(--color-border);font-size:var(--fz-m);line-height:1.9;word-break:break-word;}
.faq__answer[hidden]{display:none;}
.faq__answer p + p{margin-top:var(--space-s);}
.faq__answer a{text-decoration:underline;}
.faq__em{font-style:normal;font-weight:700;color:var(--color-danger);}
.faq__contact{margin-top:var(--space-xl);}

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

/* ==========================================
  Contact Form (お問合わせフォーム)
========================================== */

/* caution 系のテキストは行間 1.7 で統一（.c-note と揃える）。
   1.9 は行が離れすぎて「どの行がどの項目か」が追いにくく、1.6 未満だと注意書きとして詰まって見えるため */
.contact-form__caution{margin-bottom:var(--space-xl);padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.contact-form__caution-title{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-s);font-size:var(--fz-base);font-weight:700;line-height:1.7;color:var(--color-danger);}
.contact-form__caution-title i{font-size:var(--fz-l);}
.contact-form__caution-list{display:flex;flex-direction:column;gap:var(--space-m);}
.contact-form__caution-subtitle{margin-bottom:var(--space-2xs);font-size:var(--fz-m);font-weight:700;line-height:1.7;}
.contact-form__caution-list p{font-size:var(--fz-m);line-height:1.7;}
.contact-form__caution-list a{text-decoration:underline;}
.contact-form__help{font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.7;}
.contact-form__stack{margin-bottom:var(--space-xs);}
.contact-form__input--short{max-width:100%;}
.contact-form__file{padding:var(--space-xs);}
.contact-form__tel{display:flex;align-items:center;gap:var(--space-2xs);}
.contact-form__tel-input{width:80px;text-align:center;}
.contact-form__tel-sep{flex:none;}
.contact-form__action{margin-top:var(--space-l);}
.contact-form__cre{margin-top:var(--space-m);}

@media (min-width:768px) {
  .contact-form__input--short {max-width:280px;}
}

/* ==========================================
  Contact Done (お問合わせ完了)
========================================== */

.contact-done{padding:var(--space-l) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);text-align:center;}
.contact-done__icon{font-size:56px;color:var(--color-success);line-height:1;}
.contact-done__title{margin-block:var(--space-s);font-size:var(--fz-l);font-weight:700;}
.contact-done__list{display:flex;flex-direction:column;gap:var(--space-m);text-align:left;}
.contact-done__subtitle{margin-bottom:var(--space-2xs);font-size:var(--fz-m);font-weight:700;}
.contact-done__list p{font-size:var(--fz-m);line-height:1.9;}
.contact-done__action{margin-top:var(--space-l);}

@media (min-width:1024px) {
  .contact-done__action {display:flex;justify-content:center;}
  .contact-done__action .c-btn {min-width:280px;}
}

/* ==========================================
  Age Modal (18歳未満お断りの年齢確認)
========================================== */

.age-modal{position:fixed;inset:0;z-index:var(--z-flash);display:none;align-items:center;justify-content:center;padding:var(--space-m);background-color:rgba(0, 0, 0, 0.8);overflow-y:auto;}
.age-modal.is-open{display:flex;}
.age-modal__inner{width:100%;max-width:420px;padding: var(--space-l) var(--space-xl);background-color:var(--color-bg);border-radius:var(--radius-l);box-shadow:var(--shadow-l);text-align:center;}
.age-modal__logo{display:flex;justify-content:center;margin-bottom: var(--space-s);}
.age-modal__logo img{max-height:44px;}
.age-modal__text{/* margin-bottom:var(--space-m); */font-size:var(--fz-m);line-height:1.9;text-align:left;}
.age-modal__em{font-style:normal;font-weight:700;color:var(--color-danger);}
.age-modal__confirm{display:flex;justify-content:center;margin-bottom: var(--space-xs);}
.age-modal__action{display:flex;flex-direction:column;gap:var(--space-xs);}
.age-modal__enter{flex-direction:column;gap:0;min-height:64px;}
.age-modal__enter-top{font-size:var(--fz-base);}
.age-modal__enter-btm{font-size:var(--fz-xs);font-weight:400;}

/* ==========================================
  Top Hero / Lead (トップのヒーロー・キャッチ)
========================================== */

.top-hero{padding-top:var(--space-s);}
.top-hero__img{width:100%;border-radius:var(--radius-l);}
.top-lead{margin-top:var(--space-xs);padding:var(--space-xs) var(--space-s);background-color:var(--color-primary-light);border-radius:var(--radius-m);}
.top-lead__title{font-size:var(--fz-s);font-weight:400;line-height:1.35;}
.top-lead__title strong{font-weight:700;color:var(--color-primary-dark);}
.top-lead__text{margin-top:2px;font-size:var(--fz-xs);line-height:1.4;}

@media (min-width:1024px) {
  .top-lead {padding:var(--space-s) var(--space-m);display: none;}
  .top-lead__title {font-size:var(--fz-base);line-height:1.4;}
  .top-lead__text {font-size:var(--fz-s);}
}

/* ==========================================
  Top Section Common (トップの見出し・もっと見る)
========================================== */

/* 帯見出しの直下に置く一覧リンク。見出しとの間が空きすぎていたため負のマージンで詰め、
   テキストリンクではなく角丸ピルのボタンに変更した（現行の「>>」は右端のシェブロンアイコンに置き換え） */
.top-section-more{display:flex;justify-content:flex-end;margin-top:calc(var(--space-xs) * -1);margin-bottom:var(--space-s);}
.top-section-more__link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:36px;padding:var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-primary);border-radius:var(--radius-full);color:var(--color-primary-dark);font-size:var(--fz-s);font-weight:700;line-height:1.4;transition:background-color var(--transition),color var(--transition);}
.top-section-more__link:hover{background-color:var(--color-primary);color:var(--color-text-invert);opacity:1;}
.top-section-more__link i{flex:none;font-size:var(--fz-l);}
.top-more{margin-top:var(--space-m);}

@media (min-width:1024px) {
  .top-more .c-btn {display:inline-flex;width:auto;min-width:280px;}
  .top-more {display:flex;justify-content:center;}
}

/* ==========================================
  Top Campaign (キャンペーン・イベントバナー)
========================================== */

.top-campaign__list{display:grid;grid-template-columns:1fr;gap:var(--space-s);}
.top-campaign__item img{width: 100%;border-radius:var(--radius-m);}
.top-campaign__item--half {display:flex;justify-content: center;justify-content: space-between;}
.top-campaign__item--half img {width:95%}
@media (min-width:768px) {
  .top-campaign__list {grid-template-columns:repeat(2, 1fr);}
  .top-campaign__item {grid-column:1 / -1;}
  .top-campaign__item--half {grid-column:auto;}
}

/* ==========================================
  Keyword Search (商品タイトル検索ボックス)
  トップ・商品一覧・出品者一覧で共通利用する
========================================== */

.keyword_search{/* margin-bottom:var(--space-l); */padding:var(--space-s);background-color:var(--color-primary-pale);border:1px solid var(--color-primary-light);border-radius:var(--radius-l);}
.keyword_search__form{display:flex;gap:var(--space-xs);}
.keyword_search__input{flex:1 1 0;min-width:0;min-height:48px;padding:0 var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-m);font-size:var(--fz-base);line-height:1.4;}
.keyword_search__input::placeholder{color:var(--color-text-sub);font-size:var(--fz-m);}
.keyword_search__input:focus{border-color:var(--color-primary);}
.keyword_search__submit{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);flex:none;min-height:48px;padding:0 var(--space-m);background-color:var(--color-primary);border-radius:var(--radius-m);color:var(--color-text-invert);font-size:var(--fz-m);font-weight:700;transition:background-color var(--transition);}
.keyword_search__submit i{font-size:var(--fz-l);}
.keyword_search__submit:hover{background-color:var(--color-primary-dark);}

@media (min-width:768px) {
  .keyword_search {padding:var(--space-m);}
  .keyword_search__input {min-height:56px;padding:0 var(--space-m);font-size:var(--fz-l);}
  .keyword_search__submit {min-height:56px;padding:0 var(--space-xl);font-size:var(--fz-base);}
}

/* ==========================================
  Top Ranking Slider (売上ランキング／現行 slick 再現)
  現行と同じ .slider / .slider_each / .thum / .num の構造を維持し、
  自動送り・左右矢印はページ内のバニラJSで実装している
========================================== */

.top-ranking-slider{position:relative;padding-inline:28px;}
.top-ranking-slider__viewport{overflow:hidden;}
.slider{display:flex;transition:transform 0.4s ease;}
.slider .slider_each{flex: 0 0 35%;min-width:0;padding-inline:var(--space-2xs);}
.slider .slider_each p{font-size:var(--fz-xs);}
.slider .thum{position:relative;width:100px;height:130px;margin:0 auto;}
.slider .thum img{width:100%;height:100%;object-fit:cover;background-color:var(--color-bg-sub);}
.slider .thum .num{position:absolute;top:3px;left:3px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-full);background-color:var(--main-color);color:var(--color-text-invert);font-weight:700;text-align:center;}
.slider .rank1bg{background-color:var(--color-rank-1);}
.slider .rank2bg{background-color:var(--color-rank-2);}
.slider .rank3bg{background-color:var(--color-rank-3);}
.slider .title{margin-block:var(--space-xs);font-size:var(--fz-s);font-weight:700;text-align:center;line-height:1.4;word-break:break-word;}
.slider .title a{text-decoration:underline;}
.slider .list{text-align:center;}
.slider .list a{display:inline-block;padding:2px 12px;background-color:var(--main-color);border-radius:var(--radius-s);color:var(--color-text-invert);font-size:11px;}
.top-ranking-slider__arrow{position:absolute;top:65px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:-14px;border-radius:var(--radius-full);background-color:var(--color-bg);border:1px solid var(--color-border-strong);color:var(--main-color);font-size:var(--fz-l);}
.top-ranking-slider__arrow:hover{background-color:var(--color-primary-light);}
.top-ranking-slider__arrow--prev{left:0;}
.top-ranking-slider__arrow--next{right:0;}

@media (min-width:768px) {
  .slider .slider_each {flex-basis:33.3333%;}
  .slider .title {font-size:var(--fz-base);}
}

@media (min-width:1024px) {
  .slider .slider_each {flex-basis:20%;}
}

/* ==========================================
  Top Update (出品者の更新情報／現行 .update 再現)
  スクロールする一覧の中に「サムネ＋出品者名」＋「日時・タイトル・本文」を並べる。
  1行が丸ごと出品者ページへのリンク（名前だけだと小さくて押しにくいため）
========================================== */

.update{width:100%;margin-bottom:var(--space-l);}
.update .upeach{height:180px;padding-right:var(--space-2xs);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.update .upeach > li{margin-bottom:var(--space-xs);border-bottom:1px dotted var(--color-border-strong);}
.update .upeach > li:last-child{margin-bottom:0;}
.update .upeach__link{display:flex;gap:var(--space-s);padding:var(--space-2xs);border-radius:var(--radius-s);color:inherit;transition:background-color var(--transition);}
.update .upeach__link:hover{background-color:var(--color-primary-pale);opacity:1;}
.update .upeach__link:active{background-color:var(--color-primary-light);}
/* フォーカスの枠は内側に描く（トップはスクロール枠の中なので、外側に出すと上と左が切れる）。
   クリック・タップの後は出さず、キーボードで移ったときだけ出す */
.update .upeach__link:focus{outline-offset:-2px;}
.update .upeach__link:focus:not(:focus-visible){outline:none;}
.update .upeach .left{flex:0 0 20%;min-width:0;text-align:center;}
.update .upeach .pics img{width:40px;height:40px;margin:0 auto;object-fit:cover;background-color:var(--color-bg-sub);}
.update .upeach .girl{margin-top:2px;font-size:11px;line-height:1.4;color:var(--color-danger);word-break:break-word;}
.update .upeach .right{flex:1 1 0;min-width:0;}
.update .upeach .date{font-size:var(--fz-xs);color:var(--color-text-sub);}
.update .upeach .ttl{font-size:var(--fz-s);font-weight:700;color:var(--color-danger);line-height:1.4;word-break:break-word;}
.update .upeach .text{margin-top:5px;font-size:var(--fz-xs);line-height:1.6;word-break:break-word;}

@media (min-width:1024px) {
  .update .upeach {height:250px;}
  .update .upeach .left {flex-basis:120px;}
  .update .upeach .ttl {font-size:var(--fz-m);}
}

/* ==========================================
  User List (商品カード・出品者カード／現行 .user_list 再現)
  現行blade の .each > ul > li 構造をそのまま使う。
  並びだけ CSS Grid に置き換え（スマホ3列 / タブレット4列 / PC6列）
========================================== */

.p100{width:100%;margin-bottom:var(--space-xs);font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.6;}
.p100 img{display:inline-block;vertical-align:middle;margin-right:var(--space-2xs);}
.user_list{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--space-xs);width:100%;}
.user_list .each{min-width:0;}
.user_list .each ul{position:relative;/* border-radius: 5px; */}
.user_list .each ul li{width:100%;}
.user_list .each ul li a:active{text-decoration:underline;}
.user_list .each ul .date{padding:4px 0;background-color:var(--main-color);color:var(--color-text-invert);font-size:11px;font-weight:700;text-align:center;line-height:1.3;border-radius: 7px 7px 0 0;}
.user_list .each ul .newico{position:absolute;top:23.5px;right:0;}
.user_list .each ul .pics{width:100%;margin:0 auto;text-align:center;}
.user_list .each ul .pics a img{width:100%;height:100%;aspect-ratio:3 / 4;object-fit:cover;background-color:var(--color-bg-sub);border-radius: 0 0 7px 7px;}
.user_list .each ul .ttl{width:100%;margin:0 0 3px;padding: 2% 1% 0;/* line-height: 1.3; */overflow:hidden;font-weight:700;text-align:left;}
.user_list .each ul .ttl h3{line-height: 1.1;}
.user_list .each ul .ttl h3 a{color:var(--color-text);font-size:var(--fz-xs);font-weight:700;/* line-height: 1.2; */}
.user_list .each ul .ttl h3 a:active{text-decoration:underline;}
/* 現行と同じく着用日（.haita）と女性カテゴリ（.type_g）はカード上では非表示。詳細ページで確認する */
.user_list .each ul .haita{display:none;}
.user_list .each ul .user{width:100%;padding:2px 0;text-align:center;line-height:1.4;word-break:break-word;}
.user_list .each ul .user a{padding:0 3px;color:var(--main-color);font-size:var(--fz-xs);font-weight:900;text-decoration:underline;}
.user_list .each ul .user .fr{position:absolute;top:0;right:0;}
.user_list .each ul .user .type_g{display:none;}
.user_list .each ul .price{width:100%;margin-top:2px;text-align:center;}
.user_list .each ul .price span{color:var(--color-text);font-size:var(--fz-base);font-weight:700;}
.user_list .each ul .cate{width:100%;padding:0;text-align:center;}
.user_list .each ul .cate h3 a,
.user_list .each ul .cate h4 a{display:block;width:100%;padding:3px 0;color:var(--color-link);font-size:11px;line-height:1.4;}
.user_list .each ul .type{width:100%;padding:0;text-align:center;font-size: 10px;line-height: 1.2;word-break:break-word;}
.user_list .each ul .type_a{width:100%;padding:0;text-align:center;font-size:11px;}
.user_list .each ul .type_a p a{display:block;margin:5px 0;padding:1px 5px;border:1px solid var(--main-color);color:var(--main-color);}
.user_list .each ul .type_a p a:hover{background-color:var(--main-color);color:var(--color-text-invert);opacity:1;}
/* 現行の .eachtop（トップの商品）だけタイトル欄の高さを揃えて価格の位置をそろえる */
.user_list .eachtop ul .ttl{min-height: 50px;}
.user_list .topeach ul .ttl{height:48px;}
/* もっと見る（現行 .more_area .seemore） */
.more_area{width:100%;margin-top:var(--space-m);text-align:center;}
.more_area .seemore{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);width:100%;min-height:var(--tap-size);background-color:var(--main-color);border-radius:var(--radius-m);color:var(--color-text-invert);font-weight:700;}
.more_area .seemore:hover{background-color:var(--color-primary-dark);opacity:1;}

@media (min-width:768px) {
  .user_list {grid-template-columns:repeat(4, 1fr);gap:var(--space-s);}
  .user_list .each ul .ttl h3 a {font-size:var(--fz-s);}
  .user_list .each ul .user a {font-size:var(--fz-s);}
  .more_area .seemore {display:inline-flex;width:auto;min-width:280px;padding-inline:var(--space-xl);}
}

@media (min-width:1024px) {
  .user_list {grid-template-columns:repeat(6, 1fr);}
}

/* ==========================================
  Top News (新着ニュース)
========================================== */

.top-news__list{display:flex;flex-direction:column;height:300px;overflow-y:auto;overflow-x:hidden;padding-right:8px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--main-color) #e9e9e9}
.top-news__list::-webkit-scrollbar{width:8px}
.top-news__list::-webkit-scrollbar-track{background:#e9e9e9;border-radius:4px}
.top-news__list::-webkit-scrollbar-thumb{background-color:var(--main-color);border-radius:4px}
@media(min-width:768px){.top-news__list{height:500px}}
.top-news__item{padding:var(--space-xs) 0;border-bottom:1px dashed var(--color-border);}
.top-news__item:first-child{padding-top:0;}
.top-news__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);}
.top-news__date{display:inline-flex;align-items:center;gap:2px;font-size:var(--fz-xs);color:var(--color-text-sub);}
.top-news__date i{font-size:var(--fz-m);}
.top-news__title{font-size:var(--fz-m);font-weight:700;line-height:1.5;}
/* 本文は1行だけ見せて高さを抑える（続きは一覧ページで確認） */
.top-news__body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.6;word-break:break-word;}
.top-news__body a{text-decoration:underline;}

@media (min-width:1024px) {
  .top-news__item {display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--space-2xs) var(--space-m);}
  .top-news__head {grid-row:1 / 3;flex-direction:column;align-items:flex-start;gap:var(--space-2xs);}
  .top-news__body {-webkit-line-clamp:2;}
}

/* ==========================================
  Top Category List (ページ下部のカテゴリ一覧)
========================================== */

.top-catelist__block{margin-bottom:var(--space-l);}
.top-catelist__block:last-child{margin-bottom:0;}
.top-catelist__title{margin-bottom:var(--space-s);padding-left:var(--space-xs);border-left:4px solid var(--color-primary);font-size:var(--fz-base);font-weight:700;}
.top-catelist__items{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--space-2xs);}
.top-catelist__items li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);min-width:0;}
.top-catelist__items a{display:flex;align-items:center;min-height:var(--tap-size);font-size:var(--fz-s);color:var(--color-text);line-height:1.4;}
.top-catelist__items a:hover{color:var(--color-primary);opacity:1;}
.top-catelist__items--pink a{color:var(--color-primary-dark);}
.top-catelist__group{grid-column:1 / -1;margin-top:var(--space-xs);padding:var(--space-2xs) var(--space-xs);background-color:var(--color-primary-light);border-radius:var(--radius-s);font-size:var(--fz-s);font-weight:700;color:var(--color-primary-dark);}
.top-catelist__group:first-child{margin-top:0;}
.top-catelist__new{flex:none;}

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

@media (min-width:1024px) {
  .top-catelist__items {grid-template-columns:repeat(4, 1fr);}
}

/* ==========================================
  Cate Nav (一覧ページの絞り込みリンク／現行 .catelist)
  横に長くなるためチップ状に折り返して表示する
========================================== */

.cate-nav{margin-bottom:var(--space-m);padding:var(--space-s);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.cate-nav__list{display:flex;flex-wrap:wrap;gap:var(--space-2xs);}
.cate-nav__link{display:inline-flex;align-items:center;min-height:36px;padding:var(--space-2xs) var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text);font-size:var(--fz-xs);line-height:1.4;transition:background-color var(--transition),border-color var(--transition),color var(--transition);}
.cate-nav__link:hover{background-color:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary-dark);opacity:1;}
.cate-nav__link--top{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-invert);font-weight:700;}
.cate-nav__link--top:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-invert);}

@media (min-width:768px) {
  .cate-nav {padding:var(--space-m);}
  .cate-nav__link {font-size:var(--fz-s);}
}

/* ==========================================
  List Note (一覧の補足文)
========================================== */

.list-note{margin-bottom:var(--space-s);font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.8;}
.list-note--boxed{margin-top:var(--space-m);margin-bottom:0;padding:var(--space-s) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-m);}

@media (min-width:1024px) {
  .list-note {font-size:var(--fz-s);}
}

/* ==========================================
  Seller Profile (出品者詳細ページ)
========================================== */

.prof-head{margin-bottom:var(--space-m);padding:var(--space-m);background-color:var(--color-primary-pale);border-radius:var(--radius-l);}
.prof-head__type{margin-bottom:var(--space-2xs);font-size:var(--fz-xs);}
.prof-head__type a{display:inline-flex;align-items:center;padding:2px var(--space-xs);background-color:var(--color-primary-light);border-radius:var(--radius-full);color:var(--color-primary-dark);font-weight:700;}
.prof-head__name{font-size:var(--fz-xl);font-weight:700;line-height:1.3;word-break:break-word;}
.prof-head__meta{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-s);margin-top:var(--space-2xs);font-size:var(--fz-s);color:var(--color-text-sub);}
.prof-head__meta span{display:inline-flex;align-items:center;gap:2px;}
.prof-head__meta i{flex:none;font-size:var(--fz-m);}
.prof-main{display:flex;flex-direction:column;gap:var(--space-l);margin-bottom:var(--space-xl);}
.prof-photo__main img{width:100%;border-radius:var(--radius-l);background-color:var(--color-bg-sub);}
.prof-photo__thumbs{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-2xs);margin-top:var(--space-xs);}
.prof-photo__thumb{display:block;width:100%;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-s);overflow:hidden;}
.prof-photo__thumb:hover{border-color:var(--color-primary);}
.prof-photo__thumb img{width:100%;aspect-ratio:1 / 1;object-fit:cover;background-color:var(--color-bg-sub);}
.prof-photo__note{display:flex;align-items:center;gap:var(--space-2xs);margin-top:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);}
.prof-spec__list{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.prof-actions{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-m);}
.prof-actions__form{display:flex;}
.prof-actions__form .c-btn{width:100%;}
.prof-actions__done{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-m);background-color:var(--color-primary-light);border-radius:var(--radius-m);color:var(--color-primary-dark);font-size:var(--fz-s);font-weight:700;}
.prof-actions__done i{flex:none;font-size:var(--fz-l);}
.prof-actions__off{display:flex;align-items:center;gap:var(--space-2xs);padding:var(--space-xs) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-m);color:var(--color-text-sub);font-size:var(--fz-s);}
.prof-actions__off i{flex:none;font-size:var(--fz-l);}
.prof-actions__link{font-size:var(--fz-xs);}
.prof-actions__link a{text-decoration:underline;}
.prof-appeal{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.prof-appeal .c-detail-list__row{grid-template-columns:1fr;gap:var(--space-2xs);padding-bottom:var(--space-s);border-bottom:1px dashed var(--color-border-strong);}
.prof-appeal .c-detail-list__row:last-child{padding-bottom:0;border-bottom:none;}
.prof-appeal .c-detail-list__label{font-size:var(--fz-s);color:var(--color-primary-dark);}
.prof-message{padding:var(--space-m);background-color:var(--color-primary-pale);border-radius:var(--radius-l);font-size:var(--fz-m);line-height:1.9;word-break:break-word;}
.prof-message__caution{margin-top:var(--space-s);}
.prof-optlink{margin-bottom:var(--space-xs);}
.past-table__thumb{width:56px;height:56px;border-radius:var(--radius-s);object-fit:cover;background-color:var(--color-bg-sub);}

@media (min-width:768px) {
  .prof-photo__thumbs {grid-template-columns:repeat(6, 1fr);gap:var(--space-xs);}
  .prof-actions {flex-direction:row;flex-wrap:wrap;align-items:center;}
  .prof-actions__form .c-btn {width:auto;}
  .prof-actions__link {flex-basis:100%;}
  .prof-appeal .c-detail-list__row {grid-template-columns:14em 1fr;gap:var(--space-m);align-items:start;}
}

@media (min-width:1024px) {
  .prof-main {flex-direction:row;align-items:flex-start;gap:var(--space-l);}
  .prof-photo {flex:0 0 300px;min-width:0;}
  .prof-spec {flex:1 1 0;min-width:0;}
}

/* ==========================================
  Item Detail (商品詳細ページ)
========================================== */

.item-head{margin-bottom:var(--space-m);}
.item-head__date{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);}
.item-head__title{margin-top:var(--space-2xs);font-size:var(--fz-xl);font-weight:700;line-height:1.4;word-break:break-word;}
.item-photo{margin-bottom:var(--space-l);}
.item-photo__main img{width:100%;border-radius:var(--radius-l);background-color:var(--color-bg-sub);}
.item-photo__thumbs{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--space-2xs);margin-top:var(--space-xs);}
.item-photo__thumb{display:block;width:100%;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-s);overflow:hidden;}
.item-photo__thumb:hover{border-color:var(--color-primary);}
.item-photo__thumb img{width:100%;aspect-ratio:1 / 1;object-fit:cover;background-color:var(--color-bg-sub);}
.item-photo__note{display:flex;align-items:center;gap:var(--space-2xs);margin-top:var(--space-2xs);font-size:var(--fz-xs);color:var(--color-text-sub);}
.item-sold{margin-bottom:var(--space-l);padding:var(--space-m);background-color:var(--color-muted-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-l);text-align:center;}
.item-sold__label{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-l);font-weight:700;color:var(--color-muted);}
.item-sold__label i{font-size:var(--fz-xl);}
.item-sold__request{margin-top:var(--space-s);font-size:var(--fz-m);line-height:1.8;}
.item-sold__request span{font-weight:700;color:var(--color-primary-dark);}
.item-sold__request a{text-decoration:underline;}
.item-spec{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.item-spec .c-detail-list__row{grid-template-columns:1fr;gap:var(--space-2xs);padding-bottom:var(--space-s);border-bottom:1px dashed var(--color-border-strong);}
.item-spec .c-detail-list__row:last-child{padding-bottom:0;border-bottom:none;}
.item-spec .c-detail-list__label{font-size:var(--fz-s);color:var(--color-primary-dark);}
.item-spec .c-detail-list__value a{text-decoration:underline;}
.item-spec__price{font-size:var(--fz-l);font-weight:700;color:var(--color-primary-dark);}
.item-spec__caution{margin-top:var(--space-s);}
.item-order{margin-top:var(--space-xl);}
.item-order__action{margin-top:var(--space-l);}
.item-order__note{margin-top:var(--space-m);}
.item-order__lead{margin-top:var(--space-s);font-size:var(--fz-l);font-weight:700;color:var(--color-primary-dark);text-align:center;line-height:1.6;}

@media (min-width:768px) {
  .item-photo__thumbs {grid-template-columns:repeat(6, 1fr);gap:var(--space-xs);}
  .item-spec .c-detail-list__row {grid-template-columns:12em 1fr;gap:var(--space-m);align-items:start;}
}

@media (min-width:1024px) {
  .item-head__title {font-size:var(--fz-2xl);}
}

/* ==========================================
  Cart (カート確認・注文者情報入力)
========================================== */

.cart-guest{display:flex;flex-direction:column;gap:var(--space-m);margin-bottom:var(--space-xl);padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
/* 会員／非会員はそれぞれ独立した選択肢。白いカードで囲い、中身を中央揃えにして2つの塊として読ませる */
.cart-guest__block{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--space-s);padding:var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);text-align:center;}
.cart-guest__title{justify-content:center;margin-bottom:0;}
.cart-guest__btn{width:100%;max-width:280px;}
.cart-guest__text{font-size:var(--fz-s);line-height:1.7;color:var(--color-text-sub);}
.cart-guest__back{margin-top:calc(var(--space-xs) * -1);text-align:center;}
.cart-list{display:flex;flex-direction:column;gap:var(--space-s);margin-bottom:var(--space-m);}
.cart-item{display:flex;gap:var(--space-s);padding:var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.cart-item__thumb{flex:none;width:80px;}
.cart-item__thumb img{width:80px;height:80px;border-radius:var(--radius-m);object-fit:cover;background-color:var(--color-bg-sub);}
.cart-item__body{flex:1 1 0;min-width:0;}
.cart-item__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-xs);font-size:var(--fz-m);font-weight:700;line-height:1.5;word-break:break-word;}
.cart-item__price{font-size:var(--fz-base);color:var(--color-primary-dark);white-space:nowrap;}
.cart-item__spec{margin-top:var(--space-xs);}
.cart-item__spec .c-detail-list__row{grid-template-columns:1fr;gap:2px;}
.cart-item__spec .c-detail-list__value{font-size:var(--fz-s);}
.cart-item__action{margin-top:var(--space-xs);}
.cart-total{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:var(--space-xs);padding:var(--space-s) var(--space-m);background-color:var(--color-primary-pale);border-radius:var(--radius-m);}
.cart-total__label{font-size:var(--fz-m);font-weight:700;}
.cart-total__value{font-size:var(--fz-xl);font-weight:700;color:var(--color-primary-dark);}
.cart-summary{display:flex;flex-direction:column;padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.cart-summary__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-xs);padding:var(--space-xs) 0;border-bottom:1px dashed var(--color-border-strong);font-size:var(--fz-m);}
.cart-summary__row:last-child{border-bottom:none;}
.cart-summary__label{color:var(--color-text-sub);font-weight:700;}
.cart-summary__value{font-weight:700;}
.cart-summary__row--total{margin-top:var(--space-2xs);padding-top:var(--space-s);border-top:2px solid var(--color-primary);}
.cart-summary__row--total .cart-summary__label{color:var(--color-text);font-size:var(--fz-l);}
.cart-summary__row--total .cart-summary__value{font-size:var(--fz-xl);color:var(--color-primary-dark);}
/* 購入確認の獲得予定ポイント（代金の表とは別枠） */
.cart-earn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);margin-top:var(--space-s);padding:var(--space-s) var(--space-m);background-color:var(--color-success-bg);border-radius:var(--radius-l);color:var(--color-success);}
.cart-earn__icon{flex:none;font-size:var(--fz-xl);}
.cart-earn__label{font-size:var(--fz-m);font-weight:700;}
.cart-earn__value{margin-left:auto;font-size:var(--fz-l);font-weight:700;}
.cart-earn__unit{margin-left:2px;font-size:var(--fz-s);}
.cart-earn__note{flex-basis:100%;font-size:var(--fz-xs);color:var(--color-text-sub);}
.cart-form__lead{margin-bottom:var(--space-m);}
.cart-form__pair{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-xs);}
.cart-form__pair .c-input{flex:1 1 8em;min-width:0;}
.cart-form__sub{flex:none;font-size:var(--fz-xs);color:var(--color-text-sub);}
.cart-form__label--stack{margin-top:var(--space-xs);}
.cart-form__help{font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.7;}
.cart-form__note{margin-top:var(--space-xs);font-size:var(--fz-s);}
.cart-form__accordion{margin-top:var(--space-xs);margin-bottom:0;}
.cart-form__accordion .c-note__list{font-size:var(--fz-m);line-height:1.8;}
.cart-form__accordion-title{margin-bottom:var(--space-xs);font-size:var(--fz-m);font-weight:700;line-height:1.7;overflow-wrap:anywhere;}
.cart-form__input--short{max-width:100%;}
.cart-form__action{margin-top:var(--space-l);}
.cart-form__back{margin-top:var(--space-s);text-align:center;}
.cart-confirm{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.cart-confirm .c-detail-list__row{grid-template-columns:1fr;gap:var(--space-2xs);padding-bottom:var(--space-s);border-bottom:1px dashed var(--color-border-strong);}
.cart-confirm .c-detail-list__row:last-child{padding-bottom:0;border-bottom:none;}
.cart-confirm .c-detail-list__label{font-size:var(--fz-s);color:var(--color-primary-dark);}

@media (min-width:768px) {
  .cart-guest {flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--space-l);}
  .cart-guest__block {flex:1 1 240px;}
  .cart-guest__back {flex-basis:100%;margin-top:0;}
  .cart-form__input--short {max-width:280px;}
  .cart-confirm .c-detail-list__row {grid-template-columns:12em 1fr;gap:var(--space-m);align-items:start;}
}

/* ==========================================
  Order Done (注文完了・受付完了などの案内ページ)
========================================== */

.order-done{padding:var(--space-l) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);text-align:center;}
.order-done__icon{font-size:56px;line-height:1;color:var(--color-primary);}
.order-done__title{margin-block:var(--space-s);font-size:var(--fz-l);font-weight:700;line-height:1.6;}
.order-done__sub{margin-bottom:var(--space-xs);font-size:var(--fz-m);font-weight:700;color:var(--color-danger);line-height:1.7;}
.order-done__text{margin-top:var(--space-s);font-size:var(--fz-m);line-height:1.9;text-align:left;}
.order-done__text a{text-decoration:underline;}
.order-done__note{margin-top:var(--space-m);text-align:left;}
.order-done__action{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-l);}

@media (min-width:1024px) {
  .order-done {padding:var(--space-xl) var(--space-l);}
  .order-done__action {flex-direction:row;justify-content:center;}
  .order-done__action .c-btn,
  .order-done__action .c-linkbtn {min-width:280px;}
}

/* ==========================================
  Caution Box (注意事項ブロック／現行 .box.bggrey の caution)
========================================== */

/* caution 系のテキストは行間 1.7 で統一（.c-note と揃える） */
.caution-box{margin-bottom:var(--space-xl);padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.caution-box__title{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-s);font-size:var(--fz-base);font-weight:700;line-height:1.7;color:var(--color-danger);}
.caution-box__title i{flex:none;font-size:var(--fz-l);}
.caution-box__list{display:flex;flex-direction:column;gap:var(--space-m);}
.caution-box__subtitle{margin-bottom:var(--space-2xs);font-size:var(--fz-m);font-weight:700;line-height:1.7;}
.caution-box__list p{font-size:var(--fz-m);line-height: 1.55;}
.caution-box__list a{text-decoration:underline;}
.caution-box__list .c-note__list{margin-top:var(--space-2xs);font-size:var(--fz-m);line-height:1.7;}
/* アコーディオンに畳まず常時見せる導入部（リード文＋主な流れ） */
.caution-box__lead{margin-bottom:var(--space-s);font-size:var(--fz-m);line-height:1.7;}
.caution-box__lead a{text-decoration:underline;}
.caution-box__flow{margin-bottom:var(--space-m);padding:var(--space-s) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-m);}
.caution-box__flow p{font-size:var(--fz-m);line-height:1.7;}
.caution-box .c-accordion:last-child{margin-bottom:0;}
/* 見出しだけを並べたコンパクト版（本文はアコーディオン内） */
.caution-box--compact{margin-bottom:var(--space-l);}
.caution-box--compact .c-accordion{margin-bottom:var(--space-xs);}
.caution-box--compact .c-accordion__body p{font-size:var(--fz-m);line-height:1.7;}
.caution-box--compact .c-accordion__body a{text-decoration:underline;}

/* ==========================================
  Step Nav (会員登録などの3ステップ表示／現行 .regist-navi)
========================================== */

.step-nav{display:flex;flex-direction:column;gap:var(--space-2xs);margin-bottom:var(--space-l);}
.step-nav__item{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-size);padding:var(--space-2xs) var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-m);color:var(--color-text-sub);font-size:var(--fz-s);font-weight:700;line-height:1.5;}
.step-nav__num{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;background-color:var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text-invert);font-size:var(--fz-xs);line-height:1;}
.step-nav__item--current{background-color:var(--color-primary-light);color:var(--color-primary-dark);}
.step-nav__item--current .step-nav__num{background-color:var(--color-primary);}

@media (min-width:768px) {
  .step-nav {flex-direction:row;}
  .step-nav__item {flex:1 1 0;justify-content:center;text-align:center;}
}

/* ==========================================
  Request Form (出品者へのリクエスト)
========================================== */

.request-form__readonly{padding:var(--space-xs) var(--space-s);background-color:var(--color-bg-sub);border:1px solid var(--color-border-strong);border-radius:var(--radius-m);font-size:var(--fz-base);font-weight:700;line-height:1.6;}
.request-form__help{font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.7;}
.request-form__action{margin-top:var(--space-l);}

/* ==========================================
  Register Form / Register Confirm (会員登録の入力・確認)
========================================== */

.register-form__group{margin-bottom:var(--space-xl);padding:var(--space-m);background-color:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-l);}
.register-form__group:last-of-type{margin-bottom:0;}
.register-form__group-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-s);padding-bottom:var(--space-xs);border-bottom:2px solid var(--color-primary);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.register-form__group-title i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.register-form__group-sub{flex-basis:100%;font-size:var(--fz-xs);font-weight:400;color:var(--color-text-sub);}
.register-form__group--private .register-form__group-title{border-bottom-color:var(--color-muted);}
.register-form__group--private .register-form__group-title i{color:var(--color-muted);}
.register-form__required-note{margin-bottom:var(--space-xs);font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.8;}
.register-form__subgroup{margin-bottom:var(--space-m);padding:var(--space-s);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-m);}
.register-form__subgroup-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs);font-size:var(--fz-m);font-weight:700;}
.register-form__subgroup-title i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.register-form__pair{display:flex;flex-wrap: nowrap;align-items:center;gap:var(--space-2xs) var(--space-xs);/* width: 100%; */}
.register-form__pair .register-form__sub {white-space: nowrap;flex-shrink: 0;}
.register-form__pair .c-input,
.register-form__pair .c-select{flex: 1;min-width:0;}
/* 姓名・せいめいは数文字しか入らないため、入力欄が全幅まで伸びないよう上限を掛ける */
.register-form__pair--name{justify-content:flex-start;}
.register-form__pair--name .c-input{flex:0 1 7em;max-width:7em;}
.register-form__sub{flex:none;font-size:var(--fz-xs);color:var(--color-text-sub);}
.register-form__label--stack{margin-top:var(--space-xs);}
.register-form__help{font-size:var(--fz-xs);color:var(--color-text-sub);line-height:1.7;}
.register-form__note{margin-top:var(--space-xs);font-size: var(--fz-xs);}
.register-form__input--short{max-width:100%;}
.register-form__unit{display:flex;align-items:center;gap:var(--space-2xs);}
.register-form__unit-text{flex:none;font-size:var(--fz-m);}
.register-form__multi{display:grid;grid-template-columns:1fr;gap:var(--space-2xs);}
.register-form__file{padding:var(--space-xs);}
.register-form__example{margin-top:var(--space-xs);}
.register-form__example img{width:150px;border-radius:var(--radius-m);}
/* グループ（グレーの箱）の直後に続く単独項目は、箱と地続きに見えないよう余白を足す */
.register-form__group-after{margin-top:var(--space-xl);}
.register-form__action{margin-top:var(--space-xl);}
.register-form__agree{margin-bottom:var(--space-xs);font-size:var(--fz-m);line-height:1.8;text-align:center;}
.register-form__agree a{text-decoration:underline;}
.register-form__back{margin-top:var(--space-s);text-align:center;}
.register-confirm{padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.register-confirm .c-detail-list__row{grid-template-columns:1fr;gap:var(--space-2xs);padding-bottom:var(--space-s);border-bottom:1px dashed var(--color-border-strong);}
.register-confirm .c-detail-list__row:last-child{padding-bottom:0;border-bottom:none;}
.register-confirm .c-detail-list__label{font-size:var(--fz-s);color:var(--color-primary-dark);}
.register-confirm__img{width:250px;border-radius:var(--radius-m);}

@media (min-width:768px) {
  .register-form__group {padding:var(--space-l);}
  .register-form__input--short {max-width:280px;}
  .register-form__multi {grid-template-columns:repeat(2, 1fr);gap:var(--space-xs);}
  .register-confirm .c-detail-list__row {grid-template-columns:14em 1fr;gap:var(--space-m);align-items:start;}
}

/* ==========================================
  Ranking (月間売上ランキング)
========================================== */

.rank-note{margin-bottom:var(--space-m);}
.rank-list{display:flex;flex-direction:column;gap:var(--space-xs);}
.rank-list__item{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--space-xs);padding:var(--space-s);background-color:var(--color-bg);/* border:1px solid var(--color-border); */border-radius:var(--radius-l);/* box-shadow:var(--shadow-s); */}
.rank-list__num{display:flex;align-items:baseline;justify-content:center;flex:none;gap:1px;width:44px;height:44px;padding-top:11px;background-color:var(--color-accent);border-radius:var(--radius-full);color:var(--color-text-invert);font-size:var(--fz-l);font-weight:700;line-height:1.2;}
.rank-list__num-unit{font-size:10px;font-weight:400;}
.rank-list__thumb{flex:none;}
.rank-list__thumb img{width:64px;height:64px;border-radius:var(--radius-m);object-fit:cover;background-color:var(--color-bg-sub);}
.rank-list__body{min-width:0;}
.rank-list__name{font-size:var(--fz-m);font-weight:700;line-height:1.4;word-break:break-word;}
/* 1〜3位は「王冠つきの大きな順位バッジ・大きな写真・大きな名前・メダル色の枠」で4位以降とはっきり差をつける */
.rank-list__item--1,
.rank-list__item--2,
.rank-list__item--3{padding:var(--space-m) var(--space-s);border-width:2px;/* box-shadow:var(--shadow-m); */}
.rank-list__item--1 .rank-list__num,
.rank-list__item--2 .rank-list__num,
.rank-list__item--3 .rank-list__num{flex-direction:column;align-items:center;justify-content:center;gap:0;width:64px;height:64px;padding-top:0;font-size:var(--fz-2xl);line-height:1;}
.rank-list__item--1 .rank-list__thumb img,
.rank-list__item--2 .rank-list__thumb img,
.rank-list__item--3 .rank-list__thumb img{width:88px;height:88px;border-radius:var(--radius-l);}
.rank-list__item--1 .rank-list__name,
.rank-list__item--2 .rank-list__name,
.rank-list__item--3 .rank-list__name{font-size:var(--fz-l);}
.rank-list__crown{font-size:var(--fz-s);line-height:1;opacity:0.9;}
.rank-list__item--1{/* background-color:var(--color-primary-pale); *//* border-color:var(--color-rank-1); */}
.rank-list__item--1 .rank-list__num{background-color:var(--color-rank-1);}
.rank-list__item--2{border-color:var(--color-rank-2);}
.rank-list__item--2 .rank-list__num{background-color:var(--color-rank-2);}
.rank-list__item--3{border-color:var(--color-rank-3);}
.rank-list__item--3 .rank-list__num{background-color:var(--color-rank-3);}
.rank-list__last{display:inline-flex;align-items:center;gap:2px;margin-top:2px;font-size:var(--fz-xs);color:var(--color-text-sub);}
.rank-list__last i{flex:none;font-size:var(--fz-m);}
.rank-list__last--up i{color:var(--color-danger);}
.rank-list__last--down i{color:var(--color-info);}
.rank-list__last--new i{color:var(--color-warning);}
.rank-list__links{display:flex;flex-wrap:wrap;grid-column:1 / -1;gap:var(--space-2xs);}
/* 年区切り行は colspan の1セルのみ。data-label を持たないため c-table のラベル列を消して全幅で見せる */
.rank-past__year td{display:block;background-color:var(--color-primary-light);color:var(--color-primary-dark);font-weight:700;text-align:center;}
.rank-past__year td::before{display:none;}

@media (min-width:768px) {
  .rank-list__item {grid-template-columns:auto auto 1fr auto;}
  .rank-list__links {grid-column:auto;flex-wrap:nowrap;}
  .rank-list__name {font-size:var(--fz-base);}
  .rank-list__item--1 .rank-list__thumb img,
  .rank-list__item--2 .rank-list__thumb img,
  .rank-list__item--3 .rank-list__thumb img {width:104px;height:104px;}
  .rank-list__item--1 .rank-list__name,
  .rank-list__item--2 .rank-list__name,
  .rank-list__item--3 .rank-list__name {font-size:var(--fz-xl);}
}

@media (min-width:1024px) {
  .rank-past__year td {border-radius:0;}
}

/* ==========================================
  BBS (商品別個別掲示板)
  現行はグローバルナビ・サイドバーを持たない独立ページのため専用シェルを持つ
========================================== */

:root {
  /* 投稿者ロール別の色（購入者＝青／出品者＝ピンク／管理者＝緑）。本文は --color-text のまま、背景と名前ラベルだけで区別する */
  --bbs-buyer-bg: #eff6fc;
  --bbs-buyer-border: #cfe4f5;
  --bbs-buyer-label: #1a6ba8;
  --bbs-seller-bg: #fdf0f4;
  --bbs-seller-border: #f3ccd8;
  --bbs-seller-label: #b23a5f;
  --bbs-admin-bg: #eef8f0;
  --bbs-admin-border: #cce9d5;
  --bbs-admin-label: #1f7a45;

  /* 注意書き（旧 bbs.gif）のトーン。元画像のオレンジ枠＋赤系見出しを踏襲する */
  --bbs-notice-bg: #fffaf2;
  --bbs-notice-bg-hover: #fff4e4;
  --bbs-notice-border: #f0d3a3;
  --bbs-notice-title: #c0392b;
  --bbs-notice-num: #d9800f;
}

.l-bbs{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-bg-sub);}
.bbs-header{flex:none;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);}
.bbs-header__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs);min-height:56px;padding-block:var(--space-xs);}
.bbs-header__logo img{max-height:32px;}
.bbs-header__nav ul{display:flex;flex-wrap:wrap;gap:var(--space-2xs);}
.bbs-header__link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:36px;padding:var(--space-2xs) var(--space-s);background-color:var(--color-primary-pale);border:1px solid var(--color-primary-light);border-radius:var(--radius-full);color:var(--color-primary-dark);font-size:var(--fz-xs);font-weight:700;}
.bbs-header__link i{flex:none;font-size:var(--fz-m);}
.bbs-header__link:hover{background-color:var(--color-primary-light);opacity:1;}
.bbs-main{flex:1 0 auto;padding-block:var(--space-s) var(--space-xl);}

/* ページタイトル：投稿フォームをファーストビューに入れるため .c-title--page より小ぶりにする */
.bbs-title{margin-bottom:var(--space-xs);padding-bottom:var(--space-xs);border-bottom-width:2px;font-size:var(--fz-l);}

/* 注意書きアコーディオン（JSなしの details/summary。初期状態は閉じる） */
.bbs-notice{margin-block:var(--space-fix-12);background-color:var(--bbs-notice-bg);border:1px solid var(--bbs-notice-border);border-radius:var(--radius-l);overflow:hidden;}
.bbs-notice__summary{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-size);padding:var(--space-xs) var(--space-m);list-style:none;cursor:pointer;transition:background-color var(--transition);}
.bbs-notice__summary::-webkit-details-marker{display:none;}
.bbs-notice__summary:hover{background-color:var(--bbs-notice-bg-hover);}
.bbs-notice__icon{flex:none;color:var(--bbs-notice-title);font-size:var(--fz-l);line-height:1;}
.bbs-notice__title{flex:1 1 auto;min-width:0;color:var(--bbs-notice-title);font-size:var(--fz-m);font-weight:700;line-height:1.4;}
.bbs-notice__chevron{flex:none;color:var(--bbs-notice-num);font-size:var(--fz-l);line-height:1;transition:transform var(--transition);}
.bbs-notice[open] .bbs-notice__chevron{transform:rotate(180deg);}
.bbs-notice__list{counter-reset:bbs-notice;display:flex;flex-direction:column;gap:var(--space-note-line);padding:var(--space-s) var(--space-m) var(--space-m);border-top:1px solid var(--bbs-notice-border);}
/* 連番は ::before の絶対配置で出す（grid にすると文中の strong が別の行送りになるため） */
.bbs-notice__item{position:relative;padding-left:1.9em;font-size:var(--fz-m);line-height:1.8;}
.bbs-notice__item::before{counter-increment:bbs-notice;content:counter(bbs-notice) ".";position:absolute;top:0;left:0;width:1.6em;color:var(--bbs-notice-num);font-weight:700;text-align:right;}
.bbs-notice__strong{color:var(--bbs-notice-title);font-weight:700;}

/* 投稿できない状態の告知。フォームと差し替わる1行の帯（縦を食わないよう .c-empty は使わない） */
.bbs-closed{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-size);margin-bottom:var(--space-s);padding:var(--space-xs) var(--space-m);background-color:var(--color-muted-bg);border-radius:var(--radius-m);color:var(--color-text-sub);font-size:var(--fz-m);font-weight:700;}
.bbs-closed i{flex:none;font-size:var(--fz-l);}

/* 投稿フォーム：375px でスクロールなしに送信ボタンまで見えるよう余白と textarea を圧縮 */
.bbs-form{margin-bottom:var(--space-l);padding:var(--space-fix-12) var(--space-m);}
.bbs-form__limit{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs);padding:var(--space-2xs) var(--space-s);background-color:var(--color-info-bg);border-radius:var(--radius-m);color:var(--color-info);font-size:var(--fz-s);font-weight:700;}
.bbs-form__group{gap:var(--space-fix-2);margin-bottom:var(--space-xs);}
.bbs-form__label{font-size:var(--fz-s);}
.bbs-form__textarea{min-height:84px;}
.bbs-form__agree{margin-bottom:var(--space-xs);font-size:var(--fz-xs);color:var(--color-text-sub);text-align:center;}
.bbs-form__submit{min-height:48px;}

/* 商品情報：dl を直接グリッド化して入れ子の div を撤去。区切り線は持たせずカードに寄せる */
.bbs-thread{margin-bottom:var(--space-m);padding:var(--space-s) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);}
.bbs-thread__spec{display:grid;grid-template-columns:5.5em 1fr;align-items:baseline;gap:var(--space-2xs) var(--space-xs);}
.bbs-thread__label{display:inline-flex;align-items:center;gap:var(--space-2xs);color:var(--color-text-sub);font-size:var(--fz-xs);font-weight:700;line-height:1.7;}
.bbs-thread__label i{flex:none;font-size:var(--fz-m);}
.bbs-thread__value{min-width:0;font-size:var(--fz-m);line-height:1.7;word-break:break-word;}
.bbs-thread__link{margin-top:var(--space-s);}

/* 投稿ログ：投稿者ロールごとに背景・枠線・名前ラベルの色を切り替える */
.bbs-log__list{display:flex;flex-direction:column;gap:var(--space-s);}
.bbs-log__item{padding:var(--space-s) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);}
.bbs-log__item--buyer{background-color:var(--bbs-buyer-bg);border-color:var(--bbs-buyer-border);}
.bbs-log__item--buyer .bbs-log__from span{color:var(--bbs-buyer-label);}
.bbs-log__item--seller{background-color:var(--bbs-seller-bg);border-color:var(--bbs-seller-border);}
.bbs-log__item--seller .bbs-log__from span{color:var(--bbs-seller-label);}
.bbs-log__item--admin{background-color:var(--bbs-admin-bg);border-color:var(--bbs-admin-border);}
.bbs-log__item--admin .bbs-log__from span{color:var(--bbs-admin-label);}
.bbs-log__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs) var(--space-s);margin-bottom:var(--space-xs);}
.bbs-log__from{display:inline-flex;align-items:center;gap:2px;font-size:var(--fz-s);font-weight:700;}
.bbs-log__from i{flex:none;color:var(--color-text-sub);font-size:var(--fz-m);}
.bbs-log__date{display:inline-flex;align-items:center;gap:2px;font-size:var(--fz-xs);color:var(--color-text-sub);}
.bbs-log__date i{flex:none;font-size:var(--fz-m);}
.bbs-log__delete{margin-left:auto;}
/* 自分の投稿の目印。ロール別の名前ラベル色（.bbs-log__from span）に負けないよう詳細度を上げる */
.bbs-log__item .bbs-log__from .bbs-log__mine{margin-left:2px;color:var(--color-text-sub);font-size:var(--fz-xs);font-style:normal;font-weight:400;}
.bbs-log__text{color:var(--color-text);font-size:var(--fz-m);line-height:1.8;word-break:break-word;}
.bbs-footer{flex:none;margin-top:auto;padding-block:var(--space-m);background-color:var(--color-footer-bg);color:var(--color-text-invert);}
.bbs-footer__copyright{font-size:var(--fz-xs);font-style:normal;text-align:center;color:rgba(255, 255, 255, 0.7);}

@media (min-width:768px) {
  .bbs-title {font-size:var(--fz-xl);}
  .bbs-notice__title {font-size:var(--fz-base);}
  .bbs-thread__spec {grid-template-columns:8em 1fr;gap:var(--space-xs);align-items:center;}
}

/* ==========================================
  Auth (ログイン・パスワード変更完了)
  現行もグローバルナビ・サイドバーを持たない独立ページのため専用シェルを持つ
========================================== */

.l-auth{display:flex;flex-direction:column;min-height:100vh;background-color:var(--color-primary-pale);}
.auth{flex:1 0 auto;display:flex;align-items:flex-start;justify-content:center;padding:var(--space-l) var(--space-m);}
.auth__inner{width:100%;max-width:420px;}
.auth__logo{display:flex;justify-content:center;margin-bottom:var(--space-m);}
.auth__logo img{max-height:40px;}
.auth__title{margin-bottom:var(--space-m);font-size:var(--fz-l);font-weight:700;line-height:1.6;text-align:center;}
.auth__card{padding:var(--space-m);background-color:var(--color-bg);border-radius:var(--radius-l);box-shadow:var(--shadow-m);}
.auth__remember{display:flex;align-items:center;gap:var(--space-2xs);margin-top:var(--space-2xs);font-size:var(--fz-s);color:var(--color-text-sub);}
.auth__remember input{width:18px;height:18px;accent-color:var(--color-primary);}
.auth__note{margin-top:var(--space-m);font-size:var(--fz-s);}
.auth__note a{text-decoration:underline;}
.auth__sub-action{width:100%;margin-top:var(--space-m);}
.auth__flash{display:flex;align-items:flex-start;gap:var(--space-xs);padding:var(--space-s) var(--space-m);background-color:var(--color-success-bg);border:1px solid var(--color-success);border-radius:var(--radius-m);color:var(--color-success);font-size:var(--fz-m);font-weight:700;line-height:1.7;margin-bottom: var(--space-m);}
.auth__flash i{flex:none;font-size:var(--fz-l);}
.auth__actions{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-m);}
.auth__actions .c-linkbtn{width:100%;}
.auth__footer{flex:none;margin-top:auto;padding-block:var(--space-m);}
.auth__copyright{font-size:var(--fz-xs);font-style:normal;text-align:center;color:var(--color-text-sub);}

@media (min-width:768px) {
  .auth {align-items:center;padding-block:var(--space-2xl);}
  .auth__card {padding:var(--space-l);}
}

/* ==========================================
  Modal Demo (modal.html … 確認モーダルの単体パターン)
========================================== */

.modal-demo__note{margin-bottom:var(--space-l);}
.modal-demo__note code{padding:1px 4px;background-color:var(--color-bg);border-radius:var(--radius-s);font-family:monospace;font-size:0.95em;}
.modal-demo{margin-bottom:var(--space-m);}
.modal-demo__lead{margin-bottom:var(--space-s);font-size:var(--fz-m);line-height:1.9;}
.modal-demo__lead code{padding:1px 4px;background-color:var(--color-bg-sub);border-radius:var(--radius-s);font-family:monospace;font-size:0.95em;}
.modal-demo__action{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);margin-top:var(--space-m);}
.modal-demo__result{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);padding:var(--space-s) var(--space-m);background-color:var(--color-success-bg);border:1px solid var(--color-success);border-radius:var(--radius-m);color:var(--color-success);font-size:var(--fz-m);font-weight:700;}
.modal-demo__result[hidden]{display:none;}
.modal-demo__result i{flex:none;font-size:var(--fz-l);}
/* ==========================================
  Doc Body (規約・ポリシー・説明系ページの本文)
  長文を「見出し＋段落＋リスト」で構造化する。sub/ ・ manual/ ・ 規約系で共通利用
========================================== */

.doc-body{font-size:var(--fz-m);line-height:1.9;}
.doc-body > * + *{margin-top:var(--space-s);}
.doc-body a{color:var(--color-link);text-decoration:underline;}
.doc-body__lead{padding:var(--space-s) var(--space-m);background-color:var(--color-primary-pale);border-radius:var(--radius-m);font-size:var(--fz-m);line-height:1.9;}
.doc-body__em{font-weight:700;color:var(--color-danger);}
.doc-body__mark{padding:0 2px;background-color:var(--color-primary-light);font-weight:700;}
.doc-body__strike{text-decoration:line-through;color:var(--color-text-sub);}
/* 小見出し（現行 .subtitle / h3・h4 相当）。帯見出しのひとつ下の階層 */
.doc-heading{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-l);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.doc-heading:first-child{margin-top:0;}
.doc-heading i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.doc-heading--sub{font-size:var(--fz-m);}
/* 「・」付きリスト。項目内に <a> や <strong> が入っても崩れないよう吊り下げインデントで組む
   （flex にすると本文が「テキスト｜リンク｜テキスト」に分断されるため） */
.doc-list{display:flex;flex-direction:column;gap:var(--space-xs);}
.doc-list__item{position:relative;padding-left:1.3em;font-size:var(--fz-m);line-height:1.9;overflow-wrap:anywhere;}
.doc-list__item::before{content:"・";position:absolute;top:0;left:0;color:var(--color-primary);font-weight:700;}
/* 番号付きリスト（手順・条項）。カウンタで丸番号バッジを出す */
.doc-list--num{counter-reset:doc-num;}
.doc-list--num .doc-list__item{padding-left:2.2em;}
.doc-list--num .doc-list__item::before{counter-increment:doc-num;content:counter(doc-num);display:flex;align-items:center;justify-content:center;top:0.3em;width:1.5em;height:1.5em;background-color:var(--color-primary);border-radius:var(--radius-full);color:var(--color-text-invert);font-size:var(--fz-xs);font-weight:700;line-height:1;}
/* 用語＋説明（レアアイテム一覧・ユーザカテゴリ一覧など） */
.doc-terms{display:flex;flex-direction:column;gap:var(--space-xs);}
.doc-term{padding:var(--space-s) var(--space-m);background-color:var(--color-bg-sub);border:1px solid var(--color-border);border-radius:var(--radius-m);}
.doc-term__name{display:flex;align-items:center;gap:var(--space-2xs);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.doc-term__name i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.doc-term__text{margin-top:var(--space-2xs);font-size:var(--fz-m);line-height:1.8;}
/* 用語だけを並べる場合（説明文なし）はチップ状に */
.doc-chips{display:flex;flex-wrap:wrap;gap:var(--space-xs);}
.doc-chip{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:36px;padding:var(--space-2xs) var(--space-m);background-color:var(--color-primary-light);border-radius:var(--radius-full);color:var(--color-primary-dark);font-size:var(--fz-m);font-weight:700;}
.doc-chip i{flex:none;}
/* 条文（利用規約・プライバシーポリシー）。第◯条ごとのブロック */
.doc-article{margin-bottom:var(--space-l);}
.doc-article:last-child{margin-bottom:0;}
.doc-article__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-xs);margin-bottom:var(--space-xs);padding-bottom:var(--space-2xs);border-bottom:2px solid var(--color-primary-light);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.doc-article__num{flex:none;font-size:var(--fz-s);color:var(--color-primary);letter-spacing:0.06em;}
.doc-table__caption{margin-bottom:var(--space-xs);font-size:var(--fz-s);font-weight:700;color:var(--color-text-sub);}

@media (min-width:768px) {
  .doc-body {font-size:var(--fz-base);}
  .doc-list__item {font-size:var(--fz-base);}
  .doc-heading {font-size:var(--fz-l);}
}

/* ==========================================
  Guide (購入者ガイド・出品者ガイド)
  長文の説明を「目次＋ステップ＋カード」に分解して読みやすくする
========================================== */

.guide-intro{margin-bottom:var(--space-l);padding:var(--space-m);background-color:var(--color-primary-pale);border:1px solid var(--color-primary-light);border-radius:var(--radius-l);}
.guide-intro__text{font-size:var(--fz-m);line-height:1.9;}
.guide-intro__text + .guide-intro__text{margin-top:var(--space-xs);}
/* 目次（ページ内リンク） */
.guide-toc{margin-bottom:var(--space-xl);}
.guide-toc__list{display:grid;grid-template-columns:1fr;gap:var(--space-xs);}
.guide-toc__link{display:flex;align-items:center;gap:var(--space-xs);min-height:var(--tap-size);padding:var(--space-xs) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-m);color:var(--color-text);font-size:var(--fz-m);font-weight:700;line-height:1.4;transition:background-color var(--transition);}
.guide-toc__link:hover{background-color:var(--color-primary-light);opacity:1;}
.guide-toc__link i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
/* ステップ（番号付きの手順カード） */
.guide-steps{counter-reset:guide-step;display:flex;flex-direction:column;gap:var(--space-l);}
.guide-step{position:relative;padding:var(--space-l) var(--space-m) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.guide-step__num{counter-increment:guide-step;position:absolute;top:-12px;left:var(--space-m);display:inline-flex;align-items:center;padding:var(--space-2xs) var(--space-s);background-color:var(--color-primary);border-radius:var(--radius-full);color:var(--color-text-invert);font-size:var(--fz-xs);font-weight:700;letter-spacing:0.08em;line-height:1.4;}
.guide-step__num::after{content:"STEP " counter(guide-step);}
.guide-step__title{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.guide-step__title i{flex:none;color:var(--color-primary);font-size:var(--fz-xl);}
.guide-step__body{font-size:var(--fz-m);line-height:1.9;}
.guide-step__body > * + *{margin-top:var(--space-xs);}
.guide-step__body a{color:var(--color-link);text-decoration:underline;}
/* 2〜3列で並べる特徴カード */
.guide-cards{display:grid;grid-template-columns:1fr;gap:var(--space-s);}
.guide-card{padding:var(--space-m);background-color:var(--color-bg-sub);border:1px solid var(--color-border);border-radius:var(--radius-l);}
.guide-card__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:var(--space-xs);border-radius:var(--radius-full);background-color:var(--color-primary-light);color:var(--color-primary);font-size:var(--fz-xl);}
.guide-card__title{margin-bottom:var(--space-2xs);font-size:var(--fz-base);font-weight:700;line-height:1.5;}
.guide-card__text{font-size:var(--fz-m);line-height:1.8;}
.guide-card__text a{color:var(--color-link);text-decoration:underline;}
.guide-card__text > * + *{margin-top:var(--space-2xs);}
/* 体験者の声（引用ブロック） */
.guide-voices{display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-m);background-color:var(--color-bg-sub);border-radius:var(--radius-l);}
.guide-voice{position:relative;padding-left:1.6em;font-size:var(--fz-m);line-height:1.8;}
.guide-voice::before{content:"";position:absolute;top:0.55em;left:0.2em;width:8px;height:8px;border-radius:var(--radius-full);background-color:var(--color-primary);}
.guide-more{margin-top:var(--space-m);text-align:center;}
.guide-section{margin-bottom:var(--space-2xl);scroll-margin-top:var(--space-m);}
.guide-section:last-child{margin-bottom:0;}

@media (min-width:768px) {
  .guide-toc__list {grid-template-columns:repeat(2, 1fr);}
  .guide-cards {grid-template-columns:repeat(2, 1fr);}
  .guide-step {padding:var(--space-l);}
}

@media (min-width:1024px) {
  .guide-toc__list {grid-template-columns:repeat(3, 1fr);}
}

/* ==========================================
  Image Memo (画像の差し込み位置メモ)
  実画像を置かず「どんな写真を入れるか」だけを可視のプレースホルダで示す
========================================== */

.img-memo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xs);min-height:120px;padding:var(--space-m);background-color:var(--color-bg-muted);border:2px dashed var(--color-border-strong);border-radius:var(--radius-l);text-align:center;}
.img-memo i{flex:none;color:var(--color-text-sub);font-size:var(--fz-2xl);}
.img-memo__label{font-size:var(--fz-xs);font-weight:700;letter-spacing:0.1em;color:var(--color-primary);}
.img-memo__text{font-size:var(--fz-s);line-height:1.7;color:var(--color-text-sub);}

/* ==========================================
  Hashtag (sub/hashtag … カテゴリ別ハッシュタグ集)
========================================== */

.hashtag-group{margin-bottom:var(--space-l);}
.hashtag-group:last-child{margin-bottom:0;}
.hashtag-group__title{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs);font-size:var(--fz-base);font-weight:700;}
.hashtag-group__title i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.hashtag-tags{display:flex;flex-wrap:wrap;gap:var(--space-2xs);}
.hashtag-tag{display:inline-flex;align-items:center;padding:var(--space-2xs) var(--space-s);background-color:var(--color-bg-sub);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--fz-s);color:var(--color-text);}

/* ==========================================
  Error Page (404 / 500 / 503)
========================================== */

.error-page{display:flex;flex-direction:column;align-items:center;gap:var(--space-m);padding:var(--space-2xl) var(--space-m);text-align:center;}
.error-page__code{font-size:56px;font-weight:700;line-height:1;color:var(--color-primary);letter-spacing:0.06em;}
.error-page__icon{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:var(--radius-full);background-color:var(--color-primary-light);color:var(--color-primary);font-size:44px;}
.error-page__title{font-size:var(--fz-l);font-weight:700;line-height:1.6;}
.error-page__text{font-size:var(--fz-m);line-height:1.9;}
.error-page__text a{color:var(--color-link);text-decoration:underline;}
.error-page__action{display:flex;flex-direction:column;gap:var(--space-xs);width:100%;max-width:320px;margin-top:var(--space-s);}
.error-page__action .c-linkbtn{width:100%;}

@media (min-width:768px) {
  .error-page__code {font-size:80px;}
  .error-page__title {font-size:var(--fz-xl);}
  .error-page__action {flex-direction:row;max-width:none;justify-content:center;}
  .error-page__action .c-linkbtn {width:auto;min-width:220px;}
}
/* 署名行（human trafficking policy の社名など） */
.doc-signature{margin-top:var(--space-l);font-size:var(--fz-m);font-weight:700;}

/* 一覧ページ版の「出品者の更新情報」（update.html）。
   トップは枠内スクロールだが、一覧ページは全件を縦に並べる */
.update--page .upeach{height:auto;overflow:visible;}
.update-page__note{margin-bottom:var(--space-m);}
/* ==========================================
  Guide Merit (出品ガイドの「メリット1〜6」)
  現行の「メリットN」ラベル付き見出しを、番号バッジ付きのカードに置き換えたもの
========================================== */

.guide-merits{display:flex;flex-direction:column;gap:var(--space-l);}
.guide-merit{position:relative;padding:var(--space-l) var(--space-m) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.guide-merit__num{position:absolute;top:-12px;left:var(--space-m);display:inline-flex;align-items:center;padding:var(--space-2xs) var(--space-s);background-color:var(--color-primary);border-radius:var(--radius-full);color:var(--color-text-invert);font-size:var(--fz-xs);font-weight:700;letter-spacing:0.08em;line-height:1.4;}
.guide-merit__title{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--fz-l);font-weight:700;line-height:1.5;}
.guide-merit__title i{flex:none;color:var(--color-primary);font-size:var(--fz-2xl);}
.guide-merit__lead{margin-top:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);background-color:var(--color-primary-pale);border-radius:var(--radius-s);font-size:var(--fz-m);font-weight:700;color:var(--color-primary-dark);line-height:1.6;}
.guide-merit__body{margin-top:var(--space-s);font-size:var(--fz-m);line-height:1.9;}
.guide-merit__body > * + *{margin-top:var(--space-xs);}

@media (min-width:768px) {
  .guide-merit {padding:var(--space-l);}
  .guide-merit__title {font-size:var(--fz-xl);}
}

/* ==========================================
  Guide Compare (購入ガイドの「会員と非会員の違い」)
  1024px未満は c-table のカード型、1024px以上は3列の表
========================================== */

.guide-compare td i{margin-right:var(--space-2xs);color:var(--color-text-sub);}
.guide-compare__ok{margin-right:0;color:var(--color-primary);font-size:var(--fz-l);}
.guide-compare__ng{margin-right:0;color:var(--color-muted);font-size:var(--fz-l);}
.guide-compare__sub{display:block;margin-top:2px;font-size:var(--fz-xs);font-weight:400;}
.guide-compare__sub a{color:var(--color-link);text-decoration:underline;}

@media (min-width:1024px) {
  .guide-compare td:not(:first-child){text-align:center;}
  .guide-compare th:not(:first-child){text-align:center;}
}
/* ==========================================
  Manual (出品マニュアル manual/ 配下)
  現行のマニュアル専用レイアウトを廃し、front シェル＋共通CSSに載せ替えたもの
========================================== */

.manual-topnav{margin-bottom:var(--space-m);}
.manual-topnav ul{display:flex;flex-wrap:wrap;gap:var(--space-2xs);}
.manual-topnav__link{display:inline-flex;align-items:center;gap:var(--space-2xs);min-height:36px;padding:var(--space-2xs) var(--space-s);background-color:var(--color-bg-sub);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);font-size:var(--fz-s);font-weight:700;line-height:1.4;}
.manual-topnav__link:hover{background-color:var(--color-primary-light);color:var(--color-primary-dark);opacity:1;}
.manual-topnav__link i{flex:none;color:var(--color-primary);font-size:var(--fz-m);}
.manual-contact{margin-bottom:var(--space-l);font-size:var(--fz-s);}
/* 目次に見出しを付ける場合（マニュアルの「メニュー」） */
.guide-toc__title{display:flex;align-items:center;gap:var(--space-2xs);margin-bottom:var(--space-xs);font-size:var(--fz-base);font-weight:700;}
.guide-toc__title i{flex:none;color:var(--color-primary);font-size:var(--fz-l);}
.guide-toc__link--current{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-invert);}
.guide-toc__link--current i{color:var(--color-text-invert);}
.guide-toc__link--current:hover{background-color:var(--color-primary-dark);color:var(--color-text-invert);}
/* ステップ内に置く画像メモ・注意書きは少し詰める */
.guide-step__body .img-memo{margin-top:var(--space-s);}
.guide-step__body .doc-terms{margin-top:var(--space-s);}
.guide-step__body .c-note{margin-top:var(--space-s);}
.guide-step__body .doc-body__lead{margin-top:var(--space-s);padding:var(--space-s) var(--space-m);background-color:var(--color-primary-pale);border-radius:var(--radius-m);}

/* 月次アーカイブページ（rank/ranking2026xx）から当月ランキングへ戻る導線 */
.rank-archive__back{margin-bottom:var(--space-xl);}

/* ==========================================
  ここから トップページ改修（①〜⑥）で追加したスタイル
  既存セレクタは削除せず、必要なものだけ後方で上書きしている
========================================== */

/* ==========================================
  ② Front Header SP Icons（〜768px：ロゴ以外を3アイコンに集約）
  769px以上は既存のヘッダー（会員メニュー・カート）のまま。検索アイコンのみ非表示
========================================== */

.front-header__icons{display:flex;flex:none;align-items:center;gap:var(--space-fix-4);}
.front-header__search{display:none;}

@media (max-width:768px) {
  .front-header__inner {gap:var(--space-fix-4);min-height:var(--size-header-sp);padding:var(--space-fix-8) var(--space-fix-4) var(--space-fix-8) var(--space-fix-12);}
  .front-header__search {display:flex;}
  /* 背景色・角丸を持たない単独アイコン（グレー）に統一する */
  .front-header__icon {display:flex;align-items:center;justify-content:center;flex:none;width:var(--size-header-icon);height:var(--size-header-icon);padding:0;background-color:transparent;border:none;border-radius:0;color:var(--color-icon);font-size:var(--size-header-icon-glyph);transition:color var(--transition);}
  .front-header__icon i {font-size:var(--size-header-icon-glyph);}
  .front-header__icon:hover {background-color:transparent;color:var(--color-icon);opacity:1;}
  .front-header__icon:active {background-color:transparent;color:var(--color-icon-active);}
}

/* ==========================================
  ⑥ Front Drawer Account（ドロワー最上部の会員ボタンブロック）
========================================== */

.front-drawer__account{margin-bottom:var(--space-m);padding-bottom:var(--space-m);border-bottom:1px solid var(--color-border);}
.front-drawer__account-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-fix-8);}
.front-drawer__account-grid--single{grid-template-columns:1fr;}

/* ==========================================
  ③ Top Hero Carousel（hero1-3.png／1枚 312×175）
  〜768px：中央スライドを大きく見せ、左右の隣スライドが少し覗くカルーセル
  769px〜：312×175 のまま横並びで中央寄せ（幅が足りないときは折り返す）
========================================== */

.top-hero{padding-top:var(--space-s);}
.top-hero__carousel{position:relative;overflow:hidden;}
.top-hero__viewport{overflow:hidden;}
.top-hero__track{display:flex;gap:var(--space-fix-8);transition:transform 0.4s ease;will-change:transform;}
.top-hero__slide{flex:none;width:min(var(--size-hero-slide), calc(100vw - var(--size-hero-inset)));}
.top-hero__img{width: 100%;height: auto;aspect-ratio:312 / 175;object-fit:cover;border-radius:var(--radius-m);}
.top-hero__dots{display:flex;justify-content:center;gap:var(--space-fix-8);margin-top:var(--space-s);}
.top-hero__dot{width:var(--size-dot);height:var(--size-dot);border-radius:var(--radius-full);background-color:var(--color-border-strong);transition:background-color var(--transition);}
.top-hero__dot.is-current{background-color:var(--color-primary);}

@media (prefers-reduced-motion: reduce) {
  .top-hero__track {transition:none;}
}

@media (min-width:769px) {
  .top-hero {padding-inline:var(--space-l);}
  .top-hero__carousel {overflow:visible;}
  /* 第3回改修：PCでもカルーセルを動かすため、transform の !important による打ち消しをやめる。
     折り返しも禁止し、収まらない分は translateX で送る（中央1枚＋左右見切れ） */
  .top-hero__track {flex-wrap:nowrap;justify-content:flex-start;}
  .top-hero__slide {width:var(--size-hero-slide);}
  .top-hero__dots {display:none;}
}

/* ==========================================
  ⑤ Top CTA（ヒーロー直下の会員募集ボックス。ログイン時は非表示）
========================================== */

/* body.l-front は flex コンテナのため、幅は width:100% ＋ max-width で決める。
   カード左右の12pxは margin ではなく親の padding で確保する（中央寄せと両立させるため） */
.top-cta{width:100%;max-width: 1100px;margin: var(--space-m) auto var(--space-m);padding-inline:var(--space-fix-12);}
.top-cta__box{padding:var(--space-fix-20) var(--space-fix-16);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-l);box-shadow:var(--shadow-s);}
.top-cta__text{margin-bottom:var(--space-m);font-size:var(--fz-m);line-height:1.7;text-align:center;}
.top-cta__action{display:flex;gap:var(--space-fix-12);}
.top-cta__btn{flex:1 1 0;display:flex;min-width:0;min-height:var(--size-more-btn);padding:var(--space-xs);border-radius:var(--radius-full);font-size:var(--fz-s);line-height:1.35;}

@media (min-width:769px) {
  .top-cta__text {font-size:var(--fz-base);}
  .top-cta__btn {padding:var(--space-xs) var(--space-m);font-size:var(--fz-m);}
}

/* ==========================================
  ④ Category Cards（カテゴリ一覧のカードボタン化）
  〜768px：2列×2行＝4件を1ページとして横スクロール（矢印＋ドットでページ送り）
  769px〜：4列グリッド。矢印・ドットは非表示
========================================== */

/* 既存の .top-catelist__title は border-left のアクセントを持つため、細い下線＋太字に置き換える */
.top-catelist__title{margin-bottom:var(--space-m);padding:0 0 var(--space-xs);border-left:none;border-bottom:1px solid var(--color-border);font-size:var(--fz-base);font-weight:700;color:var(--color-text);}

.cate-cards{margin-bottom:var(--space-l);}
.cate-cards:last-child{margin-bottom:0;}
.cate-cards__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);margin-bottom:var(--space-s);}
.cate-cards__title{font-size:var(--fz-m);font-weight:700;line-height:1.4;color:var(--color-text);}
.cate-cards__title--lv3{font-size:var(--fz-base);}
.cate-cards__nav{display:flex;flex:none;gap:var(--space-fix-4);}
.cate-cards__arrow{display:flex;align-items:center;justify-content:center;width:var(--size-cate-arrow);height:var(--size-cate-arrow);background-color:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-s);color:var(--color-icon);font-size:var(--fz-m);transition:border-color var(--transition),color var(--transition);}
.cate-cards__arrow:hover{border-color:var(--color-primary);color:var(--color-primary);}
.cate-cards__arrow[disabled]{border-color:var(--color-border);color:var(--color-grey);cursor:not-allowed;}
.cate-cards__viewport{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.cate-cards__viewport::-webkit-scrollbar{display:none;}
.cate-cards__grid{display:grid;grid-template-rows:repeat(2, minmax(var(--size-cate-card), 1fr));grid-auto-flow:column dense;grid-auto-columns:calc((100% - var(--space-fix-8)) / 2);gap:var(--space-fix-8);}
/* 列送りのグリッドはそのままだと DOM 順が縦（1,3／2,4）に並んでしまうため、
   行を明示して「左→右→次の行」の読み順に揃える（dense で列の空きを詰める） */
.cate-cards__item{grid-row:2;}
.cate-cards__item:nth-child(4n+1),
.cate-cards__item:nth-child(4n+2){grid-row:1;}
/* 4件ごと（＝各ページの先頭カード）でスナップさせ、ページの区切りを分かりやすくする */
.cate-cards__item:nth-child(4n+1){scroll-snap-align:start;}
.cate-card{display:flex;align-items:center;gap:var(--space-xs);width:100%;height:100%;min-height:var(--size-cate-card);padding:var(--space-fix-12) var(--space-m);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-m);transition:background-color var(--transition),border-color var(--transition);}
.cate-card:hover{background-color:var(--color-primary-pale);border-color:var(--color-primary);opacity:1;}
.cate-card__body{display:flex;flex-direction:column;gap:var(--space-2xs);flex:1 1 0;min-width:0;}
.cate-card__name{font-size:var(--fz-s);font-weight:700;line-height:1.35;color:var(--color-primary);word-break:break-word;}
.cate-card__new{margin-left:var(--space-2xs);vertical-align:middle;}
.cate-card__count{font-size:var(--fz-xs);line-height:1.2;color:var(--color-text-sub);}
.cate-card__arrow{flex:none;color:var(--color-grey);font-size:var(--fz-m);}
.cate-cards__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-fix-4);margin-top:var(--space-s);}
.cate-cards__dot{width:var(--size-dot);height:var(--size-dot);border-radius:var(--radius-full);background-color:var(--color-border-strong);transition:background-color var(--transition);}
.cate-cards__dot.is-current{background-color:var(--color-primary);}
.top-catelist__more{margin-top:var(--space-l);}
.top-catelist__more-link{display:flex;gap:var(--space-2xs);width:100%;min-height:var(--size-more-btn);font-size:var(--fz-m);}

@media (min-width:769px) {
  .cate-cards__viewport {overflow:visible;scroll-snap-type:none;}
  .cate-cards__grid {grid-template-rows:none;grid-auto-flow:row;grid-template-columns: repeat(5, 1fr);6: 600;}
  /* SP用に行を固定しているセレクタ（:nth-child）と同じ詳細度で打ち消す */
  .cate-cards__item,
  .cate-cards__item:nth-child(4n+1),
  .cate-cards__item:nth-child(4n+2) {grid-row: auto;/* min-height: 30px; */}
  .cate-cards__nav {display:none;}
  .cate-cards__dots {display:none;}
  .cate-card__name {font-size:var(--fz-m);}
  .top-catelist__more-link {max-width:480px;margin-inline:auto;}
}

/* ==========================================
  ① SP Fixed Footer Nav（〜768px のみ表示）
  高さ53px・6等分グリッド。z-index は 2（ドロワー200・モーダル250より下）
========================================== */

.sp-nav{display:none;}

@media (max-width:768px) {
  .sp-nav {position:fixed;bottom:0;left:0;z-index:var(--z-sp-nav);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;height:calc(var(--size-sp-nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background-color:var(--color-bg);border-top:0.5px solid var(--color-border-strong);}
  .sp-nav__item {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-fix-2);height:100%;color:var(--color-icon);}
  .sp-nav__item:hover {color:var(--color-icon);opacity:1;}
  .sp-nav__item:active {color:var(--color-icon-active);}
  .sp-nav__icon {font-size:var(--size-sp-nav-icon);}
  .sp-nav__label {font-size:var(--fz-nav);line-height:1.2;letter-spacing:0;white-space:nowrap;}
  .sp-nav__item.is-current {color:var(--color-primary);}
  /* 固定ナビとページ末尾・ページトップボタンが重ならないように逃がす */
  body {padding-bottom:calc(var(--size-sp-nav) + env(safe-area-inset-bottom));}
  .front-pagetop {bottom:calc(var(--size-sp-nav) + var(--space-m) + env(safe-area-inset-bottom));display: none;}
}

/* ==========================================
  A. SP Hidden Blocks（第2回改修／〜768px のみ非表示）
  ヘッダーの検索モーダルとドロワーで同じ導線に到達できるため、
  スマホでは重複するブロックを隠して縦の情報量を減らす。
  要素はPC用に残すので display:none で出し分ける
========================================== */

@media (max-width:768px) {
  .top-lead {display:none;}
  .front-nav {display:none;}
  .keyword_search--top {display:none;}
}

/* ==========================================
  C. Top CTA v2（第2回改修／会員募集ボックスの全面リデザイン）
  上辺のアクセント帯＋淡いピンクの地色でカード感を出し、
  コピーは「日本唯一」を大きく見せて強弱をつける。
  ボタンは 1:1 の2分割。母数の多い購入者を左（先）＋塗りで主役にする
========================================== */

.top-cta{margin-top: var(--space-s);}
.top-cta__box{position:relative;overflow:hidden;padding: var(--space-m) var(--space-fix-16) var(--space-m);background-color:var(--color-primary-pale);border:1px solid var(--color-primary-light-hover);border-radius:var(--radius-xl);box-shadow:var(--shadow-m);text-align:center;}
/* アクセントは上辺の帯で見せる（border-left のアクセントボックスは使わない方針のため） */
.top-cta__box::before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--size-cta-ribbon);/* background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary-dark) 100%); */}
.top-cta__title{font-size: var(--fz-base);font-weight:700;line-height: 1.15;text-align:center;color:var(--color-text);}
.top-cta__title i{margin-right:var(--space-2xs);font-size:1.1em;vertical-align:-0.08em;color:var(--color-primary);}
.top-cta__accent{font-size:1.15em;font-weight:900;color:var(--color-primary);letter-spacing:0.02em;}
.top-cta__emoji{margin-left:var(--space-2xs);font-size:0.9em;line-height:1;}
.top-cta__lead{margin-top:var(--space-xs);font-size:var(--fz-m);line-height:1.6;color:var(--color-text);}
.top-cta__lead strong{font-weight:700;color:var(--color-primary-dark);}
.top-cta__lead-strong{padding:0 2px;background:linear-gradient(transparent 62%,var(--color-primary-light-hover) 62%);}
.top-cta__action{display: flex;gap: var(--space-s);margin-top: var(--space-xs);text-align: center;flex-direction: row;}
.top-cta__btn{display:flex;min-width:0;min-height: 40px;padding:var(--space-xs) var(--space-2xs);border-radius:var(--radius-full);font-size:var(--fz-base);font-weight:700;line-height:1.3;white-space:nowrap;}
.top-cta__btn i{flex:none;font-size:var(--fz-xl);}
.top-cta__note{display:flex;align-items:center;justify-content:center;gap:var(--space-2xs);margin-top:var(--space-s);font-size:var(--fz-s);line-height:1.4;color:var(--color-text-sub);}
.top-cta__note i{flex:none;color:var(--color-success);}

@media (min-width:769px) {
  .top-cta {margin-top: var(--space-l);}
  .top-cta__box {padding: var(--space-m) var(--space-l) var(--space-m);box-shadow: none;text-align: center;}
  .top-cta__title {font-size:var(--fz-cta-title-pc);}
  .top-cta__lead {font-size:var(--fz-base);}
  .top-cta__btn {min-height:var(--size-cta-btn-pc);padding:var(--space-xs) var(--space-m);font-size:var(--fz-l);width: 60%;}
}

/* ==========================================
  F. Category Cards v2（第2回改修）
  F-1 見出しを共通コンポーネント（.c-title--section）に統一
  F-2 カードの縦paddingを詰める（68px → 56px前後）
  F-3 スマホは3列×2行＝6件で1ページ（JSの CATE_PER_PAGE と対）
  F-4 PCはカードの縦幅を約2倍（68px → 136px）
========================================== */

/* 3ブロックの見出し（商品カテゴリ／女性カテゴリ／年齢別）を同じ見え方に揃える。
   .cate-cards__head の中では見出しの下マージンが効くとナビとずれるため打ち消す */
.top-catelist__title{margin-bottom:var(--space-m);padding: var(--space-xs) 0 var(--space-s);border-left:none;border-bottom:1px solid var(--color-border);font-size:var(--fz-base);font-weight:700;color:var(--color-text);}
.cate-cards__head .c-title--section{margin-bottom:0;}

@media (max-width:768px) {
  /* 1ページ＝6件（3列×2行）。列数を変えるときは index.html の CATE_PER_PAGE も合わせる */
  .cate-cards__grid {grid-template-rows:repeat(2, minmax(var(--size-cate-card-sp), 1fr));grid-auto-columns:calc((100% - var(--space-fix-8) * 2) / 3);}
  .cate-cards__item:nth-child(4n+1),
  .cate-cards__item:nth-child(4n+2) {grid-row:2;}
  .cate-cards__item:nth-child(6n+1),
  .cate-cards__item:nth-child(6n+2),
  .cate-cards__item:nth-child(6n+3) {grid-row:1;}
  .cate-cards__item:nth-child(4n+1) {scroll-snap-align:none;}
  .cate-cards__item:nth-child(6n+1) {scroll-snap-align:start;}
  .cate-card {gap:var(--space-2xs);min-height:var(--size-cate-card-sp);padding:var(--space-fix-8) var(--space-s);}
  .cate-card__name {font-size:var(--fz-s);line-height:1.25;}
  .cate-card__count {font-size:var(--fz-2xs);}
  /* 3列だと右端のシェブロンが窮屈なのでSPでは省く（カード全体がリンクのため情報は落ちない） */
  .cate-card__arrow {display:none;}
}

@media (min-width:769px) {
  .top-catelist__title,
  .cate-cards__title--lv3 {font-size:var(--fz-l);}
  /* PCではカードが小さく見えるため縦幅を約2倍にし、中身を天地中央に置く。
     シェブロンは高さが伸びても右端で中央に留まるよう絶対配置にする */
  .cate-card {position:relative;justify-content:center;min-height: 65px;padding: var(--space-s) var(--space-m);text-align:center;}
  .cate-card__body {flex:0 1 auto;align-items:center;}
  .cate-card__name {font-size: var(--fz-m);}
  .cate-card__count {font-size:var(--fz-s);}
  .cate-card__arrow {position:absolute;top:50%;right:var(--space-m);transform:translateY(-50%);}
}

/* ==========================================
  ① Top Hero v3（第3回改修／PCのみ）
  PCはスライドの高さを 300px にし、幅は 312:175 の比率から比例で決める（≒535px）。
  3枚が収まらないときは折り返さず「中央1枚＋左右見切れ」のカルーセルに切り替える
  （JS 側で全スライドが収まるかを実測し、収まるときだけ .is-static を付ける）。
  スマホ側は一切変更しない
========================================== */

@media (min-width:769px) {
  .top-hero__carousel {overflow:hidden;}
  /* スライド幅は画像の実寸まかせにする（比率を崩さないため width は指定しない） */
  .top-hero__slide {width:auto;}
  .top-hero__img {width:auto;max-width:none;height:var(--size-hero-h-pc);aspect-ratio:312 / 175;object-fit:cover;border-radius:var(--radius-l);}
  /* 収まらないときはドットで送れるようにする。3枚とも収まるときは静止表示なので隠す */
  .top-hero__dots {display:flex;}
  .top-hero__carousel.is-static .top-hero__dots {display:none;}
}

/* ==========================================
  ②③ Top CTA v3（第3回改修／PCのみ）
  ② ボタン群をボックス幅の50%で中央揃え（2ボタンは1:1）
  ③ 縦を詰めて横長バナー化（高さ200px前後）＋左右幅をグローバルナビに揃える
     .front-nav は .c-container（max-width:1120px／padding-inline:22px）の中にあるため、
     同じ max-width と padding-inline を使えば左右のラインが揃う
  スマホ側は一切変更しない
========================================== */

@media (min-width:769px) {
  .top-cta {max-width:var(--width-content);margin-block:var(--space-m);padding-inline:var(--space-l);}
  .top-cta__box {padding: var(--space-s) var(--space-l);}
  .top-cta__title {font-size: var(--fz-cta-title);line-height:1.15;}
  /* PCでは折り返させない（1行に収める） */
  .top-cta__lead {margin-top:var(--space-2xs);font-size:var(--fz-l);line-height:1.4;white-space:nowrap;}
  .top-cta__action {width:var(--width-cta-action-pc);margin-top:var(--space-s);margin-inline:auto;justify-content:center;}
  .top-cta__btn {flex:1 1 0;width:auto;min-height:var(--size-cta-btn-banner);font-size:var(--fz-base);}
  .top-cta__note {margin-top:var(--space-xs);}
}

/* ==========================================
  ⑤ Top Campaign v3（第3回改修／PC・スマホとも対象）
  バナー3枚並び。PCは横3列、スマホは1列の縦積み。
  比率は .top-campaign__link 側の aspect-ratio で揃え、画像は object-fit:cover で流し込む
========================================== */

.top-campaign__list{display:grid;grid-template-columns:1fr;gap:var(--space-fix-12);}
/* 旧レイアウト（1枚全幅＋2枚横並び）の grid-column 指定を打ち消す */
.top-campaign__item{grid-column:auto;min-width:0;}
.top-campaign__link{display:block;overflow:hidden;aspect-ratio:365 / 185;border-radius:var(--radius-m);}
.top-campaign__item .top-campaign__img{width:100%;height:100%;border-radius:0;object-fit:cover;}

@media (min-width:769px) {
  .top-campaign__list {grid-template-columns:repeat(3, 1fr);gap:var(--space-fix-16);}
}

/* ==========================================
  ①② Top Hero v4（第4回改修）
  ① PCの表示領域（クリップ範囲）をグローバルナビと同じ箱にする。
     .front-nav は .c-container（max-width:1120px ／ 左右 padding 22px）の中にあるため、
     .top-hero に同じ max-width と padding-inline を与えれば左右のラインがピクセル単位で揃う。
  ② カルーセルはPC・スマホ共通。現在のスライドを中央に置き、隣のスライドは表示領域の端で切れる。
     クリップするのは .top-hero__viewport（トラックの親）だけ。
     ドット・矢印は .top-hero__carousel 直下に置くため切れない。
  スライド幅・gap はここ（CSS）で決め、JSは実測値から移動量を計算する
========================================== */

/* JS がクローン位置から実体位置へ戻すとき、この1フレームだけ transition を切る */
.top-hero__track.is-nomove{transition:none;}

/* 左右矢印はPCのみ。スマホはスワイプ＋ドットのままなので出さない */
.top-hero__arrow{display:none;position:absolute;z-index:var(--z-hero-arrow);align-items:center;justify-content:center;width:var(--size-hero-arrow);height:var(--size-hero-arrow);background-color:var(--color-overlay-white-strong);border-radius:var(--radius-full);box-shadow:var(--shadow-s);color:var(--color-icon);font-size:var(--fz-xl);transition:background-color var(--transition),color var(--transition);}
.top-hero__arrow:hover{background-color:var(--color-bg);color:var(--color-primary);opacity:1;}
.top-hero__arrow--prev{left:var(--space-s);}
.top-hero__arrow--next{right:var(--space-s);}

@media (min-width:769px) {
  /* ① ナビ（.c-container）と同じ箱にして左右のラインを揃える */
  /* margin-inline:auto を入れると stretch が効かなくなるため、width:100% を必ず併記する
     （これが無いと max-content（トラック全長）に引っ張られて max-width まで広がってしまう） */
  .top-hero {width:100%;max-width:var(--width-content);margin-inline:auto;padding-inline:var(--space-l);}
  /* 矢印・ドットを切らないよう、外枠側のクリップは外す */
  .top-hero__carousel {overflow:visible;}
  /* クリップするのはトラックの親だけ。ここの幅＝ナビの見た目幅になる */
  .top-hero__viewport {overflow:hidden;}
  .top-hero__track {gap:var(--size-hero-gap-pc);}
  /* 画像の高さ（300px）の中央に矢印を置く。ドットは画像の下に出るので巻き込まない */
  .top-hero__arrow {display:flex;top:calc(var(--size-hero-h-pc) / 2);transform:translateY(-50%);}
}