/* わたしのこーひーろぐ — サイト共通スタイル
   出典: アプリのデザイントークン ~/Documents/coffee-log/src/theme.js（V4B確定・2026-08-02）
   規律: 青緑・緑・無彩色の濃淡以外の色みを足さない／緑は要所のみ／角丸基調 */
:root{
  --ink:#15272e; --sub:#4c6068; --faint:#7d8e95; --line:#c6d2d6;
  --cyan:#087f91; --cyan-dark:#065f6d;
  --lime:#76940b; --lime-wash:#eff6d6;
  --l97:#f4f8f9; --l90:#dfe9eb; --l82:#c9d9dc; --white:#fff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--l97);color:var(--ink);
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  line-height:1.85;-webkit-text-size-adjust:100%}
.wrap{max-width:720px;margin:0 auto;padding:0 20px 56px}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:720px;margin:0 auto;padding:16px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--cyan);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700;letter-spacing:-.5px}
.nav-cta{background:var(--cyan);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  padding:9px 16px;border-radius:999px}
.nav-cta:hover{background:var(--cyan-dark)}
.crumb{max-width:720px;margin:0 auto;padding:4px 20px 0;font-size:13px;color:var(--faint)}
.crumb a{color:var(--faint)}
.crumb span{margin:0 6px}
h1{font-size:26px;line-height:1.5;margin:20px 0 10px}
h2{font-size:18px;margin:0 0 12px}
h3{font-size:15px;margin:18px 0 4px}
p{margin:8px 0;font-size:15px}
.lead{color:var(--sub);font-size:15px;margin-bottom:22px}
.card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:16px}
.note{background:var(--lime-wash);border-left:4px solid var(--lime);border-radius:0 14px 14px 0;
  padding:14px 16px;margin:12px 0;font-size:14.5px}
.promise{margin:10px 0 4px;padding-left:1.15em;font-size:15px}
.promise li{margin:6px 0}
.mail{display:inline-block;background:var(--cyan);color:#fff;text-decoration:none;font-weight:700;
  padding:12px 20px;border-radius:999px;margin:10px 0 4px;font-size:15px}
.mail:hover{background:var(--cyan-dark)}
.mailnote{color:var(--faint);font-size:13px;margin:4px 0 0}
.links a{display:block;border-bottom:1px solid var(--line);padding:12px 0;color:var(--ink);
  text-decoration:none;font-weight:600;font-size:14.5px}
.links a:last-child{border-bottom:none}
.links a span{color:var(--cyan);float:right}
details{border-bottom:1px solid var(--line);padding:10px 0}
details:last-of-type{border-bottom:none}
summary{cursor:pointer;font-weight:600;font-size:14.5px}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";color:var(--cyan);margin-right:8px;font-weight:700}
details[open] summary::before{content:"−"}
details p{color:var(--sub);font-size:14.5px;margin:8px 0 2px}
ol,ul{padding-left:1.2em}
li{font-size:15px;margin:6px 0}
.operator{font-size:14px;color:var(--sub);line-height:1.85}
a{color:var(--cyan)}
footer{text-align:center;color:var(--faint);font-size:12px;margin-top:32px;padding-bottom:24px}
footer .flinks{display:flex;gap:18px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
footer .flinks a{color:var(--faint);font-weight:600;text-decoration:none}
table{width:100%;border-collapse:collapse;font-size:14.5px}
.tblwrap{overflow-x:auto}
th,td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
th{color:var(--sub);font-weight:700;white-space:nowrap}

/* 狭い画面でナビが2行に折れないようにする（375px想定） */
@media (max-width:400px){
  .navbar{padding:14px 16px}
  .brand{font-size:14px}
  .brand span:last-child{white-space:nowrap}
  .brand .mark{width:30px;height:30px;font-size:14px}
  .nav-cta{white-space:nowrap;font-size:13px;padding:8px 13px}
}