@charset "UTF-8";
:root{--cyan:#39d8ec;--teal:#108ea7;--ink:#172931;--muted:#596b74;--border:#d8e7eb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;color:var(--ink);background:white;font-size:15px;line-height:1.75;letter-spacing:0}img{max-width:100%;height:auto}button{font:inherit}.narrow{width:min(620px,calc(100% - 36px));margin-inline:auto}
.header{background:#050a0e;color:#f3f8fc}.headtop{height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px}.logo{text-decoration:none;color:#f6fcff;display:flex;align-items:center;gap:11px;font-size:16px;white-space:nowrap}.logo-symbol{width:33px;height:31px;display:flex;align-items:end;justify-content:center;gap:2px;padding:4px 2px;background:#111e29;border-radius:7px;box-shadow:0 0 14px #13cbeb3a}.logo-symbol span{font-size:7px;line-height:19px;width:7px;height:19px;text-align:center;border-radius:3px;color:#00131c;font-weight:800;background:#2fdef3;box-shadow:0 0 5px #2fdef355}.logo-symbol span:nth-child(2){height:22px;line-height:22px;background:#c9fa25}.logo-symbol span:nth-child(3){height:20px;line-height:20px;background:#f73e9c}.logo-symbol span:nth-child(4){height:23px;line-height:23px;background:#fe9a24}.headby{font-size:11px;color:#bdcdd1}.nav{height:41px;display:flex;align-items:stretch;gap:26px;border-top:1px solid #1e353a;overflow-x:auto;scrollbar-width:none}.nav a{display:flex;align-items:center;flex-shrink:0;font-size:12px;color:#d7e2e6;text-decoration:none;white-space:nowrap}.nav a.selected,.nav a:hover{color:#3cdbec;font-weight:700}.hero{color:#e8f1f7;background:radial-gradient(ellipse 62% 80% at 64% 55%,#09333b 0%,#07151d 66%,#03080c 100%);border-top:1px solid #172d32}.herogrid{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:32px;padding-block:39px 40px;min-height:442px;align-items:center}.eyebrow{font-size:11px;letter-spacing:.13em;color:#8cbec8;font-weight:800}.herotext h1{margin:18px 0 15px;line-height:1.4;font-size:23px;font-weight:600;letter-spacing:-.02em}.hero-line1{display:block;font-size:19px;font-weight:700;margin-bottom:23px;white-space:nowrap}.hero-line2{display:block;line-height:1.45;font-size:23px;font-weight:550;margin-bottom:16px}.herotext h1 strong{font-size:33px;display:block;font-weight:800;line-height:1.25;color:#53d9e9;white-space:nowrap}.herotext p{margin:16px 0;color:#d8e4e8;font-size:13.5px;line-height:1.9;white-space:nowrap}.version-tag{display:inline-block;border:1px solid #51646c;padding:6px 10px;font-size:12px;line-height:1.3;font-weight:500;color:#dee7eb}.heroimage{width:205px;height:auto;border:1px solid #31565d;padding:5px;background:linear-gradient(140deg,#091d23,#02070b);border-radius:9px;box-shadow:0 0 22px #31dcec14}.heroimage img{display:block;width:100%;height:auto;max-height:410px;object-fit:contain}
.rhythm-intro{padding-top:36px;padding-bottom:61px}.qa-title{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid #15a7ba;padding-bottom:8px}.qa-title>span{font-size:11px;font-weight:800;color:#0793a8;letter-spacing:.12em;white-space:nowrap}.qa-title h2{font-size:22px;margin:0;font-weight:750;letter-spacing:-.03em}.rhythm-intro>p{margin:22px 0 20px;font-size:15px;line-height:1.8}.qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qa-list a{border:1px solid #d4e5e9;background:#f0f7f8;text-decoration:none;color:#10232b;display:flex;flex-direction:column;gap:9px;padding:17px 15px 14px;min-height:118px}.qa-list a:hover{border-color:#17a8b8;background:#e6f6f7}.qa-list small{color:#238ca1;font-size:12px}.qa-list b{font-size:16px;line-height:1.4}.qa-list span{font-size:13px;color:#6b818a}
.steps{border-top:1px solid #e1e8eb;padding-top:24px}.part-label{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.part-label>span{display:inline-block;background:#edf8fa;color:#058da3;font-weight:800;font-size:13px;letter-spacing:.05em;border-radius:8px;padding:5px 10px}.part-label>img{width:132px;height:auto;max-height:30px;object-fit:contain}.steps>h2,.standalone>h2{font-size:23px;margin:2px 0 30px;line-height:1.5;letter-spacing:-.015em;font-weight:800}.feature{margin:24px 0 66px}.feature h3{font-size:20px;line-height:1.45;font-weight:800;letter-spacing:-.02em;display:flex;gap:10px;align-items:center;margin:0 0 20px}.num{color:#0793a8;background:#effafc;border:1px solid #d5eef3;font-size:15px;border-radius:8px;padding:5px 8px}.num.green{color:#338f3d;background:#eff9ee;border-color:#dcefd6}.num.purple{color:#7d43ad;background:#f7f1fd;border-color:#eee0fa}p{margin:0}.feature>p,.standalone>p{font-size:16px;line-height:1.8}.illustrated{background:#f2f8f9;border:1px solid #e4eff2;border-radius:20px;margin:24px 0 0;padding:20px 22px 21px;text-align:center}.illustrated p{font-size:14px;line-height:1.85}.fig{margin:0}.fig button{background:transparent;padding:0;border:none;cursor:zoom-in;line-height:0;border-radius:6px;max-width:100%;outline-offset:5px}.fig img{display:block;width:auto;height:auto;margin:0 auto;max-width:100%;border-radius:5px}.illustrated .fig{margin-top:12px}.steps-image img{width:466px}.layers-image img,.drums-image img{width:354px}.swing-image img{width:460px}.swing-panel img{width:385px}.standalone{border-top:1px solid #e8eef0;padding-top:30px;padding-bottom:58px}.standalone .fig{margin:26px auto}.training-image img{width:290px}.preset-image img{width:306px}.textbreak{height:17px}.closing{font-size:24px;text-align:center;margin:60px -20px 25px;white-space:normal}.app-store{text-align:center;font-size:18px;font-weight:700;color:#142a35}.app-store>span{border-bottom:1px solid #142a35}.lightbox{position:fixed;inset:0;background:#020508e8;z-index:10;display:flex;justify-content:center;align-items:center;padding:65px 24px 25px}.lightbox[hidden]{display:none}.lightbox img{object-fit:contain;max-width:100%;max-height:100%}.lightbox-x{position:absolute;top:14px;right:20px;background:#1f3039;border:1px solid #536670;border-radius:100%;width:42px;height:42px;color:white;font-size:27px;cursor:pointer}
@media(max-width:650px){.narrow{width:calc(100% - 32px)}.headtop{height:64px}.headby{font-size:9px;max-width:100px;text-align:right}.logo{font-size:14px;gap:6px}.nav{gap:20px}.nav a{font-size:11px}.herogrid{padding:30px 0;grid-template-columns:minmax(0,1fr) 35%;gap:12px;min-height:0;align-items:center}.hero-line1{font-size:clamp(12px,3vw,18px);margin-bottom:12px;white-space:normal}.hero-line2{font-size:clamp(15px,3.8vw,21px);margin-bottom:12px}.herotext h1 strong{font-size:clamp(20px,5vw,30px)}.herotext p{font-size:clamp(10px,2.7vw,13px);white-space:normal;line-height:1.7}.eyebrow{font-size:10px;letter-spacing:.08em}.heroimage{width:100%;padding:3px}.version-tag{font-size:10px}.qa-title{gap:10px;flex-wrap:wrap}.qa-title h2{font-size:clamp(19px,4.9vw,23px)}.rhythm-intro{padding-top:30px}.rhythm-intro>p{font-size:14px}.qa-list{gap:9px}.qa-list a{padding:12px 10px;min-height:122px}.qa-list b{font-size:14px}.qa-list span{font-size:12px}.qa-list small{font-size:11px}.steps>h2,.standalone>h2{font-size:21px}.feature h3{font-size:18px}.feature>p,.standalone>p{font-size:15px}.illustrated{padding:16px 10px}.illustrated p{font-size:13px}.closing{font-size:22px;margin-left:0;margin-right:0}}
@media(max-width:370px){.herogrid{grid-template-columns:minmax(0,1fr) 32%}.herotext h1{margin:9px 0}.herotext h1 strong{font-size:19px}.hero-line1{font-size:11px}.hero-line2{font-size:15px}.version-tag{padding:4px 6px;font-size:9px}.headby{display:none}.qa-list{grid-template-columns:1fr}.qa-list a{min-height:0}.part-label img{width:105px}}

/* PDF原稿差し替え (2026-10-12): 説明文→画像の順序と中央配置のみ */
#training .example-copy, #preset .preset-example {text-align:center; margin-top:24px; font-size:14px; line-height:1.85;}
#training .example-copy p, #preset .preset-example p {font-size:14px; line-height:1.85;}
#training .training-image, #preset .preset-image {text-align:center; width:100%; margin:30px auto 0;}
#training .training-image .img-trigger, #preset .preset-image .img-trigger {display:inline-block; margin-inline:auto; max-width:100%;}
@media(max-width:650px){#training .example-copy p, #preset .preset-example p{font-size:13px;}}

#training .framed-example, #preset .framed-example {background:#f2f8f9;border:1px solid #e4eff2;border-radius:20px;margin:24px 0 0;padding:20px 22px 21px;text-align:center;}
#training .framed-example .example-copy, #preset .framed-example .preset-example {text-align:center;margin-top:0;}
#training .framed-example .training-image, #preset .framed-example .preset-image {margin:18px auto 0;}
@media(max-width:650px){#training .framed-example, #preset .framed-example{padding:16px 10px;}}

/* Marked Top-page revisions, 2026-10-16. */
.logo-app-icon{display:block;width:33px;height:33px;flex:none;border-radius:7px;object-fit:contain}
.qa-list .qa-card{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:56px;margin:0;padding:6px 12px;border:1px solid #d4e5e9;border-radius:0;background:#f0f7f8;color:#10232b;text-align:left;cursor:pointer}
.qa-list .qa-card:hover{border-color:#17a8b8;background:#e6f6f7}
.qa-list .qa-card b{min-width:0;font-size:16px;line-height:1.4;font-weight:700}
.qa-list .qa-card>span{flex:none;color:#238ca1;font-size:16px;line-height:1}
.qa-card:focus-visible{outline:2px solid #108ea7;outline-offset:4px}
.fig .image-caption{margin:14px 0 0;font-size:14px;line-height:1.85;color:#B45309;text-align:center}
.fig .layer-caption{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
#preset .preset-count{white-space:nowrap}
#preset>.closing{margin:56px 0 24px;line-height:1.6}
.app-store-button{display:inline-block;padding:12px 24px;border:1px solid #3b4951;border-radius:9px;background:#080a0e;color:#fff;font:inherit;font-size:16px;font-weight:600;line-height:1.5}
.app-store-button:disabled{opacity:1;cursor:default}
@media(max-width:650px){.qa-list .qa-card{padding:6px 10px}.qa-list .qa-card b{font-size:14px}.fig .image-caption{font-size:13px}#preset>.closing{margin-top:42px}}

/* Focused text layout and compact concern-card popup. */
.training-modes{margin:14px 0;padding:12px 16px;border:1px solid #d8e7eb;border-radius:10px;background:#f7fafb}
.training-modes p{font-size:16px;line-height:1.8}
.training-modes p+p{margin-top:5px}
#preset .preset-example p:first-child{max-width:34em;margin-inline:auto;text-wrap:balance}
#preset .preset-example p+p{margin-top:8px}
.lightbox-panel{display:contents}
.lightbox--compact{padding:24px 20px;background:#02050880}
.lightbox--compact .lightbox-panel{position:relative;display:flex;align-items:center;justify-content:center;width:min(360px,100%);padding:48px 16px 16px;border:1px solid #31565d;border-radius:14px;background:#080a0e;box-shadow:0 16px 60px #02050860}
.lightbox--compact img{display:block;width:auto;height:auto;max-width:100%;max-height:min(60vh,560px);max-height:min(60dvh,560px);object-fit:contain}
.lightbox--compact .lightbox-x{top:8px;right:8px;width:32px;height:32px;font-size:23px;line-height:1}
@media(max-width:650px){.training-modes{padding:12px}.training-modes p{font-size:15px}}

@media(max-width:650px){#preset>.closing{font-size:clamp(10px,3.9vw,22px);white-space:nowrap}}

.lightbox-caption{display:none}
.lightbox--compact .lightbox-panel{flex-direction:column;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto}
.lightbox--compact .lightbox-caption{display:block;margin:12px 0 0;color:#e8f1f7;font-size:13px;line-height:1.7;text-align:center}