@charset "UTF-8";

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



.page-brands .home-news-more {
  margin-top: 80px;
}

.page-brands .news-more-circle {
  background-image: url("../images/return.svg");
}



/* グローバルナビ：取扱ブランドをアクティブ */
.page-brands .global-nav ul li:nth-child(7) 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;
  margin-bottom: 60px; /* ← ここを調整（32〜64pxで好み） */
}

/* ブランド一覧（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-icon {
  width: 14px;      /* 見た目で微調整してOK */
  height: auto;
  display: block;
}

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


/* =========================
   お問い合わせ：注意事項 見出し
   about「香川という地」と同等
========================= */

.page-brands .greeting-message h2 {
  font-family: "I-OTF明朝Pro M";
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #333;
  margin-bottom: 24px;
}

/* =========================
   お問い合わせ：注意事項フレーム
========================= */

.page-brands .contact-notice-box {
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px 56px;
  border: 1px solid #cfcfcf;
  box-sizing: border-box;
}


/* 注意事項：最後の段落とフレーム下の余白を詰める */
.page-brands .contact-notice-box p:last-child {
  margin-bottom: 10px;
}


/* =========================
   お問い合わせフォーム
========================= */


/* ===== フォーム前ガイド ===== */

.page-brands .contact-form-guide {
  max-width: 1080px;
  margin: 48px auto 24px;
}

.page-brands .form-language-note {
  font-family: "TazuganeGothicStdN-Light";
  font-size: 16px;
  color: #333;
  margin-bottom: 16px;
}

.page-brands .form-required-note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "TazuganeGothicStdN-Light";
  font-size: 16px;
  color: #333;
}

.page-brands .required-dot {
  width: 12px;
  height: 12px;
  background-color: #C94A4A;
  border-radius: 50%;
  display: inline-block;
}


/* ===== フォーム本体 ===== */

.page-brands .contact-form {
  max-width: 1080px;
  margin: 80px auto 0;
}


/* ===== 各入力行 ===== */

.page-brands .form-row {
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
}


/* ===== ラベル ===== */

.page-brands .form-row label {
  display: inline-flex;
  align-items: center;
  gap: 10px;   /* ← 文字と赤丸の距離。12〜18pxで微調整OK */
  font-family: "TazuganeGothicStdN-Light";
  font-size: 16px;
  margin-bottom: 30px;
  color: #333;
}

.page-brands .form-row .required-dot {
  width: 12px;
  height: 12px;
  background-color: #C94A4A;
  border-radius: 50%;
  display: inline-block;
}



/* ===== 入力フィールド ===== */

.page-brands .form-row input,
.page-brands .form-row textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;

  font-family:
    "TazuganeGothicStdN-Light",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  font-size: 18px;
  color: #333;
}


/* placeholder（念のため font-family も指定） */
.page-brands .form-row input::placeholder,
.page-brands .form-row textarea::placeholder {
  font-family:
    "TazuganeGothicStdN-Light",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  color: #bbb;
}


/* textarea */

.page-brands .form-row-textarea textarea {
  min-height: 160px;
  resize: vertical;
}


/* ===== 個人情報同意チェック ===== */

.page-brands .form-row-consent {
  padding: 40px 0 0;
  border-bottom: none;
  display: flex;
  justify-content: center;
}


.page-brands .consent-label {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "TazuganeGothicStdN-Light";
  font-size: 16px;
  color: #333;
}

/* checkbox 本体は非表示 */
.page-brands .consent-label input {
  display: none;
}

.page-brands .consent-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: #e0e0e0;
  position: relative;

  /* 内側シャドウ（立体感） */
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 -1px 1px rgba(255, 255, 255, 0.6);
}


/* チェック時：赤くする */
.page-brands .consent-label input:checked + .consent-check {
  background-color: #C94A4A;
}


/* チェック時：SVGチェックを表示 */
.page-brands .consent-label input:checked + .consent-check {
  background-color: #C94A4A; /* チェック時の赤 */
  background-image: url("../images/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px; /* SVGサイズ。12〜16pxで好み調整 */
}


.page-brands .consent-text {
  line-height: 1.6;
}

/* =========================
   お問い合わせ：左右ナビボタン
========================= */

.page-brands .contact-nav-buttons {
  max-width: 1080px;
  margin: 80px auto 0;
  display: flex;
  justify-content: space-between;
  justify-content: center; /* ← 中央寄せ */
  gap: 100px;               /* ← ボタン間の距離 */
  align-items: center;
}

/* ボタン共通 */
.page-brands .contact-nav-button {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;

  font-family: "TazuganeGothicStdN-Light";
  font-size: 18px;
  color: #333;
}

/* テキスト（indexと完全に同じテンポ） */
.page-brands .contact-nav-text {
  display: inline-block;
  transition: transform 0.35s ease, color 0.35s ease;
}

/* 赤丸（indexと同じ） */
.page-brands .contact-nav-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #C94A4A;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;

  transition: transform 0.35s ease;
}

/* 丸は共通で拡大 */
.page-brands .contact-nav-button:hover .contact-nav-circle {
  transform: scale(1.1);
}

/* 左：TOPに戻る（textだけ右へ） */
.page-brands .contact-nav-button.is-back:hover .contact-nav-text {
  color: #C94A4A;
  transform: translateX(3px);
}

/* 右：確認画面へ（textだけ左へ） */
.page-brands .contact-nav-button.is-next:hover .contact-nav-text {
  color: #C94A4A;
  transform: translateX(-3px);
}

/* 矢印 */
.page-brands .contact-nav-circle.is-left {
  background-image: url("../images/return.svg");
}

.page-brands .contact-nav-circle.is-right {
  background-image: url("../images/arrow_right.svg");
}


/* =========================
   Fontplus 明朝の強制上書きを止める
========================= */

.page-brands input,
.page-brands textarea {
  font-family:
    "TazuganeGothicStdN-Light",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;
}

.page-brands input:focus,
.page-brands textarea:focus {
  font-family:
    "TazuganeGothicStdN-Light",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif !important;
}


/* 個人情報同意エラー：style.css の .greeting-message p に勝つ版 */
.page-brands .greeting-message p.privacy-error {
  all: unset;               /* ← style.css の all: unset の影響を切る */
  display: block;

  max-width: 1080px;
  margin: 0px auto 0;

  font-family: "TazuganeGothicStdN-Medium";
  font-size: 15px;
  color: #C94A4A;           /* 赤字 */
  text-align: center;       /* センター寄せ */
}












/* =========================================
   お問い合わせページ｜スマホ専用調整
========================================= */
@media screen and (max-width: 600px) {

  /* -----------------------------
     注意事項ボックス
  ----------------------------- */
  .page-brands .contact-notice-box {
    padding: 24px 20px;
  }

  .page-brands .contact-notice-box h2 {
    font-size: 18px;
    letter-spacing: 0.015em;
    margin-bottom: 20px;
  }

  /* -----------------------------
     導入文（フォーム上）
  ----------------------------- */
  .page-brands .greeting-message p {
    font-size: 13px;
    line-height: 1.9;
  }

  /* フォーム全体の下余白（← ボタンとの距離の本丸） */
  .page-brands .greeting-message {
    margin-bottom: 0;
  }

  /* -----------------------------
     フォームラベル・入力
  ----------------------------- */
  .page-brands .form-row label {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .page-brands .form-row input,
  .page-brands .form-row textarea {
    font-size: 16px;
  }

  /* -----------------------------
     同意チェックボックス
  ----------------------------- */
  .form-row-consent {
    margin-bottom: 16px;
  }

  .page-brands .consent-check {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-self: flex-start;
    margin-top: 2px;
  }

  .page-brands .consent-text {
    font-size: 14px;
    line-height: 1.8;
  }

  /* -----------------------------
     ナビボタン（戻る / 確認）
  ----------------------------- */
  .page-brands .contact-nav-buttons {
    gap: 22px;
    margin-top: 24px;
  }

  .page-brands .contact-nav-button {
    font-size: 14px;
  }

}