/* ==========================================================================
   THE DIFFERENT ― /media/entry/ のフォーム部分の追加スタイル

   media.css の後に読む。トークン（--paper / --surface / --brand-red / --ink /
   --ink-sub / --hair / --font-ja / --measure / --s*）は media.css の :root を
   そのまま使い、ここでは新しい色もフォントも足さない。

   ■ なぜ Bootstrap のクラス名が残っているか
   フォームの HTML は UTAGE 側の受け口（try.ishot.jp/r/cFM5Mdkpm1ic/store）に
   合わせた原本をそのまま貼っている。action と name 属性がズレると受信できないため、
   マークアップには一切手を入れない方針にした。結果として Bootstrap 前提の
   form-control / card-body / form-group / badge badge-danger /
   btn btn-block btn-success btn-lg が残る。THE DIFFERENT は Bootstrap を
   読み込んでいないので、クラス名はそのままに、見た目だけここで作り直す。

   ■ 誌面の作法（media.css と揃える）
   ・角丸なし（--radius-photo 以外は 0）
   ・影は使わない
   ・赤は #CC0000（--brand-red）／ホバーは #960000（--brand-red-deep）のみ。
     btn-success の緑は一切出さない
   ・書体は明朝（--font-ja）。フォームだけゴシックにしない
   ・本文サイズは PC 17px / SP 16.5px 以上（web-ui-principles 原則4-3）
   ・タップターゲットは 44px 以上（原則4）
   ========================================================================== */

/* ------------------------------------------------------------------ 前置き */
.cform-intro{
  max-width:var(--measure);
  font-size:16.5px;line-height:1.9;color:var(--ink-sub);
  margin-top:clamp(14px,2vw,20px);
}
.cform-intro .ulink{color:var(--ink)}

/* リンクのラベルは途中で折らない。
   このページのリンクはどれも本文中に置かれた短いラベル（記事掲載規約／
   プライバシーポリシー／取材の申し込みについて）で、赤い下線が2行に割れると
   別々の2本のリンクに見えてしまう。ラベルは最長でも11字なので 390px でも収まる。
   万一収まらないときは body の overflow-wrap:anywhere が最後の逃げ道になる。
   ※ 地の文の改行は媒体の作法どおりブラウザ任せのまま（keep-all は見出しだけ）。 */
.p-entry .ulink{word-break:keep-all}

/* 社名・電話番号の連結保護。body の overflow-wrap:anywhere が効いているため、
   放っておくと 390px で「i-」「SHOT株式会社」のように途中で割れる
   （japanese-readability 2-3 の連結保護に相当）。 */
.p-entry .nb{white-space:nowrap}

/* -------------------------------------------------------------- フォーム枠 */
.cform{max-width:var(--measure)}

/* Bootstrap の .card-body（本来は白カード＋角丸＋影）を、
   誌面の「緊張ビートの地」と同じ無彩の面に置き換える。入力欄だけ白に抜く。 */
.cform .card-body{
  background:var(--surface);
  padding:clamp(22px,3.6vw,40px);
  border:0;
  border-radius:0;
  box-shadow:none;
}

.cform .form-group{
  position:relative;          /* サジェストのドロップダウンの位置基準 */
  margin-bottom:clamp(20px,3vw,28px);
}

.cform label{
  display:block;
  font-size:17px;font-weight:700;line-height:1.6;
  color:var(--ink);
  margin-bottom:8px;
}
@media (max-width:767px){ .cform label{font-size:16.5px} }

/* 「必須」バッジ。塗りの赤を4つ並べるとブランド色が安売りになるので、
   線と文字だけの赤にする（赤は #CC0000 のみ・角丸なし）。 */
.cform .badge{
  display:inline-block;
  vertical-align:2px;
  font-weight:400;
}
.cform .badge-danger{
  margin-left:8px;
  padding:1px 9px 2px;
  font-size:13px;line-height:1.6;
  color:var(--brand-red);
  background:transparent;
  border:1px solid var(--brand-red);
  border-radius:0;
  white-space:nowrap;
}

/* ------------------------------------------------------------------ 入力欄 */
.cform .form-control{
  display:block;
  width:100%;
  min-height:52px;                 /* タップターゲット 44px 以上 */
  padding:13px 15px;
  font-family:var(--font-ja);
  font-size:17px;                  /* iOS の自動ズーム閾値(16px)も超える */
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  border:1px solid #A8A8A8;        /* --hair(#DDD) は入力欄の枠には薄すぎる */
  border-radius:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .18s ease;
}
@media (max-width:767px){ .cform .form-control{font-size:16.5px} }
.cform .form-control:hover{border-color:var(--ink-sub)}
.cform .form-control:focus{border-color:var(--ink)}
/* フォーカスリングは media.css の *:focus-visible（赤2px）に任せる。
   offset だけ、面(--surface)の上で見やすい値に詰める。 */
.cform .form-control:focus-visible{outline-offset:2px}

/* --------------------------------------------------------------- 送信ボタン */
/* .btn 本体（赤地・白文字・角丸なし・nowrap）は media.css の定義をそのまま使う。
   ここでは block 化とサイズだけ足し、btn-success の緑は定義しない。 */
.cform .btn-block{
  display:flex;
  width:100%;
  margin-top:clamp(24px,3.4vw,32px);
}
.cform .btn-lg{
  min-height:60px;
  padding:16px 24px;
  font-size:18px;
}
/* 原則4-2: ラベルは絶対に折り返さない（media.css の .btn が white-space:nowrap） */
@media (max-width:480px){
  .cform .btn-lg{font-size:16.5px;padding:16px 16px}
}
/* Bootstrap の緑を打ち消す（読み込んでいないので念のための明示） */
.cform .btn-success{
  background:var(--brand-red);
  border-color:var(--brand-red);
  color:var(--paper);
}
.cform .btn-success:hover{
  background:var(--brand-red-deep);
  border-color:var(--brand-red-deep);
}

/* -------------------------------------------------------- 送信ボタン脇の注記 */
.cform-note{
  max-width:var(--measure);
  margin-top:clamp(16px,2.4vw,20px);
  font-size:14.5px;line-height:1.85;color:var(--ink-sub);
}
.cform-note + .cform-note{margin-top:10px}

/* ==========================================================================
   会社名サジェスト（company-suggest.js が生成する要素）

   正本 ishot-company/guidelines/utage-snippets/company-name-suggest.html の
   <style> 部分。UTAGE(Bootstrap)向けの角丸・影・Bootstrap赤(#d9534f)だけを
   THE DIFFERENT の作法に合わせ、文字サイズは原則4-3にならって引き上げた。
   クラス名と構造は正本と同じなので、JS 側は一切変えていない。
   ========================================================================== */
.company-suggest-box{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:60;                     /* .mnav が z-index:80 なので、その下 */
  background:var(--paper);
  border:1px solid var(--ink);
  border-top:none;
  border-radius:0;                /* 角丸なし */
  box-shadow:none;                /* 影は使わない */
  max-height:280px;
  overflow-y:auto;
}
.company-suggest-box .cs-item{
  padding:12px 14px;              /* 16px×1.4 + 24px ≒ 46px（44px以上） */
  cursor:pointer;
  font-size:16px;
  line-height:1.4;
  border-bottom:1px solid var(--hair);
}
.company-suggest-box .cs-item:last-child{border-bottom:none}
.company-suggest-box .cs-item.cs-active,
.company-suggest-box .cs-item:hover{background:var(--surface)}
.company-suggest-box .cs-name{
  color:var(--ink);
  font-weight:700;
}
.company-suggest-box .cs-sub{
  color:var(--ink-sub);
  font-size:14px;
  margin-top:3px;
}
.company-suggest-box .cs-powered{
  padding:7px 14px;
  text-align:right;
  font-size:13px;
  color:var(--ink-sub);
  background:var(--surface);
}

/* フォーカス時の案内文 */
.company-suggest-instruction{
  display:none;
  margin-top:8px;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-sub);
}

/* 必須エラーの吹き出し */
.company-suggest-error{
  display:none;
  position:relative;
  margin-top:10px;
  padding:8px 12px;
  background:var(--brand-red);
  color:var(--paper);
  font-size:14px;
  line-height:1.5;
  border-radius:0;
  box-shadow:none;
}
.company-suggest-error::before{
  content:'';
  position:absolute;
  top:-6px;
  left:18px;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid var(--brand-red);
}

@media (prefers-reduced-motion:reduce){
  .cform .form-control{transition:none}
}