/*
 * GCS-543 大会運営者向け問い合わせページ（/organizer）専用スタイル。
 * sponsor_lp.css（GCS-325）から、最小3セクション構成に必要なサブセットのみ複製。
 * Turbo Drive 配下では head 内 inline <style> がマージで揺れるため、外部化必須。
 * CSS 変数は legacy/zenkoku/import.css 由来（--main-color / --accent-color 等）を使い回す。
 * すべて .organizer-lp スコープでグローバルへの汚染を防ぐ。
 */

.organizer-lp {
  --accent-color-rgb: 44, 179, 74;
  font-family: 'Noto Sans JP', sans-serif;
  color: #1f2933;
  background: #fff;
}

.organizer-lp .text-main   { color: var(--main-color); }
.organizer-lp .bg-main     { background: var(--main-color); }
.organizer-lp .text-accent { color: var(--accent-color); }
.organizer-lp .bg-accent   { background: var(--accent-color); }
.organizer-lp .border-accent { border-color: var(--accent-color); }

/* カード共通のソフトシャドウ + ホバーで軽く持ち上げる */
.organizer-lp .card-soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: all .2s ease;
}
.organizer-lp .card-soft:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
}

/* CTA ボタン群 — display:inline-block を付けないと <a> の transform が効かない */
.organizer-lp .btn-primary {
  display: inline-block;
  background: var(--accent-color);
  color: #fff;
  transition: all .15s ease;
}
.organizer-lp .btn-primary:hover {
  filter: brightness(.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

.organizer-lp .btn-outline {
  display: inline-block;
  border: 1.5px solid var(--main-color);
  color: var(--main-color);
  transition: all .15s ease;
}
.organizer-lp .btn-outline:hover {
  background: var(--main-color);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

/* フォーム種別トグル */
.organizer-lp .cta-toggle {
  padding: .6rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .875rem;
  color: var(--main-color);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all .15s ease;
}
.organizer-lp .cta-toggle-active {
  background: var(--accent-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-color-rgb), .35);
}

/* フォーム要素 */
.organizer-lp .f-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--main-color);
  margin-bottom: .35rem;
}
.organizer-lp .f-req {
  color: var(--alert-color);
  font-size: .7rem;
  margin-left: .25rem;
}
.organizer-lp .f-input {
  width: 100%;
  border: 1px solid var(--dark-base-color);
  border-radius: .6rem;
  padding: .6rem .8rem;
  font-size: .9rem;
  background: #fff;
  color: #1f2933;
  transition: border-color .15s;
}
.organizer-lp .f-input:focus {
  outline: none;
  border-color: var(--main-color);
}
.organizer-lp textarea.f-input {
  resize: none;
}

/* honeypot（スパム対策）— 画面外に飛ばして人間には見えなくする */
.organizer-lp .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* home layout は Tailwind の preflight を無効にしているため、
   ブラウザデフォルトの ul/ol の padding-left: 40px と margin、及び list-style（マーカー）が
   残ってしまう。.organizer-lp ul への全称リセットは詳細度（0,1,1）が Tailwind の
   list-disc/pl-5（各 0,1,0）より高く、_form.html.erb のバリデーションエラー一覧の
   箇条書き表示まで巻き込んで消してしまうため（PRレビュー指摘・実機確認済み）、
   フラットな一覧にしたい箇所（グリッド表示のカード一覧）にだけ個別付与するクラスにする。 */
.organizer-lp .list-flat {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* スムーズスクロール — ページ内アンカー（#cta-bottom）への遷移用 */
.organizer-lp { scroll-behavior: smooth; }

/* ページ内アンカーへの sticky ヘッダー分のオフセット */
.organizer-lp [id^="cta-"] {
  scroll-margin-top: 80px;
}

/* 情報発信価値セクションのデモ画像（スマホ画面のスクリーンショット）を
   スマホフレーム風に見せる。画像自体は縦長のフルスクリーンショットなので、
   object-fit: cover + object-position: top で上部（最も伝えたい情報）を優先表示する。
   アスペクト比はデモ画像の実寸（1170x2532）に合わせて固定。
   1カラム縦積みになる sm 未満（Tailwind の sm:grid-cols-3 と同じ 640px を境目にする）では
   220px のままだと画面幅に対して画像が大きすぎ、リード文・キャプションとのバランスが崩れて
   読みにくくなるため、幅を絞る（PRレビュー指摘）。 */
.organizer-lp .value-phone-frame {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1170 / 2532;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 6px solid #1f2933;
  background: #fff;
}

@media (max-width: 639px) {
  .organizer-lp .value-phone-frame {
    max-width: 150px;
  }
}