/* ==========================================================================
No Image画像を完全に中央配置にする設定
========================================================================== */
/* No Image画像を正方形の枠内でも縦横中央に配置する */
.custom-center-noimage {
display: block !important;
width: 100% !important;
height: 100% !important;
/* 枠いっぱいに引き伸ばして切り取るのではなく、全体が収まるように縮小する */
object-fit: contain !important;
/* 正方形の枠に対して、上下も左右も「真ん中」に配置する */
object-position: center center !important;
/* 背景に隙間ができる場合は、ここでお好みの背景色（白や薄いグレーなど）を指定できます */
background-color: transparent !important;
}
/* ==========================================
* スマホ用（画面幅768px以下）のNo Image画像調整
* ========================================== */
@media screen and (max-width: 768px) {
.custom-center-noimage {
/* スマホの小さな枠内でも「No Image」の文字やロゴが小さくなりすぎないよう、
ほんの少しだけ引き伸ばして（1.1倍〜1.2倍程度に）見やすく調整する魔法の記述 */
transform: scale(1.15);
/* 拡大した際、カードの枠線（角丸など）からはみ出さないようにガード */
overflow: hidden;
/* 元の綺麗な中央配置をスマホでも100%維持 */
object-fit: contain !important;
object-position: center center !important;
}
}
/* =========================
写真スライダー共通スタイル
========================= */
.job-sticky-images {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.job-side-image {
width: 100%;
height: auto; /* 固定高さ(400px)だとレスポンシブで崩れやすいためauto推奨 */
aspect-ratio: 16/9; /* 横長で揃える設定 */
overflow: hidden;
border-radius: 8px;
height: 350px; /* 横並び用に少し高さを調整 */
}
.job-side-image img {
width: 100%;
height: 100%;
object-fit: cover; /* ★これが重要：どんな比率の画像でも枠に収まる */
object-position: center; /* 画像の中央部分を表示 */
}
/* =========================
写真Swiper スライダースタイル
========================= */
.job-slider {
position: relative;
width: 100%;
margin-bottom: 30px;
}
.swiper-wrapper {
display: flex;
}
.swiper-slide {
width: 100%;
flex-shrink: 0;
}
/* =========================
求人票内検索
========================= */
/* サイドパネル全体（カード化） */
.new2-job-search-panel {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin-top: 100px;
}
/* 見出し */
.new2-panel-heading {
font-size: 1.1rem;
margin-bottom: 15px;
color: #333;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.new2-sub-text {
font-size: 0.8rem;
color: #888;
display: block;
}
/* 検索項目を縦並びに整理 */
.new2-search-col {
margin-bottom: 15px;
}
.new2-top-detailedsearch-title {
font-size: 0.85rem;
margin-bottom: 5px;
color: #555;
}
/* セレクトボックスを幅いっぱいにする */
.new2-search-col select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 検索ボタンを強調 */
.new2-search-keyword-full {
display: flex;
flex-direction: column; /* 縦並びでシンプルに */
gap: 10px;
}
.new2-search-keyword-full input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.new2-js-search-trigger {
background: #fff; /* 背景を白に */
color: #f37321; /* 文字色をオレンジに */
border: 2px solid #f37321; /* オレンジの枠線 */
padding: 10px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease; /* 変化を滑らかに */
}
.new2-js-search-trigger:hover {
background: #f37321; /* ホバーで背景をオレンジに */
color: #fff; /* ホバーで文字を白に */
}
/* --- サイドパネル用：地域リストの調整 --- */
.new2-region-list {
margin-bottom: 20px;
}
.new2-region-row {
margin-bottom: 10px;
}
.new2-region-name {
font-size: 0.9rem;
font-weight: bold;
color: #444;
margin-bottom: 4px;
}
.new2-prefectures {
display: flex;
flex-wrap: wrap;
gap: 6px; /* リンク間の隙間 */
}
.new2-prefectures a {
font-size: 0.75rem; /* 都道府県を少し小さく */
color: #666;
text-decoration: none;
padding: 2px 4px;
background: #f4f4f4;
border-radius: 3px;
}
.new2-prefectures a:hover {
color: #007bff;
background: #eef;
}
/* =========================
写真ドット
========================= */
.swiper-pagination {
position: relative; /* static から relative に変更 */
display: flex;
justify-content: center;
gap: 8px;
padding-top: 16px;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #D7CCC8;
cursor: pointer;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background-color: #D97757;
width: 28px;
border-radius: 5px;
}
/* ==========================================
エントリーページ：オレンジ統一スキン
========================================== */
/* --- エントリーページ全体コンテナ --- */
.entry-page {
background-color: #f8fafc; /* 下層共通の薄いグレー背景 */
padding-bottom: 100px;
}
.inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 導入部 (Intro) --- */
.entry-intro {
padding: 80px 0 60px;
text-align: center;
}
.entry-intro__sub {
display: block;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.3em;
color: #f97316; /* ブランドオレンジ */
margin-bottom: 15px;
}
.entry-intro__title {
font-size: 32px;
color: #1e293b; /* 信頼感のあるディープグレー */
margin-bottom: 30px;
font-weight: bold;
}
.entry-intro__text {
font-size: 15px;
line-height: 1.8;
color: #475569;
margin-bottom: 15px;
}
.entry-intro__note {
font-size: 13px;
color: #f97316; /* オレンジに変更 */
font-weight: bold;
}
/* --- フォームエリア --- */
.company-contact-form {
background: #fff;
padding: 60px;
border-radius: 16px; /* 丸みを共通化 */
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04); /* 他と共通の淡い影 */
}
/* CF7の項目間隔 */
.wpcf7-form-control-wrap {
display: block;
margin-bottom: 5px;
}
/* 各入力行のスタイル */
.entry-form-row {
margin-bottom: 35px;
}
.entry-form-label {
display: block;
font-size: 16px; /* 少し視認性をアップ */
font-weight: bold;
margin-bottom: 12px;
color: #1e293b;
}
/* 必須バッジをメインオレンジに統一 */
.entry-form-label span.required {
background: #f97316;
color: #fff;
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
margin-left: 10px;
vertical-align: middle;
}
/* 入力フィールド共通（プレースホルダー・初期状態） */
.wpcf7-text,
.wpcf7-select,
.wpcf7-textarea {
width: 100%;
padding: 14px 16px; /* 縦の余白を少しスマートに調整 */
border: 1px solid #cbd5e1; /* クリーンなグレー線 */
border-radius: 6px;
background: #FFF;
font-size: 16px;
color: #1e293b;
transition: all 0.25s ease;
box-sizing: border-box;
}
/* 文字が入力されたときのスタイル（上品な淡いオレンジ背景へ） */
.wpcf7-text:not(:placeholder-shown),
.wpcf7-textarea:not(:placeholder-shown),
.wpcf7-select:valid {
border-color: #f97316; /* 枠線をブランドオレンジに */
background: #fff7ed; /* 背景をごく薄い上品なオレンジに */
}
/* フォーカス（選択中）のスタイル */
.wpcf7-text:focus,
.wpcf7-select:focus,
.wpcf7-textarea:focus {
border-color: #f97316;
background: #fff;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); /* 他のフォームと完全に共通化 */
outline: none;
}
/* 送信・確認ボタンエリア */
.entry-btn-group {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 50px;
}
/* ボタンの基本デザイン（丸みを他フォームと統一） */
.js-confirm-btn,
.wpcf7-submit,
.js-back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 40px auto 0;
padding: 16px 40px; /* 他のボタンと高さを統一 */
font-size: 16px;
font-weight: bold;
letter-spacing: 0.15em;
text-align: center;
border-radius: 8px; /* 他フォームと同一の角丸にシームレス化 */
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
box-sizing: border-box;
}
/* メインアクションボタン（確認・送信） */
.js-confirm-btn,
.wpcf7-submit {
background: #f97316;
color: #fff;
border: 2px solid #f97316;
box-shadow: none; /* 不要な固定影を排除し洗練 */
}
/* 他フォームと連動したホバーエフェクト（一段濃いオレンジにスライド変色） */
.js-confirm-btn::before,
.wpcf7-submit::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #ea580c; /* ホバー時はディープオレンジ */
transition: width 0.3s ease-in-out;
z-index: -1;
}
.js-confirm-btn:hover::before,
.wpcf7-submit:hover::before {
width: 100%;
}
.js-confirm-btn:hover,
.wpcf7-submit:hover {
color: #fff;
border-color: #ea580c;
transform: none; /* 他のボタンと挙動を統一 */
}
/* 戻るボタンのスタイル */
.js-back-btn {
background: #ffffff;
color: #475569;
border: 2px solid #cbd5e1;
}
.js-back-btn:hover {
background: #f8fafc;
color: #1e293b;
border-color: #94a3b8;
}
/* 確認画面のデザイン */
#entry-confirm-area {
padding: 20px 0;
max-width: 800px;
margin: 0 auto;
}
.confirm-item {
border-bottom: 1px dotted #e2e8f0; /* クリーンなグレーの点線に変更 */
padding: 20px 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.confirm-label {
width: 100%;
max-width: 400px;
font-weight: bold;
color: #1e293b;
padding-bottom: 8px;
}
.confirm-value {
flex: 1;
min-width: 400px;
color: #334155;
word-break: break-all;
}
/* エラーメッセージ（CF7バリデーション） */
.wpcf7-not-valid-tip {
color: #ef4444; /* エラーは世界共通で分かりやすい鮮やかな赤に */
font-size: 12px;
margin-top: 6px;
font-weight: bold;
}
/* ==========================================
新問い合わせページ：オレンジ統一スキン
========================================== */
.company-contact-form {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background: #FFFFFF;
border-radius: 16px; /* 少し丸みを増やしてモダンに */
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04); /* より洗練された淡い影 */
}
/* ラジオボタン選択肢のカスタマイズ（ベージュから淡いグレー×オレンジへ） */
.form-selector {
margin-bottom: 40px;
padding: 25px;
background: #f8fafc; /* 波ヘッダーの背景色と同じグレー */
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.form-selector p {
font-weight: bold;
color: #1e293b;
margin-bottom: 12px;
}
/* ラジオボタンを縦並びに */
.form-selector .wpcf7-list-item {
display: block;
margin-bottom: 12px;
}
.form-selector .wpcf7-list-item:last-child {
margin-bottom: 0;
}
/* ラベルの初期状態（茶色からスタイリッシュなグレーへ） */
.form-selector .wpcf7-list-item-label {
background: #ffffff !important; /* 初期状態は白 */
color: #475569 !important;
display: flex !important;
align-items: center !important;
padding: 12px 16px !important;
border-radius: 6px !important;
border: 1px solid #e2e8f0 !important;
cursor: pointer;
transition: all 0.25s ease !important;
}
/* ホバー時の変化 */
.form-selector .wpcf7-list-item-label:hover {
border-color: #f97316 !important;
color: #f97316 !important;
}
/* 選択した時のスタイル（オレンジに変更） */
.form-selector input[type="radio"]:checked + .wpcf7-list-item-label {
background: #f97316 !important; /* メインオレンジ */
border-color: #f97316 !important;
color: #ffffff !important;
}
/* 既存のラジオボタンの丸ポチは隠す仕様を維持 */
.form-selector input[type="radio"] { display: none; }
/* 入力行のデザイン */
.form-row { margin-bottom: 25px; }
.form-label { margin-bottom: 8px; }
.form-label label { font-weight: bold; color: #1e293b; }
/* 必須バッジをメインオレンジに */
.required-badge {
background: #f97316;
color: #fff;
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
margin-left: 8px;
vertical-align: middle;
}
/* インプット枠のホバー・フォーカスをオレンジに */
.form-input, .form-textarea {
width: 100%;
padding: 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 16px;
color: #1e293b;
transition: all 0.2s ease;
}
.form-input:focus, .form-textarea:focus {
outline: none;
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
/* reCAPTCHA 注意書き */
.company-recaptcha-note {
font-size: 12px;
color: #64748b;
margin-bottom: 20px;
}
.company-recaptcha-note a {
color: #f97316;
text-decoration: underline;
}
/* 確認画面の見出し */
.contact-form-heading {
text-align: center;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid #f1f5f9;
}
.contact-form-heading h2 {
font-size: 20px;
font-weight: bold;
color: #1e293b;
}
.contact-form-heading p {
font-size: 14px;
color: #64748b;
margin-top: 5px;
}
/* 確認画面の入力値表示エリア */
.form-confirm {
padding: 15px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #334155;
font-size: 16px;
word-break: break-all;
width: 100%;
box-sizing: border-box;
}
/* ボタンの共通デザイン */
.js-company-confirm-btn,
.submit,
.js-company-back-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 16px 0;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
z-index: 1;
}
/* メインボタンの初期状態（オレンジ） */
.js-company-confirm-btn, .submit {
background-color: #f97316;
color: #ffffff;
border: 2px solid #f97316;
}
/* メインボタンのホバーエフェクト（塗りつぶしカラーをディープオレンジに変更） */
.js-company-confirm-btn::before,
.submit::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #ea580c; /* ホバー時は一段濃いオレンジに滑らかに変化 */
transition: width 0.3s ease-in-out;
z-index: -1;
}
.js-company-confirm-btn:hover::before,
.submit:hover::before {
width: 100%;
}
.js-company-confirm-btn:hover,
.submit:hover {
color: #ffffff;
border-color: #ea580c;
}
/* 戻るボタンのスタイル */
.js-company-back-btn {
background-color: #ffffff;
color: #475569;
border: 2px solid #cbd5e1;
}
.js-company-back-btn:hover {
background-color: #f8fafc;
color: #1e293b;
border-color: #94a3b8;
}
/* 確認画面でのボタン並び（横並びにする場合の調整） */
.btn-submit--confirm {
display: flex;
gap: 15px;
max-width: 600px;
margin: 40px auto 0;
}
.btn-submit--confirm .js-company-back-btn,
.btn-submit--confirm .submit {
margin: 0;
max-width: 100%;
}
@media (max-widh: 576px) {
.btn-submit--confirm {
flex-direction: column-reverse;
}
}
/* ==========================================
解約アンケート：オレンジ統一スキン
========================================== */
.questionnaire-wrapper {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.04);
}
/* アンケート導入部分文言 */
.questionnaire-intro {
text-align: center;
margin-bottom: 40px;
padding-bottom: 25px;
border-bottom: 2px solid #f1f5f9;
}
.questionnaire-intro h3 {
font-size: 20px;
font-weight: bold;
color: #1e293b;
line-height: 1.4;
}
.questionnaire-intro p {
font-size: 14px;
color: #ef4444; /* 注意書きは優しく警告する赤（アクセント） */
margin-top: 10px;
font-weight: 500;
}
/* 各設問のブロックレイアウト */
.questionnaire-section {
margin-bottom: 35px;
padding-bottom: 25px;
border-bottom: 1px dashed #e2e8f0; /* 設問ごとの区切りを分かりやすく */
}
.questionnaire-section:last-of-type {
border-bottom: none;
margin-bottom: 20px;
}
/* 設問のタイトルラベル */
.questionnaire-label,
.form-label-text {
display: block;
font-weight: bold;
color: #1e293b;
font-size: 16px;
margin-bottom: 14px;
}
/* 必須バッジ */
.required-badge {
background: #f97316;
color: #fff;
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
margin-left: 8px;
vertical-align: middle;
}
/* テキスト・テキストエリア入力枠 */
.form-input,
.questionnaire-section textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 16px;
color: #1e293b;
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-input:focus,
.questionnaire-section textarea:focus {
outline: none;
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
/* --- ラジオボタン & チェックボックスの今風カスタマイズ --- */
/* 横並びを基本としつつ、はみ出さないように折り返し可能に */
.questionnaire-section .wpcf7-list-item {
display: inline-block;
margin-right: 18px;
margin-bottom: 10px;
}
.questionnaire-section .wpcf7-list-item-label {
position: relative;
padding-left: 26px;
color: #475569;
font-size: 15px;
cursor: pointer;
user-select: none;
display: inline-block;
}
/* 本体の丸・四角ポチをモダンに装飾 */
.questionnaire-section .wpcf7-list-item-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #cbd5e1;
background: #fff;
transition: all 0.2s ease;
}
/* ラジオボタンは丸型に */
.questionnaire-section .wpcf7-radio .wpcf7-list-item-label::before {
border-radius: 50%;
}
/* チェックボックスは少し角を丸めた四角に */
.questionnaire-section .wpcf7-checkbox .wpcf7-list-item-label::before {
border-radius: 4px;
}
/* ホバー時の枠線変化 */
.questionnaire-section .wpcf7-list-item:hover .wpcf7-list-item-label::before {
border-color: #f97316;
}
/* 隠されている元のinputと連動（チェックされた時のスタイル） */
.questionnaire-section input[type="radio"]:checked + .wpcf7-list-item-label,
.questionnaire-section input[type="checkbox"]:checked + .wpcf7-list-item-label {
color: #f97316;
font-weight: 600;
}
/* チェック時の中心パーツ描画 */
.questionnaire-section input[type="radio"]:checked + .wpcf7-list-item-label::before,
.questionnaire-section input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
border-color: #f97316;
background: #f97316;
}
/* ラジオボタンのチェックポチ（中の白い点） */
.questionnaire-section .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
content: "";
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
}
/* チェックボックスのチェックマーク（レ点） */
.questionnaire-section .wpcf7-checkbox input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
content: "";
position: absolute;
left: 6px;
top: calc(50% - 2px);
transform: translateY(-50%) rotate(45deg);
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
}
/* デフォルトのブラウザポチは完全に非表示 */
.questionnaire-section input[type="radio"],
.questionnaire-section input[type="checkbox"] {
display: none !important;
}
/* --- セレクトボックス（ドロップダウン）のカスタム --- */
.select-wrapper {
position: relative;
width: 100%;
max-width: 400px; /* プルダウンが広がりすぎないように制限 */
}
.select-wrapper select {
width: 100%;
padding: 12px 40px 12px 16px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 16px;
color: #1e293b;
background-color: #ffffff;
appearance: none; /* デフォルトの矢印を消す */
-webkit-appearance: none;
cursor: pointer;
transition: all 0.2s ease;
}
.select-wrapper select:focus {
outline: none;
border-color: #f97316;
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
/* カスタムの矢印アイコンを下向きに配置 */
.select-wrapper::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-right: 2px solid #64748b;
border-bottom: 2px solid #64748b;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* --- 送信ボタン（問い合わせ共通ルール） --- */
.questionnaire-submit {
margin-top: 40px;
}
.questionnaire-submit .submit {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 400px;
margin: 0 auto;
padding: 16px 0;
border-radius: 8px;
font-weight: bold;
font-size: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
background-color: #f97316;
color: #ffffff;
border: 2px solid #f97316;
transition: all 0.3s ease;
z-index: 1;
}
.questionnaire-submit .submit::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #ea580c;
transition: width 0.3s ease-in-out;
z-index: -1;
}
.questionnaire-submit .submit:hover::before {
width: 100%;
}
.questionnaire-submit .submit:hover {
border-color: #ea580c;
}
/* --------------------------------------------------------------------------
各ページ用検索バー
========================================================================== */
/* 隠れている状態を解除して、常に表示 */
.job-floating-search-css {
position: relative; /* 固定位置なら fixed にしてください */
display: block !important;
opacity: 1 !important;
visibility: visible !important;
width: 100%;
max-width: 800px; /* お好みの幅に */
margin: 20px auto;
}
/* フォームの見た目を整える */
.floating-search-inner {
display: flex;
background: #fff;
border: 1px solid #E6B8A2;
border-radius: 10px; /* 角を丸く */
padding: 5px;
box-shadow: 0 4px 10px rgba(93, 64, 55, 0.05);
}
.floating-search-input {
flex-grow: 1;
border: none;
padding: 10px 15px;
outline: none;
background: transparent;
color: #5D4037; /* 入力文字色を濃いブラウンに */
}
.floating-search-icon-btn {
display: flex;
align-items: center;
background: #D97757;
color: white;
border: none;
padding: 8px 20px;
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
}
.floating-search-icon-btn:hover {
background: #C16547; /* ホバー時は少し濃いテラコッタへ */
transform: translateY(-1px);
}
/* ==========================================
コラム記事 デザイン（カラーリニューアル版）
========================================== */
/* 全体を囲むコンテナ */
.column-page-wrap {
max-width: 800px;
margin: 60px auto 120px; /* 上下の余白を少しゆったりに */
padding: 0 30px; /* ★左右の余白を 25px → 30px に強化 */
color: #333;
line-height: 1.9;
font-size: 16px;
box-sizing: border-box; /* 画面からはみ出すのを防ぐ */
}
/* 「お役立ち情報」の詳細ページ（single-useful_information）の時だけ、自動出力のタイトルを消す */
.single-useful_information main h1:first-of-type,
.single-useful_information .main-content h1:first-of-type {
display: none !important;
}
/* WordPressが自動出力するタイトル（左上の文字）の位置を綺麗に整える */
.main-content h1,
.entry-title,
main > h1 {
max-width: 800px;
margin: 120px auto 30px !important; /* 上の数値を120pxにしてヘッダーの下に押し下げる */
padding: 0 30px 15px;
font-size: 28px;
color: #235BC8; /* サブカラー：信頼感のある青 */
font-weight: bold;
line-height: 1.5;
border-bottom: 2px solid #f37321; /* メインカラー：鮮やかなオレンジの下線 */
}
/* 導入文（リード文） */
.column-page-lead {
font-size: 17px;
color: #444;
background-color: #F4F7FC; /* 青みを帯びた爽やかで上品な背景に変更 */
padding: 25px;
border-left: 4px solid #f37321; /* 左側にメインカラーのアクセント線 */
margin-bottom: 50px;
}
/* 各セクションごとの余白 */
.column-page-section {
margin-bottom: 60px;
}
/* 中見出し（H2） */
.column-page-section h2 {
font-size: 22px;
color: #235BC8; /* サブカラー：深みのある青で引き締め */
font-weight: bold;
margin: 40px 0 20px;
padding-left: 15px;
position: relative;
}
/* H2の左側の縦線（お問い合わせカードとお揃いのデザイン） */
.column-page-section h2::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 4px;
height: 1.2em;
background: #f37321; /* メインカラー：オレンジの縦線 */
}
/* 小見出し（H3） */
.column-page-section h3 {
font-size: 18px;
color: #333;
font-weight: bold;
margin: 30px 0 15px;
border-bottom: 1px solid #DCE4F5; /* サブカラーを極限まで薄めた上品な下線 */
padding-bottom: 5px;
}
/* 本文の段落 */
.column-page-section p {
margin-bottom: 20px;
}
/* 記事内の補足・箇条書き用ボックス */
.column-page-infobox {
background: #ffffff;
border: 1px solid #C5D2ED; /* サブカラーに合わせた繊細な青グレーの枠線 */
padding: 25px;
margin: 25px 0;
border-radius: 2px;
}
.column-page-infobox p {
margin-bottom: 0; /* ボックス内は余白すっきり */
}
/* ボックス内の箇条書きリスト */
.column-page-list {
list-style: none; /* 標準の・を消す */
padding: 0;
margin: 0;
}
.column-page-list li {
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
.column-page-list li:last-child {
margin-bottom: 0;
}
/* 箇条書きの先頭のドット */
.column-page-list li::before {
content: "■";
position: absolute;
left: 0;
color: #f37321; /* メインカラー：オレンジのドット */
font-size: 11px;
top: 1px;
}
/* 下部CTAエリア（ボタンの周り） */
.column-page-action {
text-align: center;
margin-top: 60px;
padding-top: 40px;
border-top: 1px dashed #C5D2ED; /* 境界線も青グレーで統一 */
}
/* 「求人を探す」ボタン */
.column-page-btn {
display: inline-block;
background: #f37321; /* メインカラー：オレンジ */
color: #fff !important; /* テーマのリンク色に負けないように */
text-decoration: none;
padding: 18px 60px;
font-size: 16px;
font-weight: bold;
border-radius: 2px;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(243, 115, 33, 0.2); /* オレンジのシャドウ */
}
/* ボタンホバー時 */
.column-page-btn:hover {
background: #d85f12; /* 少しトーンを落とした深いオレンジ */
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(243, 115, 33, 0.3);
}
/* ==========================================
* スマホ用（画面幅768px以下）のコラム記事調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体を囲むコンテナの余白調整 */
.column-page-wrap {
/* 上下の余白を「上40px・下60px」へ。スマホの画面比率に合わせて間伸びを解消 */
margin: 40px auto 60px;
padding: 0 20px; /* 左右の余白を30pxから20pxにスリム化し、本文の表示幅を最大限に確保 */
font-size: 15px; /* スマホで長文を読んでも目が疲れにくい15pxへ微調整 */
line-height: 1.8; /* 縦長画面に合わせて行間をわずかにタイトにして読みやすく */
}
/* 2. WordPress自動出力タイトルのスマホ最適化 */
.main-content h1,
.entry-title,
main > h1 {
/* 超重要：上の巨大な余白（120px）を、スマホヘッダーの下にジャストで収まる「40px」にリセット */
margin: 40px auto 20px !important;
padding: 0 20px 12px; /* 本文とラインを揃えるために左右を20pxに調整 */
font-size: 20px; /* 28pxの特大文字を20pxにスケールダウンし、3行や4行に激しく割れるのを防ぐ */
line-height: 1.4;
}
/* 3. 導入文（リード文）のパディング調整 */
.column-page-lead {
font-size: 15px;
padding: 18px; /* パディングを25pxから18pxに絞り、文字が入る横幅を広く使えるように変更 */
margin-bottom: 35px; /* 下のセクションとの隙間を引き締め */
}
/* 各セクションごとの余白 */
.column-page-section {
margin-bottom: 40px;
}
/* 4. 中見出し（H2）の微調整 */
.column-page-section h2 {
font-size: 18px; /* 22pxから18pxへ、スマホの画面に馴染むサイズに */
margin: 30px 0 15px;
padding-left: 12px; /* 縦線の横の隙間をわずかにタイトに */
}
/* H2の左側の縦線（位置ズレ補正） */
.column-page-section h2::before {
left: 0;
top: 0.2em; /* 文字サイズが変わったのに合わせ、縦線の位置をジャスト中央に微調整 */
width: 3px; /* 線の太さを4pxから3pxにしてシャープさをキープ */
}
/* 小見出し（H3） */
.column-page-section h3 {
font-size: 16px; /* 18pxから16pxへ微調整 */
margin: 25px 0 12px;
}
/* 本文の段落 */
.column-page-section p {
margin-bottom: 15px; /* 段落ごとの隙間を少しコンパクトに */
}
/* 5. 記事内の補足・箇条書き用ボックスの調整 */
.column-page-infobox {
padding: 18px; /* 25pxから18pxに縮めて、中の箇条書きのテキスト幅を広く確保 */
margin: 20px 0;
}
.column-page-list li {
font-size: 14px; /* 箇条書きは一段階スマートにして情報の強弱をつける */
padding-left: 18px;
}
/* 箇条書きの先頭ドット（■）の位置微調整 */
.column-page-list li::before {
font-size: 9px; /* 文字サイズ縮小に合わせて■も少しミニマルに */
top: 2px; /* スマホ液晶での1ピクセルのズレを美しく中央に補正 */
}
/* 6. 下部CTAエリアの調整 */
.column-page-action {
margin-top: 40px;
padding-top: 30px;
}
/* 「求人を探す」ボタンを完全なモバイルファーストに */
.column-page-btn {
display: flex; /* inline-blockからflexに変更して、横幅いっぱいに広げやすくする */
justify-content: center;
align-items: center;
width: 100%; /* スマホ画面の横幅いっぱいにフィットさせる */
max-width: 340px; /* 画面の大きなスマホでも間伸びしないよう、美しい限界値を設定 */
margin: 0 auto; /* 横幅を絞った分、中央寄せ */
padding: 15px 20px; /* 左右のパディングを気にせず、高さ（押しやすさ）を重視 */
font-size: 15px;
box-sizing: border-box;
}
/* スマホでのホバー誤作動（タップした後にボタンが浮き上がったままになる現象）を防止 */
.column-page-btn:hover {
transform: none !important;
}
}
/* ==========================================================================
WordPress 記事本文（エントリーコンテンツ）用カスタムスタイル
全体の雰囲気：ポップすぎない明るいデザイン / 角丸統一
メインカラー：オレンジ（#f37321） / サブカラー：青（#235BC8）
========================================================================== */
/* 記事全体のテキスト・ベース設定 */
.entry-content,
.post-content {
color: #334155; /* text-slate-700 */
line-height: 1.8;
font-size: 16px;
letter-spacing: 0.03em;
}
/* 各ブロックの間隔（文章間のマージン） */
.entry-content > * + * {
margin-top: 1.75rem;
margin-bottom: 0;
}
/* --------------------------------------------------------------------------
見出し（Headings）
-------------------------------------------------------------------------- */
/* H2 見出し：左にオレンジのアクセント線、テキストはサブカラーの青 */
.entry-content h2 {
font-size: 1.5rem;
font-weight: 700;
color: #235BC8; /* サブカラー：青 */
border-left: 4px solid #f37321; /* メインカラー：オレンジ */
padding-left: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
margin-top: 3rem;
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
}
/* H3 見出し：下線と小さな丸ドットのアクセント */
.entry-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: #0f172a; /* text-slate-900 */
border-b: 2px solid #f1f5f9; /* border-slate-100 */
padding-bottom: 0.5rem;
margin-top: 2.5rem;
margin-bottom: 1.25rem;
position: relative;
display: flex;
align-items: center;
}
/* H3の文頭にオレンジの丸ドットを自動付与 */
.entry-content h3::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #f37321; /* メインカラー：オレンジ */
border-radius: 9999px; /* 完全な丸 */
margin-right: 0.5rem;
}
/* --------------------------------------------------------------------------
画像・メディア（Images / Figures）
-------------------------------------------------------------------------- */
/* WordPress標準の画像ブロック（wp-block-image） */
.entry-content .wp-block-image {
margin-top: 2rem;
margin-bottom: 2rem;
}
/* 画像自体の角丸・影の設定 */
.entry-content .wp-block-image img {
border-radius: 0.75rem !important; /* 角丸（マイルド） */
border: 1px solid #f1f5f9; /* 微細なボーダー */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05); /* 柔らかな影 */
max-height: 450px;
width: 100%;
object-fit: cover;
}
/* 画像のキャプション */
.entry-content .wp-block-image figcaption {
text-align: center;
font-size: 0.75rem;
color: #64748b; /* text-slate-500 */
margin-top: 0.5rem;
}
/* --------------------------------------------------------------------------
テーブル（Tables）
-------------------------------------------------------------------------- */
/* WordPress標準のテーブルブロック（wp-block-table） */
.entry-content .wp-block-table {
margin-top: 2rem;
margin-bottom: 2rem;
overflow-x: auto; /* スマホでの横スクロール対応 */
display: block;
border: 1px solid #e2e8f0; /* border-slate-200 */
border-radius: 0.75rem; /* テーブル全体の角丸 */
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
/* テーブル内の基本レイアウト */
.entry-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
min-w: 500px;
}
/* テーブルヘッダー（一番上の行） */
.entry-content .wp-block-table th {
background-color: #f8fafc; /* bg-slate-50 */
color: #334155; /* text-slate-700 */
font-weight: 600;
font-size: 0.875rem;
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
}
/* テーブルセル（データ行） */
.entry-content .wp-block-table td {
padding: 1rem;
font-size: 0.875rem;
border-bottom: 1px solid #e2e8f0;
color: #475569;
}
/* 最後の行の線は消す（角丸の枠線を綺麗に保つため） */
.entry-content .wp-block-table tr:last-child td {
border-bottom: none;
}
/* 行のホバーエフェクト（ほんのり明るく） */
.entry-content .wp-block-table tr:hover td {
background-color: rgba(248, 250, 252, 0.5);
transition: background-color 0.2s ease;
}
/* --------------------------------------------------------------------------
引用・強調（Blockquote / Strong）
-------------------------------------------------------------------------- */
/* 引用ブロック */
.entry-content blockquote {
background-color: #f8fafc; /* bg-slate-50 */
border-left: 4px solid #235BC8; /* サブカラー：青 */
padding: 1rem 1.5rem;
margin: 2rem 0;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
color: #475569;
font-style: italic;
}
/* 強調（太字）をマイルドにハイライトする設定 */
.entry-content strong {
font-weight: 700;
background-color: #fff7ed; /* 薄いオレンジの背景（orange-50） */
color: #f37321; /* テキストをオレンジに */
padding: 0.1em 0.25em;
border-radius: 0.25rem; /* 小さな角丸 */
}
/* --------------------------------------------------------------------------
リスト（Lists）
-------------------------------------------------------------------------- */
/* 箇条書き・番号付きリスト共通 */
.entry-content ul,
.entry-content ol {
padding-left: 1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
}
.entry-content li {
margin-bottom: 0.5rem;
}
/* ==========================================
新Q&Aページ
========================================== */
/* QAページ専用ヘッダー */
.qa-page-hero {
text-align: center;
padding: 80px 20px;
background: linear-gradient(rgba(93, 64, 55, 0.4), rgba(93, 64, 55, 0.4)), url('https://sub.tansaku-job.net/wp-content/uploads/2026/05/4.jpg') center/cover;
border-bottom: 1px solid #E6B8A2;
}
.qa-page-hero__sub {
font-size: 0.8rem;
letter-spacing: 0.2em;
color: #fff; /* Q&Aのアクセントカラー（Qの色）と合わせる */
font-weight: 700;
margin-bottom: 15px;
}
.qa-page-hero__title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
}
.qa-page-hero__text {
color: #fff;
font-size: 0.95rem;
}
/* メインコンテナ */
.qa-page-container {
max-width: 900px; /* 横幅を絞ると読みやすくなります */
margin: 0 auto;
padding: 60px 20px;
}
/* PC表示：質問(左)と回答(右)を横並びに */
@media (min-width: 768px) {
.qa-page-item {
display: flex;
align-items: flex-start;
gap: 40px;
padding: 40px 0;
border-bottom: 1px solid #eee;
}
.qa-page-question-wrapper {
flex: 0 0 35%; /* 左側の質問幅を固定 */
}
.qa-page-answer {
flex: 1; /* 右側の回答が残りの幅を埋める */
max-height: none !important; /* アコーディオンを解除して常に表示 */
}
}
.qa-page-item:hover {
border-color: #D97757; /* ホバーすると枠線が深緑に */
}
/* 質問部分（ボタン） */
.qa-page-question {
width: 100%;
display: flex;
align-items: center;
text-align: left;
background: none;
border: none;
outline: none;
padding: 22px 25px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #333;
position: relative;
}
/* 「Q」の文字 */
.qa-page-q {
font-size: 22px;
color: #D97757; /* ブランドカラーの深緑 */
font-family: 'Times New Roman', serif;
font-weight: bold;
margin-right: 18px;
line-height: 1;
}
/* 質問のテキスト */
.qa-page-text {
flex: 1;
padding-right: 30px; /* アイコンと被らないための余白 */
line-height: 1.5;
}
/* 開閉のプラス・マイナスアイコン（CSSで綺麗に描画） */
.qa-page-icon {
position: absolute;
right: 25px;
width: 14px;
height: 14px;
}
.qa-page-icon::before,
.qa-page-icon::after {
content: "";
position: absolute;
background-color: #999;
transition: transform 0.3s ease, background-color 0.3s;
}
/* 横線 */
.qa-page-icon::before {
top: 6px;
left: 0;
width: 14px;
height: 2px;
}
/* 縦線 */
.qa-page-icon::after {
top: 0;
left: 6px;
width: 2px;
height: 14px;
}
/* ホバー時にアイコンの色を濃く */
.qa-page-question:hover .qa-page-icon::before,
.qa-page-question:hover .qa-page-icon::after {
background-color: #D97757;
}
/* アコーディオンが開いたとき（is-open）のアイコン変化 */
.qa-page-item.is-open .qa-page-icon::after {
transform: rotate(90deg);
opacity: 0; /* 縦線を消してマイナス（ー）にする */
}
.qa-page-item.is-open .qa-page-icon::before {
background-color: #D97757;
}
/* 回答部分のラッパー（アニメーション用） */
.qa-page-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out; /* ヌルッと開閉する演出 */
background-color: #FDF9F7; /* 回答エリアはうっすら上品な背景色に */
}
/* 回答の内側（余白調整） */
.qa-page-answer-inner {
padding: 0 25px 25px 25px;
display: flex;
align-items: flex-start;
}
/* 「A」の文字 */
.qa-page-a {
font-size: 22px;
color: #D97757; /* 落ち着いたゴールド・アンバー系でアクセント */
font-family: 'Times New Roman', serif;
font-weight: bold;
margin-right: 18px;
line-height: 1;
}
/* 回答のテキスト */
.qa-page-answer-text {
flex: 1;
font-size: 15px;
color: #555;
line-height: 1.7;
margin: 0;
}
/* 下部コンタクトエリア */
/* お問い合わせへの誘導部分をカード化 */
.qa-page-contact {
margin-top: 60px;
padding: 40px;
background: #fff;
border: 1px solid #E6B8A2;
border-radius: 12px;
text-align: center;
}
.qa-page-contact__text {
font-size: 15px;
color: #555;
margin-bottom: 20px;
}
/* お問い合わせはこちらボタン */
.qa-page-contact__btn {
display: inline-block;
margin-top: 20px;
padding: 15px 40px;
background: #D97757; /* 深緑で安心感を演出 */
color: #fff;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: 0.3s;
}
.qa-page-contact__btn:hover {
background: #C16547;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(217, 119, 87, 0.25);
}
/* ==========================================
* スマホ用（画面幅768px以下）のQ&Aページ調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 上部ヒーローエリアの調整 */
.qa-page-hero {
padding: 40px 15px; /* 上下余白を絞ってファーストビューの効率をアップ */
}
.qa-page-hero__title {
font-size: 22px; /* 28pxから22pxへ、スマホに収まりの良いサイズに縮小 */
margin-bottom: 10px;
}
.qa-page-hero__text {
font-size: 13px; /* テキストをスマートにして読みやすく */
}
/* 2. メインコンテナの余白引き締め */
.qa-page-container {
padding: 35px 15px 60px; /* 左右を15pxに広げ、下部フッターとの余白もスマートに */
}
/* スマホ表示：アコーディオンを維持 */
.qa-page-item {
border-bottom: 1px solid #eee;
padding: 20px 0;
}
.qa-page-answer {
overflow: hidden;
transition: max-height 0.3s ease;
}
/* 共通の装飾 */
.qa-page-q, .qa-page-a {
display: inline-block;
font-weight: bold;
margin-right: 10px;
}
.qa-page-q { color: #d98880; } /* サイトの検索ボタン色 */
.qa-page-a { color: #00a870; } /* サイトのアクセントカラー */
/* 3. 質問部分（アコーディオントリガー）の余白と文字サイズ調整 */
.qa-page-question {
padding: 16px 15px; /* 左右余白を25pxから15pxに削り、テキスト領域を最大化 */
font-size: 14px; /* スマホで読みやすい14pxへ引き締め */
}
/* 質問のテキスト */
.qa-page-text {
padding-right: 25px; /* 右側のアイコンと絶対に被らないためのセーフティエリア */
}
/* 開閉アイコンの位置微調整 */
.qa-page-icon {
right: 15px; /* コンテナの縮小に合わせて位置を右端15pxにジャストフィット */
}
/* 4. 回答部分（インナー）の余白調整 */
.qa-page-answer-inner {
padding: 0 15px 18px 15px; /* 左右を15pxに揃え、テキストが縦に綺麗に整列するレイアウトに */
}
/* 回答のテキスト */
.qa-page-answer-text {
font-size: 13.5px; /* 15pxから13.5pxに微調整し、長文になっても圧迫感を与えない設計に */
line-height: 1.6;
}
/* 5. 下部コンタクトエリアの最適化 */
.qa-page-contact {
margin-top: 40px;
padding-top: 30px;
}
.qa-page-contact__text {
font-size: 14px;
}
/* お問い合わせボタンを完全全幅の押しやすいUIへ */
.qa-page-contact__btn {
display: flex; /* inline-blockから変更して中央寄せしやすく */
justify-content: center;
align-items: center;
width: 100%; /* 横幅いっぱいにフィット */
max-width: 320px; /* 大きな画面でも間伸びしないよう黄金比で固定 */
margin: 0 auto; /* 横幅を絞った分を中央寄せ */
padding: 15px 20px; /* タップしやすい理想的な高さに補正 */
font-size: 14px;
box-sizing: border-box;
}
/* スマホでのホバー時の不自然な浮き上がりを防止 */
.qa-page-contact__btn:hover {
transform: none !important;
}
}
/* ==========================================
新プライバシーポリシーの横幅を制限して真ん中に寄せる
========================================== */
.u-privacy-contents {
max-width: 800px; /* PCで広がっても最大800ピクセルの幅に収める */
margin: 0 auto; /* 画面のちょうど真ん中に配置する */
padding: 0 20px; /* スマホで見たときに左右に少しだけ隙間を作る */
}
/* ==========================================
* スマホ用（画面幅768px以下）のプライバシーポリシー調整
* ========================================== */
@media screen and (max-width: 768px) {
/* 1. 全体の上下余白をスマホの画面比率に最適化 */
.privacy-inner {
/* PC版より画面が狭いスマホでは、上下の大きな余白を「40px」前後に引き締めると
ユーザーがスクロールしやすくなり、スマートな印象になります */
padding: 40px 15px; /* 左右余白を20pxから15pxに微調整して本文の横幅を広く確保 */
}
/* 2. ポリシー内の見出し（h2 / h3）のスマホ用リサイズ */
/* WordPressの本文エリア（.entry-content など）の中にある見出しを想定しています */
.privacy-inner h2 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem; /* PC用の大きな見出しを、スマホで1〜2行にすっきり収まるサイズに縮小 */
color: #0c4728; /* ブランドカラーの深緑をここにもさりげなく適用 */
margin-top: 30px; /* 各条項ごとの区切りを分かりやすくするための上部マージン */
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #ddd; /* 第1条、第2条の区切りを明確にする上品な下線 */
}
.privacy-inner h3 {
font-family: 'Noto Serif JP', serif;
font-size: 1.1rem; /* h2より一回り小さい適切なスケール */
margin-top: 20px;
margin-bottom: 10px;
color: #333;
}
/* 3. 本文テキスト・箇条書き（ul / li / p）の快適な行間コントロール */
.privacy-inner p,
.privacy-inner li {
font-size: 0.88rem; /* 法律・規約関連の堅い長文は、スマホでは少しスマート（約14px）に */
line-height: 1.75; /* 文字がギュッと詰まって目が滑るのを防ぐ、ゆったり快適な行間 */
color: #444444; /* 真っ黒（#000）よりも僅かに柔らかい墨色にすることで目の疲れを軽減 */
margin-bottom: 15px;
}
/* 箇条書き（個人情報の利用目的など）の左側余白調整 */
.privacy-inner ul,
.privacy-inner ol {
padding-left: 20px; /* スマホの狭い画面でもポツ（・）や数字がはみ出さない適正余白 */
margin-bottom: 20px;
}
}
/* ==========================================================================
reCAPTCHA
========================================================================== */
/* reCAPTCHA 表示 共通 */
.company-recaptcha-note {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* ここで折り返しを許可 */
gap: 6px;
width: 90%; /* 100%から少し減らして左右に余白を作る */
max-width: 500px; /* PCでの広がりすぎを防ぐ */
margin: 24px auto 12px;
text-align: center;
font-size: 13px;
line-height: 1.6;
color: #64748b;
word-break: break-all; /* 文字が突き抜けるのを防ぐ */
}
.company-recaptcha-note span,
.company-recaptcha-note a {
display: inline-block; /* inline から変更 */
word-break: break-all;
}
.company-recaptcha-note a {
color: #2563eb;
text-decoration: underline;
font-weight: 600;
}
/* スマホ向けの調整 */
@media screen and (max-width: 600px) {
.company-recaptcha-note {
width: 95%; /* スマホでは画面端ギリギリまで使う */
font-size: 12px;
margin: 16px auto 8px;
}
}