/* ==========================================================
0. RESET & TOKENS (V4と共通のデザインシステム)
========================================================== */
:root{
--rsh-blue:#00A0E4;
--rsh-blue-deep:#008DD0;
--rsh-blue-darker:#005E8C;
--rsh-blue-tint:#E8F8FF;
--rsh-blue-tint-2:#D2EFFA;
--rsh-orange:#FF8A00;
--rsh-orange-deep: #EA580C;
--ink:#374151;
--ink-sub:#55697A;
--ink-faint:#8A9BA8;
--line:#CAD4DA;
--bg-soft:#F5FAFD;
--white:#FFFFFF;
--shadow-sm:0 4px 12px rgba(23,42,58,0.06);
--shadow-md:0 12px 32px rgba(23,42,58,0.10);
--shadow-lg:0 20px 48px rgba(0,90,140,0.18);
--header-h:80px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0; font-family:'Roboto','Noto Sans JP',sans-serif; color:var(--ink);
line-height:1.5; letter-spacing:0.04em; background:var(--white); -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.material-symbols-rounded{
font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
font-size:18px; line-height:1; letter-spacing:normal; text-transform:none;
display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
-webkit-font-smoothing:antialiased; vertical-align:middle;
font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.icon-fill{ font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ==========================================================
1. TYPOGRAPHY
========================================================== */
.text-4xl-bold{ font-size:36px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.text-3xl-bold{ font-size:30px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.text-2xl-bold{ font-size:24px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.text-xl-bold{ font-size:20px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.text-base{ font-size:16px; font-weight:400; line-height:1.5; letter-spacing:0.04em; }
.text-base-bold{ font-size:16px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.text-sm{ font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0.04em; }
.text-xs{ font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0.04em; }
.text-primary{ color:var(--rsh-blue-deep); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--rsh-blue-deep); font-weight:700; font-size:14px; }
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--rsh-blue); }
.section-title{ text-align:center; margin-top:12px; }
.section-lead{ text-align:center; color:var(--ink-sub); margin-top:16px; max-width:640px; margin-left:auto; margin-right:auto; }
.center{ text-align:center; }
.sp-only{ display:none; }
@media (max-width:768px){ .sp-only{ display:inline; } }
.pc-only{ display:inline; }
@media (max-width:768px){ .pc-only{ display:none; } }

/* ==========================================================
2. LAYOUT
========================================================== */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
@media (min-width:1024px){ .container{ padding:0 40px; } }
section{ padding:80px 0; }
#reason, #bpo{ padding-top:0; }
.pain-section{ padding-bottom:40px; }
#steps{ padding:0; }
@media (min-width:1024px){ .pain-section{ padding-top:40px; } }
.cta-section-pad{ padding:0; }
.bg-soft{ background:var(--bg-soft); }
.page-shell{ display:flex; }
.page-main{ flex:1; min-width:0; }
.side-rail{ /*width:308px;*/width: 25%; flex-shrink:0; }
@media (max-width:1023px){ .side-rail{ display:none; } }

/* ==========================================================
3. BUTTONS
========================================================== */
.btn{
display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
gap:4px; text-align:center; border-radius:12px; padding:16px 24px; font-weight:700;
transition:all 0.3s ease; border:2px solid transparent; line-height:1.5; letter-spacing:0.04em;
}
.btn .btn-sub{ font-size:12px; font-weight:400; opacity:0.92; }
.btn .btn-main{ font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; }
.btn-primary{ background:linear-gradient(90deg,#00A0E4 0%, #008DD0 100%); color:var(--white); box-shadow:var(--shadow-md); }
.btn-primary:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.btn-orange{ background:linear-gradient(90deg,#F97316 0%, #EA580C 100%); color:var(--white); box-shadow:0 12px 32px rgba(234,88,12,0.24); }
.btn-orange:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(234,88,12,0.32); }
.btn-outline{ background:var(--white); color:var(--rsh-blue-deep); border-color:var(--rsh-blue); }
.btn-outline:hover{ background:var(--rsh-blue-tint); transform:translateY(-4px); }
.btn-block{ width:100%; }
.arrow{ display:inline-block; transition:transform 0.3s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

/* ==========================================================
4. HEADER (floating / sticky on PC)
========================================================== */
.site-header{
position:sticky; top:0; z-index:200; background:rgba(255,255,255,0.96);
backdrop-filter:blur(8px); border-bottom:1px solid var(--line); height:var(--header-h);
}
.site-header-inner{
max-width:1200px; margin:0 auto; padding:0 24px; height:100%;
display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex-shrink:0; }
.logo-image{ width:180px; height:auto; display:block; }
.logo-mark{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--rsh-blue) 0%, var(--rsh-blue-deep) 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.logo-sub{ display:block; font-size:11px; font-weight:400; color:var(--ink-sub); }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-sub); }
.nav-links a:hover{ color:var(--rsh-blue-deep); }
.header-right{ display:flex; align-items:center; gap:16px; }
.header-tel{ text-align:right; }
.header-tel a{ font-size:18px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; }
.header-tel small{ display:block; font-size:11px; color:var(--ink-faint); }
.header-btns{ display:flex; gap:8px; }
.header-btn{ padding:12px 16px; border-radius:4px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:8px; transition:all 0.3s ease; white-space:nowrap; }
.header-btn.primary{ background:linear-gradient(90deg,#00A0E4 0%, #008DD0 100%); color:var(--white); }
.header-btn.primary:hover{ background:var(--rsh-blue-deep); transform:translateY(-2px); }
.header-btn.orange{ background:linear-gradient(90deg,#F97316 0%, #EA580C 100%); color:var(--white); }
.header-btn.orange:hover{ background:var(--rsh-orange-deep); transform:translateY(-2px); }
.menu-toggle{ display:none; background:none; border:none; padding:8px; flex-shrink:0; }
.mobile-nav{ display:none; background:var(--white); border-bottom:1px solid var(--line); }
.mobile-nav.open{ display:block; }
.mobile-nav ul{ padding:16px 24px; display:flex; flex-direction:column; gap:4px; }
.mobile-nav a{ display:block; padding:12px 0; font-size:14px; border-bottom:1px solid var(--line); }

/* ==========================================================
5. HERO
========================================================== */
.hero{
position:relative; overflow:hidden;
padding:48px 0 0;
}
.hero::before{
content:""; position:absolute; inset:0; z-index:-3;
background:radial-gradient(1200px 600px at 85% -10%, var(--rsh-blue-tint-2) 0%, var(--rsh-blue-tint) 40%, var(--white) 75%);
}
.hero-kicker{ display:inline-flex; align-items:center; gap:8px; color:var(--rsh-blue-deep); padding-bottom:8px; font-weight:700; font-size:18px; border-bottom:2px solid var(--rsh-blue-tint-2); }
.hero-bg-deco{
position:absolute; top:0; right:0; width:1117px; height:210px;
background-image:url('/wp-content/themes/sango-theme-child/assets/images/lp-004_1/mv_bgimg.svg'); background-size:1117px 210px; background-repeat:no-repeat; background-position:top right;
pointer-events:none; z-index:-2;
}
.hero-photo-deco{
position:absolute; top:0; right:calc(50% - 320px); transform: translateX(50%); width:402px; height:440px; aspect-ratio:402 / 440; object-fit:cover; pointer-events:none; z-index:-1;
}
@media (max-width:768px){
.hero-bg-deco{ width:558px; height:105px; background-size:558px 105px; }
.hero-photo-deco{ position:relative; z-index:-1; display:block; width:300px; height:auto; margin:-24px auto; top:auto; right:auto; transform: none; }
}
.hero-title{ margin-top:20px; font-size:40px; font-weight:700; line-height:1.5; letter-spacing:0.04em; }
.hero-title .primary-lg{ color:var(--rsh-blue-deep); }
.hero-desc{ margin-top:16px; color:var(--ink-sub); max-width:580px; }
.hero-proof-wrap{ margin-top:32px; }
.hero-proof{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-proof-note{ margin-top:8px; font-size:10px; color:#8A9BA8; }
.hero-note-break{ display:none; }
.hero-mobile-cta{ display:none; }
.hero-mobile-cta .btn{ border-radius:6px; padding:16px; }
.hero-tags-box{ margin-top:32px; display:inline-block; background:var(--white); border:1px solid var(--rsh-blue-tint-2); border-radius:8px; padding:24px; }
.hero-tags-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.hero-tags-list li{ background:var(--rsh-blue-tint); color:var(--rsh-blue-deep); padding:4px 12px; border-radius:4px; font-size:14px; font-weight:700; }
@media (min-width:1024px){
.hero-proof-wrap{ display:flex; align-items:flex-end; gap:16px; margin-top:24px; }
.hero-proof-note{ margin-top:0; white-space:nowrap; }
.hero-note-break{ display:inline; }
.hero-proof-item{ padding:0 26px; }
.hero-tags-box{ margin-top:24px; }
}
.hero-proof-item{
display:flex; flex-direction:column; gap:4px; text-align:center;
padding:16px 40px; min-width:160px;
background-image:url('/wp-content/themes/sango-theme-child/assets/images/lp-004_1/leaf_r.svg'), url('/wp-content/themes/sango-theme-child/assets/images/lp-004_1/leaf_l.svg');
background-position:left center, right center;
background-size:27px 60px, 27px 60px;
background-repeat:no-repeat, no-repeat;
}
.hero-proof-item .tag{ font-size:11px; font-weight:700; color:#0A2540; }
.hero-proof-item .num{ font-size:20px; font-weight:700; color:#008DD0; }
.hero-proof-item:nth-child(1) .num, .hero-proof-item:nth-child(3) .num{ line-height:1; }
@media (min-width:1024px){ .hero-proof-item{ padding:0 26px; } }
@media (min-width:1024px){ .case-title-row h3{ font-size:20px; } }
@media (min-width:1024px){ .case-body .text-sm{ font-size:16px; } }
.hero-ctas{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.hero-ctas .btn{ min-width:240px; }
@media (min-width:1024px){ .hero-ctas{ display:none; } }

/* ==========================================================
6. SIDE-RAIL FLOATING FORM (breakpoint 1024px, right side, <=308px)
========================================================== */
.side-form-sticky{ position:-webkit-sticky; position:sticky; top:var(--header-h); padding-left:0; height:calc(100vh - var(--header-h)); }
.side-form{ /*width:308px;*/width: 100%; height:100%; background:var(--white); border:1px solid var(--line); border-radius:0; box-shadow:var(--shadow-lg); overflow-y:auto; }
.side-form-badge{ background:linear-gradient(135deg,var(--rsh-orange),#FFB74D); color:var(--white); text-align:center; padding:8px; font-weight:700; font-size:13px; }
.side-form-body{ padding:20px; }
.side-form-head{ display:flex; align-items:center; gap:8px; }
.side-form-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--rsh-blue); flex-shrink:0; }
.side-form-desc{ margin-top:8px; color:var(--ink-sub); }
.side-form-fields{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.side-form-fields label{ display:block; font-size:12px; font-weight:700; color:var(--ink-sub); margin-bottom:4px; }
.side-form-fields input{ width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:inherit; letter-spacing:0.04em; transition:border-color 0.3s ease; }
.side-form-fields input:focus{ outline:none; border-color:var(--rsh-blue); }
.side-form-submit{ margin-top:16px; width:100%; background:linear-gradient(90deg,#00A0E4 0%, #008DD0 100%); color:var(--white); border:none; padding:14px; border-radius:10px; font-weight:700; font-size:14px; transition:all 0.3s ease; }
.side-form-submit:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.side-form-note{ margin-top:8px; color:var(--ink-faint); text-align:center; }
.side-form-divider{ text-align:center; margin:16px 0; color:var(--ink-faint); }
.side-form-alt{ display:block; text-align:center; padding:12px; border-radius:10px; background:linear-gradient(90deg,#F97316 0%, #EA580C 100%); color:var(--white); font-weight:700; font-size:13px; transition:all 0.3s ease; }
.side-form-alt:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.side-form-trust{ margin-top:16px; padding-top:16px; border-top:1px dashed var(--line); text-align:center; color:var(--ink-faint); }

/* ==========================================================
7. FIXED BOTTOM CTA (mobile)
========================================================== */
.fixed-cta{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:300; background:var(--white); box-shadow:0 -8px 24px rgba(23,42,58,0.12); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.fixed-cta.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.fixed-cta-inner{ display:flex; }
.fixed-cta a{ flex:1; padding:12px 8px; text-align:center; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.fixed-cta a.fc-blue{ background:linear-gradient(90deg,#00A0E4 0%, #008DD0 100%); color:var(--white); }
.fixed-cta a.fc-orange{ background:linear-gradient(90deg,#F97316 0%, #EA580C 100%); color:var(--white); }

/* ==========================================================
8. PAIN(画像アイコン付きリスト)
========================================================== */
.pain-x-list{ margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pain-x-item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 24px; }
.pain-x-icon{ flex-shrink:0; width:96px; height:96px; object-fit:cover; }

/* ==========================================================
9. REASON DUO(2カード:産業医/産業看護職、見出し上画像、導入事例ロゴ列)
========================================================== */
.reason-duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.reason-duo-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:32px; }
.reason-heading-image{ width:180px; height:50px; margin:0 auto 28px; background-image:url('/wp-content/themes/sango-theme-child/assets/images/lp-004_1/reasons_icon01.svg'); background-size:180px 50px; background-repeat:no-repeat; background-position:center; }
.case-logo-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:20px 0; }
.case-logo-strip img{ display:block; max-width:100%; height:auto; padding:4px 10px; }
@media (min-width:1024px){ .case-logo-strip img{ max-height:45px; width:auto; } }
.reason-duo-image{ width:100%; height:auto; aspect-ratio:444 / 200; object-fit:cover; margin-bottom:24px; display:block; border-radius:0; }

/* ==========================================================
10. CTA BANNER
========================================================== */
.cta-banner{ background:linear-gradient(135deg,var(--rsh-blue-darker),var(--rsh-blue)); border-radius:12px; padding:48px; color:var(--white); }
.cta-banner-title{ margin-top:12px; color:var(--white); }
.cta-banner-btns{ display:flex; gap:16px; margin-top:32px; flex-wrap:wrap; }
.cta-banner .btn-white{ background:var(--white); color:var(--rsh-blue-darker); box-shadow:var(--shadow-md); }
.cta-banner .btn-white:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.cta-banner .btn-outline-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.6); }
.cta-banner .btn-outline-white:hover{ background:rgba(255,255,255,0.14); transform:translateY(-4px); }
.cta-plain{ background:none; border-radius:0; padding:0; box-shadow:none; color:var(--ink); }
.cta-plain .cta-banner-title{ color:var(--ink); }
.cta-inline{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.cta-doc-image{ flex-shrink:0; width:180px; height:127px; object-fit:cover; }
.cta-doc-title, .cta-doc-subhead, .cta-doc-body{ text-align:left; }
.cta-inline-text{ color:#008DD0; font-size:14px; font-weight:700; margin:0; text-align:left; }
.btn-compact{ border-radius:6px; padding:16px; }
@media (min-width:1024px){
.cta-doc-highlight{ flex-wrap:nowrap; }
.cta-pad-lg{ margin-left:-40px; margin-right:-40px; }
}
@media (min-width:769px){
.cta-pad-lg{ padding:40px 48px; }
}
@media (max-width:1023px){
.cta-inline{ flex-direction:column; text-align:center; }
.cta-inline-text{ text-align:center; }
}

/* ==========================================================
11. PLAN + SIMULATOR
========================================================== */
.plan-panel{ margin-top:48px; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:48px; }
.plan-top{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.plan-team{ display:flex; align-items:center; justify-content:center; gap:20px; }
.plan-team-item{ text-align:center; }
.plan-team-circle{
width:96px; height:96px; border-radius:50%; background:var(--rsh-blue-tint);
display:flex; align-items:center; justify-content:center; margin:0 auto;
border:2px solid #00A0E4; position:relative;
}
.plan-team-badge-tag{
display:inline-block; font-size:11px; font-weight:700; color:var(--white);
background:var(--rsh-blue-darker); padding:2px 12px; border-radius:100px;
position:relative; z-index:2; transform:translateY(-12px);
}
.plan-plus{ font-size:24px; color:var(--ink-faint); font-weight:700; }
.plan-price-box{ text-align:center; border-radius:12px; padding:0; }
.plan-price .num{ font-size:48px; font-weight:700; color:var(--rsh-blue-deep); }
.plan-note-list{ margin-top:24px; text-align:left; }
.plan-note-list li{ font-size:10px; color:#8A9BA8; padding-left:16px; position:relative; margin-top:4px; }
.plan-note-list li::before{ content:"※"; position:absolute; left:0; }
.simulator-box{
text-align:center; background:var(--bg-soft); border:1px dashed var(--rsh-blue); border-radius:12px; padding:32px;
background-image:url('/wp-content/themes/sango-theme-child/assets/images/lp-004_1/price_illust01.svg');
background-repeat:no-repeat; background-position:right bottom; background-size:132px 205px;
}
.simulator-icon{ width:56px; height:56px; border-radius:14px; background:var(--rsh-blue-tint); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.plan-team-block{ margin-top:40px; padding-top:40px; border-top:1px solid var(--line); }
.plan-team-row{ display:flex; align-items:center; gap:40px; justify-content:center; }
.plan-team-row .plan-team{ flex-shrink:0; }
.plan-team-row .text-xl-bold{ flex:1; min-width:200px; }
.plan-compare-wrap{ margin-top:40px; overflow-x:auto; }
.plan-compare-table{ width:100%; border-collapse:collapse; min-width:560px; table-layout:fixed; background:var(--white); border-radius:0; overflow:hidden; }
.plan-compare-table th, .plan-compare-table td{ padding:16px 20px; border:1px solid var(--line); font-size:14px; text-align:center; vertical-align:middle; }
@media (min-width:1024px){ .plan-compare-table th, .plan-compare-table td{ font-size:16px; } }
.plan-compare-table tbody th{ text-align:left; }
.plan-compare-table th:first-child, .plan-compare-table td:first-child{ width:180px; }
.plan-compare-table th:nth-child(2), .plan-compare-table td:nth-child(2),
.plan-compare-table th:nth-child(3), .plan-compare-table td:nth-child(3){ width:calc((100% - 180px) / 2); }
.plan-compare-table thead th{ background:#F3F9FB; color:var(--ink-sub); font-weight:700; }
.plan-compare-table thead th.rsh-col{ background:#3CB2E5; color:var(--white); }
.plan-compare-table thead th.blank-cell{ background:none; border:none; }
.plan-compare-table tbody th{ color:var(--ink-sub); font-weight:700; background:#F3F9FB; white-space:nowrap; }
.plan-compare-table tbody td{ color:var(--ink-sub); background:var(--white); }
.plan-compare-table tbody tr:last-child th, .plan-compare-table tbody tr:last-child td{ border-bottom:1px solid var(--line); }
.plan-compare-table .rsh-col{ background:#F3F9FB; color:var(--rsh-blue-darker); font-weight:700; }

/* ==========================================================
12b. STEPS(プロセスの不確実性を解消するため再導入)
========================================================== */
.step-flag{
display:inline-flex; align-items:center; gap:8px; margin:20px auto 0;
color:var(--rsh-blue-darker); font-weight:700; font-size:14px;
padding-bottom:4px; border-bottom:2px solid var(--rsh-blue-tint-2);
}
.step-row{ display:flex; align-items:flex-start; gap:0; margin-top:48px; }
.step-node{ flex:1; text-align:center; position:relative; }
.step-node:not(:last-child)::after{ content:""; position:absolute; top:24px; left:calc(50% + 32px); width:calc(100% - 64px); height:2px; background:var(--line); }
.step-circle{ width:48px; height:48px; border-radius:50%; background:var(--rsh-blue); color:var(--white); display:flex; align-items:center; justify-content:center; margin:0 auto; font-weight:700; font-size:20px; position:relative; z-index:1; }
.step-title{ margin-top:16px; }
.step-detail{ margin-top:8px; color:var(--ink-faint); }

/* ==========================================================
12. BPO CHECKLIST(基本プランの提供サービス)
========================================================== */
.bpo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.bpo-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:32px; }
.bpo-image{ width:100%; height:auto; aspect-ratio:444 / 200; object-fit:cover; margin-bottom:20px; display:block; border-radius:0; }
.bpo-card ul{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.bpo-card ul li{ padding-left:24px; position:relative; color:var(--ink-sub); }
.bpo-card ul li::before{ content:"check_small"; font-family:'Material Symbols Rounded'; font-size:20px; position:absolute; left:-2px; top:-2px; color:var(--rsh-blue); }

/* ==========================================================
13. CASE STUDY
========================================================== */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px; }
.case-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.case-head{ background:var(--bg-soft); padding:24px; }
.case-body{ padding:24px; flex:1; display:flex; flex-direction:column; gap:20px; }
.case-body > div:not(:last-child){ padding-bottom:20px; border-bottom:1px solid var(--line); }
.case-block-label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; }
.case-block-label.before{ color:#C6533F; }
.case-block-label.reason{ color:#374151; }
.case-block-label.after{ color:#008DD0; }
.case-employee-badge{ display:inline-block; background:#00598C; color:#FFF; padding:4px 12px; border-radius:4px; font-size:12px; font-weight:700; }
.case-badge-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.case-title-row{ display:flex; align-items:center; gap:16px; margin-top:8px; }
.case-title-row h3{ flex:1; margin-top:0; }
.case-title-image{ flex-shrink:0; width:106px; height:106px; background-repeat:no-repeat; background-size:cover; background-position:center; }
@media (max-width:768px){ .case-title-image{ width:86px; height:86px; } }
.case-tag-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.case-tag-list li{ background:var(--rsh-blue-tint); color:var(--rsh-blue-deep); padding:4px 12px; border-radius:4px; font-size:14px; font-weight:700; }

/* ==========================================================
14. FAQ
========================================================== */
.faq-list{ margin-top:48px; display:flex; flex-direction:column; gap:16px; }
.faq-item{ background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-q{ display:flex; align-items:center; gap:16px; padding:24px; cursor:pointer; transition:background 0.3s ease; }
.faq-q:hover{ background:var(--bg-soft); }
.faq-q .qmark{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--rsh-blue); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; }
.faq-q .faq-title{ flex:1; }
.faq-toggle{ flex-shrink:0; width:24px; height:24px; position:relative; transition:transform 0.3s ease; }
.faq-toggle::before, .faq-toggle::after{ content:""; position:absolute; background:var(--ink-sub); border-radius:2px; }
.faq-toggle::before{ width:16px; height:2px; top:11px; left:4px; }
.faq-toggle::after{ width:2px; height:16px; top:4px; left:11px; transition:opacity 0.3s ease; }
.faq-item.open .faq-toggle{ transform:rotate(180deg); }
.faq-item.open .faq-toggle::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 0.35s ease; }
.faq-item.open .faq-a{ max-height:600px; }
.faq-a-inner{ padding:0 24px 24px 72px; color:var(--ink-sub); }
.faq-a-inner .point{ margin-top:12px; background:#F5FAFD; color:var(--rsh-blue-darker); padding:16px 20px; border-radius:12px; }

/* ==========================================================
15. SEGMENT PICKER(各専用窓口)
========================================================== */
.segment-list{ margin-top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.segment-row{ display:flex; align-items:flex-start; gap:20px; background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px; transition:all 0.3s ease; }
.segment-row:hover{ border-color:var(--rsh-blue-tint-2); box-shadow:var(--shadow-sm); transform:translateX(4px); }
.segment-image{ flex-shrink:0; width:142px; height:128px; border-radius:0; object-fit:cover; }
.segment-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.segment-text .q{ color:var(--ink-sub); }
.segment-cta{ display:inline-flex; align-items:center; justify-content:center; gap:6px; align-self:flex-start; text-align:center; font-size:13px; font-weight:700; padding:16px; border-radius:6px; background:linear-gradient(90deg,#00A0E4 0%, #008DD0 100%); color:var(--white); transition:all 0.3s ease; }
.segment-cta.orange{ background:linear-gradient(90deg,#F97316 0%, #EA580C 100%); }
.segment-row:not(.external):hover .segment-cta{ box-shadow:var(--shadow-md); }
.segment-row.external .segment-cta{ background:var(--white); color:var(--rsh-blue-deep); border:2px solid var(--rsh-blue); }
.segment-row.external:hover .segment-cta{ background:var(--rsh-blue-tint); }

/* ==========================================================
16. COMPANY
========================================================== */
.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; align-items:stretch; }
.company-badges{ display:flex; flex-direction:column; }
.company-badge-card{ display:flex; gap:16px; align-items:center; padding:24px 0; }
.company-badge-card:first-child{ padding-top:0; }
.company-badge-card:not(:last-child){ border-bottom:1px solid var(--line); }
.company-table{ padding:0 0 0 40px; border-left:1px solid var(--line); }
.company-badge-icon{ flex-shrink:0; width:100px; height:90px; object-fit:cover; }
.company-table dl{ display:grid; grid-template-columns:68px 1fr; gap:16px 12px; }
.company-table dt{ color:var(--ink-faint); font-size:14px; }
.company-table dd{ margin:0; font-size:14px; }
.company-links{ display:flex; gap:16px; margin-top:24px; flex-wrap:wrap; }
.company-links a{ font-size:13px; color:var(--rsh-blue-deep); font-weight:700; text-decoration:underline; text-underline-offset:4px; }

/* ==========================================================
17. FOOTER
========================================================== */
footer{ background:#374151; color:rgba(255,255,255,0.72); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; }
.footer-logo{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.footer-logo-image{ width:180px; height:auto; display:block; }
.footer-logo-sub{ display:block; font-size:11px; font-weight:400; color:#FFF; }
.footer-tel{ color:var(--white); font-size:20px; font-weight:700; margin-top:20px; display:block; }
.footer-col-title{ color:var(--white); margin-bottom:16px; }
.footer-col a{ display:block; padding:6px 0; font-size:14px; color:rgba(255,255,255,0.72); }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:rgba(255,255,255,0.5); }

/* ==========================================================
18. RESPONSIVE
========================================================== */
@media (max-width:1023px){ .nav-links{ display:none; } }
@media (max-width:900px){
.plan-team-row{ flex-direction:column; text-align:center; gap:20px; }
.plan-top{ grid-template-columns:1fr; }
.company-grid{ grid-template-columns:1fr; }
.company-table{ padding:32px 0 0; border-left:none; border-top:1px solid var(--line); }
.footer-grid{ grid-template-columns:1fr; gap:32px; }
.reason-duo-grid, .bpo-grid, .case-grid, .pain-x-list{ grid-template-columns:1fr; }
.step-row{ flex-direction:column; align-items:stretch; gap:32px; }
.step-node{ flex:none; }
.step-node:not(:last-child)::after{ display:none; }
}
@media (max-width:768px){
:root{ --header-h:70px; }
.hero{ padding-top:32px; }
.plan-price-box{ padding:0; }
.case-logo-strip img{ max-height:37px; width:auto; padding:4px 10px; }
.plan-compare-wrap{ overflow-x:visible; }
.plan-compare-table{ min-width:0; table-layout:fixed; }
.plan-compare-table th, .plan-compare-table td{ padding:8px 16px; font-size:14px; word-break:break-word; }
.plan-compare-table th:first-child, .plan-compare-table td:first-child{ width:80px; min-width:80px; max-width:80px; white-space:normal; }
.plan-compare-table th:nth-child(2), .plan-compare-table td:nth-child(2),
.plan-compare-table th:nth-child(3), .plan-compare-table td:nth-child(3){ width:auto; }
.plan-compare-table .compare-sub{ display:none; }
.faq-a-inner{ font-size:14px; }
.container{ padding:0 16px; }
section{ padding:48px 0; }
.pain-section{ padding-bottom:24px; }
.hero-title{ font-size:28px; }
.hero-proof{ justify-content:center; }
.hero-proof-item{ padding:0px 22px; }
.hero-proof-item:nth-child(2){ order:3; }
.hero-proof-item:nth-child(3){ order:2; }
.hero-proof-note{ text-align:center; }
.plan-team-heading{ font-size:20px; text-align:center; }
.plan-team-subtext{ text-align:center; }
.bpo-card ul li{ font-size:14px; }
.cta-doc-title, .cta-doc-subhead, .cta-doc-body{ text-align:center; }
#steps{ padding-top:48px; }
.hero-kicker{ font-size:16px; }
.hero-mobile-cta{ display:flex; flex-direction:column; gap:12px; margin-top:32px; }
.text-3xl-bold{ font-size:24px; }
.text-2xl-bold{ font-size:20px; }
.text-xl-bold{ font-size:16px; }
.text-base{ font-size:14px; }
.header-tel, .header-btns{ display:none; }
.menu-toggle{ display:block; }
.fixed-cta{ display:block; }
body{ padding-bottom:64px; }
.plan-panel{ padding:0; background:none; border:none; border-radius:0; margin-top:20px; }
.cta-banner{ padding:24px; }
.cta-pad-lg{ padding:40px 16px; }
.cta-banner-btns .btn{ width:100%; }
.segment-row{ flex-wrap:wrap; }
.segment-image{ width:120px; height:108px; order:1; }
.segment-right{ display:contents; }
.segment-text{ order:2; flex:1; min-width:0; }
.segment-cta{ width:100%; text-align:center; order:3; flex:1 0 100%; margin-top:0; }
.segment-list{ grid-template-columns:1fr; }
.segment-cta{ width:100%; text-align:center; }
.pain-x-item{ flex-direction:row; align-items:flex-start; text-align:left; padding:24px; }
.reason-duo-card{ padding:24px; }
.bpo-card{ padding:24px; }
}
/* ==========================================================
19. hubspot
========================================================== */
.hbspt-form .hs-form-field {
    background-color: #fff;
    border: solid 1px #D9D9D9;
    padding: .71429vw 1vw;
}

.hs-form-field+.hs-form-field {
    border-top: none;
}

.hs-form-field:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.hbspt-form .hs-form-field>label {
line-height: 1.2;
margin-bottom: 0;
font-size: 14px;
color: #000
}

.hs-form-field input {
    border: none;
    width: 100%;
}

.hbspt-form .hs-form-field .input {
margin-top: 8px
}

.hbspt-form .hs-form-field .input .hs-input {
background-color: #fff;
border: solid 1px #ced4da;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
font-size: 14px
}

.hbspt-form .hs-form-field .input .hs-input::-webkit-input-placeholder {
color: #959592
}

.hbspt-form .hs-form-field .input .hs-input::-moz-placeholder {
color: #959592
}

.hbspt-form .hs-form-field .input .hs-input:-ms-input-placeholder {
color: #959592
}

.hbspt-form .hs-form-field .input .hs-input::-ms-input-placeholder {
color: #959592
}

.hbspt-form .hs-form-field .input .hs-input::placeholder {
color: #959592
}

.hbspt-form .hs-form-field .input .hs-input.error {
border-color: #ff0d0d
}

.hbspt-form .hs-form-required {
background-color: #ff0d0d;
color: #ff0d0d;
display: inline-block;
border-radius: 0.25rem;
width: 34px;
height: 18px;
margin-left: 8px;
position: relative
}

.hbspt-form .hs-form-required:after {
content: '必須';
color: #fff;
position: absolute;
font-weight: bold;
left: 5px;
top: 2px;
font-size: 11px
}

.hbspt-form .hs_contact_type>label>span:first-child,.hbspt-form .hs_textarea>label>span:first-child {
position: relative;
padding-right: 42px
}

.hbspt-form .hs_contact_type>label>span:first-child:before,.hbspt-form .hs_textarea>label>span:first-child:before {
content: '';
background-color: #17A2B8;
display: inline-block;
border-radius: 0.25rem;
width: 34px;
height: 18px;
margin-left: 8px;
position: absolute;
right: 0
}

.hbspt-form .hs_contact_type>label>span:first-child:after,.hbspt-form .hs_textarea>label>span:first-child:after {
content: '必須';
color: #fff;
position: absolute;
right: 5px;
top: 4px;
font-size: 11px
}

.hbspt-form .hs-error-msgs {
font-size: 14px;
font-weight: bold;
color: #ff0d0d;
margin-left: 10px
}

.hbspt-form .hs-error-msgs .hs-main-font-element {
display: block
}

.hbspt-form .hs-richtext {
font-size: 12px;
line-height: 1.5
}

.hbspt-form .hs-richtext p {
margin-bottom: 0
}

.hbspt-form .hs-richtext p a {
    color: #008DD0;
    text-decoration: underline;
}

.hbspt-form .hs-submit {
margin-top: 20px;
text-align: center
}

.hbspt-form .hs-submit .actions {
position: relative
}

.hbspt-form .hs-submit .hs-button {
width: 250px;
padding: 12px;
border-radius: 4px;
background-color: #fc8a22;
border: none;
color: #fff;
font-weight: bold;
box-shadow: 0 4px 0 0 #b65802;
font-size: 20px;
transition: .2s
}

.hbspt-form .hs-submit .hs-button:hover {
background-color: #f47603
}

@media (max-width: 767.98px) {
.hbspt-form .multi-container>* {
margin-bottom:15px
}
}

@media (min-width: 768px) {
.hbspt-form .multi-container {
display:flex;
flex-wrap: wrap;
margin: -7.5px -15px
}

.hbspt-form .multi-container>* {
width: 50%;
padding: 7.5px 15px
}
}

.hbspt-form .hs-form-radio-display {
margin-bottom: 0;
width: 100%
}

.hbspt-form .hs-form-radio-display>input {
display: none
}

.hbspt-form .hs-form-radio-display>span {
color: #004986;
border: solid 1px #004986;
border-radius: 4px;
font-size: 12px;
padding: 6px 12px;
display: block;
text-align: center;
cursor: pointer;
transition: .2s
}

.hbspt-form .hs-form-radio-display>input:checked+span,.hbspt-form .hs-form-radio-display>span:hover {
background-color: #004986;
color: #fff
}

.hbspt-form .legal-consent-container {
margin-top: 24px;
text-align: center
}

.hbspt-form .legal-consent-container .hs-error-msgs {
text-align: center
}

.hbspt-form .hs-form-booleancheckbox-display {
display: flex;
justify-content: center;
align-items: center;
line-height: 1.2
}

.hbspt-form .hs-form-booleancheckbox-display>input {
margin-right: 4px
}

.hbspt-form .hs-form-booleancheckbox-display>span p {
display: inline;
margin: 0
}

.hbspt-form .hs-form-booleancheckbox-display>span p a {
color: #0000ee;
text-decoration: none;
margin: 0 6px
}