@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=DM+Sans:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap');

:root { --cream:#fbf7ed; --ink:#3e2528; --brown:#6a3938; --lilac:#c19bea; --lilac-deep:#9664d8; --yellow:#f4dc8b; --line:#dfd4cf; --marker:'Caveat',cursive; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Zen Maru Gothic', sans-serif; line-height:1.8; overflow-x:hidden; }
.nowrap { white-space:nowrap; }
a { color:inherit; text-decoration:none; }
.site-notice { margin:0; padding:11px 7vw; text-align:center; background:var(--yellow); color:var(--brown); font-size:.76rem; font-weight:700; letter-spacing:.01em; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:auto; padding:27px 5vw; position:absolute; z-index:5; left:0; right:0; background:var(--cream); }
.brand { display:block; }
.brand-logo { display:block; height:34px; width:auto; mix-blend-mode:multiply; }
.main-nav { display:flex; align-items:center; gap:31px; font-size:.78rem; font-weight:700; }
.main-nav a:not(.nav-cta) { transition:color .2s; }.main-nav a:not(.nav-cta):hover { color:var(--lilac-deep); }
.nav-cta { background:var(--ink); color:white; padding:11px 18px; border-radius:99px; }
.menu-toggle { display:none; background:none; border:0; width:40px; padding:5px; }.menu-toggle span { display:block; height:2px; background:var(--ink); margin:7px 0; }
.section-pad { padding:115px 7vw; }.back-to-top { display:grid; place-items:center; width:46px; height:46px; margin:56px auto 0; border:1px solid var(--ink); border-radius:50%; font-size:1.2rem; color:var(--ink); transition:background .2s,color .2s,transform .2s; }.back-to-top:hover { background:var(--ink); color:#fff; transform:translateY(-4px); }.classes .back-to-top { border-color:var(--cream); color:var(--cream); }.classes .back-to-top:hover { background:var(--cream); color:var(--ink); }.hero { min-height:800px; max-width:1440px; margin:auto; padding-top:190px; display:grid; grid-template-columns:45% 55%; align-items:center; position:relative; }
.hero-copy { position:relative; z-index:2; }.eyebrow,.mini-label,.class-age { font-family:'DM Sans',sans-serif; font-size:.68rem; letter-spacing:.18em; font-weight:700; }.section-kicker { font-family:'DM Sans',sans-serif; font-size:.82rem; letter-spacing:.14em; font-weight:700; }.eyebrow { color:var(--lilac-deep); margin:0 0 19px; }.hero h1 { font-size:clamp(2.6rem,5vw,3.9rem); line-height:1.12; letter-spacing:-.1em; margin:0 0 25px; font-weight:900; }.hero h1 em,.contact h2 em { color:var(--lilac-deep); font-style:normal; font-family:var(--marker); font-weight:700; font-size:1.14em; }.hero-lead { font-size:1.08rem; line-height:2.05; margin-bottom:35px; }.hero-actions { display:flex; align-items:center; gap:25px; }.button { display:inline-flex; align-items:center; border-radius:99px; padding:15px 24px; font-weight:700; border:0; cursor:pointer; font-family:inherit; font-size:.86rem; }.button-dark { color:#fff; background:var(--ink); box-shadow:5px 5px 0 var(--yellow); transition:transform .2s,box-shadow .2s; }.button-dark:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--yellow); }.text-link { font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px; font-size:.82rem; }.text-link span { margin-left:9px; color:var(--lilac-deep); }
.hero-visual { height:600px; position:relative; }.lavender-blob { position:absolute; width:75%; height:82%; background:var(--lilac); border-radius:49% 51% 52% 48% / 47% 39% 61% 53%; top:5%; right:4%; transform:rotate(13deg); }.hero-photo-frame { position:absolute; width:72%; aspect-ratio:1; right:13%; top:5%; overflow:hidden; border-radius:50%; box-shadow:12px 18px 0 rgba(106,57,56,.08); }.hero-photo { width:100%; height:100%; object-fit:cover; object-position:50% 45%; }.scribble { font-family:var(--marker); font-weight:700; color:var(--lilac-deep); line-height:.85; position:absolute; z-index:2; }.scribble-top { top:6%; right:-2%; font-size:2.6rem; transform:rotate(9deg); }.hero-sticker { position:absolute; z-index:3; }.sticker-one { bottom:5%; left:0; color:var(--lilac-deep); font-family:var(--marker); font-weight:700; font-size:1.9rem; line-height:.95; transform:rotate(-10deg); }.sticker-two { right:0; bottom:12%; color:var(--yellow); font-size:4rem; }.hero-note { position:absolute; top:32%; right:-1%; z-index:3; border:2px solid var(--ink); border-radius:50%; padding:16px 11px; text-align:center; background:var(--cream); font-family:'DM Sans',sans-serif; font-size:.63rem; line-height:1.2; transform:rotate(10deg); }.hero-note strong { font-size:1.35rem; }.scroll-note { position:absolute; bottom:43px; left:7vw; display:flex; align-items:center; gap:11px; font:700 .62rem 'DM Sans',sans-serif; letter-spacing:.15em; }.scroll-note span { width:30px; height:1px; background:var(--ink); }
.section-kicker { display:flex; align-items:center; gap:12px; color:var(--lilac-deep); margin-bottom:34px; }.kicker-mark { font-size:1.05rem; transform:rotate(-8deg); }.intro { max-width:1280px; margin:auto; }.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; margin-bottom:85px; }.intro-title h2,.flow h2 { font-size:clamp(1.9rem,10vw,5rem); letter-spacing:-.1em; line-height:1.3; margin:0; }.intro-title h2 span,.flow h2 span { color:var(--lilac-deep); font-family:var(--marker); font-weight:700; letter-spacing:0; font-size:1.14em; }.mini-label { margin-bottom:15px; color:var(--brown); }.intro-body { padding-top:35px; max-width:420px; position:relative; }.intro-body p { margin:0 0 18px; font-size:.97rem; }.intro-body .intro-quote { font-family:var(--marker); font-weight:700; font-size:1.9rem; line-height:1.25; color:var(--lilac-deep); margin:6px 0 26px; }.circle-link { position:absolute; right:0; bottom:-20px; display:grid; place-items:center; width:62px; height:62px; border:1px solid var(--ink); border-radius:50%; font-size:1.5rem; transition:background .2s,color .2s; }.circle-link:hover { background:var(--ink); color:#fff; }.value-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.value-card { padding:31px 30px 35px; min-height:245px; background:#fffdf7; border-radius:5px; position:relative; border:1px solid #f0eadd; }.value-card-lilac { background:#e9ddfa; }.value-card-yellow { background:#fff0b6; }.value-icon { font-size:1.7rem; color:var(--lilac-deep); margin:0 0 14px; transform:rotate(-6deg); display:inline-block; }.value-card-lilac .value-icon { transform:rotate(4deg); }.value-card-yellow .value-icon { color:var(--brown); transform:rotate(-3deg); }.value-card h3 { margin:0 0 4px; font-size:1.1rem; }.value-card p { margin:0; font-size:.8rem; line-height:1.8; }
.offerings { max-width:1280px; margin:auto; }.offerings-heading { max-width:560px; margin-bottom:50px; }.offerings-heading h2 { font-size:clamp(1.3rem,6.7vw,2.75rem); letter-spacing:-.08em; line-height:1.32; margin:0 0 16px; }.offerings-heading h2 span { color:var(--lilac-deep); font-family:var(--marker); font-weight:700; letter-spacing:0; font-size:1.1em; }.offerings-heading p { margin:0; font-size:.95rem; color:var(--brown); }.offer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.offer-card { padding:28px 26px 30px; background:#fffdf7; border:1px solid #f0eadd; border-radius:5px; display:flex; flex-direction:column; gap:10px; }.offer-card-soon { background:transparent; border:1.5px dashed #ddceef; }.offer-card .offer-status { flex:0 0 auto; align-self:flex-start; margin:0; font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:5px 12px; border-radius:99px; background:var(--ink); color:#fff; }.offer-card-soon .offer-status { background:transparent; border:1px solid var(--lilac-deep); color:var(--lilac-deep); }.offer-card h3 { margin:2px 0 0; font:700 1.35rem 'DM Sans',sans-serif; letter-spacing:.01em; }.offer-card p { margin:0; font-size:.83rem; line-height:1.75; color:var(--ink); flex:1; }.offer-card-soon p { color:var(--brown); }.offer-card .text-link { align-self:flex-start; margin-top:2px; }
.classes { background:var(--ink); color:var(--cream); }.classes .section-kicker { color:var(--lilac); }.light-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; }.light-heading h2 { font-size:clamp(3rem,6vw,5.7rem); line-height:1.08; letter-spacing:-.1em; margin:0; }.light-heading h2 em { color:var(--yellow); font-style:normal; font-family:var(--marker); font-weight:700; font-size:1.14em; }.light-heading p { color:#dbcfc4; margin:0 8% 4px 0; font-size:.9rem; }.class-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1200px; margin:auto; }.class-item { background:var(--cream); color:var(--ink); border-radius:5px; overflow:hidden; }.class-image { height:285px; position:relative; overflow:hidden; display:flex; align-items:end; padding:20px; }.class-image::after { content:''; position:absolute; inset:0; opacity:.4; background:url('images/logo-mark.png') center/60% no-repeat; mix-blend-mode:multiply; }.class-image span { position:relative; z-index:1; color:white; font:700 1.15rem 'DM Sans',sans-serif; letter-spacing:.07em; }.class-image-kids { background:var(--lilac-deep); }.class-image-junior { background:var(--yellow); }.class-image-junior span { color:var(--ink); }.class-image-general { background:transparent; border:1.5px dashed #ddceef; }.class-image-general span:not(.class-soon-badge) { color:var(--brown); }.class-image .class-soon-badge { position:absolute; top:18px; left:18px; z-index:2; font-size:.62rem; font-weight:700; letter-spacing:.03em; padding:4px 11px; border-radius:99px; background:var(--cream); color:var(--brown); border:1px solid var(--brown); }.class-info { position:relative; padding:22px 24px 25px; }.class-age { display:flex; align-items:center; gap:8px; color:var(--lilac-deep); margin:0 0 3px; font-size:.62rem; }.age-badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--lilac-deep); color:#fff; font-family:'DM Sans',sans-serif; font-size:.65rem; }.class-info h3 { font:700 1.5rem 'DM Sans',sans-serif; margin:0 0 6px; }.class-info p:not(.class-age) { font-size:.78rem; line-height:1.7; margin:0; max-width:220px; }.class-info a { position:absolute; right:23px; bottom:25px; width:37px; height:37px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-size:1.25rem; }
.profile { max-width:1280px; margin:auto; }.profile-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:10%; align-items:start; }.profile-photo-frame { border-radius:32px 32px 32px 6px; overflow:hidden; border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--yellow); aspect-ratio:.95; }.profile-photo { width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block; }.profile-body h2 { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-size:clamp(2rem,4vw,2.85rem); letter-spacing:-.05em; margin:8px 0 22px; }.profile-body h2 span { font-family:'DM Sans',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--lilac-deep); }.profile-bio { font-size:.92rem; line-height:1.9; margin:0 0 16px; max-width:520px; }.profile-history { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }.history-list { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; }.history-list li { font-size:.83rem; line-height:1.6; padding-left:20px; position:relative; }.history-list li::before { content:'✿'; position:absolute; left:0; top:0; color:var(--lilac-deep); font-size:.72rem; }
.event { background:#f1e6fb; }.event-inner { max-width:1280px; margin:auto; display:grid; grid-template-columns:1.1fr .9fr; gap:12%; align-items:start; margin-bottom:60px; }.event-heading h2 { font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.1em; line-height:1.2; margin:14px 0 20px; }.event-heading h2 span { color:var(--lilac-deep); font-family:var(--marker); font-weight:700; letter-spacing:0; font-size:1.05em; }.event-copy { font-size:.92rem; margin:0 0 30px; }.event-meta p { font-size:.85rem; margin:0 0 14px; display:flex; gap:14px; }.event-meta span { flex:0 0 auto; font-family:'DM Sans',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.1em; padding:4px 12px; border-radius:99px; background:var(--ink); color:#fff; height:fit-content; }.event-schedule { display:grid; gap:16px; }.schedule-card { background:#fffdf7; border:1px solid #e5d6f5; border-radius:5px; padding:26px 28px; }.schedule-card .age-badge { width:26px; height:26px; font-size:.78rem; margin-bottom:12px; }.schedule-card h3 { margin:0 0 8px; font-size:1.1rem; }.schedule-card .schedule-time { font-family:'DM Sans',sans-serif; font-weight:700; font-size:1.15rem; margin:0 0 4px; color:var(--lilac-deep); }.schedule-card .schedule-cap { margin:0; font-size:.78rem; color:var(--brown); }.event-apply { max-width:1280px; margin:auto; background:#fffdf7; border-radius:5px; padding:40px 42px; border:1px solid #e5d6f5; }.event-apply h3 { margin:0 0 10px; font-size:1.3rem; }.event-apply > p { margin:0 0 22px; font-size:.9rem; }.apply-steps { list-style:none; counter-reset:apply; margin:0 0 30px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; }.apply-steps li { counter-increment:apply; position:relative; padding-left:32px; font-size:.85rem; line-height:1.7; }.apply-steps li::before { content:counter(apply); position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--lilac-deep); color:#fff; font:700 .68rem 'DM Sans',sans-serif; display:grid; place-items:center; }.apply-buttons { display:flex; gap:16px; margin-bottom:22px; }.button-instagram { color:#fff; background:linear-gradient(135deg,#f8b23c,#e95950,#c92a8f,#6249d9); box-shadow:5px 5px 0 var(--lilac); transition:transform .2s,box-shadow .2s; }.button-instagram:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--lilac); }.button-line { color:#fff; background:#06c755; box-shadow:5px 5px 0 var(--lilac); transition:transform .2s,box-shadow .2s; }.button-line:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--lilac); }.button-outline { color:var(--ink); background:transparent; border:1.5px solid var(--ink); transition:background .2s,color .2s; }.button-outline:hover { background:var(--ink); color:#fff; }.button-outline.is-disabled { opacity:.4; border-color:var(--brown); color:var(--brown); cursor:not-allowed; pointer-events:none; }.apply-note { margin:0; font-size:.74rem; color:var(--brown); line-height:1.8; }
.flow { max-width:1280px; margin:auto; }.flow-grid { display:grid; grid-template-columns:1fr 1fr; gap:12%; }.flow-copy p { font-size:.95rem; margin-top:24px; }.flow-copy .apply-note { font-size:.74rem; margin-top:14px; }.flow-steps { border-top:1px solid var(--line); }.flow-step { display:flex; gap:32px; padding:25px 0; border-bottom:1px solid var(--line); }.flow-step b { font:700 .75rem 'DM Sans',sans-serif; color:var(--lilac-deep); }.flow-step h3 { margin:0 0 3px; font-size:1.05rem; }.flow-step p { margin:0; font-size:.8rem; }
.contact { background:var(--yellow); }.contact-inner { max-width:1070px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:12%; }.contact h2 { font-size:clamp(2.8rem,5vw,4.5rem); line-height:1.2; letter-spacing:-.1em; margin:18px 0 25px; }.contact-copy > p:last-child { font-size:.92rem; }.chat-note { position:relative; display:inline-block; margin:28px 0 0; padding:12px 20px; font-size:.8rem; font-weight:700; background:var(--cream); border:1.5px solid var(--ink); border-radius:16px 16px 16px 2px; }.contact-details { display:flex; flex-direction:column; gap:18px; padding-top:10px; }.contact-block { display:flex; flex-direction:column; gap:12px; background:var(--cream); border:1.5px solid var(--ink); border-radius:20px 20px 20px 4px; padding:26px 30px; box-shadow:6px 6px 0 rgba(62,37,40,.14); }.detail-label { margin:0; padding-bottom:10px; border-bottom:1px solid var(--line); font-family:'DM Sans',sans-serif; font-size:.7rem; font-weight:700; letter-spacing:.16em; color:var(--lilac-deep); }.detail-value { display:inline-flex; align-items:center; gap:9px; font:700 1.25rem 'DM Sans',sans-serif; letter-spacing:-.01em; border-bottom:1px solid transparent; width:fit-content; transition:border-color .2s,transform .2s; }.detail-value span { font-size:.95rem; color:var(--lilac-deep); transition:transform .2s; }.detail-value:hover { border-color:var(--ink); transform:translateX(3px); }.detail-value:hover span { transform:translate(2px,-2px); }.contact-block p:not(.detail-label):not(.detail-schedule) { margin:0; font-size:.9rem; }.contact-block p.email-note:not(.detail-label) { font-size:.74rem; color:var(--brown); line-height:1.8; margin:4px 0 0; }.detail-schedule { margin:2px 0 0; font-family:'DM Sans',sans-serif; font-size:.9rem; }.detail-schedule span { display:inline-block; margin-right:10px; padding:4px 12px; border-radius:99px; background:var(--ink); color:#fff; font-size:.7rem; font-weight:700; }
.site-footer { padding:42px 7vw; display:flex; align-items:end; justify-content:space-between; border-top:1px solid var(--line); }.site-footer p { font-size:.76rem; }.site-footer small { font: .6rem 'DM Sans',sans-serif; color:#9e8981; }
.instagram { background:var(--lilac); }.instagram-inner { max-width:1120px; margin:auto; display:flex; align-items:center; gap:38px; }.instagram-mark { width:76px; height:76px; flex:0 0 76px; border:3px solid var(--ink); border-radius:23px; position:relative; }.instagram-mark::before { content:''; position:absolute; width:29px; height:29px; border:3px solid var(--ink); border-radius:50%; left:20px; top:20px; }.instagram-mark::after { content:''; position:absolute; width:7px; height:7px; background:var(--ink); border-radius:50%; right:13px; top:13px; }.instagram-mark span { position:absolute; width:100%; height:3px; background:var(--ink); transform:rotate(-45deg); top:35px; left:0; opacity:.8; }.instagram-copy { flex:1; }.instagram-copy .eyebrow { color:var(--ink); margin-bottom:8px; }.instagram-copy h2 { margin:0 0 7px; font-size:clamp(2rem,4vw,3.6rem); line-height:1.25; letter-spacing:-.08em; }.instagram-copy h2 em { color:#fff; font-style:normal; font-family:var(--marker); font-weight:700; font-size:1.14em; }.instagram-copy > p:last-child { margin:0; font-size:.84rem; }.instagram-link { display:inline-flex; align-items:center; gap:16px; border-bottom:1px solid var(--ink); padding-bottom:6px; font:700 1.6rem 'DM Sans',sans-serif; white-space:nowrap; }.instagram-link span { font-size:1.15em; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.reveal-delay { transition-delay:.12s; }.reveal-delay-2 { transition-delay:.22s; }
@media (max-width:800px) { .site-header { padding:22px 6vw; }.main-nav { position:fixed; inset:0; background:var(--cream); flex-direction:column; justify-content:center; gap:24px; transform:translateX(100%); transition:transform .3s; font-size:1rem; }.main-nav.is-open { transform:none; }.nav-cta { margin-top:10px; }.menu-toggle { display:block; position:relative; z-index:3; }.hero { display:block; min-height:auto; padding:150px 6vw 100px; }.hero-copy { margin-bottom:50px; }.hero h1 { font-size:clamp(2.2rem,11vw,4.25rem); }.hero-visual { height:460px; }.hero-photo-frame { right:9%; width:78%; }.hero-note { top:0%; right:-5%; }.scroll-note { display:none; }.section-pad { padding:80px 6vw; }.intro-grid,.flow-grid,.contact-inner,.event-inner,.profile-grid { grid-template-columns:1fr; gap:35px; }.profile-photo-frame { max-width:320px; margin:0 auto; }.history-list { grid-template-columns:1fr; }.event-inner { margin-bottom:40px; }.event-apply { padding:30px 24px; }.apply-steps { grid-template-columns:1fr; }.apply-buttons { flex-wrap:wrap; }.intro-grid { margin-bottom:55px; }.intro-body { padding-top:0; }.value-row,.class-list,.offer-grid { grid-template-columns:1fr; }.value-card { min-height:auto; }.light-heading { display:block; }.light-heading p { margin:24px 0 0; }.class-list { gap:22px; }.class-image { height:230px; }.flow-copy p { margin-top:15px; }.contact-details { padding-top:5px; }.contact-block { padding:20px 22px; }.detail-value { font-size:1.05rem; flex-wrap:wrap; }.site-footer { display:block; }.site-footer p { margin:25px 0; } }
@media (max-width:430px) { .hero-actions { display:block; }.hero-actions .text-link { display:inline-block; margin-top:23px; }.hero-visual { height:390px; }.sticker-one { font-size:1.05rem; }.scribble-top { font-size:1.25rem; }.hero-note { top:0%; right:-3%; } }
@media (max-width:800px) { .instagram-inner { display:grid; grid-template-columns:auto 1fr; gap:25px 20px; }.instagram-copy { grid-column:1 / -1; grid-row:1; }.instagram-mark { grid-column:1; grid-row:2; width:60px; height:60px; flex-basis:60px; border-radius:18px; }.instagram-mark::before { width:22px; height:22px; left:16px; top:16px; }.instagram-mark::after { width:6px; height:6px; right:10px; top:10px; }.instagram-mark span { top:28px; }.instagram-link { grid-column:2; grid-row:2; align-self:center; font-size:clamp(1rem,5vw,1.3rem); gap:10px; } }

/* 2カラム表示(801px以上)では intro/flow の見出し列幅が急に狭くなるため、専用のフォントサイズ上限を設定(自分の「好き」に出会う場所。/からだとこころを、好きなかたちで動かす。を2行に保つ) */
@media (min-width:801px) { .intro-title h2,.flow h2 { font-size:clamp(2rem,3vw,2.85rem); } }