:root {
    color-scheme: light;
    --ink: #182b40;
    --muted: #43576b;
    --blue: #20598c;
    --border: #ccd8e3;
    --pale: #edf5fa;
    font-family: system-ui, "Yu Gothic", Meiryo, sans-serif;
    color: var(--ink);
    background: #f5f7fa;
    line-height: 1.65;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
p, h1, h2, h3 { margin: 0; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid #087bac; outline-offset: 3px; }
.wrap { width: min(100% - 32px, 920px); margin-inline: auto; }

.site-header { background: white; border-bottom: 1px solid var(--border); padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.brand img { object-fit: contain; }

.hero {
    margin-top: 24px;
    background: var(--pale);
    border-left: 5px solid var(--blue);
    border-radius: 6px;
    padding: clamp(20px, 5vw, 40px);
}
.eyebrow { color: var(--blue); font-weight: 700; }
h1 { font-size: clamp(24px, 6vw, 44px); line-height: 1.25; margin: 8px 0; }
h1 span { display: inline-block; max-width: 100%; }
.hero-copy { color: var(--muted); }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; font-weight: 700; }
.event-meta time { font-size: clamp(1.125rem, 3.5vw, 1.375rem); white-space: nowrap; }
.badge { background: var(--blue); color: white; border-radius: 4px; padding: 2px 10px; font-size: .875rem; }
.hero-participation { color: var(--blue); }

.program { margin-top: 28px; }
h2 { font-size: clamp(22px, 4vw, 27px); margin-bottom: 10px; line-height: 1.4; }
.sessions { display: grid; gap: 12px; }
.session {
    background: white;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    padding: 14px 15px;
}
.session-repeat { --accent: #ac471b; }
.session-custom { --accent: #3d7326; }
.session-one_off { --accent: #006e8e; }
.session-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 7px;
}
.session-title h3 { color: var(--accent); font-size: 1.25rem; }
.session-time {
    background: #eaf1f7;
    border-radius: 4px;
    padding: 2px 8px;
    color: var(--ink);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}
.session-examples { color: var(--muted); font-size: .875rem; }
.session-examples strong { color: var(--accent); }
.session-intro, .session-description, .session ul { font-size: .9375rem; }
.session-intro { margin-top: 9px; }
.session-details > summary {
    display: block;
    cursor: pointer;
    min-height: 44px;
    padding-block: 9px 4px;
}
.session-details > summary::-webkit-details-marker { display: none; }
.session-teaser { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 4px; }
.session-toggle-text { color: var(--blue); font-weight: 700; text-decoration: underline; }
.session-details[open] .session-expand, .session-details:not([open]) .session-collapse { display: none; }
.session-description { margin-top: 5px; }
.session-description p + p { margin-top: 5px; }
.session h4 { font-size: .9rem; margin: 10px 0 3px; }
.session ul { margin: 0; padding-left: 1.2em; list-style: square; }
.session li + li { margin-top: 3px; }

.panel { margin: 28px 0 36px; background: white; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: 8px; padding: clamp(16px, 4vw, 32px); }
fieldset { border: 0; margin: 20px 0; padding: 0; min-width: 0; }
legend, .field label { font-weight: 700; }
.required, .optional { display: inline-block; vertical-align: .08em; font-size: .75rem; border-radius: 3px; padding: 0 5px; margin-left: 4px; }
.required { background: #fce9e4; color: #883515; }
.optional { background: #edf1f5; color: var(--muted); }
.hint { color: var(--muted); font-size: .875rem; }
.choices, .fields { display: grid; gap: 10px 16px; margin-top: 8px; }
.choice, .consent { display: flex; align-items: start; gap: 10px; cursor: pointer; }
.choice { background: #f7fafc; border: 1px solid var(--border); border-radius: 5px; padding: 10px; }
input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 4px 0 0; accent-color: var(--blue); }
.field { min-width: 0; }
.field label { display: block; }
.field input, .field textarea {
    display: block;
    width: 100%;
    margin-top: 4px;
    border: 1px solid #8296a8;
    border-radius: 5px;
    background: white;
    color: var(--ink);
    font: inherit;
    padding: 8px 10px;
    min-height: 44px;
}
.field textarea { resize: vertical; }
.privacy { background: #f3f7fa; padding: 12px 14px; border-radius: 5px; margin: 20px 0; font-size: .9rem; }
.consent { margin-top: 10px; font-weight: 700; }
.button {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 10px 16px;
    min-height: 44px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.primary { background: var(--blue); color: white; }
.primary:hover { background: #17476f; }
.secondary { background: white; border-color: var(--border); color: var(--blue); }
.secondary:hover { background: var(--pale); }
.button:disabled { opacity: .65; cursor: wait; }
.summary { display: grid; grid-template-columns: minmax(96px, .35fr) minmax(0, 1fr); gap: 0 10px; margin: 16px 0; }
.summary dt, .summary dd { border-bottom: 1px solid var(--border); padding: 8px 0; }
.summary dt { font-weight: 700; }
.summary dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.summary ul, .errors ul { margin: 0; padding-left: 20px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.errors { background: #fdf0eb; color: #883515; padding: 10px 12px; border-radius: 4px; margin: 10px 0; }
.panel > .secondary { margin-top: 14px; }
.site-footer { background: #18304a; color: white; padding: 18px 0; font-size: .875rem; }
.site-footer a { color: white; }

@media (min-width: 680px) {
    .session-details > summary { display: none; }
    .choices, .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .field.full { grid-column: 1 / -1; }
}