@charset "UTF-8";
/* お問い合わせ（form.html）
 * ほかのページと同じトンマナ。見出し・文章・フォームは 1180px の枠の左端からそろえる。緑は #00C8AA だけ
 * フォームの中身は Zoho（iframe）なので、色や文字はここでは変えられない
 */

/* ページタイトル：写真は横いっぱい、文字は黒の太字で左寄せ（ほかのページと同じ） */
body.om .page-title { padding: 0; }
body.om .page-title figure { max-width: none; border-radius: 0; background: #ECECEC; }
body.om .page-title h1 { max-width: 1180px; left: 24px; right: 24px; padding: 0; color: #000; font-weight: 700; }

/* 本文の枠 */
body.om .form-sec { padding: 64px 24px 140px; background: #fff; }
body.om .form-sec .price-inner { max-width: 1180px; }

/* はじめの説明 */
body.om .fm-intro { margin: 0 0 40px; }
body.om .fm-lead { margin: 0; color: #4F4C4C; font-size: 17px; font-weight: 700; line-height: 1.9; }
body.om .fm-note { margin: 12px 0 0; padding: 14px 18px; border-radius: 8px; background: #F6F7F7; color: #4F4C4C; font-size: 14px; line-height: 1.8; }
body.om .fm-note a { color: #00C8AA; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body.om .fm-note .ion-android-open { margin-left: 2px; text-decoration: none; }

/* フォーム（Zoho の iframe）：グレー地＋白い箱の見た目は Zoho のテーマ側で付けるので、サイト側の枠線と余白はなくして横いっぱいに置く */
body.om .wrap-common.form { padding: 0; border: 0; }
body.om .iframe-wrap { position: relative; width: 100%; height: 2100px; overflow: auto; -webkit-overflow-scrolling: touch; }
body.om .iframe-wrap iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

@media only screen and (max-width: 804px) {
  body.om .page-title h1 { left: 16px; right: 16px; }
  body.om .form-sec { padding: 40px 16px 88px; }
  body.om .fm-intro { margin-bottom: 28px; }
  body.om .fm-lead { font-size: 15px; }
}

/* フォームの高さは中身に合わせて自動で伸び縮み（form.html の script）。固定の高さと中のスクロールはやめる */
body.om .iframe-wrap, body.om .iframe-wrap[style] { height: auto !important; overflow: visible; }
body.om .iframe-wrap iframe { position: static; height: 1600px; }
/* どのサービスの問い合わせか */
body.om .fm-service[hidden] { display: none; }
body.om .fm-service { display: inline-block; margin: 0 0 12px; padding: 4px 14px; border-radius: 4px; background: #E6FAF6; color: #00C8AA; font-size: 15px; font-weight: 700; }
/* 返事の目安 */
body.om .fm-reply { margin: 6px 0 0; color: #4F4C4C; font-size: 15px; line-height: 1.8; }
body.om .fm-reply small { margin-left: 6px; color: #7A7878; font-size: 12px; }
/* このページ自身へのリンクになるので、ヘッダーの「導入のご相談」は出さない */
body.om.fm-page .hd-btn-main, body.om.fm-page .sp-con-btn-d { display: none; }
/* スマホのメニュー：ボタンが「申し込み」1つだけになるので、上の「ご検討中の方」の見出しは出さない */
@media only screen and (max-width: 804px) {
  body.om.fm-page .hd-group:not(.hd-group-user) .hd-label { display: none; }
}

/* はじめの説明（わかりやすく）：太字は「どのサービスか」だけ。緑はやめて文字色で。ほかの窓口は小さく一覧に */
body.om .fm-service { display: block; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; color: #000; font-size: 20px; font-weight: 700; }
body.om .fm-lead { margin: 0; color: #4F4C4C; font-size: 16px; font-weight: 400; line-height: 1.9; }
body.om .fm-lead small { margin-left: 6px; color: #7A7878; font-size: 12px; }
body.om .fm-other { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid #D4D6D6; list-style: none; }
body.om .fm-other li { color: #7A7878; font-size: 14px; line-height: 1.8; }
body.om .fm-other li > span { margin-right: 10px; }
body.om .fm-other a { color: #4F4C4C; text-decoration: underline; text-underline-offset: 3px; }
body.om .fm-other .ion-android-open { margin-left: 3px; }
@media only screen and (max-width: 804px) {
  body.om .fm-service { font-size: 17px; }
  body.om .fm-lead { font-size: 15px; }
  body.om .fm-other { flex-direction: column; }
  body.om .fm-other li > span { display: block; margin: 0; }
}

/* ほかの窓口は文章で（「〜は、〜よりお願いいたします。」）。縦に2行 */
body.om .fm-other { flex-direction: column; gap: 4px; }
body.om .fm-other li { color: #4F4C4C; }
body.om .fm-other a { margin: 0 2px; }
/* リンクは緑（#00C8AA）＋下線 */
body.om .fm-other a { color: #00C8AA; }
/* サービスごとのタイトル（2行）は少し小さく */
body.om .page-title h1.fm-h1-service { font-size: 38px; line-height: 1.4; }
@media only screen and (max-width: 804px) { body.om .page-title h1.fm-h1-service { font-size: 15px; } }