@charset "UTF-8";
/* =============================================================================
   お問い合わせフォーム ページ（page-contact.php）用
   ・上部：見出し（左）＋リード（右）
   ・白いカード内に Snow Monkey Form（左：ステップ / 右：フォーム）
   ・トークン（--mn-*）はこのファイル内で定義（自己完結。style.css 不要）
   ・詳細度を .news.contact ... で高くし、SMF標準CSSより優先させる
   ============================================================================= */

/* -----------------------------------------------------------------------------
   デザイン変数・基本設定（自己完結：media_news の style.css を読み込まなくても動く）
   ※ media_news の新デザイン（style.css）を導入済みの環境では同値のため無害
   -------------------------------------------------------------------------- */
.news {
  --mn-max: 1360px;
  --mn-gutter: clamp(16px, 3vw, 32px);
  --mn-text: #707070;
  --mn-muted: #666;
  --mn-line: #d9d9d9;
  --mn-accent: #1267d4;
  --mn-radius: 8px;
  --mn-font-jp: "Noto Sans JP", sans-serif;
  --mn-font-jp-serif: "Noto Serif JP", serif;
  --mn-font-en: "Marcellus", serif;
}
/* width:100% ＋ padding での横スクロール防止 */
.news,
.news *,
.news *::before,
.news *::after {
  box-sizing: border-box;
}
/* body{font-size:88%} を打ち消して 16px 基準に戻す */
.news {
  color: var(--mn-text);
  font-family: var(--mn-font-jp);
  font-size: 1rem;
  line-height: 1.8;
}
/* 共通ヘッダー（.l-header）の背景色をこのページでは透明に */
.l-header {
  background-color: transparent;
}

/* -----------------------------------------------------------------------------
   上部：見出し（左）＋リード（右）
   -------------------------------------------------------------------------- */
.news.contact .contact_head {
  align-items: flex-start;
  display: flex;
  gap: clamp(24px, 4vw, 64px);
  justify-content: space-between; /* 見出し左・リード（説明文）右 */
  margin: 0 auto clamp(28px, 4vw, 48px);
  max-width: var(--mn-max);
  padding-inline: 0;
  width: calc(100% - var(--mn-gutter) * 2);
}
.news.contact .contact_head__ttl {
  flex-shrink: 0; /* 見出しは自然幅で左寄せ */
}
.news.contact .contact_en {
  color: var(--mn-text);
  font-family: var(--mn-font-en);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.1;
  margin: 0;
  text-align: left;
  text-transform: uppercase; /* 「Contact」→「CONTACT」など英語見出しは常に大文字表記 */
}
.news.contact .contact_ja {
  color: var(--mn-muted);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  margin-top: 8px;
}
/* 各フォームページ（お問い合わせ入力フォーム）のみ：英語見出しを小さく・日本語を大きく。
   扉ページ（CONTACT TOP）は対象外。PC/SP共通。 */
.news.contact:not(.contact-top) .contact_en {
  font-size: 1.25rem;
}
.news.contact:not(.contact-top) .contact_ja {
  /* 広い画面で30px、狭くなると縮小（最小28px）。※min値はご要望に応じて調整可 */
  font-size: clamp(28px, 3.4vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1.35; /* 2行タイトルの行間を詰める（CONTACTと1行目の間隔と揃える） */
  margin-top: 6px;
}
.news.contact .contact_head__lead {
  color: var(--mn-muted);
  font-size: 0.8125rem; /* 説明文は少し小さめ（存在感を抑える） */
  line-height: 1.9;
  max-width: 480px;
  padding-top: 8px;
}
.news.contact .contact_head__lead p {
  font-family: var(--mn-font-jp); /* サンセリフ（ゴシック） */
}
/* 卸売登録依頼フォームは説明文が長いため、リード幅を広げる */
.news.contact--jewerly_restration .contact_head__lead {
  max-width: 730px;
}

/* SP・タブレット：グローバルメニューとタイトルが近すぎるため、見出し上に余白を追加
   （CONTACT TOP・各フォーム共通） */
@media screen and (max-width: 1024px) {
  .news.contact .contact_head {
    margin-top: clamp(28px, 5vw, 44px);
  }
}

/* -----------------------------------------------------------------------------
   白いカード
   -------------------------------------------------------------------------- */
.news.contact .contact_card {
  background-color: #fff;
  margin: 0 auto clamp(64px, 8vw, 120px);
  max-width: var(--mn-max);
  padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 80px);
  width: calc(100% - var(--mn-gutter) * 2);
}

/* =============================================================================
   Snow Monkey Forms
   構造: form.snow-monkey-form > (.smf-progress-tracker, .smf-form, .smf-action ...)
   ============================================================================= */

/* --- PC：ステップ（左）＋フォーム（右）の2カラム --- */
@media screen and (min-width: 769px) {
  .news.contact form.snow-monkey-form {
    align-items: flex-start;
    column-gap: clamp(32px, 5vw, 72px);
    display: flex;
    flex-wrap: wrap;
  }
  .news.contact form.snow-monkey-form .smf-focus-point {
    flex-basis: 100%;
    height: 0;
    margin: 0;
  }
  .news.contact form.snow-monkey-form .smf-progress-tracker {
    flex: 0 0 200px;
  }
  .news.contact form.snow-monkey-form .smf-form {
    flex: 1;
    min-width: 0;
  }
  .news.contact form.snow-monkey-form .smf-action,
  .news.contact form.snow-monkey-form .smf-system-error-content-ready {
    flex-basis: 100%;
  }
}

/* --- プログレストラッカー --- */
.news.contact .smf-progress-tracker {
  display: flex;
  flex-direction: column;
  gap: 22px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.news.contact .smf-progress-tracker__item {
  align-items: center;
  color: var(--mn-muted);
  display: flex;
  flex-direction: row;   /* SMF標準の column を打ち消す */
  gap: 12px;
  margin: 0;
  width: 100%;           /* SMF標準の 33.33333% を打ち消す */
}
/* SMF標準の接続線（擬似要素）は使わない */
.news.contact .smf-progress-tracker__item::before,
.news.contact .smf-progress-tracker__item::after {
  content: none !important;
}
.news.contact .smf-progress-tracker__item__number {
  background-color: var(--mn-line);
  border-radius: 50%;
  color: transparent;
  flex-shrink: 0;
  font-size: 0;          /* 円の中の数字は非表示（丸のみ） */
  height: 12px;
  overflow: hidden;
  width: 12px;
}
.news.contact .smf-progress-tracker__item__text {
  font-size: 0.9375rem;
  line-height: 1.4;
}
/* 画面読み上げ用テキストは非表示 */
.news.contact .smf-progress-tracker__item__text .screen-reader-text {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
/* 現在のステップを強調（data-screen もしくは aria-current） */
.news.contact .smf-progress-tracker__item[aria-current="true"] {
  color: var(--mn-text);
  font-weight: 600;
}
.news.contact .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
  background-color: var(--mn-text);
}
.news.contact form[data-screen="input"] .smf-progress-tracker__item--input,
.news.contact form[data-screen="confirm"] .smf-progress-tracker__item--confirm,
.news.contact form[data-screen="complete"] .smf-progress-tracker__item--complete {
  color: var(--mn-text);
  font-weight: 600;
}
.news.contact form[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__number,
.news.contact form[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__number,
.news.contact form[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__number {
  background-color: var(--mn-text);
}
/* ステップ名をデザインの文言に差し替え（SMF標準文言を隠して上書き） */
.news.contact .smf-progress-tracker__item__text {
  position: relative;
}
.news.contact .smf-progress-tracker__item--input .smf-progress-tracker__item__text,
.news.contact .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text,
.news.contact .smf-progress-tracker__item--complete .smf-progress-tracker__item__text {
  color: transparent;
  font-size: 0;
}
.news.contact .smf-progress-tracker__item--input .smf-progress-tracker__item__text::after { content: "お客様情報入力"; }
.news.contact .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text::after { content: "入力内容確認"; }
.news.contact .smf-progress-tracker__item--complete .smf-progress-tracker__item__text::after { content: "送信完了"; }
.news.contact .smf-progress-tracker__item__text::after {
  color: var(--mn-muted);
  font-family: var(--mn-font-jp);
  font-size: 0.9375rem;
}
.news.contact .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text::after,
.news.contact form[data-screen="input"] .smf-progress-tracker__item--input .smf-progress-tracker__item__text::after,
.news.contact form[data-screen="confirm"] .smf-progress-tracker__item--confirm .smf-progress-tracker__item__text::after,
.news.contact form[data-screen="complete"] .smf-progress-tracker__item--complete .smf-progress-tracker__item__text::after {
  color: var(--mn-text);
}

/* --- フォーム本体（項目は縦積み・全幅） --- */
/* フォーム内はラベル・入力値・確認画面テキスト等、全要素をサンセリフ（Noto Sans JP）に統一。
   各要素には Snow Monkey Forms 本体のCSSが直接あたっており継承では効かないため、
   配下の全要素を直接指定し !important で確実に上書きする。 */
.news.contact form.snow-monkey-form,
.news.contact form.snow-monkey-form * {
  font-family: var(--mn-font-jp) !important;
}
.news.contact .smf-form {
  display: block;
}
.news.contact .smf-item {
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.news.contact .smf-item:last-child {
  margin-bottom: 0;
}
/* 確認画面：項目同士の区切りに薄いボーダー */
.news.contact form.snow-monkey-form[data-screen="confirm"] .smf-item {
  border-bottom: 1px solid var(--mn-line);
  margin-bottom: clamp(16px, 2vw, 22px);
  padding-bottom: clamp(16px, 2vw, 22px);
}
.news.contact form.snow-monkey-form[data-screen="confirm"] .smf-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.news.contact .smf-item__col--label {
  margin-bottom: 10px;
}
.news.contact .smf-item__label__text {
  color: var(--mn-text);
  font-size: 1rem;
  font-weight: 500;
}
/* 必須バッジ：required バリデーションを持つ項目に自動付与（:has 対応ブラウザ） */
.news.contact .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
  background-color: var(--mn-text);
  border-radius: 999px;
  color: #fff;
  content: "必須";
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-left: 8px;
  padding: 4px 9px;
  vertical-align: middle;
}

/* 確認画面・完了画面では「必須」バッジを非表示 */
.news.contact form.snow-monkey-form[data-screen="confirm"] .smf-item .smf-item__label__text::after,
.news.contact form.snow-monkey-form[data-screen="complete"] .smf-item .smf-item__label__text::after {
  display: none;
}

/* 入力欄 */
.news.contact .smf-text-control__control,
.news.contact .smf-textarea-control__control,
.news.contact .smf-select-control__control,
.news.contact .contact_card input[type="text"],
.news.contact .contact_card input[type="email"],
.news.contact .contact_card input[type="tel"],
.news.contact .contact_card textarea,
.news.contact .contact_card select {
  background-color: #fff;
  border: 1px solid var(--mn-line);
  border-radius: 2px;
  color: var(--mn-text);
  font-family: var(--mn-font-jp);
  font-size: 1rem;
  padding: 14px 16px;
  width: 100%;
}
.news.contact .smf-textarea-control__control,
.news.contact .contact_card textarea {
  min-height: 200px;
  resize: vertical;
}
.news.contact .smf-text-control__control:focus,
.news.contact .smf-textarea-control__control:focus,
.news.contact .contact_card input:focus,
.news.contact .contact_card textarea:focus {
  border-color: var(--mn-text);
  outline: none;
}

/* --- セレクトボックス（プルダウン）：独自の下向き矢印 --- */
.news.contact .smf-select-control__control,
.news.contact .contact_card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%201.5L6%206.5L11%201.5%22%20stroke%3D%22%23707070%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  padding-right: 40px; /* 矢印と文字が重ならないように */
}

/* --- チェックボックス／ラジオボタン --- */
/* 選択肢グループのコンテナを flex にして横並び＋折り返しにする。
   （SMFの実クラス名：.smf-checkboxes-control / .smf-radio-buttons-control と
     その __control。どちらの階層に選択肢が入っても効くよう両方指定） */
.news.contact .smf-checkboxes-control,
.news.contact .smf-checkboxes-control__control,
.news.contact .smf-radio-buttons-control,
.news.contact .smf-radio-buttons-control__control {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px; /* 縦の隙間 / 横の隙間 */
}
/* 各選択肢（input＋テキスト） */
.news.contact .smf-checkbox-control,
.news.contact .smf-radio-button-control,
.news.contact .smf-item__col--controls label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;   /* チェック/ラジオ と テキストの間 */
  line-height: 1.6;
  margin: 0;  /* 間隔はコンテナの gap で確保 */
}
/* ネイティブのチェック/ラジオをブランド色で少し大きく */
.news.contact .smf-item__col--controls input[type="checkbox"],
.news.contact .smf-item__col--controls input[type="radio"] {
  accent-color: #1a1a1a;
  cursor: pointer;
  flex-shrink: 0;
  height: 18px;
  margin: 0;
  width: 18px;
}

/* --- ボタン（確認する／送信する／戻る） --- */
.news.contact .smf-action {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 48px);
}
.news.contact .smf-action button,
.news.contact .smf-action input[type="submit"],
.news.contact .smf-action input[type="button"],
.news.contact .smf-action .smf-button-control__control {
  align-items: center;
  background-color: #1a1a1a;
  background-image: none !important;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  font-family: var(--mn-font-jp);
  font-size: 1rem;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 300px;
  padding: 17px 40px;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}
.news.contact .smf-action button:hover,
.news.contact .smf-action input[type="submit"]:hover,
.news.contact .smf-action input[type="button"]:hover,
.news.contact .smf-action .smf-button-control__control:hover {
  opacity: 0.85;
}
/* 「確認する／送信する」に矢印 */
.news.contact .smf-action .smf-button-control__control:not(.smf-backward-button):not([data-action="back"])::after,
.news.contact .smf-action .smf-forward-button::after,
.news.contact .smf-action .smf-submit-button::after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%228%22%20viewBox%3D%220%200%2017%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.252%203.5L16.9922%203.93164L16.252%204.36328L10.252%207.86328L9.74805%207L14.1504%204.43164L0%204.43164L0%203.43164L14.1504%203.43164L9.74805%200.863281L10.252%200L16.252%203.5ZM15%203.93555L15.0078%203.93164L15%203.92676V3.93555Z%22%20fill%3D%22%23EFEFEF%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8px;
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
}
/* 「戻る」はアウトライン */
.news.contact .smf-action .smf-backward-button,
.news.contact .smf-action .smf-button-control__control[data-action="back"] {
  background-color: #fff;
  border-color: #1a1a1a;
  color: #1a1a1a;
  min-width: 170px;
}
.news.contact .smf-action .smf-backward-button:hover,
.news.contact .smf-action .smf-button-control__control[data-action="back"]:hover {
  background-color: #1a1a1a;
  color: #fff;
  opacity: 1;
}

/* エラー */
.news.contact .smf-system-error-content-ready,
.news.contact .smf-error-messages {
  color: #cf2e2e;
  font-size: 0.875rem;
  margin-top: 8px;
}
/* 送信ブロック時のメッセージ（複数エラーの改行を活かす） */
.news.contact .smf-system-error,
.news.contact .smf-system-error-content-ready {
  white-space: pre-line;
}

/* -----------------------------------------------------------------------------
   SP（〜768px）：1カラム（ステップは上・横並び）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .news.contact .contact_head {
    flex-direction: column;
    gap: 16px;
  }
  .news.contact .contact_head__ttl {
    width: auto; /* SPは縦積みなので固定幅を解除 */
  }
  .news.contact .contact_head__lead {
    max-width: 100%;
  }
  .news.contact .contact_card {
    padding: 28px 20px;
    width: calc(100% - var(--mn-gutter) * 2);
  }
  .news.contact .smf-progress-tracker {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 20px;
    justify-content: center;
  }
  .news.contact .smf-action {
    flex-direction: column;
  }
  .news.contact .smf-action button {
    min-width: 0;
    width: 100%;
  }
  .news.contact .smf-action .smf-backward-button {
    order: 2;
    width: 100%;
  }
}


/* =============================================================================
   ページ背景（#f6f6f9 ＋ 背景画像）／カードは白
   ============================================================================= */
.news.contact {
  background-color: #f6f6f9;
  background-image: none !important;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.news.contact .contact_card {
  background-color: #fff;
}

/* ============================================================
   画面別の出し分け（段落ブロックに追加CSSクラスを付与して使用）
   - only-confirm : 確認画面だけに表示
   - only-input   : 入力画面（＋エラー時）だけに表示
   ※ data-screen はフォーム要素自体に付くため、子要素側で判定する
   ============================================================ */

/* 確認画面だけに表示するテキスト（例：「入力内容にお間違いがなければ〜」） */
.news.contact .only-confirm {
  display: none;
}
.news.contact form.snow-monkey-form[data-screen="confirm"] .only-confirm {
  display: block;
  margin: 0 0 1.5em;
  text-align: center;
  color: var(--mn-text);
}

/* 入力画面（＋エラー時）だけに表示するテキスト（必要な場合） */
.news.contact form.snow-monkey-form[data-screen="confirm"] .only-input,
.news.contact form.snow-monkey-form[data-screen="complete"] .only-input {
  display: none;
}

/* 項目の補足説明（各項目の下に置く段落ブロックに「form-note only-input」を付与）
   例：「上記住所と同じ場合は記入の必要はございません。」 */
.news.contact .form-note {
  color: var(--mn-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 6px 0 0;
}

/* 完了画面だけに表示（例：「TOPページへ戻る」ボタン） */
.news.contact .only-complete {
  display: none;
}
.news.contact form.snow-monkey-form[data-screen="complete"] .only-complete {
  display: block;
}

/* ============================================================
   完了画面「TOPページへ戻る」ボタン
   使い方：完了画面メッセージ内に「ボタン」ブロック（または
   リンク）を置き、追加CSSクラスに「only-complete contact_backtop」を指定。
   ※メッセージ設定でブロックが使えない場合は、
     <a class="only-complete contact_backtop" href="/">TOPページへ戻る</a>
     をHTMLで記述してもOK。
   ============================================================ */
.news.contact .contact_backtop {
  margin-top: clamp(28px, 4vw, 48px);
  text-align: center;
}
/* ボタンブロック／素のリンク どちらでも同じ見た目に */
.news.contact .contact_backtop .wp-block-button__link,
.news.contact a.contact_backtop,
.news.contact .contact_backtop > a {
  align-items: center;
  background-color: #1a1a1a;
  background-image: none !important;
  border: 1px solid #1a1a1a;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  position: relative;
  font-family: var(--mn-font-jp);
  font-size: 1rem;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 300px;
  padding: 17px 40px;
  text-decoration: none;
  transition: background-color 0.4s ease, opacity 0.4s ease;
}
.news.contact .contact_backtop .wp-block-button__link:hover,
.news.contact a.contact_backtop:hover,
.news.contact .contact_backtop > a:hover {
  opacity: 0.85;
}
/* 右端に矢印（送信ボタンと同じデザイン） */
.news.contact .contact_backtop .wp-block-button__link::after,
.news.contact a.contact_backtop::after,
.news.contact .contact_backtop > a::after {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%228%22%20viewBox%3D%220%200%2017%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.252%203.5L16.9922%203.93164L16.252%204.36328L10.252%207.86328L9.74805%207L14.1504%204.43164L0%204.43164L0%203.43164L14.1504%203.43164L9.74805%200.863281L10.252%200L16.252%203.5ZM15%203.93555L15.0078%203.93164L15%203.92676V3.93555Z%22%20fill%3D%22%23EFEFEF%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 8px;
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
}

/* =============================================================================
   CONTACT TOP（扉ページ：page-contact-top.php / main.news.contact.contact-top）
   ============================================================================= */

/* 見出し（左）＋説明文（右）。説明文の右端を白いパネル（＝コンテンツ右端）に揃える。
   ベースの justify-content:space-between により右端が揃う。 */
.news.contact.contact-top .contact_head__lead {
  flex: 0 1 auto;
  margin-right: 0;
  max-width: 520px; /* 説明文の横幅 */
  padding-top: 8px;
}
/* タイトルの色を子会社名と同じ黒に */
.news.contact-top .contact_en {
  color: #1a1a1a;
}

/* 事業カードのリスト */
.news.contact-top .ctop_list {
  margin: 0 auto clamp(64px, 8vw, 120px);
  max-width: var(--mn-max);
  width: calc(100% - var(--mn-gutter) * 2);
}
.news.contact-top .ctop_row {
  align-items: flex-start;
  background: #fff;               /* 各行を白背景のパネルに */
  display: flex;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(16px, 2vw, 24px);
  padding: clamp(28px, 3vw, 44px) clamp(32px, 4.5vw, 80px);
}

/* WSP-W（2フォーム）のみ：見出しを上に、導入エリアを左右2カラムに */
.news.contact-top .ctop_row--stack {
  display: block;
}
.news.contact-top .ctop_row--stack .ctop_row__head {
  margin-bottom: clamp(16px, 2vw, 26px);
}
.news.contact-top .ctop_row--stack .ctop_row__body--two {
  width: 100%; /* 見出しの下で全幅に2カラム展開（各カードは1frで等幅） */
}

/* 左：英字ラベル＋ブランド名 */
.news.contact-top .ctop_row__head {
  flex: 0 0 40%;
}
.news.contact-top .ctop_row__en {
  color: var(--mn-muted);
  font-family: var(--mn-font-en);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
}
.news.contact-top .ctop_row__name {
  color: #1a1a1a;
  font-family: var(--mn-font-en);
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.15;
  margin: 0;
}

/* 右：説明カード（淡色ボックス） */
.news.contact-top .ctop_row__body {
  flex: 1 1 auto;
}
/* 単一カードの行は、カード幅をWSP-Wの1枚分（＝行内幅を2分割した幅）に揃えて右寄せ。
   これで全行のグラデーションカードの横幅が統一される。 */
.news.contact-top .ctop_row__body:not(.ctop_row__body--two) {
  flex: 0 0 calc((100% - clamp(16px, 2vw, 28px)) / 2);
  margin-left: auto;
}
.news.contact-top .ctop_row__body--two {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 全幅を2分割・完全等幅 */
}
.news.contact-top .ctop_card {
  background: linear-gradient(135deg, #f5f1f2 0%, #ece5e7 55%, #e6dee0 100%);
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2.4vw, 40px);
}
.news.contact-top .ctop_card__desc,
.news.contact-top .ctop_card__ttl {
  color: #333;
  font-family: var(--mn-font-jp-serif); /* 明朝（Noto Serif JP） */
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  margin: 0 0 20px;
}
.news.contact-top .ctop_card__ttl {
  margin-bottom: 4px;
}
.news.contact-top .ctop_card__note {
  color: var(--mn-muted);
  font-family: var(--mn-font-jp);
  font-size: 0.8125rem;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* ボタン（白い角丸ピル＋矢印） */
.news.contact-top .ctop_btn {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  color: #1a1a1a;
  display: inline-flex;
  font-family: var(--mn-font-jp);
  font-size: 0.8125rem;
  gap: 20px;
  justify-content: space-between;
  letter-spacing: 0.04em;
  min-width: 230px;
  padding: 13px 22px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.news.contact-top .ctop_btn:hover {
  opacity: 0.75;
}
.news.contact-top .ctop_btn__arrow {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%228%22%20viewBox%3D%220%200%2017%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.252%203.5L16.9922%203.93164L16.252%204.36328L10.252%207.86328L9.74805%207L14.1504%204.43164L0%204.43164L0%203.43164L14.1504%203.43164L9.74805%200.863281L10.252%200L16.252%203.5Z%22%20fill%3D%22%231a1a1a%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: none;
  height: 8px;
  width: 17px;
}
/* 外部リンク（サンブルーム）は斜め矢印 */
.news.contact-top .ctop_btn__arrow--ext {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M2%209L9%202M4.5%202H9V6.5%22%20stroke%3D%22%231a1a1a%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  height: 11px;
  width: 11px;
}

/* SP */
@media screen and (max-width: 768px) {
  /* リードは縦積み時、幅計算・右マージンを解除して全幅に */
  .news.contact.contact-top .contact_head__lead {
    flex-basis: auto;
    margin-right: 0;
    max-width: 100%;
  }
  /* SPでは文中の改行(br)を無効化し、自然に折り返す */
  .news.contact.contact-top .contact_head__lead br {
    display: none;
  }
  .news.contact-top .ctop_list {
    margin-bottom: clamp(48px, 12vw, 80px);
  }
  .news.contact-top .ctop_row {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
  .news.contact-top .ctop_row__head {
    flex-basis: auto;
  }
  /* 単一カードもSPでは全幅・左右マージン解除 */
  .news.contact-top .ctop_row__body:not(.ctop_row__body--two) {
    flex-basis: auto;
    margin-left: 0;
  }
  .news.contact-top .ctop_row__en {
    font-size: 0.6875rem;
    margin-bottom: 6px;
  }
  .news.contact-top .ctop_row__name {
    font-size: clamp(20px, 6.4vw, 30px);
    /* 長いブランド名（WSP SUSTAINABLE LAB 等）も折り返しできるように */
    overflow-wrap: break-word;
    word-break: normal;
  }
  .news.contact-top .ctop_row__body--two,
  .news.contact-top .ctop_row--stack .ctop_row__body--two {
    gap: 12px;
    grid-template-columns: 1fr; /* WSP-W もスマホでは縦積み */
    margin-left: 0;             /* SPは全幅に戻す */
    width: auto;
  }
  .news.contact-top .ctop_card {
    padding: 20px 18px;
  }
  .news.contact-top .ctop_card__desc,
  .news.contact-top .ctop_card__ttl {
    font-size: 0.875rem;
    margin-bottom: 14px;
  }
  .news.contact-top .ctop_card__note {
    font-size: 0.78125rem;
    margin-bottom: 14px;
  }
  .news.contact-top .ctop_btn {
    font-size: 0.8125rem;
    min-width: 0;
    padding: 13px 20px;
    width: 100%;
  }
}

/* ごく小さい画面（〜380px）での微調整 */
@media screen and (max-width: 380px) {
  .news.contact-top .ctop_row__name {
    font-size: 22px;
  }
  .news.contact-top .ctop_btn {
    font-size: 0.75rem;
    gap: 12px;
    padding: 12px 16px;
  }
}