/* ReciRail LP(/reci-rail/)。フォントはセルフホスト(index.html の fonts ブロック)。
   白と淡い青灰の地、紺の見出し、サイトの青のCTA。主役はブラウザで開いた製品画面(サンプル)。
   モーションは /services/ の参照実装(マスクせり上がり+ヘアライン、ease-slow / ease-expo)を素の JS で踏襲する。 */

:root {
    --white: #ffffff;
    --tint: #f4f8fc;
    --blue-50: #eef4fb;
    --blue-100: #e3eef9;
    --blue-200: #cfe1f3;
    --blue-400: #8bbfe8;
    --brand: #2d5aa0;
    --brand-deep: #1d3f78;
    --ink: #0f2440;
    --body: #3b4a5c;
    --muted: #5b6b7e;
    --line: #dbe6f2;
    --line-soft: #eaf0f7;
    --cyan: #30b9c4;
    --navy: #071a34;
    --navy-soft: #0d294d;
    --danger: #b42318;
    --danger-bg: #fef3f2;

    /* 製品画面の中の色 */
    --ui-bg: #f5f7fa;
    --ui-card: #ffffff;
    --ui-line: #e2e8f0;
    --ui-text: #182a40;
    --ui-sub: #5b6b7e;
    --ui-ok: #1c7a57;
    --ui-ok-bg: #e5f4ed;
    --ui-ai: #0d6c75;
    --ui-ai-bg: #e2f5f6;

    --font: 'Inter', 'IBM Plex Sans JP', system-ui, sans-serif;
    --font-jp: 'IBM Plex Sans JP', system-ui, sans-serif;
    --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --header-h: 72px;
    --shadow-sm: 0 1px 2px rgba(29, 63, 120, 0.05), 0 10px 28px -14px rgba(29, 63, 120, 0.18);
    --shadow-md: 0 2px 4px rgba(29, 63, 120, 0.04), 0 22px 48px -22px rgba(29, 63, 120, 0.26);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    color: var(--body);
    background: var(--white);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.75;
    font-feature-settings: 'palt' 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img,
svg {
    display: block;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

/* 意味のまとまり(チャンク)。ここでだけ行が折れる */
.k {
    display: inline-block;
}

/* 日本語の改行を文節単位にする */
:is(p, h1, h2, h3, h4, li, dd, dt, summary, label, legend) {
    word-break: auto-phrase;
    overflow-wrap: break-word;
    line-break: strict;
}

:is(h1, h2, h3) {
    text-wrap: balance;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ic {
    width: 1em;
    height: 1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ic-f {
    flex: none;
    fill: currentColor;
    stroke: none;
}

.shell {
    width: min(100%, 1248px);
    margin: 0 auto;
    padding-inline: max(clamp(20px, 5vw, 64px), env(safe-area-inset-left, 0px));
}

/* ==========================================================================
   Header
   ========================================================================== */
.hd {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: var(--header-h);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0));
    transition: background-color 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
}

.hd.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 var(--line);
}

.hd__in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 32px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo__mark {
    width: 30px;
    height: 30px;
}

.logo__name {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
}

.nav {
    margin-left: auto;
}

.nav ul {
    display: flex;
    gap: 6px;
}

.nav a {
    position: relative;
    display: block;
    padding: 8px 14px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    background-image: linear-gradient(var(--cyan), var(--cyan));
    background-repeat: no-repeat;
    background-position: 14px calc(100% - 4px);
    background-size: 0 1px;
    transition: background-size 0.6s var(--ease-expo);
}

.nav a:hover {
    background-size: calc(100% - 28px) 1px;
}

.hd__cta {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    color: var(--white);
    background: var(--brand);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.5s var(--ease-expo);
}

.hd__cta:hover {
    background: var(--brand-deep);
}

/* ==========================================================================
   Buttons / shared
   ========================================================================== */
.btn {
    position: relative;
    min-width: 236px;
    min-height: 58px;
    padding: 16px 22px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    border: 1px solid var(--brand);
    border-radius: 2px;
    color: var(--white);
    background: var(--brand);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.6s var(--ease-expo), border-color 0.6s var(--ease-expo);
}

.btn .ic {
    font-size: 1.15rem;
    stroke-width: 1.9;
    transition: transform 0.6s var(--ease-expo);
}

.btn:hover {
    border-color: var(--brand-deep);
    background: var(--brand-deep);
}

.btn:hover .ic {
    transform: translateX(5px);
}

.sec {
    position: relative;
    padding-block: clamp(96px, 11vw, 152px);
}

.sec--tint {
    background: var(--tint);
}

.eyebrow {
    margin-bottom: 18px;
    color: var(--brand);
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.22em;
}

.head {
    margin-bottom: clamp(48px, 6vw, 76px);
    text-align: center;
}

.head h2,
.env__title,
.ct__title {
    color: var(--ink);
    font-size: clamp(1.7rem, 3.1vw, 2.6rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.head__lead {
    max-width: 40em;
    margin: 26px auto 0;
    color: var(--body);
    line-height: 1.95;
}

.head__note {
    margin-top: 14px;
    color: var(--muted);
    font-size: 0.8rem;
}

/* 見出し「マスクせり上がり+ヘアライン」 */
.rt {
    display: inline-block;
    max-width: 100%;
}

.rt__mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
}

.rt__text {
    display: block;
}

.rt__line {
    display: block;
    width: 56px;
    height: 1px;
    margin: 22px auto 0;
    background: rgba(48, 185, 196, 0.7);
    transform-origin: center;
}

.rt--left .rt__line {
    margin-left: 0;
    transform-origin: left;
}

/* ==========================================================================
   Device: Mac の Safari ウィンドウ
   ========================================================================== */
.mac-wrap {
    container: mac / inline-size;
    width: 100%;
}

.mac {
    --mac-radius: 0.95em;
    font-size: clamp(10.5px, calc(100cqw / 54), 12.5px);
    overflow: hidden;
    border: 1px solid rgba(15, 36, 64, 0.14);
    border-radius: var(--mac-radius);
    color: var(--ui-text);
    background: var(--ui-bg);
    box-shadow: 0 0.2em 0.5em rgba(15, 36, 64, 0.06), 0 2.6em 5em -2.2em rgba(15, 36, 64, 0.34);
    line-height: 1.5;
    text-align: left;
}

.mac__bar {
    height: 3.3em;
    padding: 0 1.1em;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1em;
    border-bottom: 1px solid #dfe3e8;
    background: linear-gradient(180deg, #f7f8fa, #eef0f3);
}

.mac__lights {
    display: flex;
    gap: 0.52em;
}

.mac__lights i {
    width: 0.95em;
    height: 0.95em;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.14);
}

.mac__lights i:nth-child(2) {
    background: #febc2e;
}

.mac__lights i:nth-child(3) {
    background: #28c840;
}

.mac__tools {
    display: flex;
    align-items: center;
    gap: 0.95em;
    color: #6f7782;
    font-size: 1.25em;
}

.mac__url {
    justify-self: center;
    width: min(100%, 26em);
    height: 2.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45em;
    border-radius: 0.6em;
    color: #2b3340;
    background: rgba(0, 0, 0, 0.055);
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 500;
}

.mac__url .ic {
    color: #6f7782;
    font-size: 0.95em;
}

.mac__view {
    position: relative;
    background: var(--ui-bg);
}

/* 製品アプリの骨格(Mac) */
.app {
    display: grid;
    grid-template-columns: 11.2em minmax(0, 1fr);
    min-height: 100%;
}

.app__side {
    padding: 1.2em 0.8em;
    display: flex;
    flex-direction: column;
    gap: 1.1em;
    border-right: 1px solid var(--ui-line);
    background: #fbfcfd;
}

.app__brand {
    padding: 0 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 1.08em;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.app__brand svg {
    width: 1.5em;
    height: 1.5em;
}

.app__menu {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.app__menu li {
    padding: 0.5em 0.65em;
    display: flex;
    align-items: center;
    gap: 0.6em;
    border-radius: 0.5em;
    color: #44546a;
    font-size: 0.98em;
    font-weight: 500;
}

.app__menu .ic {
    font-size: 1.2em;
    color: #7b8798;
}

.app__menu li.is-on {
    color: var(--brand);
    background: var(--blue-100);
    font-weight: 600;
}

.app__menu li.is-on .ic {
    color: var(--brand);
}

.app__user {
    margin-top: auto;
    padding: 0.7em 0.5em 0;
    display: flex;
    align-items: center;
    gap: 0.6em;
    border-top: 1px solid var(--ui-line);
    font-size: 0.92em;
    line-height: 1.3;
}

.app__user small {
    display: block;
    color: var(--ui-sub);
    font-size: 0.88em;
}

.avatar {
    width: 2.3em;
    height: 2.3em;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-deep);
    background: var(--blue-100);
    font-family: var(--font-jp);
    font-size: 0.95em;
    font-weight: 600;
}

.app__top {
    display: none;
}

.app__main {
    min-width: 0;
    padding: 1.4em 1.6em 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.pg-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1em;
}

.pg-crumb {
    color: var(--ui-sub);
    font-size: 0.84em;
    line-height: 1.4;
}

.pg-title {
    color: var(--ui-text);
    font-size: 1.42em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.pg-actions {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.sample {
    display: inline-flex;
    align-items: center;
    padding: 0.18em 0.6em;
    border: 1px dashed #9fb1c6;
    border-radius: 0.4em;
    color: #4f6076;
    background: rgba(255, 255, 255, 0.7);
    font-family: var(--font-jp);
    font-size: 0.78em;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: 2.5em;
    padding: 0 1em;
    border-radius: 0.55em;
    color: #fff;
    background: var(--brand);
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 0.1em 0.2em rgba(29, 63, 120, 0.2);
}

.ui-btn .ic {
    font-size: 1.15em;
    stroke-width: 1.9;
}

.ui-btn--ghost {
    border: 1px solid var(--ui-line);
    color: var(--ui-text);
    background: #fff;
    box-shadow: none;
}

.card {
    border: 1px solid var(--ui-line);
    border-radius: 0.8em;
    background: var(--ui-card);
}

.card__head {
    padding: 0.85em 1.1em 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6em;
}

.card__title {
    color: var(--ui-text);
    font-size: 1em;
    font-weight: 600;
}

.card__sub {
    color: var(--ui-sub);
    font-size: 0.82em;
}

/* 絞り込み */
.filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6em;
}

.flt {
    min-width: 0;
    height: 2.75em;
    padding: 0 0.75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--ui-line);
    border-radius: 0.55em;
    background: #fff;
    position: relative;
    line-height: 1.25;
}

.flt small {
    color: var(--ui-sub);
    font-size: 0.74em;
}

.flt b {
    overflow: hidden;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 1.2em;
}

.flt .ic {
    position: absolute;
    right: 0.6em;
    top: 50%;
    translate: 0 -50%;
    color: #7b8798;
    font-size: 1em;
}

.flt.is-focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2em rgba(45, 90, 160, 0.14);
}

/* 経費分析 */
.dash {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 0.8em;
}

.bars {
    padding: 0.9em 1.1em 0.9em 0.6em;
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr);
    grid-template-rows: 11.5em auto;
}

.bars__axis {
    position: relative;
    color: var(--ui-sub);
    font-family: 'Inter', var(--font-jp);
    font-size: 0.72em;
}

.bars__axis span {
    position: absolute;
    right: 0.6em;
    translate: 0 50%;
    white-space: nowrap;
}

.bars__plot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    border-bottom: 1px solid #c9d3df;
    background: repeating-linear-gradient(to top, transparent 0 calc(40% - 1px), #edf1f6 calc(40% - 1px) 40%);
}

.bar {
    position: relative;
    font-style: normal;
    justify-self: center;
    width: 58%;
    height: var(--h);
    border-radius: 0.3em 0.3em 0 0;
    background: linear-gradient(180deg, #4a78c0, var(--brand));
    transform-origin: bottom;
}

.bar.is-soft {
    background: linear-gradient(180deg, #9db8de, #8aa9d6);
}

.bar.is-partial {
    background: repeating-linear-gradient(135deg, #a9c2e6 0 0.32em, #c9daf1 0.32em 0.64em);
    box-shadow: inset 0 0 0 1px #8fadd9;
}

.bar__tip {
    position: absolute;
    bottom: calc(100% + 0.5em);
    left: 50%;
    translate: -50% 0;
    padding: 0.3em 0.55em;
    border-radius: 0.4em;
    color: #fff;
    background: var(--ink);
    font-family: 'Inter', var(--font-jp);
    font-size: 0.74em;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    text-align: center;
}

.bar__tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 0.35em solid transparent;
    border-top-color: var(--ink);
}

.bar__tip small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86em;
    font-weight: 500;
}

.bar__tip--light {
    color: var(--ui-text);
    background: #fff;
    box-shadow: 0 0 0 1px var(--ui-line), 0 0.3em 0.8em rgba(15, 36, 64, 0.1);
}

.bar__tip--light::after {
    border-top-color: #fff;
}

.bar__tip--light small {
    color: var(--ui-sub);
}

.bars__months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-top: 0.45em;
    color: var(--ui-sub);
    font-size: 0.78em;
    text-align: center;
    line-height: 1.3;
}

.bars__months small {
    display: block;
    font-size: 0.86em;
    color: var(--brand);
}

.mix {
    padding: 0.9em 1.1em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
}

.donut {
    position: relative;
    width: 7.6em;
    aspect-ratio: 1;
}

.donut::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(#2d5aa0 0 42%, #5f8fd0 0 63%, #30b9c4 0 81%, #9cc7ea 0 92%, #cdd8e4 0 100%);
    -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%);
    mask: radial-gradient(circle, transparent 57%, #000 58%);
}

.donut span {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--ui-sub);
    font-size: 0.74em;
    line-height: 1.3;
}

.donut b {
    color: var(--ui-text);
    font-size: 1.3em;
}

.mix__legend {
    width: 100%;
    display: grid;
    gap: 0.32em;
    font-size: 0.86em;
}

.mix__legend li {
    display: grid;
    grid-template-columns: 0.75em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5em;
    line-height: 1.4;
}

.mix__legend i {
    width: 0.75em;
    height: 0.75em;
    border-radius: 0.2em;
    background: var(--c);
}

.mix__legend b {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 表(精算・仕訳) */
.tabs {
    display: flex;
    align-items: center;
    gap: 0.3em;
    border-bottom: 1px solid var(--ui-line);
}

.tabs span {
    padding: 0.45em 0.8em 0.6em;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--ui-sub);
    font-size: 0.92em;
    font-weight: 500;
    white-space: nowrap;
}

.tabs span b {
    margin-left: 0.35em;
    padding: 0 0.45em;
    border-radius: 1em;
    background: #eef2f7;
    font-family: 'Inter', sans-serif;
    font-size: 0.86em;
    font-weight: 600;
}

.tabs span.is-on {
    border-bottom-color: var(--brand);
    color: var(--brand);
    font-weight: 600;
}

.tabs span.is-on b {
    background: var(--blue-100);
}

.tabs__end {
    margin-left: auto;
    display: flex;
    gap: 0.5em;
    padding-bottom: 0.35em;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    height: 2.1em;
    padding: 0 0.7em;
    border: 1px solid var(--ui-line);
    border-radius: 0.5em;
    background: #fff;
    color: var(--ui-text);
    font-size: 0.86em;
    white-space: nowrap;
}

.chip .ic {
    color: #7b8798;
}

.tbl {
    overflow: hidden;
    font-size: 0.92em;
}

.tbl__row {
    display: grid;
    grid-template-columns: var(--cols);
    align-items: center;
    gap: 0 0.9em;
    min-height: 3em;
    padding: 0.55em 1.1em;
    border-top: 1px solid var(--ui-line);
    line-height: 1.4;
}

.tbl__row:first-child {
    border-top: 0;
}

.tbl__row--head {
    min-height: 2.4em;
    color: var(--ui-sub);
    background: #f8fafc;
    font-size: 0.88em;
    font-weight: 500;
}

.tbl__row.is-sel {
    background: #f3f7fd;
    box-shadow: inset 3px 0 0 var(--brand);
}

.tbl .num {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tbl__row--head .num {
    font-family: inherit;
}

.tbl .who {
    display: flex;
    align-items: center;
    gap: 0.55em;
    font-weight: 600;
}

.tbl .who .avatar {
    width: 2em;
    height: 2em;
    font-size: 0.85em;
}

.tbl .sub {
    color: var(--ui-sub);
}

.tbl__foot {
    padding: 0.7em 1.1em;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    border-top: 1px solid var(--ui-line);
    background: #f8fafc;
    color: var(--ui-sub);
    font-size: 0.88em;
}

.tbl__foot b {
    color: var(--ui-text);
    font-family: 'Inter', var(--font-jp);
    font-weight: 600;
}

.cbx {
    width: 1.2em;
    height: 1.2em;
    display: grid;
    place-items: center;
    border: 1.5px solid #b7c3d1;
    border-radius: 0.3em;
    background: #fff;
    color: #fff;
}

.cbx .ic {
    font-size: 0.85em;
    stroke-width: 2.6;
    opacity: 0;
}

.cbx.is-on {
    border-color: var(--brand);
    background: var(--brand);
}

.cbx.is-on .ic {
    opacity: 1;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    width: fit-content;
    padding: 0.12em 0.6em;
    border-radius: 1em;
    font-size: 0.86em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.55;
}

.badge::before {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
}

.badge--wait {
    color: #46566b;
    background: #edf1f6;
}

.badge--done {
    color: var(--ui-ok);
    background: var(--ui-ok-bg);
}

.settle {
    --cols: 1.2em minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 1fr);
}

.journal {
    --cols: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.75fr) minmax(0, 0.85fr) minmax(0, 1.9fr);
}

.journal .acct {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}

.journal .acct::before {
    content: '';
    width: 0.3em;
    height: 1.1em;
    border-radius: 0.15em;
    background: var(--c, var(--brand));
}

.journal__memo {
    overflow: hidden;
    color: var(--ui-sub);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mapnote {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.9em;
    padding: 0.7em 1em;
    border: 1px solid var(--ui-line);
    border-radius: 0.7em;
    background: #fff;
    color: var(--ui-sub);
    font-size: 0.86em;
}

.mapnote b {
    color: var(--ui-text);
    font-weight: 600;
}

.mapnote .map {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.1em 0.55em;
    border-radius: 0.4em;
    background: #f1f5fa;
    color: var(--ui-text);
    white-space: nowrap;
}

.mapnote .map .ic {
    color: var(--brand);
    stroke-width: 2;
}

.mapnote .ok {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--ui-ok);
    font-weight: 600;
}

/* Mac 幅が狭いとき(モバイル): サイドバーを畳み、列を減らす */
@container mac (max-width: 470px) {
    .mac {
        font-size: 11px;
    }

    .mac__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.8em;
    }

    .mac__bar .mac__tools--nav {
        display: none;
    }

    .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .app__side {
        display: none;
    }

    .app__top {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.7em 1.1em;
        border-bottom: 1px solid var(--ui-line);
        background: #fbfcfd;
        color: var(--ink);
        font-family: 'Inter', sans-serif;
        font-weight: 700;
    }

    .app__top svg {
        width: 1.4em;
        height: 1.4em;
    }

    .app__top span {
        margin-left: auto;
        color: var(--ui-sub);
        font-family: var(--font-jp);
        font-size: 0.9em;
        font-weight: 500;
    }

    .app__main {
        padding: 1.1em 1.1em 1.2em;
    }

    .pg-head {
        flex-wrap: wrap;
    }

    .filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash {
        grid-template-columns: minmax(0, 1fr);
    }

    .mix {
        flex-direction: row;
        align-items: center;
    }

    .donut {
        width: 7em;
    }

    .settle {
        --cols: 1.2em minmax(0, 1.2fr) minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .settle .c-dept,
    .settle .c-date {
        display: none;
    }

    .tbl__row {
        padding-inline: 0.8em;
        gap: 0 0.6em;
    }

    .journal {
        --cols: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 0.85fr);
    }

    .journal .tbl__row {
        row-gap: 0.15em;
    }

    .journal__memo {
        grid-column: 2 / -1;
        font-size: 0.92em;
    }

    .journal .tbl__row--head .journal__memo {
        display: none;
    }

    .tabs__end .chip:last-child {
        display: none;
    }

    .mapnote .ok {
        margin-left: 0;
    }
}

/* ==========================================================================
   Device: iPhone の Safari
   ========================================================================== */
.phone {
    position: relative;
    width: 22.5em;
    height: 46.5em;
    padding: 0.6em;
    font-size: var(--ip, 12.5px);
    border-radius: 3.7em;
    background: linear-gradient(150deg, #353d49, #171c24 45%, #262d38);
    box-shadow:
        inset 0 0 0 0.12em #4a5463,
        inset 0 0 0 0.3em #10141a,
        0 0.3em 0.8em rgba(15, 36, 64, 0.14),
        0 2.8em 4.4em -1.8em rgba(15, 36, 64, 0.42);
    color: var(--ui-text);
    line-height: 1.5;
    text-align: left;
}

/* 側面のボタン */
.phone::before,
.phone::after {
    content: '';
    position: absolute;
    width: 0.28em;
    border-radius: 0.2em;
    background: #2b323d;
}

.phone::before {
    left: -0.22em;
    top: 9.5em;
    height: 5.6em;
    box-shadow: 0 -3.2em 0 -1.4em #2b323d;
}

.phone::after {
    right: -0.22em;
    top: 11.5em;
    height: 7em;
}

.phone__screen {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 3.1em;
    background: var(--ui-bg);
    isolation: isolate;
}

.phone__island {
    position: absolute;
    top: 0.85em;
    left: 50%;
    z-index: 5;
    width: 7.4em;
    height: 2.15em;
    translate: -50% 0;
    border-radius: 2em;
    background: #07090c;
}

.phone__status {
    flex: none;
    height: 3.7em;
    padding: 0.55em 1.9em 0 2.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #10161f;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.phone__status b {
    font-size: 1.12em;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.phone__sig {
    display: flex;
    align-items: center;
    gap: 0.38em;
}

.phone__sig svg:nth-child(1) {
    width: 1.35em;
    height: 0.9em;
}

.phone__sig svg:nth-child(2) {
    width: 1.25em;
    height: 0.92em;
}

.phone__sig svg:nth-child(3) {
    width: 2.05em;
    height: 0.95em;
}

.phone__view {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--ui-bg);
}

.phone__safari {
    flex: none;
    padding: 0.55em 0.85em 0.3em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    border-top: 1px solid rgba(15, 36, 64, 0.08);
    background: rgba(246, 248, 250, 0.96);
    position: relative;
    z-index: 2;
}

.phone__sbtn {
    width: 2.85em;
    height: 2.85em;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #2b3340;
    background: #fff;
    box-shadow: 0 0.08em 0.3em rgba(15, 36, 64, 0.12);
    font-size: 1em;
}

.phone__sbtn .ic {
    font-size: 1.35em;
    stroke-width: 1.9;
}

.phone__url {
    flex: 1;
    min-width: 0;
    height: 2.85em;
    padding: 0 0.95em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1.5em;
    background: #fff;
    box-shadow: 0 0.08em 0.3em rgba(15, 36, 64, 0.12);
    color: #1b2430;
    font-size: 1em;
}

.phone__url .aa {
    color: #3c4655;
    font-family: var(--font-jp);
    font-size: 0.92em;
    font-weight: 600;
}

.phone__url .u {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: 'Inter', sans-serif;
    font-size: 1.04em;
    font-weight: 500;
}

.phone__url .ic {
    color: #6f7782;
    font-size: 1.05em;
}

.phone__url .u .ic {
    font-size: 0.86em;
}

.phone__home {
    flex: none;
    height: 1.55em;
    display: grid;
    place-items: center;
    background: rgba(246, 248, 250, 0.96);
}

.phone__home::before {
    content: '';
    width: 8.4em;
    height: 0.34em;
    border-radius: 1em;
    background: #10161f;
}

/* 画面(スクリーン)。iPhone の中では重ねて置き、切り替える */
.phone .scr {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

.m-head {
    flex: none;
    height: 3.2em;
    padding: 0 1.1em;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    border-bottom: 1px solid var(--ui-line);
    background: #fff;
}

.m-head__l {
    display: inline-flex;
    align-items: center;
    gap: 0.1em;
    color: var(--brand);
    font-size: 0.98em;
    white-space: nowrap;
}

.m-head__l .ic {
    font-size: 1.35em;
    stroke-width: 2;
    margin-left: -0.35em;
}

.m-head__t {
    color: var(--ui-text);
    font-size: 1.06em;
    font-weight: 700;
    white-space: nowrap;
}

.m-head__r {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--brand);
}

.m-head__r .ic {
    font-size: 1.35em;
    stroke-width: 1.9;
}

.m-head .sample {
    font-size: 0.72em;
}

.m-body {
    flex: 1;
    min-height: 0;
    padding: 0.9em 1em 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    overflow: hidden;
}

.m-foot {
    flex: none;
    padding: 0.75em 1em 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    border-top: 1px solid var(--ui-line);
    background: #fff;
}

.m-btn {
    height: 3.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    border-radius: 0.8em;
    color: #fff;
    background: var(--brand);
    font-size: 1em;
    font-weight: 600;
    box-shadow: 0 0.15em 0.4em rgba(29, 63, 120, 0.25);
}

.m-btn .ic {
    font-size: 1.15em;
    stroke-width: 2;
}

/* 領収書(紙) */
.rcpt {
    --zz: 0.62em;
    position: relative;
    padding: 0.85em 0.9em 1.5em;
    color: #2a2f36;
    background: #fffefb;
    font-family: var(--font-jp);
    line-height: 1.4;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
}

.rcpt__t {
    padding-bottom: 0.35em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #3a3f47;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 0.4em;
}

.rcpt__shop {
    font-size: 0.82em;
    font-weight: 600;
}

.rcpt__amt {
    margin: 0.35em 0;
    padding: 0.2em 0;
    border-block: 1px solid #c9c6bd;
    font-family: 'Inter', sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

.rcpt__amt small {
    font-size: 0.6em;
    font-weight: 500;
}

.rcpt__ln {
    display: flex;
    justify-content: space-between;
    gap: 0.6em;
    color: #4a4f57;
    font-size: 0.7em;
}

.rcpt__ln span:last-child {
    font-family: 'Inter', sans-serif;
}

.rcpt__bar {
    display: block;
    height: 0.36em;
    margin-top: 0.42em;
    border-radius: 0.2em;
    background: #e3e0d8;
    width: var(--w, 80%);
}

/* 読み取り結果の確認(フォーム) */
.ocr-top {
    display: grid;
    grid-template-columns: 5.6em minmax(0, 1fr);
    gap: 0.8em;
    align-items: start;
}

.ocr-thumb {
    position: relative;
    height: 7.4em;
    padding: 0.45em;
    overflow: hidden;
    border-radius: 0.6em;
    background: linear-gradient(160deg, #4b525d, #2b3038);
}

.ocr-thumb .rcpt {
    font-size: 0.42em;
    rotate: -3deg;
    box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.25);
}

.ocr-thumb__zoom {
    position: absolute;
    right: 0.35em;
    bottom: 0.35em;
    width: 1.7em;
    height: 1.7em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 22, 31, 0.6);
}

.ocr-thumb__zoom .ic {
    font-size: 1em;
}

.ocr-note {
    padding: 0.6em 0.7em;
    border-radius: 0.6em;
    background: var(--blue-50);
    color: #2c4466;
    font-size: 0.86em;
    line-height: 1.5;
}

.ocr-note b {
    display: flex;
    align-items: center;
    gap: 0.3em;
    margin-bottom: 0.15em;
    color: var(--brand-deep);
    font-weight: 700;
}

.ocr-note b .ic {
    font-size: 1.15em;
}

.ocr-note__re {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-top: 0.35em;
    color: var(--brand);
    font-weight: 600;
}

.ocr-note__re .ic {
    font-size: 1.05em;
}

.flds {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.fld__lbl {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 0.2em;
    color: var(--ui-sub);
    font-size: 0.84em;
    font-weight: 500;
}

.ai {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0 0.5em;
    border-radius: 1em;
    color: var(--ui-ai);
    background: var(--ui-ai-bg);
    font-size: 0.9em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.6;
}

.ai .ic {
    font-size: 0.95em;
    stroke-width: 2;
}

.fld__val {
    height: 2.55em;
    padding: 0 0.8em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    border: 1px solid #d3dce7;
    border-radius: 0.6em;
    background: #fff;
    color: var(--ui-text);
    font-size: 1em;
    font-weight: 500;
}

.fld__val .num {
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
}

.fld__val .ic {
    color: #7b8798;
    font-size: 1.1em;
}

.fld__val.is-ai {
    border-color: #a7dde1;
    background: #fbfefe;
}

.fld__val.is-select {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.18em rgba(45, 90, 160, 0.12);
}

.fld__val.is-select .ic {
    color: var(--brand);
}

/* カメラ → 読み取り結果 */
.cam {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: radial-gradient(120% 80% at 50% 45%, #4a505a, #1a1d22 70%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease-slow), visibility 0s linear 0.6s;
}

.cam__top {
    flex: none;
    height: 3.2em;
    padding: 0 1.1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.94em;
}

.cam__top .ic {
    font-size: 1.3em;
}

.cam__hint {
    padding: 0.25em 0.8em;
    border-radius: 1em;
    background: rgba(0, 0, 0, 0.42);
    font-size: 0.92em;
}

.cam__frame {
    position: relative;
    flex: 1;
    margin: 0.6em 2.2em 0.4em;
    display: grid;
    place-items: center;
}

.cam__frame .rcpt {
    width: 12em;
    font-size: 0.95em;
    rotate: -4deg;
    filter: drop-shadow(0 0.8em 1.2em rgba(0, 0, 0, 0.45));
}

.cam__c {
    position: absolute;
    width: 2em;
    height: 2em;
    border: 0.22em solid #fff;
    border-radius: 0.3em;
}

.cam__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 0.6em 0 0 0; }
.cam__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 0.6em 0 0; }
.cam__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 0.6em; }
.cam__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 0.6em 0; }

.cam__scan {
    position: absolute;
    left: 0.6em;
    right: 0.6em;
    top: 8%;
    height: 0.18em;
    border-radius: 0.2em;
    background: var(--cyan);
    box-shadow: 0 0 1.2em 0.3em rgba(48, 185, 196, 0.55);
    opacity: 0;
}

.cam__status {
    flex: none;
    height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    font-size: 0.92em;
    opacity: 0;
}

.cam__status i {
    width: 0.9em;
    height: 0.9em;
    border: 0.15em solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
}

.cam__bottom {
    flex: none;
    height: 6.2em;
    padding: 0 1.8em;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.cam__lib {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    width: fit-content;
    font-size: 0.78em;
}

.cam__lib .ic {
    font-size: 1.8em;
}

.cam__shutter {
    width: 4.4em;
    height: 4.4em;
    border-radius: 50%;
    border: 0.25em solid rgba(255, 255, 255, 0.9);
    background: #fff;
    background-clip: content-box;
    padding: 0.22em;
}

.cam__flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
}

.cap .ocr {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* JS 有効時: カメラ枠から始め、撮影 → 読み取り → フォームの順に見せる */
.cap.is-cam .cam {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--ease-slow), visibility 0s;
}

.cap.is-cam .ocr {
    transform: translateY(6%);
    opacity: 0;
}

.cap .ocr {
    transition: transform 0.9s var(--ease-expo), opacity 0.6s var(--ease-slow);
}

.cap.is-shot .cam__flash {
    animation: cam-flash 0.5s var(--ease-slow) both;
}

.cap.is-shot .cam__scan {
    animation: cam-scan 1.3s var(--ease-slow) 0.2s both;
}

.cap.is-shot .cam__status {
    opacity: 1;
    transition: opacity 0.4s var(--ease-slow) 0.25s;
}

.cap.is-shot .cam__status i {
    animation: spin 0.8s linear infinite;
}

@keyframes cam-flash {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

@keyframes cam-scan {
    0% { top: 8%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 88%; opacity: 0; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 明細リスト */
.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.2em;
    border-radius: 0.7em;
    background: #e7ecf2;
    font-size: 0.94em;
}

.seg span {
    height: 2.2em;
    display: grid;
    place-items: center;
    border-radius: 0.55em;
    color: #4a5a6e;
    font-weight: 500;
}

.seg span.is-on {
    color: var(--ui-text);
    background: #fff;
    box-shadow: 0 0.08em 0.25em rgba(15, 36, 64, 0.14);
    font-weight: 700;
}

.list-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ui-sub);
    font-size: 0.84em;
}

.list-meta b {
    color: var(--brand);
    font-weight: 600;
}

.items {
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: 0.8em;
    background: #fff;
}

.it {
    display: grid;
    grid-template-columns: 1.25em 2.3em minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65em;
    padding: 0.62em 0.85em;
    border-top: 1px solid var(--ui-line);
}

.it:first-child {
    border-top: 0;
}

.it__thumb {
    width: 2.3em;
    height: 2.7em;
    display: grid;
    place-items: center;
    border-radius: 0.35em;
    color: #8a96a6;
    background: #f1f4f8;
    font-size: 1em;
}

.it__thumb .ic {
    font-size: 1.25em;
}

.it__main {
    min-width: 0;
    line-height: 1.35;
}

.it__main b {
    display: block;
    overflow: hidden;
    color: var(--ui-text);
    font-size: 0.95em;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.it__main small {
    color: var(--ui-sub);
    font-size: 0.8em;
}

.it__amt {
    color: var(--ui-text);
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.it__amt small {
    margin-left: 0.1em;
    font-family: var(--font-jp);
    font-size: 0.78em;
    font-weight: 500;
}

.total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--ui-sub);
    font-size: 0.88em;
}

.total b {
    color: var(--ui-text);
    font-family: 'Inter', sans-serif;
    font-size: 1.3em;
    font-weight: 700;
}

.total b small {
    margin-left: 0.15em;
    font-family: var(--font-jp);
    font-size: 0.66em;
    font-weight: 500;
}

/* 承認(PC: 申請の内容と領収書を並べて確かめる) */
.pg-sub {
    margin-top: 0.1em;
    color: var(--ui-sub);
    font-size: 0.84em;
    line-height: 1.4;
}

.apv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14em;
    gap: 0.8em;
}

.apv__list {
    --cols: 3em minmax(0, 1fr) 5.4em 4.3em;
}

.apv__list .tbl__row {
    padding-inline: 0.8em;
    gap: 0 0.6em;
}

.apv__list .tbl__row > :nth-child(1),
.apv__list .tbl__row > :nth-child(3) {
    white-space: nowrap;
}

.apv__list .nw {
    display: inline-block;
}

.apv__rc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.apv__img {
    flex: 1;
    margin: 0.7em 0.85em 0.85em;
    padding: 1em 0 0.8em;
    display: grid;
    place-items: center;
    border-radius: 0.5em;
    background: linear-gradient(160deg, #e9edf2, #d8dee6);
}

.apv__img .rcpt {
    width: 10.5em;
}

.apv__foot {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.6em;
}

/* Mac 幅が狭いとき(モバイル): 表の下に領収書を置く */
@container mac (max-width: 470px) {
    .apv {
        grid-template-columns: minmax(0, 1fr);
    }

    .apv__list {
        --cols: 3em minmax(0, 1fr) 5.4em 4.1em;
    }

    .apv__img {
        padding-block: 1.2em 1em;
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    --hp: 0;
    position: relative;
    min-height: min(100svh, 940px);
    display: flex;
    align-items: center;
    overflow: clip;
    background:
        radial-gradient(60% 60% at 82% 38%, rgba(139, 191, 232, 0.22), transparent 70%),
        linear-gradient(180deg, var(--white) 0%, var(--white) 30%, var(--tint) 100%);
}

.hero__in {
    width: min(100%, 1248px);
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding-top: calc(var(--header-h) + clamp(24px, 5vh, 64px));
    padding-bottom: clamp(48px, 8vh, 96px);
}

.hero__label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    color: var(--brand);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.hero__label::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--cyan);
}

.hero h1 {
    color: var(--ink);
    font-size: clamp(2.1rem, 3.75vw, 3.25rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.hero h1 .l {
    display: block;
    white-space: nowrap;
}

.hero__lead {
    max-width: 31em;
    margin-top: clamp(22px, 3.4vh, 36px);
    color: var(--body);
    font-size: clamp(0.96rem, 1.15vw, 1.06rem);
    line-height: 1.95;
}

.hero__actions {
    margin-top: clamp(26px, 4vh, 40px);
}

.hero__note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.84rem;
}

.hero__visual {
    position: relative;
    min-width: 0;
    height: clamp(480px, 74vh, 640px);
}

.hero__mac {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    transform: translate3d(0, calc(var(--hp) * -26px), 0);
}

.hero__phone {
    --ip: clamp(9.4px, 1.25vh, 10.8px);
    position: absolute;
    left: -3%;
    bottom: 0;
    transform: translate3d(0, calc(var(--hp) * -64px), 0);
}

.hero__scroll {
    position: absolute;
    left: clamp(18px, 2.4vw, 38px);
    bottom: clamp(26px, 4vh, 48px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
    opacity: calc(1 - var(--hp) * 3);
}

.hero__scroll::after {
    content: '';
    width: 1px;
    height: 56px;
    background: linear-gradient(180deg, var(--blue-400), rgba(139, 191, 232, 0));
    transform-origin: top;
    animation: scroll-line 2.8s var(--ease-expo) infinite;
}

@keyframes scroll-line {
    0%, 100% { transform: scaleY(0.2); opacity: 0.35; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ==========================================================================
   課題と解決(対照表)
   ========================================================================== */
.sec--pr {
    padding-top: clamp(72px, 8vw, 112px);
}

.pr {
    max-width: 1040px;
    margin: 0 auto;
}

.pr__cols,
.pr__row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 36px minmax(0, 1.12fr);
    column-gap: clamp(12px, 2vw, 28px);
    align-items: center;
}

.pr__cols {
    padding: 0 clamp(12px, 2vw, 24px) 14px 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.pr__cols span:nth-child(4) {
    padding-left: 22px;
    color: var(--brand);
}

.pr__list {
    border-top: 1px solid var(--line);
}

.pr__row {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.pr__tag {
    justify-self: start;
    white-space: nowrap;
}

.pr__bad,
.pr__good {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.7;
}

.pr__bad {
    color: var(--muted);
    font-size: 0.95rem;
}

.pr__bad .ic {
    margin-top: 0.12em;
    font-size: 20px;
    stroke-width: 1.3;
    color: #8696a9;
}

.pr__good {
    padding: 14px 20px 14px 18px;
    border-radius: 12px;
    color: var(--ink);
    background: var(--blue-50);
    font-size: 1rem;
    font-weight: 600;
}

.pr__good .ic {
    width: 22px;
    height: 22px;
    margin-top: 0.1em;
    padding: 4px;
    border-radius: 50%;
    color: var(--white);
    background: var(--brand);
    stroke-width: 2.6;
}

.pr__arrow {
    display: grid;
    place-items: center;
    color: var(--blue-400);
    font-size: 26px;
}

.pr__arrow .ic {
    stroke-width: 1.2;
}

.pr__lab {
    display: none;
}

.pr__more {
    margin-top: 36px;
    text-align: center;
}

.pr__more a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    color: var(--brand);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    background-image: linear-gradient(var(--cyan), var(--cyan));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
}

.pr__more .ic {
    font-size: 1.1rem;
    stroke-width: 1.9;
    transition: transform 0.6s var(--ease-expo);
}

.pr__more a:hover .ic {
    transform: translateY(3px);
}

/* ==========================================================================
   特長
   ========================================================================== */
.points__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 52px;
    max-width: 1040px;
    margin-inline: auto;
}

.point {
    padding: 6px clamp(20px, 4vw, 56px);
    border-left: 1px solid var(--line);
}

.point:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
}

.point__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border: 1px solid var(--blue-200);
    border-radius: 12px;
    color: var(--brand);
    background: var(--blue-50);
    font-size: 22px;
}

.point__num {
    display: block;
    margin-bottom: 8px;
    color: var(--brand);
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.point h3 {
    color: var(--ink);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

.point p {
    margin-top: 12px;
    color: var(--body);
    font-size: 0.92rem;
    line-height: 1.9;
}

.point .point__note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.8;
}

.reasons__cta {
    margin-top: clamp(56px, 7vw, 88px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.reasons__cta p {
    color: var(--ink);
    font-weight: 600;
}

/* スマホでは画面下の追従ボタンと重なるので、ここのボタンは出さない */
@media (max-width: 760px) {
    .reasons__cta {
        display: none;
    }
}

/* ==========================================================================
   画面で見る(主役)
   ========================================================================== */
.walk {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(40px, 5vw, 88px);
}

.walk__steps {
    padding-block: 13vh 18vh;
}

.step {
    min-height: 58vh;
    display: flex;
    align-items: center;
}

.step__text {
    position: relative;
    padding-left: 30px;
    opacity: 0.55;
    transition: opacity 0.6s var(--ease-slow);
}

.step__text::before,
.step__text::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--line);
}

.step__text::after {
    width: 2px;
    left: -0.5px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s var(--ease-expo);
}

.step.is-on .step__text {
    opacity: 1;
}

.step.is-on .step__text::after {
    transform: scaleY(1);
}

.step__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 14px;
}

.step__num {
    color: var(--brand);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.role {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.6;
}

.role--app {
    color: var(--brand);
    background: var(--blue-100);
}

.role--apv {
    color: #0b5f67;
    background: #dcf2f4;
}

.role--acc {
    color: #fff;
    background: var(--ink);
}

.step__dev {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.8rem;
}

.step__dev .ic {
    font-size: 1rem;
}

.step__title {
    color: var(--ink);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.03em;
}

.step__btn {
    display: inline;
    padding: 0;
    text-align: left;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-wrap: inherit;
    word-break: auto-phrase;
    color: inherit;
    border-radius: 2px;
}

.step__desc {
    max-width: 30em;
    margin-top: 14px;
    color: var(--body);
    font-size: 0.97rem;
    line-height: 1.95;
}

.step__visual {
    display: none;
}

.walk__aside {
    position: relative;
    min-width: 0;
}

.stage {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    height: calc(100svh - var(--header-h) - 40px);
    min-height: 560px;
    display: flex;
    flex-direction: column;
}

.stage__devices {
    position: relative;
    flex: 1;
    min-height: 0;
}

.stage__devices::before {
    content: '';
    position: absolute;
    inset: 6% 4% 4%;
    border-radius: 28px;
    background:
        radial-gradient(70% 70% at 50% 45%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, rgba(227, 238, 249, 0.75), rgba(227, 238, 249, 0.2));
}

.stage__phone,
.stage__mac {
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.7s var(--ease-slow), transform 1s var(--ease-expo), visibility 0s linear 1s;
}

.stage__phone {
    --ip: clamp(9.6px, calc((100svh - var(--header-h) - 150px) / 47.5), 13px);
    transform: translate(-50%, -50%);
}

.stage__mac {
    width: min(94%, 760px);
    transform: translate(-50%, -50%);
}

.stage[data-dev='phone'] .stage__mac,
.stage[data-dev='mac'] .stage__phone {
    opacity: 0;
    visibility: hidden;
}

.stage[data-dev='phone'] .stage__mac {
    transform: translate(-50%, -50%) translate3d(6%, 2%, 0) scale(0.95);
}

.stage[data-dev='mac'] .stage__phone {
    transform: translate(-50%, -50%) translate3d(-14%, 3%, 0) scale(0.94);
}

.stage[data-dev='phone'] .stage__phone,
.stage[data-dev='mac'] .stage__mac {
    visibility: visible;
    transition-delay: 0.12s, 0.12s, 0s;
}

.stage .mac__view {
    aspect-ratio: 16 / 9.6;
    overflow: hidden;
}

.stage .mac__view > .scr {
    position: absolute;
    inset: 0;
}

.stage .scr {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s var(--ease-slow), transform 0.9s var(--ease-expo), visibility 0s linear 0.55s;
}

.stage .phone .scr {
    transform: translate3d(0, 1.2em, 0);
}

.stage .scr.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.stage .mac .scr .app__main {
    transform: translate3d(0, 0.8em, 0);
    transition: transform 0.9s var(--ease-expo);
}

.stage .mac .scr.is-on .app__main {
    transform: none;
}

/* 分析画面に切り替わったとき、棒を伸ばす */
.motion .stage .scr .bar {
    transform: scaleY(0.04);
    transition: transform 1.1s var(--ease-expo) calc(var(--i, 0) * 0.06s + 0.15s);
}

.motion .stage .scr.is-on .bar {
    transform: none;
}

.motion .stage .scr .bar__tip {
    opacity: 0;
    transition: opacity 0.5s var(--ease-slow) 0.8s;
}

.motion .stage .scr.is-on .bar__tip {
    opacity: 1;
}

.stage__bar {
    flex: none;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 6%;
}

.stage__cap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--muted);
    font-size: 0.84rem;
}

.stage__num {
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.stage__of {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.06em;
}

.stage__label {
    margin-left: 6px;
    color: var(--body);
}

.stage__pager {
    display: flex;
    gap: 8px;
}

.stage__pager button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: var(--white);
    font-size: 18px;
    transition: border-color 0.4s var(--ease-expo), color 0.4s var(--ease-expo), opacity 0.4s;
}

.stage__pager button:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
}

.stage__pager button:disabled {
    opacity: 0.35;
    cursor: default;
}

.stage__pager .ic {
    stroke-width: 2;
}

.walk__note {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
}

/* ==========================================================================
   機能
   ========================================================================== */
.feats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.feat {
    padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 30px) clamp(28px, 2.6vw, 38px);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
    transition: background-color 0.6s var(--ease-expo);
}

.feat:hover {
    background: #fbfdff;
}

.feat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.feat__icon {
    color: var(--brand);
    font-size: 30px;
}

.feat__icon .ic {
    stroke-width: 1.3;
}

.feat__num {
    color: #8696a9;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
}

.feat h3 {
    color: var(--ink);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.015em;
}

.feat p {
    margin-top: 10px;
    color: var(--body);
    font-size: 0.88rem;
    line-height: 1.85;
}

/* ==========================================================================
   利用環境
   ========================================================================== */
.env__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}

.env__text {
    margin-top: 26px;
    color: var(--body);
    line-height: 1.95;
}

.compat {
    margin-top: 36px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.compat__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5em 7.5em;
    align-items: center;
    min-height: 46px;
    padding: 0 20px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.9rem;
}

.compat__row:first-child {
    border-top: 0;
}

.compat__row--head {
    min-height: 60px;
    background: var(--blue-50);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.compat__row--head span:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.compat__row--head small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 500;
}

.compat__row > span:first-child {
    color: var(--ink);
}

.compat__ok {
    justify-self: center;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--blue-100);
    font-size: 14px;
}

.compat__ok .ic {
    stroke-width: 2.4;
}

.env__list {
    border-top: 1px solid var(--line);
}

.env__item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}

.compat__note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.8rem;
}

.env__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--blue-200);
    border-radius: 12px;
    color: var(--brand);
    background: var(--blue-50);
    font-size: 21px;
}

.env__item h3 {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.env__item p {
    margin-top: 4px;
    color: var(--body);
    font-size: 0.92rem;
    line-height: 1.85;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    transition: box-shadow 0.5s var(--ease-expo), border-color 0.5s var(--ease-expo);
}

.faq__item[open] {
    border-color: var(--blue-200);
    box-shadow: var(--shadow-sm);
}

.faq__item summary {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 16px;
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

.faq__q {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--brand);
    background: var(--blue-100);
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
}

.faq__question {
    flex: 1;
    min-width: 0;
}

.faq__icon {
    flex: none;
    color: var(--muted);
    font-size: 20px;
    transition: transform 0.5s var(--ease-expo);
}

.faq__item[open] .faq__icon {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 24px 24px 72px;
    color: var(--body);
    font-size: 0.96rem;
    line-height: 1.9;
}

/* ==========================================================================
   お問い合わせ(濃紺の帯)
   ========================================================================== */
.ct {
    position: relative;
    padding-block: clamp(96px, 11vw, 150px);
    overflow: hidden;
    color: rgba(247, 251, 255, 0.84);
    background:
        radial-gradient(50% 70% at 10% 10%, rgba(45, 90, 160, 0.34), transparent 70%),
        radial-gradient(40% 60% at 95% 100%, rgba(48, 185, 196, 0.12), transparent 70%),
        var(--navy);
}

.ct__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}

.ct .eyebrow {
    color: rgba(247, 251, 255, 0.6);
}

.ct__title {
    color: rgba(247, 251, 255, 0.95);
}

.ct .rt__line {
    background: rgba(48, 185, 196, 0.8);
}

.ct__text {
    margin-top: 26px;
    line-height: 1.95;
}

.form {
    padding: clamp(26px, 3.4vw, 44px);
    border-radius: 20px;
    color: var(--body);
    background: var(--white);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.form__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
}

.req-tag {
    padding: 0 6px;
    border-radius: 4px;
    color: var(--brand);
    background: var(--blue-100);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.6;
}

.field input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #c9d6e4;
    border-radius: 8px;
    color: var(--ink);
    background: #fbfdff;
    font: inherit;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.field input::placeholder {
    color: #8492a3;
}

.field input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(45, 90, 160, 0.16);
}

.consent {
    margin-top: 22px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--body);
    font-size: 0.9rem;
    line-height: 1.6;
    cursor: pointer;
}

.consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: var(--brand);
}

.consent a {
    color: var(--brand);
    text-underline-offset: 3px;
}

.form__submit {
    width: 100%;
    margin-top: 24px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

/* 送信まわりの状態(送信は reci-rail-form.js と /api/reci-rail-contact) */
.form-fields {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: opacity 0.3s;
}

.form-fields:disabled {
    opacity: 0.6;
}

.form .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.form .btn:disabled:hover {
    border-color: var(--brand);
    background: var(--brand);
}

.form .btn:disabled:hover .ic {
    transform: none;
}

.field-error {
    margin-top: 6px;
    color: var(--danger);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.6;
}

.field input[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.field input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.14);
}

.consent input[aria-invalid="true"] + span {
    color: var(--danger);
}

.consent-field .field-error {
    padding-left: 28px;
}

.form-status {
    margin-bottom: 18px;
    color: var(--brand-deep);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.7;
}

.form-status:empty {
    display: none;
}

.form-status:focus {
    outline: none;
}

.form-status:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: 4px;
}

.form-notice {
    padding: 16px 18px;
    border: 1px solid var(--blue-200);
    border-radius: 12px;
    color: var(--ink);
    background: var(--blue-50);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.8;
}

.form-notice a {
    color: var(--brand);
    text-underline-offset: 3px;
}

.form-verification:not(:empty) {
    min-height: 65px;
    margin-top: 22px;
}

.form-retry {
    min-height: 40px;
    margin-top: 16px;
    padding: 0 18px;
    border: 1px solid var(--brand);
    border-radius: 2px;
    color: var(--brand);
    background: var(--white);
    font-size: 0.86rem;
    font-weight: 600;
    transition: background-color 0.4s var(--ease-expo);
}

.form-retry:hover {
    background: var(--blue-50);
}

.form.is-done .form-fields,
.form.is-done .form-status,
.form.is-done .form-retry,
.form.is-done .form-notice {
    display: none;
}

.form.is-unavailable .form-fields {
    display: none;
}

.form.is-unavailable .form-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.thanks {
    padding: 20px 4px 8px;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.thanks i {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ui-ok);
    background: var(--ui-ok-bg);
    font-size: 30px;
}

.thanks i .ic {
    stroke-width: 2.2;
}

.thanks b {
    color: var(--ink);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: auto-phrase;
    text-wrap: balance;
}

.thanks b:focus {
    outline: none;
}

.thanks p {
    max-width: 30em;
    color: var(--body);
    font-size: 0.9rem;
    line-height: 1.85;
}

.form__purpose {
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* ==========================================================================
   Footer / モバイル追従CTA
   ========================================================================== */
.ft {
    padding: 36px 0 calc(32px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--white);
}

.ft__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}

.ft__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ft__tag {
    color: var(--muted);
    font-size: 0.82rem;
}

.ft__links {
    display: flex;
    gap: 24px;
    font-size: 0.86rem;
}

.ft__links a {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--ink), var(--ink));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size 0.4s var(--ease-expo);
}

.ft__links a:hover {
    background-size: 100% 1px;
}

.ft__copy {
    width: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 0.74rem;
}

.mcta {
    display: none;
}

/* ==========================================================================
   Motion(JS 有効かつ reduced-motion でないときだけ初期状態を隠す)
   ========================================================================== */
.motion .hero__copy > * {
    animation: rise 1.4s var(--ease-expo) both;
}

.motion .hero__copy > :nth-child(1) { animation-delay: 0.15s; }
.motion .hero__copy > :nth-child(2) { animation-delay: 0.3s; }
.motion .hero__copy > :nth-child(3) { animation-delay: 0.52s; }
.motion .hero__copy > :nth-child(4) { animation-delay: 0.66s; }
.motion .hero__copy > :nth-child(5) { animation-delay: 0.76s; }

.motion .hero__mac .mac-wrap {
    animation: device-in 1.5s var(--ease-expo) 0.35s both;
}

.motion .hero__phone .phone {
    animation: device-in-up 1.5s var(--ease-expo) 0.6s both;
}

.motion .hero .bar {
    animation: bar-grow 1.2s var(--ease-expo) both;
    animation-delay: calc(0.9s + var(--i, 0) * 0.07s);
}

.motion .hero .bar__tip {
    animation: fade 0.6s var(--ease-slow) 1.7s both;
}

@keyframes rise {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes device-in {
    from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes device-in-up {
    from { opacity: 0; transform: translate3d(0, 48px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes bar-grow {
    from { transform: scaleY(0.04); }
    to { transform: none; }
}

@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.motion [data-rv] .rv {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 1.1s var(--ease-slow) calc(var(--d, 0) * 1s), transform 1.3s var(--ease-slow) calc(var(--d, 0) * 1s);
}

.motion [data-rv] .rt__text {
    transform: translate3d(0, 104%, 0);
    transition: transform 1.4s var(--ease-slow) 0.05s;
}

.motion [data-rv] .rt__line {
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-slow) 0.45s;
}

.motion [data-rv].is-visible .rv {
    opacity: 1;
    transform: none;
}

.motion [data-rv].is-visible .rt__text {
    transform: none;
}

.motion [data-rv].is-visible .rt__line {
    transform: scaleX(1);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) and (min-width: 1000px) {
    .hero__phone {
        --ip: clamp(9px, 1.2vh, 10.4px);
    }
}

@media (max-width: 999px) {
    :root {
        --header-h: 64px;
    }

    .nav {
        display: none;
    }

    .hd__cta {
        margin-left: auto;
        min-height: 38px;
        padding: 0 16px;
        font-size: 0.82rem;
    }

    .hero {
        min-height: 0;
    }

    .hero__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
        padding-bottom: 72px;
    }

    .hero__copy {
        max-width: 640px;
    }

    .hero__visual {
        --ipm: clamp(10px, calc(1.75vw + 3px), 12px);
        width: min(100%, 680px);
        height: calc(46.5 * var(--ipm) + 40px);
        margin: 0 auto;
    }

    .hero__mac {
        left: 0;
        right: auto;
        width: 90%;
    }

    .hero__phone {
        --ip: var(--ipm);
        left: auto;
        right: 0;
    }

    .hero__scroll {
        display: none;
    }

    /* 画面で見る: sticky をやめ、ステップごとに「文章+画面」を縦に積む */
    .walk {
        grid-template-columns: minmax(0, 1fr);
    }

    .walk__aside {
        display: none;
    }

    .walk__steps {
        padding-block: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(72px, 12vw, 112px);
    }

    .step {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .step__text {
        opacity: 1;
        max-width: 640px;
    }

    .step__text::after {
        transform: scaleY(1);
    }

    .step__btn {
        cursor: default;
    }

    .step__visual {
        display: flex;
        justify-content: center;
    }

    .step__visual .mac-wrap {
        max-width: 680px;
    }

    .feats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .env__grid,
    .ct__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1000px) {
    /* JS が無いときは、デスクトップでもステップごとに画面を出す */
    html:not(.js) .walk {
        grid-template-columns: minmax(0, 1fr);
    }

    html:not(.js) .walk__aside {
        display: none;
    }

    html:not(.js) .step__text {
        opacity: 1;
    }

    html:not(.js) .step {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 48px;
        min-height: 0;
        padding-block: 48px;
    }

    html:not(.js) .step__visual {
        display: flex;
        justify-content: center;
    }

    .step__btn:hover {
        color: var(--brand);
    }
}

@media (max-width: 1000px) {
    .points__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 44px;
    }

    .point {
        padding: 6px clamp(20px, 4vw, 40px);
    }

    .point:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .pr__cols {
        display: none;
    }

    .pr__list {
        display: flex;
        flex-direction: column;
        gap: 14px;
        border-top: 0;
    }

    .pr__row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        padding: 20px 18px 18px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--white);
        box-shadow: var(--shadow-sm);
    }

    .pr__arrow {
        justify-self: start;
        padding-left: 4px;
        font-size: 22px;
        transform: rotate(90deg);
        transform-origin: 11px 50%;
    }

    .pr__lab {
        display: block;
        margin-bottom: 2px;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
    }

    .pr__good .pr__lab {
        color: var(--brand);
    }

    .pr__txt .vh {
        display: none;
    }

    .hero__visual {
        --ipm: clamp(10px, 2.9vw, 12px);
        height: calc(46.5 * var(--ipm) + 96px);
    }

    .hero__mac {
        width: 100%;
    }

    .hero__phone {
        right: 4%;
    }

    .ft__in,
    .ft__brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft__brand {
        gap: 10px;
    }

    .ft {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    }

    .mcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: block;
        padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
        border-top: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transform: translateY(110%);
        transition: transform 0.5s var(--ease-expo);
    }

    .mcta.on {
        transform: none;
    }

    .mcta .btn {
        width: 100%;
        min-height: 50px;
        padding: 12px 18px;
    }
}

@media (max-width: 600px) {
    .points__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .point,
    .point:nth-child(odd) {
        padding: 28px 0;
        border-left: 0;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 18px;
    }

    .point:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .point__icon {
        grid-row: span 4;
        margin-bottom: 0;
    }

    .point > :not(.point__icon) {
        grid-column: 2;
    }

    .feats {
        grid-template-columns: minmax(0, 1fr);
    }

    .feat {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 16px;
    }

    .feat__top {
        grid-row: span 2;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 0;
    }

    .feat__num {
        order: -1;
    }

    .feat p {
        grid-column: 2;
    }

    .faq__item summary {
        padding: 18px 18px;
        gap: 12px;
        font-size: 0.96rem;
    }

    .faq__answer {
        padding: 0 18px 20px 62px;
        font-size: 0.92rem;
    }

    .compat__row {
        grid-template-columns: minmax(0, 1fr) 5.6em 5.6em;
        padding: 0 14px;
        font-size: 0.86rem;
    }
}

@media (max-width: 420px) {
    .hero h1 {
        font-size: clamp(1.9rem, 8.6vw, 2.2rem);
    }

    .hero .btn {
        width: 100%;
    }

    .stage__label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .hero__mac,
    .hero__phone {
        transform: none;
    }
}