@charset "UTF-8";
/* =========================================================
   RSN Design System — rsn-base.css
   追加: 2026-03-04 / フォント修正: 2026-03-26
   ========================================================= */

/* --- Windows游ゴシック細字問題の対策 ---
   Windowsではfont-weight: normal時にRegular（細い）が使われるため、
   Medium以上を強制する @font-face を定義 --- */
@font-face {
  font-family: "YuGothicM";
  src: local("Yu Gothic Medium"), local("YuGothic-Medium");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "YuGothicM";
  src: local("Yu Gothic Bold"), local("YuGothic-Bold");
  font-weight: bold;
  font-display: swap;
}

/* ==========================================================
   1. デザイントークン（CSS変数）
   ========================================================== */
:root {
  /* --- プライマリ --- */
  --rsn-gold: #796447;
  --rsn-gold-hover: #685639;
  --rsn-gold-light: #9A8468;

  /* --- テキスト --- */
  --rsn-text: #000;
  --rsn-text-sub: #666;
  --rsn-text-muted: #999;
  --rsn-price-red: #DD0000;

  /* --- 背景 --- */
  --rsn-bg-white: #FFF;
  --rsn-bg-section: #F0F0F0;

  /* --- ヘッダー・フッター --- */
  --rsn-header-bg: #000;
  --rsn-nav-bg: #444;
  --rsn-nav-bg-dark: #444;
  --rsn-nav-hover: #666;
  --rsn-footer-bg: #333;

  /* --- ボーダー --- */
  --rsn-border: #DDD;
  --rsn-border-light: #EEE;

  --rsn-white: #FFF;
  --rsn-black: #000;
  --rsn-overlay: rgba(0, 0, 0, 0.6);

  /* --- XDカンプ追加色 --- */
  --rsn-gold-badge: #FEC94E;
  --rsn-price-row-campaign: #FFE8E8;
  --rsn-price-row-unused: #CFEAE7;
  --rsn-price-row-ref: #F0F0F0;
  --rsn-badge-dark: #333;

  /* --- フォント（XDカンプ: YuGothic Medium/Bold） --- */
  --rsn-font-base: "YuGothicM", "YuGothic", "Yu Gothic", "Helvetica Neue",
    -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", Meiryo, sans-serif;

  /* --- 明朝体（XDカンプ: YuMincho Extrabold — ブランド英名用） --- */
  --rsn-font-serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Serif JP", serif;

  /* --- フォントサイズ --- */
  --rsn-text-xs: 11px;
  --rsn-text-sm: 12px;
  --rsn-text-base: 14px;
  --rsn-text-md: 16px;
  --rsn-text-lg: 18px;
  --rsn-text-xl: 22px;
  --rsn-text-2xl: 26px;
  --rsn-text-3xl: 32px;

  /* --- フォントウェイト --- */
  --rsn-weight-normal: 400;
  --rsn-weight-medium: 500;
  --rsn-weight-bold: 700;

  /* --- スペーシング（px基準） --- */
  --rsn-space-xs: 4px;
  --rsn-space-sm: 8px;
  --rsn-space-md: 16px;
  --rsn-space-lg: 24px;
  --rsn-space-xl: 32px;
  --rsn-space-2xl: 48px;
  --rsn-space-3xl: 64px;
  --rsn-section-gap: 56px;
  --rsn-card-gap: 20px;

  /* --- 角丸 --- */
  --rsn-radius-sm: 4px;
  --rsn-radius-md: 8px;
  --rsn-radius-lg: 12px;
  --rsn-radius-xl: 24px;
  --rsn-radius-full: 9999px;

  /* --- シャドウ --- */
  --rsn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --rsn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --rsn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* --- トランジション --- */
  --rsn-transition: all 0.3s ease;

  /* --- ks01 ブリッジ（写真査定UIの色をRSNに統一） --- */
  --ks01-primary: var(--rsn-gold);
  --ks01-primary-light: var(--rsn-gold-light);
  --ks01-primary-dark: var(--rsn-gold-hover);
  --ks01-gradient-start: var(--rsn-gold);
  --ks01-gradient-end: var(--rsn-gold-light);
  --ks01-text-primary: var(--rsn-text);
  --ks01-bg-gradient: linear-gradient(180deg, #FFF 0%, var(--rsn-bg-section) 100%);
}


/* ==========================================================
   2. 表示制御ユーティリティ
   ========================================================== */
.rsn-u-pc-only {
  display: none !important;
}

.rsn-u-sp-only {
  display: block !important;
}

@media screen and (min-width: 641px) {
  .rsn-u-pc-only {
    display: block !important;
  }

  .rsn-u-sp-only {
    display: none !important;
  }
}

/* スクリーンリーダー専用（視覚的に非表示） */
.rsn-u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* ==========================================================
   3. レイアウト
   ========================================================== */
.rsn-l-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

@media screen and (min-width: 641px) {
  body.rsn-page {
    min-width: 1030px;
  }
  .rsn-l-container {
    width: 1030px;
    max-width: none;
    padding: 0;
  }
}

.rsn-l-section {
  padding: var(--rsn-section-gap) 0;
}

.rsn-l-section--gray {
  background: var(--rsn-bg-section);
}

/* --- グリッド（SP: 2列 / PC: 4/5列） --- */
.rsn-l-grid {
  display: grid;
  gap: var(--rsn-card-gap);
  grid-template-columns: repeat(2, 1fr);
}

@media screen and (min-width: 641px) {
  .rsn-l-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }

  .rsn-l-grid--5col {
    grid-template-columns: repeat(5, 1fr);
  }

  .rsn-l-grid--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================
   4. ボタン
   ========================================================== */
.rsn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rsn-space-sm);
  padding: 14px 24px;
  border-radius: var(--rsn-radius-xl);
  font-size: var(--rsn-text-base);
  font-weight: var(--rsn-weight-bold);
  font-family: var(--rsn-font-base);
  cursor: pointer;
  transition: var(--rsn-transition);
  text-decoration: none !important;
  border: none;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Primary（金色塗り） */
.rsn-btn--primary {
  background: var(--rsn-gold);
  color: var(--rsn-white);
}

.rsn-btn--primary:hover {
  background: var(--rsn-gold-hover);
  opacity: 1;
}

/* Secondary（白+金枠線） */
.rsn-btn--secondary {
  background: var(--rsn-white);
  color: var(--rsn-gold);
  border: 2px solid var(--rsn-gold);
}

.rsn-btn--secondary:hover {
  background: var(--rsn-gold);
  color: var(--rsn-white);
}

/* Outline（グレー枠線） */
.rsn-btn--outline {
  background: var(--rsn-white);
  color: var(--rsn-gold);
  border: 1px solid var(--rsn-gold);
}

.rsn-btn--outline:hover {
  background: var(--rsn-gold);
  color: var(--rsn-white);
}

/* 検索ボタン（黒） */
.rsn-btn--search {
  background: var(--rsn-black);
  color: var(--rsn-white);
  border-radius: 0;
  padding: 12px 20px;
}

.rsn-btn--search:hover {
  background: #333;
}

/* サイズ補正子 */
.rsn-btn--sm {
  padding: 8px 16px;
  font-size: var(--rsn-text-sm);
}

.rsn-btn--lg {
  padding: 18px 32px;
  font-size: var(--rsn-text-md);
}

/* アイコン */
.rsn-btn__icon {
  width: 20px;
  height: 20px;
}


/* ==========================================================
   5. セクション見出し
   ========================================================== */
.rsn-section-heading {
  text-align: center;
  margin-bottom: var(--rsn-space-xl);
}

.rsn-section-heading__title {
  font-size: var(--rsn-text-xl);
  font-weight: var(--rsn-weight-bold);
  color: var(--rsn-text);
  margin: 0 0 var(--rsn-space-xs);
  line-height: 1.4;
}

.rsn-section-heading__sub {
  font-size: var(--rsn-text-sm);
  color: var(--rsn-text-muted);
  letter-spacing: 0.1em;
  margin: 0;
}

@media screen and (min-width: 641px) {
  .rsn-section-heading__title {
    font-size: var(--rsn-text-2xl);
  }
}


/* ==========================================================
   6. 商品カード
   ========================================================== */
.rsn-product-card {
  position: relative;
  background: var(--rsn-bg-white);
  border: 1px solid var(--rsn-border-light);
  border-radius: var(--rsn-radius-md);
  overflow: hidden;
  transition: var(--rsn-transition);
}

.rsn-product-card:hover {
  box-shadow: var(--rsn-shadow-md);
}

.rsn-product-card__link {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-decoration: none !important;
  color: inherit;
}

/* ラベル */
.rsn-product-card__label {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--rsn-text-xs);
  font-weight: var(--rsn-weight-bold);
  color: var(--rsn-white);
  border-radius: var(--rsn-radius-sm);
  /* position: absolute; */
  top: var(--rsn-space-sm);
  left: var(--rsn-space-sm);
  z-index: 1;
}

.rsn-product-card__label--red {
  background: var(--rsn-price-red);
}

.rsn-product-card__label--gold {
  background: var(--rsn-gold);
}

/* 画像 */
.rsn-product-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  background: #F8F8F8;
}

.rsn-product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 情報 */
.rsn-product-card__body {
  padding: var(--rsn-space-sm) var(--rsn-space-md) var(--rsn-space-md);
}

.rsn-product-card__brand {
  font-size: var(--rsn-text-xs);
  color: var(--rsn-text-muted);
  letter-spacing: 0.05em;
  margin: 0 0 2px;
}

.rsn-product-card__name {
  font-size: var(--rsn-text-sm);
  font-weight: var(--rsn-weight-medium);
  color: var(--rsn-text);
  margin: 0 0 var(--rsn-space-xs);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 価格 */
.rsn-product-card__price {
  margin: 0;
}

.rsn-product-card__price-label {
  font-size: var(--rsn-text-xs);
  color: var(--rsn-text-sub);
  margin-right: 4px;
}

.rsn-product-card__price-value {
  font-size: var(--rsn-text-md);
  font-weight: var(--rsn-weight-bold);
  color: var(--rsn-price-red);
}

.rsn-product-card__ref-price {
  font-size: var(--rsn-text-xs);
  color: var(--rsn-text-muted);
  margin: 2px 0 0;
}

/* アクション */
.rsn-product-card__action {
  position: relative;
  z-index: 2;
  padding: 0 var(--rsn-space-md) var(--rsn-space-md);
}

/* バリエーション: mini（最近見たモデル用） */
.rsn-product-card--mini .rsn-product-card__image {
  aspect-ratio: auto;
  max-height: 120px;
}

.rsn-product-card--mini .rsn-product-card__body {
  padding: var(--rsn-space-xs) var(--rsn-space-sm);
}


/* ==========================================================
   7. 価格表示
   ========================================================== */
.rsn-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.rsn-price__label {
  font-size: var(--rsn-text-sm);
  color: var(--rsn-text-sub);
}

.rsn-price__value {
  font-weight: var(--rsn-weight-bold);
  color: var(--rsn-price-red);
}

/* 大サイズ（商品詳細） */
.rsn-price--lg .rsn-price__value {
  font-size: var(--rsn-text-3xl);
}

/* カード用 */
.rsn-price--card .rsn-price__value {
  font-size: var(--rsn-text-md);
}


/* ==========================================================
   8. パンくずリスト
   ========================================================== */
.rsn-breadcrumb {
  padding: var(--rsn-space-md) 0;
  font-size: var(--rsn-text-sm);
}

.rsn-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.rsn-breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin-left: 4px;
  color: var(--rsn-text-muted);
}

.rsn-breadcrumb__link {
  color: var(--rsn-text-sub) !important;
  text-decoration: none !important;
}

.rsn-breadcrumb__link:hover {
  text-decoration: underline !important;
}


/* ==========================================================
   9. フッター
   ========================================================== */
.rsn-footer {
  background: var(--rsn-footer-bg);
  color: var(--rsn-white);
  padding: var(--rsn-space-2xl) 0 var(--rsn-space-lg);
}

.rsn-footer a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
}

.rsn-footer a:hover {
  color: var(--rsn-white) !important;
}

/* ロゴ */
.rsn-footer__logo {
  margin-bottom: var(--rsn-space-lg);
}

.rsn-footer__logo img {
  height: 40px;
  width: auto;
}

/* SNS */
.rsn-footer__sns {
  list-style: none;
  display: flex;
  gap: var(--rsn-space-md);
  padding: 0;
  margin: 0 0 var(--rsn-space-xl);
}

.rsn-footer__sns img {
  width: 56px;
  height: 56px;
  opacity: 0.7;
  transition: var(--rsn-transition);
}

@media screen and (max-width: 640px) {
  .rsn-footer__top .rsn-footer__sns {
    gap: 0;
  }

  .rsn-footer__sns img {
    width: 46px;
    height: 46px;
  }
}

.rsn-footer__sns img:hover {
  opacity: 1;
}

/* ナビゲーション */
.rsn-footer__nav {
  display: grid;
  gap: var(--rsn-space-lg);
  margin-bottom: var(--rsn-space-xl);
}

@media screen and (min-width: 641px) {
  .rsn-footer__nav {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rsn-footer__nav-title {
  font-size: var(--rsn-text-base);
  font-weight: var(--rsn-weight-bold);
  margin: 0 0 var(--rsn-space-md);
  color: var(--rsn-white);
}

.rsn-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rsn-footer__nav li {
  margin-bottom: var(--rsn-space-sm);
}

.rsn-footer__nav li a {
  font-size: var(--rsn-text-sm);
}

/* 所在地・コピーライト */
.rsn-footer__info {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--rsn-space-lg);
  font-size: var(--rsn-text-xs);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}


/* ==========================================================
   10. SP追従バー（下部固定ボタン）
   ========================================================== */
.rsn-sp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  background: var(--rsn-white);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.rsn-sp-sticky-bar__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rsn-space-sm);
  padding: 12px 0;
  font-size: var(--rsn-text-sm);
  font-weight: var(--rsn-weight-bold);
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: var(--rsn-transition);
}

/* LINE査定（緑） */
.rsn-sp-sticky-bar__btn--line {
  background: #00B900;
  color: var(--rsn-white);
}

.rsn-sp-sticky-bar__btn--line:hover {
  background: #00A000;
}

/* 電話相談（黒） */
.rsn-sp-sticky-bar__btn--tel {
  background: var(--rsn-black);
  color: var(--rsn-white);
}

.rsn-sp-sticky-bar__btn--tel:hover {
  background: #333;
}

.rsn-sp-sticky-bar__btn-icon {
  width: 20px;
  height: 20px;
}

/* PCでは非表示 */
@media screen and (min-width: 641px) {
  .rsn-sp-sticky-bar {
    display: none;
  }
}

/* SP時にbodyの下方にpadding追加（追従バーにコンテンツが隠れないように） */
@media screen and (max-width: 640px) {
  body.rsn-page {
    padding-bottom: 52px;
  }
}


/* ==========================================================
   11. 店舗カード
   ========================================================== */
.rsn-shop-card {
  background: var(--rsn-bg-white);
  border-radius: var(--rsn-radius-md);
  overflow: hidden;
  box-shadow: var(--rsn-shadow-sm);
}

.rsn-shop-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.rsn-shop-card__body {
  padding: var(--rsn-space-md);
}

.rsn-shop-card__name {
  font-size: var(--rsn-text-md);
  font-weight: var(--rsn-weight-bold);
  margin: 0 0 var(--rsn-space-xs);
}

.rsn-shop-card__address,
.rsn-shop-card__hours {
  font-size: var(--rsn-text-sm);
  color: var(--rsn-text-sub);
  margin: 0 0 var(--rsn-space-xs);
  line-height: 1.6;
}

/* =========================================================
   END RSN Design System
   ========================================================= */