/* ナマケモノID: どのアプリにも寄せない、落ち着いた緑(森)の中立なデザイン */
:root {
    --id-bg: #F5F3EC;
    --id-surface: #FFFFFF;
    --id-text: #26302A;
    --id-muted: #5F6B63;
    --id-border: #E2E0D6;
    --id-primary: #5E8C61;
    --id-primary-dark: #4A7150;
    --id-soft: #EEF4EC;
}

body {
    background: var(--id-bg);
    color: var(--id-text);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, .id-brand-name {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
}

.id-header {
    background: var(--id-surface);
    border-bottom: 1px solid var(--id-border);
    padding: 0.6rem 1rem;
}
.id-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
    max-width: 560px;
    margin: 0 auto;
}
.id-brand img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}
.id-brand-name {
    display: block;
    font-size: 1.15rem;
    line-height: 1.2;
}
.id-brand-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--id-muted);
}

.id-main {
    max-width: 560px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.id-card {
    background: var(--id-surface);
    border: 1px solid var(--id-border);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* どのサービスから来たか(画面の一番上に大きく出す) */
.id-origin {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--id-soft);
    border: 1px solid #D5E4D3;
    border-radius: 14px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}
.id-origin .emoji {
    font-size: 1.8rem;
}
.id-origin strong {
    font-size: 1.05rem;
}

.btn-primary {
    background: var(--id-primary);
    border-color: var(--id-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--id-primary-dark) !important;
    border-color: var(--id-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--id-primary-dark);
    border-color: var(--id-primary);
}
.btn-outline-primary:hover {
    background: var(--id-primary);
    border-color: var(--id-primary);
}
a {
    color: var(--id-primary-dark);
}
.form-check-input:checked {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
}
.form-control:focus, .form-check-input:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 0.2rem rgba(94, 140, 97, 0.2);
}

.btn-google {
    background: #fff;
    border: 1px solid #DADCE0;
    color: #3C4043;
    font-weight: 500;
}
.btn-google:hover {
    background: #F8F9FA;
}

.id-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--id-muted);
    font-size: 0.85rem;
    margin: 1rem 0;
}
.id-divider::before, .id-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--id-border);
}

.id-service {
    border: 1px solid var(--id-border);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}
.id-service .form-check-label {
    font-weight: 700;
}

.id-note {
    font-size: 0.85rem;
    color: var(--id-muted);
}

.id-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    padding: 1rem;
    font-size: 0.8rem;
    color: var(--id-muted);
}