/* ====== Base ====== */
:root{
  --paper:#f3f0ea;

  --navy:#0b2a44;          /* チラシの濃紺 */
  --navy2:#082338;
  --white:#ffffff;
  --muted:rgba(255,255,255,.82);

  --silver1:#f2f2f2;       /* シルバーバンド */
  --silver2:#cfcfcf;
  --silver3:#f7f7f7;

  --line:rgba(255,255,255,.18);

  /* --max: 980px; */            /* 紙面の横幅感 */
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--paper);
  color: var(--white);
  font-family: system-ui, -apple-system, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* 「紙」っぽく中央に置く（スマホでは全幅） */
.flyer{
  width:min(var(--max), 100%);
  margin: 0 auto;
  background: transparent;
}

/* ====== ① HERO ====== */
.hero{
  position:relative;
  background:#111;
}
.hero__img{
  display:block;
  width:100%;
  height:auto;
}
.hero__fallback{
  display:none;
  width:100%;
  aspect-ratio: 16/9;
  background:
    radial-gradient(800px 300px at 70% 30%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)),
    #0e141b;
}
.hero--fallback .hero__fallback{ display:block; }

/* ====== SILVER BAND / LOGO ====== */

.band{
  background: linear-gradient(
    90deg,
    #000 0%,
    #353535 5%,
    #d0d0d0 20%,
    #f5f5f5 50%,
    #d0d0d0 80%,
    #353535 95%,
    #000 100%
  );
  padding: 50px 0;
}

.band__inner{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}

/* ロゴコンテナ（横長ロゴ前提） */
.brandmark{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴ画像本体 */
.brandmark__img{
  max-width: min(520px, 90vw);
  height: 100px;
  width: auto;         /* 縦横比を維持 */
  object-fit: contain;
}

/* ====== ③ NAVY BODY ====== */
.body{
  background: linear-gradient(180deg, var(--navy), var(--navy2));
}
.body__inner{
  padding: 60px 22px;
  text-align:center;
}

/* 上の1行 */
.lead{
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing:.10em;
  color: rgba(255,255,255,.85);
}

/* 見出し */
.headline{
  margin:0;
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.35;
}
/* DONGFENG JAPAN + 振り仮名を“1ブロック”にして中央固定 */
.enblock{
  display: inline-flex;
  flex-direction: column;
  align-items: center;     /* 英語の中央に振り仮名を合わせる */
  justify-content: center;
  white-space: nowrap;     /* DONGFENG JAPAN を途中で割らない */
  line-height: 1.1;
}

.enblock__en{
  font-weight: 800;
  letter-spacing: .10em;
  font-size: inherit;      /* 見出しサイズに追従 */
}

.enblock__jp{
  margin-top: 6px;
  font-size: .42em;        /* 英語の下に小さく */
  letter-spacing: .18em;
  color: rgba(255,255,255,.70);
  line-height: 1;
}


/* 本文（チラシの“センター詰め”を再現） */
.copy{
  margin: 50px auto;
  max-width: 760px;
  color: var(--muted);
  font-size: 18px;
  line-height: 2.05;
  letter-spacing: .06em;
}
.copy p{ margin: 0 0 14px; }


/* ====== ⑤ Bottom bar ====== */
.footerbar{
  border-top:1px solid var(--line);
  padding: 30px 0 50px;
  max-width: 1000px;
  margin: auto;
}
.footerbar__inner {
  display: grid;
  grid-template-columns: 1fr auto; /* 左：dealer / 右：importer */
  gap: 30px;                           /* 余白は不要 */
  padding: 0 22px;
  align-items: center;
}

/* 左：販売代理店募集 */
.dealer{
  border:1px solid rgba(255,255,255,.18);
  padding: 12px 12px 10px;
  background: rgba(0,0,0,.12);
  max-width: 600px;
}
.dealer__title{
  display:inline-block;
  width: 100%;
  text-align: center;
  padding: 3px 10px;
  border: 1px solid white;
  background: gray;
  font-weight:700;
  letter-spacing:.2em;
  font-size: 24px;
  margin-bottom:8px;
}
.dealer__text{
  margin:0;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing:.06em;
}

/* 右：Importer情報 */
/* Importer 共通 */
.importer__row{
  display: block;        /* デフォルトは縦並び */
}

.importer__label{
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  margin-bottom: 15px;
}

.importer__body{
  font-size: 14px;
  color: rgba(255,255,255,.75);
}

.importer__line{
  margin-top: 6px;
}

.importer__line a{
  color: rgba(255,255,255,.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}

.importer__logo{
  margin-bottom: 20px;
  display: flex;
}

.importer__logo-img{
  height: 40px;      /* ロゴの基準高さ（必要に応じて調整） */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* ====== Responsive（“チラシのまま”を崩さずスマホ最適化） ====== */
@media (max-width: 780px){
  .body__inner{ padding: 40px 16px 14px;}
  .footerbar__inner{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .importer{ text-align:center; }
  .importer__logo {justify-content:center;}
  .band{padding: 10px 0;}
  .headline{font-size: clamp(19px, 3.4vw, 34px);}
  .copy{font-size: 14px; letter-spacing: 0.01;}
}


/* PC表示のみ改行 */
.pc-only{
  display: inline;
}

/* スマホでは改行させない */
@media (max-width: 780px){
  .pc-only{
    display: none;
  }
}

@media (min-width: 781px){

  .importer__row{
    display: grid;
    grid-template-columns: auto 1fr; /* 左：Importer / 右：情報 */
    gap: 20px;
    align-items: start;
  }

  .importer__label{
    margin-bottom: 0;
    white-space: nowrap;   /* Importer を折り返さない */
    line-height: 0.8;
  }

  .importer__body{
    width: auto;                 /* 念のため */
    display: inline-flex;        /* ← 横幅を中身に合わせる */
    flex-direction: column;
    gap: 5px;
  }
}

/* dealer内の画像を“枠に収めて綺麗に見せる” */
.dealer{
  overflow: hidden; /* 画像がはみ出す系の事故を防ぐ */
}

/* 画像エリア（余白と角丸を統一） */
.dealer__media{
  margin: 12px 0 10px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
}

/* 画像本体 */
.dealer__img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* リンク色はCSSで統一 */
.dealer__link{
  color: #00b0ff;
  text-decoration: none;
}

/* dealer画像リンク全体 */
.dealer__media a{
  display: block;
  position: relative;
  overflow: hidden;
}

/* 画像 */
.dealer__img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .4s ease, filter .4s ease;
}

/* 枠のホバー演出 */
.dealer__media{
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Hover時 */
.dealer__media:hover{
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Hover時の画像変化 */
.dealer__media:hover .dealer__img{
  transform: scale(1.01);
  filter: brightness(.9);
}

/* クリックできることを明示 */
.dealer__media a{
  cursor: pointer;
}

/* dealer画像リンクの下線を完全に無効化 */
.dealer__media a,
.dealer__media a:hover,
.dealer__media a:focus,
.dealer__media a:active{
  text-decoration: none;
}






/* 画像リンクは装飾しない */
.dealer__media a{
  display: block;
  color: inherit;
  text-decoration: none;
}