@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — お問い合わせ
 *
 * 左に説明、右にフォームの2カラム。
 * スクロールせずにフォームが見えている状態を狙うので、
 * 他の固定ページのような大きな見出し帯は置かない。
 *
 * 色・書体・罫線は css/components/page-base.css のトークンに従う。
 *
 * !important 使用禁止
 * ============================================================ */

.sb-contact .sbct-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  /* 高さの低いノートPCでも送信ボタンまで見えるよう、上の余白は控えめにする */
  padding-block: clamp(4.5rem, 9vh, 7rem) clamp(4rem, 8vw, 6rem);
}

/* --- 左: 説明 --- */
.sb-contact .sbct-intro { display: grid; align-content: start; gap: 0; }

.sb-contact .sbct-intro .sb-pg__title {
  /* 右のフォームと高さを競うので、他ページより一段小さく組む */
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
}

.sb-contact .sbct-intro__sub {
  margin-block-start: clamp(2.25rem, 4vw, 3rem);
  padding-block-end: clamp(.9rem, 1.6vw, 1.2rem);
  border-block-end: 1px solid var(--sb-rule);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2A2E30;
}

.sb-contact .sbct-intro .sb-pg__tags { margin-block-start: 1.25rem; }

.sb-contact .sbct-intro .sb-pg__text { margin-block-start: 1.5rem; }

/* --- 右: フォーム --- */
.sb-contact .sbct-panel {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--sb-paper-2);
  border: 1px solid var(--sb-rule);
}

.sb-contact .sbct-panel__title {
  margin-block-end: clamp(1.5rem, 2.6vw, 2rem);
  padding-block-end: clamp(.9rem, 1.6vw, 1.2rem);
  border-block-end: 1px solid var(--sb-rule);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2A2E30;
}

.sb-contact .sbct-form {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

.sb-contact .sbct-field { display: grid; gap: .45rem; }

.sb-contact .sbct-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.6;
  color: #2A2E30;
}

.sb-contact .sbct-required {
  padding: .1rem .45rem;
  border: 1px solid var(--sb-rule);
  border-radius: 2px;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--sb-mute);
}

/* 入力欄は下線だけ。カードの中で枠を重ねると窮屈になる。 */
.sb-contact :where(.sbct-input, .sbct-select, .sbct-textarea) {
  width: 100%;
  padding: .55rem .2rem;
  background: transparent;
  border: none;
  border-block-end: 1px solid var(--sb-rule);
  border-radius: 0;
  font-family: var(--sb-jp);
  /* iOS Safari は 16px 未満の入力欄をタップするとページを拡大する。
     拡大したまま戻らないので、以降の操作が全部ずれる。

     ⚠ `input, select, textarea { … }` (0,0,1) では勝てない。
        このルールが `.sb-contact :where(…)` = (0,1,0) だから。
        実測で 15px のまま変わらなかった。同じセレクタで書くこと。 */
  font-size: max(1rem, 16px);
  line-height: 1.7;
  color: var(--sb-ink);
  transition: border-color .18s var(--sb-ease);
}

.sb-contact :where(.sbct-input, .sbct-select, .sbct-textarea):focus {
  outline: none;
  border-block-end-color: var(--sb-accent);
}
/* キーボード操作のときは下線だけだと弱いので枠を出す */
.sb-contact :where(.sbct-input, .sbct-select, .sbct-textarea):focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 3px;
}

.sb-contact .sbct-textarea { resize: vertical; min-height: 5.5rem; }

/* select の三角。SWELL の矢印を消してこちらで描く */
.sb-contact .sbct-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(16,18,20,.55) 50%),
                    linear-gradient(135deg, rgba(16,18,20,.55) 50%, transparent 50%);
  background-position: right 1.1rem center, right .75rem center;
  background-size: .35rem .35rem, .35rem .35rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.25rem;
}

.sb-contact .sbct-submit {
  margin-block-start: .35rem;
  padding: .9rem 2rem;
  background: var(--sb-ink);
  color: #fff;
  border: 1px solid var(--sb-ink);
  border-radius: 0;
  font-family: var(--sb-jp);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .18s var(--sb-ease), color .18s var(--sb-ease);
}
.sb-contact .sbct-submit:hover {
  background: transparent;
  color: var(--sb-ink);
}
.sb-contact .sbct-submit:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: 3px;
}

.sb-contact .sbct-error {
  margin-block-end: 1.25rem;
  padding: .8rem 1rem;
  border-inline-start: 2px solid #B3261E;
  background: rgba(179,38,30,.06);
  font-size: .8125rem;
  line-height: 1.8;
  color: #8C1D18;
}

/* ====================================================
   2カラムに開く
   フォームが折り返さずに収まる幅から
   ==================================================== */
@media (min-width: 900px) {
  .sb-contact .sbct-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 27rem);
    align-items: start;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}