:root{--ink:#182d24;--sub:#5d7066;--gold:#8c7040;--line:#dce5de;--paper:#f7f9f6;--mint:#a8f0cf;--tint:#edf6f0;--serif:"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.95;letter-spacing:.035em;-webkit-font-smoothing:antialiased}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #32845d;outline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:var(--serif);font-weight:500}h2{font-size:clamp(24px,2.8vw,32px);line-height:1.65;letter-spacing:.08em;margin-bottom:28px}h3{font-size:16px;line-height:1.7}section{scroll-margin-top:70px}.wrap{max-width:1120px;padding:0 30px;margin:0 auto}.skip{position:fixed;top:-70px;left:10px;z-index:100;background:var(--ink);color:white;padding:10px}.skip:focus{top:10px}.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav-in{height:72px;max-width:1180px;padding:0 30px;margin:auto;display:flex;align-items:center;gap:22px}.brand{font-family:Georgia,serif;font-weight:400;font-size:16px;letter-spacing:.42em;text-decoration:none}.nav .brand{margin-right:auto}.back{font-size:11px;letter-spacing:.24em;color:var(--gold);text-decoration:none}.lang-sw{border:1px solid #a58d65;border-radius:99px;text-decoration:none;color:var(--gold);font-size:11px;padding:4px 13px}.hero{background:var(--tint);padding:74px 0 64px;overflow:hidden}.hero-in{display:grid;grid-template-columns:1fr 1.1fr;gap:46px;align-items:center}.app{display:flex;gap:16px;align-items:center;margin-bottom:28px}.app img{width:64px;height:64px;border-radius:17px;box-shadow:0 7px 20px #193c2525}.app b{font-size:20px;letter-spacing:.1em}.app small{display:block;font-size:11px;color:var(--sub);letter-spacing:.12em;margin-top:3px}h1{font-size:clamp(35px,3.6vw,48px);line-height:1.55;letter-spacing:.04em;margin-bottom:22px}.lead{font-size:16px;line-height:2;margin-bottom:27px}.ctas{display:flex;gap:23px;align-items:center;flex-wrap:wrap}.cta{display:inline-flex;gap:15px;align-items:center;justify-content:center;min-height:52px;padding:13px 23px;background:#193c2e;color:#fff;border-radius:99px;text-decoration:none;font-size:13px;letter-spacing:.05em;box-shadow:0 8px 22px #143c2520;transition:transform .18s}.cta:hover{transform:translateY(-2px)}.text-link{font-size:12px;text-decoration:none;border-bottom:1px solid #789783;padding:9px 0;white-space:nowrap}.text-link span{margin-left:8px}.availability{font-size:11px;line-height:1.8;color:var(--sub);margin-top:21px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4c8e66;margin-right:3px}.platform{font-size:10px;color:var(--sub);letter-spacing:.13em;margin-top:12px}.platform span{margin:0 8px}.hero-art{width:115%;max-width:none;transform:rotate(-2deg)}.hero-art img{border-radius:22px;box-shadow:0 28px 60px #173d2628}.hero-art figcaption{font-size:10px;line-height:1.8;color:var(--sub);padding:14px 7px;max-width:90%;transform:rotate(2deg)}.label{display:block;font-family:Georgia,serif;font-size:11px;letter-spacing:.32em;color:var(--gold);margin-bottom:16px}.intro{padding-top:62px;padding-bottom:68px;display:grid;grid-template-columns:1fr 2fr;gap:50px}.intro .label{padding-top:8px}.intro>p{font-size:16px;line-height:2.15;max-width:690px}.section{padding-top:76px;padding-bottom:80px}.section-note{font-size:14px;color:var(--sub);max-width:780px;margin-bottom:25px}.demo-section{padding:64px 0 50px;background:#f5f8f4;border-block:1px solid var(--line)}.demo-section h2{margin-bottom:12px}.demo-stage{position:relative;height:425px;margin:35px auto 0;max-width:900px;background:#dbe9de;border:1px solid #c9dbcd;border-radius:24px;overflow:clip}.demo-stage:before{content:"";position:absolute;width:480px;height:480px;left:-80px;top:120px;border:1px solid #c7d9cb;border-radius:50%}.demo-window{position:absolute;box-shadow:0 12px 28px #123b2320;border-radius:15px;overflow:hidden}.demo-window[hidden]{display:none}.demo-video{left:4%;top:36px;width:57%;height:250px;background:#17382a}.demo-video>span{position:absolute;left:16px;top:14px;z-index:1;font-size:10px;letter-spacing:.2em;color:#d6e9da}.landscape{height:100%;background:linear-gradient(145deg,#183d30 5%,#487f59 75%,#cce3c2)}.landscape:before,.landscape:after{content:"";position:absolute;width:120%;height:85%;background:#81b18c;left:-40%;bottom:-50%;border-radius:48% 80% 0 0;transform:rotate(18deg)}.landscape:after{background:#bdd5b0;left:30%;bottom:-40%;transform:rotate(-18deg)}.landscape i{display:block;position:absolute;width:64px;height:64px;border-radius:50%;background:#e4e9b9;right:22%;top:19%}.landscape b{display:grid;position:absolute;z-index:2;inset:0;place-items:center;color:#fff;font-size:49px;font-weight:300}.demo-social{top:36px;right:4%;width:31%;height:250px;background:#fbfdfb;padding:18px 20px}.demo-social>span{font-size:10px;letter-spacing:.2em;color:var(--sub)}.demo-person{font-size:11px;margin-top:18px;display:flex;gap:8px;align-items:center}.demo-person i{width:24px;height:24px;background:#b0d6bd;border-radius:50%}.demo-social p{font-weight:600;font-size:18px;line-height:1.9;margin-top:16px}.demo-lines{height:32px;margin-top:15px;background:repeating-linear-gradient(to bottom,#d7e4d9 0,#d7e4d9 3px,transparent 3px,transparent 13px);border-radius:3px;width:75%}.demo-music{display:flex;align-items:center;gap:13px;right:4%;top:305px;width:38%;height:69px;padding:10px 15px;background:#17291e;color:#eaf5ee}.demo-art{display:grid;place-items:center;width:42px;height:42px;background:#a6d2b5;border-radius:9px;color:#1c4230;font-size:24px}.demo-music b{font-size:11px;letter-spacing:0}.demo-music small{display:block;font-size:10px;color:#a9beb0;line-height:1.5}.demo-music>span{margin-left:auto;color:var(--mint);font-size:20px}.demo-toolbar{position:absolute;display:flex;align-items:center;gap:10px;left:5%;top:309px;background:#101914;border:1px solid #36533e;color:var(--mint);padding:9px 13px;border-radius:20px;box-shadow:0 14px 22px #143b2325}.demo-toolbar button{display:grid;place-items:center;border:0;width:44px;height:44px;padding:10px;border-radius:12px;color:var(--mint);background:#254633;cursor:pointer}.demo-toolbar button[aria-pressed="false"]{color:#74897b;background:transparent}.demo-toolbar button:hover{background:#33563f}.demo-toolbar svg{width:24px;height:24px}.grip{font-size:16px;color:#6d8c78;letter-spacing:2px}.bar-divider{height:21px;width:1px;background:#36513e;margin:0 3px}.demo-eyes{font-size:26px;line-height:1;letter-spacing:2px;font-weight:600}.demo-caption{font-size:11px;color:var(--sub);margin:13px 0 0}.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:step}.steps li{border-top:1px solid var(--line);padding-top:20px}.steps li>span{font:27px Georgia,serif;color:var(--gold)}.steps h3{margin:13px 0 9px;font-size:15px}.steps p,.feature p{font-size:13px;color:var(--sub)}.feature-section{padding:72px 0 80px;background:var(--paper);border-block:1px solid var(--line)}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}.feature{padding:25px 25px 28px;border:1px solid var(--line);border-radius:14px;background:#fff}.feature>span{font:20px Georgia,serif;color:var(--gold)}.feature h3{margin:10px 0}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px;margin-top:34px}.gallery figure:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:42px}.gallery img{border-radius:17px;border:1px solid var(--line)}.gallery a{display:block}.gallery figcaption{margin-top:19px}.gallery figure:first-child figcaption{margin:0}.gallery h3{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.8}.gallery p{font-size:12px;color:var(--sub);margin-top:9px}.compat-section{padding:72px 0 80px;background:#f2f6f0;border-block:1px solid var(--line)}.compat-section h2{margin-bottom:12px}.table-wrap{overflow-x:auto;margin:28px 0 30px}table{width:100%;border-collapse:collapse;background:#fff;font-size:12px;text-align:left}caption{position:absolute;clip-path:inset(50%);height:1px;overflow:hidden}th,td{padding:17px 20px;border-bottom:1px solid var(--line);vertical-align:top}thead th{background:#e2ede2;font-size:11px;letter-spacing:.1em}tbody th{font-weight:500;width:34%}td{color:#4d6556}.service-note{font-size:11px;color:var(--sub);line-height:1.95;margin-top:22px}.service-details{background:#ffffff66;padding:0 20px;border-radius:12px}.specs{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:32px 0 0}.specs>div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line)}.specs>div:last-child{border:0}.specs dt{background:var(--paper);font-size:11px;letter-spacing:.1em;padding:17px 22px;color:var(--sub)}.specs dd{margin:0;padding:17px 22px;font-size:13px}.faq-section{padding:72px 0 80px;border-top:1px solid var(--line)}details{border-top:1px solid var(--line);padding:17px 0}details:last-of-type{border-bottom:1px solid var(--line)}summary{cursor:pointer;list-style:none;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:28px}summary::-webkit-details-marker{display:none}summary:after{content:"+";font:23px Georgia,serif;color:var(--gold)}details[open]>summary:after{content:"−"}details p{font-size:13px;color:var(--sub);padding:13px 32px 1px 0}.closing{background:var(--tint);text-align:center;padding:64px 0}.pill{display:inline-block;font-size:11px;border:1px solid #9eb8a5;border-radius:99px;padding:4px 14px;letter-spacing:.12em;margin-bottom:19px}.closing h2{margin-bottom:15px}.closing>div>p{font-size:13px;color:var(--sub)}.closing .cta{margin-top:25px}footer{padding:43px 0 30px;border-top:1px solid var(--line)}.footer-links{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0;font-size:11px}.footer-links a{text-decoration:none}footer p{font-size:10px;color:var(--sub);max-width:800px}footer small{display:block;font-size:9px;letter-spacing:.12em;color:var(--sub);margin-top:23px}
@media(min-width:1400px){.hero-art{width:120%}.hero{padding-block:92px}}
@media(max-width:820px){.hero-in{grid-template-columns:1fr;gap:35px}.hero{padding:48px 0 30px}.hero-art{width:100%;max-width:650px;transform:rotate(-1deg);margin:auto}.hero-art figcaption{transform:none;font-size:10px;max-width:100%}.hero-copy{max-width:600px}h1{font-size:36px}.hero .lead{font-size:16px}.intro{grid-template-columns:1fr;gap:8px;padding-top:40px;padding-bottom:45px}.intro>p{font-size:14px}.feature-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr;gap:25px}.gallery figure:first-child{display:block}.gallery figure:first-child figcaption{margin-top:18px}.gallery{gap:28px 20px}.section,.feature-section,.compat-section,.faq-section{padding-top:53px;padding-bottom:56px}.demo-stage{height:390px}.demo-video{height:220px}.demo-social{height:220px;padding:15px}.demo-social p{font-size:15px}.demo-music{top:283px;width:40%}.demo-toolbar{top:287px;gap:5px;padding:7px 10px}.demo-toolbar button{width:39px;height:39px;padding:8px}.demo-eyes{font-size:20px}}
@media(max-width:520px){.wrap{padding-inline:22px}.nav-in{height:60px;padding-inline:22px;gap:16px}.back{font-size:10px;letter-spacing:.15em}.brand{font-size:14px}h1{font-size:32px;line-height:1.65}.app small{font-size:10px;letter-spacing:.05em}.app{margin-bottom:23px}.hero-art img{border-radius:13px}.platform{font-size:9px;letter-spacing:.05em}.feature-grid{grid-template-columns:1fr}.feature{padding:23px}.gallery{grid-template-columns:1fr}.gallery figure:first-child{grid-column:auto}.demo-section{padding:44px 0 33px}.demo-section h2{font-size:23px}.demo-stage{height:375px;margin-top:24px;border-radius:16px}.demo-video{top:22px;left:5%;width:66%;height:170px}.demo-social{top:72px;right:5%;width:52%;height:169px;padding:13px 14px}.demo-social>span{font-size:8px}.demo-person{margin-top:10px;font-size:9px}.demo-person i{width:18px;height:18px}.demo-social p{font-size:13px;line-height:1.75;margin-top:10px}.demo-lines{height:18px;margin-top:10px}.demo-music{top:255px;left:5%;right:auto;width:90%;height:53px;padding:7px 12px;border-radius:11px;gap:10px}.demo-art{height:34px;width:34px}.demo-toolbar{top:320px;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:15px;gap:5px;white-space:nowrap}.demo-toolbar button{width:32px;height:32px;padding:6px;border-radius:9px;min-width:32px}.demo-toolbar svg{width:21px;height:21px}.demo-eyes{font-size:20px}.grip{font-size:12px}.demo-caption{font-size:10px}.specs>div{grid-template-columns:1fr}.specs dt{padding:11px 18px 0}.specs dd{padding:7px 18px 15px;background:var(--paper)}table{font-size:11px}th,td{padding:13px 11px}tbody th{width:35%}.service-details{padding-inline:15px}summary{font-size:13px}.footer-links{gap:13px 19px}.availability{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* 実画面は描き直さず、そのままの比率で配置する。 */
.real-hero{transform:none;width:114%;max-width:640px}.real-desktop{position:relative;width:100%;aspect-ratio:1080/700;background:linear-gradient(150deg,#d9e9e0,#eef5ee 65%,#d5e6db);border:1px solid #c9d9ce;border-radius:22px;overflow:clip;isolation:isolate}.real-window{position:absolute;filter:drop-shadow(0 10px 14px #12342424)}.real-window[hidden]{display:none}.real-video{width:67%;left:2%;top:6%;z-index:1}.real-files{width:36%;right:2%;top:18%;z-index:2}.real-music{width:94%;left:3%;top:73%;z-index:3}.real-toolbar{position:absolute;width:68%;left:16%;bottom:2%;z-index:4}.real-desktop img{display:block;width:100%;height:auto;border-radius:0!important;box-shadow:none!important}.screen-zoom{border:0;padding:0;background:transparent;display:block;cursor:zoom-in;width:100%;color:inherit;text-align:left}.real-toggle{position:absolute;top:0;bottom:0;width:8.3%;border:0;background:transparent;cursor:pointer;border-radius:8px;min-height:0;padding:0}.toggle-video{left:19.5%}.toggle-music{left:33.5%}.toggle-files{left:47.6%}.real-toggle:hover,.real-toggle:focus-visible{outline:2px solid #a8f0cf;outline-offset:-3px}.real-toggle[aria-pressed="false"]{background:#07120db8}.real-demo{max-width:980px;margin:30px auto 0}.capture-credit{font-size:10px;color:var(--sub);line-height:1.8;margin-top:12px}.capture-credit a{color:inherit}.real-gallery{display:flex;flex-direction:column;gap:40px}.real-gallery figure,.real-gallery figure:first-child{display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:35px}.real-gallery figcaption,.real-gallery figure:first-child figcaption{margin:0}.real-gallery figure:nth-child(2){grid-template-columns:1fr;gap:20px}.real-gallery figure:nth-child(3) .screen-zoom{max-width:400px;margin:auto}.real-gallery img{border:0;border-radius:0;box-shadow:0 15px 40px #112d1c12}.screen-dialog{width:min(1300px,96vw);max-height:94vh;border:1px solid #c0d3c6;border-radius:18px;padding:22px;background:#edf4ee;color:var(--ink)}.screen-dialog::backdrop{background:#07110dd9}.screen-dialog img{max-width:100%;max-height:73vh;object-fit:contain;margin:20px auto;width:auto}.screen-dialog p{font-size:12px;color:var(--sub);line-height:1.8}.close-screen{display:block;margin-left:auto;border:1px solid #789b84;border-radius:99px;padding:8px 16px;background:#fff;color:var(--ink);cursor:pointer;min-height:44px}.hero .real-desktop{box-shadow:0 20px 45px #153b2520}.hero-art.real-hero figcaption{transform:none;max-width:100%}
@media(max-width:820px){.real-hero{width:100%;max-width:650px}.real-gallery figure,.real-gallery figure:first-child{grid-template-columns:1fr;gap:18px}.real-gallery figure:nth-child(3) .screen-zoom{max-width:350px}.real-hero .real-desktop{border-radius:15px}}
@media(max-width:520px){.real-demo{margin-inline:-8px}.real-desktop{aspect-ratio:1080/860;border-radius:13px}.real-video{width:82%;left:2%;top:4%}.real-files{width:37%;right:1%;top:26%}.real-music{width:98%;left:1%;top:74%}.real-toolbar{width:92%;left:4%;bottom:2%}.real-toggle{border-radius:4px}.screen-dialog{padding:15px}.screen-dialog p{font-size:11px}}

/* 作業アプリを主役にした、実画面の使用例。小窓の寸法比を維持する。 */
.hero-in{grid-template-columns:1fr;gap:42px}.hero-copy{max-width:740px}.hero-art.real-hero{width:100%;max-width:none;margin:0}.workspace-zoom{overflow:hidden;border-radius:16px;box-shadow:0 24px 60px #153b2526}.workspace-zoom>img{width:100%;height:auto;border:0;border-radius:0;transform:none}.workspace-desktop{aspect-ratio:3024/1898;background:#252525;border-radius:14px;overflow:hidden}.workspace-desktop>.real-work-base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.workspace-desktop .real-social{right:1.4%;top:9.2%;width:29.3%;z-index:2}.workspace-desktop .real-video{right:1.4%;left:auto;top:67%;width:29.3%;z-index:2}.workspace-desktop .real-music{left:4%;top:86%;width:54%;z-index:3}.workspace-desktop .real-toolbar{left:34%;top:1.1%;bottom:auto;width:32%;z-index:4}.workspace-desktop .toggle-social{left:5.5%}.workspace-desktop .toggle-video{left:19.5%}.workspace-desktop .toggle-music{left:33.5%}.real-demo{max-width:1160px}.screen-dialog{width:min(1600px,96vw)}.screen-dialog img{max-height:78vh}.capture-credit a{overflow-wrap:anywhere}.workspace-legend{display:flex;gap:12px 30px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--sub)}.workspace-legend b{color:var(--ink);font-weight:500}.workspace-legend span{white-space:nowrap}
@media(max-width:820px){.hero-in{gap:28px}.hero-art.real-hero{width:100%;max-width:none}.workspace-zoom{border-radius:10px}.workspace-desktop{border-radius:9px}.workspace-legend{font-size:11px;gap:10px 20px}}
@media(max-width:520px){.hero-in{padding-top:48px}.workspace-zoom,.workspace-desktop{border-radius:7px}.workspace-desktop .real-social{right:1.4%;top:9.2%;width:29.3%}.workspace-desktop .real-video{right:1.4%;left:auto;top:67%;width:29.3%}.workspace-desktop .real-music{left:4%;top:86%;width:54%}.workspace-desktop .real-toolbar{left:34%;top:1.1%;bottom:auto;width:32%}.real-demo{margin-inline:0}.workspace-legend{display:grid;grid-template-columns:1fr 1fr}}

.workspace-desktop .real-toolbar{overflow:hidden;border-radius:999px}.workspace-desktop .real-music{overflow:hidden;border-radius:18px}.workspace-desktop .real-social,.workspace-desktop .real-video{overflow:hidden;border-radius:12px}

/* 最初の画面でも、Macの使用例全体を大きく見せる。 */
.hero-in{width:min(1440px,calc(100% - 80px));grid-template-columns:270px minmax(0,1fr);gap:38px;padding-top:60px;padding-bottom:65px;align-items:center}.hero-copy{max-width:none}.hero-copy h1{font-size:31px;line-height:1.7;margin-top:30px}.hero-copy .lead{font-size:13px;line-height:2}.hero-copy .ctas{gap:16px;flex-wrap:wrap;margin-top:25px}.hero-copy .availability{font-size:9px;line-height:1.8}.hero-copy .platform{font-size:8px}.hero-copy .app img{width:52px;height:52px}.hero-copy .app small{font-size:9px}.hero-art.real-hero figcaption{font-size:10px;line-height:1.9;text-align:left}
@media(max-width:1050px) and (min-width:821px){.hero-in{grid-template-columns:220px minmax(0,1fr);gap:25px;width:calc(100% - 50px)}.hero-copy h1{font-size:27px}}
@media(max-width:820px){.hero-in{grid-template-columns:1fr;width:calc(100% - 44px);padding-top:40px;gap:26px}.hero-copy h1{font-size:40px;line-height:1.55;margin-top:28px}.hero-copy .lead{font-size:14px}.hero-copy .ctas{margin-top:20px}.hero-copy .platform{font-size:9px}.hero-art.real-hero figcaption{font-size:10px}}

/* 作業画面を全面に使い、小窓を2通りの場所へまとめる。 */
.compact-desktop{aspect-ratio:16/9;background:#eff2fa;border-radius:14px}.compact-desktop>.real-work-base{object-fit:cover}.compact-desktop .real-social{left:81.25%;right:auto;top:9.333%;width:17.5%;z-index:2}.compact-desktop .real-video{left:81.25%;right:auto;top:48.667%;width:17.5%;z-index:2}.compact-desktop .real-toolbar{left:35%;top:1.111%;bottom:auto;width:30%;border-radius:999px}.compact-desktop .real-music{left:26%;top:83%;width:54%}.compact-desktop[data-layout="left"] .real-social{left:1.25%;top:9.333%}.compact-desktop[data-layout="left"] .real-video{left:19.625%;top:9.333%}.compact-desktop .real-window{transition:left .6s ease,top .6s ease}.layout-comparison{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:30px}.layout-comparison figure{margin:0}.layout-comparison .screen-zoom{overflow:hidden;border-radius:12px;box-shadow:0 15px 40px #17352815}.layout-comparison img{display:block;width:100%;height:auto}.layout-comparison h3{font-size:19px;font-weight:500;margin:20px 0 8px}.layout-comparison p{font-size:13px;line-height:1.9;color:var(--sub)}.layout-video{margin-top:48px}.layout-video h3{font-size:23px;font-weight:500}.layout-video p{font-size:13px;color:var(--sub);line-height:1.9;max-width:700px}.layout-video video{display:block;width:100%;height:auto;border-radius:14px;background:#101914;margin-top:22px}.layout-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.layout-controls button{border:1px solid #adc3b4;border-radius:99px;background:transparent;color:var(--ink);padding:12px 20px;font:inherit;font-size:13px;cursor:pointer;min-height:44px}.layout-controls button[aria-pressed="true"]{background:#203e30;color:#f0fff5;border-color:#203e30}.layout-controls button:focus-visible{outline:3px solid #8cd6b0;outline-offset:3px}.workspace-legend{margin-top:20px}
@media(max-width:820px){.layout-comparison{grid-template-columns:1fr;gap:28px}.layout-video{margin-top:35px}.layout-comparison h3{font-size:18px}.layout-controls button{font-size:12px}.compact-desktop .real-social{left:81.25%;right:auto;top:9.333%;width:17.5%}.compact-desktop .real-video{left:81.25%;right:auto;top:48.667%;width:17.5%}.compact-desktop .real-toolbar{left:35%;top:1.111%;width:30%}.compact-desktop .real-music{left:26%;top:83%;width:54%}}
@media(prefers-reduced-motion:reduce){.compact-desktop .real-window{transition:none}}

/* 小さな画面で見出しの語尾が孤立しないようにする。 */
@media(max-width:520px){.hero-in{width:100%;padding-inline:22px}.hero-copy h1{font-size:32px;line-height:1.6;letter-spacing:.025em}.workspace-legend span{white-space:normal}}