/* sandbox-lablife の共通のスタイル。色は、KINA 標準 UI カラーパレット(docs/構想/KINA標準UIカラーパレット.md)を、出発点にしている。 */
:root{--bg:#f7f7f7;--panel:#f7f7f7;--card:#ffffff;--line:#d0d0d0;--text:#1a1a1a;--sub:#555555;--faint:#888888;
  --tint:#eef4fc;--tint-line:#bcd4f2;--tint-a:#dbe8fa;--tint-a-line:#a9c7ee;--blue:#4a8ce0;--blue-h:#3a7bd5;--blue-a:#2d6abf;--r-l:10px;--r-s:6px;--shadow:0 2px 8px rgba(0,0,0,.12);--shadow-h:0 5px 18px rgba(0,0,0,.20)}
*{box-sizing:border-box}
html{background:var(--bg);overflow-y:scroll}   /* ページが短くても、縦のスクロールバーの場所を確保する(バーの有無で、中央の位置が動かないように) */
body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;line-height:1.8;font-size:16px}
.wrap{max-width:38rem;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
header.top{display:flex;align-items:center;gap:.8rem;padding:1.2rem 1.2rem .9rem}
header.top img{width:44px;height:44px;border-radius:50%;flex:none;background:var(--card)}
header.top .name{font-size:1.1rem;font-weight:500;letter-spacing:.04em;line-height:1.3}
/* 上部のメニュー: 4つの枠は、同じ幅で、位置を動かさない。いまいるページは、青の線で示す */
nav.menu{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
nav.menu a{display:block;padding:.75rem 0;text-align:center;white-space:nowrap;font-size:.85rem;color:var(--sub);text-decoration:none;border-bottom:3px solid transparent}
nav.menu a.on{color:var(--text);border-bottom-color:var(--blue);font-weight:500}
/* 最初の見出しの位置: メニューから、画面の高さに合わせた間(高い画面で約150px)。全ページで同じ計算にして、ページを移っても、見出しが動かないようにする */
main{flex:1;padding:clamp(2rem,12vh,9.5rem) 1.2rem 3rem}
/* トップページ: ひとことと説明だけ。見出しの位置は、ほかのページと同じ */
main.hero{text-align:center;padding-top:calc(clamp(2rem,12vh,9.5rem) + 2.5rem)}   /* 3行だけのページなので、ほかのページの見出しの位置から、少し(2.5rem)下げる */
.ph{display:inline-block}   /* 言葉のまとまり。狭い画面では、まとまりの境目で折り返す */
main.hero h1{font-size:1.2rem;margin:.2rem 0 4rem}   /* ひとこととの説明の間は、広め(案C) */
main.hero p{margin:0;color:var(--sub);font-size:.88rem;line-height:2}
h1{font-size:1.25rem;font-weight:500;margin:.2rem 0 .4rem;line-height:1.5}
h2{font-size:.8rem;font-weight:500;letter-spacing:.14em;color:var(--sub);margin:2.2rem 0 .7rem}
p{margin:0 0 1rem}
.note{color:var(--sub);font-size:.88rem}
.faint{color:var(--faint)}
.card,.btn{display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:.8rem 1rem;color:var(--text);text-decoration:none;box-shadow:var(--shadow);margin:0 0 .7rem;text-align:left;transition:box-shadow .15s}
.card small{display:block;color:var(--faint);font-size:.8rem;line-height:1.5}
.card .arrow,.btn .arrow{color:var(--faint);flex:none}
/* ボタンとメニューの、ふれたときの色: ふだんは白、ふれると、薄い青。
   「ふれた」は、マウスで、乗せられる環境(パソコン)だけ。スマホでは、タップのあとに、色が残らないよう、押した瞬間(:active)だけにする */
html{-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  a.card:hover,a.btn:hover{background:var(--tint);border-color:var(--tint-line);box-shadow:var(--shadow-h)}
  nav.menu a:hover{color:var(--text);background:var(--tint)}
}
a.card:active,a.btn:active{background:var(--tint-a);border-color:var(--tint-a-line);box-shadow:var(--shadow)}
nav.menu a:active{background:var(--tint-a)}
a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
footer{padding:1.4rem 1.2rem 2.4rem;color:var(--faint);font-size:.8rem;border-top:1px solid var(--line)}