/* ===================================================================== contact.css — お問合せ・資料請求の見た目 読み込み：inc/contact.php（ホーム・テクニカル情報・お問合せページだけ） （base.css の「15」「16」から移したもの＋カード） 1 カード（ホーム Contact・テクニカル情報 Consultation） .tbc-cards 2 資料一覧（テクニカル情報 Documents） .tb-docs 3 お問合せフォーム（Contact Form 7） .tb-contact ===================================================================== */ /* ---- 1 カード ---- カスタムHTMLブロックに
…
を置く。 カードの数（2枚・3枚）と画面の幅に合わせて、自動で並ぶ。 PC：横に並ぶ／タブレット：入りきらないカードは次の行に全幅で／スマホ：縦に1列。 ボタンに is-main を付けると、メインカラーの塗りになる。 */ #body_wrap .tbc-cards{ display: flex; flex-wrap: wrap; gap: 20px; margin: 56px 0 0; } #body_wrap .tbc-card{ flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; padding: 30px 28px 28px; background: var(--surface, #fff); border: 1px solid var(--line, #e2ded8); } #body_wrap .tbc-card__k{ margin: 0 !important; font-size: 11.5px; letter-spacing: .08em; color: var(--ink3, #9a948c); } #body_wrap .tbc-card__h{ margin: 8px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: var(--serif-jp); font-size: 17.5px; font-weight: 600; line-height: 1.55; letter-spacing: .04em; color: var(--ink, #26221f); } #body_wrap .tbc-card__h::before, #body_wrap .tbc-card__h::after{ display: none !important; } /* SWELL の見出し装飾を消す */ #body_wrap .tbc-card__p{ flex: 1; margin: 10px 0 0 !important; font-size: 13.5px; line-height: 1.85; color: var(--ink2, #645e57); } #body_wrap .tbc-card__btn{ display: block; margin-top: 24px; padding: 12px 18px; border: 1px solid var(--ink, #26221f); color: var(--ink, #26221f); font-size: 13px; letter-spacing: .06em; text-align: center; text-decoration: none; transition: background .2s, color .2s, border-color .2s; } #body_wrap .tbc-card__btn:hover{ background: var(--ink, #26221f); color: #fff; } #body_wrap .tbc-card__btn.is-main{ background: var(--color_main, var(--brick, #b5754a)); border-color: var(--color_main, var(--brick, #b5754a)); color: #fff; } #body_wrap .tbc-card__btn.is-main:hover{ filter: brightness(.88); } @media (max-width: 599.98px){ #body_wrap .tbc-cards{ margin-top: 36px; } #body_wrap .tbc-card{ flex-basis: 100%; } #body_wrap .tbc-card{ padding: 24px 20px 22px; } } /* ---- 2 資料一覧（テクニカル情報 Documents） ---- */ #body_wrap .tb-docs{ margin-top: 40px; } #body_wrap .tb-docs__list{ list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--ink); } #body_wrap .tb-docs__item{ margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--line); } #body_wrap .tb-docs__item::before{ display: none !important; } #body_wrap .tb-docs__item label{ /* チェック｜資料名（名前の幅だけ）｜解説（残りの幅すべて。資料名のすぐ右から始める） */ display: grid; grid-template-columns: auto 8em minmax(0, 1fr); align-items: center; column-gap: 20px; padding: 14px 0; cursor: pointer; } #body_wrap .tb-docs input[type="checkbox"], #body_wrap .tb-contact input[type="checkbox"], #body_wrap .tb-contact input[type="radio"]{ width: 15px; height: 15px; margin: 0; accent-color: var(--brick); } #body_wrap .tb-docs__name{ font-family: var(--serif-jp); font-size: 15.5px; font-weight: 600; letter-spacing: .06em; color: var(--ink); } #body_wrap .tb-docs__note{ font-size: 12.5px; line-height: 1.6; color: var(--ink3); text-align: right; } #body_wrap .tb-docs__msg{ margin: 16px 0 0 !important; font-size: 13px; color: var(--brick-ink); } /* 白地に黒枠のボタン（資料一覧・お問合せ共通） */ #body_wrap .tb-docs__btn, #body_wrap .tb-contact .wpcf7-submit{ display: inline-block; margin: 24px 0 0; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; font: inherit; font-size: 13.5px; letter-spacing: .06em; line-height: 1.5; cursor: pointer; transition: background .2s, color .2s; } #body_wrap .tb-docs__btn:hover, #body_wrap .tb-contact .wpcf7-submit:hover{ background: var(--ink); color: #fff; } @media (max-width: 599.98px){ #body_wrap .tb-docs__item label{ grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; } #body_wrap .tb-docs__note{ grid-column: 2; text-align: left; } } /* ---- 3 お問合せフォーム ---- */ #body_wrap .tb-contact{ max-width: 720px; margin-left: auto; margin-right: auto; } /* ご用件：〇〇 */ #body_wrap .tb-contact .tb-cf-now{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 28px !important; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink2); } #body_wrap .tb-contact .tb-cf-now strong{ font-family: var(--serif-jp); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink); } /* 1項目（下の余白は padding で取る。表示・非表示が切り替わる欄でも、間隔が詰まらないように） */ #body_wrap .tb-contact .tb-cf-row{ margin: 0; padding: 0 0 22px; } #body_wrap .tb-contact .tb-cf-label{ display: block; margin: 0 0 6px !important; font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--ink); } #body_wrap .tb-contact .tb-cf-req, #body_wrap .tb-contact .tb-cf-opt{ display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 10.5px; font-weight: 400; letter-spacing: .06em; line-height: 1.5; vertical-align: 1px; } #body_wrap .tb-contact .tb-cf-req{ background: var(--brick); color: #fff; } #body_wrap .tb-contact .tb-cf-opt{ border: 1px solid var(--line); color: var(--ink3); } #body_wrap .tb-contact .tb-cf-note{ margin: 6px 0 0 !important; font-size: 12.5px; color: var(--ink3); } /* 入力欄 */ #body_wrap .tb-contact :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea){ width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--surface); box-shadow: none; font: inherit; font-size: 15px; color: var(--ink); } #body_wrap .tb-contact textarea{ min-height: 9em; } #body_wrap .tb-contact :is(input, select, textarea):focus{ border-color: var(--ink3); outline: none; } #body_wrap .tb-contact .tb-cf-short{ max-width: 14em; } /* 横並び（希望日＋時間帯、郵便番号など） */ #body_wrap .tb-contact .tb-cf-inline{ display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } #body_wrap .tb-contact .tb-cf-inline > .wpcf7-form-control-wrap{ flex: 0 1 14em; } /* ラジオボタン・チェックボックスの並び */ #body_wrap .tb-contact .wpcf7-list-item{ display: inline-block; margin: 0 22px 8px 0; } #body_wrap .tb-contact .wpcf7-list-item label{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } #body_wrap .tb-contact .wpcf7-list-item-label{ font-size: 14.5px; color: var(--ink); } #body_wrap .tb-contact .tb-cf-youken .wpcf7-list-item{ display: block; margin: 0 0 8px; } /* エラー・送信結果 */ #body_wrap .tb-contact .wpcf7-not-valid-tip{ margin-top: 4px; font-size: 12.5px; color: var(--brick-ink); } #body_wrap .tb-contact .wpcf7-not-valid{ border-color: var(--brick) !important; } #body_wrap .tb-contact .wpcf7-response-output{ margin: 24px 0 0 !important; padding: 12px 16px !important; border: 1px solid var(--line) !important; font-size: 14px; color: var(--ink); } #body_wrap .tb-contact .wpcf7-spinner{ vertical-align: middle; } /* 図面・スケッチの添付：ファイル欄と「リセット」ボタンを横に並べる */ #body_wrap .tb-contact .tb-cf-file{ display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } #body_wrap .tb-contact .tb-cf-file[hidden]{ display: none; } #body_wrap .tb-contact .tb-cf-file > .wpcf7-form-control-wrap{ flex: 1 1 auto; min-width: 0; } #body_wrap .tb-contact .tb-cf-file input[type="file"]{ width: 100%; max-width: 100%; font-size: 14px; } #body_wrap .tb-contact .tb-cf-file-reset{ flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; color: var(--ink2); cursor: pointer; } #body_wrap .tb-contact .tb-cf-file-reset:hover:not(:disabled){ border-color: var(--ink); color: var(--ink); } #body_wrap .tb-contact .tb-cf-file-reset:disabled{ opacity: .4; cursor: default; } /* 送れなかったとき：足りない項目の一覧（contact.js が送信ボタンの上に出す） */ #body_wrap .tb-contact .tb-cf-errors{ margin: 8px 0 20px; padding: 14px 18px; border: 1px solid var(--brick); background: var(--brick-soft, #f3e9e2); font-size: 14px; line-height: 1.8; color: var(--ink); } #body_wrap .tb-contact .tb-cf-errors p{ margin: 0 !important; } #body_wrap .tb-contact .tb-cf-errors__ttl{ font-weight: 600; color: var(--brick-ink); } #body_wrap .tb-contact .tb-cf-errors ul{ margin: 6px 0 0 !important; padding: 0 0 0 1.2em !important; } #body_wrap .tb-contact .tb-cf-errors li{ margin: 2px 0; list-style: disc; } #body_wrap .tb-contact .tb-cf-errors li::before{ display: none !important; } #body_wrap .tb-contact .tb-cf-errors a{ color: var(--brick-ink); text-decoration: underline; text-underline-offset: 3px; } #body_wrap .tb-contact .wpcf7-submit:disabled{ opacity: .6; cursor: default; } /* 技術資料の請求：納まり参考図・カタログを開いたときの欄（左に線を引いて、どの資料の欄かを示す） */ #body_wrap .tb-contact .tb-cf-sub{ margin: -6px 0 26px; padding: 14px 0 2px 20px; border-left: 2px solid var(--brick-soft, #f3e9e2); } #body_wrap .tb-contact .tb-cf-sub-ttl{ margin: 0 0 12px !important; font-family: var(--serif-jp); font-size: 15px; font-weight: 600; letter-spacing: .06em; color: var(--ink); } /* 形式が pdf だけのとき（data-draw="off"）は、形式の行を出さない */ #body_wrap .tb-contact .tb-cf-format.is-pdf-only{ display: none; } /* 図面の改行（contact.js が data-rows の数ごとに入れる） */ #body_wrap .tb-contact .tb-cf-br{ display: block; height: 0; } #body_wrap .tb-contact .tb-cf-drawings .wpcf7-list-item{ min-width: 12em; } @media (max-width: 599.98px){ #body_wrap .tb-contact .tb-cf-sub{ padding-left: 14px; } #body_wrap .tb-contact .tb-cf-drawings .wpcf7-list-item{ display: block; } #body_wrap .tb-contact .tb-cf-drawings .tb-cf-br{ display: none; } /* スマホ：文字を16px以上にして、入力時に画面が拡大されないようにする */ #body_wrap .tb-contact :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea){ font-size: 16px; } #body_wrap .tb-contact .tb-cf-short{ max-width: 100%; } #body_wrap .tb-contact .tb-cf-inline > .wpcf7-form-control-wrap{ flex: 1 1 12em; } #body_wrap .tb-contact .wpcf7-submit, #body_wrap .tb-docs__btn{ display: block; width: 100%; } }