/* 公開LP専用。製品の標準青とスレートを使い、文章と実画面で構成する。 */
:root { color-scheme: light; --primary:#2563eb; --ink:#0f172a; --muted:#475569; --line:#dbe2eb; --surface:#f4f7fb; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif; color:var(--ink); background:#fff; line-height:1.85; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
header,main,footer { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
a { color:inherit; text-underline-offset:5px; overflow-wrap:anywhere; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--primary); outline-offset:5px; }
p,dd { color:var(--muted); font-size:16px; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:clamp(44px,6.5vw,88px); line-height:1.3; letter-spacing:-.055em; margin-bottom:30px; font-weight:750; }
h1 span { color:inherit; }
h2 { font-size:clamp(30px,3.5vw,46px); line-height:1.5; letter-spacing:-.035em; margin-bottom:26px; }
h3 { font-size:22px; line-height:1.6; letter-spacing:-.025em; margin-bottom:12px; }
section { padding-block:92px; border-top:1px solid var(--line); scroll-margin-top:30px; }
.eyebrow { color:var(--primary); font-size:13px; font-weight:650; margin-bottom:24px; letter-spacing:.05em; }
.lead { font-size:18px; line-height:2; }
.site-header { display:flex; align-items:center; gap:24px; padding-block:22px; border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:700; white-space:nowrap; text-decoration:none; letter-spacing:-.5px; }
.brand-mark { width:36px; height:36px; border-radius:9px; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:0 22px; }
nav a { display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; }
.desktop-navigation { margin-left:auto; gap:0 20px; }
.desktop-navigation a { font-size:13px; }
.header-start { padding:10px 16px; background:var(--ink); color:#fff; text-decoration:none; font-size:13px; white-space:nowrap; border-radius:5px; }
.mobile-navigation { display:none; }
/* 主見出しは左寄せ、動画は一段下。飾りのカードや枠を重ねない。 */
.hero { border:0; padding-top:86px; }
.hero-copy { margin:0 0 64px; max-width:1000px; animation:arrive .6s ease-out; }
.hero-copy .lead { max-width:680px; margin-bottom:28px; }
.app-link { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:52px; padding:12px 26px; background:linear-gradient(135deg,rgb(18 76 201),rgb(15 62 163)); color:#fffaff; border-radius:6px; text-decoration:none; font-weight:600; box-shadow:inset 0 0 0 1px #5283ef80; }
.text-link { display:inline-flex; align-items:center; min-height:44px; color:var(--primary); font-size:15px; font-weight:600; }
.showcase { min-width:0; border:0; padding:0; margin:0; text-align:center; }
.showcase legend { text-align:left; width:100%; padding:0 0 12px; font-size:15px; color:var(--muted); }
/* ラジオを残し、キーボードでも動画の表示を選べるようにする。 */
.view-choice { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.showcase > label { display:inline-flex; align-items:center; min-height:48px; padding:10px 24px; margin-bottom:26px; border-bottom:2px solid var(--line); color:var(--muted); font-size:15px; cursor:pointer; transition:color .2s,border-color .2s; }
.view-choice:checked + label { border-color:var(--primary); color:var(--primary); font-weight:650; }
.view-choice:focus-visible + label { outline:3px solid var(--primary); outline-offset:3px; }
.showcase-window { max-width:940px; margin-inline:auto; }
figure { margin:0; }
.showcase-slide { display:none; animation:arrive .3s ease-out; }
#view-note:checked ~ .showcase-window .note-slide,#view-outline:checked ~ .showcase-window .outline-slide,#view-mindmap:checked ~ .showcase-window .mindmap-slide { display:block; }
.demo-media { position:relative; }
.demo-video { display:block; width:100%; height:auto; aspect-ratio:8 / 5; object-fit:contain; border:1px solid var(--line); background:white; }
/* 操作面を動画に重ね、タップ時にブラウザー固有の動画画面が開くのを避ける。 */
.demo-video:not([controls]) { pointer-events:none; }
.demo-video-toggle { position:absolute; inset:0; display:grid; place-items:center; width:100%; border:0; background:transparent; cursor:pointer; touch-action:manipulation; }
.demo-video-toggle[hidden] { display:none; }
.demo-video-toggle[data-state="paused"]::after { content:'▶'; display:grid; place-items:center; width:56px; height:56px; padding-left:3px; border-radius:50%; background:#0f172acc; color:white; font-size:22px; box-shadow:0 3px 14px #0f172a55; }
.demo-video-toggle:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.showcase-slide figcaption { display:flex; align-items:baseline; gap:24px; text-align:left; padding-block:18px; }
figcaption { font-size:13px; color:var(--muted); }
.showcase-slide figcaption strong { white-space:nowrap; font-size:14px; color:var(--ink); }
.section-heading { margin-bottom:48px; }
.section-heading > p:last-child { max-width:690px; }
/* 静止画は常にスマホ版。自然な比率のまま約300px幅で本文を見せる。 */
.comparison-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.comparison-grid article { min-width:0; }
.comparison-grid h3 { margin-bottom:10px; }
.comparison-grid article > p { min-height:60px; font-size:15px; }
.comparison-pagination { display:none; }
.phone-image { display:block; width:100%; max-width:320px; margin-inline:auto; }
.phone-image img { display:block; width:100%; height:auto; border:1px solid var(--line); background:#fff; box-shadow:0 16px 34px -24px #0f172a55; }
.feature-story,.guide-story { display:grid; grid-template-columns:1.1fr 1fr; gap:100px; align-items:center; }
.story-copy { max-width:560px; }
.story-copy > p { line-height:2; }
.story-visual { justify-self:center; width:100%; max-width:340px; }
.story-visual .phone-image { max-width:340px; }
.story-visual figcaption { padding-top:18px; text-align:center; }
.reverse .story-copy { order:2; }
.reverse .story-visual { order:1; }
.writing-story { background:var(--surface); box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); border:0; }
.feature-details { margin-block:30px; border-top:1px solid var(--line); }
.feature-details dt { font-weight:650; font-size:16px; margin-top:24px; }
.feature-details dd { margin:8px 0 0; font-size:15px; }
.editorial-columns { display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.export-examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:46px; }
.export-examples article { min-width:0; border-top:1px solid var(--line); padding-top:18px; }
.export-examples h3 { margin:0 0 10px; font-size:18px; }
.export-examples p { margin:0; font-size:14px; line-height:1.8; }
.format-flow { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:36px; margin-top:40px; border-block:1px solid var(--line); font-size:clamp(16px,2vw,24px); letter-spacing:-.035em; }
.format-flow strong { color:var(--primary); }
/* 青は一つの章全体に使う。個々の機能をカードに閉じ込めない。 */
.connected { background:#123eaa; box-shadow:0 0 0 100vmax #123eaa; clip-path:inset(0 -100vmax); color:white; border:0; }
.connected .eyebrow { color:#bfeaff; }
.connected p { color:#e0eaff; }
.connected-lead { font-size:18px; max-width:740px; }
.connected-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:38px; margin-top:54px; padding-top:32px; border-top:1px solid #ffffff45; }
.connected-details h3 { font-size:20px; }
.connected-details p { font-size:15px; margin-bottom:0; }
.case-links { display:block; }
.case-links a { display:grid; grid-template-columns:50px 1fr 1fr; gap:18px; padding:28px 0; border-top:1px solid var(--line); text-decoration:none; }
.case-links a:last-child { border-bottom:1px solid var(--line); }
.case-links strong { font-size:24px; font-weight:600; letter-spacing:-.025em; }
.case-links span { font-size:14px; color:var(--muted); }
.case-links span:last-child { text-align:right; }
.plan-intro { padding-bottom:28px; }
#pricing { border-top:0; padding-top:0; }
table { width:100%; border-collapse:collapse; margin-bottom:26px; }
caption { text-align:left; color:var(--muted); font-size:14px; margin-bottom:16px; }
th,td { padding:24px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { font-size:14px; font-weight:500; color:var(--muted); }
#pricing tbody td:first-of-type { font-size:24px; font-weight:650; color:var(--primary); }
#cancellation,#contact,section:has(> #environment-title) { padding-block:48px; }
#cancellation h2,#contact h2,#environment-title { font-size:24px; }
#contact dl { display:grid; grid-template-columns:230px 1fr; gap:12px 24px; }
#contact dt { font-size:14px; font-weight:600; }
#contact dd { margin:0; }
footer { border-top:1px solid var(--line); padding-block:28px; }
footer p { font-size:13px; margin-bottom:0; }
/* 活用例は状況・手順・その内容を映した画面の順に対応させる。 */
.guide-hero { border:0; padding-block:80px 52px; }
.guide-hero h1 { font-size:clamp(40px,5.8vw,76px); }
.guide-index { gap:12px 36px; margin-top:36px; }
.guide-index a { color:var(--primary); border-bottom:1px solid var(--primary); }
.guide-story:nth-of-type(3) .story-copy { order:2; }
.guide-story:nth-of-type(3) .story-visual { order:1; }
.story-intro { font-size:18px; }
.steps { list-style:none; padding:0; counter-reset:step; margin:32px 0 0; }
.steps li { position:relative; counter-increment:step; border-top:1px solid var(--line); padding:20px 0 20px 40px; color:var(--muted); font-size:15px; }
.steps li::before { content:'0' counter(step); position:absolute; left:0; top:20px; color:var(--primary); font-size:13px; font-weight:650; }
@keyframes arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) {
  nav a:hover,.text-link:hover { color:var(--primary); }
  .app-link:hover { filter:brightness(1.12); }
  .case-links a:hover strong { color:var(--primary); }
}
@media (max-width:1100px) {
  .header-start { display:none; }
  .feature-story,.guide-story { gap:55px; }
  .comparison-grid { gap:24px; }
}
@media (max-width:960px) {
  .site-header { justify-content:space-between; }
  .desktop-navigation { display:none; }
  .mobile-navigation { display:block; }
  .mobile-navigation summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; font-size:14px; }
  .mobile-navigation summary::-webkit-details-marker { display:none; }
  .mobile-navigation > nav { position:absolute; top:100%; right:0; width:min(360px,100%); padding:14px 20px; display:flex; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--line); box-shadow:0 15px 25px #0f172a12; max-height:75dvh; overflow-y:auto; }
  .mobile-navigation nav a { padding-block:8px; }
  .connected-details { gap:24px; }
  .case-links a { grid-template-columns:32px 1fr; }
  .case-links span:last-child { grid-column:2; text-align:left; }
}
@media (max-width:700px) {
  header,main,footer { width:calc(100% - 40px); }
  section { padding-block:60px; }
  .site-header { padding-block:16px; }
  .brand { font-size:20px; }
  .hero,.guide-hero { padding-top:48px; }
  h1 { font-size:clamp(40px,10.5vw,62px); }
  h2 { font-size:30px; }
  .hero-copy { margin-bottom:44px; }
  .lead,.story-intro { font-size:16px; }
  .lead br,.connected-lead br { display:none; }
  .showcase > label { padding:10px 9px; font-size:12px; }
  .showcase legend { font-size:14px; }
  .showcase-window { max-width:390px; }
  .demo-video { aspect-ratio:390 / 844; max-height:70svh; background:var(--surface); }
  .showcase-slide figcaption { flex-direction:column; gap:4px; font-size:13px; }
  .comparison-grid { grid-template-columns:1fr; gap:44px; }
  .comparison-grid article > p { min-height:0; }
  .phone-image,.story-visual,.story-visual .phone-image { max-width:340px; }
  .comparison-grid h3 { font-size:24px; }
  .section-heading { margin-bottom:32px; }
  .feature-story,.guide-story,.editorial-columns { grid-template-columns:1fr; gap:36px; }
  .reverse .story-copy,.reverse .story-visual,.guide-story:nth-of-type(3) .story-copy,.guide-story:nth-of-type(3) .story-visual { order:initial; }
  .format-flow { flex-direction:column; align-items:flex-start; margin-top:20px; padding-block:24px; gap:6px; font-size:20px; }
  .format-flow > span[aria-hidden] { transform:rotate(90deg); }
  .connected-details { grid-template-columns:1fr; gap:26px; margin-top:32px; }
  .connected-lead { font-size:16px; }
  .case-links strong { font-size:20px; }
  .case-links a { gap:4px 12px; padding-block:22px; }
  th,td { padding:20px 6px; font-size:14px; }
  #pricing tbody td:first-of-type { font-size:18px; }
  #contact dl { grid-template-columns:1fr; gap:4px; }
  #contact dd { margin-bottom:16px; }
  .guide-index { align-items:flex-start; flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}

/* 配色は実アプリのテーマに合わせ、章ごとに色とリズムを変える。 */
body { overflow-x:clip; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%); white-space:nowrap; border:0!important; }
.site-header { background:#123eaa; color:white; border:0; isolation:isolate; }
.site-header::before { content:''; position:absolute; inset:0; background:#123eaa; box-shadow:0 0 0 100vmax #123eaa; clip-path:inset(0 -100vmax); z-index:-1; }
.mobile-navigation:not([open]) > nav { display:none; }
.site-header .header-start { background:white; color:#123eaa; }
.site-header .desktop-navigation a { color:#fff; }
.site-header .mobile-navigation > nav { color:var(--ink); }
.hero { position:relative; isolation:isolate; }
.hero-copy { position:relative; max-width:850px; }
/* 3ビュー紹介の画面は読みやすいように水平に置く。 */
.comparison-grid .phone-image { margin-block:28px 12px; }
.view-comparison { background:#f0f8ff; box-shadow:0 0 0 100vmax #f0f8ff; clip-path:inset(0 -100vmax); border:0; }
.writing-story { background:#fff; box-shadow:none; }
.writing-story .story-visual { transform:rotate(2deg); }
.reverse { background:#f0faf5; box-shadow:0 0 0 100vmax #f0faf5; clip-path:inset(0 -100vmax); border:0; }
.reverse .story-visual { transform:rotate(-2deg); }
/* 3つ目のビュー紹介は独立した章として区切る。 */
.mindmap-story { background:#f5f2ff; box-shadow:0 0 0 100vmax #f5f2ff; }
/* 02〜04は一度に一つの機能だけを見せる。図は実画面の代わりではなく、操作の要点を表す。 */
.feature-story { display:block; }
.feature-story > .eyebrow { margin-bottom:12px; }
.feature-story > h2 { margin-bottom:30px; }
.feature-carousel { max-width:940px; margin-inline:auto; }
.feature-carousel-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.feature-carousel-track::-webkit-scrollbar { display:none; }
.feature-slide { flex:0 0 100%; min-width:0; min-height:350px; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:42px; align-items:center; scroll-snap-align:start; padding:26px 8px; }
.feature-slide-copy { max-width:330px; }
.slide-number { display:block; margin-bottom:16px; color:#2353ad; font-size:13px; font-weight:700; letter-spacing:.08em; }
.feature-slide-copy h3 { margin-bottom:12px; font-size:clamp(25px,3vw,34px); }
.feature-slide-copy p { margin:0; font-size:16px; line-height:1.7; }
.feature-demo { width:100%; max-width:460px; min-height:270px; margin-inline:auto; padding:30px; border:1px solid #cbd9e9; border-radius:18px; background:#fff; box-shadow:0 20px 42px -32px #12244566; color:#1c3555; }
.tree-demo { display:flex; align-items:center; justify-content:center; gap:18px; }
.tree-group { display:grid; gap:7px; min-width:0; }
.tree-group strong { padding:9px 14px; border-radius:8px; background:#dcecff; }
.tree-group span { margin-left:15px; padding:7px 10px; border-left:2px solid #a7b9d4; font-size:13px; }
.demo-arrow { color:#2362c0; font-size:34px; font-weight:700; }
.status-demo,.count-demo { display:grid; align-content:center; gap:12px; }
.status-demo > span,.count-demo > span { display:flex; align-items:center; justify-content:space-between; min-height:55px; padding:10px 18px; border-radius:11px; background:#eef4fc; font-size:16px; }
.status-demo i { margin-right:14px; color:#225dba; font-size:23px; font-style:normal; }
.status-demo > span { justify-content:flex-start; }
.status-demo > span:last-child { background:#e5f5eb; }
.count-demo strong { color:#2055af; font-size:24px; }
.search-demo { display:grid; align-content:center; grid-template-columns:1fr auto; gap:15px; }
.search-field,.search-tag,.search-result { padding:11px 16px; border-radius:9px; }
.search-field { border:1px solid #9db6db; }
.search-tag { background:#dcecff; color:#174b98; }
.search-result { grid-column:1 / -1; padding:19px; background:#eef4fc; font-weight:650; }
.note-demo { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:11px; padding-inline:15%; }
.note-demo strong { font-size:19px; }
.note-demo > span:not(.demo-line) { color:#9eabc0; }
.note-demo .demo-line { display:block; height:9px; width:100%; border-radius:10px; background:#cbd8ea; }
.note-demo .demo-line.short { width:68%; }
.focus-demo strong { padding:7px 12px; margin-left:-12px; border-radius:7px; background:#dcecff; }
.read-demo strong:not(:first-child) { margin-top:20px; }
.map-demo { display:grid; align-content:center; justify-items:center; gap:18px; }
.map-center,.map-demo div span { display:grid; place-items:center; min-height:48px; padding:9px 16px; border-radius:10px; background:#e6ddff; font-weight:650; }
.map-center { background:#6a45bb; color:white; }
.map-demo div { display:flex; justify-content:center; gap:28px; width:100%; padding-top:25px; position:relative; }
.map-demo div::before { content:''; position:absolute; top:0; left:22%; right:22%; height:26px; border:2px solid #9b7ddb; border-bottom:0; border-radius:24px 24px 0 0; }
.map-demo div span { min-width:100px; font-size:14px; }
.rearrange-demo div span:last-child { background:#dcecff; }
.feature-carousel-nav { display:flex; align-items:center; justify-content:center; gap:24px; }
.feature-carousel-nav button { width:46px; height:46px; border:1px solid #bdcce0; border-radius:50%; background:#fff; color:#174b98; font-size:21px; cursor:pointer; }
.feature-carousel-nav button:disabled { opacity:.35; cursor:default; }
.carousel-pagination { display:flex; gap:5px; }
.carousel-pagination a { display:grid; place-items:center; width:38px; height:44px; }
.carousel-pagination a::after { content:''; width:18px; height:4px; border-radius:9px; background:#a4b7d0; }
.carousel-pagination a[aria-current="true"]::after { width:28px; background:#164cae; }
.feature-carousel-nav button:focus-visible,.carousel-pagination a:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
.feature-example-link { margin-top:10px; }
/* 同期・招待・暗号化を独立した図にし、復旧の例外だけは本文で明示する。 */
.connected-details { gap:26px; }
.connected-details article { min-width:0; }
.connected-number { color:#bfeaff; font-size:13px; font-weight:700; letter-spacing:.1em; }
.connected-details h3 { margin:5px 0 16px; }
.connected-diagram { display:flex; align-items:center; justify-content:center; gap:8px; min-height:138px; padding:16px 10px; margin-bottom:18px; border:1px solid #ffffff65; border-radius:13px; background:#ffffff12; color:#fff; }
.connected-diagram > span:not(.diagram-link),.diagram-roles span { display:grid; place-items:center; min-width:48px; min-height:48px; padding:7px; border-radius:8px; background:#ffffff23; text-align:center; font-size:13px; font-weight:650; line-height:1.35; }
.connected-diagram .diagram-link { color:#a9ddff; font-size:22px; }
.diagram-roles { display:grid; gap:7px; }
.security-diagram { display:grid; align-content:center; gap:9px; }
.security-flow { display:flex; align-items:center; justify-content:center; gap:7px; }
.security-flow span:not(.diagram-link) { display:grid; place-items:center; min-height:36px; padding:5px 8px; border-radius:8px; background:#ffffff23; text-align:center; font-size:12px; font-weight:650; }
.connected-details p { line-height:1.65; }
.connected-details .recovery-note { margin-top:12px; padding-top:10px; border-top:1px solid #ffffff65; color:#e7efff; font-size:12px; }
@media (max-width:700px) {
  .feature-story > h2 { margin-bottom:12px; }
  .feature-slide { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:18px; min-height:0; padding:20px 2px 10px; }
  .feature-slide-copy { max-width:none; }
  .slide-number { margin-bottom:7px; }
  .feature-slide-copy h3 { font-size:24px; margin-bottom:5px; }
  .feature-slide-copy p { font-size:15px; }
  .feature-demo { min-height:230px; max-width:100%; padding:20px; }
  .tree-demo { gap:8px; }
  .tree-group span { margin-left:6px; font-size:11px; }
  .map-demo div { gap:12px; }
  .map-demo div span { min-width:0; }
  .connected-details { gap:36px; }
  .connected-diagram { min-height:130px; }
}
.portability { position:relative; }
.format-flow { border-color:#c4d2ef; }
.portability .format-flow { justify-content:flex-start; gap:clamp(12px,3vw,40px); margin-top:26px; }
.portability .format-flow small { display:block; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; }
.portability .export-examples { margin-top:28px; }
.portability .export-examples article { padding-top:15px; }
.portability .export-examples h3 { margin:0; font-size:16px; }
.portability-note { margin:20px 0 0; font-size:14px; }
.connected { background:#122445; box-shadow:0 0 0 100vmax #122445; }
.appearance-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; background:#f7f2ff; box-shadow:0 0 0 100vmax #f7f2ff; clip-path:inset(0 -100vmax); border:0; }
.palette-list { list-style:none; display:flex; flex-wrap:wrap; gap:16px 24px; padding:0; margin:30px 0 0; }
.palette-list li { display:flex; align-items:center; gap:8px; font-size:13px; }
.palette-list small { color:#6b21a8; font-size:10px; }
.swatch { display:inline-block; width:22px; height:22px; border-radius:50%; border:3px solid #fff; outline:1px solid #d8d9e6; }
.ocean { background:#2563eb; }.contrast { background:#005ea8; }.forest { background:#059669; }.sunset { background:#c2410c; }.aurora { background:#7c3aed; }
.appearance-preview { border:0; padding:0; margin:0; text-align:center; min-width:0; }
.appearance-preview > label { display:inline-flex; min-height:44px; align-items:center; padding:6px 22px; border-bottom:2px solid #d8ccea; cursor:pointer; }
.appearance-preview .view-choice:checked + label { border-color:#7c3aed; color:#6b21a8; font-weight:650; }
.appearance-preview .view-choice:focus-visible + label { outline:3px solid #7c3aed; }
.theme-screens { margin-top:30px; transform:rotate(2deg); }
.dark-screen { display:none; }
#preview-dark:checked ~ .theme-screens .light-screen { display:none; }
#preview-dark:checked ~ .theme-screens .dark-screen { display:block; }
.language-section { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.language-cloud { list-style:none; padding:0; display:flex; gap:16px 28px; flex-wrap:wrap; justify-content:center; align-items:center; }
.language-cloud li { color:#1e40af; font-size:25px; font-weight:600; }
.language-cloud li:nth-child(3n) { color:#a33a10; transform:rotate(5deg); }
.language-cloud li:nth-child(3n+1) { color:#047857; transform:rotate(-4deg); }
.language-cloud li:first-child { font-size:38px; }
.plan-comparison th:first-child { width:50%; }
.plan-comparison td { width:25%; text-align:center; }
.plan-comparison thead th:not(:first-child) { text-align:center; color:var(--primary); font-size:21px; font-weight:700; }
.plan-comparison tr > :last-child { background:#eff6ff; }
.plan-comparison tbody th { font-size:14px; font-weight:500; }
.plan-comparison td { font-size:14px; }
.guide-hero { position:relative; }
.guide-index a:nth-child(2) { color:#047857; border-color:#047857; }
.guide-index a:nth-child(3) { color:#a33a10; border-color:#a33a10; }
.guide-story .story-visual { transform:rotate(2deg); }
.guide-story:nth-of-type(3) { background:#f0faf5; box-shadow:0 0 0 100vmax #f0faf5; clip-path:inset(0 -100vmax); }
.guide-story:nth-of-type(3) .story-visual { transform:rotate(-2deg); }
.site-footer { display:grid; grid-template-columns:1.5fr 1fr 1.3fr .7fr; gap:38px; padding-block:64px 28px; background:#122445; color:white; box-shadow:0 0 0 100vmax #122445; clip-path:inset(0 -100vmax); border:0; }
.site-footer h2 { color:#a5d9ff; font-size:13px; letter-spacing:.02em; margin-bottom:20px; }
.site-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.site-footer nav a { color:#eef4ff; font-size:13px; }
.site-footer p { color:#c8d6ed; font-size:13px; }
.copyright { grid-column:1/-1; border-top:1px solid #ffffff28; padding-top:22px; }
.back-to-top { position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; width:54px; height:54px; line-height:1.2; background:#fff; color:#123eaa; border:1px solid #b6c7e6; border-radius:50%; box-shadow:0 3px 12px #0f172a1c; text-decoration:none; font-size:10px; }
.back-to-top > span:first-child { font-size:21px; }
.back-to-top[hidden] { display:none; }
/* 法的本文の内容は維持し、公開案内と同じヘッダー・フッター・読み幅を使う。 */
.legal-content { max-width:860px; padding-block:48px 70px; }
.legal-home { display:inline-flex; min-height:44px; align-items:center; color:var(--primary); margin-bottom:28px; font-size:14px; }
.legal-content h1 { font-size:clamp(27px,4vw,42px); margin-bottom:35px; }
.legal-content h2 { font-size:22px; margin:38px 0 16px; }
.legal-content li,.legal-content .value { color:var(--muted); font-size:15px; overflow-wrap:anywhere; }
.legal-content .item { display:grid; grid-template-columns:190px 1fr; gap:24px; padding-block:24px; border-bottom:1px solid var(--line); }
.legal-content .label { font-size:14px; font-weight:650; }
.legal-content .last-updated { color:var(--muted); font-size:13px; }
.legal-actions { padding-top:36px; gap:16px 28px; }
.legal-actions .back-link { color:var(--muted); text-decoration:underline; font-size:14px; }
@media (hover:hover) and (pointer:fine) {
 .site-header nav a:hover { color:#c4eaff; }.site-header .mobile-navigation nav a:hover { color:var(--primary); }
 .site-footer nav a:hover { color:#67e8f9; }
}
@media (max-width:960px) {
 .site-footer { grid-template-columns:1fr 1fr; gap:36px; }
 .appearance-section,.language-section { gap:36px; }
}
@media (max-width:700px) {
 .hero-copy { padding-right:8px; }
 .comparison-grid .phone-image { max-width:calc(100% - 18px); }
 .writing-story .story-visual,.reverse .story-visual,.guide-story .story-visual,.guide-story:nth-of-type(3) .story-visual,.theme-screens { transform:rotate(1deg); width:calc(100% - 12px); margin-inline:auto; }
 .appearance-section,.language-section { grid-template-columns:1fr; }
 .language-cloud { gap:16px 22px; justify-content:flex-start; }.language-cloud li { font-size:20px; }
 .plan-comparison th:first-child { width:44%; }.plan-comparison td { width:28%; font-size:12px; }
 .plan-comparison tbody th { font-size:12px; }.plan-comparison th,.plan-comparison td { padding:16px 7px; }
 .site-footer { gap:30px 20px; padding-block:44px 80px; }.footer-brand { grid-column:1/-1; }
 .legal-content .item { grid-template-columns:1fr; gap:8px; }
 .legal-content { padding-top:28px; }.legal-content h1 { font-size:27px; }
}

/* 初見で製品の用途と画面が同時に伝わる冒頭。装飾ではなく実画面を主役にする。 */
.site-header { padding-block:14px; }
.hero { padding-top:48px; }
.hero-intro { display:grid; grid-template-columns:1fr 1.25fr; align-items:center; gap:38px; margin-bottom:76px; }
.hero-intro .hero-copy { margin:0; padding:0; animation:none; }
.hero-intro h1 { font-size:clamp(36px,4.25vw,58px); line-height:1.35; letter-spacing:-.055em; margin-bottom:25px; }
.hero-intro .lead { font-size:16px; line-height:1.95; max-width:450px; margin-bottom:28px; }
.hero-product { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:start; min-width:0; }
.hero-screen { min-width:0; }
.hero-screen p { font-size:12px; font-weight:600; color:var(--ink); text-align:center; margin-bottom:14px; }
.hero-screen a { display:block; }
.hero-screen img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; box-shadow:0 18px 32px -18px #123eaa55; }
.hero-screen:nth-child(1) { transform:rotate(-2deg); }
.hero-screen:nth-child(2) { transform:translateY(16px); }
.hero-screen:nth-child(3) { transform:translateY(32px) rotate(2deg); }
.demo-heading { border-top:1px solid var(--line); padding-top:42px; text-align:center; }
.demo-heading h2 { font-size:25px; margin-bottom:8px; }
.demo-heading p { font-size:14px; margin-bottom:26px; }
@media (max-width:960px) {
 .hero-intro { grid-template-columns:1fr; gap:28px; }
 .hero-intro h1 { font-size:36px; }
 .hero-product { max-width:660px; margin-inline:auto; }
}
@media (max-width:700px) {
 .hero { padding-top:30px; }
 /* 狭い画面では静止画像を省き、紹介文から操作動画へ直接つなぐ。 */
 .hero-intro { display:block; margin-bottom:28px; }
 .hero-intro h1 { font-size:36px; line-height:1.3; margin-bottom:18px; }
 .hero-intro .lead { font-size:14px; line-height:1.8; margin-bottom:20px; }
 .hero-product { display:none; }
 .demo-heading { padding-top:24px; }
 /* 動画の横操作を表示切替に使い、縦のページ移動はそのまま許す。 */
 .showcase-window,.showcase-window .demo-video-toggle { touch-action:pan-y; }
 /* 各紹介を1枚ずつ止め、端末幅にかかわらず隣の紹介を見切れさせない。 */
 .comparison-grid { display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
 .comparison-grid::-webkit-scrollbar { display:none; }
 .comparison-grid article { flex:0 0 100%; scroll-snap-align:start; }
 .comparison-pagination { display:flex; justify-content:center; gap:8px; margin-top:18px; }
 /* 線は控えめにし、リンク自体は指で押しやすい大きさを保つ。 */
 .comparison-pagination a { display:grid; place-items:center; width:44px; height:44px; text-decoration:none; }
 .comparison-pagination a::after { content:''; width:18px; height:4px; border-radius:999px; background:#9aacc5; transition:width .2s,background-color .2s; }
 .comparison-pagination a[aria-current="true"]::after { width:28px; background:#123eaa; }
 .comparison-pagination a:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
 .export-examples { grid-template-columns:1fr; gap:24px; margin-top:34px; }
}
/* 配色の色見本は操作ボタンとして扱い、色だけで選択状態を伝えない。 */
.palette-list { display:grid; grid-template-columns:1fr; gap:6px; }
.palette-list button { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.palette-list button[aria-pressed="true"] { border-color:#c0b1db; background:#fff; font-weight:650; }
.palette-list button:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.theme-description { font-size:14px; margin-top:20px; }
.theme-preview-note { font-size:12px; }