/* 2026-09-21: concept-first composition. Core transactions remain in style.css. */
:root { --bg:#f8f3e9; --bg-alt:#ede2ce; --accent:#111; --text:#111; --text-sub:#111; --border:#d9cbb8; --white:#fffdfa; --price:#111; --moss:#111; --shadow:rgba(70,49,32,.10); }
html { scroll-padding-top:94px; }
body { font-family:'Noto Sans JP',sans-serif; background:var(--bg); color:var(--text); line-height:1.8; }
button,input { font:inherit; }
a { text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--moss); outline-offset:4px; }
header { height:84px; max-width:1280px; margin:auto; padding:0 40px; position:sticky; background:rgba(248,243,233,.97); border-color:var(--border); }
.logo { display:flex; flex-direction:column; gap:7px; line-height:1; }
.logo > span:last-child { margin:0; color:var(--accent); font-size:9px; letter-spacing:.12em; }
.logo-image { position:relative; display:block; overflow:hidden; width:270px; aspect-ratio:1166/130; flex-shrink:0; }
.logo-image img { position:absolute; width:164.665523%; max-width:none; height:auto; left:-33.361921%; top:-366.153846%; filter:brightness(0); }
nav { gap:26px; }.nav-link { color:var(--text); font-size:13px; }.cart-btn { color:var(--accent); }
.cart-badge { background:var(--accent); }
.section-label { font-size:12px; color:var(--accent); font-weight:600; letter-spacing:.09em; margin:0 0 18px; }
.ai-caption { position:absolute; z-index:2; bottom:10px; right:10px; background:#ffffffe0; padding:2px 7px; font-size:10px; color:#111; }
.hero-action,.btn-line,.btn-cart,.btn-checkout,.btn-modal-confirm { background:var(--accent); color:white; border-radius:3px; font-size:14px; letter-spacing:.025em; font-weight:600; }
.btn-line { background:#06c755; }
.hero-action { display:inline-flex; align-items:center; justify-content:center; padding:13px 28px; text-decoration:none; margin-top:22px; }
.hero-action:hover,.btn-line:hover,.btn-cart:hover,.btn-checkout:hover,.btn-modal-confirm:hover { background:#000; }
.btn-line:hover,.btn-line:focus-visible { background:#05ad4a; }
.btn-ghost { border-color:var(--accent); color:var(--accent); border-radius:3px; letter-spacing:.02em; }
.btn-cart.added,.btn-cart.added:hover { background:#000; }
/* The v8 opening is a full-bleed photograph with the idea placed directly on it. */
.opening { margin:0; padding:0 0 68px; }
.opening-hero { position:relative; min-height:clamp(400px,44vw,620px); overflow:hidden; background:var(--bg-alt); }
.opening-heading { position:absolute; z-index:2; top:50%; left:max(40px,calc((100vw - 1200px)/2)); transform:translateY(-50%); width:min(43%,540px); pointer-events:none; }
.opening-heading h1 { font-size:clamp(36px,4vw,60px); line-height:1.42; letter-spacing:.015em; font-weight:700; margin:0; color:var(--text); }
.opening-photo { position:absolute; inset:0; margin:0; }
.opening-photo::after { position:absolute; z-index:1; inset:0; content:''; pointer-events:none; background:linear-gradient(90deg,rgba(255,253,250,.92) 0%,rgba(255,253,250,.68) 15%,rgba(255,253,250,0) 36%); }
.opening-photo img { position:relative; z-index:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.opening-story { max-width:760px; margin:38px auto 0; padding:0 24px; }
.opening-story p { font-size:14px; line-height:2.15; color:var(--text-sub); }.opening-story p+p { margin-top:15px; }.opening-story > div+div { margin-top:15px; }.opening-story .concept-close { font-size:23px; color:var(--accent); font-weight:600; text-align:center; margin-top:25px; letter-spacing:.02em; }.opening-story .hero-action { display:flex; width:fit-content; margin:22px auto 0; }
/* Catalogue: clear cards and expressive thumbnails, with a compact search field. */
.catalog { padding:64px max(40px,calc((100vw - 1200px)/2)); background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.catalog-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:24px; }
.catalog-eyebrow { color:var(--accent); font-size:11px; letter-spacing:.14em; margin:0 0 6px; }
.catalog h2 { font-size:32px; font-weight:600; }.result-count { font-size:12px; color:var(--text-sub); margin:0 0 6px; }
.lesson-search { display:flex; align-items:center; gap:16px; max-width:600px; padding:13px 16px; border:1px solid var(--border); background:var(--bg); margin-bottom:30px; }
.lesson-search span { font-size:12px; color:var(--accent); white-space:nowrap; }.lesson-search input { width:100%; min-width:0; font-size:14px; border:0; outline:0; background:transparent; color:var(--text); }
.lesson-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.lesson-grid { padding:0; max-width:980px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 28px; }
.card { background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }.card:hover { transform:none; box-shadow:none; }.card:hover .card-thumb img { transform:none; }
.card-thumb { border-radius:3px; }.card-body { padding:14px 0 0; }.card-date { color:var(--accent); font-size:12px; }.card-desc { display:-webkit-box; color:var(--text-sub); font-size:13px; line-height:1.8; -webkit-line-clamp:2; margin:5px 0 12px; }.card-price { color:var(--accent); font-size:16px; }.card-duration { font-size:12px; }
.card:focus-visible .card-thumb,.card:hover .card-thumb { outline:2px solid var(--moss); outline-offset:4px; }
.card-thumb .card-title { position:absolute; z-index:1; margin:0; color:#fff; }
.catalog-empty { font-size:14px; color:var(--text-sub); padding:30px 0; }
/* Beginner reassurance: first answer the emotional question before introducing logistics. */
.home-beginner { max-width:1200px; margin:94px auto; display:grid; grid-template-columns:.82fr 1.18fr; gap:0; align-items:stretch; padding:0; background:var(--white); border:1px solid var(--border); }
.beginner-copy { padding:58px 52px; display:flex; flex-direction:column; justify-content:center; background:var(--bg-alt); }.home-beginner h2 { font-size:clamp(32px,3.3vw,48px); line-height:1.4; font-weight:700; margin:0 0 24px; }.beginner-lead { font-size:18px; font-weight:600; line-height:1.8; margin:0; }
.beginner-photo,.stage-photo { position:relative; margin:0; }.beginner-photo img { width:100%; height:100%; min-height:360px; object-fit:cover; display:block; object-position:center; }
.beginner-message { grid-column:1 / -1; display:block; padding:42px 52px 46px; border-top:1px solid var(--border); }
.beginner-message p { max-width:840px; margin:0 auto; font-size:15px; line-height:2.1; }
.beginner-message p+p { margin-top:18px; }
/* Preparation: the guide and concrete illustrations make each requirement visible at a glance. */
.preparation { max-width:1200px; margin:0 auto 94px; display:grid; grid-template-columns:minmax(360px,.82fr) minmax(0,1.58fr); border:1px solid var(--border); background:var(--white); }
.preparation-intro { min-width:0; display:flex; flex-direction:column; background:#f0eadf; color:var(--text); }
.preparation-heading { padding:50px 44px 10px; }
.preparation-heading .section-label { color:var(--text-sub); }
.preparation-heading h2 { margin:0 0 20px; font-size:34px; line-height:1.5; }
.preparation-heading > p:last-child { margin:0; font-size:14px; line-height:2; color:var(--text-sub); }
.preparation-guide-figure { min-height:430px; flex:1; margin:0; padding:14px 18px 24px; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
.shirahige-guide { display:block; width:auto; height:auto; max-width:100%; max-height:540px; object-fit:contain; }
.preparation-list { min-width:0; display:grid; grid-template-columns:1fr 1fr; }
.preparation-item { min-width:0; display:flex; flex-direction:column; border-left:1px solid var(--border); border-bottom:1px solid var(--border); }
.preparation-item:nth-child(3),.preparation-item:nth-child(4) { border-bottom:0; }
.preparation-visual { margin:0; aspect-ratio:1.6; background:#fbf7ef; border-bottom:1px solid var(--border); overflow:hidden; }
.preparation-visual img { display:block; width:100%; height:100%; object-fit:cover; }
.preparation-visual--contain img { object-fit:contain; }
.preparation-item-copy { padding:25px 30px 30px; }
.preparation-item h3 { margin:0 0 12px; font-size:19px; line-height:1.5; }
.preparation-item p { margin:0; font-size:14px; line-height:2; color:var(--text-sub); }
/* Two ways to join: the illustrations explain the difference before the conditions are read. */
.join { background:#f3ede3; padding:76px 40px 68px; border:0; }.join-inner { max-width:1200px; }.join-title { font-family:inherit; font-size:30px; font-weight:600; text-align:left; }.join-rule { display:none; }.join-grid { grid-template-columns:1fr 1fr; gap:18px; margin-top:32px; }
.join-card { min-width:0; padding:34px 36px 36px; border:1px solid #d9d0c1; border-radius:0; box-shadow:none; display:flex; flex-direction:column; align-items:start; background:#fffdfa; color:var(--text); }
.join-live { border-top:4px solid #667553; }.join-archive { border-top:4px solid #3f3c37; background:#f8f6f1; }
.join-card-label { font-size:11px; letter-spacing:.09em; color:var(--accent); margin-bottom:13px; }.join-card h3 { font-family:inherit; font-size:25px; line-height:1.5; margin-bottom:20px; }.join-visual { width:calc(100% + 72px); margin:0 -36px 24px; aspect-ratio:4 / 3; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#f8f3e9; }.join-visual img { display:block; width:100%; height:100%; object-fit:cover; }.join-card p { font-size:14px; line-height:2; }.join-points { width:100%; margin:22px 0 0; padding:0; list-style:none; flex:1; border-top:1px solid var(--border); }.join-points li { position:relative; padding:12px 0 12px 25px; border-bottom:1px solid var(--border); font-size:13px; font-weight:500; }.join-points li::before { position:absolute; left:2px; content:'✓'; font-weight:700; color:#667553; }.join-price { margin:24px 0 20px; font-size:13px; }.join-price strong { font-size:30px; font-weight:600; }.join-price .free-badge { font-size:13px; color:var(--accent); background:#e7dcc6; padding:5px 10px; }
.join-archive .join-card-label,.join-archive p,.join-archive .join-price,.join-archive .join-price strong { color:inherit; }.join-archive .btn-ghost { color:#fff; background:var(--accent); border-color:var(--accent); }.join-card .btn-line,.join-card .btn-ghost { width:auto; min-width:230px; padding:12px 22px; }.join-note { text-align:left; margin-top:24px; font-size:13px; color:var(--text-sub); }
.join-archive .join-points { border-color:var(--border); }.join-archive .join-points li { color:inherit; border-color:var(--border); }
/* The teacher section turns the existing biography into one stage-to-village scene. */
.teaser { max-width:1200px; margin:94px auto; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; background:transparent; border:0; }.stage-photo { min-height:340px; }.stage-photo img { width:100%; height:100%; min-height:340px; display:block; object-fit:cover; }

.teaser-inner { max-width:none; text-align:left; }.teaser-label { font-size:14px; text-transform:none; letter-spacing:.1em; color:var(--accent); margin:0 0 20px; }.teaser-title { font-size:32px; line-height:1.7; font-weight:600; margin:0 0 24px; }.teaser p:not([class]) { font-size:14px; line-height:2.2; }.teaser .btn-ghost { border:0; border-bottom:1px solid var(--accent); padding:8px 0; border-radius:0; }
.teaser .stage-photo img { height:auto; min-height:0; aspect-ratio:auto; }
.teaser-inner p:not([class]) + p { margin-top:16px; }
.teaser .ai-caption { position:static; display:block; width:fit-content; margin:8px 0 0 auto; }
@media(max-width:680px) { .teaser .teaser-title { font-size:clamp(22px,6.5vw,28px); } }
/* Testimonial collection: anonymous movement cues support the real quotes without fake portraits. */
.voices { background:#f0e9dc; border:0; padding:76px 40px; }.voices-inner { max-width:1200px; }.voices-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:32px; align-items:stretch; background:#d8d0c3; border:1px solid #d8d0c3; }.voice-card { min-width:0; background:#fffdfa; border:0; border-radius:0; padding:25px 25px 29px; position:relative; display:block; }.voice-card:nth-child(2n) { background:#f8f3e9; }.voice-card::before { content:'“'; position:absolute; top:18px; left:25px; font-family:Georgia,serif; color:var(--moss); font-size:38px; line-height:1; }.voice-visual { display:block; width:92px; aspect-ratio:1; background-image:url('../assets/testimonial-movements-v1.jpg'); background-repeat:no-repeat; background-size:300% 200%; }.voice-visual-1 { background-position:0 0; }.voice-visual-2 { background-position:50% 0; }.voice-visual-3 { background-position:100% 0; }.voice-visual-4 { background-position:0 100%; }.voice-visual-5 { background-position:50% 100%; }.voice-visual-6 { background-position:100% 100%; }.voice-card p { margin-top:31px; font-size:13px; line-height:2; }.voice-card p::before,.voice-card p::after { content:none; }.voices-note { text-align:left; margin-top:24px; font-size:12px; }
/* FAQ pairs an open reading area with a guide whose complete pose remains visible. */
.faq { background:#fff; border:0; padding:90px 40px; }.faq-inner { max-width:1200px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:65px; align-items:start; }.faq-heading { position:sticky; top:100px; }.faq-guide-figure { width:100%; margin:26px 0 0; padding:0 28px; overflow:visible; background:#f8f3e9; }.faq-guide-figure img { display:block; width:100%; height:auto; object-fit:contain; }.faq-list { margin:0; border-top:1px solid var(--border); }.faq-item { border:0; border-bottom:1px solid var(--border); border-radius:0; margin:0; background:transparent; }.faq-item summary { padding:25px 0; font-size:15px; font-weight:500; }.faq-item[open] summary { color:var(--accent); }.faq-item .faq-a { padding:0 32px 25px 0; font-size:14px; }
.faq-group-title { margin:0; padding:24px 0 12px; border-bottom:2px solid var(--accent); font-size:13px; letter-spacing:.06em; }
/* Details: reading area and a quiet purchase panel. */
.detail-back { max-width:1200px; margin:auto; padding:30px 24px; color:var(--accent); }
.detail-wrap { max-width:1200px; padding:0 24px 64px; grid-template-columns:minmax(0,1fr) 340px; gap:32px 48px; align-items:start; }
.detail-main { grid-column:1; grid-row:1; min-width:0; }.detail-reading { grid-column:1; grid-row:2; min-width:0; }.detail-purchase { grid-column:2; grid-row:1 / span 2; position:sticky; top:110px; padding:24px; border:1px solid var(--border); background:white; border-radius:4px; }
.detail-title { font-family:inherit; font-size:32px; font-weight:600; line-height:1.55; }.detail-label,.detail-price { color:var(--accent); }.detail-desc { font-size:15px; line-height:2.1; }.detail-main .detail-thumb { margin:26px 0; border-radius:3px; }.meta-tag { border-color:var(--border); border-radius:0; }.detail-purchase .detail-sample { margin:0 0 24px; }.detail-purchase .detail-price-row { margin:0 0 18px; }.detail-sample video { border-radius:3px; }.detail-reading .detail-flow { padding:28px 0; border-top:2px solid var(--accent); background:transparent; }.detail-flow-head { font-size:19px; font-weight:600; }.flow-list li { padding:16px 0; border-color:var(--border); }.flow-time { color:var(--accent); }.first-guide { border:0; border-radius:3px; background:var(--bg-alt); padding:26px; }.first-guide-head { font-size:18px; }.first-guide li { line-height:2; }.detail-notes { border-radius:0; background:transparent; padding:24px 0; }.detail-live { border-radius:0; border:0; border-top:1px solid var(--border); background:transparent; margin-top:26px; padding:24px 0; }.detail-live a { color:var(--accent); }
.related-lessons { max-width:1152px; margin:0 auto 70px; border-top:1px solid var(--border); padding-top:26px; }.related-lessons h2 { font-size:23px; margin-bottom:16px; }.related-lessons button { display:block; width:100%; border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; color:var(--accent); padding:18px 0; font-size:14px; cursor:pointer; }
/* About uses the same typographic principle with a long-form reading layout. */
.about-wrap { max-width:1050px; padding:0 30px 70px; }.about-principle { float:right; width:40%; margin:0 0 32px 54px; padding:40px; background:#e7dcc6; color:var(--accent); font-size:54px; line-height:1.55; font-weight:600; }.about-label,.about-name,.about-kana { text-align:left; }.about-label { color:var(--accent); }.about-name { font-family:inherit; font-size:38px; }.about-rule { margin:25px 0 38px; background:var(--accent); }.about-wrap p:not([class]) { line-height:2.3; font-size:15px; }.about-credentials { clear:both; margin:38px 0; padding:30px; border:0; border-left:4px solid var(--accent); border-radius:0; background:#e9dfcf; }.about-credentials li { font-size:14px; }.about-wrap h3 { font-size:26px; }.about-quote { text-align:left; padding:26px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--accent); font-size:28px; font-weight:600; }.about-cta { flex-direction:row; justify-content:flex-start; flex-wrap:wrap; }
.cart-overlay,.modal-overlay { background:#28252b70; }.cart-drawer,.modal { background:white; border-radius:3px; }.cart-header,.cart-item,.cart-footer { border-color:var(--border); }.cart-close,.cart-item-remove { color:var(--accent); }.modal-input { background:var(--bg); border-color:var(--border); border-radius:3px; }.btn-modal-cancel { border-color:var(--border); border-radius:3px; }.toast { background:var(--accent); max-width:calc(100vw - 40px); white-space:normal; }
footer { background:#e7dcc6; padding:54px max(40px,calc((100vw - 1200px)/2)); text-align:left; border:0; display:grid; grid-template-columns:1fr 1fr; column-gap:70px; }
footer .footer-line { grid-column:1; grid-row:1 / span 4; margin:0; text-align:left; display:block; }footer .logo-image { width:260px; margin-bottom:26px; }footer .footer-line p { max-width:34em; margin:0 0 20px; line-height:1.9; font-size:13px; }footer > p { grid-column:2; margin:0 0 14px; font-size:12px; }footer a { color:var(--accent); }footer > p:last-child { margin-top:22px; }
@media(max-width:1239px) { .home-beginner,.preparation,.teaser { margin-left:40px; margin-right:40px; }.related-lessons { margin-left:24px; margin-right:24px; } }
@media(max-width:1000px) { header { padding:0 24px; }.opening { padding:38px 24px 50px; }.opening-top { gap:28px; }.opening-heading h1 { font-size:32px; }.opening-story { gap:32px; }.lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.catalog { padding:50px 24px; }.home-beginner,.teaser { gap:36px; margin:62px 24px; }.beginner-copy { padding:40px 34px; }.home-beginner h2,.teaser-title { font-size:27px; }.preparation { grid-template-columns:1fr; margin:0 24px 62px; }.preparation-intro { min-height:440px; display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:stretch; }.preparation-heading { padding:42px 34px; }.preparation-heading h2 { font-size:30px; }.preparation-guide-figure { min-height:0; padding:22px 28px; }.shirahige-guide { max-height:390px; }.preparation-list { grid-template-columns:1fr 1fr; }.preparation-item:nth-child(3),.preparation-item:nth-child(4) { border-bottom:0; }.preparation-item-copy { padding:24px 28px 28px; }.join { padding:50px 24px; }.join-card { padding:30px; }.join-visual { width:calc(100% + 60px); margin:0 -30px 22px; }.voices { padding:55px 24px; }.voices-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.faq { padding:60px 24px; }.faq-inner { grid-template-columns:230px minmax(0,1fr); gap:32px; }.faq-guide-figure { padding:0 16px; }footer { padding:44px 24px; gap:32px; } }
@media(max-width:900px) { .detail-wrap { display:flex; flex-direction:column; gap:26px; }.detail-main,.detail-reading,.detail-purchase { width:100%; }.detail-purchase { position:static; }.detail-purchase video { max-height:300px; background:#000; } }
@media(max-width:680px) {
 header { height:auto; padding:17px 20px 12px; flex-wrap:wrap; gap:15px; }.logo-image { width:220px; }.logo > span:last-child { font-size:8px; }nav { width:100%; gap:20px; }.nav-link { font-size:12px; }.cart-btn { margin-left:auto; }html { scroll-padding-top:125px; }
 .opening { padding:0 0 46px; }.opening-hero { min-height:420px; }.opening-heading { left:24px; width:calc(100% - 48px); }.opening-heading h1 { font-size:clamp(28px,8vw,38px); white-space:nowrap; }.opening-photo::after { background:linear-gradient(90deg,rgba(255,253,250,.92) 0%,rgba(255,253,250,.68) 32%,rgba(255,253,250,.08) 54%,rgba(255,253,250,0) 70%); }.opening-photo img { object-position:58% center; }.opening-story { display:block; margin-top:28px; padding:0 24px; }.opening-story > div+div { margin-top:18px; }.opening-story .concept-close { font-size:22px; margin-top:25px; }.hero-action { width:100%; }
 .catalog { padding:44px 20px; }.catalog h2 { font-size:27px; }.catalog-heading { gap:10px; }.result-count { white-space:nowrap; font-size:11px; }.lesson-search { gap:10px; padding:12px; }.lesson-search span { font-size:11px; }.lesson-search input { font-size:13px; }.lesson-grid { grid-template-columns:1fr; gap:32px; }
 .home-beginner { display:block; margin:50px 20px; }.beginner-copy { padding:36px 28px; }.home-beginner h2 { font-size:32px; margin-bottom:16px; }.beginner-photo img { min-height:0; height:auto; aspect-ratio:1.35; }.beginner-message { display:block; padding:30px 28px 34px; }.beginner-message p+p { margin-top:18px; }.preparation { display:block; margin:0 20px 52px; }.preparation-intro { min-height:0; display:block; }.preparation-heading { padding:36px 28px 4px; }.preparation-heading h2 { font-size:28px; }.preparation-guide-figure { min-height:340px; padding:18px 34px 28px; }.shirahige-guide { max-height:360px; }.preparation-list { display:block; }.preparation-item { border-left:0; border-bottom:1px solid var(--border)!important; }.preparation-item:last-child { border-bottom:0!important; }.preparation-visual { aspect-ratio:1.6; }.preparation-item-copy { padding:24px 26px 28px; }.teaser { display:block; }.stage-photo { min-height:0; margin-bottom:28px; }.stage-photo img { min-height:0; height:auto; aspect-ratio:1.35; }
 .join { padding:44px 20px; }.join-title { font-size:27px; }.join-grid { grid-template-columns:1fr; margin-top:24px; gap:18px; }.join-card { padding:28px 24px; }.join-card h3 { font-size:23px; }.join-visual { width:calc(100% + 48px); margin:0 -24px 22px; }.join-card .btn-line,.join-card .btn-ghost { width:100%; min-width:0; }.join-note { font-size:12px; line-height:2; }
 .teaser { display:block; margin:52px 20px; }.teaser-title { font-size:28px; }.teaser-label { margin-bottom:14px; }
 .voices { padding:46px 20px; }.voices-grid { grid-template-columns:1fr; gap:1px; margin-top:25px; }.voice-card { padding:22px 21px 25px; }.voice-visual { width:82px; }.voice-card::before { top:16px; left:21px; font-size:34px; }.voice-card p { margin-top:27px; }
 .faq { padding:50px 20px; }.faq-inner { display:block; }.faq-heading { position:static; margin-bottom:28px; display:grid; grid-template-columns:minmax(0,1fr) 92px; column-gap:12px; align-items:start; }.faq-heading .section-label,.faq-heading .join-title { grid-column:1; }.faq-heading .join-title { font-size:25px; white-space:nowrap; }.faq-guide-figure { grid-column:2; grid-row:1 / span 2; margin:0; padding:0 3px; }.faq-item summary { font-size:14px; padding:22px 0; }.faq-item .faq-a { font-size:13px; }
 .detail-back { padding:24px 20px; }.detail-wrap { padding:0 20px 45px; }.detail-title { font-size:26px; }.detail-desc { font-size:14px; }.detail-reading .detail-flow { padding:22px 0; }.detail-purchase { padding:20px; }.first-guide { padding:22px; }.related-lessons { margin:0 20px 45px; }
 .about-wrap { padding:0 20px 50px; }.about-principle { float:none; width:100%; margin:0 0 28px; padding:24px 28px; font-size:36px; line-height:1.5; }.about-name { font-size:32px; }.about-wrap p:not([class]) { font-size:14px; }.about-quote { font-size:25px; }.about-credentials { padding:22px; }.about-cta { align-items:stretch; flex-direction:column; }
 .modal { padding:28px 22px; }footer { display:block; padding:40px 20px; }footer .footer-line { margin-bottom:32px; }footer .logo-image { width:230px; }footer > p { line-height:2; }
}
/* Studio testimonials: shared illustration, with verbatim excerpts as reading anchors. */
.voices-heading { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; }
.voices-heading .join-rule { margin:22px 0; }
.voices-note { font-size:14px; line-height:2; margin-top:0; }
.voices-figure { margin:0; }
.voices-figure img { display:block; width:100%; height:auto; border-radius:6px; }
.voices-figure figcaption { margin-top:8px; text-align:right; font-size:11px; line-height:1.8; color:#5e5a52; }
.voices-grid { gap:18px; border:0; background:transparent; margin-top:32px; }
.voice-card,.voice-card:nth-child(2n) { background:#fffdfa; border:1px solid #d8d0c3; border-radius:7px; padding:65px 28px 30px; }
.voice-card::before { left:28px; top:18px; font-size:56px; color:#65754e; }
.voice-card h3 { margin:0; color:#65754e; font-size:22px; line-height:1.65; font-weight:700; overflow-wrap:anywhere; }
.voice-card p { margin-top:20px; font-size:14px; line-height:2; }
@media(max-width:1000px) { .voices-heading { gap:26px; grid-template-columns:1fr 1fr; }.voice-card h3 { font-size:21px; } }
@media(max-width:680px) { .voices-heading { grid-template-columns:1fr; gap:24px; }.voices-heading .join-title { font-size:27px; }.voices-note { font-size:13px; }.voices-grid { gap:16px; }.voice-card { padding:58px 24px 26px; }.voice-card::before { left:24px; font-size:48px; }.voice-card h3 { font-size:20px; }.voice-card p { margin-top:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }
/* 4本それぞれの動きに合わせたサムネイルの文字組み */
.card-thumb{container-type:inline-size;background:#222}


.card-thumb .card-title{inset:12px auto auto 14px;max-width:94%;font-size:clamp(26px,10.5cqw,44px);line-height:1.2;letter-spacing:-.04em;text-wrap:initial;text-shadow:2px 2px 0 #202024,-1px -1px 0 #202024,0 3px 8px #000;font-weight:900}
.title-line{display:table;position:relative;margin-bottom:4px}
.card[data-video-id="1224344682"] .card-title{top:auto;bottom:12px}
.card[data-video-id="1224344682"] .title-line-0{font-size:.57em;letter-spacing:.02em;background:#272327;padding:3px 7px;color:#fff}
.card[data-video-id="1224344682"] .title-line-1{color:#fff}
.card[data-video-id="1224344682"] .title-line-2{color:#ffe251;font-size:1.18em;transform:rotate(-3deg);transform-origin:left center}

.card[data-video-id="1216148340"] .card-title{top:12px;left:12px;line-height:1.1}
.card[data-video-id="1216148340"] .title-line-0{font-size:.66em;color:#fff;margin-bottom:10px}
.card[data-video-id="1216148340"] .title-line-1{color:#102b35;background:#b8f0ed;padding:2px 8px;font-size:1.1em;text-shadow:none;transform:rotate(-3deg)}
.card[data-video-id="1216148340"] .title-line-2{color:#fff;font-size:1.15em;margin-top:6px}
.card[data-video-id="1215041715"] .card-title{left:auto;right:12px;top:auto;bottom:12px;text-align:right}
.card[data-video-id="1215041715"] .title-line{margin-left:auto}
.card[data-video-id="1215041715"] .title-line-0{font-size:.64em;color:#fff;background:#532e59;padding:3px 7px;text-shadow:none;letter-spacing:0}
.card[data-video-id="1215041715"] .title-line-1{color:#ffd0e9;font-size:1.25em}
.card[data-video-id="1215041715"] .title-line-2{color:#fff;font-size:1em}
.card[data-video-id="1198886026"] .card-title{top:auto;bottom:16px;left:12px;right:12px;max-width:none;transform:rotate(-3deg)}
.card[data-video-id="1198886026"] .title-line-0{font-size:.57em;background:#fff;color:#252525;padding:4px 8px;text-shadow:none;letter-spacing:0}
.card[data-video-id="1198886026"] .title-line-1{font-size:1.2em;color:#fff2c0;background:#a53619;padding:3px 8px;text-shadow:1px 2px #64210f;white-space:nowrap}

/* 文字の縁取り・色帯で可読性を確保し、写真は元の明るさで表示。 */
.card-thumb img{filter:none}
.card-thumb::after{display:none}

.join-card .join-price strong { font-size:30px; line-height:1.3; }
.join-card .join-price .free-badge { font-size:13px; }

/* Homepage: shared activity identity, then clear ways to participate. */
.opening { padding-bottom:0; }
.opening-story .concept-message { text-align:center; }
.opening-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:14px; margin-top:28px; }
.opening-actions .btn-ghost,.opening-actions .hero-action { display:inline-flex; align-items:center; justify-content:center; width:auto; margin:0; padding:13px 22px; font-size:14px; line-height:1.8; text-align:center; }
.join-title > span,.join-online-label > span { display:inline-block; }
.join-intro { max-width:760px; margin:20px 0 0; font-size:14px; line-height:2.1; }
.join-online-label { margin:32px 0 0; font-size:15px; font-weight:600; }
.join .join-grid { margin-top:18px; }
.workshop-guide { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; margin-top:24px; padding:34px 36px; background:var(--white); border:1px solid #d9d0c1; }
.workshop-guide .section-label { margin-bottom:12px; font-size:11px; }
.workshop-guide h3 { margin:0 0 16px; font-size:25px; line-height:1.5; }
.workshop-guide p:last-child { max-width:740px; margin:0; font-size:14px; line-height:2; }
.workshop-guide .btn-line { padding:12px 22px; text-align:center; }
.voices + .preparation { margin-top:94px; }
@media(max-width:1000px) {
  nav { gap:18px; }
  .workshop-guide { grid-template-columns:1fr; gap:24px; padding:30px; }
  .workshop-guide .btn-line { justify-self:start; }
  .voices + .preparation { margin-top:62px; }
}
@media(max-width:680px) {
  header nav { gap:12px; justify-content:space-between; }
  header .nav-link { font-size:11px; white-space:nowrap; }
  header .cart-btn { position:absolute; top:16px; right:20px; margin:0; }
  .opening-story .concept-close { font-size:20px; text-align:left; }
  .opening-story .concept-message { text-align:left; }
  .opening-story .concept-message br { display:none; }
  .opening-actions { flex-direction:column; gap:12px; }
  .opening-actions .btn-ghost,.opening-actions .hero-action { width:100%; padding:13px 16px; font-size:13px; }
  .join #join-title { font-size:25px; }
  .workshop-guide { padding:28px 24px; }
  .workshop-guide h3 { font-size:23px; }
  .workshop-guide .btn-line { width:100%; justify-self:stretch; }
  .voices + .preparation { margin-top:52px; }
}

/* Archive introduction: a short reading area before the searchable catalogue. */
.archive-intro { max-width:1200px; margin:0 auto; padding:56px 0 48px; }
.archive-intro h1 { margin:0 0 28px; font-size:32px; font-weight:600; line-height:1.5; }
.archive-story { max-width:760px; }
.archive-story p { margin:0; font-size:14px; line-height:2.1; }
.archive-story p+p { margin-top:16px; }
.archive-close > span { display:inline-block; }
.archive-story .archive-close { margin-top:24px; font-size:21px; font-weight:600; line-height:1.7; }
@media(max-width:1279px) { .archive-intro { padding-left:40px; padding-right:40px; } }
@media(max-width:1000px) { .archive-intro { padding:44px 24px 40px; } }
@media(max-width:680px) {
  .archive-intro { padding:34px 20px 32px; }
  .archive-intro h1 { font-size:27px; margin-bottom:22px; }
  .archive-story .archive-close { font-size:19px; }
}

/* Text overlays use the quiet areas of each complete photograph. */
.opening-hero { min-height:0; overflow:hidden; background:var(--bg); }
.opening-photo { position:relative; inset:auto; margin:0; }
.opening-photo::after { display:none; }
.opening-photo img { width:100%; height:auto; object-fit:contain; }
.opening-heading { position:absolute; top:auto; bottom:10%; left:51%; transform:none; width:45%; max-width:none; margin:0; padding:0; }
.opening-heading h1 { font-size:clamp(28px,3.45vw,58px); line-height:1.5; white-space:nowrap; color:#171710; text-shadow:0 1px 12px rgba(255,255,255,.65); }
.opening-heading h1 br { display:block; }
.opening-story { margin-top:38px; }
.archive-intro { max-width:none; padding:0 0 48px; }
.archive-hero { position:relative; overflow:hidden; }
.archive-photo { margin:0; }
.archive-photo img { display:block; width:100%; height:auto; }
.archive-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,253,250,.93),rgba(255,253,250,.75) 25%,rgba(255,253,250,0) 56%); }
.archive-heading { position:absolute; top:50%; transform:translateY(-50%); left:max(40px,calc((100vw - 1200px)/2)); width:43%; }
.archive-heading h1 { font-size:32px; margin:0 0 24px; }
.archive-heading .archive-close { margin:0; font-size:clamp(27px,3.2vw,44px); line-height:1.6; font-weight:600; }
.archive-heading .archive-close span { display:block; }
.archive-story { max-width:760px; padding:0 24px; margin:38px auto 0; }
@media(max-width:1000px) {
 .archive-heading { left:24px; }
 .archive-heading h1 { font-size:27px; margin-bottom:16px; }
}
@media(max-width:700px) {
 .opening-heading { bottom:8%; left:49%; width:49%; }
 .opening-heading h1 { font-size:clamp(15px,4.6vw,28px); line-height:1.55; letter-spacing:0; }
 .opening-story { margin-top:28px; }
 .archive-heading { left:20px; width:44%; }
 .archive-heading .catalog-eyebrow { font-size:8px; margin-bottom:4px; }
 .archive-heading h1 { font-size:clamp(16px,4.7vw,26px); margin-bottom:8px; }
 .archive-heading .archive-close { font-size:clamp(14px,3.8vw,23px); line-height:1.7; }
 .archive-story { margin-top:28px; padding:0 20px; }
 .archive-intro { padding:0 0 32px; }
}