@charset "UTF-8";
/* 一枚の用紙に一つの機能。画面は実画像、端末の外枠は軽量なCSS。 */
.app-monogram{display:block;width:36px;height:36px;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;flex:none}
.app-monogram img{display:block;width:100%;height:100%}
.language-switch{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:10px}
.language-switch a{padding:5px 6px;text-decoration:none;border:1px solid transparent;border-radius:3px;color:var(--muted);white-space:nowrap}
.language-switch a[aria-current]{border-color:var(--line);color:var(--ink);background:color-mix(in srgb,var(--paper) 50%,transparent)}
.mast-actions{align-items:center}
.screens .page-content{padding:12px 24px 0}
.feature-card{margin:0;display:flex;flex-direction:column;height:100%;cursor:default}
.feature-heading{display:flex;align-items:center;gap:10px;flex:none}
.feature-symbol{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:7px;color:var(--accent);background:color-mix(in srgb,var(--paper) 75%,var(--wash))}
.feature-symbol svg{width:21px;height:21px}
.feature-heading h2{margin:0;font:600 23px/1.4 var(--sans);letter-spacing:.02em}
.feature-index{margin-left:auto;white-space:nowrap;font:10px Georgia,serif;letter-spacing:.08em;color:var(--muted)}
.page .feature-tagline{font:500 16px/1.6 var(--serif);margin:12px 0 0;letter-spacing:.02em}
.device-pair{position:relative;width:100%;height:calc(var(--paper-h)*.56);min-height:0;margin:18px 0 12px;flex:none;isolation:isolate}
.device-pair::before{content:"";position:absolute;inset:8% 0 0;border-radius:48% 48% 12px 12px;background:radial-gradient(ellipse at 60% 45%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 67%);z-index:-1}
.desktop-device{position:absolute;top:18px;left:0;width:94%;padding-bottom:12px}
.device-label{position:absolute;top:-16px;left:0;font:8px/1.2 var(--sans);letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.feature-card .desktop-screen{display:block;padding:5px 5px 8px;background:linear-gradient(145deg,#444a4e,#14191c)!important;border:1px solid #3a4145!important;border-radius:7px!important;box-shadow:0 7px 13px #13211b24!important;overflow:hidden}
.feature-card .desktop-screen img{width:100%;height:auto;aspect-ratio:1.6;object-fit:contain;background:#e4e4e1}
.desktop-base{position:absolute;bottom:4px;height:9px;left:-2%;width:104%;background:linear-gradient(#d3d6d6,#a3a8ab 48%,#697176);border-radius:1px 1px 55% 55%/1px 1px 70% 70%;box-shadow:0 6px 7px #152b2420}
.desktop-base::after{content:"";position:absolute;top:0;left:39%;width:22%;height:3px;border-radius:0 0 5px 5px;background:#7b8488}
.phone-device{position:absolute;bottom:0;right:2%;width:36%;max-width:145px;filter:drop-shadow(0 8px 7px #172b332d)}
.phone-device .device-label{left:50%;transform:translateX(-50%)}
.feature-card .phone-screen{display:flex;flex-direction:column;background:#181d21!important;border:2px solid #737a80!important;padding:5px!important;border-radius:19px!important;box-shadow:inset 0 0 0 1px #050709!important;overflow:hidden}
.feature-card .phone-screen img{display:block;width:100%;height:auto;aspect-ratio:390/780;object-fit:contain;background:#eee}
.phone-status{height:13px;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 7px;color:#fff;font:5px/1 Arial,sans-serif;flex:none}
.phone-camera{position:absolute;left:calc(50% - 11px);top:0;width:22px;height:6px;background:#020304;border-radius:5px}
.phone-home{height:11px;display:grid;place-items:center;flex:none}
.phone-home::after{content:"";display:block;height:2px;width:32%;background:#d6dce0;border-radius:2px}
.feature-card figcaption{margin:0;flex:1;min-height:0;border-top:1px solid var(--line);padding-top:12px}
.page .feature-description{font:var(--text)/1.85 var(--sans);letter-spacing:.015em;margin:0 0 8px;text-wrap:pretty}
.feature-zoom{font:9px/1.6 var(--sans);color:var(--muted)}
.screens .continued-label{display:none}
/* 数値の比率は端末画像そのものに保持する。 */
.fit-media .phone-screen img{max-height:none!important}
body[data-product="watoji"] .screens .page-content{padding:12px 25px 0 30px}
body[data-product="watoji"] .feature-symbol{border-radius:2px}
body[data-product="watoji"] .feature-heading h2{font-family:var(--serif)}
body[data-product="prismnote"] .feature-symbol{color:#bce8ff;background:#ffffff10;border-color:#9bd6e85c}
body[data-product="prismnote"] .language-switch a{color:#b8d6e8}
body[data-product="prismnote"] .language-switch a[aria-current]{background:#ffffff0a;color:#f0faff;border-color:#80b5ca66}
@media(max-width:820px){
 .masthead{flex-wrap:wrap;padding:10px 16px;row-gap:8px}
 .mast-actions{gap:12px}
 .language-switch{order:3;width:100%;justify-content:center}
 .stage{margin-top:5px}
 .screens .page-content{padding:8px 17px 0}
 .feature-heading{gap:8px}
 .feature-heading h2{font-size:21px}
 .feature-symbol{width:28px;height:28px}
 .feature-index{font-size:9px}
 .page .feature-tagline{font-size:14px;margin-top:10px}
 .device-pair{height:calc(var(--paper-h)*.54);margin-top:18px;margin-bottom:10px}
 .feature-card figcaption{padding-top:9px}
 .page .feature-description{font-size:12px;line-height:1.8}
 .feature-zoom{font-size:8px}
 .phone-device{width:37%;right:1%}
 .feature-card .phone-screen{padding:4px!important;border-radius:16px!important}
 body[data-product="watoji"] .screens .page-content{padding:8px 19px 0 24px}
}
@media(max-width:359px){
 .app-monogram{display:block;width:29px;height:29px}
 .wordmark{gap:6px}
 .wordmark strong{font-size:13px}
 .wordmark small{font-size:7px}
 .language-switch{gap:2px;font-size:9px}
 .language-switch a{padding:4px 7px}
 .feature-heading h2{font-size:18px}
 .feature-index{font-size:8px}
 .page .feature-tagline{font-size:12px;line-height:1.5;margin-top:8px}
 .feature-symbol{width:25px;height:25px}
 .feature-symbol svg{width:18px;height:18px}
 .device-pair{height:calc(var(--paper-h)*.50);margin:18px 0 8px}
 .page .feature-description{font-size:11px;line-height:1.7;margin-bottom:4px}
 .phone-device{width:37%}
 .feature-card .phone-screen{border-radius:13px!important;padding:3px!important}
 .phone-status{height:10px;padding:0 4px;font-size:4px}
 .phone-home{height:8px}
}
@media(min-width:821px){.language-switch{margin-left:auto}.mast-actions{margin-left:10px}}
html[lang="hi"]{--sans:"Noto Sans Devanagari",Mangal,system-ui,sans-serif;--serif:"Noto Serif Devanagari",Mangal,serif}
html[lang="hi"] .page p{line-height:1.95}
html[lang="hi"] .feature-heading h2{font-size:21px}
html[lang="hi"] .feature-tagline{font-size:14px}
html[lang="hi"] .feature-description{line-height:1.85}
@media(max-width:359px){html[lang="hi"] .feature-heading h2{font-size:17px}html[lang="hi"] .feature-tagline{font-size:12px}}
@media print{.language-switch{display:none}.device-pair{break-inside:avoid}.feature-card{height:auto}}
html:not(.js) .feature-card{height:auto;max-width:500px;margin:auto}.language-switch a:focus-visible{outline-offset:1px}
/* 本文の行数に応じて画像領域を伸縮させ、説明を紙面内に保つ。 */
.feature-card figcaption{flex:none;min-height:auto}
.device-pair{height:auto!important;flex:1;min-height:100px;container-type:size}
.desktop-device{width:min(94%,calc((100cqh - 40px)*1.6))}
.phone-device{width:min(37%,calc((100cqh - 20px)*.46))!important;max-width:145px}

@font-face{font-family:'Story Han';src:url('fonts/story-han.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Story Devanagari';src:url('fonts/story-deva.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Story Devanagari Serif';src:url('fonts/story-deva-serif.woff') format('woff');font-weight:400;font-display:swap}
.language-switch [lang="hi"]{font-family:'Story Devanagari',sans-serif}
.language-switch [lang="zh-CN"]{font-family:'Story Han',sans-serif}
html[lang="zh-CN"] body{--sans:'Story Han',sans-serif;--serif:'Story Han',serif}
html[lang="hi"] body{--sans:'Story Devanagari',sans-serif;--serif:'Story Devanagari Serif',serif}

@media(max-width:359px){.device-pair{min-height:64px}.desktop-device .device-label,.phone-device .device-label{font-size:7px}}

/* 添付した紙の写真を、実画面のそばで見やすく紹介する。 */
.feature-card .attachment-photo{position:absolute;z-index:1;bottom:0;left:8%;width:min(26%,calc(100cqh*.43));padding:3px;border:1px solid #d6cfbf!important;border-radius:1px!important;background:#fffdf6!important;box-shadow:1px 6px 9px #1b202337!important;transform:rotate(-5deg)}
.feature-card .attachment-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain}
.phone-device{z-index:2}