/* ============================================================
   アドパスショップ 共通スタイル
   デザインシステム：デザインシステム集/アドパスショップ_DESIGN.md
   配色：コーラル × クリーム × やわらかブルー（承認モック準拠）
   ============================================================ */

:root{
  /* メイン */
  --coral:#e8604c;       /* CTA・強調・バッジ */
  --coral-dark:#d54e3a;  /* ホバー・リンク */
  --coral-pale:#f8c9b8;  /* 装飾の丸・波 */
  /* ベース */
  --cream:#fdf4e8;       /* ページ基調背景 */
  --white:#ffffff;
  /* 補助（図版・アイコン） */
  --blue:#7fb3e3;        /* アイコン・イラスト主色 */
  --blue-deep:#5b8fc9;   /* 図版の濃い側 */
  --blue-pale:#dcebfa;   /* 波背景・図版の面 */
  --navy:#333f4d;        /* 見出し・本文 */
  /* 機能色 */
  --line-green:#06c755;  /* LINEボタン専用 */
  /* ベース補助 */
  --line:#efe3d3;        /* ボーダー */
  --text:#333f4d;
  --text-sub:#6b7683;
  /* 効果 */
  --shadow:0 8px 24px rgba(51,63,77,.08);
  --shadow-lg:0 16px 40px rgba(51,63,77,.14);
  --radius:16px;
  --radius-pill:999px;
  /* 幅 */
  --content-w:1080px;
}

/* ---------- リセット ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--text);
  background:var(--cream);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--coral-dark); text-decoration:none; }
a:hover{ opacity:.85; }
ul{ list-style:none; }

.container{ max-width:var(--content-w); margin:0 auto; padding:0 20px; }

/* ---------- ヘッダー ---------- */
.site-header{
  background:var(--white);
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(51,63,77,.06);
}
.header-inner{
  /* ナビ7項目＋LINEボタンを1行に収めるため、本文(1080px)より広い専用幅 */
  max-width:1240px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.logo{
  font-size:22px; font-weight:800; color:var(--coral); letter-spacing:.04em;
  display:flex; align-items:center;
}
.logo img{ height:36px; width:auto; }
.logo span{ font-size:11px; font-weight:600; color:var(--text-sub); display:block; line-height:1.2; letter-spacing:.06em; }
.gnav{ display:flex; align-items:center; gap:18px; }
.gnav a{ color:var(--navy); font-size:14px; font-weight:600; white-space:nowrap; }
.gnav a:hover{ color:var(--coral); opacity:1; }

/* ---------- ヘッダーのドロップダウン（サービス／会社情報） ---------- */
.gnav-item{ position:relative; display:flex; align-items:center; height:64px; }
.gnav-parent{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--navy);
  display:flex; align-items:center; gap:4px; white-space:nowrap;
}
.gnav-parent:hover{ color:var(--coral); }
.gnav-parent .caret{ font-size:10px; }
.sub-menu{
  display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:var(--white); border-radius:14px;
  box-shadow:0 14px 36px rgba(51,63,77,.18);
  padding:10px 0; min-width:240px; z-index:120;
}
.sub-menu a{ display:block; padding:11px 22px; font-size:13.5px; }
.sub-menu a:hover{ background:var(--cream); }
.gnav-item.open .sub-menu{ display:block; }
@media (min-width: 1141px){
  .gnav-item:hover .sub-menu, .gnav-item:focus-within .sub-menu{ display:block; }
}

/* LINEボタン（共通） */
.btn-line{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--line-green); color:#fff !important;
  font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0;
  padding:10px 20px; border-radius:var(--radius-pill);
  box-shadow:0 4px 12px rgba(6,199,85,.3);
  transition:transform .2s, box-shadow .2s;
}
.btn-line:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(6,199,85,.4); opacity:1; }
.btn-line .line-icon{
  width:22px; height:22px; object-fit:contain;
  background:#fff; border-radius:50%; padding:1px;
}

/* ハンバーガー（スマホ） */
.menu-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; position:relative;
}
.menu-toggle span{
  display:block; width:24px; height:3px; background:var(--navy);
  border-radius:2px; margin:5px auto; transition:.3s;
}

/* ---------- ボタン ---------- */
.btn-coral{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--coral); color:#fff !important;
  font-weight:700; font-size:17px;
  padding:16px 38px; border-radius:var(--radius-pill);
  box-shadow:0 6px 18px rgba(232,96,76,.35);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-coral:hover{ transform:translateY(-2px); background:var(--coral-dark); box-shadow:0 10px 24px rgba(232,96,76,.45); opacity:1; }
.btn-coral .arrow{ font-weight:800; }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--white); font-weight:700; font-size:14px;
  padding:12px 26px; border-radius:var(--radius-pill);
  transition:transform .2s, box-shadow .2s;
}
.btn-outline:hover{ transform:translateY(-2px); box-shadow:var(--shadow); opacity:1; }
.btn-outline.blue{ border:2px solid var(--blue-deep); color:var(--blue-deep) !important; }
.btn-outline.coral{ border:2px solid var(--coral); color:var(--coral) !important; }

/* ---------- セクション共通 ---------- */
.section{ padding:72px 0; }
.section-title{
  text-align:center; font-size:30px; font-weight:800; color:var(--navy);
  letter-spacing:.06em; margin-bottom:8px;
}
/* 見出し下の3点ドット飾り */
.title-dots{
  display:flex; justify-content:center; gap:8px; margin:10px 0 44px;
}
.title-dots i{
  width:8px; height:8px; border-radius:50%; display:block;
}
.title-dots i:nth-child(1){ background:var(--coral); }
.title-dots i:nth-child(2){ background:var(--blue); }
.title-dots i:nth-child(3){ background:var(--coral-pale); }

/* ---------- ヒーロー ---------- */
.hero{
  position:relative;
  /* ヘッダー直下から画像を始めるため上下の余白なし */
  padding:0;
  background:var(--cream);
}
/* SEO用の非表示見出し */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ヒーローバナー（PC/スマホの生成画像1枚で構成。パスにゃん・吹き出し・キャッチコピー込み）を
   画面横幅いっぱいに表示するシンプルな構成（バッジ・ボタン・浮遊アイコンの重ね配置は、
   狭い画面幅で崩れるため撤去し画像のみにしている） */
.hero-banner-wrap{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  overflow:hidden; /* 登場時のわずかな拡大が横スクロールを生まないように */
}
.hero-banner{
  display:block; width:100%; height:auto;
  /* 登場演出：下からふわっと浮き上がりつつ、わずかなズームが等倍に落ち着く。
     opacity等はキーフレーム内でのみ指定しているため、reduced-motion環境では
     アニメーション無効＝即座に通常表示になり安全 */
  animation:heroEntrance 1.1s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroEntrance{
  from{ opacity:0; transform:translateY(28px) scale(1.04); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.hero-banner-mobile{ display:none; }

/* ---------- 実績バー ---------- */
/* ヒーロー画像の下端にわずかに重なる程度に引き上げ（重なりすぎると画像の商品・キャラが隠れる） */
.stats{ margin-top:-36px; position:relative; z-index:6; }
.stats-card{
  background:var(--white); border-radius:20px; box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr 1fr;
  padding:28px 20px;
}
.stat{
  display:flex; align-items:center; justify-content:center; gap:14px;
  border-right:1px solid var(--line);
}
.stat:last-child{ border-right:none; }
.stat .icon{ width:48px; height:48px; object-fit:contain; }
.stat .label{ font-size:13px; font-weight:600; color:var(--text-sub); line-height:1.4; }
.stat .value{ font-size:15px; font-weight:800; color:var(--navy); line-height:1.3; }
.stat .value em{ font-style:normal; font-size:30px; color:var(--coral); }

/* ---------- サービスカード ---------- */
.service-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
.service-card{
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:34px 30px;
  position:relative;
  display:flex; flex-direction:column; gap:18px;
  transition:transform .25s, box-shadow .25s;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.badge-new{
  position:absolute; top:-22px; right:-16px;
  background:var(--coral); color:#fff;
  width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800; letter-spacing:.05em;
  box-shadow:0 8px 18px rgba(232,96,76,.4);
  transform:rotate(8deg);
}
/* ロゴと見出しを横並び（モック準拠） */
.service-head{ display:flex; align-items:center; gap:18px; min-height:56px; }
.service-logo{ height:32px; width:auto; object-fit:contain; flex-shrink:0; }
.service-logo.mercari{ height:56px; }
.service-card h3{ font-size:21px; font-weight:800; line-height:1.4; white-space:nowrap; }
.service-card.amazon h3{ color:var(--blue-deep); }
.service-card.mercari h3{ color:var(--coral); }
.service-desc{ font-size:14px; color:var(--text-sub); }
/* 図版（左）とチェックリスト（右）を横並び（モック準拠） */
.service-body{ display:flex; gap:18px; align-items:center; }
.service-figure{
  background:var(--blue-pale); border-radius:12px;
  flex:0 0 44%; height:190px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.service-card.mercari .service-figure{ background:#fde4dc; }
.service-figure img{ width:86%; height:auto; max-height:92%; object-fit:contain; }
.service-body .checklist{ flex:1; }
.checklist li{
  position:relative; padding-left:28px; font-size:13.5px; font-weight:600;
  margin-bottom:10px;
}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:20px; height:20px; border-radius:50%;
  font-size:12px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.service-card.amazon .checklist li::before{ background:var(--blue-deep); }
.service-card.mercari .checklist li::before{ background:var(--coral); }
.service-card .btn-outline{ margin-top:auto; }
.service-note{
  font-size:12.5px; font-weight:700; color:var(--coral-dark);
  background:var(--cream); border-radius:8px; padding:8px 12px;
}

/* ---------- 選ばれる理由 ---------- */
.reason-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:22px; }
.reason-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:48px 26px 42px; text-align:center;
  transition:transform .25s, box-shadow .25s;
}
.reason-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.reason-card .figure{
  height:210px; display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; position:relative;
}
.reason-card .figure img{ height:100%; width:auto; object-fit:contain; }
.reason-card h3{ font-size:19px; font-weight:800; color:var(--coral); margin-bottom:10px; }
.reason-card p{ font-size:14px; color:var(--text-sub); text-align:left; }

/* ---------- 不要品買取CTAバナー ---------- */
.junk-cta{
  /* 薄いオレンジ一色だと弱いため、濃いめの背景＋コーラルの太い点線枠で目立たせる */
  background:#fbd8c9; border-radius:var(--radius);
  border:3px dashed var(--coral);
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:28px 34px; box-shadow:var(--shadow);
}
.junk-cta img{ height:88px; width:auto; flex:none; }
.junk-cta-body{ flex:1; min-width:240px; }
.junk-cta-body h3{ font-size:19px; font-weight:800; color:var(--coral); margin-bottom:6px; }
.junk-cta-body p{ font-size:13.5px; color:var(--text); }
.junk-cta .btn-coral{ flex:none; }

/* ---------- こんな商品売れてます ---------- */
.sold-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:20px;
}
.sold-card{
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 16px 18px;
  transition:transform .25s, box-shadow .25s;
}
.sold-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.sold-photo{
  height:150px; border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:44px; margin-bottom:12px;
  background:#f4f1ec;
}
.sold-photo img{ width:100%; height:100%; object-fit:cover; }
.sold-genre{
  display:inline-block; font-size:11px; font-weight:800; color:var(--coral);
  background:var(--coral-pale); border-radius:var(--radius-pill);
  padding:3px 12px; margin-bottom:8px;
}
.sold-name{ font-size:13px; font-weight:700; color:var(--navy); line-height:1.5; min-height:40px; }
.sold-price{ font-size:20px; font-weight:800; color:var(--coral); margin-top:4px; }
.sold-price span{ font-size:11px; font-weight:600; color:var(--text-sub); }
.sold-note{
  text-align:center; font-size:14px; color:var(--text-sub);
  margin-top:32px; line-height:2;
}

/* ---------- 利用者の声（手動スライド：矢印ボタン＋ドラッグ／スワイプ対応） ---------- */
.voice-slider{
  display:flex; align-items:center; gap:14px;
}
.voice-arrow{
  flex:0 0 44px; width:44px; height:44px; border-radius:50%;
  background:var(--white); box-shadow:var(--shadow); border:none; cursor:pointer;
  font-size:22px; font-weight:800; color:var(--coral);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
}
.voice-arrow:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.voice-arrow:active{ transform:translateY(0) scale(.96); }
.voice-track-wrap{
  overflow-x:auto; overflow-y:hidden; flex:1; min-width:0;
  scroll-behavior:smooth; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  scrollbar-width:none;
}
.voice-track-wrap::-webkit-scrollbar{ display:none; }
.voice-track-wrap.dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.voice-track{
  display:flex; gap:22px; width:max-content; padding:4px 2px;
}
.voice-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 26px;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
  width:340px; flex:0 0 340px;
  scroll-snap-align:start;
}
/* 引用符の飾り */
.voice-card::before{
  content:"“"; position:absolute; top:2px; left:18px;
  font-size:56px; font-weight:800; color:var(--coral-pale);
  line-height:1; font-family:Georgia, serif;
}
.voice-avatar{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  background:var(--cream); box-shadow:var(--shadow);
}
.voice-quote{ font-size:13.8px; line-height:1.9; color:var(--text); padding-top:6px; min-height:150px; }
.voice-person{
  font-size:12.5px; font-weight:700; color:var(--text-sub);
  border-top:1px solid var(--line); padding-top:12px;
}

/* ---------- LINE相談帯 ---------- */
.line-band{
  background:var(--white);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; gap:24px;
  padding:18px 32px; flex-wrap:wrap;
}
.line-band p{ font-size:16px; font-weight:700; color:var(--navy); }
.line-band p strong{ color:var(--line-green); }
.line-band .band-illust{ height:82px; width:auto; }

/* ---------- フッター ---------- */
.site-footer{
  position:relative; margin-top:80px; min-height:360px;
  /* 生成画像の背景（空・雲・波・街並み込み）。木/車/建物のイラストは画像内に統合済み */
  /* coverで隙間なく敷き詰めつつ、position:bottomで木・建物・車のイラストがある下端を必ず見せる */
  /* 下端の帯（許可番号＋コピーライト、計約70px）に木・建物・車のイラストが隠れないよう、
     背景画像を帯の高さぶん上にずらして配置する。帯の背後は下地色（--blue-pale）が見える */
  background:url(img/footer-bg.png) center bottom 70px / cover no-repeat, var(--blue-pale);
  padding:90px 0 0;
}
/* フッター上の波（画像側に波形が含まれるため非表示） */
.footer-wave{ display:none; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px;
  padding-bottom:48px;
}
.footer-grid h4{ font-size:14px; font-weight:800; color:var(--navy); margin-bottom:14px; }
.footer-grid .logo{ margin-bottom:12px; }
.footer-grid p, .footer-grid li{ font-size:13px; color:var(--text-sub); }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a{ color:var(--text-sub); }
.footer-grid a:hover{ color:var(--coral); opacity:1; }
/* フッターの飾りイラスト（モック準拠） */
.footer-deco{
  max-width:var(--content-w); margin:0 auto; padding:0 20px;
  display:flex; justify-content:space-between; align-items:flex-end;
}
.footer-deco .deco-box{ height:44px; width:auto; opacity:.9; }
.footer-deco .deco-car{ height:52px; width:auto; margin-left:auto; margin-right:12px; }
.footer-deco .deco-trees{ height:64px; width:auto; }
.license-note{
  text-align:center; font-size:11.5px; color:var(--text-sub);
  padding:0 20px 14px;
}
.copyright{
  background:var(--coral); color:#fff; text-align:center;
  font-size:12px; padding:12px 20px; letter-spacing:.05em;
}

/* ---------- フェードイン ---------- */
.fade-in{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.fade-in.visible{ opacity:1; transform:translateY(0); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .fade-in{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   下層ページ共通部品
   ============================================================ */

/* ---------- ダミー画像 ---------- */
.img-dummy{
  background:#d9dde1; object-fit:cover;
  filter:grayscale(1) opacity(.7);
}

/* ---------- パンくず ---------- */
.breadcrumb{
  font-size:12.5px; color:var(--text-sub); padding:16px 0 0;
}
.breadcrumb a{ color:var(--text-sub); }
.breadcrumb a:hover{ color:var(--coral); }
.breadcrumb .current{ color:var(--coral-dark); font-weight:700; }

/* ---------- ページヒーロー ---------- */
.page-hero{
  position:relative; overflow:hidden;
  padding:36px 0 56px;
  background:var(--cream);
}
.page-hero::before{
  content:""; position:absolute; top:-60px; left:-60px;
  width:220px; height:220px; border-radius:50%;
  background:var(--coral-pale); opacity:.45;
}
.page-hero::after{
  content:""; position:absolute; bottom:-80px; right:-60px;
  width:260px; height:260px; border-radius:50%;
  background:var(--blue-pale); opacity:.6;
}
.page-hero .container{ position:relative; z-index:2; }

/* 不要品買取ページ専用ヒーロー：トップページと同じく、生成イラストを画面横幅いっぱいに
   フルブリード表示（カード感を出さない）。テキストは画像の上、LINEボタンは下に配置 */
.page-hero-kaitori{ padding-top:0; padding-bottom:0; }
.page-hero-kaitori::before, .page-hero-kaitori::after{ display:none; }
.page-hero-kaitori .container{ margin-bottom:28px; }
.page-hero-kaitori-img{ margin-top:0; }
.page-hero-en{
  font-size:12.5px; font-weight:800; letter-spacing:.2em; color:var(--coral);
  margin-bottom:8px;
}
.page-hero h1{
  font-size:32px; font-weight:800; color:var(--navy); letter-spacing:.03em;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.page-hero-lead{
  margin-top:14px; font-size:15px; color:var(--text-sub); max-width:640px; line-height:1.9;
}
.page-badge-new{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--coral); color:#fff; font-size:13px; font-weight:800;
  border-radius:var(--radius-pill); padding:4px 14px;
}
/* ページヒーローの隅に添えるパスにゃん */
.page-hero-mascot{
  position:absolute; bottom:0; right:6%; z-index:2;
  height:150px; width:auto;
}

/* ---------- 汎用カードグリッド（こんな方におすすめ 等） ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.info-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 24px;
}
.info-card h3{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:8px; display:flex; gap:10px; align-items:flex-start; }
.info-card h3::before{ content:"✓"; color:var(--coral); font-weight:800; }
.info-card p{ font-size:13.5px; color:var(--text-sub); }

/* ---------- ステップ（仕組み・流れ） ---------- */
.step-list{ display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; }
.step-item{
  display:flex; gap:22px; padding:0 0 40px; position:relative;
}
.step-item:last-child{ padding-bottom:0; }
.step-item::before{
  content:""; position:absolute; left:23px; top:52px; bottom:0;
  width:2px; background:var(--line);
}
.step-item:last-child::before{ display:none; }
.step-num{
  flex:0 0 48px; height:48px; border-radius:50%;
  background:var(--coral); color:#fff; font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(232,96,76,.3);
  position:relative; z-index:2;
}
.step-body{ padding-top:6px; }
.step-body h3{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.step-body p{ font-size:13.5px; color:var(--text-sub); line-height:1.8; }

/* ---------- 料金表 ---------- */
/* ---------- 他社料金比較 ---------- */
.compare-grid{ display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:20px; align-items:center; margin-bottom:8px; }
.compare-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:30px 18px; text-align:center; position:relative;
}
.compare-label{ font-size:14px; font-weight:700; color:var(--text-sub); margin-bottom:10px; }
.compare-price{ font-size:26px; font-weight:800; color:var(--navy); }
.compare-price span{ font-size:13px; font-weight:600; margin-left:2px; }
.compare-us{
  border:3px solid var(--coral); box-shadow:var(--shadow-lg);
  transform:scale(1.08); z-index:2; padding-top:36px;
}
.compare-us .compare-label{ color:var(--coral); font-size:15px; }
.compare-us .compare-price{ font-size:36px; color:var(--coral); }
.compare-badge{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  background:var(--coral); color:#fff; font-size:11.5px; font-weight:800;
  padding:5px 16px; border-radius:var(--radius-pill); white-space:nowrap;
  box-shadow:var(--shadow);
}

.price-note{
  background:var(--cream); border:1px dashed var(--coral-pale); border-radius:10px;
  padding:10px 16px; font-size:12.5px; color:var(--coral-dark); font-weight:700;
  margin-bottom:16px;
}
.price-table-wrap{ overflow-x:auto; margin-bottom:32px; border-radius:var(--radius); box-shadow:var(--shadow); }
table.price-table{
  width:100%; border-collapse:collapse; background:var(--white); min-width:480px;
}
.price-table caption{
  text-align:left; font-size:15px; font-weight:800; color:var(--navy);
  background:var(--blue-pale); padding:12px 18px;
}
.price-table th, .price-table td{
  padding:12px 18px; font-size:13.5px; text-align:left; border-bottom:1px solid var(--line);
}
.price-table th{ background:var(--cream); color:var(--navy); font-weight:800; width:45%; }
.price-table td{ color:var(--text-sub); }
.price-table tr:last-child th, .price-table tr:last-child td{ border-bottom:none; }
.price-table .em{ color:var(--coral); font-weight:800; font-size:15px; }

/* ---------- 買取/返送バナー ---------- */
.choice-banner{
  display:grid; grid-template-columns:1fr 1fr; gap:22px; margin:32px 0;
}
.choice-banner-3{ grid-template-columns:1fr 1fr 1fr; }
.choice-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:26px 24px; text-align:center;
}
.choice-card .choice-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; font-weight:800;
}
.choice-card.buy .choice-icon{ background:var(--coral); }
.choice-card.return .choice-icon{ background:var(--blue-deep); }
.choice-card.relist .choice-icon{ background:#8fae6b; }
.choice-card h3{ font-size:16px; font-weight:800; color:var(--navy); margin-bottom:8px; }
.choice-card p{ font-size:13px; color:var(--text-sub); }

/* ---------- FAQ（アコーディオン） ---------- */
.faq-category{
  font-size:14px; font-weight:800; color:var(--coral-dark);
  margin:36px 0 14px; padding-left:4px;
}
.faq-category:first-child{ margin-top:0; }
.faq-item{
  background:var(--white); border-radius:12px; box-shadow:var(--shadow);
  margin-bottom:12px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 50px 18px 56px;
  font-size:14.5px; font-weight:700; color:var(--navy); position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::before{
  content:"Q"; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%;
  background:var(--coral); color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.faq-item summary::after{
  content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-size:22px; font-weight:400; color:var(--text-sub); transition:transform .2s;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item .faq-answer{
  padding:0 24px 20px 56px; font-size:13.5px; color:var(--text-sub); line-height:1.9;
}

/* ---------- 会社概要テーブル ---------- */
table.info-table{ width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:32px; }
.info-table th, .info-table td{ padding:16px 22px; font-size:13.5px; text-align:left; border-bottom:1px solid var(--line); }
.info-table th{ background:var(--cream); color:var(--navy); font-weight:800; width:32%; }
.info-table td{ color:var(--text-sub); }
.info-table tr:last-child th, .info-table tr:last-child td{ border-bottom:none; }

/* ---------- 沿革（簡易年表） ---------- */
.history-list{ display:flex; flex-direction:column; gap:18px; }
.history-item{ display:flex; gap:20px; align-items:baseline; }
.history-year{ flex:0 0 80px; font-size:18px; font-weight:800; color:var(--coral); }
.history-text{ font-size:13.5px; color:var(--text-sub); border-bottom:1px dashed var(--line); padding-bottom:14px; flex:1; }

/* ---------- お問い合わせフォーム ---------- */
/* お問い合わせページのヒーロー：PCは左テキスト＋右に大きめイラスト、スマホはイラストを上に */
.contact-hero{ display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.contact-hero-text{ flex:1; min-width:260px; }
.contact-hero-img{ height:260px; width:auto; flex:none; }
@media (max-width: 640px){
  .contact-hero{ flex-direction:column; gap:12px; }
  .contact-hero-img{ order:-1; height:auto; width:72%; max-width:300px; margin:0 auto; }
  .contact-hero-text{ width:100%; }
}

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.contact-line-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:32px 28px; text-align:center;
}
.contact-line-card .qr-dummy{ width:140px; height:140px; margin:16px auto; border-radius:12px; }
.contact-form{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:32px 28px;
}
.form-row{ margin-bottom:18px; }
.form-row label{ display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px; }
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; color:var(--text); background:var(--cream);
}
.form-row textarea{ min-height:120px; resize:vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:2px solid var(--coral-pale); border-color:var(--coral); }
/* チェックボックス・ラジオ（選択肢）：文字の左隣にきちんと並べる */
.form-row input[type="checkbox"], .form-row input[type="radio"]{
  width:auto; flex:none; margin:0; padding:0; accent-color:var(--coral);
}
.form-row label:has(input[type="checkbox"]), .form-row label:has(input[type="radio"]){
  display:flex; align-items:center; gap:8px; margin-bottom:0;
}
.form-submit{
  width:100%; border:none; cursor:pointer;
  background:var(--coral); color:#fff; font-weight:800; font-size:16px;
  padding:15px; border-radius:var(--radius-pill);
  transition:transform .2s, background .2s;
}
.form-submit:hover{ transform:translateY(-2px); background:var(--coral-dark); }

/* ---------- 採用ページ ---------- */
.recruit-flow{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:32px 0; }
.recruit-flow .rf-step{
  background:var(--white); border-radius:12px; box-shadow:var(--shadow);
  padding:16px 20px; font-size:13px; font-weight:700; color:var(--navy);
  text-align:center; min-width:130px;
}
.recruit-flow .rf-arrow{ display:flex; align-items:center; justify-content:center; padding:0 10px; color:var(--coral); font-weight:800; font-size:18px; }

/* ---------- ブログ ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
.blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card .blog-thumb{ height:160px; }
.blog-card .blog-thumb img{ width:100%; height:100%; object-fit:cover; }
/* キャラクターイラストのサムネ：切り抜かず余白付きで収める（クリーム背景） */
.blog-card .blog-thumb img.thumb-illust{ object-fit:contain; background:var(--cream); padding:12px; }
.blog-card-body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-date{ font-size:12px; color:var(--text-sub); font-weight:600; }
.blog-card-body h3{ font-size:15px; font-weight:800; color:var(--navy); line-height:1.6; }
.blog-card.coming .blog-card-body h3{ color:var(--text-sub); }
.blog-tag{
  display:inline-block; font-size:11px; font-weight:700; color:var(--coral-dark);
  background:var(--cream); border-radius:6px; padding:3px 10px; width:fit-content;
}

/* ---------- 記事本文 ---------- */
.article{ max-width:760px; margin:0 auto; }
.article-header{ text-align:center; margin-bottom:36px; }
.article-header .blog-date{ display:block; margin-bottom:10px; }
.article-header h1{ font-size:26px; font-weight:800; color:var(--navy); line-height:1.6; }
.article-body h2{
  font-size:19px; font-weight:800; color:var(--navy); margin:40px 0 16px;
  padding-left:14px; border-left:5px solid var(--coral);
}
.article-body p{ font-size:14.5px; color:var(--text); line-height:2; margin-bottom:18px; }
.article-body ul{ margin:0 0 18px 4px; }
.article-body li{ font-size:14px; color:var(--text); line-height:1.9; padding-left:22px; position:relative; margin-bottom:6px; }
.article-body li::before{ content:"・"; position:absolute; left:0; color:var(--coral); font-weight:800; }
.article-cta{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 26px; text-align:center; margin-top:40px;
}
.article-cta h3{ font-size:17px; font-weight:800; color:var(--navy); margin-bottom:14px; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px){
  .service-grid{ grid-template-columns:1fr; }
  /* 狭い画面では図版とチェックリストを縦積みに戻す */
  .service-body{ flex-direction:column; align-items:stretch; }
  .service-figure{ flex:none; }
  /* 狭い画面では見出しの折り返しを許可 */
  .service-card h3{ white-space:normal; font-size:20px; }
  .sold-grid{ grid-template-columns:1fr 1fr; }
  .compare-grid{ grid-template-columns:1fr; gap:16px; }
  .compare-us{ transform:none; order:-1; }
  .junk-cta{ flex-direction:column; text-align:center; padding:24px 20px; }
  .voice-card{ width:280px; flex:0 0 280px; padding:24px 20px; }
  .voice-quote{ min-height:180px; }
  .reason-grid{ grid-template-columns:1fr 1fr; max-width:none; margin:0; }
  .stats-card{ grid-template-columns:1fr; gap:18px; }
  .stat{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:16px; }
  .stat:last-child{ border-bottom:none; padding-bottom:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ヘッダー：ナビが窮屈になる幅（7項目＋LINEボタン）でハンバーガー化。
   640pxのままだとリンクとLINEボタンが折り返してデザインが崩れるため独立したブレークポイントに分離 */
@media (max-width: 1140px){
  .menu-toggle{ display:block; }
  .gnav{
    display:none;
    position:absolute; top:64px; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:stretch;
    padding:16px 20px 24px; gap:0;
    box-shadow:0 12px 24px rgba(51,63,77,.12);
  }
  .gnav.open{ display:flex; }
  .gnav a{ padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px; }
  .gnav .btn-line{ margin-top:16px; justify-content:center; white-space:normal; }

  /* ハンバーガー内のドロップダウン：タップで開閉するアコーディオン */
  .gnav-item{ display:block; height:auto; position:static; }
  .gnav-parent{
    width:100%; justify-content:space-between;
    padding:14px 4px; border-bottom:1px solid var(--line); font-size:16px;
  }
  .gnav-item .sub-menu{
    position:static; transform:none; box-shadow:none; min-width:0;
    background:var(--cream); border-radius:12px; padding:4px 0; margin:6px 0;
  }
  .gnav-item .sub-menu a{ font-size:15px; padding:12px 18px; border-bottom:none; }
}

@media (max-width: 640px){
  .reason-grid{ grid-template-columns:1fr; }

  /* スマホ：縦長のスマホ版バナーに切り替え */
  .hero-banner-pc{ display:none; }
  .hero-banner-mobile{ display:block; }
  .stats{ margin-top:-30px; }
  .btn-coral{ width:100%; justify-content:center; font-size:16px; padding:16px 20px; }
  .section{ padding:52px 0; }
  .section-title{ font-size:24px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .line-band{ border-radius:24px; }
  .line-band .btn-line{ width:100%; justify-content:center; }

  /* 下層ページ共通 */
  .page-hero h1{ font-size:24px; }
  .page-hero-mascot{ display:none; }
  .info-grid{ grid-template-columns:1fr; }
  .choice-banner{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .step-item{ gap:16px; }
  .history-item{ flex-direction:column; gap:4px; }
  .history-year{ flex:none; }
}

@media (max-width: 900px){
  .info-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- 新料金プラン 告知バナー（全ページ上部） ---------- */
.notice-band{
  background:var(--navy); color:#fff; text-align:center;
  font-size:12.5px; font-weight:700; padding:9px 16px;
}
.notice-band a{ color:#fff; text-decoration:underline; margin-left:6px; white-space:nowrap; }
.notice-band a:hover{ color:var(--coral-pale); }
@media (max-width:640px){
  .notice-band{ font-size:11.5px; padding:8px 10px; line-height:1.6; }
}

/* ---------- 大口出品の必須案内（amazon.html / plan.html 共通） ---------- */
.daiguchi-note{
  display:flex; align-items:flex-start; gap:16px;
  background:#fff6ec; border:2px solid var(--coral);
  border-radius:var(--radius); padding:22px 26px;
}
.daiguchi-note .daiguchi-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--coral); color:#fff; font-size:24px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.daiguchi-note .daiguchi-body h3{
  font-size:17px; font-weight:800; color:var(--navy); margin-bottom:8px;
}
.daiguchi-note .daiguchi-body p{
  font-size:14px; color:var(--text-sub); line-height:1.9; margin:0;
}
.daiguchi-note .daiguchi-body strong{ color:var(--coral); font-weight:800; }
@media (max-width:640px){
  .daiguchi-note{ padding:18px 18px; gap:12px; }
  .daiguchi-note .daiguchi-icon{ width:32px; height:32px; font-size:20px; }
  .daiguchi-note .daiguchi-body h3{ font-size:15.5px; }
  .daiguchi-note .daiguchi-body p{ font-size:13px; }
}