/* 特設LP（/offers/*）の共通。
   site.css と nav.css は本番のまま読み、足りないところだけここで補う。
   色・書体・罫線の値は site.css のトークンだけを使う。新しい色は作らない。 */

/* ---------- 和文の改行 ----------
   見出しやリードが単語の途中で折れないように、文節で折る。
   対応していないブラウザでは通常の折り返しになるだけなので害はない。 */
.offer :where(h1, h2, h3, .display, .lead, li, dt, dd, p) { word-break: auto-phrase; }

/* 数字と単位、リンクと助詞を離さない */
.nw { white-space: nowrap; }

/* 幅で出し分ける改行 */
.br-sp { display: none; }
@media (max-width: 47.99rem) {
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

/* ---------- FV ---------- */

/* 名前は display の大きさだと和文が強く出すぎる。英字の Let's talk と同じ字面の重さに寄せる */
.offer .entry-head .display { font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.3; }

/* AX を初めて出した直後の一文 */
.offer-define {
  margin: 1rem 0 0;
  font-size: .9375rem;
  line-height: 1.9;
  color: var(--ink-60);
}

/* 主CTA。明色面なので site.css の .button-light（サービスページ冒頭の黒いボタン）を使い、
   下に返信の目安を小さく添える */
.offer-action { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.offer-action-note { margin: 0; font-size: .8125rem; line-height: 1.8; color: var(--ink-50); }

/* ---------- こんな会社に ---------- */

/* 向いていない場合の案内。押し付けず、本文より一段小さく */
.offer-notfor {
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  display: grid;
  gap: .5rem;
  font-size: .875rem;
  line-height: 1.85;
  color: var(--ink-60);
}
.offer-notfor a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-color: var(--ink-30);
}
.offer-notfor a:hover { text-decoration-color: var(--ink); }
.prose .offer-notfor { padding-left: 0; }
.prose .offer-notfor li + li { margin-top: 0; }

/* ---------- お問い合わせ ---------- */

.offer-contact { scroll-margin-top: 1.5rem; }
.offer-contact-head { margin-bottom: 3rem; }
.offer-contact-head h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--ls);
}
.offer-contact-head p { margin: 0; color: var(--ink-60); max-width: var(--measure); }

/* 選択済みの項目は、プレースホルダではなく値の濃さで見せる */
.field select { color: var(--ink); }

/* 「Webサイト制作パッケージ（20万円・税別）」は 390px 幅の select に1行で収まらず、
   末尾の価格が切れる。選んである項目こそ読めないと困るので、
   対応しているブラウザでは select の表示を折り返せる型にする。
   見た目（地・罫線・矢印）は site.css の .field select のまま。
   未対応のブラウザは従来の select に戻るだけ */
@supports (appearance: base-select) {
  .offer .field select,
  .offer .field select::picker(select) { appearance: base-select; }
  .offer .field select {
    white-space: normal;
    word-break: auto-phrase;
    text-align: left;
    border-radius: 4px;
  }
  .offer .field select::picker-icon { display: none; }
  .offer .field select::picker(select) {
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper);
  }
}

/* ---------- 狭い画面 ----------
   ヘッダーとパンくずだけで 844px の高さの 2割を使うと、価格が最初の画面から落ちる。
   パンくず下の余白だけ詰める */
@media (max-width: 47.99rem) {
  .offer .breadcrumb { padding-block: 1.25rem 2.25rem; }
  .offer-action { margin-top: 2rem; }
  .offer-action .button-light { min-height: 52px; width: auto; }
}