/* 2026-10 書き換えで追加した部品。色・ボタンは既存テーマ(#0DA187 / #333 / #F5E23C)に合わせる */
:root{--sx-yellow:#F8DF08;--sx-yellow-bg:#FFFBD6;--sx-core-od:#E0B400;--sx-all:#5E3AA8;--sx-all-bg:#F1ECFA;--sx-all-bd:#C7B6E8}
.sx-wrap{margin:0 auto;width:1200px}
@media not all and (min-width:1248px){.sx-wrap{padding-inline:24px;width:100%}}
.sx-section{margin-bottom:120px}
@media not all and (min-width:768px){.sx-section{margin-bottom:72px}}
.sx-h2{margin-bottom:32px}
.sx-h2 .__en{display:block;color:#0DA187;font-size:var(--font-size-16)}
.sx-h2 .__jp{display:block;font-size:var(--font-size-36);font-weight:bold;line-height:1.4}
@media not all and (min-width:768px){.sx-h2 .__jp{font-size:var(--font-size-24)}}
.sx-h3{margin:40px 0 12px;font-size:var(--font-size-21);font-weight:bold;line-height:1.5;padding-left:14px;border-left:6px solid var(--sx-core-od)}
.sx-lead{max-width:860px;font-size:var(--font-size-18);line-height:1.9}
.sx-text{max-width:860px;line-height:1.9}
.sx-text p+p{margin-top:1em}
.sx-list{max-width:860px;margin:12px 0;padding-left:0}
.sx-list li{position:relative;padding:6px 0 6px 22px;line-height:1.8}
.sx-list li::before{content:"";position:absolute;left:4px;top:1.05em;width:8px;height:8px;border-radius:50%;background:#0DA187}
.sx-note{max-width:860px;margin-top:16px;padding:14px 18px;background:#F6F6F6;border-radius:8px;font-size:var(--font-size-14);line-height:1.8}
.sx-small{font-size:var(--font-size-13);color:#555;line-height:1.7}
.sx-text a,.sx-note a,.sx-list a,.sx-faq a,.sx-small a{color:#0A7C68;text-decoration:underline}
/* hero */
.sx-hero{background:#F6F6F6;padding:72px 0 88px;margin-bottom:96px}
@media not all and (min-width:768px){.sx-hero{padding:40px 0 48px;margin-bottom:64px}}
.sx-hero__title{font-size:var(--font-size-40);font-weight:bold;line-height:1.5;max-width:900px}
@media not all and (min-width:768px){.sx-hero__title{font-size:var(--font-size-26)}}
.sx-hero__sub{margin-top:24px;max-width:760px;font-size:var(--font-size-18);line-height:1.9}
.sx-hero__btns{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:36px}
.sx-hero__btns .more-button a{margin-inline:0}
.sx-hero__free{margin-top:14px}
.sx-btn-sub a{display:inline-block;padding:20px 28px;font-weight:bold;line-height:1;border:2px solid #333;border-radius:8px;background:#fff}
.sx-btn-sub a:hover{background:#333;color:#fff;text-decoration:none}
@media not all and (min-width:768px){.sx-btn-sub a{padding:14px 20px}}
/* cards */
.sx-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media not all and (min-width:900px){.sx-cards{grid-template-columns:1fr}}
.sx-cards--auto{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;align-items:stretch}
@media (min-width:1000px){.sx-cards--auto{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.sx-cards--auto .sx-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px 20px}
.sx-cards--auto .sx-card__tag{max-width:100%;line-height:1.5}
.sx-cards--auto .sx-card h3{font-size:1.25em}
.sx-cards--auto .sx-card p{line-height:1.75;font-size:var(--font-size-15)}
.sx-cards--auto .sx-card__more{margin-top:auto!important;padding-top:10px}
.sx-card{padding:28px;background:#F6F6F6;border-radius:12px;border-top:6px solid #0DA187}
.sx-card--core{border-top-color:var(--sx-core-od);background:var(--sx-yellow-bg)}
.sx-card h3{font-size:var(--font-size-21);font-weight:bold;margin-bottom:6px}
.sx-card__tag{display:inline-block;margin-bottom:12px;padding:3px 10px;font-size:var(--font-size-12);font-weight:bold;background:#fff;border-radius:50vh}
.sx-card p{line-height:1.8}
.sx-card ul{margin:10px 0 14px}
.sx-card li{position:relative;padding:3px 0 3px 18px;line-height:1.7;font-size:var(--font-size-15)}
.sx-card li::before{content:"";position:absolute;left:2px;top:.95em;width:6px;height:6px;border-radius:50%;background:#0DA187}
.sx-card__more a{font-weight:bold;color:#0A7C68;text-decoration:underline}
/* problems */
.sx-problems{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1200px}
@media not all and (min-width:900px){.sx-problems{grid-template-columns:1fr}}
.sx-problems li{padding:18px 20px 18px 22px;background:#fff;border:2px solid #E6E6E6;border-radius:10px;line-height:1.8}
/* diagram */
.sx-flowfig{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 8px}
@media not all and (min-width:900px){.sx-flowfig{grid-template-columns:1fr;gap:0}}
.sx-flowfig__step{position:relative;padding:20px 18px;background:#F6F6F6;border-radius:10px;margin-right:28px}
.sx-flowfig__step:last-child{margin-right:0}
.sx-flowfig__step::after{content:"";position:absolute;right:-22px;top:50%;width:14px;height:14px;border-top:3px solid #0DA187;border-right:3px solid #0DA187;transform:translateY(-50%) rotate(45deg)}
.sx-flowfig__step:last-child::after{display:none}
@media not all and (min-width:900px){
 .sx-flowfig__step{margin:0 0 28px}
 .sx-flowfig__step::after{right:auto;left:50%;top:auto;bottom:-22px;transform:translateX(-50%) rotate(135deg)}
 .sx-flowfig__step:last-child{margin-bottom:0}
}
.sx-flowfig__tag{display:inline-block;margin-bottom:8px;padding:2px 10px;font-size:var(--font-size-12);font-weight:bold;color:#fff;background:#0DA187;border-radius:50vh}
.sx-flowfig__tag--core{background:var(--sx-yellow);color:#222}
.sx-flowfig h3{font-size:var(--font-size-18);font-weight:bold;margin-bottom:6px}
.sx-flowfig p{font-size:var(--font-size-14);line-height:1.7}
.sx-steps{display:flex;flex-wrap:wrap;gap:8px;max-width:900px;margin:18px 0 0;font-size:var(--font-size-14)}
.sx-steps li{padding:8px 14px;background:#fff;border:2px solid #0DA187;border-radius:50vh;font-weight:bold}
/* figure */
.sx-figure{margin:32px 0 0;max-width:1000px}
.sx-figure img{display:block;width:100%;height:auto;border:1px solid #E6E6E6;border-radius:8px}
.sx-figure figcaption{margin-top:8px;font-size:var(--font-size-13);color:#555;line-height:1.7}
/* mini steps (flow summary) */
.sx-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
@media not all and (min-width:900px){.sx-mini{grid-template-columns:1fr 1fr}}
@media not all and (min-width:568px){.sx-mini{grid-template-columns:1fr}}
.sx-mini li{counter-increment:s;padding:22px 18px;background:#F6F6F6;border-radius:10px;line-height:1.7}
.sx-mini li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:10px;font-weight:bold;background:#F5E23C;border-radius:50%}
.sx-mini strong{display:block;margin-bottom:4px;font-size:var(--font-size-18)}
/* table */
.sx-tablewrap{overflow-x:auto;max-width:100%;margin:16px 0}
.sx-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--font-size-15)}
.sx-table th,.sx-table td{padding:12px 14px;border:1px solid #D9D9D9;text-align:right;line-height:1.5;white-space:nowrap}
.sx-table thead th{background:#333;color:#fff;text-align:center}
.sx-table tbody th{background:#F6F6F6;text-align:left}
.sx-table td.sx-na{text-align:center;color:#777}
.sx-table td.sx-free{text-align:center;background:#FFFBE0;font-weight:bold;white-space:normal}
.sx-table tr.sx-quote td{text-align:center}
.sx-table caption{caption-side:bottom;padding-top:8px;text-align:left;font-size:var(--font-size-13);color:#555}
/* faq */
.sx-faq{max-width:900px}
.sx-faq details{border-bottom:1px solid #D9D9D9}
.sx-faq summary{position:relative;list-style:none;cursor:pointer;padding:20px 40px 20px 44px;font-weight:bold;line-height:1.6}
.sx-faq summary::-webkit-details-marker{display:none}
.sx-faq summary::before{content:"Q";position:absolute;left:4px;top:18px;width:28px;height:28px;line-height:28px;text-align:center;background:#F5E23C;border-radius:50%;font-size:var(--font-size-14)}
.sx-faq summary::after{content:"";position:absolute;right:10px;top:26px;width:10px;height:10px;border-right:3px solid #333;border-bottom:3px solid #333;transform:rotate(45deg);transition:transform .2s}
.sx-faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.sx-faq__a{padding:0 12px 22px 44px;line-height:1.9}
.sx-faq__a p+p{margin-top:.8em}
/* cta band */
.sx-more{margin-top:24px}
.sx-more a{font-weight:bold;color:#0A7C68;text-decoration:underline}
/* redirect page */
.sx-redirect{max-width:640px;margin:120px auto;padding:0 24px;line-height:1.9}
.sx-redirect a{color:#0A7C68;text-decoration:underline;font-weight:bold}
/* contact */
.sx-contact-free{margin:0 0 24px;padding:16px 18px;background:#FFFBE0;border:2px solid #F5E23C;border-radius:8px}
/* 下部の問い合わせ帯: 「無料で試す」を主、問い合わせ・料金を副の導線にした1つの帯 */
.cta__bg .cta__section a{padding-bottom:32px}
.sx-cta-sub{display:flex;flex-wrap:wrap;gap:8px 32px;margin:0 auto;padding:0 0 56px;max-width:1200px;font-weight:bold}
.sx-cta-sub a{text-decoration:underline;text-underline-offset:4px}
@media not all and (min-width:1248px){.sx-cta-sub{padding-inline:24px}}
@media not all and (min-width:568px){.cta__bg .cta__section a{padding-bottom:20px}.sx-cta-sub{padding-bottom:36px}}

/* トップ(コンパクト版) */
.sx-hero--compact{padding:56px 0 56px;margin-bottom:56px}
@media not all and (min-width:768px){.sx-hero--compact{padding:32px 0 36px;margin-bottom:40px}}
.sx-hero--compact .sx-hero__sub{margin-top:16px}
.sx-hero--compact .sx-hero__btns{margin-top:24px}
.sx-section--tight{margin-bottom:64px}
@media not all and (min-width:768px){.sx-section--tight{margin-bottom:44px}}
.sx-section--tight .sx-h2{margin-bottom:24px}
.sx-simple{margin-top:36px;max-width:760px}
.sx-simple__list{display:flex;align-items:center;justify-content:space-between}
.sx-simple__list li{display:flex;align-items:center}
.sx-simple__dot{display:flex;align-items:center;justify-content:center;width:112px;height:112px;border-radius:50%;background:#fff;border:4px solid #0DA187;font-size:var(--font-size-18);font-weight:bold;text-align:center;line-height:1.4}
.sx-simple__arrow{flex:1 1 auto;min-width:20px;height:4px;margin:0 6px;background:#0DA187;position:relative;border-radius:2px}
.sx-simple__arrow::after{content:"";position:absolute;right:-1px;top:50%;width:12px;height:12px;border-top:4px solid #0DA187;border-right:4px solid #0DA187;transform:translateY(-50%) rotate(45deg)}
.sx-simple__cap{margin-top:14px;font-size:var(--font-size-14);color:#555}
@media not all and (min-width:568px){
 .sx-simple__dot{width:68px;height:68px;border-width:3px;font-size:var(--font-size-12)}
 .sx-simple__arrow{margin:0 3px;min-width:8px}
 .sx-simple__arrow::after{width:8px;height:8px;border-width:3px}
}
.sx-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media not all and (min-width:900px){.sx-feat{grid-template-columns:1fr}}
.sx-feat__card{padding:24px;background:#F6F6F6;border-radius:12px}
.sx-feat__icon{display:block;margin-bottom:10px}
.sx-feat__card h3{font-size:var(--font-size-21);font-weight:bold;margin-bottom:6px}
.sx-feat__card p{line-height:1.8}
.sx-feat__more{margin-top:10px;font-size:var(--font-size-15)}
.sx-feat__more a{font-weight:bold;color:#0A7C68;text-decoration:underline}
.sx-pricebox{padding:32px;border:2px solid #F5E23C;background:#FFFBE0;border-radius:12px}
@media not all and (min-width:768px){.sx-pricebox{padding:22px 18px}}
.sx-pricebox__title{font-size:var(--font-size-16);font-weight:bold;color:#0A7C68;margin-bottom:6px}
.sx-pricebox__main{font-size:var(--font-size-26);font-weight:bold;line-height:1.5}
.sx-pricebox__free{margin-top:6px;font-size:var(--font-size-18);font-weight:bold}
.sx-pricebox .sx-small{margin-top:12px;max-width:860px}
@media not all and (min-width:768px){.sx-pricebox__main{font-size:var(--font-size-21)}}
.sx-minilinks{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:20px;font-size:var(--font-size-14)}
.sx-minilinks a{color:#0A7C68;text-decoration:underline}

/* top B2: できること(基本機能=黄 / オプション=緑 / 全体=紫)・実画面・追加CTA */
.sx-scope__lead{margin:-8px 0 24px;font-size:var(--font-size-14);color:#555}
.sx-group+.sx-row2,.sx-row2{margin-top:28px}
.sx-group__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin-bottom:12px;font-size:var(--font-size-18);font-weight:bold;line-height:1.5}
.sx-group__title::before{content:"";align-self:center;flex:none;width:6px;height:22px;margin-right:6px;border-radius:3px;background:var(--sx-core-od)}
.sx-group__title span{font-size:var(--font-size-14);font-weight:normal;color:#555}
/* gen:opt-gradient:start */
.sx-group--opt .sx-group__title::before{background:linear-gradient(#b45309 0 33%,#2e7d32 33% 67%,#1565c0 67% 100%)}
/* gen:opt-gradient:end */
.sx-group--all .sx-group__title::before{background:var(--sx-all)}
.sx-tiles{display:grid;gap:16px}
.sx-tiles--4{grid-template-columns:repeat(4,1fr)}
.sx-tiles--3{grid-template-columns:repeat(3,1fr)}
.sx-tiles--1{grid-template-columns:1fr}
.sx-row2{display:grid;grid-template-columns:calc(75% - 4px) 1fr;gap:0 16px;align-items:start}
.sx-row2{margin-top:28px}
@media not all and (min-width:1248px){
 .sx-tiles--4{grid-template-columns:repeat(2,1fr)}
 .sx-tiles--3{grid-template-columns:repeat(2,1fr)}
 .sx-row2{grid-template-columns:1fr}
 .sx-row2 .sx-group--all{margin-top:28px}
 .sx-tiles--1{grid-template-columns:repeat(2,1fr)}
}
@media not all and (min-width:600px){.sx-tiles--4,.sx-tiles--3,.sx-tiles--1{grid-template-columns:1fr;gap:12px}}
.sx-tile{padding:16px 16px 16px;background:#F6F6F6;border-radius:12px;min-width:0;border-top:6px solid #999}
.sx-tile--core{background:var(--ot,#FFFBD6);border:2px solid var(--od,#E0B400);border-top:6px solid var(--od,#E0B400)}
.sx-tile--core .sx-tile__icon{color:var(--ox,#6B5300)}
.sx-tile--core .sx-tile__items a{border-color:var(--ob,#EBD04A)}
.sx-tile--opt{background:var(--ot,#fff);border:2px solid var(--oc,#0DA187);border-top:6px solid var(--oc,#0DA187)}
.sx-tile--all{background:var(--sx-all-bg);border:2px solid var(--sx-all);border-top:6px solid var(--sx-all)}
.sx-tile--all .sx-tile__icon{color:var(--sx-all)}
.sx-tile--all .sx-tile__items a{border-color:var(--sx-all-bd)}
.sx-tile__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:12px}
.sx-tile__icon{flex:none;color:#333}
.sx-tile--opt .sx-tile__icon{color:var(--oc,#0A7C68)}
.sx-tile__head h4{display:flex;align-items:center;gap:6px;font-size:var(--font-size-18);font-weight:bold;line-height:1.3}
.sx-tile__no{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#333;color:#fff;font-size:var(--font-size-13);font-weight:bold;line-height:1}
.sx-tile--core .sx-tile__no{background:var(--oc,#F8DF08);color:var(--on,#222)}
.sx-tile--opt .sx-tile__no{background:var(--oc,#0A7C68)}
.sx-tile--all .sx-tile__no{background:var(--sx-all)}
.sx-tile__tag{margin-left:auto;flex:none;padding:1px 8px;font-size:var(--font-size-13);font-weight:bold;line-height:1.6;border-radius:50vh;color:#fff;background:#333}
.sx-tile__tag--core{background:var(--oc,#F8DF08);color:var(--on,#222)}
.sx-tile__tag--opt{background:var(--oc,#0A7C68);color:#fff}
.sx-tile__tag--all{background:var(--sx-all);color:#fff}
.sx-tile__items{display:flex;flex-wrap:wrap;gap:6px}
.sx-tile__items li{margin:0;max-width:100%}
.sx-tile__items a{display:inline-block;max-width:100%;padding:3px 10px;font-size:var(--font-size-14);line-height:1.6;background:#fff;border:1px solid #D0D0D0;border-radius:50vh;color:#222;text-decoration:none;overflow-wrap:anywhere}
.sx-tile--opt .sx-tile__items a{border-color:var(--ob,#9FD6CB)}
.sx-tile__items a:hover{border-color:var(--oc,#0A7C68);color:var(--oc,#0A7C68)}
/* 実画面 */
.sx-figure--scope{margin:40px auto 0;max-width:1040px}
.sx-shot{position:relative;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.14);overflow:hidden;background:#fff}
.sx-figure--scope .sx-shot img{border:0;border-radius:0}
.sx-figure--scope figcaption{margin-top:10px;text-align:center}
/* 追加CTA */

/* B2 高さ調整 */
.sx-hero--compact{padding:44px 0 44px;margin-bottom:44px}
.sx-hero--compact .sx-hero__btns{margin-top:20px}
.sx-simple{margin-top:28px}
.sx-simple__dot{width:100px;height:100px}
@media not all and (min-width:568px){.sx-simple__dot{width:68px;height:68px}}
@media not all and (min-width:768px){.sx-hero--compact{padding:28px 0 32px;margin-bottom:32px}}
.sx-section--tight{margin-bottom:48px}
@media not all and (min-width:768px){.sx-section--tight{margin-bottom:36px}}
.sx-row2,.sx-group+.sx-row2{margin-top:20px}
.sx-tile{padding:14px 14px 14px}
.sx-tile__head{margin-bottom:10px}
.sx-tile__items{gap:5px}
.sx-tile__items a{font-size:14px;padding:2px 10px}
.sx-figure--scope{margin-top:32px}
.sx-pricebox{padding:24px 28px}
@media not all and (min-width:1248px){.sx-row2 .sx-group--all{margin-top:20px}}
@media not all and (min-width:768px){
 .sx-figure--scope figcaption{display:none}
 .sx-tile{padding:12px}
 .sx-group__title{margin-bottom:8px}
 .sx-row2,.sx-group+.sx-row2,.sx-row2 .sx-group--all{margin-top:16px}
}
@media (min-width:1248px){.sx-row2 .sx-group--all{margin-top:0}}
/* スタッフ専用ページの画面(スマホ縦長3枚。控えめに) */
#staff-web .sx-small{margin-top:16px}
@media not all and (min-width:820px){
}
/* スタッフ用ページ(スマホ)の画面を機能ページに載せる図。2枚を横に並べ、高さを抑える */
.sx-phonefig{margin:20px 0 0;max-width:460px}
.sx-phonefig__imgs{display:flex;gap:16px;align-items:flex-start}
.sx-phonefig__imgs picture{flex:0 1 200px;min-width:0;display:block}
.sx-phonefig img{display:block;width:100%;height:auto;border:1px solid #E6E6E6;border-radius:12px}
.sx-phonefig--one{max-width:216px}
.sx-phonefig figcaption{margin-top:8px;font-size:var(--font-size-13);color:#555;line-height:1.7}
@media not all and (min-width:520px){.sx-phonefig__imgs{gap:10px}.sx-phonefig__imgs picture{flex-basis:calc(50% - 5px)}.sx-phonefig--one{max-width:200px}}

/* オプションの色分け(運営管理画面 hakengym-env の .option-badge-* と同じ色相: 請求=琥珀 / 給与=緑 / 労務=青)。基本機能は無彩色 */
/* gen:opt-vars:start */
.sx-opt--billing{--oc:#b45309;--ob:#E3B98F;--ot:#FDF1E3}
.sx-opt--payroll{--oc:#2e7d32;--ob:#9CCB9F;--ot:#E8F4E9}
.sx-opt--labor{--oc:#1565c0;--ob:#9DBDE6;--ot:#E6EFFA}
/* gen:opt-vars:end */
/* gen:opt-card:start */
.sx-card.sx-opt--billing,.sx-card.sx-opt--payroll,.sx-card.sx-opt--labor{background:var(--ot);border-top-color:var(--oc)}
/* gen:opt-card:end */
.sx-card[class*="sx-opt--"] .sx-card__tag{background:var(--oc);color:var(--on,#fff)}
.sx-card[class*="sx-opt--"] li::before{background:var(--oc)}
.sx-card[class*="sx-opt--"] .sx-card__more a{color:var(--oc)}
/* gen:opt-core:start */
.sx-opt--core{--oc:#F8DF08;--ob:#EBD04A;--ot:#FFFBD6;--od:#E0B400;--ox:#6B5300;--on:#222222}
.sx-card--core .sx-card__tag{background:var(--oc);color:var(--on)}
/* gen:opt-core:end */
/* gen:opt-thead:start */
.sx-table thead th.sx-opt--billing,.sx-table thead th.sx-opt--payroll,.sx-table thead th.sx-opt--labor{background:var(--oc);color:#fff}
/* gen:opt-thead:end */
/* gen:opt-td:start */
.sx-table td.sx-opt--billing,.sx-table td.sx-opt--payroll,.sx-table td.sx-opt--labor{background:var(--ot)}
/* gen:opt-td:end */
/* 機能ページの見出し付近 */
.sx-ph .page-title{padding-left:16px;border-left:10px solid var(--oc,#F8DF08)}
.sx-ph .page-title .__en{color:var(--ox,var(--oc,#6B5300))}
.sx-svctag{display:inline-block;margin:14px 0 0;padding:3px 14px;font-size:var(--font-size-14);font-weight:bold;line-height:1.6;border-radius:50vh;color:var(--on,#fff);background:var(--oc,#F8DF08)}
/* gen:opt-breadcrumb:start */
.sx-ph.sx-opt--billing .breadcrumb li:last-child,.sx-ph.sx-opt--payroll .breadcrumb li:last-child,.sx-ph.sx-opt--labor .breadcrumb li:last-child{padding:1px 10px;border-radius:50vh;background:var(--ot);border:1px solid var(--oc);font-weight:bold}
/* gen:opt-breadcrumb:end */
/* gen:opt-h3:start */
.sx-body.sx-opt--billing .sx-h3,.sx-body.sx-opt--payroll .sx-h3,.sx-body.sx-opt--labor .sx-h3{border-left-color:var(--oc)}
/* gen:opt-h3:end */
/* gen:opt-note:start */
.sx-body.sx-opt--billing .sx-note,.sx-body.sx-opt--payroll .sx-note,.sx-body.sx-opt--labor .sx-note{background:var(--ot);border-left:6px solid var(--oc)}
/* gen:opt-note:end */
/* gen:opt-notelink:start */
.sx-body.sx-opt--billing .sx-note a,.sx-body.sx-opt--payroll .sx-note a,.sx-body.sx-opt--labor .sx-note a{color:var(--oc)}
/* gen:opt-notelink:end */
/* 基本機能(ロゴの黄色)。変数(.sx-opt--core)は上の gen:opt-core ブロックで生成。ここはオプションと同じ作法(見出し・左線・バッジ)の手書き規則 */
.sx-ph.sx-opt--core .breadcrumb li:last-child{padding:1px 10px;border-radius:50vh;background:var(--ot);border:1px solid var(--od);font-weight:bold}
.sx-body.sx-opt--core .sx-h3{border-left-color:var(--od)}
.sx-body.sx-opt--core .sx-note{background:var(--ot);border-left:6px solid var(--od)}
.sx-body.sx-opt--core .sx-note a{color:var(--ox)}
.sx-table tbody th.sx-opt--core{background:var(--ot);border-left:6px solid var(--od)}
.sx-hero__link a{font-weight:bold;color:#0A7C68;text-decoration:underline}

/* 全体像→詳細の構成(導入の流れ・FAQ・料金・機能ページ共通) */
.sx-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-top:20px;max-width:1200px}
.sx-summary li{padding:14px 16px;background:var(--ot,var(--sx-yellow-bg));border-left:6px solid var(--od,var(--oc,var(--sx-yellow)));border-radius:8px;line-height:1.7;font-size:var(--font-size-15)}
.sx-summary__icon{display:block;margin-bottom:6px;color:var(--ox,var(--oc,#6B5300))}
.sx-summary strong{display:block;font-size:var(--font-size-16)}
.sx-summary a{display:block;color:inherit;text-decoration:none}
.sx-summary a strong{text-decoration:underline;text-underline-offset:3px}
.sx-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sx-jump a{display:inline-block;padding:3px 14px;font-size:var(--font-size-14);line-height:1.7;color:#222;text-decoration:none;background:#fff;border:1px solid var(--ob,#BDBDBD);border-radius:50vh}
.sx-jump a:hover{border-color:var(--oc,#0A7C68);color:var(--oc,#0A7C68)}
.sx-mini--auto{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.sx-mini--auto a{color:inherit;text-decoration:none}
.sx-mini--auto strong{font-size:var(--font-size-16)}
.sx-body .sx-h2 .__en,.sx-section .sx-h2 .__en{color:var(--oc,#0DA187)}
.sx-section--tight2{margin-bottom:56px}
@media not all and (min-width:768px){.sx-section--tight2{margin-bottom:40px}}
.sx-faqgroup+.sx-faqgroup{margin-top:48px}
.sx-faqgroup .sx-h3{margin-top:0}
/* 料金表: 行=プラン項目(基本機能・各オプション)、列=契約プラン(帯)。オプションが増えたら行を足す */
.sx-table--matrix{min-width:880px}
.sx-table--matrix th,.sx-table--matrix td{text-align:right}
.sx-table--matrix thead th{text-align:center}
.sx-table--matrix tbody th,.sx-table--matrix thead th:first-child{position:sticky;left:0;z-index:1;text-align:left;min-width:150px}
.sx-table--matrix thead th:first-child{background:#333}
.sx-table--matrix tbody th{box-shadow:inset -1px 0 0 #D9D9D9}
/* gen:opt-matrix:start */
.sx-table--matrix tbody th.sx-opt--billing,.sx-table--matrix tbody th.sx-opt--payroll,.sx-table--matrix tbody th.sx-opt--labor{background:var(--ot);border-left:6px solid var(--oc)}
/* gen:opt-matrix:end */
.sx-table--matrix tbody th small{display:block;font-weight:normal;font-size:var(--font-size-12);color:#555}
.sx-table--matrix td.sx-na{text-align:center}
.sx-table--matrix td.sx-free{white-space:normal;text-align:center;min-width:110px}
.sx-table--matrix td.sx-quote{text-align:center;background:#F6F6F6;white-space:normal;min-width:110px}
.sx-table--matrix tr.sx-sum th,.sx-table--matrix tr.sx-sum td{border-top:3px double #777;font-weight:bold}
.sx-scrollhint{display:none;margin-top:6px}
@media not all and (min-width:1000px){.sx-scrollhint{display:block}}
.sx-table--rules{min-width:0}
.sx-table--rules th,.sx-table--rules td{white-space:normal;text-align:left}
.sx-table--rules tbody th{white-space:nowrap}
/* gen:opt-rules:start */
.sx-table--rules tbody th.sx-opt--billing,.sx-table--rules tbody th.sx-opt--payroll,.sx-table--rules tbody th.sx-opt--labor{background:var(--ot);border-left:6px solid var(--oc)}
/* gen:opt-rules:end */

/* 料金表(スタッフ人数ごと): 行=人数、列=基本機能+オプション(オプションが増えると列が増える)。
   列が6を超える場合は生成側が .sx-table--cards-all を付け、PCでも人数ごとのカード表示にする。
   768px未満は常にカード表示(横スクロールに頼らない)。 */
.sx-table--price{min-width:0}
.sx-table--price th,.sx-table--price td{white-space:normal;text-align:center;font-size:var(--font-size-16)}
.sx-table--price thead th{line-height:1.4}
.sx-table--price thead th small{display:block;font-weight:normal;font-size:var(--font-size-12);opacity:.9}
.sx-table--price thead th.sx-core{background:var(--sx-yellow);color:#222}
.sx-table--price thead th.sx-th-people{background:#333;vertical-align:middle}
.sx-table--price thead th.sx-grp-core{background:var(--sx-yellow);color:#222;font-size:var(--font-size-18);border-bottom:1px solid #D9D9D9}
.sx-table--price thead th.sx-grp-opt{background:#fff;color:#222;font-size:var(--font-size-18);border:3px solid #333;border-bottom:1px solid #D9D9D9}
.sx-table--price thead th.sx-grp-opt::before{content:"+ ";font-weight:bold}
.sx-table--price thead th.sx-grp-opt small,.sx-table--price thead th.sx-grp-core small{opacity:1;color:inherit}
.sx-table--price .sx-optstart{border-left:3px solid #333}
.sx-table--price .sx-optend{border-right:3px solid #333}
.sx-table--price tbody tr:last-child .sx-optstart,.sx-table--price tbody tr:last-child .sx-optend{border-bottom-color:#D9D9D9}
.sx-table--price .sx-grp{display:none}
.sx-table--price tbody th{text-align:left;background:#F6F6F6;font-size:var(--font-size-18);white-space:nowrap}
.sx-table--price td.sx-core{font-weight:bold}
.sx-table--price td.sx-na{color:#555;background:#FAFAFA}
.sx-table--price td.sx-free{background:#FFFBE0;font-weight:bold}
.sx-table--price td.sx-quote{background:#F6F6F6;font-weight:bold}
.sx-examples{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.sx-examples li{padding:10px 14px;background:var(--sx-yellow-bg);border-left:6px solid var(--sx-yellow);border-radius:6px;line-height:1.6}
.sx-examples-h{margin-top:20px}
@media not all and (min-width:768px){
 .sx-table--price thead{display:none}
 .sx-table--price,.sx-table--price tbody,.sx-table--price tr,.sx-table--price th,.sx-table--price td{display:block;width:100%}
 .sx-table--price tr{margin-bottom:14px;border:1px solid #D9D9D9;border-radius:8px;overflow:hidden}
 .sx-table--price tbody th{border:0;padding:10px 14px;background:#333;color:#fff}
 .sx-table--price td{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;border:0;border-top:1px solid #E5E5E5;padding:10px 14px}
 .sx-table--price td::before{content:attr(data-label);font-weight:bold;text-align:left;font-size:var(--font-size-14)}
 /* gen:opt-pricebefore:start */
 .sx-table--price td.sx-opt--billing::before,.sx-table--price td.sx-opt--payroll::before,.sx-table--price td.sx-opt--labor::before{color:var(--oc)}
 /* gen:opt-pricebefore:end */
 .sx-table--price td.sx-na{justify-content:center;text-align:center}
 .sx-table--price td.sx-na::before{display:none}
 .sx-table--price td.sx-quote{justify-content:center}
 .sx-table--price caption{display:block;margin-top:4px}
 .sx-table--price td{flex-wrap:wrap}
 .sx-table--price .sx-grp{display:block;order:-1;flex:0 0 calc(100% + 28px);margin:-10px -14px 4px;padding:5px 14px;text-align:left;font-size:var(--font-size-13);font-weight:bold;background:var(--sx-yellow);color:#222}
 .sx-table--price td.sx-optstart .sx-grp{background:#fff;color:#222;border-top:3px solid #333;border-bottom:1px solid #D9D9D9}
 .sx-table--price td.sx-optstart .sx-grp::before{content:"+ "}
 .sx-table--price td[class*="sx-opt--"]{border-left:6px solid var(--oc);border-right:0}
 .sx-table--price td.sx-optstart{border-left:0;border-top:0}
 .sx-table--price td.sx-optstart[class*="sx-opt--"]{border-left:6px solid var(--oc)}
 .sx-table--price td.sx-optend{border-right:0}
}
.sx-table--cards-all thead{display:none}
.sx-table--cards-all,.sx-table--cards-all tbody,.sx-table--cards-all tr,.sx-table--cards-all th,.sx-table--cards-all td{display:block;width:100%}
.sx-table--cards-all td{display:flex;justify-content:space-between;text-align:right}
.sx-table--cards-all td::before{content:attr(data-label);font-weight:bold}
.sx-table--cards-all td{flex-wrap:wrap}
.sx-table--cards-all .sx-grp{display:block;order:-1;flex:0 0 100%;text-align:left;font-weight:bold}

/* お役立ち記事(/column/)。生成: scripts/gen_column.rb */
.sx-h4{margin:28px 0 8px;font-size:var(--font-size-18);font-weight:bold;line-height:1.5}
.sx-list--num{counter-reset:sxn}
.sx-list--num li{counter-increment:sxn;padding-left:34px}
.sx-list--num li::before{content:counter(sxn);left:0;top:.5em;width:22px;height:22px;border-radius:50%;color:#fff;font-size:13px;font-weight:bold;line-height:22px;text-align:center}
.sx-article .sx-text{margin-top:12px}
.sx-article-date{margin-bottom:24px;color:#555;font-size:var(--font-size-14)}
.sx-article-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;max-width:860px;margin-top:56px;padding-top:20px;border-top:1px solid #ddd;font-weight:bold}
.sx-article-nav a{color:#0A7C68;text-decoration:underline}
.sx-column-desc{margin-top:6px;line-height:1.8;font-size:var(--font-size-14);color:#555}