/* ナゾル商品ページ専用。緑は操作、青は「次に見る場所」に限定する。 */
body.nazoru-page { --nazoru-blue:#1769c2; --nazoru-blue-soft:#eaf4ff; --nazoru-night:#102f27; --nazoru-cream:#f7f4ec; }
body.nazoru-page { overflow-x:hidden; }
body.nazoru-page > main.wrap { box-sizing:border-box; width:100%; max-width:1120px; padding-inline:28px; }
body.nazoru-page .nazoru-hero { padding:54px 0 92px; }
.nazoru-product-mark { display:flex; gap:14px; align-items:baseline; margin:0 0 18px; color:var(--accent-ink); }
.nazoru-product-mark strong { font-family:var(--jp); font-size:1.55rem; letter-spacing:.04em; }
.nazoru-product-mark span { font-size:.78rem; font-weight:700; letter-spacing:.04em; }
body.nazoru-page .nazoru-hero h1,
body.nazoru-page .nazoru-story h2 { font-family:var(--jp); font-weight:700; }
.nazoru-hero-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr); gap:76px; align-items:end; margin-top:48px; }
.nazoru-hero-grid > * { min-width:0; }
.nazoru-hero-copy h1 { margin:14px 0 24px; font-size:clamp(2.55rem,4vw,3.25rem); line-height:1.22; letter-spacing:-.045em; }
.nazoru-hero-copy h1 > span,
.nazoru-hero-copy h1 > strong { display:block; white-space:nowrap; }
.nazoru-hero-copy h1 i { font-style:normal; }
.nazoru-hero-copy h1 strong { color:var(--accent-ink); font-weight:inherit; }
.nazoru-hero-action { padding-bottom:10px; }
.nazoru-hero-lead { max-width:640px; margin:0 0 26px; color:#41534d; font-size:1rem; line-height:1.9; }
.nazoru-quiet-note { margin:13px 0 0; color:var(--muted); font-size:.78rem; }
.nazoru-main-visual { width:100%; max-width:100%; margin:0; overflow:hidden; border:1px solid #ccd9d2; border-radius:22px; background:#f5f2e9; box-shadow:0 28px 60px -48px rgba(11,55,41,.7); }
.nazoru-main-visual img { display:block; width:100%; height:auto; }
.nazoru-kicker { font-family:var(--mono); font-size:.68rem; font-weight:800; letter-spacing:.14em; }
.nazoru-story { position:relative; }
.nazoru-story > section { padding-block:96px; }
.nazoru-kicker { margin:0 0 17px; color:var(--accent-ink); }
.nazoru-heading h2,.nazoru-problem h2,.nazoru-trust h2,.nazoru-final h2 { margin:0; font-size:clamp(2rem,3.8vw,3.35rem); line-height:1.32; letter-spacing:-.04em; }
.nazoru-heading > p:last-child { color:var(--muted); }
.nazoru-heading-center { max-width:850px; margin:0 auto 48px; text-align:center; }
.nazoru-problem { position:relative; margin-top:18px; padding:74px 68px!important; overflow:hidden; border:1px solid #c9dad2; border-radius:24px; background:#edf5f1; color:var(--nazoru-night); }
.nazoru-problem::before { content:""; position:absolute; top:0; bottom:0; left:0; width:7px; background:linear-gradient(180deg,var(--accent) 0 52%,var(--nazoru-blue) 52% 100%); }
.nazoru-problem::after { content:"01"; position:absolute; top:42px; right:54px; color:rgba(0,104,79,.09); font-family:var(--mono); font-size:8rem; font-weight:800; line-height:1; }
.nazoru-problem .nazoru-kicker { color:var(--accent-ink); }
body.nazoru-page .nazoru-problem h2 { position:relative; z-index:1; max-width:760px; color:var(--nazoru-night); }
body.nazoru-page .nazoru-final h2 { color:#fff; }
.nazoru-problem-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:80px; align-items:end; margin-top:52px; }
.nazoru-problem-grid p { margin:0; color:#415b52; line-height:1.9; }
.nazoru-problem-emphasis { font-size:clamp(1.25rem,2.2vw,1.85rem); }
.nazoru-problem-emphasis strong { color:var(--nazoru-night); }
.nazoru-how { position:relative; }
.nazoru-how::before { content:"02"; position:absolute; top:92px; right:8px; color:rgba(0,104,79,.07); font-family:var(--mono); font-size:7rem; font-weight:800; line-height:1; }
.nazoru-route { display:grid; grid-template-columns:1fr 76px 1fr; gap:24px; align-items:center; margin-top:54px; }
.nazoru-route-lane { min-width:0; padding:30px; border:1px solid #d7dfda; border-radius:20px; background:#fff; box-shadow:0 24px 50px -42px rgba(12,47,36,.7); }
.nazoru-route-lane header > span { color:var(--accent-ink); font-size:.7rem; font-weight:800; }
.nazoru-route-lane h3 { margin:7px 0 2px; font-size:1.28rem; }
.nazoru-route-lane header small { color:var(--muted); }
.nazoru-route-lane ol { display:grid; gap:0; margin:28px 0 0; padding:0; list-style:none; }
.nazoru-route-lane li { position:relative; display:grid; grid-template-columns:34px 1fr; gap:14px; min-height:64px; align-items:start; }
.nazoru-route-lane li:not(:last-child)::after { content:""; position:absolute; top:30px; bottom:0; left:16px; border-left:1px solid #a9cabb; }
.nazoru-route-lane li i { z-index:1; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-size:.72rem; font-style:normal; font-weight:800; }
.nazoru-route-lane li div { display:flex; justify-content:space-between; gap:12px; padding:7px 0 15px; border-bottom:1px solid var(--line); }
.nazoru-route-lane li b { font-size:.84rem; }.nazoru-route-lane li span { color:var(--muted); font-size:.7rem; }
.nazoru-route-turn { position:relative; display:grid; place-items:center; height:76px; border:1px solid #a8cabb; border-radius:50%; color:var(--accent-ink); font-size:.67rem; font-weight:800; }
.nazoru-route-turn::after { content:"→"; position:absolute; right:-12px; padding:3px; background:var(--bg); font-size:1.2rem; }
.nazoru-guide-screen { position:relative; min-height:240px; margin-top:28px; overflow:hidden; border:1px solid #d8dedd; border-radius:13px; background:#fafbf9; }
.nazoru-browser { display:flex; gap:6px; align-items:center; height:36px; padding:0 12px; border-bottom:1px solid #dde3df; background:#f0f2ef; }
.nazoru-browser i { width:7px; height:7px; border-radius:50%; background:#b6bfba; }.nazoru-browser span { flex:1; color:var(--muted); font-size:.62rem; text-align:center; }
.nazoru-web-lines { display:grid; gap:12px; padding:28px 25px; }.nazoru-web-lines i { width:82%; height:8px; border-radius:99px; background:#e3e7e4; }.nazoru-web-lines i:nth-child(2){width:64%}.nazoru-web-lines i:nth-child(3){width:72%}
.nazoru-target { position:absolute; right:34px; bottom:48px; min-width:150px; padding:12px 15px; border:3px solid var(--nazoru-blue); border-radius:9px; background:#fff; color:#123d68; }
.nazoru-target span { position:absolute; right:5px; bottom:calc(100% + 5px); padding:4px 8px; border-radius:6px; background:var(--nazoru-blue); color:#fff; font-size:.62rem; font-weight:800; }.nazoru-target b { font-size:.78rem; }
.nazoru-note { position:absolute; bottom:8px; left:18px; padding:7px 10px; border-radius:7px; background:var(--nazoru-blue-soft); color:#174e83; font-size:.65rem; }
.nazoru-difference { position:relative; border-top:1px solid var(--line); }
.nazoru-difference::before { content:"03"; position:absolute; top:92px; right:8px; color:rgba(23,105,194,.07); font-family:var(--mono); font-size:7rem; font-weight:800; line-height:1; }
.nazoru-difference-stage { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:28px; margin-top:52px; }
.nazoru-live-page { position:relative; min-height:410px; overflow:hidden; border:1px solid #d5ddd8; border-radius:18px; background:#f8faf8; box-shadow:0 24px 50px -42px rgba(12,47,36,.75); }
.nazoru-live-page .nazoru-browser { height:44px; }.nazoru-page-sidebar { position:absolute; top:44px; bottom:0; left:0; display:grid; align-content:start; gap:13px; width:26%; padding:32px 20px; border-right:1px solid #dfe5e1; background:#f0f3f1; }.nazoru-page-sidebar i { height:9px; border-radius:99px; background:#d3dad6; }.nazoru-page-content { display:grid; gap:15px; margin-left:26%; padding:42px 42px; }.nazoru-page-content>b { font-size:1.05rem; }.nazoru-page-content>i { width:90%; height:9px; border-radius:99px; background:#e0e5e2; }.nazoru-page-content>i:nth-of-type(2){width:68%}.nazoru-page-content button { justify-self:end; margin-top:30px; padding:12px 22px; border:3px solid var(--nazoru-blue); border-radius:8px; background:#fff; color:#173f66; font:inherit; font-size:.78rem; font-weight:800; box-shadow:0 0 0 5px rgba(23,105,194,.12); }
.nazoru-look-target { position:relative; margin-top:15px; padding:16px; border:2px solid var(--nazoru-blue); border-radius:8px; background:#fff; color:#173f66; }.nazoru-look-target small { position:absolute; right:8px; bottom:calc(100% + 6px); padding:4px 8px; border-radius:5px; background:var(--nazoru-blue); color:#fff; font-weight:800; }.nazoru-look-target span { font-size:.8rem; font-weight:700; }
.nazoru-next-bubble { position:absolute; right:26px; bottom:22px; display:grid; min-width:178px; padding:13px 16px; border-radius:10px; background:var(--nazoru-blue); color:#fff; box-shadow:0 15px 28px -18px #123d68; }.nazoru-next-bubble small { opacity:.8; font-size:.58rem; }.nazoru-next-bubble strong { margin:2px 0; font-size:.9rem; }.nazoru-next-bubble span { font-size:.7rem; }
.nazoru-boundary-card { display:grid; grid-template-rows:1fr auto 1fr; overflow:hidden; border:1px solid #cad8d1; border-radius:18px; background:#fff; }.nazoru-boundary-card>div:not(.nazoru-boundary-line) { position:relative; display:grid; align-content:center; gap:7px; padding:32px; }.nazoru-boundary-card span { color:var(--muted); font-size:.68rem; font-weight:800; }.nazoru-boundary-card strong { font-size:1.14rem; }.nazoru-boundary-card i { position:absolute; top:22px; right:22px; padding:4px 8px; border-radius:99px; font-size:.62rem; font-style:normal; font-weight:800; }.nazoru-boundary-card .is-nazoru { background:#eef7f3; }.nazoru-boundary-card .is-nazoru strong,.nazoru-boundary-card .is-nazoru i { color:var(--accent-ink); }.nazoru-boundary-card .is-nazoru i { background:#d6eae1; }.nazoru-boundary-card .is-user i { background:#eef1ef; color:#34483f; }.nazoru-boundary-line { position:relative; display:grid; height:54px; place-items:center; }.nazoru-boundary-line::before { content:""; position:absolute; right:24px; left:24px; border-top:1px dashed #8ba89a; }.nazoru-boundary-line b { z-index:1; padding:3px 9px; background:#fff; color:#52665d; font-size:.65rem; }
.nazoru-capabilities { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }.nazoru-capabilities p { margin:0; padding:20px 22px; border-left:3px solid var(--accent); background:#f5f8f6; color:#53645d; font-size:.86rem; }.nazoru-capabilities b { display:block; margin-bottom:5px; color:#153c30; font-size:.95rem; }
.nazoru-trust { position:relative; display:grid; grid-template-columns:minmax(280px,.78fr) minmax(0,1.22fr); gap:76px; align-items:center; margin-block:24px; padding:72px 64px!important; overflow:hidden; border-radius:24px; background:var(--nazoru-night); }
.nazoru-trust::before { content:"04"; position:absolute; top:38px; right:48px; color:rgba(255,255,255,.06); font-family:var(--mono); font-size:8rem; font-weight:800; line-height:1; }
.nazoru-trust .nazoru-kicker { color:#9ed7c1; }
body.nazoru-page .nazoru-trust h2 { color:#fff; }
.nazoru-trust-copy>p:not(.nazoru-kicker) { margin:22px 0; color:#c7ddd4; line-height:1.85; }.nazoru-trust-copy>a { color:#fff; font-size:.84rem; font-weight:800; }
.nazoru-storage-map { position:relative; z-index:1; display:grid; grid-template-columns:1fr 92px .62fr; grid-template-rows:auto auto; align-items:center; }.nazoru-device { min-height:280px; padding:28px; border:3px solid #43a887; border-radius:22px; background:#fff; box-shadow:inset 0 0 0 8px #eaf4ef; text-align:center; }.nazoru-device>span { color:var(--accent-ink); font-size:.74rem; font-weight:800; }.nazoru-device>div { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:42px 0 28px; }.nazoru-device b { padding:12px 5px; border-radius:7px; background:#e8f3ee; color:#174d3c; font-size:.68rem; }.nazoru-device strong { font-size:.82rem; }.nazoru-blocked-send { position:relative; display:grid; place-items:center; }.nazoru-blocked-send::before { content:""; width:100%; border-top:2px dashed #8da39a; }.nazoru-blocked-send i { position:absolute; width:34px; height:3px; background:#c95c52; transform:rotate(-48deg); }.nazoru-blocked-send span { position:absolute; top:16px; color:#e2a099; font-size:.62rem; font-weight:800; white-space:nowrap; }.nazoru-cloud { display:grid; justify-items:center; gap:12px; color:#bacbc4; text-align:center; }.nazoru-cloud i { width:68px; height:80px; border:2px solid #8da39a; border-radius:8px; background:repeating-linear-gradient(to bottom,#29483e 0 21px,#8da39a 22px 23px); }.nazoru-cloud span { font-size:.7rem; font-weight:700; }.nazoru-storage-map>p { grid-column:1/-1; display:grid; gap:3px; margin:20px 0 0; padding:14px 18px; border-left:4px solid #43a887; background:#fff; }.nazoru-storage-map>p b { font-size:.78rem; }.nazoru-storage-map>p span { color:var(--muted); font-size:.72rem; }
.nazoru-plan-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:24px; }.nazoru-plan-grid article { padding:30px; border:1px solid #d5ddd8; border-radius:18px; background:#fff; }.nazoru-plan-grid .is-pro { border-color:#9dc8b6; background:#f1f8f4; }
.nazoru-plan-grid header { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }.nazoru-plan-grid header span { color:var(--accent-ink); font-weight:800; }.nazoru-plan-grid header b { font-family:var(--mono); font-size:.78rem; }
.nazoru-plan-count { display:flex; gap:9px; align-items:baseline; min-height:142px; padding-top:30px; }.nazoru-plan-count strong { color:var(--accent); font-size:4.5rem; line-height:1; }.nazoru-plan-count span { font-weight:700; }
.nazoru-library { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-height:142px; padding:28px 0 15px; }.nazoru-library b,.nazoru-library span { padding:9px 11px; border:1px solid #cbdad2; border-radius:7px; background:#fff; font-size:.75rem; }.nazoru-library small { grid-column:1/-1; color:var(--accent-ink); font-weight:700; }
.nazoru-plan-grid ul { display:grid; gap:9px; margin:20px 0 0; padding-left:1.2em; font-size:.84rem; }.nazoru-trial { display:flex; justify-content:center; gap:18px; margin-top:26px; padding:18px; border-radius:10px; background:var(--accent); color:#fff; font-size:.84rem; }.nazoru-plan-note { color:var(--muted); font-size:.7rem; text-align:center; }
.nazoru-faq { display:grid; grid-template-columns:.68fr 1.32fr; gap:70px; }.nazoru-faq details { border-width:0 0 1px; border-radius:0; background:transparent; }.nazoru-faq details:first-child { border-top:1px solid var(--line); }.nazoru-faq summary { padding-block:18px; }.nazoru-faq details p { color:var(--muted); font-size:.86rem; }.nazoru-faq .nazoru-more { margin-top:24px; border:1px solid var(--line); border-radius:10px; padding-inline:18px; }.nazoru-more h3 { margin:20px 0 4px; font-size:.88rem; }
.nazoru-final { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; margin-bottom:60px; padding:54px 58px!important; border-radius:20px; background:var(--nazoru-night); color:#fff; }.nazoru-final .nazoru-kicker { color:#a8dbc8; }.nazoru-final > div:last-child { display:grid; gap:10px; justify-items:center; }.nazoru-final small { color:#c9ddd5; font-size:.68rem; }
@media(max-width:820px){.nazoru-hero-grid,.nazoru-problem-grid,.nazoru-trust,.nazoru-faq{grid-template-columns:1fr}.nazoru-problem,.nazoru-trust{padding:54px 36px!important}.nazoru-hero-grid{gap:20px}.nazoru-route{grid-template-columns:1fr}.nazoru-route-turn{width:60px;height:60px;margin:auto;transform:rotate(90deg)}.nazoru-difference-stage{grid-template-columns:1fr}.nazoru-boundary-card{grid-template-columns:1fr auto 1fr;grid-template-rows:auto}.nazoru-boundary-line{width:54px;height:auto}.nazoru-boundary-line::before{top:24px;bottom:24px;left:50%;right:auto;border-top:0;border-left:1px dashed #8ba89a}.nazoru-boundary-line b{writing-mode:vertical-rl}.nazoru-storage-map{max-width:650px}.nazoru-plan-grid{grid-template-columns:1fr}}
@media(max-width:620px){body.nazoru-page>main.wrap{padding-inline:20px}body.nazoru-page .nazoru-hero{padding-top:28px;padding-bottom:58px}.nazoru-product-mark{margin-bottom:12px}.nazoru-product-mark strong{font-size:1.35rem}.nazoru-product-mark span{font-size:.68rem}.nazoru-story>section{padding-block:62px}.nazoru-hero-grid{margin-top:24px}.nazoru-hero-copy h1{font-size:clamp(1.45rem,6.4vw,1.7rem);line-height:1.35;letter-spacing:-.04em}.nazoru-hero-copy h1>span,.nazoru-hero-copy h1>strong{white-space:normal}.nazoru-hero-copy h1 i{display:block}.nazoru-hero-lead{max-width:100%;margin-bottom:20px;overflow-wrap:anywhere;font-size:.94rem;line-height:1.75}.nazoru-hero-action .actions{display:grid;grid-template-columns:1fr;width:100%}.nazoru-hero-action .btn{width:100%;text-align:center}.nazoru-main-visual{border-radius:15px}.nazoru-problem,.nazoru-trust{padding:42px 22px!important;border-radius:16px}.nazoru-heading h2,.nazoru-problem h2,.nazoru-trust h2,.nazoru-final h2{font-size:2rem;word-break:auto-phrase}.nazoru-route-lane{padding:20px}.nazoru-difference-stage{margin-top:34px}.nazoru-live-page{min-height:360px}.nazoru-page-content{margin-left:20%;padding:32px 20px}.nazoru-page-sidebar{width:20%;padding-inline:10px}.nazoru-next-bubble{right:14px}.nazoru-boundary-card{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}.nazoru-boundary-line{width:auto;height:48px}.nazoru-boundary-line::before{top:50%;right:24px;bottom:auto;left:24px;border-top:1px dashed #8ba89a;border-left:0}.nazoru-boundary-line b{writing-mode:horizontal-tb}.nazoru-capabilities{grid-template-columns:1fr}.nazoru-storage-map{grid-template-columns:1fr;gap:18px}.nazoru-blocked-send{min-height:52px}.nazoru-blocked-send::before{width:2px;height:52px;border-top:0;border-left:2px dashed #9aa9a1}.nazoru-blocked-send span{top:auto;left:calc(50% + 18px)}.nazoru-device>div{margin-inline:-8px}.nazoru-heading-center{text-align:left}.nazoru-trial{display:grid;gap:4px}.nazoru-final{grid-template-columns:1fr;padding:40px 24px!important;text-align:center}.nazoru-final .btn{width:100%;text-align:center}}
@media(max-width:620px){.nazoru-hero-grid{margin-top:20px}.nazoru-hero-copy .eyebrow{display:none}.nazoru-hero-copy h1{margin:0 0 12px;font-size:1.15rem!important;line-height:1.55;letter-spacing:-.02em}.nazoru-hero-copy h1>span,.nazoru-hero-copy h1>strong{display:block;white-space:nowrap}.nazoru-hero-lead{font-size:.9rem;line-height:1.7}}