:root{--font-sans:"Noto Sans JP","Yu Gothic",sans-serif;--font-serif:"Noto Serif JP","Yu Mincho",serif}


*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:#252323;font-family:var(--font-sans),sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}
.demoSite{--accent:#70525d;--soft:#f5eeee;--ink:#33292d;color:var(--ink);line-height:1.9}.sampleBar{height:30px;background:var(--ink);color:#fff;text-align:center;font-size:10px;letter-spacing:.08em;line-height:30px}.siteHeader{height:82px;padding:0 clamp(20px,5vw,80px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,transparent)}.brand{font-family:var(--font-serif),serif;font-size:21px;letter-spacing:.05em;font-weight:700}.siteHeader nav{display:flex;gap:26px;font-size:12px;font-weight:700}.siteHeader nav a:hover{color:var(--accent)}.navCta{justify-self:end;background:var(--accent);color:#fff;border-radius:999px;padding:9px 20px;font-size:12px;font-weight:700}.demoHero{min-height:700px;padding:70px clamp(24px,6vw,96px);display:grid;grid-template-columns:.85fr 1.15fr;gap:7vw;align-items:center;background:linear-gradient(135deg,var(--soft),#fff 60%)}.heroCopy{max-width:600px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:800;color:var(--accent);margin:0 0 16px}.demoHero h1,.subHero h1,.contentSection h2,.imageStory h2,.finalCta h2,.voice blockquote{font-family:var(--font-serif),serif;line-height:1.35}.demoHero h1{font-size:clamp(42px,5.7vw,76px);margin:0 0 28px;letter-spacing:-.02em}.heroLead{max-width:570px;color:#665e60}.heroActions{display:flex;gap:24px;align-items:center;margin-top:38px}.primary,.lightButton{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 25px;background:var(--accent);color:#fff;font-weight:700;font-size:13px}.textLink{color:var(--accent);font-size:13px;font-weight:800}.heroImage{height:560px;position:relative}.heroImage img{width:100%;height:100%;object-fit:cover;border-radius:240px 240px 24px 24px}.heroImage span{position:absolute;right:-18px;bottom:36px;background:#fff;padding:11px 18px;font:11px var(--font-serif);letter-spacing:.2em;box-shadow:0 14px 35px #0002}.introBand{padding:45px clamp(24px,8vw,130px);background:var(--accent);color:#fff;display:grid;grid-template-columns:180px 1fr;align-items:center}.introBand p{font-size:11px;letter-spacing:.15em}.introBand strong{font-family:var(--font-serif);font-size:clamp(20px,2.4vw,32px);font-weight:500}.contentSection{padding:110px clamp(24px,7vw,112px)}.contentSection.soft{background:var(--soft)}.sectionHead{max-width:760px;margin-bottom:55px}.sectionHead h2{font-size:clamp(34px,4vw,54px);margin:0 0 16px}.sectionHead>p:last-child{color:#766c6e}.featureGrid,.serviceGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.featureGrid article,.serviceGrid article{padding:34px;border:1px solid color-mix(in srgb,var(--accent) 20%,#ddd);background:#fff}.featureGrid b{font-family:var(--font-serif);font-size:28px;color:var(--accent)}.featureGrid h3,.serviceGrid h3{font-family:var(--font-serif);font-size:22px;margin:24px 0 10px}.featureGrid p,.serviceGrid p{font-size:13px;color:#736b6c}.serviceGrid article{min-height:235px;display:flex;flex-direction:column}.serviceGrid span{font-size:12px;color:var(--accent);font-weight:800}.serviceGrid p{margin-top:auto}.center{text-align:center;margin-top:40px}.imageStory{display:grid;grid-template-columns:1.2fr .8fr;min-height:610px}.imageStory>div{overflow:hidden}.imageStory img{width:100%;height:100%;object-fit:cover}.imageStory article{background:var(--ink);color:#fff;padding:90px clamp(38px,6vw,90px);display:flex;flex-direction:column;justify-content:center}.imageStory h2{font-size:clamp(32px,4vw,54px);margin:0 0 25px}.imageStory p:not(.eyebrow){color:#e6dedf}.imageStory .textLink,.imageStory .eyebrow{color:#fff}.voice{padding:105px 20px;text-align:center;max-width:1050px;margin:auto}.voice blockquote{font-size:clamp(25px,3.3vw,43px);margin:28px auto;max-width:900px}.voice>p:not(.eyebrow){font-size:12px;color:#777}.voice small{display:block;margin-top:18px;color:#999}.stepRow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ddd}.stepRow article{background:#fff;padding:36px}.stepRow b{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}.stepRow h3{font-family:var(--font-serif);font-size:20px}.stepRow p{font-size:13px;color:#777}.finalCta{padding:100px 24px;text-align:center;background:var(--accent);color:#fff}.finalCta .eyebrow{color:#fff}.finalCta h2{font-size:clamp(32px,4vw,56px);margin:12px 0}.finalCta p{color:#f2e8ea}.lightButton{background:#fff;color:var(--accent);margin-top:24px}footer{padding:62px clamp(24px,7vw,112px) 35px;background:#f8f6f4;display:grid;grid-template-columns:1fr 1fr;gap:30px}footer strong{font-family:var(--font-serif);font-size:22px}footer p{max-width:550px;font-size:12px;color:#777}.footerLinks{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap;font-size:11px;font-weight:700}footer small{grid-column:1/-1;padding-top:25px;border-top:1px solid #ddd;color:#999}
.subHero{min-height:560px;display:grid;grid-template-columns:1fr 1fr;background:var(--soft)}.subHero>div:first-child{padding:100px clamp(25px,7vw,110px);display:flex;flex-direction:column;justify-content:center}.subHero h1{font-size:clamp(38px,5vw,66px);margin:0 0 25px}.subHero p:not(.eyebrow){max-width:610px;color:#6f6668}.subHero>img,.typeArt{width:100%;height:100%;object-fit:cover;min-height:560px}.typeArt{display:grid;place-items:center;background:radial-gradient(circle at 25% 20%,#fff8,transparent 30%),linear-gradient(145deg,var(--accent),var(--ink));color:#fff}.typeArt span{font-family:var(--font-serif);font-size:clamp(24px,4vw,56px);letter-spacing:.15em;transform:rotate(-7deg);opacity:.8}.detailSection{padding:70px clamp(24px,8vw,130px) 110px}.detailSection article{display:grid;grid-template-columns:110px 1fr;gap:25px;padding:50px 0;border-bottom:1px solid #ddd}.detailNo{font-family:var(--font-serif);font-size:35px;color:var(--accent)}.detailSection h2{font-family:var(--font-serif);font-size:clamp(28px,3vw,42px);margin:0 0 12px}.detailSection p{color:#71696a}.detailSection ul{list-style:none;padding:0;display:grid;gap:8px}.detailSection li{padding:13px 16px;background:var(--soft);border-left:3px solid var(--accent)}
.hub{min-height:100vh;background:#f5f2ee;padding:90px clamp(22px,7vw,110px)}.hubHero{max-width:1000px;margin-bottom:70px}.hubHero>p{font-size:11px;letter-spacing:.2em;font-weight:800;color:#8c7770}.hubHero h1{font-family:var(--font-serif);font-size:clamp(42px,6vw,78px);line-height:1.35;margin:18px 0}.hubHero span{color:#756d69}.hubGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.hubCard{background:#fff;transition:.25s;box-shadow:0 16px 45px #4d372510}.hubCard:hover{transform:translateY(-7px);box-shadow:0 24px 55px #4d372525}.hubCard img{width:100%;height:270px;object-fit:cover}.hubCard>div{padding:28px}.hubCard small{font-size:9px;letter-spacing:.14em}.hubCard h2{font-family:var(--font-serif);font-size:26px;margin:8px 0}.hubCard p{color:#756d69}.hubCard b{font-size:12px}.hubNote{text-align:center;color:#8b827e;font-size:11px;margin-top:55px}
@media(max-width:900px){.siteHeader{grid-template-columns:1fr auto}.siteHeader nav{display:none}.demoHero{grid-template-columns:1fr;padding-top:45px}.heroImage{height:450px}.imageStory{grid-template-columns:1fr}.imageStory>div{height:440px}.featureGrid,.serviceGrid,.stepRow,.hubGrid{grid-template-columns:1fr}.subHero{grid-template-columns:1fr}.subHero>img,.typeArt{min-height:360px;height:360px}.hubVisual{height:300px}}
@media(max-width:600px){.sampleBar{font-size:8px}.siteHeader{height:70px;padding:0 18px}.brand{font-size:17px}.navCta{padding:8px 13px}.demoHero{padding:45px 20px}.heroImage{height:370px}.heroActions{align-items:flex-start;flex-direction:column}.introBand{grid-template-columns:1fr;padding:30px 20px}.contentSection{padding:75px 20px}.featureGrid article,.serviceGrid article{padding:26px}.imageStory>div{height:330px}.imageStory article{padding:60px 24px}.stepRow{grid-template-columns:1fr}.detailSection{padding:35px 20px 75px}.detailSection article{grid-template-columns:50px 1fr;gap:12px;padding:38px 0}.detailNo{font-size:22px}footer{grid-template-columns:1fr}.footerLinks{justify-content:flex-start}.hub{padding:65px 18px}.hubVisual{height:240px}}

.learningArt{background:var(--soft);display:grid;place-items:center;grid-template-columns:repeat(3,1fr);padding:8vw 5vw}
.learningArt span{width:clamp(100px,13vw,180px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--accent);font:700 clamp(15px,2vw,28px) var(--font-serif);letter-spacing:.12em;box-shadow:0 18px 40px #2234}
.learningArt span:nth-child(2){transform:translateY(60px);background:var(--accent);color:#fff}
.hubVisual{height:270px;display:flex;align-items:flex-end;justify-content:space-between;padding:28px;color:#fff;background:linear-gradient(145deg,#a96079,#422e35)}
.hubCard.cafe .hubVisual{background:linear-gradient(145deg,#82967b,#283a2c)}
.hubCard.school .hubVisual{background:linear-gradient(145deg,#81b8b7,#315a64)}
.hubVisual span{font:55px var(--font-serif);opacity:.6}
.hubVisual strong{font:700 13px var(--font-sans);letter-spacing:.22em;writing-mode:vertical-rl}
@media(max-width:900px){.hubVisual{height:300px}}
@media(max-width:600px){.learningArt span{width:90px}.hubVisual{height:240px}}

/* Industry-specific art direction */
.salon .demoHero{grid-template-columns:.78fr 1.22fr;background:linear-gradient(120deg,#fff 0 43%,var(--soft) 43%)}
.salon .heroImage{height:590px}.salon .heroImage img{border-radius:300px 300px 18px 18px}.salon .demoHero h1{font-weight:500}
.signatureStrip{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;padding:0 clamp(24px,7vw,110px)}
.signatureStrip>div{padding:42px;border-right:1px solid #eadde1;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:end}.signatureStrip>div:last-child{border:0}.signatureStrip span{grid-row:1/3;font:48px var(--font-serif);color:var(--accent);opacity:.42}.signatureStrip small{font-size:9px;letter-spacing:.16em}.signatureStrip strong{font:26px var(--font-serif)}

.cafe .demoHero{position:relative;display:flex;min-height:790px;padding:100px clamp(24px,8vw,130px);overflow:hidden;background:#1f2a21}.cafe .heroImage{position:absolute;inset:0;height:100%;z-index:0}.cafe .heroImage img{width:100%;height:100%;border-radius:0;filter:saturate(.82) brightness(.66)}.cafe .heroImage span{display:none}.cafe .heroCopy{position:relative;z-index:2;max-width:720px;color:#fff}.cafe .demoHero h1{font-size:clamp(50px,7vw,92px);text-shadow:0 2px 30px #17201899}.cafe .heroLead{color:#f4efe4;max-width:590px}.cafe .demoHero .eyebrow,.cafe .demoHero .textLink{color:#fff}.cafe .demoHero .primary{background:#f3eee2;color:#344636}.cafeManifesto{padding:105px clamp(24px,10vw,160px);background:#e8dfcd;color:#354238}.cafeManifesto>p{font-size:10px;letter-spacing:.24em;font-weight:800}.cafeManifesto h2{font:clamp(38px,5vw,66px)/1.45 var(--font-serif);margin:24px 0 45px}.cafeManifesto>div{display:flex;gap:12px;flex-wrap:wrap}.cafeManifesto span{padding:10px 18px;border:1px solid #64705e;border-radius:999px;font-size:11px}

.school .demoHero{grid-template-columns:1fr 1fr;background:radial-gradient(circle at 6% 12%,#f7d67d66 0 80px,transparent 81px),radial-gradient(circle at 48% 88%,#79b7b344 0 110px,transparent 111px),var(--soft)}.school .demoHero h1{font-family:var(--font-sans);font-weight:800;letter-spacing:.01em}.school .heroImage{height:520px;transform:rotate(1.5deg)}.school .heroImage img{border-radius:36px;box-shadow:18px 22px 0 #f1c85f}.school .heroImage span{background:var(--accent);color:#fff;transform:rotate(-3deg)}.school .introBand{background:#f1c85f;color:#294d50}.schoolPromise{padding:62px clamp(24px,8vw,130px);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;background:#fff}.schoolPromise>div{text-align:center;padding:24px;border-right:1px dashed #a7c9c8}.schoolPromise>div:last-child{border:0}.schoolPromise b{display:block;font:700 58px var(--font-sans);color:var(--accent)}.schoolPromise span{font-size:12px;font-weight:700}.school .serviceGrid article{border-radius:24px;border:0;box-shadow:0 12px 30px #3452}.school .featureGrid article{border-radius:22px}.school .primary{border-radius:12px}

.transformation,.seasonalFeature,.learningCycle{padding:100px clamp(24px,9vw,145px)}.transformation{background:#f5e9ed}.transformation h2,.seasonalFeature h2,.learningCycle h2{font:clamp(36px,4.5vw,62px)/1.4 var(--font-serif)}.transformation>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;margin:45px 0}.transformation article{background:#fff;padding:36px;min-height:210px}.transformation article span{font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:800}.transformation article h3{font:24px var(--font-serif)}.transformation i{font-style:normal;font-size:40px;color:var(--accent)}.transformation small{color:#85797c}.seasonalFeature{background:linear-gradient(115deg,#27372c,#66765d);color:#fff}.seasonalFeature>p{font-size:10px;letter-spacing:.22em}.seasonalFeature h2{font-size:clamp(42px,5.2vw,72px);max-width:780px}.seasonalFeature span{color:#e9e1d5}.learningCycle{text-align:center;background:#f4cc67;color:#294d50}.learningCycle h2{font-family:var(--font-sans);font-weight:800}.learningCycle>div{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:45px}.learningCycle b{padding:18px 26px;background:#fff;border-radius:18px}.learningCycle i{font-style:normal;font-size:28px}

.revealTarget{opacity:0;transform:translateY(32px);transition:opacity .75s ease,transform .75s ease}.revealTarget.isVisible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.revealTarget{opacity:1;transform:none;transition:none}}

@media(max-width:900px){.salon .demoHero{grid-template-columns:1fr;background:var(--soft)}.cafe .demoHero{min-height:720px}.school .demoHero{grid-template-columns:1fr}.signatureStrip,.schoolPromise{grid-template-columns:1fr}.signatureStrip>div,.schoolPromise>div{border-right:0;border-bottom:1px solid #ddd}.transformation>div{grid-template-columns:1fr}.transformation i{transform:rotate(90deg);text-align:center}.learningCycle>div{flex-direction:column}.learningCycle i{transform:rotate(90deg)}}
@media(max-width:600px){.cafe .demoHero{min-height:670px;padding:80px 22px}.cafe .demoHero h1{font-size:46px}.signatureStrip{padding:0 20px}.signatureStrip>div{padding:28px 8px}.school .heroImage{transform:none}.school .heroImage img{box-shadow:10px 12px 0 #f1c85f}.transformation,.seasonalFeature,.learningCycle{padding:70px 20px}.cafeManifesto{padding:75px 22px}}

/* Mobile navigation and non-sending form used in this production sample */
.sampleForm{max-width:820px;margin:34px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left}.sampleForm label{font-size:11px;font-weight:700}.sampleForm input,.sampleForm select,.sampleForm textarea{display:block;width:100%;margin-top:6px;padding:13px;border:1px solid #ffffff66;background:#fff;color:#333}.sampleForm .wide{grid-column:1/-1}.sampleForm button{grid-column:1/-1;border:0;opacity:.9;cursor:not-allowed}
@media(max-width:900px){.siteHeader nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:space-around;gap:8px;padding:10px 8px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -10px 30px #0002;overflow-x:auto}.siteHeader nav a{white-space:nowrap;font-size:10px}.navCta{display:none}footer{padding-bottom:95px}}
@media(max-width:600px){.sampleForm{grid-template-columns:1fr}.sampleForm .wide,.sampleForm button{grid-column:auto}}


/* ── 見出しの改行調整（2026-08-22） ────────────────────
   日本語は単語区切りがないため、段の幅に対して文字が大きすぎると
   行末に1〜2文字だけ取り残される。文字サイズを段幅に合わせて調整する。 */
.demoHero h1,.subHero h1,.hubHero h1{font-size:clamp(29px,3.5vw,52px);text-wrap:balance;line-break:strict}
.sectionHead h2,.imageStory h2,.finalCta h2,.detailSection h2,.cafeManifesto h2{font-size:clamp(23px,2.8vw,40px);text-wrap:balance;line-break:strict}
.introBand strong,.voice blockquote{text-wrap:balance;line-break:strict}
.voice blockquote{font-size:clamp(20px,2.3vw,32px)}
.heroCopy{max-width:none}
.salon .demoHero{grid-template-columns:.95fr 1.05fr}
@media(max-width:600px){.cafe .demoHero h1{font-size:34px}}