:root {
        --bg: #fff;
        --card: #ffffff;
        --line: #dce2ea;
        --text: #2d3748;
        --muted: rgb(69, 90, 100);
        --primary: rgb(0, 188, 212);
        --primary-hover: rgba(0, 187, 212, 0.657);
        --radius: 4px;
    }

    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        min-height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
        background:
            radial-gradient(circle at 15% 15%, #ffffff 0%, #f3f5f9 42%),
            radial-gradient(circle at 85% 10%, #e9f0ff 0%, transparent 34%),
            var(--bg);
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .card {
        width: min(720px, 100%);
        border-radius: var(--radius);
        background: var(--card);
        /* box-shadow: 0 18px 45px rgba(25, 39, 74, 0.14); */
        overflow: hidden;
    }

    .card-header img {
        display: block;
        width: 100%;
        height: clamp(144px, 30vw, 230px);
        object-fit: cover;
    }

    .card-body {
        padding: clamp(24px, 4vw, 36px);
    }

    h1 {
        margin: 0 0 10px;
        font-size: clamp(22px, 3vw, 28px);
        line-height: 1.4;
        letter-spacing: 0.02em;
    }

    .description {
        margin: 0 0 24px;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.7;
    }

    label {
        display: block;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 700;
        color: var(--muted);
    }

    .select-wrap {
        position: relative;
        margin-bottom: 18px;
    }

    select {
        width: 100%;
        height: 50px;
        border-radius: 4px;
        border: 1px solid var(--line);
        padding: 0 44px 0 14px;
        font-size: 16px;
        background: #fff;
        color: var(--text);
        appearance: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    select:focus {
        border-color: #8ab4ff;
        outline: none;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    }

    .select-wrap::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 9px;
        height: 9px;
        border-right: 2px solid #8d9bb5;
        border-bottom: 2px solid #8d9bb5;
        transform: translateY(-65%) rotate(45deg);
        pointer-events: none;
    }

    button {
        width: 100%;
        height: 50px;
        border: 0;
        border-radius: 4px;
        background: var(--primary);
        color: #fff;
        font-size: 16px;
        /* font-weight: 700; */
        letter-spacing: 0.02em;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
    }

    button:hover {
        background: var(--primary-hover);
    }

    button:active {
        transform: translateY(1px);
    }

    .button-back {
        margin-top: 10px;
        background: #e5ebf3;
        color: #334155;
    }

    .button-back:hover {
        background: #d7e0eb;
    }

    .error {
        margin-top: 10px;
        color: #d92d20;
        font-size: 13px;
        min-height: 1.2em;
    }

    @media (max-width: 560px) {
        body {
            padding: 14px;
        }

        .card-body {
            padding: 20px 16px 18px;
        }
    }

    form {
        margin-top: 16px;
    }

    /* page-jichiren2 */
    body.page-jichiren2 {
        align-items: flex-start;
    }

    body.page-jichiren2 .jichiren-search-card {
        min-height: 760px;
    }

    body.page-jichiren2 .lookup-wrap {
        margin-top: 8px;
    }

    body.page-jichiren2 .lookup-header {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: baseline;
        margin-bottom: 10px;
        color: #4a5568;
        font-size: 13px;
    }

    body.page-jichiren2 .lookup-input {
        width: 100%;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #dce2ea;
        padding: 0 14px;
        font-size: 16px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    body.page-jichiren2 .lookup-input:focus {
        border-color: #8ab4ff;
        outline: none;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    }

    body.page-jichiren2 .lookup-input[disabled] {
        background: #f4f6f9;
        color: #7a869a;
        cursor: not-allowed;
    }

    body.page-jichiren2 .suggestion-list {
        margin: 8px 0 0;
        padding: 0;
        list-style: none;
        border: 1px solid #dce2ea;
        border-radius: 6px;
        height: 270px;
        overflow: auto;
        background: #fff;
    }

    body.page-jichiren2 .suggestion-item {
        padding: 10px 12px;
        border-top: 1px solid #edf1f5;
        cursor: pointer;
    }

    body.page-jichiren2 .suggestion-item:first-child {
        border-top: 0;
    }

    body.page-jichiren2 .suggestion-item:hover {
        background: #f4f9ff;
    }

    body.page-jichiren2 .suggestion-main {
        font-size: 14px;
        color: #2d3748;
        margin: 0;
    }

    body.page-jichiren2 .suggestion-placeholder {
        padding: 10px 12px;
        font-size: 13px;
        color: #718096;
    }

    body.page-jichiren2 .selection-chip {
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        padding: 8px 12px;
        background: #edf7ff;
        color: #1f2937;
        font-size: 13px;
        display: none;
    }

    body.page-jichiren2 .selection-chip.is-visible {
        display: inline-flex;
    }

    body.page-jichiren2 .selection-empty {
        margin-top: 12px;
        font-size: 13px;
        color: #718096;
    }

    @media (max-width: 560px) {
        body.page-jichiren2 .jichiren-search-card {
            min-height: 700px;
        }
    }