@charset "UTF-8";
/*
 * ARTISAN SPIRITS — cp-dealer.css
 * DEALER NETWORK ページ専用スタイル
 * すべて .cp-dealer 配下にスコープし、他ページへ影響させない
 * 既存 style_top_new.css（.cp-hero / .as-sec 等）を前提に上書き・拡張
 * ※ カラーは使用しない（モノクロ）。旧アクセント（赤）はグレー/黒に統一。
 * ================================================================
 */

/* ---- ページ変数 -------------------------------------------------- */
.cp-dealer{
  --dl-ink:      #111;
  --dl-sub:      #6d6d6d;
  --dl-line:     #e7e7e7;
  --dl-line-2:   #d8d8d8;
  --dl-accent:   #6d6d6d;   /* 旧・赤(#e53637)→グレーに変換（サイトはカラー不使用） */
  --dl-paper:    #ffffff;
  --dl-paper-2:  #f6f6f6;
  --dl-ink-dark: #0a0a0a;
}

/* 本文フォント基準（英字は Helvetica 系、和字はゴシック） */
.cp-dealer{
  font-family:"Nunito Sans","Helvetica Neue",Helvetica,
              "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  color:var(--dl-ink);
}

/* ================================================================
   ① HERO — 他の新規ページ（cp-service / cp-coming）と統一
   ・サイズ／スマホ挙動は標準 .cp-hero を継承（全画面100vh・スマホ文字非表示）
   ・可読性オーバーレイ（左＋下を軽く暗く）。濃さはHTML側 style の変数で調整可
       --hero-ov-left : 左側 / --hero-ov-bottom : 下部 / --hero-ov-shadow : 文字影
================================================================ */
.cp-dealer .cp-hero{
  --hero-ov-left:   0.34;
  --hero-ov-bottom: 0.46;
  --hero-ov-shadow: 0.45;
}
.cp-dealer .cp-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right,
      rgba(0,0,0, var(--hero-ov-left)) 0%,
      rgba(0,0,0, calc(var(--hero-ov-left) * 0.55)) 30%,
      rgba(0,0,0, 0) 60%),
    linear-gradient(to top,
      rgba(0,0,0, var(--hero-ov-bottom)) 0%,
      rgba(0,0,0, calc(var(--hero-ov-bottom) * 0.42)) 26%,
      rgba(0,0,0, 0) 54%);
}
.cp-dealer .cp-hero-label,
.cp-dealer .cp-hero-h1,
.cp-dealer .cp-hero-lead{
  text-shadow: 0 1px 10px rgba(0,0,0, var(--hero-ov-shadow)),
               0 1px 3px  rgba(0,0,0, calc(var(--hero-ov-shadow) + 0.10));
}
.cp-dealer .cp-hero-lead{
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",
              "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(14px,1.5vw,18px);
  letter-spacing:.10em;
  line-height:2.0;
  color:rgba(255,255,255,.88);
  margin:22px 0 0;
  max-width:640px;
}

/* ================================================================
   ② GLOBAL NETWORK — スタッツ帯（横幅は他セクションと統一・四辺に枠線）
================================================================ */
.cp-dealer .cpd-stats{
  max-width:calc(var(--top-max-w,1800px) - (var(--top-pad,48px) * 2));
  margin:0 auto;
  border:1px solid var(--dl-line);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.cp-dealer .cpd-stat{
  text-align:center;
  padding:clamp(34px,5vw,64px) 16px;
  border-left:1px solid var(--dl-line);
}
.cp-dealer .cpd-stat:first-child{ border-left:0; }
.cp-dealer .cpd-stat-num{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:clamp(30px,4.4vw,54px);
  line-height:1;
  letter-spacing:.02em;
  color:var(--dl-ink);
}
.cp-dealer .cpd-stat-num small{ font-size:.5em; font-weight:400; }
.cp-dealer .cpd-stat-label{
  display:block;
  margin-top:14px;
  font-family:"Nunito Sans",sans-serif;
  font-weight:800;
  font-size:clamp(10px,1vw,12px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dl-sub);
}

/* ================================================================
   区域ジャンプナビ（他ページの標準ボタン=as-view-all と同仕様・横幅統一）
================================================================ */
.cp-dealer .cpd-jump{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 8px;
  padding:34px var(--top-pad,48px) 0;
  max-width:var(--top-max-w,1800px);
  margin:0 auto;
}
.cp-dealer .cpd-jump a{
  display:inline-block;
  box-sizing:border-box;
  width:210px;                /* 全ボタン横幅を統一 */
  text-align:center;
  font-family:"Nunito Sans",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#fff; background:#111;
  padding:14px 12px;
  text-decoration:none;
  border:1px solid #111;
  transition:color .2s,background .2s;
  white-space:nowrap;
}
.cp-dealer .cpd-jump a:hover{
  color:#000; background:#fff; border-color:#111;
  text-decoration:none;
}
/* 海外5地域＝1段目（中央揃え）／JAPAN＝2段目。段間に余白 */
.cp-dealer .cpd-jump{ display:block; }
.cp-dealer .cpd-jump-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 8px;
}
.cp-dealer .cpd-jump-row--jp{ margin-top:22px; }

/* ================================================================
   区域見出し（REGION HEADER）＝本ページの署名要素
   地区名 + ヘアライン + パートナー数
================================================================ */
.cp-dealer .cpd-region{ scroll-margin-top:96px; }
.cp-dealer .cpd-region + .cpd-region{ margin-top:clamp(80px,10vw,140px); }

.cp-dealer .cpd-region-head{
  display:flex;
  align-items:baseline;
  gap:20px;
  margin-bottom:38px;
}
.cp-dealer .cpd-region-name{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:clamp(22px,3vw,38px);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dl-ink);
  white-space:nowrap;
  margin:0;
}
.cp-dealer .cpd-region-rule{
  flex:1 1 auto;
  height:1px;
  background:var(--dl-line-2);
}
.cp-dealer .cpd-region-count{
  font-family:"Nunito Sans",sans-serif;
  font-weight:800;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--dl-accent);      /* グレー */
  white-space:nowrap;
}
.cp-dealer .cpd-region-count b{ font-weight:800; }
/* 件数＋PAGE TOP を1組に。見出しのベースライン揃えは件数テキストが担う */
.cp-dealer .cpd-region-meta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* ================================================================
   カードグリッド（PC 3列 / タブレット 2列 / SP 1列）
   ・カード同士に間隔（gap）。連結ボーダーは廃止し独立カードに。
   ・どこにもリンクしないため hover の背景オーバーレイは無し。
================================================================ */
.cp-dealer .cpd-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2vw,28px);
}
.cp-dealer .cpd-card{
  position:relative;
  border:1px solid var(--dl-line);
  padding:30px 30px 28px;
  background:var(--dl-paper);
}
/* ホバー時、左に黒のアクセントバー（旧・赤→黒） */
.cp-dealer .cpd-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--dl-ink);
  transform:scaleY(0); transform-origin:top;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cp-dealer .cpd-card:hover::before{ transform:scaleY(1); }

/* 会社ロゴ（補助要素）＝取得できる場合のみ表示。
   高さ統一・上下左右センター・横は約88%に抑える。 */
.cp-dealer .cpd-card-logo{
  height:110px;
  margin:0 0 22px;
  display:flex;
  align-items:center;       /* 縦センター */
  justify-content:center;   /* 横センター */
}
.cp-dealer .cpd-card-logo img{
  max-height:110px;
  max-width:88%;
  width:auto; height:auto;
  object-fit:contain;
}

/* 国コード・エリアのエインブロウ（旧・赤→グレー） */
.cp-dealer .cpd-card-country{
  display:block;
  font-family:"Nunito Sans",sans-serif;
  font-weight:800;
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--dl-accent);
  margin-bottom:12px;
}
/* 会社名＝主役 */
.cp-dealer .cpd-card-name{
  font-family:"Helvetica Neue",Helvetica,Arial,
              "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-weight:700;
  font-size:19px;
  line-height:1.35;
  letter-spacing:.01em;
  color:var(--dl-ink);
  margin:0 0 18px;
}

/* メタ情報（📍🌐✉☎） */
.cp-dealer .cpd-meta{ list-style:none; margin:0; padding:0; }
.cp-dealer .cpd-meta li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:6px 0;
  font-size:13.5px;
  line-height:1.5;
  color:#333;
}
.cp-dealer .cpd-meta li + li{ border-top:1px dotted var(--dl-line); }
.cp-dealer .cpd-meta a{ color:#333; text-decoration:none; transition:color .2s; }
.cp-dealer .cpd-meta a:hover{ color:var(--dl-ink); text-decoration:none; }  /* 旧・赤→黒 */

/* ラインアイコン共通 */
.cp-dealer .cpd-ico{
  flex:0 0 16px;
  width:16px; height:16px;
  margin-top:1px;
  color:#8a8a8a;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* SNS 行 */
.cp-dealer .cpd-social{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--dl-line);
}
.cp-dealer .cpd-social a{
  display:inline-flex;
  color:#555;
  transition:color .2s,transform .2s;
}
.cp-dealer .cpd-social a:hover{ color:var(--dl-ink); transform:translateY(-2px); }
.cp-dealer .cpd-social .cpd-sico{
  width:19px; height:19px;
  fill:currentColor;
}
/* WeChat / LINE 等、ID を併記する場合（Web遷移不可のためリンクなし・ID文字表示） */
.cp-dealer .cpd-social .cpd-social-id{
  font-family:"Nunito Sans",sans-serif;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--dl-sub);
  align-self:center;
}

/* ================================================================
   国内エリア小見出し（東北 / 関東 …）
================================================================ */
.cp-dealer .cpd-area{
  margin:0 0 20px;
  padding-bottom:0;
}
.cp-dealer .cpd-region .cpd-area:not(:first-of-type){ margin-top:clamp(56px,7vw,84px); }
.cp-dealer .cpd-area-title{
  display:flex;
  align-items:center;
  gap:14px;
  font-family:"Nunito Sans",sans-serif;
  font-weight:800;
  font-size:clamp(16px,1.9vw,19px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dl-ink);
  margin:0 0 22px;
}
.cp-dealer .cpd-area-title::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--dl-line);
}
.cp-dealer .cpd-area-jp{
  font-family:"Nunito Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-weight:800;
  color:var(--dl-sub);
  letter-spacing:.1em;
  font-size:clamp(13px,1.5vw,15px);
}

/* ================================================================
   ⑤ BECOME A PARTNER（他ページと統一：白背景・標準ボタン）
================================================================ */
.cp-dealer .cpd-partner-text{
  text-align:center;
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}
.cp-dealer .cpd-partner-cta{
  text-align:center;
  margin-top:40px;
}

/* ================================================================
   PAGE TOP（各ブロック見出しの右端／ページ上部へ戻る）
================================================================ */
.cp-dealer .cpd-totop{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border:1px solid var(--dl-line,#e0e0e0);
  border-radius:50%;
  background:#fff;
  color:var(--dl-accent,#999);
  text-decoration:none;
  transition:color .2s,background .2s,border-color .2s;
}
.cp-dealer .cpd-totop svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.cp-dealer .cpd-totop:hover{
  color:#fff; background:#111; border-color:#111;
  text-decoration:none;
}

/* ================================================================
   レスポンシブ
================================================================ */
@media screen and (max-width:1024px){
  .cp-dealer .cpd-grid{ grid-template-columns:repeat(2,1fr); }
}
@media screen and (max-width:767px){
  .cp-dealer .cpd-stats{ grid-template-columns:repeat(2,1fr); }
  .cp-dealer .cpd-stat:nth-child(1),
  .cp-dealer .cpd-stat:nth-child(2){ border-bottom:1px solid var(--dl-line); }
  .cp-dealer .cpd-stat:nth-child(odd){ border-left:0; }
  .cp-dealer .cpd-grid{ grid-template-columns:1fr; }
  .cp-dealer .cpd-region-head{ gap:14px; }
  .cp-dealer .cpd-card{ padding:26px 22px 24px; }
  .cp-dealer .cpd-jump a{ width:100%; }
  .cp-dealer .cpd-jump-row--jp{ margin-top:14px; }
  .cp-dealer .cpd-partner-cta .as-view-all{ display:block; width:100%; }
}