と
を吐く対策）
========================================================= */
/* CF7が吐く
を横並びのflexコンテナにする */
body.wl-entry-page .wl-formField--birth > p{
display: flex;
flex-wrap: nowrap; /* 横並び固定 */
gap: 10px;
align-items: center;
margin: 0; /* CF7のp余白を消す */
}
/* CF7が挟む
が強制改行の犯人なので消す */
body.wl-entry-page .wl-formField--birth br{
display: none !important;
}
/* wrap(span)がblockで幅100%にならないように */
body.wl-entry-page .wl-formField--birth .wpcf7-form-control-wrap{
display: inline-block;
flex: 0 0 auto;
}
/* selectの幅 */
body.wl-entry-page .wl-formField--birth select{
width: auto;
min-width: 140px;
}
/* SPは折返しOK（押しやすさ優先） */
@media (max-width: 767px){
body.wl-entry-page .wl-formField--birth > p{
flex-wrap: wrap;
}
body.wl-entry-page .wl-formField--birth select{
min-width: 120px;
}
}
/* =========================================================
Submit button alignment fix
848px以下で左にズレる問題を確実に止める
========================================================= */
body.wl-entry-page .wl-submit{
text-align: center; /* 残してOK */
}
body.wl-entry-page .wl-submit .cta-btn{
display: block; /* ← これが重要 */
margin-left: auto; /* ← これが重要 */
margin-right: auto; /* ← これが重要 */
max-width: 600px; /* min()をやめてこっちで管理すると安定 */
width: 100%;
}
/* =========================================================
SP only: Radio & Birth layout (vertical)
========================================================= */
@media (max-width: 767px){
/* ---------------------------------
ラジオボタン：縦並び（1列）
--------------------------------- */
body.wl-entry-page .wpcf7-form .wpcf7-radio{
flex-direction: column; /* 横 → 縦 */
gap: 12px;
}
body.wl-entry-page .wpcf7-form .wpcf7-radio .wpcf7-list-item > label{
width: 100%; /* ボタンを横幅いっぱい */
justify-content: center; /* 文字は中央 */
}
/* ---------------------------------
生年月日：年 / 月 / 日 を縦並び
--------------------------------- */
/* wrap(span)がblockで幅100%にならないように */
body.wl-entry-page .wl-formField--birth .wpcf7-form-control-wrap{
width: 100%;
}
body.wl-entry-page .wl-formField--birth > p{
/*flex-direction: column; /* 横 → 縦 */
align-items: stretch; /* selectを幅いっぱい */
gap: 10px;
}
body.wl-entry-page .wl-formField--birth select{
width: 100%;
min-width: 0; /* PC用min-widthを解除 */
}
}
/* =========================================================
FIX: Radio label overflow (SP only)
========================================================= */
@media (max-width: 767px){
/* ラジオ1項目（span）をレイアウトの基準にする */
body.wl-entry-page .wpcf7-form .wpcf7-radio .wpcf7-list-item{
display: block; /* flex子でもOKだが blockが安全 */
width: 100%;
box-sizing: border-box;
overflow: hidden; /* ← はみ出し防止の要 */
}
/* labelは必ずこの中に収める */
body.wl-entry-page .wpcf7-form .wpcf7-radio .wpcf7-list-item > label{
width: 100%;
box-sizing: border-box;
margin: 0; /* CF7デフォルト対策 */
}
body.wl-entry-page .wl-entry__title{
font-size: 1.6rem;
}
body.wl-entry-page .wl-entry__lead{
font-size: 0.8rem;
padding: 0 20px;
}
}
/* =========================================================
Entry page: Top logo area
========================================================= */
body.wl-entry-page .wl-entryTop{
padding: 28px 20px 10px;
}
body.wl-entry-page .wl-entryTop__inner{
max-width: 920px;
margin: 0 auto;
display: flex;
justify-content: center;
}
body.wl-entry-page .wl-entryTop__logo img{
display: block;
height: 80px; /* ここでロゴサイズ調整 */
width: auto;
}
@media (max-width: 767px){
body.wl-entry-page .wl-entryTop{
padding: 20px 16px 6px;
}
body.wl-entry-page .wl-entryTop__logo img{
height: 38px;
}
}
/* =========================================================
FIX: Footer（LPページだけ共通フッターを整える）
========================================================= */
/* LPページのフッター全体 */
body.wl-lp footer,
body.wl-lp .siteFooter,
body.wl-lp .globalFooter{
background: #000000; /* CTAの濃紺に寄せる（お好みで） */
color: #ffffff;
}
/* フッター内の文字 */
body.wl-lp footer *,
body.wl-lp .siteFooter *,
body.wl-lp .globalFooter *{
color: #ffffff !important;
}
/* フッター上の余白（“消えた感”をなくす） */
body.wl-lp footer,
body.wl-lp .siteFooter,
body.wl-lp .globalFooter{
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
/* コピーライトの位置・余白 */
body.wl-lp footer .copy,
body.wl-lp .siteFooter .copy,
body.wl-lp .globalFooter .copy,
body.wl-lp footer small,
body.wl-lp .siteFooter small,
body.wl-lp .globalFooter small{
display: block;
text-align: center;
opacity: .9;
font-size: 13px;
line-height: 1.6;
}
/* フッター内リンク（下線・hover） */
body.wl-lp footer a,
body.wl-lp .siteFooter a,
body.wl-lp .globalFooter a{
text-decoration: none;
opacity: .95;
}
body.wl-lp footer a:hover,
body.wl-lp .siteFooter a:hover,
body.wl-lp .globalFooter a:hover{
opacity: 1;
text-decoration: underline;
}
@media (max-width: 767px){
body.wl-lp .wl-footer p {
font-size: 0.6rem;
}
}
/* =========================================================
郵便番号検索ボタン：7桁でアクティブ / それ以外は非アクティブ
========================================================= */
body.wl-entry-page .wl-zipBtn{
background: #f4f4f4;
color: #666;
border: 1px solid #cfcfcf;
opacity: .6;
cursor: not-allowed;
transition: background .15s ease, color .15s ease, opacity .15s ease, transform .15s ease;
}
/* 7桁入力でアクティブ（黒） */
body.wl-entry-page .wl-zipBtn.is-active{
background: #111;
color: #fff;
border-color: #111;
opacity: 1;
cursor: pointer;
}
body.wl-entry-page .wl-zipBtn.is-active:hover{
transform: translateY(-1px);
}
/* ローディング中 */
body.wl-entry-page .wl-zipBtn.is-loading{
opacity: .75;
cursor: wait;
}
/* =========================================================
Zip Modal（検索エラーのポップアップ）
========================================================= */
#wlZipModal{
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
#wlZipModal.is-open{
display: block;
}
#wlZipModal .wlZipModal__backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,.45);
}
#wlZipModal .wlZipModal__panel{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(560px, calc(100% - 32px));
background: #fff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(0,0,0,.25);
padding: 24px 22px 18px;
}
#wlZipModal .wlZipModal__close{
position: absolute;
right: 10px;
top: 10px;
width: 38px;
height: 38px;
border: none;
background: transparent;
font-size: 22px;
cursor: pointer;
}
#wlZipModal .wlZipModal__title{
margin: 0 0 12px;
font-size: 20px;
font-weight: 700;
text-align: center;
}
#wlZipModal .wlZipModal__text{
margin: 0 0 16px;
font-size: 15px;
line-height: 1.8;
text-align: center;
color: #333;
}
#wlZipModal .wlZipModal__btn{
display: block;
width: min(260px, 100%);
margin: 0 auto;
border: 1px solid #ddd;
background: #fff;
border-radius: 999px;
padding: 12px 14px;
font-weight: 700;
cursor: pointer;
}
/* =========================================================
Entry Confirm / Error Modal
========================================================= */
/* 背景スクロール停止 */
html.wl-modal-lock,
html.wl-modal-lock body{
overflow: hidden;
}
/* Modal root */
#wlEntryModal{
position: fixed;
inset: 0;
z-index: 99999;
display: none;
}
#wlEntryModal.is-open{
display: block;
}
/* backdrop */
#wlEntryModal .wlEntryModal__backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,.55);
}
/* panel */
#wlEntryModal .wlEntryModal__panel{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(860px, calc(100% - 32px));
background: #fff;
border-radius: 18px;
box-shadow: 0 20px 55px rgba(0,0,0,.28);
padding: 28px 26px 22px;
display: none;
}
/* 表示切替 */
#wlEntryModal.is-open[data-type="error"] .wlEntryModal__panel--error{
display: block;
}
#wlEntryModal.is-open[data-type="confirm"] .wlEntryModal__panel--confirm{
display: block;
}
/* close */
#wlEntryModal .wlEntryModal__close{
position: absolute;
right: 12px;
top: 12px;
width: 40px;
height: 40px;
border: none;
background: transparent;
font-size: 24px;
cursor: pointer;
}
/* title / text */
#wlEntryModal .wlEntryModal__title{
margin: 0 0 10px;
font-size: 20px;
font-weight: 800;
text-align: center;
}
#wlEntryModal .wlEntryModal__text{
margin: 0 0 16px;
font-size: 14px;
line-height: 1.8;
color: #333;
text-align: center;
}
/* error button */
#wlEntryModal .wlEntryModal__btn{
display: block;
width: min(240px, 100%);
margin: 0 auto;
border: 1px solid #ddd;
background: #fff;
border-radius: 999px;
padding: 12px 14px;
font-weight: 700;
cursor: pointer;
}
/* confirm table */
#wlEntryModal .wlEntryModal__tableWrap{
max-height: min(50vh, 420px);
overflow: auto;
border: 1px solid #eee;
border-radius: 12px;
margin: 14px 0 18px;
}
#wlEntryModal .wlEntryModal__table{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
#wlEntryModal .wlEntryModal__table th,
#wlEntryModal .wlEntryModal__table td{
padding: 10px 12px;
border-bottom: 1px solid #f0f0f0;
vertical-align: top;
}
#wlEntryModal .wlEntryModal__table th{
width: 32%;
background: #fafafa;
font-weight: 700;
color: #333;
}
/* actions */
#wlEntryModal .wlEntryModal__actions{
display: flex;
gap: 14px;
justify-content: center;
align-items: center;
}
#wlEntryModal .wlEntryModal__action{
width: min(280px, 100%);
border-radius: 999px;
padding: 12px 18px;
font-weight: 800;
cursor: pointer;
}
#wlEntryModal .wlEntryModal__action--back{
border: 1px solid #ddd;
background: #fff;
}
#wlEntryModal .wlEntryModal__action--send{
border: none;
background: #8a6b4f; /* 参考画像の茶系に寄せる。必要なら変更OK */
color: #fff;
}
/* SP */
@media (max-width: 767px){
#wlEntryModal .wlEntryModal__panel{
padding: 22px 18px 18px;
}
#wlEntryModal .wlEntryModal__actions{
flex-direction: column;
}
#wlEntryModal .wlEntryModal__action{
width: 100%;
}
}
.wl-hidden-submit{
display:none !important;
}
/* CF7 標準の下部メッセージを非表示 */
.wl-entry-page .wpcf7-response-output{
display:none !important;
}
.wl-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.wl-modal.is-open {
display: block;
}
.wl-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.6);
}
.wl-modal__box {
position: relative;
max-width: 640px;
margin: 10vh auto;
background: #fff;
border-radius: 12px;
padding: 32px;
}
/* 初期は両方非表示 */
.wl-modal__content {
display: none;
}
/* JSで type を切り替える */
.wl-modal[data-type="error"] .wl-modal--error,
.wl-modal[data-type="confirm"] .wl-modal--confirm {
display: block;
}
/* 確認ボタン：同意前は非アクティブ */
body.wl-entry-page #wlConfirmBtn:disabled,
body.wl-entry-page #wlConfirmBtn.is-disabled{
opacity: .45;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* =========================================================
Modal styling (ref-like) + scroll lock
========================================================= */
/* 背景スクロールロック（開いてる間だけ） */
html.wl-modal-lock{
overflow: hidden;
}
html.wl-modal-lock body{
position: fixed;
width: 100%;
overflow: hidden;
}
/* Modal base */
#wEntryModal,
#wlEntryModal{
position: fixed;
inset: 0;
z-index: 99999;
display: none;
}
#wlEntryModal.is-open{
display: block;
}
#wlEntryModal .wl-modal__overlay{
position: absolute;
inset: 0;
background: rgba(0,0,0,.55);
}
/* panel */
#wlEntryModal .wl-modal__box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(760px, calc(100% - 32px));
background: #fff;
border-radius: 18px;
box-shadow: 0 22px 60px rgba(0,0,0,.28);
padding: 26px 26px 22px;
}
/* close x */
#wlEntryModal .wl-modal__x{
position: absolute;
right: 10px;
top: 10px;
width: 42px;
height: 42px;
border: none;
background: transparent;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
/* title/text */
#wlEntryModal .wl-modal__title{
margin: 0 0 12px;
font-size: 20px;
font-weight: 800;
text-align: center;
color: #222;
}
#wlEntryModal .wl-modal__text{
margin: 0 0 16px;
font-size: 14px;
line-height: 1.9;
text-align: center;
color: #333;
}
/* content switch */
#wlEntryModal .wl-modal__content{ display:none; }
#wlEntryModal.is-open[data-type="error"] .wl-modal--error{ display:block; }
#wlEntryModal.is-open[data-type="confirm"] .wl-modal--confirm{ display:block; }
/* confirm table */
#wlEntryModal .wl-confirmTableWrap{
max-height: min(54vh, 420px);
overflow: auto;
border: 1px solid #eee;
border-radius: 12px;
margin: 14px 0 18px;
}
#wlEntryModal .wl-confirmTable{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
#wlEntryModal .wl-confirmTable th,
#wlEntryModal .wl-confirmTable td{
padding: 10px 12px;
border-bottom: 1px solid #f2f2f2;
vertical-align: top;
}
#wlEntryModal .wl-confirmTable th{
width: 32%;
background: #fafafa;
font-weight: 700;
color: #333;
}
/* actions */
#wlEntryModal .wl-modal__actions{
display: flex;
gap: 12px;
justify-content: center;
}
#wlEntryModal .wl-modal__btn{
width: min(280px, 100%);
border-radius: 999px;
padding: 12px 18px;
font-weight: 800;
cursor: pointer;
}
#wlEntryModal .wl-modal__btn.is-back{
border: 1px solid #ddd;
background: #fff;
}
#wlEntryModal .wl-modal__btn.is-submit{
border: none;
background: #8a6b4f; /* 参考画像の茶系寄せ（変更OK） */
color: #fff;
}
/* error close button */
#wlEntryModal .wl-modal--error .wl-modal__btn{
display: block;
margin: 0 auto;
border: 1px solid #ddd;
background: #fff;
}
/* SP */
@media (max-width: 767px){
#wlEntryModal .wl-modal__box{
padding: 22px 18px 18px;
}
#wlEntryModal .wl-modal__actions{
flex-direction: column;
}
#wlEntryModal .wl-modal__btn{
width: 100%;
}
}
/* =========================================================
Confirm button: text vertical centering
========================================================= */
body.wl-entry-page #wlConfirmBtn{
display: inline-flex; /* ← 重要 */
align-items: center; /* 縦中央 */
justify-content: center; /* 横中央 */
}
/* ===============================
Footer
================================ */
.wl-footer{
padding: 40px 0 24px;
text-align: center;
}
.wl-footer__logo{
margin-bottom: 16px;
}
.wl-footer__logo img{
max-width: 200px; /* 好みで 160〜240px */
width: 100%;
height: auto;
}
.wl-footer__copyright{
font-size: 13px;
color: #666;
}
@media (max-width: 767px){
.wl-footer__logo img{
max-width: 160px;
}
}
/* =========================================================
Recruit LP Background Stripe
========================================================= */
body.wl-entry-page{
background-image: url("../images/body-bg.gif");
background-repeat: repeat;
}
/* br utility */
br.sp{ display:none; }
br.pc{ display:inline; }
@media (max-width: 767px){
br.sp{ display:inline; }
br.pc{ display:none; }
}