/* ===== 下層ページ共通のレスポンシブ補正（トップ以外） ===== */
.mp-lower img,.mp-lower video,.mp-lower canvas,.mp-lower embed,.mp-lower object{max-width:100%}
.mp-lower iframe{max-width:100%}
.mp-lower iframe[src*="youtube"],.mp-lower iframe[data-src*="youtube"],.mp-lower iframe[src*="youtu.be"],.mp-lower iframe[data-src*="youtu.be"]{width:100%;height:auto;aspect-ratio:16/9}
.mp-lower main.max-w-4xl{overflow-wrap:anywhere}
.mp-lower main.max-w-4xl table{max-width:100%}
@media (max-width:760px){
.mp-lower main.max-w-4xl table:not(.inquiry){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mp-lower main.max-w-4xl table.inquiry,.mp-lower main.max-w-4xl table.inquiry tbody,.mp-lower main.max-w-4xl table.inquiry tr,.mp-lower main.max-w-4xl table.inquiry th,.mp-lower main.max-w-4xl table.inquiry td{display:block;width:100%!important;box-sizing:border-box}
.mp-lower main.max-w-4xl table.inquiry th{padding-bottom:4px}
.mp-lower main.max-w-4xl table.inquiry td{padding-top:0}
}
/* ヒーローの見出しは行を固定（折り返さない）。文字サイズは画面幅に合わせてJSで調整 */
body.mp-lower .pr-hero h1 .ln{white-space:nowrap!important;text-wrap:nowrap!important}
body.mp-lower .pr-hero h1 .ln span{white-space:inherit}
@media (max-width:1000px){
body.mp-lower .pr-hero h1{max-width:100%}
body.mp-lower .pr-hero .in>div:first-child{max-width:100%;box-sizing:border-box}
}
/* フォーム(Contact Form 7)の入力欄は画面幅からはみ出さない */
.mp-lower .wpcf7-form-control-wrap{max-width:100%}
.mp-lower .wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]),.mp-lower .wpcf7 textarea,.mp-lower .wpcf7 select{max-width:100%;box-sizing:border-box}
@media (max-width:760px){
.mp-lower .wpcf7 input[type=text],.mp-lower .wpcf7 input[type=email],.mp-lower .wpcf7 input[type=tel],.mp-lower .wpcf7 input[type=url],.mp-lower .wpcf7 textarea,.mp-lower .wpcf7 select{width:100%!important}
}
/* ヒーロー下のお問い合わせ帯: スマホでもボタン文言を折り返さない */
@media (max-width:640px){
body.mp-lower .pr-banner .btn{white-space:nowrap;font-size:clamp(15px,4.6vw,20px)!important;padding-left:clamp(16px,5vw,28px)!important;padding-right:clamp(16px,5vw,28px)!important;gap:10px}
body.mp-lower .pr-banner .bin{padding-left:16px;padding-right:16px}
}
/* ヒーローのラベル(タグ): 折り返さず、画面幅に合わせて小さくする */
@media (max-width:1000px){
body.mp-lower .pr-hero .tag{white-space:nowrap;font-size:clamp(13px,4.2vw,21px);padding-left:clamp(14px,5vw,26px);padding-right:clamp(14px,5vw,26px);max-width:100%}
}
/* 絞り込みサイドバー(導入事例・FAQ): タブレット/スマホではカテゴリを折り返して並べる */
@media (max-width:900px){
body.mp-lower .vo-side .vo-cat-btn,body.mp-lower .faq-side .faq-cat-btn{display:inline-flex;width:auto!important;max-width:100%;margin:0 6px 8px 0;padding:8px 14px}
}
/* サービスページ: ヒーロー下のCTAボタンの隣に電話番号を置く */
.pr-banner .ptel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:900;font-size:clamp(24px,2.6vw,34px);letter-spacing:.04em;line-height:1;text-decoration:none;white-space:nowrap}
.pr-banner .ptel::before{content:"";width:.9em;height:.9em;flex:none;background:#FFD400;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 012-2h3.28a1 1 0 01.95.68l1.5 4.5a1 1 0 01-.5 1.2l-2.26 1.13a11 11 0 005.52 5.52l1.13-2.26a1 1 0 011.2-.5l4.5 1.5a1 1 0 01.68.95V19a2 2 0 01-2 2h-1C9.72 21 3 14.28 3 6V5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5a2 2 0 012-2h3.28a1 1 0 01.95.68l1.5 4.5a1 1 0 01-.5 1.2l-2.26 1.13a11 11 0 005.52 5.52l1.13-2.26a1 1 0 011.2-.5l4.5 1.5a1 1 0 01.68.95V19a2 2 0 01-2 2h-1C9.72 21 3 14.28 3 6V5z'/%3E%3C/svg%3E") center/contain no-repeat}
.pr-banner .ptel:hover{color:#FFD400}
/* カード内の文章: 単語・文節の途中で改行しない（句読点が行頭に残らない）。見出しは行を均等に折る */
body.mp-lower :is(.card,.case,.vo-card,.lib-card,.rrow,.faq-item,.pp-sec,.wk-card,.wk-step,.wk-ptxt,.sp-card,.panel,.cs-item,.ps,[class*="rounded-"]) :is(h2,h3,h4,p,li,dd,dt,small,span,a){word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
body.mp-lower :is(.card,.case,.vo-card,.lib-card,.rrow,.faq-item,.pp-sec,.wk-card,.wk-step,.wk-ptxt,.sp-card,.panel,[class*="rounded-"]) :is(h2,h3,h4){text-wrap:balance}
body.mp-lower :is(.card,.case,.vo-card,.lib-card,.rrow,.faq-item,.pp-sec,.wk-card,.wk-step,.wk-ptxt,.sp-card,.panel,[class*="rounded-"]) :is(p,li,dd){text-wrap:pretty}
/* 表の「みらいパートナーズ」見出し(濃紺)を、料金プランの「おすすめ」列と同じ、黄色の背景＋黒文字にそろえる */
body.mp-lower table thead th.us,
body.mp-lower .cmp thead th.us,
body.mp-lower table th.bg-primary{background:#FFD400!important;color:#111!important;font-weight:900}
/* 料金表(表・スマホ用カード): 他のカードと同じく、文節の途中で改行しない */
.mp-pt :is(th,td,li,b,i,small,span),.mp-pt-card :is(h3,dt,dd,li,b,i,small,span){word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.mp-pt-card :is(h3){text-wrap:balance}
.mp-pt-card :is(dd,li),.mp-pt :is(td,li){text-wrap:pretty}
/* 他の表(比較表・会社概要・募集要項・プライバシーポリシー)も、文節の途中で改行しない */
:is(.cmp,.cp-table,.rq-table,.mp-pp-table) :is(th,td,li,b,span,div,a){word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
/* ファーストビュー(ヒーローと直下の帯)には電話番号を出さない */
.pr-hero .tel,.pr-cta .tel,.pr-banner .tel,.pr-banner .ptel{display:none!important}

/* ファーストビュー: ラベル(.tag)とキャッチコピー(.ln)の大きさ(キャッチコピーのほうを大きく)。キャッチコピーは折り返してよい */
body .pr-hero .tag,body.mp-lower .pr-hero .tag{font-size:clamp(15px,1.3vw,19px)!important;letter-spacing:.06em!important;padding:6px clamp(14px,1.8vw,24px)!important;margin-bottom:18px!important}
body .pr-hero h1 .ln,body.mp-lower .pr-hero h1 .ln{font-size:clamp(30px,4vw,56px)!important;line-height:1.35!important;white-space:normal!important;text-wrap:balance!important;overflow-wrap:anywhere}
body .pr-hero h1 .ln+.ln,body.mp-lower .pr-hero h1 .ln+.ln{font-size:clamp(23px,2.3vw,34px)!important;line-height:1.5!important}
body .pr-hero h1 .ln span,body.mp-lower .pr-hero h1 .ln span{white-space:inherit!important}

/* 折り返したキャッチコピーでも、黄色のマーカーが各行に引かれるようにする */
body.mp-bpo .pr-hero h1 .ylb,body.mp-lower .pr-hero h1 .ylb{display:inline!important;transform:none!important;padding:0 .15em!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body.mp-bpo .pr-hero h1 .ylb span,body.mp-lower .pr-hero h1 .ylb span{display:inline!important;transform:none!important}

/* ファーストビューのラベル(.tag・白い小さな札)を、形(比率)はそのままで、全体を縮めて、キャッチコピー1行の高さより小さくする */
@media (max-width:600px){body .pr-hero .tag,body .pr-hero li{zoom:.68}}
@media (min-width:601px) and (max-width:1100px){body .pr-hero .tag,body .pr-hero li{zoom:.7}}
@media (min-width:1101px){body .pr-hero .tag,body .pr-hero li{zoom:.9}}

/* 選ばれる理由: 1列になる幅では、全項目「文章 → 写真」の順にそろえる(PC幅の左右交互は、そのまま) */
@media (max-width:899px){.rrow>.frame{order:2!important}}

/* スマホ幅で、長い日本語のまとまりが折り返せず、横にはみ出さないようにする(まとまりの切れ目で折るのは、これまで通り) */
body h1,body h2,body h3,body h4,body p,body li,body dt,body dd,body summary,body label,body .faq-a,body .faq-q{overflow-wrap:break-word}

/* 横並び(flex)の中の文章が、内容の長さに引っ張られて、枠からはみ出さないようにする */
.head h1,.head h2,.head h3,.aa p,.faq-a p,.faq-a,.faq-item p{min-width:0}
body .faq-a,body .faq-q>span,body .faq-item .flex>div{min-width:0}
@media (max-width:640px){.cp-table,.cp-table tbody,.cp-table tr,.rq-table,.rq-table tbody,.rq-table tr{display:block;width:100%;max-width:100%}.cp-table td,.cp-table th,.rq-table td,.rq-table th{min-width:0;max-width:100%}}

/* 「そのお悩み〜が解決します」の斜めの帯: スマホ幅で折り返したとき、帯の中の文字を中央にそろえ、行の長さを均等にする */
.mp-service .pr-solve h2 .ln,.mp-payroll .pr-solve h2 .ln{text-align:center;text-wrap:balance}
.mp-service .pr-solve h2 .ln span,.mp-payroll .pr-solve h2 .ln span{text-align:center}
@media (max-width:600px){.mp-service .pr-solve h2 .ln,.mp-payroll .pr-solve h2 .ln{white-space:normal;max-width:100%;padding-left:18px;padding-right:22px}}

/* スマホ幅: 見出しの黄色い強調語(.y)は、途中で折らず、語のまとまりごと次の行へ送る(「導入事/例」のような1文字落ちを防ぐ) */
@media (max-width:640px){body .h2 .y,body .head .y{word-break:keep-all!important;overflow-wrap:normal!important}}

/* スマホ幅: 最後の行に1〜2文字だけ残らないよう、行の長さを整える */
@media (max-width:640px){body .copy,body .copy span,body .pr-solve .ln span,body .pr-hero h1 .ln span{text-wrap:balance}
body main p,body main strong,body main li{text-wrap:pretty}}
@media (max-width:640px){body main :is(p,li,dd,dt,strong,small){word-break:auto-phrase;line-break:strict}}
@media (max-width:640px){body main :is(h1,h2,h3,h4,strong,.who,.vc-lb){text-wrap:balance}}
/* スマホ・タブレット幅: 「ー」「ぁ」「、」「。」などが行頭に来ない折り返し(厳格な禁則処理)にする */
@media (max-width:900px){body{line-break:strict}}
/* お客様の声の記事: 会社名のような長い1語の見出しは、文字の途中でも、行の長さが同じになるよう折り返す */
@media (max-width:640px){body.single-voice .pr-hero h1 .ln,body.single-voice .pr-hero h1 .ln *{word-break:normal}}
/* スマホ幅: ファーストビュー直下の「今すぐお問い合わせ」の帯を、上下に狭くする */
@media (max-width:640px){body .pr-banner .bin{padding:22px 16px!important}body .pr-banner .btn{padding-top:14px!important;padding-bottom:14px!important}}
/* タブレット幅(iPadなど): ファーストビューと、直下のお問い合わせの帯を、縦に詰める */
@media (min-width:641px) and (max-width:1100px){body .pr-banner .bin{padding:26px 24px!important}body .pr-banner .btn{padding-top:15px!important;padding-bottom:15px!important}body .pr-hero .in{padding-top:104px!important;padding-bottom:40px!important}body .pr-hero ul{margin-top:22px!important}}
/* 図・写真・動画が、カードの枠(幅)を超えないようにする */
[class*=card] img,[class*=card] svg,[class*=card] video,[class*=rounded] img,.frame img,.panel img,article img{max-width:100%;height:auto}
[class*=card] iframe,[class*=rounded] iframe,.frame iframe{max-width:100%}

/* スマホ幅: ページ下部の「お問い合わせ」セクション(貴社の「最初の一歩」〜)を、上下に詰める */
@media (max-width:640px){
.mp-service .contact,.mp-payroll .contact{padding-top:40px;padding-bottom:40px}
.mp-service .contact .copy,.mp-payroll .contact .copy,.mp-service main .contact .copy,.mp-payroll main .contact .copy{font-size:clamp(22px,6.4vw,26px);line-height:1.45}
.mp-service .contact .acts,.mp-payroll .contact .acts{margin-top:20px;gap:12px 20px}
.mp-service .contact .btn,.mp-payroll .contact .btn,.mp-service main .contact .btn,.mp-payroll main .contact .btn{padding:13px 32px;font-size:18px}
.mp-service .contact .tel,.mp-payroll .contact .tel{font-size:24px}
}