/* Hallmark · route: custom (bespoke) · structure: seminar poster / invitation / speaker / timetable / access / registration
 * idea: a friendly invitation carrying the supplied flyer's blue, yellow, and parent-child artwork
 * display: Zen Maru Gothic · body: BIZ UDPGothic · context: supplied flyer + 2026-09-17 meeting
 * paper: oklch(98.6% .008 220) · accent: oklch(88% .135 88) · motion: button press only
 * pre-emit critique: P4 H4 E4 S5 R4 V4 */
@import url('tokens.css');
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{scroll-padding-top:2rem}
body{font-family:var(--font-body);font-size:var(--text-body);line-height:1.85;color:var(--color-ink);background:var(--color-paper);padding-bottom:100px}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,figure{margin:0}
p+p{margin-top:var(--space-sm)}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:700;overflow-wrap:anywhere;min-width:0}
h2{font-size:var(--text-heading);line-height:1.6;letter-spacing:.01em}
h3{font-size:var(--text-medium);line-height:1.65}
a{color:inherit;text-underline-offset:.25em;touch-action:manipulation}
a:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}
a:hover{text-decoration-thickness:2px}
a:active{opacity:.8}
.wrap{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.section{padding-block:var(--space-section)}
.small,.eyebrow,figcaption{font-size:var(--text-small)}
.muted{color:var(--color-muted)}
.eyebrow{color:var(--color-blue);font-weight:700;margin-bottom:var(--space-sm)}
.skip-link{position:absolute;top:-100px;left:20px;z-index:10;background:var(--color-accent);padding:var(--space-sm)}
.skip-link:focus{top:12px}
.masthead{display:flex;justify-content:space-between;align-items:center;padding-block:var(--space-sm);gap:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule)}
.brand{font-family:var(--font-display);font-weight:900;font-size:var(--text-medium);color:var(--color-blue);text-decoration:none;display:flex;gap:var(--space-xs);white-space:nowrap;min-height:52px;align-items:center}
.subsidy{font-size:var(--text-small);color:var(--color-muted)}
.hero{display:grid;padding-top:var(--space-xl);gap:var(--space-lg);position:relative}
.hero-intro{font-size:var(--text-small);font-weight:700;margin-bottom:var(--space-md)}
h1{font-size:var(--text-display);line-height:1.45;letter-spacing:-.025em;color:var(--color-blue);font-weight:900}
.marked{background:linear-gradient(var(--color-clear) 60%,var(--color-accent) 60%,var(--color-accent) 92%,var(--color-clear) 92%)}
.hero-lead{margin-top:var(--space-md);line-height:1.85}
.hero-topic{margin-top:var(--space-lg);font-size:var(--text-small);color:var(--color-muted)}
.hero-topic strong{display:block;color:var(--color-ink);font-size:var(--text-medium);font-family:var(--font-display);margin-top:var(--space-xs);line-height:1.6}
.hero-art{align-self:center;text-align:center;margin:0 auto;width:min(100%,420px)}
.hero-art img{width:100%;mix-blend-mode:multiply}
.hero-art figcaption{font-family:var(--font-display);color:var(--color-blue);font-weight:700;margin-top:var(--space-sm)}
.event-ticket{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-md);background:var(--color-white);border-top:4px solid var(--color-blue);border-bottom:1px solid var(--color-rule);padding:var(--space-md);margin-top:var(--space-sm)}
.ticket-date .year{font-size:var(--text-small);font-weight:700}
.ticket-date p{display:flex;gap:var(--space-sm);align-items:center;line-height:1.1}
.ticket-date strong{font-size:3.35rem;letter-spacing:-.05em;font-family:var(--font-display);font-weight:900;font-variant-numeric:tabular-nums;color:var(--color-blue)}
.date-dot{padding-inline:.02em}
.day{font-size:var(--text-small);font-weight:700;border:1px solid var(--color-rule);border-radius:50%;padding:.2rem .5rem}
.ticket-time p:first-child{display:flex;flex-direction:column;line-height:1.75}
.ticket-time strong{font-size:var(--text-medium);font-variant-numeric:tabular-nums}
.ticket-time .small{margin-top:.25rem;color:var(--color-muted)}
.ticket-place strong{display:block;font-size:var(--text-medium)}
.ticket-place p+p{margin-top:0}
.ticket-free{display:flex;gap:var(--space-sm);align-items:center;font-size:var(--text-small)}
.ticket-free strong{background:var(--color-accent);padding:.25rem .7rem;white-space:nowrap}
.invitation{display:grid;gap:var(--space-xl)}
.intro-column p{margin-top:var(--space-md)}
.worries ul{list-style:none;padding:0;margin:0 0 var(--space-lg)}
.worries li{padding:var(--space-sm) 0;border-bottom:1px solid var(--color-rule)}
.worries li:first-child{padding-top:0}
.worries strong{font-weight:700}
.seminar-section{background:var(--color-sky);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.seminar-heading{max-width:760px}
.seminar-heading>p:last-child{margin-top:var(--space-md)}
.speaker{display:grid;gap:var(--space-lg);margin-top:var(--space-xl);align-items:center}
.speaker figure{width:190px;justify-self:start}
.speaker figure img{aspect-ratio:1;object-fit:cover;border-radius:50%}
.speaker-role{font-size:var(--text-small)}
.speaker h3{font-size:1.75rem;margin-block:var(--space-xs) var(--space-md)}
.speaker h3 span{font-size:var(--text-small);font-family:var(--font-body);font-weight:400;display:block}
.speaker-copy>p:last-child{max-width:36em}
.about-k2{border-top:1px solid var(--color-rule);margin-top:var(--space-xl);padding-top:var(--space-lg);max-width:850px}
.about-k2 h3{font-size:var(--text-body);margin-bottom:var(--space-xs)}
.about-k2 p{font-size:var(--text-small);color:var(--color-muted)}
.section-heading{display:grid;gap:var(--space-md);margin-bottom:var(--space-xl)}
.schedule{list-style:none;margin:0;padding:0}
.schedule li{display:grid;gap:var(--space-sm);padding:var(--space-lg) var(--space-md);border-top:1px solid var(--color-rule)}
.schedule li:last-child{padding-bottom:0}
.schedule-time{font-size:var(--text-medium);color:var(--color-blue);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.schedule-time span{padding-inline:.25rem}
.schedule h3{font-size:1.5rem;margin-bottom:var(--space-xs)}
.schedule h3 .small{display:block;font-family:var(--font-body);font-weight:400}
.schedule-main{background:var(--color-cream)}
.schedule-theme{font-weight:700}
.access-section{background:var(--color-white)}
.access{display:grid;gap:var(--space-xl);align-items:center}
.venue-name{font-size:1.6rem;font-weight:700;margin-top:var(--space-lg)}
.venue-name span{display:block;font-size:var(--text-body);font-weight:400}
.venue-notice{font-size:var(--text-small);margin-top:var(--space-md);max-width:30em}
.text-link{display:inline-flex;gap:var(--space-sm);align-items:center;min-height:56px;font-weight:700;color:var(--color-blue);white-space:nowrap}
.map{background:var(--color-cream);padding:var(--space-sm)}
.map img{width:100%}
.map figcaption{padding-top:var(--space-xs);color:var(--color-muted)}
.details{max-width:900px}
.details-list{margin-top:var(--space-lg);margin-bottom:0}
.details-list>div{display:grid;gap:var(--space-xs);padding-block:var(--space-md);border-bottom:1px solid var(--color-rule)}
dt{font-weight:700}dd{margin:0}
.flyer-link{margin-top:var(--space-md)}
.signup-section{background:var(--color-cream);padding-block:var(--space-section)}
.signup-inner{text-align:center;max-width:760px}
.signup-inner>p:not(.eyebrow){margin-top:var(--space-md)}
.signup-actions{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);margin-top:var(--space-lg)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-md);background:var(--color-accent);color:var(--color-ink);font-size:var(--text-body);font-weight:700;border:1px solid var(--color-clear);border-radius:var(--radius-sm);min-height:56px;padding:.85rem 1.5rem;text-decoration:none;white-space:nowrap;transition:transform var(--dur-short) var(--ease-out)}
.button:hover{background:var(--color-accent-hover);text-decoration:underline}
.button:active{transform:translateY(2px);opacity:1}
.signup-actions .button{min-width:min(100%,330px)}
.phone-contact{margin-top:var(--space-xl)}
.phone-contact>p{font-size:var(--text-small)}
.phone-contact>a{display:inline-flex;min-height:56px;align-items:center;font-size:clamp(1.4rem,3vw,1.85rem);font-weight:700;color:var(--color-blue);white-space:nowrap}
.phone-contact p+p{margin-top:0}
.privacy{max-width:42em;margin-inline:auto;color:var(--color-muted)}
.footer{padding-block:var(--space-xl)}
.organizer{display:flex;flex-direction:column;gap:var(--space-md)}
.organizer>img{width:min(100%,320px);height:auto;align-self:flex-start;flex-shrink:0;mix-blend-mode:multiply}
.organizer>div{min-width:0}
.organizer p{font-size:var(--text-small);margin-top:0}
.organizer p span{display:block;color:var(--color-muted)}
.footer-note{font-size:var(--text-small);color:var(--color-muted);margin-top:var(--space-lg)}
.sticky-cta{position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:12px 20px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--color-rule);background:var(--color-paper)}
.sticky-info{font-size:var(--text-small);line-height:1.5;white-space:nowrap}
.sticky-info strong,.sticky-info span{display:block}
.sticky-cta .button{padding:.75rem;gap:var(--space-xs)}
.sticky-cta[hidden]{display:none}
.desktop-break{display:none}
@media(min-width:40rem){
 .wrap{width:min(1120px,calc(100% - 80px))}
 .event-ticket{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--space-lg)}
 .ticket-free{flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
 .speaker{grid-template-columns:200px minmax(0,1fr);gap:var(--space-xl)}
 .speaker figure{width:200px}
 .details-list>div{grid-template-columns:140px minmax(0,1fr);gap:var(--space-lg)}
 .organizer{flex-direction:row;align-items:center;gap:var(--space-lg)}
 .organizer>img{width:clamp(220px,28vw,320px);align-self:center}
 .organizer p span{display:inline-block;min-width:5.5em}
 .mobile-break{display:none}
 .schedule li{grid-template-columns:190px minmax(0,1fr);gap:var(--space-lg);padding-inline:var(--space-lg)}
 .schedule h3 .small{display:inline-block;margin-left:var(--space-xs)}
 .sticky-cta{left:auto;right:24px;bottom:24px;border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:12px 16px}
}
@media(min-width:48rem){
 .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-md)}
 .hero-art{width:100%}
 .event-ticket{grid-column:1/-1}
}
@media(min-width:60rem){
 .hero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:var(--space-xl);row-gap:var(--space-md);padding-top:var(--space-lg)}
 .hero-intro{margin-bottom:var(--space-sm)}
 .hero-topic{margin-top:var(--space-md)}
 .hero-topic strong br{display:none}
 .hero-art{width:100%;padding-top:var(--space-md)}
 .hero-art figcaption{margin-top:var(--space-lg)}
 .event-ticket{grid-column:1/-1;grid-template-columns:180px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);align-items:center;padding:var(--space-md) var(--space-lg);gap:var(--space-md)}
 .ticket-date strong{font-size:3.75rem}
 .ticket-time,.ticket-place,.ticket-free{border-left:1px solid var(--color-rule);padding-left:var(--space-md)}
 .ticket-free{align-items:center}
 .invitation{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--space-2xl)}
 .seminar-section{border-radius:64px 64px 0 0}
 .seminar-heading{margin-left:var(--space-2xl)}
 .speaker{max-width:880px;margin-inline:auto;grid-template-columns:240px minmax(0,1fr);margin-top:var(--space-2xl)}
 .speaker figure{width:240px}
 .about-k2{margin-inline:auto}
 .section-heading{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
 .section-heading>p{justify-self:end}
 .access{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-2xl)}
 .desktop-break{display:block}
}
@media(max-width:39.99rem){.masthead{display:block;padding-block:var(--space-sm)}.brand{min-height:52px;font-size:1.1rem}.subsidy{font-size:var(--text-small);margin-top:4px}.hero-art{max-width:260px}.ticket-date{display:flex;align-items:center;gap:var(--space-md)}.ticket-free{flex-wrap:wrap}.hero-intro{font-size:var(--text-small)}.hero-topic strong br{display:block}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.button,.ticket-free strong{color:var(--color-accent-ink)}
@media print{body{padding-bottom:0}.sticky-cta,.skip-link{display:none}.section{padding-block:2rem}.hero{padding-top:1rem}a{color:var(--color-ink)}section,figure{break-inside:avoid}}

/* 2026-10-08：チラシ由来の色・書体を維持した内容追加 */
.hero-audience{max-width:38em;margin-top:var(--space-sm)}.hero-apply{grid-column:1/-1}.hero-apply .signup-actions{margin-top:var(--space-sm)}
.learning{max-width:880px}.learning>p:not(.eyebrow){max-width:38em;margin-top:var(--space-lg)}.learning-list{padding-left:1.4em;margin-block:var(--space-lg)}.learning-list li{padding-block:.6rem;border-bottom:1px solid var(--color-rule)}
.early-invitation{max-width:880px}.early-invitation>p:not(.eyebrow){max-width:38em;margin-top:var(--space-md)}.about-k2 .history-note{margin-bottom:var(--space-md)}
.signup-actions .button{max-width:100%;min-width:0;padding-inline:1rem;gap:.6rem}.ticket-time strong{font-size:1.6rem}
@media(max-width:47.99rem){.hero-copy{order:0}.event-ticket{order:1}.hero-art{order:2}.event-ticket{gap:.75rem}.ticket-time p:first-child{flex-direction:row;gap:.5rem;align-items:center}.ticket-place p{display:inline}.ticket-place strong{display:inline}.ticket-place .small{display:block}}

@media(max-width:39.99rem){.ticket-date{gap:.5rem}.ticket-date .year{white-space:nowrap}.ticket-date strong{font-size:1.75rem}.ticket-date p{gap:.5rem}.ticket-time p:first-child>span{white-space:nowrap}.ticket-time strong{font-size:1.4rem;white-space:nowrap}}