@charset "utf-8";
/* ============================================================
   crutch.jp UIリニューアル 共通スタイル
   2026-08-08 / デザインカンプ(mockup/)準拠
   参考サイト(YZ)実測値: 告知バー #0936D5 / ヘッダ #343434 / 画像比率5:6

   ※ 既存の style.css と衝突しないよう、クラス名はすべて `rn-` 始まり
   ※ EC-CUBE と WordPress の双方から読み込む共通ファイル
   ============================================================ */

:root{
  --rn-base:  #ffffff;
  --rn-ink:   #343434;   /* ヘッダ・バッジ・ボタン */
  --rn-text:  #1f1f1f;   /* 本文 */
  --rn-sub:   #767676;
  --rn-line:  #e2e2e2;
  --rn-wash:  #f6f6f6;
  --rn-blue:  #0936d5;   /* 告知バー */
  --rn-sale:  #c62e38;   /* %OFF・残りわずか */

  --rn-gap:   24px;
  --rn-pad:   50px;      /* 画面左右の余白(参考サイト実測) */

  --rn-f-en: "Helvetica Neue", Arial, sans-serif;
  --rn-f-jp: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", sans-serif;
}

/* ============================================================
   商品カード(一覧・関連・ランキング・NEW ARRIVAL で共通)
   ============================================================ */
.rn-card{display:block;position:relative;color:var(--rn-text);text-decoration:none}
.rn-card:hover{color:var(--rn-text);text-decoration:none}

.rn-card__media{
  position:relative;
  aspect-ratio:5/6;            /* 参考サイト実測 437:527 */
  background:var(--rn-wash);
  overflow:hidden;
}
.rn-card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  margin:0;                     /* 既存CSSのmarginを打ち消す */
  transition:opacity .4s ease;
}
.rn-card__img-sub{opacity:0}
.rn-card:hover .rn-card__img-sub{opacity:1}
.rn-card:hover .rn-card__img-main{opacity:0}
.rn-card--sold .rn-card__media img{opacity:.45}
.rn-card--sold:hover .rn-card__img-sub{opacity:0}

/* バッジ(画像左上に重ねる) */
.rn-badges{
  position:absolute;left:0;top:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.rn-badge{
  font-family:var(--rn-f-en);
  font-size:10px;font-weight:700;letter-spacing:.08em;
  line-height:1;padding:6px 9px;
  text-transform:uppercase;
}
.rn-badge--new{background:var(--rn-ink);color:#fff}
.rn-badge--reserve{background:var(--rn-ink);color:#fff}
.rn-badge--few{background:#fff;color:var(--rn-ink);box-shadow:inset 0 0 0 1px var(--rn-ink)}
.rn-badge--sold{background:#9a9a9a;color:#fff}
.rn-badge--off{background:var(--rn-sale);color:#fff}

.rn-card__body{padding:11px 2px 0}
.rn-card__brand{
  font-family:var(--rn-f-en);
  font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--rn-sub);
  margin:0;
}
.rn-card__name{
  margin:5px 0 0;font-size:12.5px;line-height:1.55;
  overflow-wrap:anywhere;                       /* 長い英数字の商品名で崩れないように */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rn-card__note{margin:4px 0 0;font-size:11px;color:var(--rn-sub)}
.rn-card__price{
  margin:6px 0 0;
  font-family:var(--rn-f-en);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  overflow-wrap:anywhere;
}
.rn-price-was{font-size:11.5px;font-weight:400;color:var(--rn-sub);text-decoration:line-through}
.rn-price-off{font-size:11.5px;font-weight:700;color:var(--rn-sale)}

/* ============================================================
   商品グリッド(画面幅いっぱい・PC4列)
   ============================================================ */
.rn-wrap{padding:0 var(--rn-pad)}

.rn-shelf{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));   /* minmax(0,…) は長い商品名対策 */
  gap:38px var(--rn-gap);
  list-style:none;margin:0;padding:0;
}
.rn-shelf.is-coarse{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px var(--rn-gap)}
.rn-shelf > li{margin:0;padding:0;list-style:none}

/* ============================================================
   セクション見出し
   ============================================================ */
.rn-sec{padding:60px 0}
.rn-sec--wash{background:var(--rn-wash)}
.rn-sec-head{text-align:center;margin-bottom:32px}
.rn-sec-head h2{
  font-family:var(--rn-f-en);
  font-size:26px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;margin:0;color:var(--rn-text);
}
.rn-sec-head .rn-jp{
  display:block;margin-top:8px;
  font-size:11px;letter-spacing:.16em;color:var(--rn-sub);
}

/* ============================================================
   ボタン
   ============================================================ */
.rn-btn-line{
  display:inline-block;
  font-family:var(--rn-f-en);font-size:12px;font-weight:600;letter-spacing:.14em;
  padding:14px 58px;border:1px solid var(--rn-ink);
  color:var(--rn-text);text-decoration:none;background:none;cursor:pointer;
  transition:background .2s,color .2s;
}
.rn-btn-line:hover{background:var(--rn-ink);color:#fff;text-decoration:none}
.rn-more{margin-top:40px;text-align:center}

/* ============================================================
   横スライド(ランキング・関連商品・お知らせ)
   PCは4枚+次が見切れ+矢印 / スマホはスワイプ
   ※ 縦ホイールを妨げないよう scroll-snap は使わない
   ============================================================ */
.rn-hscroll-wrap{position:relative}
.rn-hscroll{
  display:flex;gap:var(--rn-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:10px;margin:0;list-style:none;
  scrollbar-width:thin;scrollbar-color:#cfcfcf transparent;
}
.rn-hscroll::-webkit-scrollbar{height:6px}
.rn-hscroll::-webkit-scrollbar-thumb{background:#cfcfcf;border-radius:3px}
.rn-hscroll::-webkit-scrollbar-track{background:transparent}
.rn-hscroll > *{flex:0 0 calc((100% - var(--rn-gap) * 3) / 4)}

.rn-hs-arrow{
  position:absolute;top:43%;transform:translateY(-50%);z-index:4;
  width:56px;height:56px;background:rgba(255,255,255,.94);border:none;
  display:grid;place-items:center;font-size:19px;color:var(--rn-text);cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  transition:background .2s;
}
.rn-hs-arrow:hover{background:#fff}
.rn-hs-arrow[hidden]{display:none}
.rn-hs-arrow--prev{left:-14px}
.rn-hs-arrow--next{right:-14px}

/* 順位バッジ(ランキング) */
.rn-rank-no{
  position:absolute;left:0;top:0;z-index:3;
  width:30px;height:30px;display:grid;place-items:center;
  background:var(--rn-ink);color:#fff;
  font-family:var(--rn-f-en);font-size:13px;font-weight:700;
}
.rn-hscroll .rn-rank-no ~ .rn-badges{top:30px}
.rn-rank-1 .rn-rank-no{background:#b99000}
.rn-rank-2 .rn-rank-no{background:#8c8c8c}
.rn-rank-3 .rn-rank-no{background:#96632f}
.rn-note{margin-top:16px;text-align:center;font-size:11px;color:var(--rn-sub)}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width:1200px){
  :root{--rn-pad:24px}
}
@media screen and (max-width:1024px){
  :root{--rn-gap:16px;--rn-pad:20px}
  .rn-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px var(--rn-gap)}
  .rn-shelf.is-coarse{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rn-hscroll > *{flex-basis:calc((100% - var(--rn-gap) * 2) / 3)}
  .rn-hs-arrow{width:46px;height:46px;font-size:17px}
  .rn-hs-arrow--prev{left:-8px}
  .rn-hs-arrow--next{right:-8px}
  .rn-sec{padding:52px 0}
  .rn-sec-head h2{font-size:23px}
}
@media screen and (max-width:767px){
  :root{--rn-gap:12px;--rn-pad:12px}
  /* 参考サイトに合わせ、スマホも3列 */
  .rn-shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 6px}
  .rn-shelf.is-coarse{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px}
  .rn-card__brand{font-size:9px}
  .rn-card__name{font-size:10.5px;line-height:1.45}
  .rn-card__price{font-size:11.5px}
  .rn-badge{font-size:8px;padding:4px 5px;letter-spacing:.04em}
  .rn-hscroll > *{flex-basis:42%}          /* 次のカードが少し見切れる */
  .rn-hs-arrow{display:none}               /* スマホはスワイプ操作 */
  .rn-rank-no{width:26px;height:26px;font-size:12px}
  .rn-hscroll .rn-rank-no ~ .rn-badges{top:26px}
  .rn-sec{padding:40px 0}
  .rn-sec-head{margin-bottom:20px}
  .rn-sec-head h2{font-size:19px}
  .rn-sec-head .rn-jp{font-size:10px}
  .rn-more{margin-top:26px}
  .rn-btn-line{padding:13px 0;width:100%}
}

/* ============================================================
   パンくず
   ============================================================ */
.rn-crumbs{
  padding:20px var(--rn-pad);
  font-size:11px;color:var(--rn-sub);
}
.rn-crumbs a{color:var(--rn-sub);text-decoration:none}
.rn-crumbs a:hover{color:var(--rn-text);text-decoration:none}
.rn-crumbs .sep{margin:0 8px}

/* ============================================================
   一覧ツールバー(フィルター / 並べ替え / 表示切替)
   ============================================================ */
.rn-toolbar{
  border-top:1px solid var(--rn-line);
  display:flex;align-items:center;gap:0;
  padding:16px 0;margin-top:8px;
}
.rn-tool-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--rn-f-jp);font-size:13px;letter-spacing:.02em;
  padding:6px 2px;background:none;border:none;color:var(--rn-text);cursor:pointer;
}
.rn-tool-btn:hover{opacity:.6}
.rn-tool-btn svg{width:15px;height:15px;stroke:var(--rn-text);fill:none;stroke-width:1.4}
.rn-tool-sep{width:1px;height:20px;background:var(--rn-line);margin:0 24px}

.rn-toolbar-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.rn-tool-count{font-size:12px;color:var(--rn-sub)}
.rn-tool-count b{font-family:var(--rn-f-en);font-weight:700;color:var(--rn-text)}

/* 並べ替え(EC-CUBE標準の orderby を使う) */
.rn-sort{position:relative;display:inline-flex;align-items:center}
.rn-sort select{
  font-family:var(--rn-f-jp);font-size:13px;color:var(--rn-text);
  border:none;background:none;padding:6px 22px 6px 2px;
  appearance:none;cursor:pointer;outline:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231f1f1f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;background-size:10px;
}

/* 表示形式の切替 */
.rn-layouts{display:flex;gap:8px}
.rn-layout-btn{
  width:26px;height:26px;display:grid;gap:2px;padding:2px;border:none;background:none;cursor:pointer;
  grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  opacity:.32;transition:opacity .2s;
}
.rn-layout-btn i{background:var(--rn-text);display:block;border-radius:1px}
.rn-layout-btn.is-active{opacity:1}
.rn-layout-btn--coarse{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3px}

/* 無限スクロール */
.rn-loading{padding:44px 0;text-align:center;color:var(--rn-sub);font-size:12px;letter-spacing:.08em}
.rn-loading.is-done{color:#bbb}
.rn-spinner{
  width:22px;height:22px;margin:0 auto 12px;
  border:2px solid var(--rn-line);border-top-color:var(--rn-ink);border-radius:50%;
  animation:rn-spin .8s linear infinite;
}
@keyframes rn-spin{to{transform:rotate(360deg)}}
.rn-loading.is-done .rn-spinner{display:none}

@media screen and (max-width:767px){
  .rn-crumbs{padding:14px var(--rn-pad);font-size:10.5px}
  .rn-toolbar{padding:13px 0;margin-top:4px}
  .rn-tool-btn{font-size:12.5px;gap:7px}
  .rn-tool-sep{margin:0 14px}
  .rn-tool-count{display:none}
  .rn-toolbar-right{gap:10px}
  .rn-sort select{font-size:12.5px}
}

/* ============================================================
   告知バー(#0936D5)
   ※ 現在は静的。WordPress入力→JSON連携は後の工程(design.md §4-2)
   ============================================================ */
.rn-notice{
  /* ヘッダの内側(最上段)に置く。ヘッダごと画面上部に固定されるので、
     ページを開いた直後はもちろん、スクロール中も告知が見え続ける。
     body直下に置くと、テーマ側の overflow 指定で sticky が効かず流れてしまう。 */
  background:var(--rn-blue);color:#fff;
  min-height:50px;
  display:flex;align-items:center;justify-content:center;
  padding:8px 44px;position:relative;text-align:center;
  font-family:var(--rn-f-jp);
  font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.5;
}
.rn-notice a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rn-notice__close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:16px;line-height:1;opacity:.75;
  background:none;border:none;color:#fff;cursor:pointer;padding:4px;
}
.rn-notice__close:hover{opacity:1}

/* ============================================================
   ヘッダ(#343434・スクロール追従)
   PC: ロゴ左 → ナビ → MY PAGE/CART/検索 → ハンバーガー
   SP: ハンバーガー左 / ロゴ中央 / 検索・カート右
   ============================================================ */
.rn-header{
  position:sticky;top:0;z-index:90;
  background:var(--rn-ink);color:#fff;
  /* WPテーマ側が header 要素に margin:43px 0 45px を当てており、
     マージン相殺でヘッダ上に白い余白が出るため打ち消す */
  margin:0 !important;padding:0;
}
.rn-header *{box-sizing:border-box}
.rn-header h1{margin:0;font-size:inherit;line-height:1}
.rn-header__inner{
  max-width:1440px;margin:0 auto;padding:0 32px;
  height:97px;display:flex;align-items:center;gap:34px;
  box-sizing:border-box;
}
.rn-logo{order:1;flex-shrink:0;display:flex;align-items:center}
.rn-logo img{max-height:52px;width:auto;display:block;margin:0}
.rn-logo__text{
  font-family:var(--rn-f-en);font-size:30px;font-weight:800;letter-spacing:.08em;color:#fff;
}
.rn-gnav{order:2;display:flex;gap:28px;list-style:none;margin:0;padding:0}
.rn-gnav > li > a{
  font-family:var(--rn-f-en);font-size:12px;font-weight:600;letter-spacing:.1em;
  padding:24px 0;display:block;position:relative;color:#fff;text-decoration:none;
}
.rn-gnav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:18px;height:1px;background:#fff;
  transform:scaleX(0);transition:transform .25s;
}
.rn-gnav > li > a:hover::after{transform:scaleX(1)}

.rn-tools{order:3;margin-left:auto;display:flex;align-items:center;gap:22px}
.rn-tools > *{display:flex;align-items:center}
.rn-tool-text{
  font-family:var(--rn-f-en);font-size:11px;font-weight:600;letter-spacing:.1em;
  color:#fff;position:relative;text-decoration:none;
}
.rn-tool-text:hover{color:#fff;text-decoration:none}
.rn-mypage{order:1}
.rn-cart{order:2}
.rn-tools .rn-ico{order:3}
.rn-cart__badge{
  position:absolute;top:-8px;right:-12px;
  background:#fff;color:var(--rn-ink);
  font-family:var(--rn-f-en);font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;
  display:grid;place-items:center;padding:0 4px;line-height:1;
}
.rn-ico{width:22px;height:22px;display:grid;place-items:center;color:#fff;background:none;border:none;cursor:pointer;padding:0}
.rn-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5}

.rn-burger{order:4;width:26px;height:16px;position:relative;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0}
.rn-burger span{position:absolute;left:0;right:0;height:1.5px;background:#fff;transition:transform .3s,opacity .2s}
.rn-burger span:nth-child(1){top:0}
.rn-burger span:nth-child(2){top:7px}
.rn-burger span:nth-child(3){top:14px}

/* ============================================================
   ドロワーメニュー(左からスライドイン)
   ============================================================ */
.rn-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.rn-overlay.is-open{opacity:1;visibility:visible}
.rn-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:101;
  width:min(370px,86vw);background:#fff;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
}
.rn-drawer.is-open{transform:translateX(0);visibility:visible}
.rn-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 0}
.rn-drawer__logo{font-family:var(--rn-f-en);font-size:18px;font-weight:800;letter-spacing:.08em;color:var(--rn-text)}
.rn-drawer__close{font-size:22px;line-height:1;padding:4px;background:none;border:none;cursor:pointer;color:var(--rn-text)}
.rn-drawer__search{
  margin:18px 22px 0;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--rn-text);padding-bottom:9px;
}
.rn-drawer__search input{flex:1;border:none;outline:none;font-family:var(--rn-f-jp);font-size:13px;background:none}
.rn-drawer__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:22px 22px 0}
/* AUG / USW は自社ECを使っていないので、MY PAGE と CART の代わりに
   ONLINE STORE の1本だけを置く(→ inc/renewal.php rn_header_html) */
.rn-drawer__btns--single{grid-template-columns:minmax(0,1fr)}
.rn-drawer__btns a{
  border:1px solid var(--rn-text);padding:13px 8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--rn-f-en);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--rn-text);text-decoration:none;
}
.rn-acc{margin-top:26px;border-top:1px solid var(--rn-line);list-style:none;padding:0}
.rn-acc > li{border-bottom:1px solid var(--rn-line)}
.rn-acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;font-size:13px;text-align:left;
  background:none;border:none;cursor:pointer;color:var(--rn-text);font-family:var(--rn-f-jp);
  text-decoration:none;
}
.rn-acc__plus{position:relative;width:13px;height:13px;flex-shrink:0}
.rn-acc__plus::before,.rn-acc__plus::after{content:"";position:absolute;background:var(--rn-text);transition:transform .25s}
.rn-acc__plus::before{left:0;right:0;top:6px;height:1px}
.rn-acc__plus::after{top:0;bottom:0;left:6px;width:1px}
.rn-acc__head[aria-expanded="true"] .rn-acc__plus::after{transform:rotate(90deg)}
.rn-acc__body{display:none;padding:0 22px 14px}
.rn-acc__body.is-open{display:block}
.rn-acc__body a{display:block;padding:9px 0 9px 14px;font-size:13px;color:var(--rn-sub);text-decoration:none}
.rn-acc__body a:hover{color:var(--rn-text)}
.rn-drawer__links{padding:24px 22px 40px}
.rn-drawer__links a{display:block;padding:8px 0;font-size:12.5px;color:var(--rn-text);text-decoration:none}

/* ============================================================
   フッタ(4カラム)
   ============================================================ */
.rn-footer{border-top:1px solid var(--rn-line);background:#fff;color:var(--rn-text);margin:0 !important;padding:0}
.rn-footer__cols{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.6fr);
}
.rn-fcol{padding:44px 32px}
.rn-fcol + .rn-fcol{border-left:1px solid var(--rn-line)}
.rn-fcol h3{
  font-family:var(--rn-f-en);font-size:17px;font-weight:700;letter-spacing:.06em;
  margin:0 0 20px;color:var(--rn-text);
}
.rn-fcol ul{list-style:none;margin:0;padding:0}
.rn-fcol li a{display:block;padding:5px 0;font-size:12.5px;color:var(--rn-text);text-decoration:none}
.rn-fcol li a:hover{opacity:.6}
.rn-sns{display:flex;gap:18px;align-items:flex-start}
.rn-sns a{width:26px;height:26px;display:grid;place-items:center}
.rn-sns svg{width:22px;height:22px;stroke:var(--rn-text);fill:none;stroke-width:1.5}
.rn-nl__note{font-size:12px;margin:0 0 18px;line-height:1.6}
.rn-nl__form{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rn-text);padding-bottom:8px}
.rn-nl__form input{flex:1;border:none;outline:none;background:none;font-family:var(--rn-f-jp);font-size:13px}
.rn-nl__form button{
  width:34px;height:26px;background:var(--rn-sale);color:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;font-size:13px;flex-shrink:0;
}
.rn-nl__sub{margin-top:12px;font-size:11px;color:var(--rn-sub)}
.rn-nl__sub a{color:var(--rn-sub);text-decoration:underline;text-underline-offset:2px}
.rn-footer__bottom{
  border-top:1px solid var(--rn-line);max-width:1440px;margin:0 auto;padding:22px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.rn-legal{display:flex;gap:26px;flex-wrap:wrap;font-size:11.5px;margin:0;padding:0;list-style:none}
.rn-legal a{color:var(--rn-text);text-decoration:none}
.rn-legal a:hover{opacity:.6}
.rn-copy{font-family:var(--rn-f-en);font-size:11px;letter-spacing:.04em;color:var(--rn-sub);margin:0}

@media screen and (max-width:1200px){
  .rn-header__inner{padding:0 24px;gap:24px;height:88px}
  .rn-gnav{gap:20px}
  .rn-fcol{padding:38px 24px}
  .rn-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rn-fcol:nth-child(3){border-left:none}
  .rn-fcol:nth-child(3),.rn-fcol:nth-child(4){border-top:1px solid var(--rn-line)}
  .rn-footer__bottom{padding:20px 24px}
}
@media screen and (max-width:1024px){
  .rn-header__inner{padding:0 20px;height:76px}
  .rn-gnav{display:none}
  .rn-tools{gap:18px}
  .rn-notice{min-height:44px}
  .rn-fcol{padding:32px 20px}
}
@media screen and (max-width:767px){
  .rn-notice{min-height:40px;font-size:11px;padding:9px 38px;letter-spacing:0}
  .rn-notice__close{right:10px}
  /* SP: 左=ハンバーガー / 中央=ロゴ / 右=検索・カート */
  .rn-header__inner{
    padding:0 14px;gap:0;height:56px;
    display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  }
  .rn-header__inner > *{grid-row:1;order:0;align-self:center}
  .rn-burger{grid-column:1;justify-self:start;width:24px;height:15px}
  .rn-burger span:nth-child(2){top:6.5px}
  .rn-burger span:nth-child(3){top:13px}
  .rn-logo{grid-column:2;justify-self:center}
  .rn-logo img{max-height:32px}
  .rn-logo__text{font-size:19px}
  .rn-tools{grid-column:3;justify-self:end;margin-left:0;gap:14px}
  .rn-mypage{display:none}
  .rn-tools .rn-ico{order:1}
  .rn-cart{order:2;font-size:10.5px}
  .rn-cart__badge{top:-7px;right:-10px;min-width:14px;height:14px;font-size:8.5px}
  .rn-footer__cols{grid-template-columns:1fr}
  .rn-fcol{padding:28px 14px}
  .rn-fcol + .rn-fcol{border-left:none;border-top:1px solid var(--rn-line)}
  .rn-fcol h3{font-size:15px;margin-bottom:14px}
  .rn-footer__bottom{padding:18px 14px;flex-direction:column;align-items:flex-start;gap:12px}
  .rn-legal{gap:16px;font-size:11px}
}

/* ============================================================
   既存テーマ(style.css)の打ち消し
   リニューアルしたヘッダ・フッタを使うページで、
   既存レイアウトの余白やリスト装飾が効いてしまうのを止める
   ============================================================ */

/* ヘッダ: 上下に大きな余白(margin:43px 0 45px)が入っているため除去 */
.rn-header-host .ec-layoutRole__header{margin:0 !important;padding:0 !important}
.rn-header-host .ec-layoutRole__header > *{margin:0}

/* フッタ: リストが flex で横並びになるのを縦1列に戻す */
.rn-footer ul{display:block !important;margin:0;padding:0;list-style:none}
.rn-footer li{width:auto !important;display:list-item !important;float:none !important;margin:0;padding:0}
.rn-footer li::before,.rn-footer li::after{content:none}
.rn-fcol li a{display:block;padding:5px 0}

/* フッタ下段は横並び(左:規約リンク / 右:著作権表示) */
.rn-footer__bottom{display:flex !important;flex-direction:row}
.rn-legal{display:flex !important;flex-direction:row;gap:26px}
.rn-legal li{display:inline-block !important}
.rn-legal li a{padding:0}
@media screen and (max-width:767px){
  .rn-footer__bottom{flex-direction:column !important}
  .rn-legal{gap:16px}
}

/* ============================================================
   ニュースレター(PostCarrier)の見た目をカンプに合わせる
   ============================================================ */
.rn-fcol #postcarrier_mailmaga h3{display:none}          /* 「メルマガ会員登録」見出しは不要 */
.rn-fcol #postcarrier_mailmaga > div{margin:0}
.rn-fcol #postcarrier_mailmaga p{margin:0}
.rn-nl__row{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--rn-text);padding-bottom:8px}
.rn-nl__row input[type=email],
.rn-nl__row input[type=text]{
  flex:1;border:none;outline:none;background:none;box-shadow:none;
  font-family:var(--rn-f-jp);font-size:13px;padding:0;height:auto;
}
.rn-nl__submit{
  width:34px;height:26px;background:var(--rn-sale);color:#fff;border:none;cursor:pointer;
  display:grid;place-items:center;font-size:13px;flex-shrink:0;padding:0;border-radius:0;
}
.rn-nl__submit:hover{opacity:.85}
.rn-nl__links{margin-top:12px;font-size:11px;color:var(--rn-sub)}
.rn-nl__links button{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--rn-f-jp);font-size:11px;color:var(--rn-sub);
  text-decoration:underline;text-underline-offset:2px;
}
.rn-nl__links a{color:var(--rn-sub);text-decoration:underline;text-underline-offset:2px}
.rn-nl__links .sep{margin:0 8px}

/* 既存CSSの text-align:center を打ち消し、カンプ同様すべて左寄せにする */
.rn-footer,
.rn-footer .rn-fcol,
.rn-footer .rn-fcol h3,
.rn-footer .rn-fcol ul,
.rn-footer .rn-fcol li,
.rn-footer .rn-fcol li a,
.rn-footer .rn-nl__note,
.rn-footer .rn-nl__links,
.rn-footer__bottom{text-align:left !important}
.rn-footer .rn-sns{justify-content:flex-start}

/* 下段: 規約リンクの間隔を確保(既存の p/ul 余白を打ち消す) */
.rn-footer__bottom{align-items:center;justify-content:space-between}
.rn-legal{margin:0;padding:0}
.rn-legal li{margin:0 !important}
.rn-legal li + li{margin-left:26px !important}
.rn-copy{margin:0;text-align:right !important}
@media screen and (max-width:767px){
  .rn-legal li + li{margin-left:16px !important}
  .rn-copy{text-align:left !important}
}

/* ヘッダの高さをカンプ(97px)に合わせる。ロゴが大きいと押し広げてしまうため上限を決める */
.rn-header__inner{max-height:97px}
.rn-logo{max-height:56px;overflow:hidden}
.rn-logo img{max-height:56px}
@media screen and (max-width:1024px){
  .rn-header__inner{max-height:76px}
  .rn-logo,.rn-logo img{max-height:44px}
}
@media screen and (max-width:767px){
  .rn-header__inner{max-height:56px}
  .rn-logo,.rn-logo img{max-height:32px}
}

/* ロゴの**横幅**の上限。
   USW(490×28)のような横長のロゴは高さを抑えても横に長いままで、
   スマホではヘッダをはみ出して見切れてしまう(2026-08-20 クライアント指摘)。
   高さと横幅の両方を上限にして、収まる側に合わせて縮める。 */
.rn-logo{min-width:0;max-width:100%}
.rn-logo img{max-width:100%;width:auto;height:auto;object-fit:contain}
@media screen and (max-width:767px){
  /* SPは3列グリッド。中央の列が中身の幅で広がらないようにする */
  .rn-header__inner{grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr)}
  .rn-logo{max-width:58vw}
}

/* ヘッダ直下のバナー領域(PayPay等)との間隔
   ※ PC・タブレットのみ。スマホは現状の詰まった余白のままにする

   商品一覧は「お知らせ」ブロックが .ec-layoutRole__contentTop に入るが、
   商品詳細はレイアウト構成が違い .ec-layoutRole__header の中に入る。
   そのため詳細は黒帯(.rn-header)の下に余白を置く。
   `.rn-header{margin:0 !important}` を上書きする必要があるので !important 付き。
   body の id で詳細ページだけに限定している(一覧は contentTop 側で余白を取るため二重にしない)。 */
@media screen and (min-width:768px){
  .rn-header-host .ec-layoutRole__contentTop{margin-top:32px}
  #page_product_detail.rn-header-host .ec-layoutRole__header > .rn-header{margin-bottom:32px !important}
}

/* ============================================================
   フィルターパネル
   ============================================================ */
.rn-filter{display:none;border-top:1px solid var(--rn-line);padding:26px 0 6px}
.rn-filter.is-open{display:block}
.rn-filter__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 40px}
.rn-fgroup h4{
  font-family:var(--rn-f-en);font-size:11px;font-weight:700;letter-spacing:.12em;
  margin:0 0 13px;text-transform:uppercase;color:var(--rn-text);
}
.rn-chips{display:flex;flex-wrap:wrap;gap:7px}
.rn-chip{
  border:1px solid var(--rn-line);background:#fff;color:var(--rn-text);
  padding:8px 13px;font-size:12px;line-height:1.2;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--rn-f-jp);
  transition:border-color .15s,background .15s,color .15s;
}
.rn-chip:hover{border-color:var(--rn-ink)}
.rn-chip[aria-pressed="true"]{background:var(--rn-ink);color:#fff;border-color:var(--rn-ink)}
.rn-chip .sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex-shrink:0}
.rn-filter__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding:16px 0;border-top:1px solid var(--rn-line);flex-wrap:wrap;
}
.rn-filter__clear{
  font-size:12.5px;border:none;background:none;cursor:pointer;color:var(--rn-text);
  border-bottom:1px solid var(--rn-text);padding:0 0 1px;font-family:var(--rn-f-jp);
}
.rn-filter__apply{
  background:var(--rn-ink);color:#fff;border:none;cursor:pointer;
  padding:13px 40px;font-family:var(--rn-f-en);font-size:12px;font-weight:700;letter-spacing:.12em;
}
.rn-filter__apply:hover{opacity:.85}

/* 適用中の条件タグ */
.rn-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 18px}
.rn-tags:empty{padding:0}
.rn-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rn-wash);padding:7px 12px;font-size:12px;color:var(--rn-text);
}
.rn-tag a{font-size:14px;line-height:1;opacity:.55;text-decoration:none;color:var(--rn-text)}
.rn-tag a:hover{opacity:1}

@media screen and (max-width:1200px){
  .rn-filter__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (max-width:1024px){
  .rn-filter__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
}
@media screen and (max-width:767px){
  .rn-filter{padding:20px 0 4px}
  .rn-filter__grid{grid-template-columns:1fr;gap:22px}
  .rn-filter__foot{margin-top:18px}
  .rn-filter__apply{flex:1;text-align:center;padding:14px 20px}
}

/* ============================================================
   商品詳細ページ
   PC: サムネ縦列(追従) + 大判画像を縦積み + 右に情報(追従)
   SP: 大判は横カルーセル、サムネも横スクロール
   ============================================================ */
.rn-detail{
  display:grid;
  /* 大判画像と右カラムの比は 1.35 : 1。
     画面いっぱいだと大判画像が大きくなりすぎるので全体を1600pxで止めて中央に置く
     (これで大判画像は従来の約7割、右の情報カラムはその分広くなる) */
  grid-template-columns:84px minmax(0,1.35fr) minmax(380px,1fr);
  gap:0 46px;
  padding:12px 0 72px;
  align-items:start;
  max-width:1600px;
  margin-inline:auto;
}

/* サムネ縦列
   ------------------------------------------------------------
   ※ top はヘッダの高さ(97px)を見込んで calc(97px + 22px) にしていたが、
     **EC-CUBEのページではヘッダは画面に固定されない**。
     .rn-header の親が <header class="ec-layoutRole__header"> で、
     sticky は親の箱の中でしか効かないため、親ごと上へ流れていく。
     そのぶんサムネ列だけが画面上部から119px下がって止まり、
     スクロールすると上に大きな余白ができていた(2026-08-20 クライアント指摘)。
     ヘッダは残らないので、画面上部からの余白だけを見込む。 */
.rn-thumbs{
  position:sticky;top:22px;
  display:flex;flex-direction:column;gap:8px;
  max-height:calc(100vh - 44px);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d5d5d5 transparent;
  margin:0;padding:0;list-style:none;
}
.rn-thumbs::-webkit-scrollbar{width:4px}
.rn-thumbs::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:2px}
.rn-thumb{
  aspect-ratio:3/4;background:var(--rn-wash);overflow:hidden;
  border:1px solid transparent;cursor:pointer;flex-shrink:0;padding:0;
}
.rn-thumb img{width:100%;height:100%;object-fit:cover;margin:0;display:block}
.rn-thumb[aria-selected="true"]{border-color:var(--rn-ink)}

/* 大判画像(縦積み) */
.rn-stack{display:flex;flex-direction:column;gap:10px;position:relative;margin:0;padding:0;list-style:none}
.rn-stack figure{margin:0;background:var(--rn-wash);position:relative}
.rn-stack img{width:100%;height:auto;display:block;margin:0}

/* 右カラム
   ※ sticky にすると、右カラムが画面より高いときに下部(Details)が読めず、
      左の画像スクロールが終わるまで待たされてしまう。
      左右が一緒にスクロールする通常フローにしている */
.rn-info{position:static}
.rn-info__brand{font-family:var(--rn-f-en);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--rn-sub);margin:0}
.rn-info__name{margin:9px 0 0;font-size:21px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.rn-info__note{margin:8px 0 0;font-size:12px;color:var(--rn-sub)}
.rn-info__price{
  margin:16px 0 0;font-family:var(--rn-f-en);font-size:24px;font-weight:700;letter-spacing:.02em;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.rn-info__price .tax{font-family:var(--rn-f-jp);font-size:11px;font-weight:400;color:var(--rn-sub)}
.rn-info__badges{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.rn-ship{
  margin-top:22px;border:1px solid var(--rn-line);padding:15px 17px;
  font-size:12px;line-height:1.9;color:var(--rn-text);
}

/* 規格選択(EC-CUBEのselectを隠してボタンUIに置き換える) */
.rn-variant{margin-top:26px}
.rn-variant__label{
  font-family:var(--rn-f-en);font-size:11px;font-weight:700;letter-spacing:.1em;
  display:flex;align-items:center;gap:10px;margin:0 0 10px;
}
.rn-variant__picked{font-family:var(--rn-f-jp);font-size:12px;font-weight:400;color:var(--rn-sub);letter-spacing:0}
.rn-opts{display:flex;flex-wrap:wrap;gap:7px}
.rn-opt{
  min-width:64px;padding:11px 15px;
  border:1px solid var(--rn-line);background:#fff;color:var(--rn-text);
  font-size:12.5px;line-height:1.2;text-align:center;cursor:pointer;
  font-family:var(--rn-f-jp);
  transition:border-color .15s,background .15s,color .15s;
}
.rn-opt:hover:not(:disabled){border-color:var(--rn-ink)}
.rn-opt[aria-pressed="true"]{background:var(--rn-ink);color:#fff;border-color:var(--rn-ink)}
.rn-opt:disabled{color:#bdbdbd;background:#fafafa;cursor:not-allowed;text-decoration:line-through}

/* 在庫表示 */
.rn-stockline{margin-top:18px;font-size:12.5px;display:flex;align-items:center;gap:8px;min-height:20px}
.rn-stockline .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rn-stockline--ok   .dot{background:#2e7d32}
.rn-stockline--few  .dot{background:var(--rn-sale)}
.rn-stockline--none .dot{background:#9a9a9a}
.rn-stockline--few{color:var(--rn-sale);font-weight:700}
.rn-stockline--none{color:var(--rn-sub)}

/* 数量 + カート */
.rn-cart-row{margin-top:18px;display:flex;align-items:center;gap:14px}
.rn-qty{display:flex;align-items:center;border:1px solid var(--rn-line)}
.rn-qty button{width:38px;height:44px;font-size:16px;line-height:1;background:none;border:none;cursor:pointer;color:var(--rn-text)}
.rn-qty input{width:46px;height:44px;border:none;text-align:center;font-family:var(--rn-f-en);font-size:14px;font-weight:600;outline:none;background:none;padding:0;box-shadow:none}
.rn-btn-cart{
  flex:1;height:56px;background:var(--rn-ink);color:#fff;border:none;cursor:pointer;
  font-family:var(--rn-f-en);font-size:13px;font-weight:700;letter-spacing:.14em;
  transition:opacity .2s;
}
.rn-btn-cart:hover{opacity:.84}
.rn-btn-cart:disabled{background:#c9c9c9;cursor:not-allowed}
.rn-btn-fav{
  width:56px;height:56px;border:1px solid var(--rn-line);background:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:17px;color:var(--rn-text);
}
.rn-btn-fav:hover{border-color:var(--rn-ink)}
.rn-btn-fav:disabled{color:#c9c9c9;cursor:not-allowed}

.rn-links{margin-top:16px;display:flex;flex-wrap:wrap;gap:20px}
.rn-link-u{
  font-size:12.5px;display:inline-flex;align-items:center;gap:7px;
  border:none;background:none;cursor:pointer;color:var(--rn-text);padding:0 0 2px;
  border-bottom:1px solid var(--rn-text);font-family:var(--rn-f-jp);text-decoration:none;
}
.rn-link-u:hover{opacity:.6}

/* SNSシェア */
.rn-share{margin-top:26px;padding-top:22px;border-top:1px solid var(--rn-line);display:flex;align-items:center;gap:14px}
.rn-share span.lbl{font-family:var(--rn-f-en);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--rn-sub)}
.rn-share a,.rn-share button{
  /* flex-shrink:0 が無いと、横に何か足したときにボタンだけ潰れて
     縦長の楕円になる(2026-08-20 実際に起きた) */
  width:34px;height:34px;flex:0 0 34px;
  border:1px solid var(--rn-line);border-radius:50%;background:#fff;cursor:pointer;
  display:grid;place-items:center;font-size:12px;font-family:var(--rn-f-en);font-weight:700;
  color:var(--rn-text);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.rn-share a:hover,.rn-share button:hover{background:var(--rn-ink);color:#fff;border-color:var(--rn-ink)}

/* Details(右カラム内) */
.rn-desc{margin-top:40px;padding-top:30px;border-top:1px solid var(--rn-line)}
.rn-desc > h3{font-family:var(--rn-f-en);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.rn-desc__lead{font-size:13.5px;line-height:1.95;white-space:pre-line;color:var(--rn-text);margin:0}
.rn-spec{width:100%;margin-top:26px;border-top:1px solid var(--rn-line);border-collapse:collapse}
.rn-spec th,.rn-spec td{border-bottom:1px solid var(--rn-line);padding:14px 10px;font-size:13px;text-align:left;vertical-align:top}
.rn-spec th{width:112px;font-weight:700;color:var(--rn-sub);font-size:12px;letter-spacing:.04em}
.rn-spec td{overflow-wrap:anywhere}
.rn-notes{margin-top:26px;border-top:1px solid var(--rn-line)}
.rn-notes details{border-bottom:1px solid var(--rn-line)}
.rn-notes summary{
  padding:16px 4px;font-size:13px;font-weight:700;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rn-notes summary::-webkit-details-marker{display:none}
.rn-notes summary::after{content:"+";font-family:var(--rn-f-en);font-size:17px;font-weight:400;color:var(--rn-sub)}
.rn-notes details[open] summary::after{content:"–"}
.rn-notes .body{padding:0 4px 18px;font-size:12.5px;line-height:2;color:var(--rn-sub);white-space:pre-line}

/* サイズ表モーダル */
.rn-modal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.rn-modal.is-open{opacity:1;visibility:visible}
.rn-modal__box{background:#fff;width:min(680px,100%);max-height:86vh;overflow-y:auto;padding:30px 32px 34px;position:relative}
.rn-modal__box h3{font-family:var(--rn-f-en);font-size:19px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}
.rn-modal__sub{font-size:11.5px;color:var(--rn-sub);margin:0 0 20px}
.rn-modal__close{position:absolute;right:16px;top:14px;font-size:22px;line-height:1;padding:5px;background:none;border:none;cursor:pointer;color:var(--rn-text)}
.rn-sizetable{width:100%;border-collapse:collapse;font-size:13px}
.rn-sizetable th,.rn-sizetable td{border:1px solid var(--rn-line);padding:11px 8px;text-align:center}
.rn-sizetable thead th{background:var(--rn-wash);font-weight:700;font-size:12px}
.rn-sizetable tbody th{background:#fafafa;font-weight:700;text-align:left;white-space:nowrap}
.rn-modal__note{margin-top:14px;font-size:11px;color:var(--rn-sub);line-height:1.8}

@media screen and (max-width:1024px){
  .rn-detail{grid-template-columns:1fr;gap:16px;padding-bottom:52px}
  .rn-thumbs{
    position:static;flex-direction:row;max-height:none;
    overflow-x:auto;overflow-y:hidden;padding-bottom:6px;order:2;
  }
  .rn-thumbs::-webkit-scrollbar{height:4px}
  .rn-thumb{flex:0 0 66px}
  .rn-stack{
    order:1;flex-direction:row;gap:8px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .rn-stack::-webkit-scrollbar{display:none}
  .rn-stack figure{flex:0 0 100%;scroll-snap-align:center}
  .rn-stack img{aspect-ratio:3/4;object-fit:cover}
  .rn-info{position:static;order:3}
  .rn-info__name{font-size:19px}
}
@media screen and (max-width:767px){
  .rn-detail{gap:14px;padding:4px 0 40px}
  .rn-thumb{flex:0 0 58px}
  .rn-stack{gap:6px}
  .rn-info__name{font-size:17px}
  .rn-info__price{font-size:21px;margin-top:12px}
  .rn-variant{margin-top:20px}
  .rn-opt{min-width:56px;padding:10px 12px;font-size:12px}
  .rn-btn-cart{height:52px;font-size:12px}
  .rn-btn-fav{width:52px;height:52px}
  .rn-desc__lead{font-size:13px}
  .rn-spec th{width:96px;font-size:11.5px}
  .rn-spec th,.rn-spec td{padding:12px 6px;font-size:12.5px}
  .rn-modal__box{padding:24px 16px 26px}
  .rn-sizetable{font-size:12px}
  .rn-sizetable th,.rn-sizetable td{padding:9px 4px}
}

/* ============================================================
   ブランドトップ: ヒーロースライダー
   参考サイト実測: スライド幅は画面の60%、中央配置で左右が見切れる
   ============================================================ */
.rn-hero{position:relative;background:#000;overflow:hidden}
.rn-hero__track{display:flex;gap:0;will-change:transform;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.rn-hero__track.no-anim{transition:none}
.rn-hero__slide{
  flex:0 0 60%;aspect-ratio:3/2;position:relative;background:#111;user-select:none;
}
.rn-hero__slide > video,.rn-hero__slide > img{
  width:100%;height:100%;object-fit:cover;margin:0;display:block;pointer-events:none;
}
.rn-hero__arrow{
  position:absolute;top:50%;z-index:3;
  width:56px;height:56px;background:rgba(255,255,255,.92);border:none;cursor:pointer;
  display:grid;place-items:center;font-size:19px;color:var(--rn-text);
  transition:background .2s;
}
.rn-hero__arrow:hover{background:#fff}
.rn-hero__arrow--prev{left:10%;transform:translate(-50%,-50%)}
.rn-hero__arrow--next{right:10%;transform:translate(50%,-50%)}

/* ブランドトップのカテゴリ導線(3列グリッド) */
.rn-catnav{padding:40px 0 4px}
.rn-catnav ul{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;
  max-width:1200px;margin:0 auto;list-style:none;padding:0;
}
.rn-catnav li{margin:0}
.rn-catnav a{
  display:grid;place-items:center;min-height:42px;padding:9px 12px;
  border:1px solid var(--rn-line);border-radius:4px;
  font-family:var(--rn-f-en);font-size:12px;font-weight:600;letter-spacing:.1em;
  color:var(--rn-text);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.rn-catnav a:hover{background:var(--rn-ink);color:#fff;border-color:var(--rn-ink);text-decoration:none}
/* AUG / USW は外部モールへの1本だけ。3列グリッドの左端に寄ると寂しいので中央に置く */
.rn-catnav--single ul{grid-template-columns:minmax(0,360px);justify-content:center}

/* お知らせカード(ブランドトップ) */
.rn-news-card{display:block}
.rn-news-thumb{
  position:relative;aspect-ratio:1/1;overflow:hidden;background:#111;
  display:grid;place-items:center;text-align:center;padding:18px;
}
.rn-news-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.rn-ec-inner{position:relative;z-index:1;color:#fff;line-height:1.35}
.rn-ec-label{
  display:block;font-family:var(--rn-f-en);font-size:11px;font-weight:600;
  letter-spacing:.34em;opacity:.85;margin-bottom:14px;
}
.rn-ec-title{display:block;font-size:20px;font-weight:700;letter-spacing:.04em}
.rn-news-meta{margin-top:13px;display:flex;align-items:center;gap:10px}
.rn-news-date{font-family:var(--rn-f-en);font-size:11px;font-weight:600;color:var(--rn-sub)}
.rn-news-cat{
  font-family:var(--rn-f-en);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--rn-line);padding:3px 8px;color:var(--rn-sub);
}
.rn-news-title{margin:8px 0 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}

@media screen and (max-width:1024px){
  .rn-hero__slide{flex-basis:80%}
  .rn-hero__arrow{width:46px;height:46px;font-size:17px}
  .rn-hero__arrow--prev{left:5%}
  .rn-hero__arrow--next{right:5%}
}
@media screen and (max-width:767px){
  .rn-hero__slide{flex-basis:100%}
  .rn-hero__arrow{width:38px;height:38px;font-size:15px}
  .rn-hero__arrow--prev{left:0;transform:translate(0,-50%)}
  .rn-hero__arrow--next{right:0;transform:translate(0,-50%)}
  .rn-catnav{padding:26px 0 0}
  .rn-catnav a{min-height:38px;font-size:10.5px;letter-spacing:.06em;padding:8px 4px}
  .rn-ec-title{font-size:15px}
  .rn-news-title{font-size:11.5px}
}

/* ブランドトップ: COLLECTION / CONCEPT バナー */
.rn-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rn-gap)}
/* COLLECTIONページが無いブランドはCONCEPT1枚だけ。半分で余らせず横いっぱいに使う */
.rn-banners--single{grid-template-columns:1fr}
.rn-banners--single .rn-banner{aspect-ratio:16/5}
.rn-banner{position:relative;aspect-ratio:16/7;overflow:hidden;background:#111;display:block}
.rn-banner img{width:100%;height:100%;object-fit:cover;margin:0;transition:transform .6s ease;opacity:.82}
.rn-banner:hover img{transform:scale(1.05)}
.rn-banner__label{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.rn-banner__label .en{
  font-family:var(--rn-f-en);font-size:20px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.rn-banner__label .jp{display:block;margin-top:5px;font-size:11px;letter-spacing:.12em}
.rn-banner-single{margin:0;text-align:center}
.rn-banner-single img{max-width:100%;height:auto;margin:0 auto;display:block}

@media screen and (max-width:767px){
  .rn-banners{grid-template-columns:1fr}
  .rn-banner{aspect-ratio:16/8}
  .rn-banner__label .en{font-size:16px}
}

/* ============================================================
   お知らせ記事ページ(WordPress single-rn.php / カンプ galfy-news.html)
   ============================================================ */
.rn-article{max-width:820px;margin:0 auto;padding:8px 0 76px}

.rn-article__head{text-align:center;padding:14px 0 34px;border-bottom:1px solid var(--rn-line)}
.rn-article__meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.rn-article__meta .d{font-family:var(--rn-f-en);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--rn-sub)}
.rn-article__meta .c{
  font-family:var(--rn-f-en);font-size:10px;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--rn-text);padding:4px 11px;
}
.rn-article__head h1{
  font-size:27px;font-weight:700;line-height:1.55;letter-spacing:.02em;
  margin:0;overflow-wrap:anywhere;
}

/* アイキャッチ。未設定のときは黒地のプレースホルダ(お知らせカードと同じ見た目) */
.rn-article__hero{
  margin:34px 0 40px;aspect-ratio:16/9;background:#111;overflow:hidden;
  display:grid;place-items:center;text-align:center;color:#fff;
}
.rn-article__hero img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.rn-article__hero .rn-ec-label{font-size:12px;letter-spacing:.36em}
.rn-article__hero .rn-ec-title{font-size:34px;padding:0 24px}
.rn-article__hero .rn-ec-brand{
  display:block;margin-top:14px;font-family:var(--rn-f-en);
  font-size:11px;font-weight:700;letter-spacing:.2em;
}

/* 本文は WordPress の投稿本文をそのまま流し込むので、素の要素にスタイルを当てる */
.rn-article__body{font-size:14.5px;line-height:2.05;color:var(--rn-text)}
.rn-article__body p{margin:0 0 1.7em}
.rn-article__body h2{
  font-size:18px;font-weight:700;margin:2.6em 0 1em;padding-left:13px;
  border-left:3px solid var(--rn-ink);line-height:1.5;
}
.rn-article__body h3{font-size:16px;font-weight:700;margin:2.2em 0 .9em;line-height:1.6}
.rn-article__body ul,.rn-article__body ol{margin:0 0 1.7em;padding-left:2px;list-style:none}
.rn-article__body li{position:relative;padding-left:20px;margin-bottom:.7em}
.rn-article__body li::before{
  content:"";position:absolute;left:4px;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--rn-ink);
}
.rn-article__body img{max-width:100%;height:auto;display:block;margin:0 auto 1.7em}
.rn-article__body a{text-decoration:underline}
.rn-article__body .lead{font-size:15.5px;font-weight:500}
.rn-article__body blockquote{
  margin:0 0 1.7em;padding:18px 20px;background:var(--rn-wash);
  font-size:13.5px;line-height:1.95;color:var(--rn-sub);
}

.rn-article__foot{
  margin-top:48px;padding-top:26px;border-top:1px solid var(--rn-line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.rn-article__share{display:flex;align-items:center;gap:12px}
.rn-article__share span{font-family:var(--rn-f-en);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--rn-sub)}
.rn-article__share a{
  width:34px;height:34px;border:1px solid var(--rn-line);border-radius:50%;
  display:grid;place-items:center;font-family:var(--rn-f-en);font-size:12px;font-weight:700;
  text-decoration:none;color:var(--rn-text);
}
.rn-article__share a:hover{background:var(--rn-ink);color:#fff;border-color:var(--rn-ink)}

@media screen and (max-width:767px){
  .rn-article{padding:4px 0 46px}
  .rn-article__head{padding:10px 0 22px}
  .rn-article__head h1{font-size:19px}
  .rn-article__hero{margin:22px 0 26px;aspect-ratio:4/3}
  .rn-article__hero .rn-ec-title{font-size:22px}
  .rn-article__body{font-size:13.5px;line-height:1.95}
  .rn-article__body h2{font-size:16px;margin:2.2em 0 .9em}
  .rn-article__foot{flex-direction:column;align-items:flex-start;gap:20px}
}

/* ============================================================
   ページトップのバナーカルーセル
   ------------------------------------------------------------
   PC3枚 / タブレット2枚 / スマホ1枚。最大10枚を横にスライドする。
   スライドの幅は %(1/3・1/2・1/1)で決め、間隔は gap ではなく
   スライド内側の padding で取る。gap があると
   「スライド幅 = ビューポート幅 ÷ 表示枚数」が崩れ、
   JS側のピクセル計算とずれるため。
   ============================================================ */
.rn-topbnr{background:#fff;padding:14px 0 10px}
.rn-topbnr__wrap{
  position:relative;max-width:1440px;margin:0 auto;padding:0 32px;
  box-sizing:border-box;
}
.rn-topbnr__viewport{overflow:hidden}
.rn-topbnr__track{
  display:flex;align-items:center;
  transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform;
}
.rn-topbnr__track.no-anim{transition:none}
.rn-topbnr__slide{
  flex:0 0 33.3333%;box-sizing:border-box;padding:0 6px;
  display:block;text-decoration:none;
}
.rn-topbnr__slide img{
  width:100%;height:auto;display:block;margin:0;
  transition:opacity .2s;
}
a.rn-topbnr__slide:hover img{opacity:.82}

/* 矢印。表示枚数以下でループしないときは出さない(.is-static) */
.rn-topbnr__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;border:none;border-radius:50%;
  background:rgba(255,255,255,.9);box-shadow:0 1px 6px rgba(0,0,0,.18);
  color:#1f1f1f;font-size:15px;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.rn-topbnr__arrow:hover{background:#fff}
.rn-topbnr__arrow--prev{left:6px}
.rn-topbnr__arrow--next{right:6px}
.rn-topbnr.is-static .rn-topbnr__arrow,
.rn-topbnr.is-static .rn-topbnr__dots{display:none}

.rn-topbnr__dots{display:flex;justify-content:center;gap:7px;margin-top:9px}
.rn-topbnr__dot{
  width:6px;height:6px;padding:0;border:none;border-radius:50%;
  background:#cfcfcf;cursor:pointer;transition:background .2s,transform .2s;
}
.rn-topbnr__dot.is-current{background:var(--rn-ink);transform:scale(1.25)}

@media screen and (max-width:1024px){
  .rn-topbnr__slide{flex-basis:50%}
  .rn-topbnr__wrap{padding:0 20px}
}
@media screen and (max-width:767px){
  .rn-topbnr{padding:10px 0 8px}
  .rn-topbnr__slide{flex-basis:100%;padding:0 4px}
  .rn-topbnr__wrap{padding:0 12px}
  .rn-topbnr__arrow{width:26px;height:26px;font-size:13px}
  .rn-topbnr__arrow--prev{left:0}
  .rn-topbnr__arrow--next{right:0}
}

/* EC-CUBE: 旧「お知らせ」ブロック(PayPayバナーを直書きしている領域)は、
   トップバナーを登録したブランドのページでは二重になるので隠す。
   バナーの登録を外せばそのまま元に戻る。

   商品一覧では contentTop がヘッダの「次の兄弟」に入る。
   商品詳細はレイアウト構成が違い、contentTop の器が無く
   ブロックの中身(<center>…)がヘッダ内にそのまま並ぶので、別に指定する。

   ※ あくまで表示上の重なりを避けるための処置。
     本来はEC-CUBE管理画面の「お知らせ」ブロックから
     バナーのHTMLを消すのが筋(ただしEC-CUBEのDBは本番と共用なので、
     公開のタイミングに合わせて行うこと)。 */
.ec-layoutRole__header:has(.rn-topbnr) + .ec-layoutRole__contentTop{display:none}
.rn-topbnr ~ .ec-layoutRole__contentTop{display:none}
.ec-layoutRole__header > .rn-topbnr ~ center{display:none}

/* ============================================================
   GALFY限定: 犬の足跡カーソル + 残像
   ------------------------------------------------------------
   html に .rn-paw が付いたページだけ有効(GALFYのページのみ付ける)。

   ★ カーソル本体は「HTML要素」として描いている。
     OSに描かせる cursor:url(...) だと、macOSの「ポインタのサイズ」設定や
     ディスプレイの解像度によってOS側が勝手に拡大するため、
     残像と大きさが揃わない(2026-08-20 実機で約2.2倍になっていた)。
     HTML要素にすれば残像とまったく同じ画像・同じサイズになる。

   ・.rn-paw-cursor … カーソル本体(renewal.js がマウスに追従させる)
   ・.rn-paw-dot    … 残像。一定距離動くたびに1つ置いて薄くなりながら消える
   タッチ端末では出さない。残像はアニメーション抑制の設定でも出さない。
   ============================================================ */

/* JSが動いていないときの保険。OSのカーソルを画像に差し替えるだけの従来方式。
   .rn-paw-js は renewal.js が本体を作れたときにだけ付くので、
   JSが動かない環境ではこちらが残り、カーソルが消えることはない。 */
html.rn-paw, html.rn-paw *{
  cursor:url("/store/html/template/default/assets/img/rn_paw_cursor.png?v=20260820b") 12 12, auto;
}
/* 入力欄は文字位置が分からなくなるので通常のカーソルに戻す */
html.rn-paw input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html.rn-paw textarea{cursor:text}

/* JSが本体を描いているときは、OSのカーソルを消す */
html.rn-paw-js, html.rn-paw-js *{cursor:none}
html.rn-paw-js input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
html.rn-paw-js textarea{cursor:text}
/* iframe(メルマガ登録フォーム等)の中はこちらの制御が効かないので、通常のカーソルに戻す */
html.rn-paw-js iframe{cursor:auto}

/* 本体と残像は同じ指定から作る。**大きさを変えるときはこの1か所だけ直すこと** */
.rn-paw-cursor,
.rn-paw-dot{
  position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  background:url("/store/html/template/default/assets/img/rn_paw_trail.png?v=20260820") center/contain no-repeat;
  /* 写真の上でも埋もれないように、うっすら影を落とす */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  pointer-events:none;
}
.rn-paw-cursor{z-index:9999;opacity:0}
.rn-paw-cursor.is-on{opacity:1}
.rn-paw-dot{z-index:9998;animation:rn-paw-fade .85s ease-out forwards}

@keyframes rn-paw-fade{
  from{opacity:.72}
  to{opacity:0}
}

@media (hover:none),(pointer:coarse){
  html.rn-paw, html.rn-paw *,
  html.rn-paw-js, html.rn-paw-js *{cursor:auto}
  .rn-paw-cursor, .rn-paw-dot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rn-paw-dot{display:none}
}


/* ============================================================
   COLLECTION 一覧(2026-08-20)
   ------------------------------------------------------------
   /our-brand/{slug}/collection/ に、配下の季節ページを並べる。
   HTMLは inc/renewal.php の rn_collection_index_html()。
   ============================================================ */
.rn-collist{
  list-style:none;margin:0;padding:0;
  /* 商品一覧(.rn-shelf)と同じ4列。3列だと画面幅いっぱいで1枚が大きくなりすぎる */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--rn-gap);
}
.rn-collist__item a{display:block;text-decoration:none;color:inherit}
.rn-collist__img{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:3/4;background:var(--rn-wash);
}
.rn-collist__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.rn-collist__item a:hover .rn-collist__img img{transform:scale(1.04)}
.rn-collist__name{
  display:block;margin-top:14px;text-align:center;
  font-family:var(--rn-f-en);font-size:13px;font-weight:600;letter-spacing:.12em;
}
@media screen and (max-width:1024px){
  .rn-collist{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px var(--rn-gap)}
}
@media screen and (max-width:767px){
  .rn-collist{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 8px}
  .rn-collist__name{margin-top:10px;font-size:11.5px}
}

/* ============================================================
   ブランド下層ページ(CONCEPT / COLLECTION)の上余白
   ------------------------------------------------------------
   本文が黒帯ヘッダーにくっついて窮屈に見えるため、上に余白を入れる
   (2026-08-20 クライアント指摘)。

   #contents はサイト全体で共通のIDなので、**必ず body のクラスで絞る**こと。
   ・rn-scope   … リニューアル対象のページ
   ・rn-subpage … ブランドトップ以外(トップは独自に余白を持っているため除く)
   クラスは inc/renewal.php の rn_body_class() が付ける。
   ============================================================ */
body.rn-scope.rn-subpage #contents{padding-top:56px}
body.rn-scope.rn-subpage #contents > h2:first-child{margin-top:0}
@media screen and (max-width:1024px){
  body.rn-scope.rn-subpage #contents{padding-top:40px}
}
@media screen and (max-width:767px){
  body.rn-scope.rn-subpage #contents{padding-top:28px}
}