/* ==========================================================================
   サービス・料金 — トップページ（css/home.css）の「相談ファイル」テーマを継承
   コンセプト：机の上の料金表ファイル。索引カードで全体を見渡し、必要な紙だけを読む。
   このファイルには料金ページ固有の部品だけを書く
   ========================================================================== */

.pr-nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.pr-nav a { text-decoration: none; font-family: var(--serif); font-size: .88rem; font-weight: 600; }
.pr-nav__link, .pr-nav__tel { display: none !important; }
.pr-nav__link:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.pr-nav__tel { align-items: center; gap: 6px; font-family: var(--mono) !important; }
.pr-nav__tel .icon { width: 14px; height: 14px; }
.pr-nav .btn { min-height: 42px; padding: .4rem .9rem; font-family: var(--sans); font-size: .84rem; }
@media (min-width: 1000px) { .pr-nav__link, .pr-nav__tel { display: inline-flex !important; } }

.pr-note { margin-top: 12px; font-size: .8rem; color: var(--pencil); line-height: 1.8; }
.pr-notes { margin-top: 14px; display: grid; gap: 2px; }
.pr-notes li { font-size: .8rem; color: var(--pencil); line-height: 1.8; }
.list-title { font-family: var(--serif); font-weight: 900; font-size: .98rem; }
.checks-list { margin-top: 8px; display: grid; gap: 2px; }
.checks-list li { position: relative; padding: 5px 0 5px 1.6em; font-size: .9rem; line-height: 1.7; border-bottom: 1px dashed rgba(56, 75, 93, .18); }
.checks-list li::before { content: "✓"; position: absolute; left: 0; top: 5px; color: var(--red); font-family: var(--serif); font-weight: 900; transform: rotate(-8deg); }
@media (min-width: 700px) { .checks-list--two { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* ==========================================================================
   HERO：説明の用紙 ＋ 料金早見表（索引カード）
   ========================================================================== */
.pr-hero .pr-hero__grid { display: grid; gap: 40px; align-items: center; }
.pr-title { white-space: nowrap; margin-top: 22px; font-family: var(--serif); font-weight: 900; font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.8rem); line-height: 1.3; letter-spacing: .05em; }
.pr-lead { margin-top: 20px; font-family: var(--serif); font-weight: 700; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.9; }
.pr-support { margin-top: 12px; font-size: .94rem; color: var(--ink-soft); line-height: var(--pitch); }
.pr-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pr-tags li { padding: 5px 12px 5px 10px; font-size: .84rem; font-weight: 700; background: var(--sticky-yellow); border-left: 4px solid rgba(170, 140, 50, .45); box-shadow: 1px 2px 0 rgba(170, 150, 90, .3); }
.pr-tags li:nth-child(2) { background: var(--sticky-blue); border-left-color: rgba(70, 110, 150, .4); }

.quick { position: relative; padding: 30px 22px 22px; border: 1px solid var(--edge); border-top: 4px solid var(--red); box-shadow: var(--lift-3); }
.quick__label { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; color: var(--pencil); }
.quick__title { font-family: var(--serif); font-weight: 900; font-size: 1.3rem; margin-top: 4px; }
.quick ol { margin-top: 12px; border-top: 3px double var(--edge-strong); }
.quick li a {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px dashed var(--edge-strong);
    text-decoration: none;
    transition: background .2s;
}
.quick li a:hover { background: color-mix(in srgb, var(--marker) 45%, transparent); }
.quick__name { display: flex; flex-direction: column; flex-shrink: 0; }
.quick__name b { font-family: var(--serif); font-weight: 900; font-size: 1rem; line-height: 1.4; }
.quick__name small { font-size: .72rem; color: var(--pencil); }
.quick li a::after { /* 点線のリーダー */
    content: ""; flex: 1; order: 1; margin-bottom: 8px; border-bottom: 2px dotted var(--edge-strong); min-width: 16px;
}
.quick__price { order: 2; flex-shrink: 0; font-family: var(--serif); font-weight: 900; font-size: 1.3rem; color: var(--red); line-height: 1.2; white-space: nowrap; }
.quick__price small { font-size: .62em; font-weight: 700; color: var(--ink-soft); }
.quick__urgent .quick__name b::before { content: "急"; display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; margin-right: 6px; border: 1.5px solid var(--red); border-radius: 50%; color: var(--red); font-size: .72em; transform: rotate(-8deg); vertical-align: 2px; }
.quick .hand { margin-top: 12px; font-size: .92rem; }
@media (min-width: 1000px) { .pr-hero .pr-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; } }
@media (max-width: 600px) { .quick { padding: 26px 14px 18px; } .quick__price { font-size: 1.1rem; } .quick__name small { display: none; } }

/* ==========================================================================
   緊急労務相談
   ========================================================================== */
.pr-before { font-size: 1.15rem; margin: 0 0 10px 6px; }
.urgent { --ml: 2.6rem; position: relative; padding: 34px 24px 26px 3.6rem; border: 2px solid var(--red); box-shadow: 7px 8px 0 rgba(173, 60, 52, .2); }
.urgent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(135deg, var(--red) 0 12px, transparent 12px 24px); opacity: .85; }
.urgent__stamp { position: absolute; right: 20px; top: 22px; --r: 8deg; font-size: .9rem; padding: .45rem .9rem; }
.urgent__head h2 { margin-top: 14px; font-family: var(--serif); font-weight: 900; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); line-height: 1.5; padding-right: 110px; }
.urgent__price { margin-top: 8px; font-family: var(--serif); font-weight: 900; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); color: var(--red); line-height: 1.2; }
.urgent__price small { font-size: .38em; color: var(--ink); margin-left: .2em; }
.urgent__grid { display: grid; gap: 24px; margin-top: 20px; }
.urgent__grid > div > p { font-size: .95rem; color: var(--ink-soft); line-height: var(--pitch); }
.urgent__grid > div > p + p { margin-top: 8px; }
.urgent__grid strong { color: var(--ink); }
.urgent__how { font-family: var(--hand); font-weight: 600; color: var(--red) !important; }
.urgent__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.urgent .sticky { padding: 22px 20px 16px; }
@media (min-width: 900px) { .urgent { padding: 40px 40px 30px 4.4rem; --ml: 3.2rem; } .urgent__grid { grid-template-columns: 1.15fr .85fr; gap: 36px; } }
@media (max-width: 600px) { .urgent { --ml: 1.6rem; padding: 30px 14px 22px 2.4rem; } .urgent__head h2 { padding-right: 0; } .urgent__stamp { top: -16px; right: 10px; background: var(--card); font-size: .7rem; } .urgent__actions .btn { width: 100%; } }

/* ==========================================================================
   労務顧問：比較表（帳簿）＋ 人数セレクター ＋ プランカード
   ========================================================================== */
.ledger-wrap { position: relative; padding: 30px 22px 20px; border: 1px solid var(--edge-strong); box-shadow: var(--lift-2); }
.ledger-title { font-family: var(--serif); font-weight: 900; font-size: 1.2rem; padding-bottom: 12px; border-bottom: 3px double var(--edge-strong); }
.ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ledger { width: 100%; min-width: 640px; border-collapse: collapse; margin-top: 8px; }
.ledger th, .ledger td { padding: 12px 10px; border-bottom: 1px dashed var(--edge-strong); text-align: center; font-size: .9rem; line-height: 1.55; }
.ledger thead th { font-family: var(--serif); font-weight: 900; font-size: .98rem; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
.ledger thead th:first-child, .ledger tbody th { text-align: left; font-weight: 700; }
.ledger tbody th { font-family: var(--serif); }
.ledger .is-pick { background: color-mix(in srgb, var(--marker) 38%, transparent); }
.ledger thead .is-pick { position: relative; color: var(--red-deep); }
.ledger__price td { font-family: var(--serif); font-weight: 900; font-size: 1.1rem; color: var(--red); }
.ledger__fit td { font-size: .84rem; font-weight: 700; }
.ledger i { font-style: normal; font-weight: 900; }
.ledger .yes { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 2px solid var(--red); border-radius: 50%; color: transparent; font-size: .8rem; }
.ledger .no { color: var(--edge-strong); }

.headcount { margin-top: 34px; padding: 18px 20px; background: var(--card); border: 1px dashed var(--edge-strong); }
.headcount[hidden] { display: none; }
.headcount__q { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 900; font-size: 1rem; line-height: 1.6; }
.headcount__q .hand-num { width: 2rem; height: 2rem; font-size: .9rem; flex-shrink: 0; }
.headcount__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.headcount__chips label { position: relative; cursor: pointer; }
.headcount__chips input { position: absolute; opacity: 0; pointer-events: none; }
.headcount__chips span { display: inline-block; padding: 8px 14px; background: #fff; border: 1.5px solid #bfb5a2; border-radius: 2px; box-shadow: 2px 2px 0 var(--edge-soft); font-weight: 700; font-size: .9rem; transition: background .15s, color .15s, transform .15s; }
.headcount__chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--edge-soft); }
.headcount__chips input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

.plans { display: grid; gap: 30px; margin-top: 30px; }
.plan { position: relative; padding: 30px 22px 22px; border: 1px solid var(--edge); border-top: 4px solid var(--ink); box-shadow: var(--lift-2); display: flex; flex-direction: column; }
.plan > p:not([class]) { margin-top: 8px; font-size: .9rem; color: var(--ink-soft); line-height: 1.85; }
.plan__no { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--pencil); }
.plan__name { margin-top: 4px; font-family: var(--serif); font-weight: 900; font-size: 1.3rem; line-height: 1.5; }
.plan__catch { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: .96rem; color: var(--red-deep); line-height: 1.6; }
.plan__price { margin-top: 14px; padding: 12px 0; border-top: 3px double var(--edge-strong); border-bottom: 1px dashed var(--edge-strong); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan__price small { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
.plan__price b { font-family: var(--serif); font-weight: 900; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); color: var(--red); line-height: 1.2; }
.plan__band { font-family: var(--hand); font-weight: 600; font-size: .9rem; color: var(--pencil); }
.plan__fit { margin-top: 12px; align-self: flex-start; padding: 3px 10px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700; }
.plan--pick { border-top-color: var(--red); background-color: #fffcf0; box-shadow: 7px 8px 0 rgba(173, 60, 52, .18), 0 14px 28px rgba(52, 43, 26, .06); }
.plan--pick .plan__fit { background: var(--red-ink); }
.plan__stamp { position: absolute; right: 14px; top: -16px; --r: 6deg; background: var(--card); }

.rate { width: 100%; border-collapse: collapse; margin-top: 16px; background: #fff; border: 1px solid var(--edge); }
.rate th, .rate td { padding: 8px 12px; font-size: .88rem; border-bottom: 1px dashed var(--edge); }
.rate thead th { background: var(--paper-alt); font-size: .74rem; font-weight: 700; color: var(--ink-soft); text-align: left; }
.rate th:last-child, .rate td:last-child { text-align: right; }
.rate td:last-child { font-family: var(--serif); font-weight: 900; }
.rate tr.is-on td { background: color-mix(in srgb, var(--marker) 70%, transparent); }
.rate tr.is-on td:first-child { box-shadow: inset 4px 0 0 var(--red); }

.plan__more { margin-top: 14px; border: 1px solid var(--edge); background: var(--card); }
.plan__more summary { cursor: pointer; list-style: none; position: relative; padding: 10px 40px 10px 14px; font-weight: 700; font-size: .9rem; }
.plan__more summary::-webkit-details-marker { display: none; }
.plan__more summary::after { content: "+"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: .95rem; line-height: 1; }
.plan__more[open] summary::after { content: "−"; }
.plan__more .checks-list { padding: 0 14px 10px; margin-top: 0; }
.plan .pr-note { margin-top: auto; padding-top: 12px; }
@media (min-width: 1000px) { .plans { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* ==========================================================================
   単発サービス：値段表（メニュー）
   ========================================================================== */
.menu { --ml: 2.6rem; position: relative; padding: 34px 24px 26px 3.6rem; border: 1px solid var(--edge); box-shadow: var(--lift-2); }
.menu + .menu, .menu + .menu-pair, .menu-pair { margin-top: 44px; }
.menu__head { padding-bottom: 12px; border-bottom: 3px double var(--edge-strong); }
.menu__no { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--red); }
.menu__head h3 { margin-top: 2px; font-family: var(--serif); font-weight: 900; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.menu__catch { margin-top: 4px; font-family: var(--serif); font-weight: 700; color: var(--red-deep); }
.menu__intro { margin-top: 14px; }
.menu__intro p { font-size: .92rem; color: var(--ink-soft); line-height: var(--pitch); }

.price-list { width: 100%; border-collapse: collapse; margin-top: 16px; }
.price-list thead th { padding: 6px 0; font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: var(--pencil); text-align: left; border-bottom: 1px solid var(--ink); }
.price-list thead th:last-child { text-align: right; }
.price-list tbody th { padding: 12px 12px 12px 0; text-align: left; font-family: var(--serif); font-weight: 900; font-size: 1rem; line-height: 1.5; border-bottom: 1px dashed var(--edge-strong); vertical-align: top; }
.price-list tbody th small { display: block; margin-top: 2px; font-family: var(--sans); font-weight: 400; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; }
.price-list tbody td { padding: 12px 0; text-align: right; white-space: nowrap; font-family: var(--serif); font-weight: 900; font-size: 1.08rem; color: var(--red); border-bottom: 1px dashed var(--edge-strong); vertical-align: top; }
.price-list tbody tr:hover th, .price-list tbody tr:hover td { background: color-mix(in srgb, var(--marker) 30%, transparent); }
@media (min-width: 900px) {
    .menu { padding: 40px 40px 30px 4.4rem; --ml: 3.2rem; }
    #work-rules .price-list tbody, #spot-procedures .price-list tbody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
    #work-rules .price-list tbody tr, #spot-procedures .price-list tbody tr { display: grid; grid-template-columns: 1fr auto; }
    #work-rules .price-list thead, #spot-procedures .price-list thead { display: none; }
}
@media (max-width: 600px) { .menu { --ml: 1.6rem; padding: 30px 14px 22px 2.4rem; } .price-list tbody td { font-size: .98rem; white-space: normal; min-width: 6.5em; } }

.menu-pair { display: grid; gap: 44px; align-items: start; }
.menu-pair .menu { margin-top: 0; }
@media (min-width: 1000px) { .menu-pair { grid-template-columns: 1fr 1fr; gap: 28px; } .menu-pair .menu { padding: 36px 26px 26px 3.6rem; --ml: 2.6rem; } }



/* ==========================================================================
   料金についてのご案内
   ========================================================================== */
.notice { --ml: 2.6rem; position: relative; max-width: 960px; margin: 0 auto; padding: 36px 24px 28px 3.6rem; border: 1px solid var(--edge-strong); box-shadow: var(--lift-3); }
.notice__stamp { position: absolute; right: 20px; top: 22px; --r: 6deg; }
.notice h2 { margin-top: 12px; font-family: var(--serif); font-weight: 900; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.notice ul { margin-top: 14px; counter-reset: n; }
.notice li { counter-increment: n; position: relative; padding: 10px 0 10px 2.4em; font-size: .92rem; line-height: 1.8; border-bottom: 1px dashed var(--edge-strong); }
.notice li::before { content: "※" counter(n); position: absolute; left: 0; top: 10px; font-family: var(--hand); font-weight: 600; color: var(--red); }
@media (min-width: 900px) { .notice { padding: 44px 44px 34px 4.6rem; --ml: 3.4rem; } }
@media (max-width: 600px) { .notice { --ml: 1.6rem; padding-left: 2.4rem; padding-right: 14px; } .notice__stamp { top: -14px; right: 10px; background: var(--card); } }

.letter__sign a { color: var(--ink); }

/* ---------- スマホ下部ボタン ---------- */
.pr-dock { grid-template-columns: 1fr 1.7fr; }

.pr-nav .btn { white-space: nowrap; }
.ledger-hint { display: none; margin-top: 10px; font-family: var(--hand); font-weight: 600; font-size: .9rem; color: var(--red); }
@media (max-width: 700px) {
    .ledger-hint { display: block; }
    .brand__sub { display: none; }
    .brand__jp { font-size: .98rem; }
}


/* ==========================================================================
   3プランの「積み上げ」図：前のプランに1つずつ支援が足される
   ========================================================================== */
.stack-wrap { position: relative; padding: 30px 22px 26px; margin-bottom: 36px; border: 1px solid var(--edge-strong); box-shadow: var(--lift-2); }
.stack-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 6px 20px; padding-bottom: 14px; border-bottom: 3px double var(--edge-strong); }
.stack-head h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); }
.stack-head .hand { font-size: .98rem; }
.stack { display: grid; gap: 22px; margin-top: 26px; }
.stack__col { display: flex; flex-direction: column; }
.stack__layers { display: flex; flex-direction: column; gap: 6px; flex: 1; justify-content: flex-end; }
.layer { position: relative; padding: 12px 14px; box-shadow: 2px 3px 0 rgba(120, 100, 60, .22); }
.layer--base { background: var(--sticky-yellow); }
.layer--proc { background: var(--sticky-blue); }
.layer--visit { background: var(--sticky-pink); border: 2px solid var(--red); }
.layer--ghost { opacity: .55; box-shadow: none; padding-top: 8px; padding-bottom: 8px; }
.layer__name { font-family: var(--serif); font-weight: 900; font-size: 1rem; line-height: 1.5; }
.layer__sub { font-size: .8rem; color: var(--ink-soft); line-height: 1.6; margin-top: 2px; }
.layer ul { margin-top: 6px; }
.layer li { position: relative; padding-left: 1.3em; font-size: .86rem; line-height: 1.75; }
.layer li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.layer__plus {
    position: absolute; left: -12px; top: -12px;
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--red-ink); color: #fff; font-weight: 900; font-size: 1.1rem; line-height: 1;
    box-shadow: 1px 2px 0 rgba(0, 0, 0, .2); transform: rotate(-8deg);
}
.stack__foot { display: block; margin-top: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--ink); border-top: 4px solid var(--ink); text-decoration: none; text-align: center; transition: background .2s; }
.stack__foot:hover { background: #fff; }
.stack__foot small { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; color: var(--pencil); }
.stack__foot b { display: block; font-family: var(--serif); font-weight: 900; font-size: 1.05rem; }
.stack__price { display: block; margin-top: 2px; font-family: var(--serif); font-weight: 900; color: var(--red); }
.stack__eq { display: inline-block; margin-top: 6px; padding: 2px 8px; font-size: .78rem; font-weight: 700; background: var(--paper-alt); }
.stack__col--pick .stack__foot { border-color: var(--red); background: #fffcf0; }
@media (min-width: 860px) { .stack { grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; } }
@media (max-width: 859px) { .layer--ghost { display: none; } }

/* 比較表：追加される行と「面談」行 */
.ledger__add th { color: var(--blue-ink); }
.ledger__txt { font-size: .84rem !important; font-weight: 700; }
.ledger__txt b { display: block; font-family: var(--serif); font-weight: 900; color: var(--red); font-size: .98rem; }
.ledger__txt small { font-size: .74rem; }

/* プランカード：どのプランに何を足したものか */
.plan__adds { margin-top: 10px; padding: 6px 10px; font-size: .84rem; font-weight: 700; background: var(--sticky-blue); line-height: 1.6; }
.plan__adds b { color: var(--blue-ink); }
.plan__adds--base { background: var(--sticky-yellow); }
.plan__adds--pick { background: var(--sticky-pink); }
.plan__adds--pick b { color: var(--red-deep); }

/* ==========================================================================
   給与計算：②③は「なし／あり」を選べる
   ========================================================================== */
.stack-payroll {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; text-decoration: none;
    background: #fff; border: 2px dashed var(--blue-ink);
}
.stack-payroll__tag { flex-shrink: 0; padding: 4px 10px; background: var(--blue-ink); color: #fff; font-weight: 700; font-size: .82rem; }
.stack-payroll b { display: block; font-family: var(--serif); font-weight: 900; font-size: .98rem; line-height: 1.5; }
.stack-payroll small { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.6; }
@media (min-width: 860px) { .stack-payroll { grid-column: 2 / 4; } }

.ledger__pay th { color: var(--blue-ink); }

.headcount__row { display: grid; gap: 6px; margin-top: 12px; }
.headcount__row .headcount__chips { margin-top: 0; }
.headcount__label { font-size: .8rem; font-weight: 700; color: var(--ink-soft); }
@media (min-width: 760px) { .headcount__row { grid-template-columns: 9.5em 1fr; align-items: center; } }

.plan__name-add { display: none; margin-left: .15em; color: var(--blue-ink); }
.payroll-on .plan__name-add { display: inline; }
.plan__variant { display: inline-flex; margin-top: 10px; border: 1.5px solid var(--ink); align-self: flex-start; }
.plan__variant[hidden] { display: none; }
.plan__variant button { padding: 5px 12px; font-size: .8rem; font-weight: 700; background: #fff; border: 0; cursor: pointer; }
.plan__variant button + button { border-left: 1.5px solid var(--ink); }
.plan__variant button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.rate th.col-no, .rate th.col-yes { text-align: right; }
.rate td.col-yes small { display: block; font-family: var(--sans); font-weight: 400; font-size: .7rem; color: var(--ink-soft); }
.rate .col-no, .rate .col-yes { transition: opacity .2s, background .2s; }
.payroll-on .rate .col-no { opacity: .4; }
.payroll-on .rate .col-yes { opacity: 1; }
#labor-advisor:not(.payroll-on) .rate .col-yes { opacity: .4; }
.plan__price small.plan__plus { display: block; width: 100%; font-weight: 400; font-size: .76rem; }

.plan__pay { margin-top: 12px; padding: 8px 12px; font-size: .84rem; line-height: 1.7; background: var(--sticky-blue); }
.plan__pay span { display: inline-block; margin-right: 6px; padding: 0 6px; background: var(--blue-ink); color: #fff; font-size: .72rem; font-weight: 700; }
.plan__pay a { color: var(--blue-ink); font-weight: 700; }
.plan__nopay { display: none; margin-top: 12px; font-family: var(--hand); font-weight: 600; color: var(--red); font-size: .92rem; }
.payroll-on .plan__nopay { display: block; }
.payroll-on #plan-consult { opacity: .6; }


/* ===== 実務同行型 労務点検（特別メニュー） ===== */
/* 用紙の並びはそのままに、金の罫と箔押し・ときどき走る光で「きらりと光る」別格の一枚にする */
.rc-special {
    --rc-gold: #b8913c;
    --rc-gold-deep: #8a6a24;
    --rc-gold-soft: #e6cf8e;
    --rc-foil: linear-gradient(100deg, #8a6a24 0%, #b8913c 22%, #e9d18f 40%, #fff6d6 50%, #e9d18f 60%, #b8913c 78%, #8a6a24 100%);
    background-color: var(--paper);
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(233, 209, 143, .28), transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(233, 209, 143, .16), transparent 70%);
    border-top: 3px double var(--rc-gold);
    border-bottom: 3px double var(--rc-gold);
}
.rc-special .sec-head { position: relative; }
.rc-special .tab-label { border-color: var(--rc-gold); color: var(--rc-gold-deep); background: var(--card); }
.rc-special .tab-label span:first-child { background: var(--rc-foil); background-size: 200% 100%; color: #2a1f08; }
.rc-eyebrow { margin: 1.4rem auto 0; width: max-content; max-width: 100%; display: flex; align-items: center; gap: .8em; font-family: var(--serif); font-weight: 700; font-size: .95rem; letter-spacing: .2em; color: var(--rc-gold-deep); }
.rc-eyebrow span { padding: .2em 1em; color: #2a1f08; background: var(--rc-foil); background-size: 200% 100%; letter-spacing: .14em; box-shadow: 0 2px 8px rgba(138, 106, 36, .25); }
.rc-eyebrow::before, .rc-eyebrow::after { content: ""; width: 3em; height: 1px; background: linear-gradient(90deg, transparent, var(--rc-gold)); }
.rc-eyebrow::after { background: linear-gradient(90deg, var(--rc-gold), transparent); }
.rc-special .sec-title { margin-top: .6rem; font-weight: 900; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem); letter-spacing: .04em; }
.rc-special .sec-title .mark {
    background: var(--rc-foil); background-size: 250% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(138, 106, 36, .25));
}

/* 星のきらめき（静止時は小さく灯っているだけ） */
.rc-spark { position: absolute; width: 18px; height: 18px; pointer-events: none; background: radial-gradient(circle, #fff8dc 0 18%, transparent 20%), conic-gradient(from 0deg, transparent 0 40deg, #e9d18f 45deg, transparent 50deg 130deg, #e9d18f 135deg, transparent 140deg 220deg, #e9d18f 225deg, transparent 230deg 310deg, #e9d18f 315deg, transparent 320deg); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 72%); mask: radial-gradient(circle, #000 0 30%, transparent 72%); opacity: .7; }
.rc-spark--1 { top: 18%; left: 12%; }
.rc-spark--2 { top: 46%; right: 14%; width: 24px; height: 24px; }
.rc-spark--3 { top: 70%; left: 22%; width: 12px; height: 12px; }
.rc-spark--seal { top: -40px; right: 6px; width: 26px; height: 26px; z-index: 3; }

.rc-why { --ml: 2.6rem; position: relative; padding: 32px 24px 26px 3.6rem; border: 1px solid var(--edge); box-shadow: var(--lift-2); }
.rc-why h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); line-height: 1.5; }
.rc-why__grid { margin-top: 14px; display: grid; gap: 22px; }
.rc-why__grid p { font-size: .92rem; color: var(--ink-soft); line-height: var(--pitch); }
.rc-why__grid p + p { margin-top: 8px; }
.rc-why__sign { font-family: var(--serif); font-weight: 700; color: var(--ink) !important; }

/* 料金カード：金の二重枠 */
#risk-check-6m { margin-top: 44px; overflow: visible; border: 2px solid var(--rc-gold); outline: 1px solid var(--rc-gold); outline-offset: 6px; box-shadow: 0 0 0 10px rgba(233, 209, 143, .18), 0 22px 50px rgba(138, 106, 36, .22); }
#risk-check-6m .menu__no { color: var(--rc-gold-deep); }
#risk-check-6m .rc-price { margin-top: 18px; color: var(--ink); font-size: clamp(3rem, 2.1rem + 3.6vw, 4.6rem); letter-spacing: -.01em; line-height: 1.05; }
#risk-check-6m .rc-price small { font-size: .32em; color: var(--rc-gold-deep); }
#risk-check-6m .urgent__grid > div > p.rc-price__sub { margin-top: 6px; font-family: var(--serif); font-weight: 700; font-size: 1rem; color: var(--ink); }
#risk-check-6m .urgent__grid > div > p.rc-limit { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--rc-gold); border-left: 4px solid var(--rc-gold); background: linear-gradient(100deg, rgba(233, 209, 143, .28), rgba(255, 246, 214, .5) 50%, rgba(233, 209, 143, .22)); font-size: .86rem; line-height: 1.7; }
.rc-limit b { display: block; font-family: var(--serif); font-weight: 900; font-size: 1.05rem; color: var(--ink); }
#risk-check-6m .menu__intro p + p { margin-top: 8px; }
#risk-check-6m .urgent__actions { margin-top: 18px; }

/* 金の封蝋：同時2社限定 */
.rc-seal {
    position: absolute; top: -34px; right: 22px; z-index: 2;
    width: 92px; height: 92px; border-radius: 50%;
    display: grid; place-content: center; text-align: center;
    font-family: var(--serif); font-weight: 900; font-size: 1.45rem; line-height: 1.05; color: #2a1f08;
    background: radial-gradient(circle at 32% 28%, #fff3c4, #d8b45c 50%, #9a7428);
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--rc-gold), 0 10px 22px rgba(138, 106, 36, .35);
    transform: rotate(8deg);
    overflow: hidden;
}
.rc-seal small { display: block; font-size: .5em; letter-spacing: .2em; }

@media (min-width: 900px) {
    .rc-why { padding: 40px 40px 30px 4.4rem; --ml: 3.2rem; }
    .rc-why__grid { grid-template-columns: 1.15fr .85fr; gap: 36px; }
}
@media (max-width: 600px) {
    .rc-why { --ml: 1.6rem; padding: 30px 14px 22px 2.4rem; }
    #risk-check-6m { outline-offset: 4px; box-shadow: 0 0 0 6px rgba(233, 209, 143, .18), 0 16px 34px rgba(138, 106, 36, .2); }
    #risk-check-6m .urgent__actions .btn { width: 100%; }
    .rc-seal { width: 74px; height: 74px; font-size: 1.15rem; top: -30px; right: 10px; }
    .rc-spark--seal { top: -36px; right: 0; }
    .rc-eyebrow { font-size: .82rem; letter-spacing: .1em; }
    .rc-eyebrow::before, .rc-eyebrow::after { width: 1.6em; }
    .rc-spark--1 { left: 2%; } .rc-spark--2 { right: 2%; }
}

/* ===== モーション（JS が .rc-motion を付けたときだけ。動きを減らす設定では静止した完成形） ===== */
/* 見出し：金の線が伸び、題字が立ち上がる。「労務点検」の箔に光が走る */
.rc-motion .sec-head .rc-eyebrow::before, .rc-motion .sec-head .rc-eyebrow::after { transform: scaleX(0); }
.rc-motion .sec-head .rc-eyebrow::before { transform-origin: right; }
.rc-motion .sec-head .rc-eyebrow::after { transform-origin: left; }
.rc-motion .sec-head .rc-eyebrow span, .rc-motion .sec-head .sec-title, .rc-motion .sec-head .lead { opacity: 0; }
.rc-motion .sec-head.is-play .rc-eyebrow::before, .rc-motion .sec-head.is-play .rc-eyebrow::after { animation: rc-draw .9s .2s cubic-bezier(.2, .7, .2, 1) both; }
.rc-motion .sec-head.is-play .rc-eyebrow span { animation: rc-pop .6s .1s cubic-bezier(.3, 1.6, .5, 1) both, rc-foil-slide 4s 1.2s ease-in-out infinite; }
.rc-motion .sec-head.is-play .sec-title { animation: rc-rise .9s .45s cubic-bezier(.2, .7, .2, 1) both; }
.rc-motion .sec-head.is-play .lead { animation: rc-rise .9s .75s cubic-bezier(.2, .7, .2, 1) both; }
.rc-motion .sec-title .mark { animation: rc-foil 4.5s 1.4s ease-in-out infinite; }
@keyframes rc-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rc-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rc-rise { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rc-foil { 0%, 30% { background-position: 100% 0; } 65%, 100% { background-position: 0 0; } }
@keyframes rc-foil-slide { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* 星がまたたく */
.rc-motion .rc-spark { opacity: 0; transform: scale(.2) rotate(0deg); animation: rc-twinkle 3.2s ease-in-out infinite; }
.rc-motion .rc-spark--1 { animation-delay: 1.2s; }
.rc-motion .rc-spark--2 { animation-delay: 2.3s; }
.rc-motion .rc-spark--3 { animation-delay: 3.1s; }
.rc-motion .rc-spark--seal { animation-delay: 2.6s; }
@keyframes rc-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 82% { opacity: 1; transform: scale(1.15) rotate(45deg); } 92% { opacity: .6; transform: scale(.8) rotate(80deg); } }

.rc-motion .rc-why { opacity: 0; }
.rc-motion .rc-why.is-play { animation: rc-rise .9s cubic-bezier(.2, .7, .2, 1) both; }

/* 料金カード：封蝋が押され、カードが沈み、価格が数え上がり、項目が順に並ぶ。以後ときどき光が走る */
.rc-motion #risk-check-6m { opacity: 0; }
.rc-motion #risk-check-6m.is-play { animation: rc-rise .9s cubic-bezier(.2, .7, .2, 1) both, rc-thud .35s 1.3s ease-out; }
.rc-shine { display: none; }
.rc-motion .rc-shine { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 214, .0) 42%, rgba(255, 246, 214, .75) 50%, rgba(255, 246, 214, 0) 58%, transparent 62%); background-size: 250% 100%; background-position: 130% 0; }
.rc-motion #risk-check-6m.is-play .rc-shine { animation: rc-shine 7s 2.6s ease-in-out infinite; }
@keyframes rc-shine { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }
.rc-motion #risk-check-6m .rc-seal { opacity: 0; }
.rc-motion #risk-check-6m.is-play .rc-seal { animation: rc-seal .55s .8s cubic-bezier(.5, 0, .7, .4) both; }
.rc-motion #risk-check-6m .rc-seal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%); background-size: 300% 100%; background-position: 150% 0; }
.rc-motion #risk-check-6m.is-play .rc-seal::after { animation: rc-shine 5s 2s ease-in-out infinite; }
@keyframes rc-seal { 0% { opacity: 0; transform: rotate(-30deg) scale(2.6); } 80% { opacity: 1; transform: rotate(10deg) scale(.92); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }
@keyframes rc-thud { 0%, 100% { transform: none; } 40% { transform: translateY(3px) scale(.995); } }
.rc-motion #risk-check-6m .checks-list li { opacity: 0; }
.rc-motion #risk-check-6m.is-play .checks-list li { animation: rc-slide .5s both; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(1) { animation-delay: 1.3s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(2) { animation-delay: 1.42s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(3) { animation-delay: 1.54s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(4) { animation-delay: 1.66s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(5) { animation-delay: 1.78s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(6) { animation-delay: 1.9s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(7) { animation-delay: 2.02s; }
.rc-motion #risk-check-6m.is-play .checks-list li:nth-child(8) { animation-delay: 2.14s; }
@keyframes rc-slide { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* ===== 給与計算の料金（式で見せる） ===== */
.pay-formula { margin-bottom: 28px; padding: 20px 22px 16px; background: var(--card); border: 2px solid var(--blue-ink); box-shadow: 4px 5px 0 rgba(45, 90, 136, .15); }
.pay-formula__tag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pay-formula__tag span { padding: 3px 10px; background: var(--blue-ink); color: #fff; font-size: .82rem; }
.pay-formula__eq { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 14px 10px; background: var(--sticky-blue); }
.pay-formula__term { display: grid; justify-items: center; text-align: center; }
.pay-formula__term small { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.pay-formula__term b { font-family: var(--serif); font-weight: 900; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); color: var(--blue-ink); line-height: 1.2; }
.pay-formula__term b i { font-style: normal; font-size: .5em; margin-left: .1em; }
.pay-formula__term em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--ink); }
.pay-formula__term--sum b { color: var(--ink); }
.pay-formula__op { font-family: var(--serif); font-weight: 900; font-size: 1.5rem; color: var(--ink-soft); }
.pay-formula__ex { margin-top: 12px; font-size: .9rem; color: var(--ink-soft); }
.pay-formula__ex b { font-family: var(--serif); font-weight: 900; color: var(--blue-ink); font-size: 1.05rem; }
.pay-formula .pr-note { margin-top: 4px; }
@media (max-width: 600px) { .pay-formula { padding: 16px 14px 12px; } .pay-formula__eq { gap: 4px 10px; } .pay-formula__op { font-size: 1.2rem; } }

/* ===== HERO：料金早見表（静止時の完成形） ===== */
.quick { background: var(--card); }
.quick__stamp { position: absolute; top: 16px; right: 18px; --r: 8deg; font-size: .7rem; }
.quick li { position: relative; }
.quick__special a { position: relative; z-index: 1; }
.quick__special .quick__name b { color: var(--gold); }
.quick__special .quick__price { color: var(--ink); }
.quick__special .quick__price small { color: var(--gold); }
.quick__ring { position: absolute; top: -2px; left: -12px; width: calc(100% + 24px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.quick__ring path { fill: none; stroke: #c9a24a; stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.quick__note { position: absolute; top: -6px; right: -16px; z-index: 2; padding: 1px 8px; font-family: var(--hand); font-weight: 600; font-size: .9rem; color: #2a1f08; background: linear-gradient(135deg, #f3e2a8, #c9a24a); transform: rotate(-10deg); box-shadow: 1px 2px 0 rgba(138, 106, 36, .3); }

/* ===== HERO：モーション（JS が .hm を付けたときだけ） ===== */
/* 見出しの用紙がすべり込み、「料金」にマーカーが引かれる */
.hm .hero__sheet { opacity: 0; }
.hm.is-play .hero__sheet { animation: hm-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hm .pr-title .mark { background-repeat: no-repeat; background-size: 0% 100%; }
.hm.is-play .pr-title .mark { animation: hm-marker .7s 1s cubic-bezier(.6, 0, .3, 1) both; }
.hm .hero__stamp { opacity: 0; }
.hm.is-play .hero__stamp { animation: hm-stamp .45s 1.5s cubic-bezier(.5, 0, .7, .4) both; }
.hm.is-play .pr-lead, .hm.is-play .pr-support, .hm.is-play .pr-tags { animation: hm-rise .8s both; }
.hm.is-play .pr-lead { animation-delay: .5s; }
.hm.is-play .pr-support { animation-delay: .65s; }
.hm.is-play .pr-tags { animation-delay: .8s; }

/* 早見表：カードが机に置かれ、行が1本ずつ書き込まれ、金額が数え上がる */
.hm .quick { opacity: 0; }
.hm.is-play .quick { animation: hm-drop .9s .35s cubic-bezier(.2, .9, .3, 1.15) both; }
.hm .quick__stamp { opacity: 0; }
.hm.is-play .quick__stamp { animation: hm-stamp .45s 3.4s cubic-bezier(.5, 0, .7, .4) both; }
.hm .quick li { opacity: 0; }
.hm.is-play .quick li { animation: hm-write .55s cubic-bezier(.2, .7, .2, 1) both; }
.hm.is-play .quick li:nth-child(1) { animation-delay: 1s; }
.hm.is-play .quick li:nth-child(2) { animation-delay: 1.25s; }
.hm.is-play .quick li:nth-child(3) { animation-delay: 1.5s; }
.hm.is-play .quick li:nth-child(4) { animation-delay: 1.75s; }
.hm.is-play .quick li:nth-child(5) { animation-delay: 2s; }
.hm .quick li a::after { transform: scaleX(0); transform-origin: left; }
.hm.is-play .quick li a::after { animation: hm-draw .6s cubic-bezier(.6, 0, .3, 1) both; }
.hm.is-play .quick li:nth-child(1) a::after { animation-delay: 1.2s; }
.hm.is-play .quick li:nth-child(2) a::after { animation-delay: 1.45s; }
.hm.is-play .quick li:nth-child(3) a::after { animation-delay: 1.7s; }
.hm.is-play .quick li:nth-child(4) a::after { animation-delay: 1.95s; }
.hm.is-play .quick li:nth-child(5) a::after { animation-delay: 2.2s; }
.hm .quick .hand { opacity: 0; }
.hm.is-play .quick .hand { animation: hm-rise .7s 3s both; }

/* 特別メニューの行に、金のペンで丸が描かれ「特別」の付箋が貼られる。以後ときどき光る */
.hm .quick__ring path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hm.is-play .quick__ring path { animation: hm-ring 1s 2.4s cubic-bezier(.5, 0, .3, 1) both; }
.hm .quick__note { opacity: 0; }
.hm.is-play .quick__note { animation: hm-note .5s 3.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.hm .quick__special::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 190, .85) 50%, transparent 65%); background-size: 260% 100%; background-position: 140% 0; }
.hm.is-play .quick__special::before { animation: hm-glint 6s 3.6s ease-in-out infinite; }

@keyframes hm-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hm-drop { 0% { opacity: 0; transform: translateY(-40px) rotate(-6deg) scale(1.04); } 70% { opacity: 1; transform: translateY(4px) rotate(1.2deg); } 100% { opacity: 1; transform: rotate(.6deg); } }
@keyframes hm-marker { to { background-size: 100% 100%; } }
@keyframes hm-stamp { 0% { opacity: 0; transform: rotate(-20deg) scale(2.4); } 80% { opacity: .9; transform: rotate(var(--r, 6deg)) scale(.92); } 100% { opacity: .82; transform: rotate(var(--r, 6deg)) scale(1); } }
@keyframes hm-write { from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(-40px -40px -40px -40px); } }
@keyframes hm-draw { to { transform: scaleX(1); } }
@keyframes hm-ring { to { stroke-dashoffset: 0; } }
@keyframes hm-note { from { opacity: 0; transform: rotate(-30deg) scale(.3); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
@keyframes hm-glint { 0% { background-position: 140% 0; } 25%, 100% { background-position: -40% 0; } }

/* ===== 積み上げ式：プランの間の矢印とリプレイ ===== */
.stack__col { position: relative; }
.stack-replay { margin-left: auto; padding: 4px 12px 4px 10px; font: inherit; font-size: .8rem; font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--edge-strong); cursor: pointer; }
.stack-replay::before { content: "\21BB"; margin-right: 6px; color: var(--red); }
.stack-replay:hover { background: #fff; }
@media (min-width: 860px) {
    .stack__col + .stack__col::before {
        content: "\FF0B"; position: absolute; left: -26px; top: 42%; z-index: 2;
        display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
        font-weight: 900; color: #fff; background: var(--ink); box-shadow: 1px 2px 0 rgba(0, 0, 0, .2);
    }
}

/* ===== 積み上げ式：モーション（JS が .sm を付けたときだけ） =====
   ① 土台ができる → ② ①を写して手続きの層が落ちてくる → ③ さらに訪問の層が落ちてくる → 給与計算の帯 */
.sm .stack__layers .layer, .sm .stack__foot, .sm .stack-payroll, .sm .layer__plus, .sm .layer--base li { opacity: 0; }
@media (min-width: 860px) { .sm .stack__col + .stack__col::before { opacity: 0; } }

.sm.is-play .stack__col:nth-child(1) .layer--base { animation: sm-build .6s .2s cubic-bezier(.2, .8, .2, 1) both; }
.sm.is-play .stack__col:nth-child(1) .layer--base li { animation: sm-tick .35s both; }
.sm.is-play .stack__col:nth-child(1) .layer--base li:nth-child(1) { animation-delay: .55s; }
.sm.is-play .stack__col:nth-child(1) .layer--base li:nth-child(2) { animation-delay: .67s; }
.sm.is-play .stack__col:nth-child(1) .layer--base li:nth-child(3) { animation-delay: .79s; }
.sm.is-play .stack__col:nth-child(1) .layer--base li:nth-child(4) { animation-delay: .91s; }
.sm.is-play .stack__col:nth-child(1) .layer--base li:nth-child(5) { animation-delay: 1.03s; }
.sm.is-play .stack__col:nth-child(1) .stack__foot { animation: sm-foot .5s 1.2s cubic-bezier(.3, 1.4, .5, 1) both; }

.sm.is-play .stack__col:nth-child(2)::before { animation: sm-pop .4s 1.5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sm.is-play .stack__col:nth-child(2) .layer--proc { animation: sm-drop .7s 2s cubic-bezier(.3, 1.3, .5, 1) both; }
.sm.is-play .stack__col:nth-child(2) .layer__plus { animation: sm-plus .45s 2.45s cubic-bezier(.3, 1.6, .5, 1) both; }
.sm.is-play .stack__col:nth-child(2) .stack__foot { animation: sm-foot .5s 2.65s cubic-bezier(.3, 1.4, .5, 1) both; }

.sm.is-play .stack__col:nth-child(3)::before { animation: sm-pop .4s 2.95s cubic-bezier(.3, 1.6, .5, 1) both; }
.sm.is-play .stack__col:nth-child(3) .layer--base.layer--ghost { animation: sm-copy .5s 3.1s cubic-bezier(.2, .8, .2, 1) both; }
.sm.is-play .stack__col:nth-child(3) .layer--visit { animation: sm-drop .7s 3.55s cubic-bezier(.3, 1.3, .5, 1) both; }
.sm.is-play .stack__col:nth-child(3) .layer__plus { animation: sm-plus .45s 4s cubic-bezier(.3, 1.6, .5, 1) both; }
.sm.is-play .stack__col:nth-child(3) .stack__foot { animation: sm-foot .5s 4.2s cubic-bezier(.3, 1.4, .5, 1) both, sm-glow 1.6s 4.8s ease-in-out 2; }

.sm.is-play .stack-payroll { animation: sm-slide .6s 4.7s cubic-bezier(.2, .8, .2, 1) both; }

/* 層が落ちて着地したとき、下の層がわずかに沈む */
.sm.is-play .stack__col:nth-child(2) .layer--ghost { animation: sm-copy .5s 1.65s cubic-bezier(.2, .8, .2, 1) both, sm-squash .3s 2.5s ease-out; }
.sm.is-play .stack__col:nth-child(3) .layer--proc.layer--ghost { animation: sm-copy .5s 3.25s cubic-bezier(.2, .8, .2, 1) both, sm-squash .3s 4.05s ease-out; }

@keyframes sm-build { from { opacity: 0; transform: translateY(30px) scaleY(.6); transform-origin: bottom; } to { opacity: 1; transform: none; } }
@keyframes sm-tick { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes sm-copy { from { opacity: 0; transform: translateX(-60px); } to { opacity: .55; transform: none; } }
@keyframes sm-drop { 0% { opacity: 0; transform: translateY(-90px) rotate(-3deg); } 60% { opacity: 1; transform: translateY(6px) rotate(.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes sm-plus { from { opacity: 0; transform: rotate(-90deg) scale(0); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes sm-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sm-foot { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sm-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes sm-squash { 0%, 100% { transform: none; } 40% { transform: scaleY(.9) translateY(3px); } }
@keyframes sm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(183, 68, 54, 0); } 50% { box-shadow: 0 0 0 6px rgba(183, 68, 54, .22); } }