/*
 * 取り扱いブランドのリクエスト（inc/brand-request.php）。ブランド一覧 /brands/ だけで読む。
 *
 * 左下の固定ボタン → ポップアップのフォーム。色はサイトの緑（カートボタン等と同じ var(--nb-color-brand, #138808)）。
 * 右下はページトップへ戻るボタン（nicobay-scroll-to-top.css）。左下に出る LINE の固定ボタンは
 * ブランド一覧ページには出ていない（2026-10-08 本番で確認）ので、左下の角に詰めて置く。
 */

.nb-brand-request {
  --nb-br-green: var(--nb-color-brand, #138808);
  --nb-br-text: #2b2b2b;
  --nb-br-muted: #707070;
}

/* ===================== 左下の固定ボタン ===================== */

.nb-brand-request__fab {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 999;
}

.nb-brand-request__fab[hidden] {
  display: none;
}

.nb-brand-request__open {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--nb-br-green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nb-brand-request__open:hover,
.nb-brand-request__open:focus-visible {
  background: var(--nb-br-green);
  filter: var(--nb-hover-filter, brightness(0.9));
  transform: translateY(-2px);
}

.nb-brand-request__open-main {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
}

/* ボタン右上の ×（LINE の固定ボタンと同じ置き方）。 */
.nb-brand-request__hide {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #3a3a3a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-brand-request__hide svg,
.nb-brand-request__close svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

@media screen and (min-width: 750px) {
  .nb-brand-request__fab {
    left: 20px;
    bottom: 20px;
  }

  .nb-brand-request__open {
    padding: 13px 20px;
  }

  .nb-brand-request__open-main {
    font-size: 1.5rem;
  }
}

/* ===================== ポップアップ ===================== */

.nb-brand-request__overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
}

.nb-brand-request__overlay[hidden] {
  display: none;
}

.nb-brand-request__dialog {
  position: relative;
  width: 100%;
  /* PC でタイトル「今後仕入れて欲しいブランドをお聞かせください！」が 1 行に収まる幅。 */
  max-width: 600px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 36px 28px 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  color: var(--nb-br-text);
}

.nb-brand-request__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #3a3a3a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-brand-request__close svg {
  width: 16px;
  height: 16px;
}

.nb-brand-request__eyebrow {
  margin: 0 0 6px;
  color: var(--nb-br-green);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.nb-brand-request__title {
  margin: 0 40px 10px 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.4;
}

.nb-brand-request__lead {
  margin: 0 0 22px;
  color: var(--nb-br-muted);
  font-size: 1.3rem;
  line-height: 1.6;
}

.nb-brand-request__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 700;
}

.nb-brand-request__required {
  /* 見出しが 2 行に折れても「必須」は割らない（SP で「必／須」と縦に割れていた）。 */
  flex-shrink: 0;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--nb-color-red, #c62828);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.nb-brand-request__input {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fafafa;
  color: var(--nb-br-text);
  /* 16px 未満だと iPhone が入力時に勝手に拡大するので、SP でも 16px にする。 */
  font-size: 1.6rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nb-brand-request__input:focus {
  outline: none;
  border-color: var(--nb-br-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(19, 136, 8, 0.15);
}

.nb-brand-request__input.is-invalid {
  border-color: var(--nb-color-red, #c62828);
}

.nb-brand-request__textarea {
  resize: vertical;
  min-height: 84px;
}

/* 迷惑送信よけの隠し欄。display:none だとボットが読み飛ばすことがあるので画面外へ出す。 */
.nb-brand-request__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nb-brand-request__error {
  margin: -8px 0 16px;
  color: var(--nb-color-red, #c62828);
  font-size: 1.3rem;
  font-weight: 600;
}

.nb-brand-request__submit {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--nb-br-green);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.nb-brand-request__submit:hover,
.nb-brand-request__submit:focus-visible {
  background: var(--nb-br-green);
  filter: var(--nb-hover-filter, brightness(0.9));
}

.nb-brand-request__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

@media screen and (max-width: 749px) {
  .nb-brand-request__dialog {
    padding: 32px 20px 22px;
  }

  .nb-brand-request__title {
    font-size: 1.9rem;
  }
}

/* ===================== 送信完了のお知らせ ===================== */

.nb-brand-request__toast {
  position: fixed;
  left: 50%;
  /* 左下のボタンと重ならないよう、ボタンの上の高さに出す。 */
  bottom: 96px;
  z-index: 10001;
  transform: translateX(-50%);
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--nb-br-green);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.nb-brand-request__toast[hidden] {
  display: none;
}

/* ポップアップを開いている間は背面をスクロールさせない。 */
html.nb-brand-request-open,
html.nb-brand-request-open body {
  overflow: hidden;
}

/* ===================== PC: ボタン 2 倍・ポップアップ 1.5 倍（2026-10-08） ===================== */
/* 上の 750px 以上のブロック（ボタン 1.5rem・padding 13px 20px／ポップアップ 600px）を基準に倍率をかける。 */
@media screen and (min-width: 750px) {
  /* PC のボタンは常に同じ大きさで、画面幅によって変えない（2026-10-08 指示）。
     2 倍（文字 30px）から 30% 小さくして文字 21px（ボタン約 208×93px）。
     左下に固定し、カードの左に余白が無い画面ではカードに重なってよい。
     余白・× は文字の大きさ（--nb-br-fab-font）に対する em で組んである。 */
  .nb-brand-request__fab {
    --nb-br-fab-font: 21px;
    font-size: var(--nb-br-fab-font);
  }

  /* <button> は既定で文字の大きさを親から継がない（13.33px 固定）ので inherit を明示する。 */
  .nb-brand-request__open,
  .nb-brand-request__hide {
    font-size: inherit;
  }

  .nb-brand-request__open {
    padding: 0.87em 1.33em;
    border-radius: 0.8em;
  }

  .nb-brand-request__open-main {
    font-size: 1em;
  }

  .nb-brand-request__hide {
    top: -0.53em;
    right: -0.53em;
    width: 1.33em;
    height: 1.33em;
    border-width: 0.1em;
  }

  .nb-brand-request__hide svg {
    width: 0.6em;
    height: 0.6em;
  }

  .nb-brand-request__dialog {
    max-width: 900px;
    padding: 54px 42px 42px;
    border-radius: 24px;
  }

  .nb-brand-request__close {
    top: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
  }

  .nb-brand-request__close svg {
    width: 24px;
    height: 24px;
  }

  .nb-brand-request__eyebrow {
    margin-bottom: 9px;
    font-size: 2.25rem;
  }

  .nb-brand-request__title {
    margin: 0 60px 15px 0;
    font-size: 3.3rem;
  }

  .nb-brand-request__lead {
    margin-bottom: 33px;
    font-size: 1.95rem;
  }

  .nb-brand-request__label {
    margin-bottom: 12px;
    font-size: 2.1rem;
  }

  .nb-brand-request__input {
    margin-bottom: 30px;
    padding: 18px 21px;
    border-radius: 12px;
    font-size: 2.4rem;
  }

  .nb-brand-request__textarea {
    min-height: 126px;
  }

  .nb-brand-request__error {
    margin: -12px 0 24px;
    font-size: 1.95rem;
  }

  .nb-brand-request__submit {
    padding: 24px;
    font-size: 2.4rem;
  }

  .nb-brand-request__toast {
    padding: 21px 33px;
    font-size: 2.1rem;
    bottom: 150px;
  }
}