@charset "UTF-8";

/* =========================
   取扱ブランド（brands）
   最終安定版
   デザイン変更なし
========================= */

/* グローバルナビ：取扱ブランドをアクティブ */
.page-brands .global-nav ul li:nth-child(5) a {
  color: #CD4145 !important;
  font-family: "TazuganeGothicStdN-Medium";
  pointer-events: none;
}

/* ヒーロー：高さを持たせない */
.page-brands .hero-brands {
  height: auto;
  min-height: 0;
}

/* パンくず非表示 */
.page-brands .breadcrumb {
  display: none;
}

/* タイトル上余白（現状維持） */
.page-brands .greeting-title {
  margin-top: 180px;
}

/* ブランド一覧（2カラム・about思想準拠） */
.page-brands .brands-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1080px;
  margin: 80px auto 0;
}

/* 各ブランドカード */
.page-brands .brand-card {
  text-align: left;
  box-sizing: border-box;
}

/* 画像枠：箱として完結（重複定義を統合） */
.page-brands .brand-image {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 40px;  /* ← 上下だけ減らす。左右は維持 */
  margin-bottom: 30px;
  border: 1px solid #bbb;
}

.page-brands .brand-image img {
  width: 100%;
  height: auto;
  display: block;
}

.page-brands .brand-name {
  font-family: "I-OTF明朝Pro M";
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #333;
  margin-bottom: 8px;   /* ← ここを追加（詰める） */
  display: flex;
  align-items: center;
  gap: 10px;          /* 文字とアイコンの間 */
}

.page-brands .brand-name-icon {
  width: 14px;      /* 見た目で微調整してOK */
  height: auto;
  display: block;
}


/* 説明文 */
.page-brands .brand-text {
  margin-top: 2;
  font-size: 16px;
  line-height: 2;
  font-family: "TazuganeGothicStdN-Light";
  padding: 0px;   /* ← brand-image と同じ左右余白 */
}

.page-brands .brands-section {
  margin-bottom: 120px;
}



/* スマホ（現状維持） */
@media screen and (max-width: 600px) {
  
  .page-brands .brands-grid {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;     /* ← about / company と同じ */
    box-sizing: border-box;

    grid-template-columns: 1fr;
    gap: 60px;
    margin: 0 auto;
  }

  /* 100vw が原因で横にはみ出るのを防ぐ */
  .page-brands .sns-divider {
    width: 100%;
  }

  .page-brands .brand-image {
    padding-left: 20px;
    padding-right: 20px;  /* ← 40px → 20px */
  }

  .page-brands .brand-card {
    overflow: hidden;
  }

  .page-brands .brand-name {
    font-size: 17px;   /* ← 少し小さく */
    letter-spacing: 0.03em;
  }

  .page-brands .brand-text {
    font-size: 14px;     /* ← スマホ用 */
    line-height: 1.9;   /* ← 少し締めると読みやすい */
    overflow-wrap: break-word; /* ← これが決定打 */
    word-break: normal;        /* ← keep-all を解除 */
    text-align: justify;
  }

  
}