@charset "UTF-8"; /** * プロフィール登録ページ専用スタイル * CF7フォーム・確認画面・サンクス画面 * * destyle.css（html 62.5%、span/td の font-size と letter-spacing:.12em、a の width/height 100% 等） * より後ろに読み込み、ここで登録フォーム範囲を一貫したトークンと詳細度で上書きする。 */ /* ========== トークン（body / .site-main 両方へ。style.css の --matching-* と整合） ========== */ body.page-profile-registration, body.page-profile-registration-en, .site-main.page-profile-registration, .site-main.page-profile-registration-en { --sr-primary: var(--matching-color-primary); --sr-primary-light: color-mix(in srgb, var(--matching-color-primary) 12%, transparent); --sr-border: var(--matching-color-border); --sr-border-hover: color-mix(in srgb, var(--matching-color-muted) 70%, var(--matching-color-text) 30%); --sr-surface: var(--matching-color-surface); --sr-surface-alt: var(--matching-color-surface-alt); --sr-bg: var(--matching-color-bg); --sr-radius: var(--matching-radius); --sr-transition: var(--matching-transition); /* 行間・字詰め（本文はややゆとり／見出し列はひと捻り多めで階段をつくる） */ --sr-lh-input: 1.52; --sr-lh-cell: 1.62; --sr-lh-th: 1.5; --sr-track: 0.024em; --sr-track-th: 0.032em; /* ブロック入力の最大幅（読みやすい行長） */ --sr-input-max: min(46rem, 100%); --sr-input-h: 3.1rem; --sr-ym-year-w: 6.75em; --sr-ym-month-w: 4.75em; /* 入力欄のパディング（shorthand のままでは calc() に渡せないので軸別にも保持） */ --sr-input-pad-y: 0.62rem; --sr-input-pad-x: 1.02rem; --sr-input-padding: var(--sr-input-pad-y) var(--sr-input-pad-x); /* 入力＝主、左列＝従（rem は html 62.5% 基準。本文は実質16px級を下限に） */ --sr-input-fs: clamp(1.62rem, 0.45vw + 1.38rem, 1.8rem); --sr-th-fs: clamp(var(--matching-public-label-fs, 1.5rem), 0.38vw + 1.06rem, 1.48rem); /* ラジオ・チェック文言（入力より極わずか小さいが 15px級未満に落とさない） */ --sr-choice-label-fs: max(1.56rem, calc(var(--sr-input-fs) - 0.06rem)); /* 注釈・サブラベル（補足文・併記など） */ --sr-caption-fs: max(1.12rem, calc(var(--sr-input-fs) - 0.2rem)); /* セル内（p・input-row 間）／ボタン横並びなど */ --sr-field-gap: 0.8rem; /* 質問ブロックごと（tbody tr のセルパディング） */ --sr-cell-pad-y: clamp(0.88rem, 1.25vw + 0.56rem, 1.15rem); --sr-cell-pad-x: clamp(1rem, 1.6vw + 0.72rem, 1.55rem); /* 同一セル内で .input-row が複数並ぶとき */ --sr-input-stack-gap: 0.95rem; --sr-input-row-gap-y: 0.52rem; --sr-input-row-gap-x: 0.95rem; /* 学歴・職務のブロック単位の間隔 */ --sr-block-stack-gap: 1.35rem; /* テキストエリア最小高さ（複数箇所で同一値） */ --sr-textarea-min: 7.25em; --sr-shadow: 0 4px 22px rgba(15, 23, 42, 0.07); --sr-focus-ring: 0 0 0 2px var(--matching-color-bg), 0 0 0 4px color-mix(in srgb, var(--matching-color-primary) 40%, transparent); /* 個人情報ブロック本文 */ --sr-prose-fs: clamp(1.38rem, 0.38vw + 1.14rem, 1.54rem); --sr-prose-lh: 1.68; --sr-prose-title-fs: clamp(1.58rem, 0.42vw + 1.38rem, 1.82rem); --sr-prose-title-lh: 1.42; --sr-inset-y: 1.1rem; --sr-inset-x: 1.35rem; --sr-section-gap: 1.2rem; --sr-handling-pad-x: 1.75rem; --sr-handling-ol-indent: 2.75rem; --sr-handling-ul-indent: 1.6rem; --sr-handling-text: var(--matching-color-heading); --sr-handling-text-sub: var(--matching-color-secondary); --sr-handling-text-meta: var(--matching-color-muted); --sr-consent-label-fs: clamp(1.36rem, 0.4vw + 1.12rem, 1.52rem); --sr-consent-label-lh: 1.58; /* ラジオ・チェック選択肢（チップ状ラベル） */ --sr-choice-chip-pad-y: 0.62rem; --sr-choice-chip-pad-x: 1.18rem; --sr-choice-chip-min-w: 5.75em; --sr-choice-chip-gap: 0.42rem; --sr-choice-item-mr: 0.6rem; --sr-choice-item-mb: 0.6rem; --sr-form-card-bg: color-mix(in srgb, var(--matching-color-bg) 93%, var(--matching-color-surface) 7%); --sr-form-card-border: color-mix(in srgb, var(--matching-color-border) 78%, transparent); --sr-th-strip: linear-gradient(180deg, var(--matching-color-surface-alt) 0%, color-mix(in srgb, var(--matching-color-bg) 55%, var(--matching-color-surface-alt) 45%) 100%); } .page-profile-registration .site-container, .page-profile-registration-en .site-container { padding-left: clamp(1rem, 3vw, 1.75rem); padding-right: clamp(1rem, 3vw, 1.75rem); padding-bottom: 2rem; } .page-profile-registration .entry-header, .page-profile-registration-en .entry-header { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); padding-bottom: clamp(0.65rem, 2vw, 1rem); border-bottom: 1px solid color-mix(in srgb, var(--sr-primary) 28%, var(--matching-color-border) 72%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); } .page-profile-registration .entry-title, .page-profile-registration-en .entry-title { font-size: clamp(1.95rem, 2.65vw, 2.35rem); font-weight: 800; letter-spacing: var(--sr-track); line-height: 1.35; color: var(--matching-color-heading); } .page-profile-registration .entry-title::after { display: none; content: none; } /* ========== サンクス画面（JA / EN 共通） ========== */ .staff-registration-thanks { position: relative; text-align: center; padding: 2.5rem 1.75rem; background: radial-gradient(140% 100% at 50% -20%, color-mix(in srgb, var(--sr-primary) 11%, var(--sr-bg)) 0%, var(--sr-bg) 60%), var(--sr-bg); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); color: var(--matching-color-text); box-shadow: var(--sr-shadow); overflow: hidden; } .staff-registration-thanks::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient( 90deg, color-mix(in srgb, var(--sr-primary) 0%, transparent) 0%, var(--sr-primary) 50%, color-mix(in srgb, var(--sr-primary) 0%, transparent) 100% ); pointer-events: none; } .staff-registration-thanks-title { font-size: clamp(1.88rem, 0.55vw + 1.54rem, 2.12rem); font-weight: 700; margin: 0 0 0.75rem; letter-spacing: var(--sr-track); color: var(--matching-color-heading); } .staff-registration-thanks-text { margin: 0 0 1.5rem; color: var(--matching-color-secondary); font-size: clamp(1.5rem, 0.38vw + 1.26rem, 1.62rem); line-height: 1.62; letter-spacing: var(--sr-track); } .staff-registration-thanks .matching-thanks-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0.85rem 1rem; margin: 0.35rem auto 0; max-width: 36rem; } .page-profile-registration .staff-registration-thanks .matching-thanks-actions .btn, .page-profile-registration-en .staff-registration-thanks .matching-thanks-actions .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: min(100%, 16rem); flex: 1 1 14rem; max-width: 100%; min-height: var(--matching-btn-min-height); padding: 0.95rem 1.6rem; font-size: var(--matching-public-label-fs, 1.5rem); font-weight: 700; line-height: 1.25; letter-spacing: var(--sr-track); text-decoration: none; box-sizing: border-box; } .staff-registration-thanks .matching-thanks-actions .btn-primary { background: linear-gradient( 180deg, var(--matching-color-primary) 0%, var(--matching-color-primary-hover) 100% ); color: #fff; border-color: var(--matching-color-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--matching-color-primary) 32%, transparent); } .staff-registration-thanks .matching-thanks-actions .btn-primary:hover, .staff-registration-thanks .matching-thanks-actions .btn-primary:focus-visible { background: linear-gradient( 180deg, var(--matching-color-primary-hover) 0%, var(--matching-color-primary) 100% ); color: #fff; border-color: var(--matching-color-primary-hover); box-shadow: 0 8px 24px color-mix(in srgb, var(--matching-color-primary) 40%, transparent); } .staff-registration-thanks .matching-thanks-actions .btn-secondary { background: var(--matching-color-bg); color: var(--matching-color-primary); border: var(--matching-btn-border-width) solid color-mix( in srgb, var(--matching-color-primary) 55%, var(--matching-color-border) 45% ); box-shadow: var(--matching-shadow); } .staff-registration-thanks .matching-thanks-actions .btn-secondary:hover, .staff-registration-thanks .matching-thanks-actions .btn-secondary:focus-visible { background: color-mix(in srgb, var(--matching-color-primary) 8%, var(--matching-color-bg) 92%); color: var(--matching-color-primary-hover); border-color: var(--matching-color-primary); } .matching-thanks-my-page-note { margin: 0 0 1rem; font-size: var(--matching-public-meta-fs, 1.5rem); line-height: 1.6; color: var(--matching-color-secondary); text-align: center; } .matching-staff-update-banner { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid rgba(21, 87, 176, 0.25); border-radius: var(--matching-radius-sm, 0.6rem); background: rgba(21, 87, 176, 0.08); } .matching-staff-update-banner-title { margin: 0 0 0.35rem; font-size: var(--sr-prose-title-fs, clamp(1.58rem, 0.42vw + 1.38rem, 1.82rem)); font-weight: 700; line-height: var(--sr-prose-title-lh, 1.42); color: var(--matching-color-primary, #1557b0); } .matching-staff-update-banner-text { margin: 0; font-size: var(--sr-prose-fs, clamp(1.38rem, 0.38vw + 1.14rem, 1.54rem)); line-height: var(--sr-prose-lh, 1.68); color: var(--matching-color-text, #333); } /* ========== スタッフ登録フォーム（テーブルレイアウト） ========== */ .page-profile-registration .entry-content .staff-registration-form, .page-profile-registration .entry-content .contact-form-container { max-width: none; width: 100%; margin-left: 0; margin-right: 0; padding: clamp(1.18rem, 2.2vw + 0.82rem, 1.9rem); box-sizing: border-box; background: var(--sr-form-card-bg); border: 1px solid var(--sr-form-card-border); border-radius: calc(var(--sr-radius) + 3px); box-shadow: var(--sr-shadow); color: var(--matching-color-text); font-size: var(--sr-input-fs); line-height: var(--sr-lh-cell); letter-spacing: var(--sr-track); } /* * destyle: a は display:inline-block; width:100%; height:100%; のため、フォーム内のインライン導線が巨大化する。 * ボタン系クラスだけ除外する。 */ .page-profile-registration .entry-content .staff-registration-form a:not(.contact-btn):not(.btn):not(.confirmation-btn):not(.edit-btn):not(.btn-add-block), .page-profile-registration .entry-content .contact-form-container a:not(.contact-btn):not(.btn):not(.confirmation-btn):not(.edit-btn):not(.btn-add-block) { display: inline; width: auto; height: auto; max-width: none; vertical-align: baseline; letter-spacing: inherit; } .page-profile-registration .staff-registration-thanks a:not(.btn), .page-profile-registration-en .staff-registration-thanks a:not(.btn) { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; height: auto; letter-spacing: var(--sr-track); } /* contactTable / th.title / .must / td.input / 入力欄基底 は * matching-cf7-form.css に共通化済み。スタッフ登録固有のサイズ感は * 下のトークン上書きで表現する（th 幅 29%、行間広め、書字方向ゆとり）。 */ .page-profile-registration .entry-content .matching-cf7-form, .page-profile-registration .entry-content.matching-cf7-form { --matching-cf7-th-width: 29%; --matching-cf7-th-fs: var(--sr-th-fs); --matching-cf7-td-fs: var(--sr-input-fs); --matching-cf7-td-lh: var(--sr-lh-cell); --matching-cf7-td-track: var(--sr-track); --matching-cf7-cell-pad-y: var(--sr-cell-pad-y); --matching-cf7-cell-pad-x: var(--sr-cell-pad-x); --matching-cf7-input-h: var(--sr-input-h); --matching-cf7-input-padding-y: var(--sr-input-pad-y); --matching-cf7-input-padding-x: var(--sr-input-pad-x); --matching-cf7-input-fs: var(--sr-input-fs); --matching-cf7-input-radius: calc(var(--sr-radius) + 1px); --matching-cf7-input-border: color-mix(in srgb, var(--sr-border) 78%, var(--matching-color-muted) 22%); --matching-cf7-input-border-hover: var(--sr-border-hover); --matching-cf7-input-focus-shadow: var(--sr-focus-ring); --matching-cf7-input-max: var(--sr-input-max); --matching-cf7-textarea-min: var(--sr-textarea-min); --matching-cf7-caption-fs: var(--sr-caption-fs); --matching-cf7-handling-pad-x: var(--sr-handling-pad-x); --matching-cf7-handling-pad-y: var(--sr-inset-y); --matching-cf7-handling-prose-fs: var(--sr-prose-fs); --matching-cf7-handling-prose-lh: var(--sr-prose-lh); --matching-cf7-handling-prose-title-fs: var(--sr-prose-title-fs); --matching-cf7-handling-prose-title-lh: var(--sr-prose-title-lh); --matching-cf7-handling-ol-indent: var(--sr-handling-ol-indent); --matching-cf7-handling-ul-indent: var(--sr-handling-ul-indent); --matching-cf7-handling-text: var(--sr-handling-text); --matching-cf7-handling-text-sub: var(--sr-handling-text-sub); --matching-cf7-handling-text-meta: var(--sr-handling-text-meta); --matching-cf7-handling-bg: var(--sr-surface-alt); --matching-cf7-handling-border: var(--sr-border); --matching-cf7-th-bg: var(--sr-th-strip); --matching-cf7-consent-label-fs: var(--sr-consent-label-fs); --matching-cf7-consent-label-lh: var(--sr-consent-label-lh); --matching-cf7-consent-pad-y: 1.15rem; --matching-cf7-consent-pad-x: 1.42rem; --matching-cf7-consent-min-height: 3.35rem; } /* th.title は登録フォームだけ vertical-align: middle にして * EN ロケールでも 2 行になる質問が中央揃いに見えるようにする */ .page-profile-registration .entry-content .matching-cf7-form .contactTable th.title { vertical-align: middle; } /* ========== 英語プロフィール登録：長文ラベル向けレイアウト ========== * profile-registration-en は body.matching-ui-locale-en のため * matching-public-i18n-layout.css の GT 向けルールが当たらない。ここで同等の耐性を付与。 */ body.page-profile-registration-en { overflow-x: clip; } body.page-profile-registration-en .entry-content { max-width: 100%; overflow-x: clip; } body.page-profile-registration-en .entry-content .matching-cf7-form { --matching-cf7-th-width: min(42%, 20rem); --sr-choice-chip-min-w: min(100%, 7.5em); } body.page-profile-registration-en .entry-content .matching-cf7-form .contactTable th.title { vertical-align: top; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; word-break: normal; hyphens: auto; } body.page-profile-registration-en .entry-content .contactTable .sr-skill-name, body.page-profile-registration-en .entry-content .contactTable .sr-commute-minutes-suffix, body.page-profile-registration-en .entry-content .contactTable .input-suffix, body.page-profile-registration-en .entry-content .contactTable .working-time-label, body.page-profile-registration-en .entry-content .contactTable .sr-other-field-label { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } body.page-profile-registration-en .entry-content .contactTable .wpcf7-list-item { display: inline-flex; max-width: 100%; } body.page-profile-registration-en .entry-content .contactTable .wpcf7-list-item label, body.page-profile-registration-en .entry-content .contactTable td.input label { justify-content: flex-start; text-align: left; min-width: 0; max-width: 100%; height: auto; min-height: var(--sr-input-h, 3.1rem); white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } body.page-profile-registration-en .entry-content .contactTable .wpcf7-list-item-label { white-space: normal; overflow-wrap: anywhere; } /* EN 最寄り交通機関：4択ラジオを横一列（Tram/Streetcar 長文化） */ body.page-profile-registration-en .entry-content .contactTable .input-row:has([data-name="transit"]), .page-profile-registration-en .entry-content .contactTable .input-row:has([data-name="transit"]), [data-matching-staff-registration-locale="en"] .contactTable .input-row:has([data-name="transit"]) { flex-wrap: nowrap; align-items: center; gap: 0 clamp(0.28rem, 1.1vw, 0.5rem); } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"], .page-profile-registration-en .entry-content .contactTable [data-name="transit"], [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] { flex: 1 1 auto; min-width: 0; max-width: 100%; } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-radio, .page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-radio, [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] .wpcf7-radio { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: clamp(0.28rem, 1.1vw, 0.5rem); width: 100%; min-width: 0; max-width: 100%; } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item, .page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item, [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] .wpcf7-list-item { flex: 0 1 auto; min-width: 0; margin: 0; } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item label, .page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item label, [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] .wpcf7-list-item label { min-width: 0; max-width: none; height: auto; min-height: var(--sr-input-h); padding: var(--sr-choice-chip-pad-y) clamp(0.5rem, 1.3vw, 0.82rem) !important; font-size: clamp(1.36rem, 0.24vw + 1.18rem, var(--sr-choice-label-fs)); white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; justify-content: flex-start; } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item:last-child label, .page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item:last-child label, [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] .wpcf7-list-item:last-child label { font-size: clamp(1.28rem, 0.18vw + 1.1rem, calc(var(--sr-choice-label-fs) - 0.08rem)); padding-inline: clamp(0.42rem, 1vw, 0.62rem) !important; } body.page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item-label, .page-profile-registration-en .entry-content .contactTable [data-name="transit"] .wpcf7-list-item-label, [data-matching-staff-registration-locale="en"] .contactTable [data-name="transit"] .wpcf7-list-item-label { white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; } body.page-profile-registration-en .entry-content .contactTable .input-row-inline, body.page-profile-registration-en .entry-content .contactTable #transit-detail > .input-inline, body.page-profile-registration-en .entry-content .contactTable .transit-minutes-wrap.input-inline, body.page-profile-registration-en .entry-content .contactTable .commute-minutes-wrap.input-inline, body.page-profile-registration-en .entry-content .contactTable #children-count-wrap { flex-wrap: wrap; align-items: flex-start; max-width: 100%; } body.page-profile-registration-en .entry-content .contactTable .sr-time-pair { flex-wrap: wrap; } body.page-profile-registration-en .entry-content .studies-wrap .input, body.page-profile-registration-en .entry-content .career-wrap > .career-period-wrap, body.page-profile-registration-en .entry-content .qualification-wrap .input { flex-wrap: wrap; align-items: flex-start; } /* 英語職歴の詳細レイアウトは下の「CF7 出力に合わせた職歴・希望業種」ブロック（職務経歴セクション末尾） */ body.page-profile-registration-en .entry-content .matching-cf7-form .form-check, body.page-profile-registration-en .entry-content .form-check label.form-check-inner, body.page-profile-registration-en .entry-content .matching-cf7-form .form-check .wpcf7-list-item-label { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; } body.page-profile-registration-en .entry-content .btn-wrapper .contact-btn, body.page-profile-registration-en .entry-content .btn-wrapper input[type="submit"], body.page-profile-registration-en .entry-content .btn-add-block { width: auto; max-width: 100%; min-height: var(--matching-btn-min-height, 3.2rem); height: auto; } body.page-profile-registration-en .entry-content .confirmation-screen .contactTable { table-layout: auto; } body.page-profile-registration-en .entry-content .confirmation-screen .contactTable td.input:is( :has(#confirm-mobile-tel), :has(#confirm-spouse), :has(#confirm-transit), :has(#confirm-car), :has(#confirm-language) ) { grid-template-columns: minmax(0, 1fr); row-gap: 0.35rem; } body.page-profile-registration-en .entry-content .confirmation-screen .contactTable td.input:has(#confirm-experience) > .input-row, body.page-profile-registration-en .entry-content .confirmation-screen .contactTable td.input:has(#confirm-working_place) > .input-row, body.page-profile-registration-en .entry-content .confirmation-screen .contactTable td.input:has(#confirm-experience) > .input-sub.input-row, body.page-profile-registration-en .entry-content .confirmation-screen .contactTable td.input:has(#confirm-working_place) > .input-sub.input-row { grid-template-columns: minmax(0, 1fr) !important; text-align: left; } body.page-profile-registration-en .entry-content .confirmation-screen .contactTable .answer { white-space: normal; overflow-wrap: anywhere; } @media (min-width: 769px) { body.page-profile-registration-en .entry-content .matching-cf7-form .contactTable { table-layout: auto; } body.page-profile-registration-en .entry-content .contactTable th.title { width: auto; min-width: 0; max-width: 42%; vertical-align: top; } body.page-profile-registration-en .entry-content .contactTable td.input { min-width: 0; width: auto; } } @media (max-width: 960px) { body.page-profile-registration-en .entry-content .contactTable th.title, body.page-profile-registration-en .entry-content .contactTable td.input { display: block; width: 100%; max-width: 100%; box-sizing: border-box; border-right: 0; padding-left: max(1rem, var(--sr-cell-pad-x)); padding-right: max(1rem, var(--sr-cell-pad-x)); } body.page-profile-registration-en .entry-content .contactTable th.title { max-width: 100%; border-bottom: 0; padding-top: calc(var(--sr-cell-pad-y) + 0.15rem); padding-bottom: 0.35rem; } body.page-profile-registration-en .entry-content .contactTable td.input { padding-top: 0.65rem; padding-bottom: calc(var(--sr-cell-pad-y) + 0.65rem); } body.page-profile-registration-en .entry-content .contactTable .input-row.sr-skill-row, body.page-profile-registration-en .entry-content .contactTable .sr-skill-row + .input-sub.input-row, body.page-profile-registration-en .entry-content .contactTable .sr-skill-row.sr-textarea-row, body.page-profile-registration-en .entry-content .contactTable #uniform-size-top-wrap.sr-skill-row, body.page-profile-registration-en .entry-content .contactTable #uniform-size-under-wrap.sr-skill-row, body.page-profile-registration-en .entry-content .contactTable #shoes-size-wrap.sr-skill-row { grid-template-columns: minmax(0, 1fr) !important; align-items: start; text-align: left; gap: 0.35rem; } body.page-profile-registration-en .entry-content .contactTable .sr-skill-name { justify-content: flex-start; text-align: left; min-height: 0; white-space: normal; overflow-wrap: anywhere; } body.page-profile-registration-en .entry-content .contactTable .sr-skill-name::after { content: ""; } body.page-profile-registration-en .entry-content .contactTable .sr-skill-row + .input-sub.input-row > * { grid-column: 1; } body.page-profile-registration-en .entry-content .contactTable input[type="text"], body.page-profile-registration-en .entry-content .contactTable input[type="email"], body.page-profile-registration-en .entry-content .contactTable input[type="tel"], body.page-profile-registration-en .entry-content .contactTable input[type="number"], body.page-profile-registration-en .entry-content .contactTable input[type="date"], body.page-profile-registration-en .entry-content .contactTable input[type="password"], body.page-profile-registration-en .entry-content .contactTable select, body.page-profile-registration-en .entry-content .contactTable textarea { max-width: 100%; } } /* 英語スタッフ登録フォーム：質問見出しの日本語併記 */ .page-profile-registration .entry-content .contactTable th.title .title-ja { display: block; margin-top: 0.3rem; font-size: max(1.2rem, calc(var(--sr-th-fs) - 0.02rem)); font-weight: 500; letter-spacing: var(--sr-track-th); color: color-mix(in srgb, var(--matching-color-text) 92%, var(--matching-color-muted)); opacity: 0.92; } /* th.title 内のサフィックス（例: 登録業種希望（希望順）） * 見出しと同一トーンで併記する（生年月日 td 内の .input-suffix は別ルール） */ .page-profile-registration .entry-content .contactTable th.title .input-suffix { display: inline; margin-left: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; vertical-align: baseline; opacity: 1; } .page-profile-registration .entry-content .contactTable td.input .sr-other-field-label { font-size: var(--sr-caption-fs); opacity: 0.92; margin-right: 0.35rem; letter-spacing: var(--sr-track); } .page-profile-registration .entry-content .contactTable .career-wrap .title .title-ja-inline, .page-profile-registration .entry-content .contactTable .qualification-wrap .title .title-ja-inline { font-size: var(--sr-caption-fs); font-weight: 500; opacity: 0.85; margin-left: 0.25rem; } /* td.input / span 上書き / zebra は matching-cf7-form.css に共通化済み。 * 登録フォーム特有の「td 幅 auto / min-width 0」だけ残す（学歴・職務ブロックが横並びになるため）。 */ .page-profile-registration .entry-content .contactTable td.input { width: auto; min-width: 0; } /* 各項目ごとの余白（セル内は --sr-field-gap、行の区切りは --sr-cell-pad-y + tbody border） */ .page-profile-registration .entry-content .contactTable tr { padding: 0; } .page-profile-registration .entry-content .contactTable td.input p { margin: 0 0 var(--sr-field-gap); } .page-profile-registration .entry-content .contactTable td.input p:last-child { margin-bottom: 0; } /* 入力欄の親：テーブル内はブロック幅で統一（最大幅あり） */ .page-profile-registration .entry-content .contactTable td.input .wpcf7-form-control-wrap:not([class*="radio"]):not([class*="checkbox"]) { display: block; max-width: var(--sr-input-max); width: 100%; box-sizing: border-box; } /* 学歴・職務・取得資格・勤務時間・インライン数値（子ども人数・徒歩分）は上を打ち消し */ .page-profile-registration .entry-content .contactTable td.input #studies-wrapper .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input #qualification-wrapper .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input #career-wrapper .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input #studies-wrapper .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input #qualification-wrapper .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input #career-wrapper .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input .working-time-row .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input .working-time-row .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input #children-count-wrap .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input #children-count-wrap .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input .transit-minutes-wrap .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input .transit-minutes-wrap .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable td.input .commute-minutes-wrap .wpcf7-form-control-wrap, .page-profile-registration-en .entry-content .contactTable td.input .commute-minutes-wrap .wpcf7-form-control-wrap { display: inline-flex !important; max-width: 100% !important; width: auto !important; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; } /* 1行で横並び（ラベル・選択肢・「その他」入力が同じ行に）。余白はトークンで統一 */ .page-profile-registration .entry-content .contactTable .input-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sr-input-row-gap-y) var(--sr-input-row-gap-x); margin-bottom: var(--sr-field-gap); } .page-profile-registration .entry-content .contactTable .input-row:last-child { margin-bottom: 0; } /* ========== .input-row / .input-sub の縦間隔（前要素が何でも一律に） ========== 方針: 1) br を一律で消す 2) margin で間隔を作る、で統一。 CF7 (WPCF7_AUTOP) はこのフォームでは inc/cf7-form-resolve.php で OFF にしているため 自動
は挿入されないが、CF7 再有効化や手書き
混入時の保険として残す。 */ /* (1) どんな前要素でも、.input-row / .input-sub.input-row の直前 br は非表示 */ .page-profile-registration .entry-content .contactTable td.input br:has(+ .input-row), .page-profile-registration .entry-content .contactTable td.input br:has(+ .input-sub.input-row) { display: none; } /* .input-sub の先頭 br も同様（旧ルール踏襲） */ .page-profile-registration .entry-content .contactTable .input-sub.input-row > br:first-child { display: none; } /* (2) .input-row が連続する場合の縦間隔（一般兄弟セレクタで br 有無を吸収） */ .page-profile-registration .entry-content .contactTable td.input .input-row ~ .input-row { margin-top: var(--sr-input-stack-gap); } /* (3) .input-sub.input-row 自体は前要素種別に依存せず統一マージン （車通勤の車種、語学のその他、PCスキル各種その他 で同じ間隔に揃う）。 下マージン 0 は上の .input-row:last-child と被るが、明示しておく方が事故が少ない */ .page-profile-registration .entry-content .contactTable .input-sub.input-row { margin-top: var(--sr-input-stack-gap); margin-bottom: 0; } .page-profile-registration .entry-content .contactTable .input-sub:not(.input-row) { margin-left: 0.5rem; } /* (4) autop OFF 環境用の保険: td.input 直下に「裸の CF7 wrap（[checkbox]/[radio] 等で .input-row に包んでないもの）」が 並ぶケース（語学・登録業種など）で、後続 .input-sub.input-row との間に 詰まりを起こさないよう、裸の wrap も独立した行ブロックとして扱う。 .input-sub.input-row の margin-top は上の (3) で付与済み。 */ .page-profile-registration .entry-content .contactTable td.input > .wpcf7-form-control-wrap:not(:only-child) { display: block; } /* ========== PCスキル / 希望条件 のマトリクス grid ========== 各行を「左ラベル | 右オプション」の 2 カラムに揃え、行をスキャンしやすくする。 sub-row（その他テキスト等）はラベル列を空にして options 列に左寄せ。 */ .page-profile-registration .entry-content .contactTable .input-row.sr-skill-row { display: grid; grid-template-columns: clamp(8em, 26%, 14em) minmax(0, 1fr); align-items: center; gap: var(--sr-input-row-gap-y) clamp(0.6rem, 1.2vw, 1.4rem); margin-bottom: var(--sr-input-stack-gap); } /* EN ロケールはラベルが長いのでカラム幅を拡大 */ .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable .input-row.sr-skill-row { grid-template-columns: clamp(11em, 32%, 18em) minmax(0, 1fr); } .page-profile-registration .entry-content .contactTable .sr-skill-name { display: inline-flex; align-items: center; justify-content: flex-end; min-height: var(--sr-input-h); padding: 0; font-size: var(--sr-input-fs); font-weight: 600; color: var(--matching-color-heading); line-height: 1.4; text-align: right; white-space: nowrap; overflow-wrap: normal; } .page-profile-registration .entry-content .contactTable .sr-skill-name::after { content: "："; margin-left: 0; color: var(--matching-color-muted); font-weight: 400; } .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable .sr-skill-name::after { content: ":"; margin-left: 0.2rem; } /* skill-row 内の CF7 wrap は grid セル幅いっぱい */ .page-profile-registration .entry-content .contactTable .sr-skill-row > .wpcf7-form-control-wrap { display: block; width: 100%; min-width: 0; max-width: none; } /* checkbox / radio の中身を flex で並べる */ .page-profile-registration .entry-content .contactTable .sr-skill-row .wpcf7-checkbox, .page-profile-registration .entry-content .contactTable .sr-skill-row .wpcf7-radio { display: flex; flex-wrap: wrap; gap: var(--sr-input-row-gap-y) var(--sr-input-row-gap-x); } .page-profile-registration .entry-content .contactTable .sr-skill-row .wpcf7-list-item { margin: 0; } /* sub-row（その他入力など）の整列：第1カラムを空にして第2カラムに寄せる */ .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.input-row { display: grid; grid-template-columns: clamp(8em, 26%, 14em) minmax(0, 1fr); gap: 0 clamp(0.6rem, 1.2vw, 1.4rem); align-items: center; margin-top: 0.5rem; margin-bottom: var(--sr-input-stack-gap); padding-left: 0; border-left: none; } .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable .sr-skill-row + .input-sub.input-row { grid-template-columns: clamp(11em, 32%, 18em) minmax(0, 1fr); } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.input-row > * { grid-column: 2; } /* sub-row 直前のスキル行は下マージンを縮めて、見た目を親子セットに寄せる */ .page-profile-registration .entry-content .contactTable .sr-skill-row:has(+ .input-sub.input-row) { margin-bottom: 0; } /* 勤務時間: 時刻 input ペア（［HH:MM］ 〜 ［HH:MM］） */ .page-profile-registration .entry-content .contactTable .sr-time-pair { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } .page-profile-registration .entry-content .contactTable .sr-time-pair .wpcf7-form-control-wrap { display: inline-flex !important; width: 6.5em !important; min-width: 5em !important; max-width: 100% !important; flex: 0 0 auto; } .page-profile-registration .entry-content .contactTable .sr-time-pair input[name="start_time"], .page-profile-registration .entry-content .contactTable .sr-time-pair input[name="end_time"] { width: 100%; min-width: 0; box-sizing: border-box; } .page-profile-registration .entry-content .contactTable .sr-time-sep { flex: 0 0 auto; color: var(--matching-color-muted); font-weight: 600; } /* textarea が options 列に来るとき（その他希望）はセル幅いっぱいに広げる */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-textarea-row .wpcf7-form-control-wrap { display: block; width: 100%; max-width: none; } .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-textarea-row textarea { width: 100%; min-height: 5rem; box-sizing: border-box; } /* textarea 行はラベル上部寄せに（テキスト先頭と揃える） */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-textarea-row { align-items: start; } .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-textarea-row .sr-skill-name { padding-top: 0.6rem; } /* 希望休日: 月火水木金 / 土・日・祝 / 無 で色とアクセントを分ける。 並び順: 1月 2火 3水 4木 5金 6土 7日 8祝 9無 */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item { flex: 0 0 auto; } .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item label { min-width: 3.4em; justify-content: center; padding-left: 0.7rem !important; padding-right: 0.7rem !important; text-align: center; } /* 土曜（位置 6）: 青系 */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item:nth-child(6) label .wpcf7-list-item-label { color: #2563eb; } /* 日曜（位置 7）と祝日（位置 8）: 赤系 */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item:nth-child(7) label .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item:nth-child(8) label .wpcf7-list-item-label { color: var(--matching-color-danger); } /* 無（位置 9）: muted */ .page-profile-registration .entry-content .contactTable .sr-skill-row.sr-weekday-row .wpcf7-list-item:nth-child(9) label .wpcf7-list-item-label { color: var(--matching-color-muted); font-weight: 500; } /* checked 状態では色を引き継ぎつつ背景アクセントが乗る（既存ロジック踏襲） */ /* スマホ: 縦積みで左寄せ。ラベルはやや小さく secondary 色に */ @media (max-width: 600px) { .page-profile-registration .entry-content .contactTable .input-row.sr-skill-row, .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.input-row { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; } .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable .input-row.sr-skill-row, .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable .sr-skill-row + .input-sub.input-row { grid-template-columns: minmax(0, 1fr); } .page-profile-registration .entry-content .contactTable .sr-skill-name { justify-content: flex-start; text-align: left; white-space: normal; overflow-wrap: anywhere; min-height: 0; font-size: calc(var(--sr-input-fs) * 0.94); color: var(--matching-color-secondary); font-weight: 600; } .page-profile-registration .entry-content .contactTable .sr-skill-name::after { content: ""; } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.input-row > * { grid-column: 1; } } /* 「親選択肢を選んだ時に追加で表示される入力行」共通スタイル * （PCスキル sr-wide-row と同じ「左インデント + 青系縦線」を入力欄のすぐ横に表示）。 * sr-wide-row はフル幅 column 化までする特別クラス、こちらは見た目だけを担当する軽量クラス。 * * - 親が sr-skill-row（PCスキル・希望条件・制服）の場合: grid 右カラム子要素 (grid-column: 2) に出す * - 親がそれ以外（家族・最寄り交通機関・車通勤など）の場合: 要素全体に出す */ .page-profile-registration .entry-content .contactTable .input-sub.sr-conditional-detail.input-row { padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, var(--matching-color-primary) 30%, var(--matching-color-border) 70%); box-sizing: border-box; } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.sr-conditional-detail.input-row { padding-left: 0; border-left: none; } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.sr-conditional-detail.input-row > * { padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, var(--matching-color-primary) 30%, var(--matching-color-border) 70%); box-sizing: border-box; } /* 家族：子ども「有」のときの「◯人」を子ども選択肢の下の行に表示。 * 「子ども：」のラベル幅ぶん右にずらして、ラジオ（有/無）の真下から始まるように揃える。 */ .page-profile-registration .entry-content .contactTable #children-count-wrap, .page-profile-registration-en .entry-content .contactTable #children-count-wrap { display: inline-flex; align-items: center; gap: 0.2rem 0.35rem; flex-wrap: nowrap; width: fit-content; max-width: 100%; margin-left: 4em; } /* EN ロケールは「Children:」が約 5em（半角 7 文字＋スペース＋:）あるので少し広めにずらす */ .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #children-count-wrap, .page-profile-registration-en .entry-content [data-matching-staff-registration-locale="en"] .contactTable #children-count-wrap { margin-left: 5em; } .page-profile-registration .entry-content .contactTable #children-count-wrap input[name="children-count"], .page-profile-registration-en .entry-content .contactTable #children-count-wrap input[name="children-count"] { display: inline-block !important; width: var(--sr-ym-month-w) !important; max-width: none !important; min-width: 4em !important; min-height: var(--sr-input-h); padding: var(--sr-input-pad-y) 0.55rem; box-sizing: border-box; text-align: center; -webkit-appearance: auto; appearance: auto; } /* 年齢（生年月日から JS で自動算出。表示は「0歳」程度の readonly なので幅を絞る）。 td.input を入れて特異性 (0,5,2) にし、後段 ../ 全入力統一規則 (0,4,1) より勝たせる。 */ .page-profile-registration .entry-content .contactTable td.input input.age, .page-profile-registration .entry-content .contactTable td.input input[name="age"] { display: inline-block; width: 6em; min-width: 5em; max-width: 100%; } /* 自動計算・親選択肢の結果で入力不可になる input / textarea を「触れない」と一目で分かる見た目に統一する。 * 対象: 年齢（age, readonly）、職務経歴の期間（duration, readonly）、 * 「現在も在籍」中の終了年・終了月（end_year / end_month, disabled）など。 * チェックボックス・ラジオ・送信系ボタンは別 UX なので除外する。 */ .page-profile-registration .entry-content input[readonly]:not([type="checkbox"]):not([type="radio"]), .page-profile-registration .entry-content input[disabled]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .page-profile-registration .entry-content textarea[readonly], .page-profile-registration .entry-content textarea[disabled] { background-color: var(--matching-color-surface-alt) !important; color: var(--matching-color-muted) !important; border-color: color-mix(in srgb, var(--matching-color-border) 60%, var(--matching-color-muted) 40%) !important; cursor: not-allowed !important; opacity: 0.92; box-shadow: none !important; } .page-profile-registration .entry-content input[readonly]::placeholder, .page-profile-registration .entry-content input[disabled]::placeholder, .page-profile-registration .entry-content textarea[readonly]::placeholder, .page-profile-registration .entry-content textarea[disabled]::placeholder { color: var(--matching-color-muted); opacity: 0.7; } /* フォーカスを当てても色が動かないように（誤って focus したときに「入力できそう」と誤認させない） */ .page-profile-registration .entry-content input[readonly]:focus:not([type="checkbox"]):not([type="radio"]), .page-profile-registration .entry-content input[disabled]:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .page-profile-registration .entry-content textarea[readonly]:focus, .page-profile-registration .entry-content textarea[disabled]:focus { outline: none !important; box-shadow: none !important; border-color: color-mix(in srgb, var(--matching-color-border) 60%, var(--matching-color-muted) 40%) !important; } /* 家族セル：配偶者・子ども・人数の縦間隔を整える */ .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) > br { display: none !important; margin: 0; line-height: 0; } .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) > .input-row { margin-bottom: 0 !important; } /* 配偶者と子ども（最後の input-row 以外）に縦間隔を付ける */ .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) > .input-row:not(#children-count-wrap) + .input-row:not(#children-count-wrap) { margin-top: 0.32rem !important; } /* 子ども選択肢の直下に「◯人」を寄せる */ .page-profile-registration .entry-content .contactTable td.input #children-count-wrap.input-sub.input-row { margin-top: 0.28rem !important; } .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) .wpcf7-form-control-wrap { margin-top: 0; margin-bottom: 0; } /* CF7 が

で包んだ場合も同様に詰める */ .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) > p { margin-top: 0 !important; margin-bottom: 0 !important; } .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) > p + p { margin-top: 0.3rem !important; } .page-profile-registration .entry-content .contactTable td.input:has(#children-count-wrap) p > br { display: none !important; line-height: 0; } /* 最寄り交通機関：常に2行固定（1行目: 駅名 / 2行目: まで徒歩◯分） */ .page-profile-registration .entry-content .contactTable #transit-detail { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.35rem; } .page-profile-registration .entry-content .contactTable #transit-detail br { display: none; } .page-profile-registration .entry-content .contactTable #transit-detail > .input-inline:first-of-type { flex: 0 0 100%; max-width: 100%; } .page-profile-registration .entry-content .contactTable #transit-detail > .input-inline:not(:first-child) { white-space: nowrap; flex-shrink: 0; } /* 最寄り交通機関：徒歩◯分を横並び、入力幅は子ども人数と同程度 */ .page-profile-registration .entry-content .contactTable .transit-minutes-wrap.input-inline { display: inline-flex; align-items: center; gap: 0 0.25rem; flex-shrink: 0; width: fit-content; max-width: 100%; } .page-profile-registration .entry-content .contactTable .transit-minutes-wrap.input-inline input[name="transit-minutes"], .page-profile-registration-en .entry-content .contactTable .transit-minutes-wrap.input-inline input[name="transit-minutes"], .page-profile-registration .entry-content .contactTable input[name="transit-minutes"], .page-profile-registration-en .entry-content .contactTable input[name="transit-minutes"] { display: inline-block !important; width: var(--sr-ym-month-w) !important; max-width: none !important; min-width: 4em !important; min-height: var(--sr-input-h); padding: var(--sr-input-pad-y) 0.55rem; box-sizing: border-box; text-align: center; -webkit-appearance: auto; appearance: auto; } .page-profile-registration .entry-content .contactTable input[name="transit-station"] { width: 12em; min-width: 10em; } /* 希望条件：通勤時間「希望時間」— 数字＋「分以内」を必ず1行、入力は狭め */ .page-profile-registration .entry-content .contactTable #commute_time-other-wrap.input-sub.input-row, .page-profile-registration-en .entry-content .contactTable #commute_time-other-wrap.input-sub.input-row { flex-wrap: nowrap; align-items: center; } .page-profile-registration .entry-content .contactTable .commute-minutes-wrap.input-inline, .page-profile-registration-en .entry-content .contactTable .commute-minutes-wrap.input-inline { display: inline-flex !important; flex-wrap: nowrap; align-items: center; gap: 0 0.35rem; white-space: nowrap; width: fit-content; max-width: 100%; } .page-profile-registration .entry-content .contactTable #commute_time-other-wrap .commute-minutes-wrap input[name="commute_time-other"], .page-profile-registration-en .entry-content .contactTable #commute_time-other-wrap .commute-minutes-wrap input[name="commute_time-other"], .page-profile-registration .entry-content .contactTable input[name="commute_time-other"], .page-profile-registration-en .entry-content .contactTable input[name="commute_time-other"] { width: var(--sr-ym-year-w) !important; min-width: 4.5em !important; max-width: 6.5em !important; display: inline-block !important; min-height: var(--sr-input-h); padding: var(--sr-input-pad-y) 0.55rem; box-sizing: border-box; text-align: center; -webkit-appearance: auto; appearance: auto; } .page-profile-registration .entry-content .contactTable .sr-commute-minutes-suffix, .page-profile-registration-en .entry-content .contactTable .sr-commute-minutes-suffix { flex: 0 0 auto; white-space: nowrap; } /* 勤務開始：希望日の日付入力幅を狭く */ .page-profile-registration .entry-content .contactTable .working-start-date-wrap.input-inline .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable .working-start-date-wrap.input-inline input { width: 10em; min-width: 9em; } /* 制服希望：靴サイズ入力欄は短いテキスト（例: 25.5cm）なので grid 右カラム全幅に広がらないよう絞る */ .page-profile-registration .entry-content .contactTable .shoes-size-input-wrap.input-inline .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable .shoes-size-input-wrap.input-inline input[name="shoes"] { width: 10em; min-width: 8em; max-width: 14em; } /* 制服希望（上・下・靴）はラベルが「上」「下」「靴」と極端に短いので、 * PCスキル流の右寄せ + 固定幅ラベル列だとラベル右の余白が広く間延びして見える。 * このブロックだけ grid 列幅を「ラベル相当の固定値」に詰めて、ラベルを左寄せに変える。 * * 重要: 「その他」入力欄（sr-wide-row）も同じ grid 列幅に揃える。 * サブ行にはラベル要素がないので auto にすると第1カラムが 0 幅に潰れ、 * 「その他」入力欄が直上のサイズチェック群より左にズレてしまう。 * ラベル相当の固定幅を与えることで、サイズチェック群と入力欄の開始位置が揃う。 */ .page-profile-registration .entry-content .contactTable #uniform-size-top-wrap.sr-skill-row, .page-profile-registration .entry-content .contactTable #uniform-size-under-wrap.sr-skill-row, .page-profile-registration .entry-content .contactTable #shoes-size-wrap.sr-skill-row, .page-profile-registration .entry-content .contactTable #uniform_top-other-wrap.input-sub.input-row, .page-profile-registration .entry-content .contactTable #uniform_under-other-wrap.input-sub.input-row { grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 0.5rem; } /* EN ロケールはラベルが "Top" / "Bottom" / "Shoes" と長くなるので列幅を拡大して * 3 行のチェックボックス開始位置と「その他」入力欄の開始位置を一致させる */ .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #uniform-size-top-wrap.sr-skill-row, .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #uniform-size-under-wrap.sr-skill-row, .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #shoes-size-wrap.sr-skill-row, .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #uniform_top-other-wrap.input-sub.input-row, .page-profile-registration .entry-content [data-matching-staff-registration-locale="en"] .contactTable #uniform_under-other-wrap.input-sub.input-row { grid-template-columns: 5em minmax(0, 1fr); } .page-profile-registration .entry-content .contactTable #uniform-size-top-wrap .sr-skill-name, .page-profile-registration .entry-content .contactTable #uniform-size-under-wrap .sr-skill-name, .page-profile-registration .entry-content .contactTable #shoes-size-wrap .sr-skill-name { justify-content: flex-start; text-align: left; } /* 「その他」系テキストを1行下でフル幅にする共通行 * 使用例: 語学のその他 / PCスキルの会計・CAD・HP制作 のその他 / 勤務地のその他 / 登録業種のその他 など * マークアップは inc/cf7-form-staff-registration.html と同期すること * * 親の選択肢ラベル（「会計ソフト：」など）の下にぶら下がる入力なので、 * 左に少しインデント + Product Main 系の薄い罫線で親子関係を視覚化する。 * * - 親が sr-skill-row のとき: grid 2 カラム配置になるため、右カラム子要素 (grid-column: 2) に縦線を移して * 入力フォームのすぐ左に出す * - それ以外（直前が単純な checkbox や select など）のとき: 要素自体の左端に縦線を出す * （語学・登録業種・在留資格 EN の「その他」が該当） */ .page-profile-registration .entry-content .contactTable .input-sub.sr-wide-row.input-row { flex-direction: column; align-items: stretch; align-content: stretch; width: 100%; max-width: 100%; box-sizing: border-box; padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, var(--matching-color-primary) 30%, var(--matching-color-border) 70%); } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.sr-wide-row.input-row { padding-left: 0; border-left: none; } .page-profile-registration .entry-content .contactTable .sr-skill-row + .input-sub.sr-wide-row.input-row > * { padding-left: 0.85rem; border-left: 2px solid color-mix(in srgb, var(--matching-color-primary) 30%, var(--matching-color-border) 70%); box-sizing: border-box; } .page-profile-registration .entry-content .contactTable .sr-wide-row .wpcf7-form-control-wrap { display: block !important; width: 100% !important; /* インデント込みでも入力欄が読みやすい行長を超えないよう、ラッパ側で上限を絞る */ max-width: calc(var(--sr-input-max) - 0.85rem) !important; min-width: 0 !important; box-sizing: border-box; } .page-profile-registration .entry-content .contactTable .sr-wide-row input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } /* 追加入力（その他など）は横並び・適度な幅 */ .page-profile-registration .entry-content .contactTable .input-inline { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: 0; vertical-align: middle; } .page-profile-registration .entry-content .contactTable .input-inline input, .page-profile-registration .entry-content .contactTable .input-inline .wpcf7-form-control-wrap input { width: 12em; min-width: 10em; max-width: var(--sr-input-max); display: inline-block; } .page-profile-registration .entry-content .contactTable .input-sub.input-row .input-inline { margin-right: 0.5rem; } .page-profile-registration .entry-content .contactTable .input-sub.input-row .input-inline + .input-inline { margin-left: 0; } /* working-time-row（勤務時間）入力画面: ラベルは .sr-skill-name 側のため .working-time-label は非表示（旧構造互換）。 * 確認画面 (#confirmationScreen) の .working-time-label は表示する。 */ .page-profile-registration .entry-content .contactTable td.sr-matrix-cell .working-time-row .working-time-label { display: none; } /* td.input の .wpcf7-form-control-wrap { display:block; width:100% } を打ち消す */ .page-profile-registration .entry-content .contactTable td.input .working-time-row .wpcf7-form-control-wrap { display: inline-flex !important; width: 6.5em !important; min-width: 5em !important; max-width: none !important; align-items: center; flex-shrink: 0; } .page-profile-registration .entry-content .contactTable .working-time-row input[name="start_time"], .page-profile-registration .entry-content .contactTable .working-time-row input[name="end_time"] { width: 100%; box-sizing: border-box; min-width: 0; display: block; } .page-profile-registration .entry-content .contactTable .input-row .wpcf7-form-control-wrap { display: inline-flex; align-items: center; } /* 入力欄・select 矢印・textarea 最低高さは matching-cf7-form.css に共通化済み。 * （--matching-cf7-input-* トークンで --sr-* と同じ尺感を維持） */ /* ========== 顔写真ピッカー（カード型ドロップゾーン + サムネプレビュー + 削除） ========== */ /* セル幅いっぱい近く（95%）まで広げ、取り込んだ画像の全体が把握しやすい 大きめのプレビュー枠を持たせる */ .page-profile-registration .entry-content .contactTable .input-row-file { display: block; width: 95%; /* max-width: min(64rem, 100%); */ } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker { position: relative; display: block; width: 100%; } /* CF7 の wpcf7-form-control-wrap と は視覚的に隠す（操作はラベル経由）。 .sr-only パターン（accessibility 維持）。 */ .page-profile-registration .entry-content .contactTable .staff-face-photo-picker .wpcf7-form-control-wrap, .page-profile-registration .entry-content .contactTable input[type="file"].staff-face-photo-file { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0; } /* ドロップゾーン本体（label）。PC: 写真左・説明右 / SP: 説明上・写真下（HTML は説明→写真） */ .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.4rem; width: 100%; padding: 1.8rem 1.8rem; border: 2px dashed color-mix(in srgb, var(--matching-color-primary) 38%, var(--sr-border) 62%); border-radius: var(--sr-radius); background: color-mix(in srgb, var(--matching-color-primary) 4%, var(--sr-surface) 96%); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone:hover, .page-profile-registration .entry-content .contactTable .staff-face-photo-picker:focus-within .staff-face-photo-dropzone { border-color: var(--matching-color-primary); background: color-mix(in srgb, var(--matching-color-primary) 8%, var(--sr-surface) 92%); box-shadow: var(--matching-shadow); } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone.is-dragover { border-color: var(--matching-color-primary); background: color-mix(in srgb, var(--matching-color-primary) 14%, var(--sr-surface) 86%); box-shadow: var(--matching-shadow-md); transform: translateY(-1px); } /* キーボードフォーカス時のリング（input が visually hidden なのでラベル側に出す） */ .page-profile-registration .entry-content .contactTable .staff-face-photo-picker:focus-within .staff-face-photo-dropzone { outline: 3px solid color-mix(in srgb, var(--matching-color-primary) 35%, transparent); outline-offset: 2px; } /* 左カラム（PC）：3:4 プレビュー / 未選択時アイコン */ .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-media, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-media { position: relative; display: inline-flex; align-items: center; justify-content: center; order: 1; width: clamp(13rem, 18vw, 18rem); max-width: 100%; aspect-ratio: 3 / 4; border-radius: 0.8rem; background: var(--matching-color-bg); border: 1px solid color-mix(in srgb, var(--matching-color-primary) 22%, var(--sr-border) 78%); color: var(--matching-color-primary); overflow: hidden; flex: 0 0 auto; justify-self: start; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-icon { display: inline-flex; align-items: center; justify-content: center; width: 5.2rem; height: 5.2rem; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-icon svg { width: 100%; height: 100%; display: block; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-preview { position: absolute; inset: 0; display: none; background: var(--matching-color-surface-alt); } /* CF7 (WPCF7_AUTOP) がフォーム HTML の改行を
に変換するため、 preview 内が

となり img が 1 行ぶん下にズレる。 以外のノードを全て描画から外し、img は絶対配置で枠いっぱいに広げる */ .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-preview > *:not(img) { display: none !important; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 選択済みの状態：アイコン非表示・プレビュー表示・ボーダーは実線へ */ .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-filled .staff-face-photo-dropzone { border-style: solid; border-color: color-mix(in srgb, var(--matching-color-primary) 45%, var(--sr-border) 55%); background: var(--matching-color-bg); } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-filled .staff-face-photo-dropzone-icon { display: none; } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-filled .staff-face-photo-dropzone-preview { display: block; } /* 右カラム（PC）：タイトル・操作案内・形式注釈 */ .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-body, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-body { display: flex; flex-direction: column; gap: 0.4rem; order: 2; min-width: 0; width: auto; text-align: left; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-title { font-size: calc(var(--sr-input-fs) * 1.04); font-weight: 700; color: var(--matching-color-heading); line-height: 1.45; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-desc { font-size: var(--sr-input-fs); color: var(--matching-color-secondary); line-height: 1.5; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-desc-em { color: var(--matching-color-primary); font-weight: 600; } /* タッチ端末（スマホ・タブレット）：D&D 案内を出さずタップのみ */ .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-desc-touch, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-desc-touch { display: none; } @media (hover: none) and (pointer: coarse) { .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-desc-touch, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-desc-touch { display: block; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-desc-desktop, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-desc-desktop { display: none; } } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-meta { font-size: var(--sr-caption-fs); color: var(--matching-color-muted); line-height: 1.55; } /* スマホ：説明文 → 写真枠の縦積み（PC の 2 列 grid + order を確実に上書き） */ @media (max-width: 640px) { .page-profile-registration .entry-content .contactTable label.staff-face-photo-dropzone, .page-profile-registration-en .entry-content .contactTable label.staff-face-photo-dropzone, .page-profile-registration .entry-content .matching-cf7-form .contactTable label.staff-face-photo-dropzone, .page-profile-registration-en .entry-content .matching-cf7-form .contactTable label.staff-face-photo-dropzone { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row; align-items: stretch !important; gap: 0.85rem; padding: 1rem 0.85rem; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-body, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-body { order: 1; grid-column: 1; grid-row: 1; width: 100%; max-width: 100%; } .page-profile-registration .entry-content .contactTable .staff-face-photo-dropzone-media, .page-profile-registration-en .entry-content .contactTable .staff-face-photo-dropzone-media { order: 2; grid-column: 1; grid-row: 2; width: min(100%, 12rem); max-width: 12rem; justify-self: center; } } /* 選択後ステータス行（ファイル名 + 削除） */ .page-profile-registration .entry-content .contactTable .staff-face-photo-status { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; padding: 0.7rem 1rem; border-radius: 0.6rem; background: var(--sr-surface); border: 1px solid var(--sr-border); min-height: 4rem; } .page-profile-registration .entry-content .contactTable .staff-face-photo-status-name { flex: 1 1 auto; min-width: 0; font-size: var(--sr-input-fs); color: var(--matching-color-secondary); line-height: var(--sr-lh-input); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-filled .staff-face-photo-status-name { color: var(--matching-color-heading); font-weight: 600; } .page-profile-registration .entry-content .contactTable .staff-face-photo-status-remove { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; border-radius: 0.5rem; border: 1px solid var(--matching-color-danger-border); background: transparent; color: var(--matching-color-danger-text); font-size: calc(var(--sr-input-fs) * 0.88); font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .page-profile-registration .entry-content .contactTable .staff-face-photo-status-remove:hover, .page-profile-registration .entry-content .contactTable .staff-face-photo-status-remove:focus-visible { background: var(--matching-color-danger-bg); color: var(--matching-color-danger-border); outline: none; } /* 非画像が選ばれた場合の警告（プレビュー無理）。タイプ警告のみ赤に。 */ .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-invalid-type .staff-face-photo-dropzone { border-color: var(--matching-color-danger-border); background: var(--matching-color-danger-bg); } /* 画像最適化（クロップ + リサイズ）中の状態。 ドロップゾーンを薄くしつつ、メディア枠中央にスピナーを出す */ .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-processing .staff-face-photo-dropzone { cursor: progress; } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-processing .staff-face-photo-dropzone-media { background: var(--matching-color-surface-alt); } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-processing .staff-face-photo-dropzone-media::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; border: 3px solid color-mix(in srgb, var(--matching-color-primary) 22%, transparent); border-top-color: var(--matching-color-primary); border-radius: 50%; animation: matching-file-picker-spin 0.8s linear infinite; z-index: 1; } .page-profile-registration .entry-content .contactTable .staff-face-photo-picker.is-processing .staff-face-photo-status-name { color: var(--matching-color-muted); font-style: italic; } @keyframes matching-file-picker-spin { to { transform: rotate(360deg); } } /* 生年月日：入力フォームを小さくし、「生まれ」と1行で横並び */ .page-profile-registration .entry-content .contactTable .input-row-inline { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 0 0.5rem; /* バリデーションエラーチップ（.wpcf7-not-valid-tip）を絶対配置するための anchor */ position: relative; } .page-profile-registration .entry-content .contactTable .input-row-inline .wpcf7-form-control-wrap { display: block !important; flex: 0 0 11em !important; width: 11em !important; min-width: 0; max-width: 11em !important; /* wrap 内に表示されるエラーチップ用の anchor */ position: relative; } .page-profile-registration .entry-content .contactTable .input-row-inline input[type="date"], .page-profile-registration .entry-content .contactTable .input-row-inline input[type="text"]#birth, .page-profile-registration .entry-content .contactTable td.input input#birth { width: 100% !important; max-width: 100% !important; min-width: 0; box-sizing: border-box; } .page-profile-registration .entry-content .contactTable .input-row-inline .input-suffix { flex: 0 0 auto; margin-left: 0.25rem; white-space: nowrap; } /* 日付ハイブリッド（手打ち + Flatpickr）：カレンダーアイコンでピッカー利用可 */ .page-profile-registration .entry-content .contactTable input.flatpickr-input#birth, .page-profile-registration .entry-content .contactTable input.flatpickr-input#working_start_date, .page-profile-registration-en .entry-content .contactTable input.flatpickr-input#birth, .page-profile-registration-en .entry-content .contactTable input.flatpickr-input#working_start_date { padding-right: calc(var(--sr-input-pad-x) + 2rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.45rem; cursor: text; } .page-profile-registration .flatpickr-calendar, .page-profile-registration-en .flatpickr-calendar { border-radius: var(--sr-radius, 0.5rem); border-color: var(--sr-border, #cbd5e1); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); font-size: var(--matching-public-label-fs, 1.5rem); } .page-profile-registration .flatpickr-day.selected, .page-profile-registration .flatpickr-day.startRange, .page-profile-registration .flatpickr-day.endRange, .page-profile-registration-en .flatpickr-day.selected, .page-profile-registration-en .flatpickr-day.startRange, .page-profile-registration-en .flatpickr-day.endRange { background: var(--sr-primary, #2563eb); border-color: var(--sr-primary, #2563eb); } .page-profile-registration .flatpickr-day.today, .page-profile-registration-en .flatpickr-day.today { border-color: color-mix(in srgb, var(--sr-primary, #2563eb) 55%, transparent); } /* Flatpickr：年・月をドロップダウン一覧から選択（カレンダーは body 直下） */ .matching-flatpickr-dropdown-header .flatpickr-current-month { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.35em; white-space: nowrap; width: 75%; height: 34px; overflow: visible; } .matching-flatpickr-dropdown-header .flatpickr-current-month .numInputWrapper { display: none !important; } .matching-flatpickr-dropdown-header .flatpickr-current-month .matching-flatpickr-year-select, .matching-flatpickr-dropdown-header .flatpickr-current-month .flatpickr-monthDropdown-months { appearance: menulist; background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: inherit; cursor: pointer; flex: 0 0 auto; font-family: inherit; font-size: inherit; font-weight: 300; line-height: inherit; margin: 0; max-width: none; padding: 0 0.15em; white-space: nowrap; } .matching-flatpickr-dropdown-header .flatpickr-current-month .matching-flatpickr-year-select:hover, .matching-flatpickr-dropdown-header .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(0, 0, 0, 0.05); } /* 日本語：ヘッダー順序を「年 → 月」 */ .matching-flatpickr-year-first .flatpickr-current-month .matching-flatpickr-year-select { order: -1; } .matching-flatpickr-year-first .flatpickr-current-month .flatpickr-monthDropdown-months { order: 0; } /* 生年月日: 「※入力してください」エラーチップが 「生まれ」サフィックスと被って .input-row-inline が改行・縦伸びするのを防ぐ。 tip を absolute で行の下に逃がし、行高はチップが無いときと同じに保つ */ .page-profile-registration .entry-content .contactTable .input-row-inline .wpcf7-not-valid-tip { position: absolute; top: calc(100% + 0.35rem); left: 0; margin-top: 0; white-space: nowrap; z-index: 2; } /* エラーチップが出ているときだけ、セル下端を空けて age 行と被らないようにする */ .page-profile-registration .entry-content .contactTable .birth-row td.input:has(.wpcf7-not-valid-tip), .page-profile-registration .entry-content .contactTable td.input:has(.input-row-inline .wpcf7-not-valid-tip) { padding-bottom: calc(var(--sr-cell-pad-y) + 2.4em); } /* ========== ラジオ・チェックボックス（選択でラベルに色付き枠） ========== * .contactTable 内の選択肢だけ対象。.form-check（個人情報同意 [acceptance]）は * matching-cf7-form.css の共通レイアウト（フル幅行＋ネイティブ checkbox 表示）に任せる。 */ .page-profile-registration .entry-content .contactTable .wpcf7-list-item input[type="radio"], .page-profile-registration .entry-content .contactTable .wpcf7-list-item input[type="checkbox"]:not(#check), .page-profile-registration .entry-content .contactTable td.input input[type="radio"], .page-profile-registration .entry-content .contactTable td.input input[type="checkbox"]:not(#check) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; } .page-profile-registration .entry-content .contactTable .wpcf7-list-item { display: inline-flex; align-items: center; margin: 0 var(--sr-choice-item-mr) var(--sr-choice-item-mb) 0; vertical-align: middle; } .page-profile-registration .entry-content .contactTable .wpcf7-list-item label, .page-profile-registration .entry-content .contactTable td.input label { display: inline-flex !important; align-items: center; justify-content: center; gap: var(--sr-choice-chip-gap); margin: 0 !important; padding: var(--sr-choice-chip-pad-y) var(--sr-choice-chip-pad-x) !important; min-width: var(--sr-choice-chip-min-w); box-sizing: border-box; font-size: var(--sr-choice-label-fs); font-weight: 500; cursor: pointer; border: 1px solid color-mix(in srgb, var(--sr-border) 88%, var(--matching-color-heading) 12%); border-radius: var(--matching-radius-sm); background: rgba(255, 255, 255, 0.85); color: var(--matching-color-heading); transition: border-color var(--sr-transition), background-color var(--sr-transition), box-shadow var(--sr-transition); user-select: none; } .page-profile-registration .entry-content .contactTable .wpcf7-list-item label .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable td.input label .wpcf7-list-item-label { color: inherit; } /* 選択時：ラベルに色付き枠（控えめに） */ .page-profile-registration .entry-content .contactTable .wpcf7-list-item label:has(input:checked), .page-profile-registration .entry-content .contactTable td.input label:has(input:checked), .page-profile-registration .entry-content .contactTable .wpcf7-list-item:has(input:checked) label { border-color: var(--sr-primary); background-color: color-mix(in srgb, var(--matching-color-primary) 18%, var(--matching-color-bg)); color: var(--matching-color-heading); } .page-profile-registration .entry-content .contactTable .wpcf7-list-item label:has(input:checked) .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable td.input label:has(input:checked) .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable .wpcf7-list-item:has(input:checked) label .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable .wpcf7-list-item input:checked + .wpcf7-list-item-label, .page-profile-registration .entry-content .contactTable td.input input:checked + .wpcf7-list-item-label { color: var(--matching-color-heading); } .page-profile-registration .entry-content .contactTable .wpcf7-list-item label:hover, .page-profile-registration .entry-content .contactTable td.input label:hover { border-color: var(--sr-border-hover); background-color: var(--sr-surface); } .page-profile-registration .entry-content .contactTable .wpcf7-list-item label:has(input:checked):hover, .page-profile-registration .entry-content .contactTable td.input label:has(input:checked):hover, .page-profile-registration .entry-content .contactTable .wpcf7-list-item:has(input:checked) label:hover { background-color: var(--sr-primary-light); } @media (max-width: 640px) { .page-profile-registration .entry-content .contactTable th.title, .page-profile-registration .entry-content .contactTable td.input { display: block; width: 100%; border-right: 0; padding-left: max(1rem, var(--sr-cell-pad-x)); padding-right: max(1rem, var(--sr-cell-pad-x)); } .page-profile-registration .entry-content .contactTable th.title { border-bottom: 0; padding-top: calc(var(--sr-cell-pad-y) + 0.15rem); padding-bottom: 0.35rem; } .page-profile-registration .entry-content .contactTable td.input { padding-top: 0.65rem; padding-bottom: calc(var(--sr-cell-pad-y) + 0.65rem); } .page-profile-registration .entry-content .contactTable input[type="text"], .page-profile-registration .entry-content .contactTable input[type="email"], .page-profile-registration .entry-content .contactTable input[type="tel"], .page-profile-registration .entry-content .contactTable input[type="number"], .page-profile-registration .entry-content .contactTable input[type="date"], .page-profile-registration .entry-content .contactTable input[type="password"], .page-profile-registration .entry-content .contactTable select, .page-profile-registration .entry-content .contactTable textarea { max-width: 100%; } } /* ========== CF7 共通（contactTable 外の wpcf7 要素） ========== */ .page-profile-registration .entry-content .wpcf7 { max-width: 100%; letter-spacing: var(--sr-track); } .page-profile-registration .entry-content .wpcf7-form-control-wrap { display: block; margin-top: 0.1rem; } /* テキスト入力用ラベルのみ（.wpcf7-list-item 内の label は上で inline-flex 指定） */ .page-profile-registration .entry-content .wpcf7-form-control-wrap:not([class*="radio"]):not([class*="checkbox"]) > label { display: block; margin-top: 0.6rem; } /* 上で contactTable と wpcf7 の入力系・textarea の min-height を統一済み */ /* ========== フォーム下部ボタンエリア ========== */ .page-profile-registration .entry-content .btn-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sr-field-gap); margin-top: var(--sr-section-gap); margin-bottom: var(--sr-section-gap); padding: var(--sr-field-gap) 0 calc(var(--sr-section-gap) - 0.25rem); } /* 修正へ戻る・送信を横並び：高さ・ベースラインを揃える */ .page-profile-registration .entry-content .btn-wrapper.btn-actions-row { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.25rem; } .page-profile-registration .entry-content .btn-wrapper .submit, .page-profile-registration .entry-content .btn-wrapper .confirmation-wrapper, .page-profile-registration .entry-content .btn-wrapper .edit-wrapper, .page-profile-registration .entry-content .btn-wrapper .submit-wrapper { display: block; } .page-profile-registration .entry-content .btn-wrapper.btn-actions-row > .submit { display: flex; align-items: center; flex: 0 1 auto; } .page-profile-registration .entry-content .btn-wrapper .submit.hide-before-after .confirmation-btn, .page-profile-registration .entry-content .btn-wrapper .submit.is-disabled .confirmation-btn { opacity: 0.6; cursor: not-allowed; } .page-profile-registration .entry-content .btn-wrapper .submit .confirmation-wrapper.disabled { pointer-events: none; } .page-profile-registration .entry-content .btn-wrapper .submit-wrapper input { width: auto; min-width: 0; } /* .contact-btn / .contact-btn.confirmation-btn / .contact-btn.edit-btn の構造・色は * style.css の共通基底に集約済み（.contact-btn / .is-confirmation / .is-edit）。 * 登録フォーム固有の追加挙動だけ残す： * - clickable-but-gated（送信前バリデーション用） * - input[type=submit].contact-btn の hover で box-shadow を強める強調 */ .page-profile-registration .entry-content .contact-btn.confirmation-btn.matching-staff-confirm-gated { cursor: not-allowed; opacity: 0.6; pointer-events: auto; } .page-profile-registration .entry-content .contact-btn.confirmation-btn.matching-staff-confirm-gated:hover { transform: none; } .page-profile-registration .entry-content input[type="submit"].contact-btn:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--matching-color-primary) 40%, transparent); } .page-profile-registration .entry-content .btn-add-block { display: inline-flex; align-items: center; justify-content: center; min-height: max(var(--matching-btn-min-height, 4rem), 4.4rem); padding: var(--matching-btn-padding-y, 1rem) var(--matching-btn-padding-x, 1.8rem); font-size: clamp(1.58rem, 0.32vw + 1.44rem, 1.76rem); font-weight: 600; font-family: inherit; line-height: 1.35; text-align: center; letter-spacing: var(--sr-track); border-radius: var(--sr-radius); border: var(--matching-btn-border-width, 2px) solid var(--sr-border); background: var(--matching-color-bg); color: var(--matching-color-text); cursor: pointer; -webkit-appearance: none; appearance: none; box-sizing: border-box; flex-shrink: 0; transition: background-color var(--sr-transition), border-color var(--sr-transition); } .page-profile-registration .entry-content .btn-add-block:hover { background-color: var(--sr-surface); border-color: var(--sr-border-hover); } /* ========== 学歴ブロック（#studies-wrapper） ========== */ .page-profile-registration .entry-content #studies-wrapper { display: flex; flex-direction: column; gap: var(--sr-block-stack-gap); margin-bottom: var(--sr-block-stack-gap); min-width: 0; } .page-profile-registration .entry-content .studies-block { padding: 1.35rem 1.65rem; background: var(--sr-surface-alt); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); min-width: 0; box-sizing: border-box; overflow-x: clip; } .page-profile-registration .entry-content .studies-block + .btn-add-block { margin-top: 0.5rem; } .page-profile-registration .entry-content .studies-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0.65rem; min-width: 0; } @media (min-width: 769px) { .page-profile-registration .entry-content .studies-wrap { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } } .page-profile-registration .entry-content .studies-wrap .title { flex: 1 0 100%; font-weight: 600; font-size: calc(var(--sr-th-fs) + 0.04rem); margin: 0.25rem 0 0; } .page-profile-registration .entry-content .studies-wrap .input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; margin-bottom: calc(var(--sr-field-gap) + 0.28rem); } @media (min-width: 769px) { .page-profile-registration .entry-content .studies-wrap .input { display: inline-flex; flex-wrap: nowrap; gap: 0.25rem; width: auto; max-width: none; } } .page-profile-registration .entry-content .studies-wrap .wpcf7-form-control-wrap { display: inline-flex; align-items: center; gap: 0.25rem; min-width: 0; max-width: 100%; } .page-profile-registration .entry-content .contactTable td.input #studies-wrapper .wpcf7-form-control-wrap:has(input[name^="graduation"]) { display: block !important; width: 100% !important; max-width: 100% !important; flex: 1 1 100%; box-sizing: border-box; } .page-profile-registration .entry-content .studies-wrap input[type="number"], .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="year-"], .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration .entry-content .studies-wrap input[name^="year-"], .page-profile-registration .entry-content .studies-wrap input[name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[type="number"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="year-"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="year-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="month-"] { display: inline-block !important; width: var(--sr-ym-year-w) !important; max-width: 100% !important; min-width: 0 !important; min-height: var(--sr-input-h); padding: var(--sr-input-pad-y) 0.55rem; box-sizing: border-box; text-align: center; -webkit-appearance: auto; appearance: auto; flex: 0 1 auto; } @media (min-width: 769px) { .page-profile-registration .entry-content .studies-wrap input[type="number"], .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="year-"], .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration .entry-content .studies-wrap input[name^="year-"], .page-profile-registration .entry-content .studies-wrap input[name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[type="number"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="year-"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="year-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="month-"] { max-width: none !important; min-width: 5.5em !important; flex: none; } } .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration .entry-content .studies-wrap input[name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="month-"] { width: var(--sr-ym-month-w) !important; min-width: 0 !important; } @media (min-width: 769px) { .page-profile-registration .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration .entry-content .studies-wrap input[name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[type="text"][name^="month-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="month-"] { min-width: 3.75em !important; } } .page-profile-registration .entry-content .studies-wrap input[name^="graduation-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="graduation-"] { min-width: 0; max-width: 100%; display: block; width: 100%; box-sizing: border-box; } @media (min-width: 769px) { .page-profile-registration .entry-content .studies-wrap input[name^="graduation-"], .page-profile-registration-en .entry-content .studies-wrap input[name^="graduation-"] { max-width: 28em; } } /* ========== 職務経歴ブロック（#career-wrapper） ========== */ .page-profile-registration .entry-content #career-wrapper { display: flex; flex-direction: column; gap: var(--sr-block-stack-gap); margin-bottom: var(--sr-block-stack-gap); } .page-profile-registration .entry-content .career-block { padding: 1.35rem 1.65rem; background: var(--sr-surface-alt); border: 1px solid var(--sr-border); border-radius: var(--sr-radius); min-width: 0; box-sizing: border-box; overflow-x: clip; } .page-profile-registration .entry-content .career-block + .btn-add-block { margin-top: 0.5rem; } .page-profile-registration .entry-content .career-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.52rem 0.85rem; margin-bottom: calc(var(--sr-field-gap) + 0.2rem); padding-bottom: calc(var(--sr-field-gap) + 0.35rem); border-bottom: 1px solid var(--sr-border); } .page-profile-registration .entry-content .career-wrap:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* ラベル1行・入力2行目で枠内に収める（CF7が入れる br は非表示）。 * WPCF7_AUTOP は OFF だが、CF7 が

でラップした保険として全幅 flex item にする */ .page-profile-registration .entry-content .career-wrap > p:has(> .input) { flex: 1 0 100%; margin: 0; width: 100%; min-width: 0; } .page-profile-registration .entry-content .career-wrap > p:has(> .input) .title { display: block; font-weight: 600; color: var(--matching-color-text); margin-bottom: 0.4rem; } .page-profile-registration .entry-content .career-wrap > p:has(> .input) .input { display: block; min-width: 0; width: 100%; } .page-profile-registration .entry-content .career-wrap > p:has(> .input) br { display: none; } .page-profile-registration .entry-content .career-wrap > .title { flex: 0 0 8.5rem; min-width: 11rem; font-weight: 600; color: var(--matching-color-text); line-height: 1.5; } /* 勤務期間だけは flex-direction: column にして「ラベル → 入力（career-period-wrap）」を縦並びに */ .page-profile-registration .entry-content .career-wrap:has(> .career-period-wrap) { flex-direction: column; align-items: flex-start; gap: 0.4rem; } /* column 方向のとき .title の "flex: 0 0 8.5rem" は main axis (= 高さ) として解釈されるため、 * 「勤務期間：」と 開始/終了 の間に大きな縦空白が出る。解除する。 */ .page-profile-registration .entry-content .career-wrap:has(> .career-period-wrap) > .title, .page-profile-registration .entry-content .career-wrap:has(> .career-period-wrap) > p:first-child { flex: none; min-width: 0; } .page-profile-registration .entry-content .career-wrap:has(> .career-period-wrap) > p:first-child { margin: 0; padding: 0; font-weight: 600; color: var(--matching-color-text); line-height: 1.5; } .page-profile-registration .entry-content .career-wrap:has(> .career-period-wrap) > p:first-child .title { display: block; font-weight: inherit; color: inherit; line-height: inherit; } .page-profile-registration .entry-content .career-wrap > .career-period-wrap { flex: none; width: 100%; min-width: 0; align-self: stretch; } /* .career-wrap (flex container) の入力カラム. * flex-basis: 0 で title (8.5rem) 以外の残り幅を全て吸収させ、内部の /