/* 下層ページ共通: トップページのカード・背景トーンに合わせる (Tailwindクラスの上書き) */
.mp-lower{--mp-navy:#003256;--mp-navy2:#00243f;--mp-blue:#1479B8;--mp-sky:#1A9BC9;--mp-alt:#F3F7FA;--mp-line:#D9E4EC;--mp-txt:#24384a;--mp-sub:#4a6075}
.mp-lower{color:var(--mp-txt)}

/* 色トークン: 旧プライマリ(明るい青)→ トップの紺・青 */
.mp-lower .text-primary{color:var(--mp-navy)}
.mp-lower .text-primary-light{color:var(--mp-blue)}
.mp-lower .text-primary-dark{color:var(--mp-navy2)}
.mp-lower .bg-primary{background-color:var(--mp-navy)}
.mp-lower .bg-primary-dark{background-color:var(--mp-navy2)}
.mp-lower .bg-primary-light{background-color:var(--mp-sky)}
.mp-lower .bg-primary\/5{background-color:rgba(0,50,86,.05)}
.mp-lower .bg-primary\/10{background-color:rgba(0,50,86,.08)}
.mp-lower .bg-primary-light\/10{background-color:rgba(26,155,201,.1)}
.mp-lower .border-primary{border-color:var(--mp-navy)}
.mp-lower .border-primary-light{border-color:var(--mp-sky)}
.mp-lower .border-primary\/20{border-color:rgba(0,50,86,.2)}
.mp-lower .border-primary-light\/30,.mp-lower .border-primary-light\/40{border-color:rgba(26,155,201,.35)}
.mp-lower .hover\:text-primary:hover{color:var(--mp-blue)}
.mp-lower .hover\:bg-primary-dark:hover{background-color:var(--mp-navy2)}

/* 背景: 白と淡いグレー青を交互に。濃い面はネイビー */
.mp-lower .bg-gray-50{background-color:var(--mp-alt)}
.mp-lower section.bg-primary{background:linear-gradient(180deg,#003256 0,#00243f 100%)}

/* カード: 白地+細い罫線+ごく薄い影(トップと同じ) */
.mp-lower .bg-white.rounded-lg,.mp-lower .bg-white.rounded-xl,.mp-lower .bg-white.rounded-2xl,
.mp-lower .bg-gray-50.rounded-lg,.mp-lower .bg-gray-50.rounded-xl,.mp-lower .bg-gray-50.rounded-2xl{border:1px solid var(--mp-line);border-radius:12px;box-shadow:0 2px 10px rgba(0,50,86,.06)}
.mp-lower .bg-gray-50.rounded-lg,.mp-lower .bg-gray-50.rounded-xl,.mp-lower .bg-gray-50.rounded-2xl{background-color:#fff}
.mp-lower .bg-gray-50.bg-gray-50 .bg-gray-50{background-color:#fff}
.mp-lower section.bg-gray-50 .bg-white.rounded-lg,.mp-lower section.bg-gray-50 .bg-white.rounded-xl{background-color:#fff}
.mp-lower .shadow-sm{box-shadow:0 2px 10px rgba(0,50,86,.06)}
.mp-lower .shadow-md{box-shadow:0 4px 16px rgba(0,50,86,.10)}
.mp-lower .shadow-lg,.mp-lower .shadow-xl{box-shadow:0 8px 24px rgba(0,50,86,.14)}
/* カード上辺の色帯(AI感)をやめて細い罫線に */
.mp-lower .border-t-4{border-top-width:1px;border-top-color:var(--mp-line)}
.mp-lower .border-gray-100,.mp-lower .border-gray-200{border-color:var(--mp-line)}

/* 見出し: 太く、紺。小ラベルは青 */
.mp-lower h1,.mp-lower h2,.mp-lower h3{font-weight:900;letter-spacing:.02em}
.mp-lower main h2.text-primary,.mp-lower section h2.text-primary{color:var(--mp-navy)}
.mp-lower .text-gray-600,.mp-lower .text-gray-700{color:var(--mp-sub)}
.mp-lower .text-gray-900{color:var(--mp-navy)}

/* 濃色セクションのドット柄はごく薄く */
.mp-lower .bg-\[radial-gradient\(\#ffffff_1px\,transparent_1px\)\]{opacity:.08}

/* BPO事業ページのファーストビュー: 背景を単色、キャッチコピーを中央ぞろえ */
body.mp-bpo .pr-hero{background:#003256}
body.mp-bpo .pr-hero .bgimg,body.mp-bpo .pr-hero .stripe,body.mp-bpo .pr-hero .panel{display:none}
body.mp-bpo .pr-hero .in{grid-template-columns:minmax(0,1fr)}
body.mp-bpo .pr-hero .in>div:first-child{padding:0 16px;text-align:center;justify-items:center;justify-content:center;grid-template-columns:min(960px,100%)}
body.mp-bpo .pr-hero h1,body.mp-bpo .pr-hero h1 .ln{text-align:center;align-items:center}
body.mp-bpo .pr-hero ul{justify-content:center}

/* BPOページ: ファーストビュー下のお問い合わせバナー */
body.mp-bpo .pr-banner{background:#00243f;color:#fff;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;border-bottom:4px solid #FFD400}
body.mp-bpo .pr-banner .bin{max-width:1240px;margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:center;gap:20px 36px;flex-wrap:wrap}
body.mp-bpo .pr-banner .rib{background:#F28A1B;color:#fff;font-weight:900;font-size:17px;letter-spacing:.1em;padding:5px 24px;transform:skewX(-12deg)}
body.mp-bpo .pr-banner .rib span{display:block;transform:skewX(12deg)}
body.mp-bpo .pr-banner h2{margin:0;font-size:clamp(18px,2vw,24px);font-weight:900;line-height:1.5;color:#fff}
body.mp-bpo .pr-banner .btn{display:inline-flex;align-items:center;gap:14px;background:linear-gradient(180deg,#FF9F3D,#F28A1B 55%,#E5731A);color:#fff;font-weight:900;font-size:19px;padding:15px 30px;text-decoration:none;box-shadow:0 6px 14px rgba(229,115,26,.4)}
body.mp-bpo .pr-banner .btn:hover{filter:brightness(1.06)}
body.mp-bpo .pr-banner .btn i{font-style:normal;font-size:13px}
body.mp-bpo .pr-banner .tel{text-align:center;line-height:1.3}
body.mp-bpo .pr-banner .tel small{display:block;font-size:13px;font-weight:700;color:#bcd3e4}
body.mp-bpo .pr-banner .tel a{font-size:clamp(26px,2.6vw,32px);font-weight:900;letter-spacing:.03em;color:#fff;text-decoration:none}
body.mp-bpo .pr-banner .sub{font-size:15px;font-weight:700;color:#FFD400;text-decoration:none}
body.mp-bpo .pr-banner .sub:hover{text-decoration:underline}

/* BPOページのファーストビュー: ページごとの薄い単色背景(文字は紺系に) */
body.mp-bpo{--bpo-tint:#E3F1FB}
body.mp-bpo-speedkeiriout,body.mp-bpo-speedkeiriout-123{--bpo-tint:#E2F4EA}
body.mp-bpo-back-office,body.mp-bpo-back-office-123{--bpo-tint:#FFF0DA}
body.mp-bpo-sns-marketing{--bpo-tint:#FDE6EF}
body.mp-bpo-hp-lp{--bpo-tint:#EAE7FA}
body.mp-bpo-mail-magazine{--bpo-tint:#DFF3F3}
body.mp-bpo .pr-hero{background:var(--bpo-tint)}
body.mp-bpo .pr-hero .tag{background:#003256;color:#fff}
body.mp-bpo .pr-hero h1 .ln{color:#003256;text-shadow:none}
body.mp-bpo .pr-hero h1 .ln+.ln{color:#26506f;text-shadow:none}
body.mp-bpo .pr-hero li{background:#fff;border-color:#9fbdd3;color:#003256}
body.mp-bpo .pr-hero li span::before{color:#F28A1B}
body.mp-bpo .pr-hero li b{color:#E5731A}
body.mp-bpo .pr-hero{background:linear-gradient(180deg,#fff 0,var(--bpo-tint) 320px) var(--bpo-tint)}
/* 給与ページのファーストビューの高さをスピード経理(他のサービスページ)に合わせる */
body.mp-payroll .pr-hero{height:auto;min-height:0;display:flex}
body.mp-payroll .pr-hero .in{width:100%;height:auto;box-sizing:border-box;align-items:center;padding-top:150px;padding-bottom:80px}
@media (max-width:1000px){body.mp-payroll .pr-hero{height:auto;min-height:0}body.mp-payroll .pr-hero .in{height:auto;padding-top:120px;padding-bottom:64px}}
body.mp-bpo .pr-banner .bin{padding:22px 24px}body.mp-bpo .pr-banner .btn{font-size:20px;padding:16px 56px}
body.mp-bpo .pr-banner .bin{padding:56px 24px}body.mp-bpo .pr-banner .btn{font-size:22px;padding:20px 72px}
body.mp-bpo{--bpo-sub:#000;--bpo-txt:#000;--mp-sub:#000;--mp-txt:#000}
body.mp-bpo .pr-hero h1 .ylb{display:inline-block;background:#FFD400;color:#003256;font-weight:900;padding:0 .35em;margin-left:.1em;line-height:1.35}
body.mp-bpo .pr-hero h1 .ylb{display:inline;background:linear-gradient(transparent 62%,#FFE45C 62%);color:inherit;padding:0 .1em;margin-left:0}
body.mp-bpo .pr-hero h1 .ylb{display:inline-block;background:#FFD400;color:#003256;padding:0 .4em;margin:0 .1em;line-height:1.35;transform:skewX(-12deg)}
body.mp-bpo .pr-hero h1 .ylb span{display:inline-block;transform:skewX(12deg)}
body.mp-bpo .pr-hero h1 .ylb{background:linear-gradient(transparent 60%,#FFD400 60%)}

/* ITコンサルのファーストビュー: BPOと同じ形式(色は別)。本文の文字色は従来のまま */
body.mp-bpo-dx-support,body.mp-bpo-it-komon{--bpo-tint:#E4F1FB}
body.mp-bpo-it-helpdesk{--bpo-tint:#E1F5F1}
body.mp-bpo-dx-sien{--bpo-tint:#E8EBFA}
body.mp-bpo-dx-improvement{--bpo-tint:#FFF3DD}
body.mp-bpo-ai-katuyou{--bpo-tint:#F0E8FA}
body.mp-bpo-dx-support,body.mp-bpo-it-komon{--bpo-tint:#C9E2F7}
body.mp-bpo-it-helpdesk{--bpo-tint:#C3EBE2}
body.mp-bpo-dx-sien{--bpo-tint:#D0D6F4}
body.mp-bpo-dx-improvement{--bpo-tint:#FFE2B5}
body.mp-bpo-ai-katuyou{--bpo-tint:#E2D2F6}