:root{
color-scheme:light dark;
/* ロゴから採取した実測値。#22b6cb は白地の文字色にはコントラスト不足なので
図形用(--brand)と文字用(--brand-ink)を分ける */
--brand:#22b6cb; --brand-ink:#0d7080;
--ink:#0f1115; --muted:#5a636b;
--ground:#fbfbfd; --page:#fff; --rail:#f1f4f5; --hover:#e6ebed; --line:#e2e7e9;
--radius:10px; --rail-w:17rem; --measure:46rem;
--text-w:28rem; --shot-w:38rem;
}
@media (prefers-color-scheme:dark){
:root{
--brand:#3fc9dd; --brand-ink:#5fd4e6;
--ink:#e7ecee; --muted:#98a2a8;
--ground:#101315; --page:#191d21; --rail:#22282c; --hover:#262d31; --line:#282e32;
}
}
*{box-sizing:border-box}
body{
margin:0; background:var(--ground); color:var(--ink);
font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;
font-size:16px; line-height:1.85;
}
/* ---- レイアウト ---- */
.layout{display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100dvh}
.content{min-width:0}
/* 中央寄せをやめてレールに寄せる。中央寄せは広い画面で本文を虚空に置く */
.wrap{max-width:var(--measure); padding:0 4rem}
/* 手順ページは大枠を横いっぱいに使う（右の画像列を実用サイズにするため） */
.wide .wrap{max-width:none}
/* ---- サイドバー ---- */
.side{
position:sticky; top:0; align-self:start; height:100dvh; overflow-y:auto;
background:var(--page); border-right:1px solid var(--line); padding:1.5rem 1rem 2.5rem;
}
.brand{display:block; padding:0 .7rem; margin-bottom:1.4rem; color:inherit; text-decoration:none}
.brand img{display:block; width:100%; max-width:9.5rem; height:auto}
.brand span{display:block; margin-top:.45rem; font-size:.75rem; letter-spacing:.08em; color:var(--ink)}
@media (prefers-color-scheme:dark){
/* ロゴは黒文字＋透過。反転＋色相回転でシアンを保ったまま白抜きにする */
.brand img, .welcome img{filter:invert(1) hue-rotate(180deg)}
}
.plan{margin-bottom:1.4rem}
.plan label{display:block; padding:0 .7rem; font-size:.6875rem; letter-spacing:.06em; color:var(--ink); margin-bottom:.4rem}
.plan select{
width:100%; padding:.45rem 1.9rem .45rem .7rem; font:inherit; font-size:.9375rem;
color:var(--ink); background-color:var(--page);
border:1px solid var(--line); border-radius:8px;
/* ネイティブ矢印は右端固定でpaddingが効かないため自前で .7rem に置く */
-webkit-appearance:none; appearance:none;
background-image:url("data:image/svg+xml,");
background-repeat:no-repeat; background-position:right .7rem center; background-size:.7rem;
}
/* ---- nav。行になるのは nav/details の直下だけ。summary 内のリンクは行のスタイルを継承する ---- */
.side nav, .side nav details{display:flex; flex-direction:column; gap:1px}
.side nav>a, .side nav details>a, .side nav summary{
display:flex; align-items:center; gap:.45rem;
padding:.42rem .7rem; border-radius:8px;
font-size:.9375rem; line-height:1.5; text-decoration:none;
color:var(--ink);
}
.side nav summary{cursor:pointer; list-style:none}
.side nav summary::-webkit-details-marker{display:none}
/* にも三角と同じ幅の空スロットを持たせて字面を全階層で揃える */
.side nav>a::before, .side nav details>a::before, .side nav summary::before{
content:""; flex:0 0 .5rem; height:.5rem;
}
/* ロゴの三角モチーフを唯一の開閉記号にする */
.side nav summary::before{
background:var(--brand); clip-path:polygon(0 0,100% 50%,0 100%);
transition:transform .15s ease;
}
.side nav details[open]>summary::before{transform:rotate(90deg)}
.side nav summary>a{flex:1; color:inherit; font:inherit; text-decoration:none}
.side nav>a:hover, .side nav details>a:hover, .side nav summary:hover{background:var(--hover)}
.side nav details>a, .side nav details>details>summary{margin-left:1.15rem}
.side nav details>details>a{margin-left:2.3rem}
/* 現在のページ */
.side nav [aria-current="page"]{color:var(--brand-ink)}
.side nav>a[aria-current="page"], .side nav summary:has([aria-current="page"]){background:var(--hover)}
/* プラン別表示。 で決まる。JS無効時は entry のまま */
html[data-plan="entry"] [data-plan-only="standard"]{display:none}
html:not([data-plan="entry"]) [data-plan-only="entry"]{display:none}
html[data-plan="advance"] [data-plan-only="entry-standard"]{display:none}
html:not([data-plan="advance"]) [data-plan-only="advance"]{display:none}
/* ---- トップ ---- */
.welcome main{
min-height:100dvh; display:grid; place-content:center; justify-items:center;
gap:1.5rem; padding:2rem; text-align:center;
}
.welcome img{width:min(20rem,72%); height:auto}
.welcome h1{margin:0; font-size:1.3rem; line-height:1.5; font-weight:600; letter-spacing:.02em}
/* ---- 見出し。h2=このページの節（上罫）、h3=節の中の項目（シアンの縦罫） ---- */
header{padding:2.5rem 0 1.75rem; border-bottom:1px solid var(--line)}
h1{font-size:1.9rem; line-height:1.35; font-weight:700; letter-spacing:-.005em; margin:0 0 .55rem}
header h1:only-child{margin-bottom:0}
h2{font-size:1.45rem; line-height:1.4; margin:2rem 0 1rem; padding-top:2rem; border-top:1px solid var(--line)}
main>h2:first-child{border-top:0; padding-top:0}
h3{font-size:1.1rem; line-height:1.5; margin:2rem 0 .5rem; padding-left:.7rem; border-left:3px solid var(--brand)}
p{margin:0 0 1rem}
ul{padding-left:1.4rem; margin:0 0 1rem}
ul li{margin-bottom:.4rem}
/* ハブページのカード一覧。1枚まるごとがリンク */
.cards{list-style:none; padding:0; margin:1.5rem 0 0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1rem}
.cards li{margin:0}
.cards a{
display:block; height:100%; padding:1.25rem 1.4rem;
background:var(--page); border:1px solid var(--line); border-radius:12px;
color:inherit; text-decoration:none;
}
.cards a:hover{border-color:var(--brand); box-shadow:0 2px 4px rgba(0,0,0,.08)}
.cards b{display:block; font-size:1.05rem; color:var(--brand-ink)}
.cards span{display:block; color:var(--muted); font-size:.9375rem; line-height:1.7}
/* 汎用の番号リスト。手順リスト(.steps)は独自レイアウトなので除外する
（b{display:block} が当たると が改行し、li の margin が罫線の間隔を崩す） */
ol:not(.steps){padding-left:1.4rem; margin:0 0 1rem}
ol:not(.steps) li{margin-bottom:.9rem}
ol:not(.steps) li b{display:block}
/* ---- 専用AIの詳細ダイアログ。左右の矢印はパネルの外に置く ---- */
.modal{
width:min(68rem,84vw); padding:0; overflow:visible;
border:1px solid var(--line); border-radius:12px;
background:var(--page); color:var(--ink);
}
.modal-body{max-height:82vh; overflow:auto; padding:1.75rem 2rem 2rem}
/* 開閉のふわり。display と overlay も遷移対象にしないと消える瞬間が飛ぶ */
.modal, .modal::backdrop{
transition:opacity .24s ease, transform .24s cubic-bezier(.2,.8,.3,1),
background-color .24s ease, overlay .24s allow-discrete, display .24s allow-discrete;
}
.modal{opacity:0; transform:translateY(1rem) scale(.985)}
.modal[open]{opacity:1; transform:none}
.modal::backdrop{background-color:rgba(0,0,0,0)}
.modal[open]::backdrop{background-color:rgba(0,0,0,.45)}
@starting-style{
.modal[open]{opacity:0; transform:translateY(1rem) scale(.985)}
.modal[open]::backdrop{background-color:rgba(0,0,0,0)}
}
.modal-close{
position:absolute; top:.5rem; right:.75rem; z-index:1;
border:0; background:none; color:var(--muted);
font-size:1.5rem; line-height:1; padding:.25rem; cursor:pointer;
}
.modal-close:hover{color:var(--ink)}
.modal-nav{
position:absolute; top:50%; translate:0 -50%;
width:2.75rem; height:2.75rem; border-radius:50%; cursor:pointer;
border:1px solid var(--line); background:var(--page); color:var(--ink);
font-size:1.35rem; line-height:1;
}
.modal-nav:hover{background:var(--hover)}
.modal-nav[data-step="-1"]{left:-3.75rem}
.modal-nav[data-step="1"]{right:-3.75rem}
.modal h2{margin:0 0 1rem; padding:0; border:0; padding-right:2rem}
/* ---- 機能紹介。説明を先に読ませ、画像は原寸を超えない範囲で大きく見せる ---- */
.stack{max-width:64rem}
.stack .shot{width:100%; margin-top:1.5rem}
/* ---- 手順リスト。順序が情報そのものなので番号を振り、縦のレールでつなぐ ---- */
.steps{list-style:none; margin:0; padding:0; counter-reset:step}
.steps>li{
position:relative;
display:grid; grid-template-columns:minmax(0,var(--text-w)) var(--shot-w);
justify-content:start; gap:3rem; align-items:start;
padding:1.75rem 0 1.75rem 3.25rem;
border-top:1px solid var(--line);
}
.steps>li:first-child{border-top:0}
.steps>li::before{
counter-increment:step; content:counter(step);
position:absolute; left:0; top:1.7rem;
width:1.75rem; height:1.75rem; border-radius:50%;
display:grid; place-items:center;
font-size:.8125rem; font-weight:700; font-variant-numeric:tabular-nums;
color:var(--brand-ink); background:var(--page); border:1.5px solid var(--brand);
}
/* 手順をつなぐレール。最後の手順の下には伸ばさない */
.steps>li:not(:last-child)::after{
content:""; position:absolute; left:.875rem; top:3.7rem; bottom:0;
width:1px; background:var(--line);
}
.steps h2{margin:0 0 .9rem; padding:0; border:0; font-size:1.15rem; line-height:1.6}
.steps p{margin:0; color:var(--muted)}
.steps b{color:var(--ink)}
/* 横幅は固定、縦は画像の縦横比にまかせる（レターボックスも切り取りも出さない） */
.shot{
margin:0; width:var(--shot-w);
border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.shot img{display:block; width:100%; height:auto}
.shot-empty{
border-style:dashed; min-height:11rem; padding:.75rem;
display:grid; place-items:center; background:var(--rail);
font-size:.75rem; line-height:1.5; color:var(--muted); text-align:center;
}
/* ---- FAQ。navと同じ三角に統一 ---- */
main details{
background:var(--page); border:1px solid var(--line);
border-radius:var(--radius); padding:.8rem 1rem; margin-bottom:.5rem;
}
main details[open]{border-color:var(--brand)}
main summary{display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none; font-weight:600}
main summary::-webkit-details-marker{display:none}
main summary::before{
content:""; flex:0 0 .5rem; height:.5rem;
background:var(--brand); clip-path:polygon(0 0,100% 50%,0 100%);
transition:transform .15s ease;
}
main details[open]>summary::before{transform:rotate(90deg)}
main details p{margin:.7rem 0 .15rem; color:var(--muted)}
.contact{background:var(--rail); border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem}
.contact p{margin:0 0 .5rem}
dl{margin:0}
dt{font-weight:600; margin-top:.75rem}
dd{margin:0; color:var(--muted)}
a{color:var(--brand-ink)}
[id]{scroll-margin-top:1.5rem}
a:focus-visible, summary:focus-visible, select:focus-visible{outline:2px solid var(--brand-ink); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
*{transition:none !important}
/* 右ペイン差し替え時のクロスフェードも止める */
::view-transition-old(root), ::view-transition-new(root){animation:none}
}
@media (max-width:60rem){
.layout{grid-template-columns:1fr}
.side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:1.25rem}
.brand,.plan{margin-bottom:1rem}
.wrap{padding:0 1.25rem}
header{padding:1.75rem 0 1.25rem}
h1{font-size:1.6rem}
h2{font-size:1.3rem; margin-top:1.5rem; padding-top:1.5rem}
.steps>li{grid-template-columns:1fr; padding-left:2.75rem; gap:1rem}
.shot{width:100%}
.modal{width:92vw}
.modal-nav[data-step="-1"]{left:.25rem}
.modal-nav[data-step="1"]{right:.25rem}
.steps h2{font-size:1.05rem}
}