/* まいにちツール 共通スタイル (mobile-first) */
:root{
  --bg:#f5f6f8; --card:#ffffff; --ink:#1f2430; --sub:#6b7280;
  --accent:#2563eb; --accent-soft:#eaf1fe; --line:#e5e7eb;
  --ok:#059669; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.8; font-size:16px;
}
a{color:var(--accent);}
/* header */
.site-head{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
}
.logo{font-weight:800; font-size:1.15rem; text-decoration:none; color:var(--ink); letter-spacing:.02em;}
.logo span{color:var(--accent);}
.site-head .tagline{font-size:.72rem; color:var(--sub); display:none;}
@media(min-width:600px){ .site-head .tagline{display:block;} }
/* layout */
.wrap{max-width:840px; margin:0 auto; padding:16px 16px 48px;}
.crumb{font-size:.78rem; color:var(--sub); margin:8px 0 16px;}
.crumb a{color:var(--sub); text-decoration:none;}
h1{font-size:1.45rem; line-height:1.4; margin-bottom:8px;}
.lead{color:var(--sub); font-size:.92rem; margin-bottom:20px;}
/* tool card */
.tool{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 16px; margin-bottom:20px;
}
@media(min-width:600px){ .tool{padding:28px 28px;} }
.field{margin-bottom:16px;}
.field>label{display:block; font-size:.82rem; font-weight:700; color:var(--sub); margin-bottom:6px;}
input[type=text],input[type=number],input[type=date],input[type=url],select,textarea{
  width:100%; padding:12px 14px; font-size:16px; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); font-family:inherit;
}
textarea{min-height:160px; resize:vertical; line-height:1.7;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);}
.row{display:flex; gap:12px;}
.row>.field{flex:1;}
.seg{display:flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden;}
.seg button{
  flex:1; padding:11px 4px; border:none; background:#fff; font-family:inherit;
  font-size:.9rem; font-weight:700; color:var(--sub); cursor:pointer;
}
.seg button.on{background:var(--accent); color:#fff;}
.btn{
  display:block; width:100%; padding:14px; border:none; border-radius:10px;
  background:var(--accent); color:#fff; font-size:1.02rem; font-weight:800;
  font-family:inherit; cursor:pointer; letter-spacing:.04em;
}
.btn:active{transform:translateY(1px);}
.btn.sub{background:var(--accent-soft); color:var(--accent);}
.btn.mini{display:inline-block; width:auto; padding:8px 16px; font-size:.85rem;}
/* result */
.result{
  margin-top:20px; background:var(--accent-soft); border-radius:12px;
  padding:18px 16px; text-align:center;
}
.result .big{font-size:2rem; font-weight:800; color:var(--accent); line-height:1.3; word-break:break-all;}
.result .unit{font-size:1rem; font-weight:700;}
.result .note{font-size:.8rem; color:var(--sub); margin-top:6px;}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px;}
@media(min-width:600px){ .stats{grid-template-columns:repeat(3,1fr);} }
.stat{background:var(--accent-soft); border-radius:10px; padding:10px; text-align:center;}
.stat .v{font-size:1.3rem; font-weight:800; color:var(--accent);}
.stat .k{font-size:.72rem; color:var(--sub); font-weight:700;}
/* ad slot */
.ad-slot{
  margin:24px 0; min-height:90px; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:10px; color:#c5cad3; font-size:.75rem;
  background:#fafbfc;
}
.ad-slot.filled{border:none; background:none; min-height:0; display:block;}
/* doc */
.doc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 16px; margin-bottom:20px;}
@media(min-width:600px){ .doc{padding:28px;} }
.doc h2{font-size:1.12rem; margin:20px 0 10px; padding-left:10px; border-left:4px solid var(--accent);}
.doc h2:first-child{margin-top:0;}
.doc p{margin-bottom:12px; font-size:.93rem;}
.doc ul,.doc ol{padding-left:22px; margin-bottom:12px; font-size:.93rem;}
.doc li{margin-bottom:4px;}
.doc table{width:100%; border-collapse:collapse; font-size:.88rem; margin-bottom:12px;}
.doc th,.doc td{border:1px solid var(--line); padding:7px 10px; text-align:left;}
.doc th{background:var(--bg); font-size:.82rem;}
details{border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:#fff;}
summary{padding:12px 14px; font-weight:700; font-size:.9rem; cursor:pointer;}
details p{padding:0 14px 12px; font-size:.88rem; color:var(--sub);}
/* related & top grid */
.related h2{font-size:1rem; margin-bottom:10px;}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px;}
@media(min-width:600px){ .grid{grid-template-columns:repeat(3,1fr);} }
.tool-link{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px; text-decoration:none; color:var(--ink); display:block; transition:.12s;
}
.tool-link:hover{border-color:var(--accent); transform:translateY(-2px);}
.tool-link .ico{font-size:1.5rem;}
.tool-link .nm{font-weight:800; font-size:.92rem; margin:4px 0 2px;}
.tool-link .ds{font-size:.74rem; color:var(--sub); line-height:1.5;}
/* hero (top page) */
.hero{text-align:center; padding:36px 16px 28px;}
.hero h1{font-size:1.6rem;}
.hero p{color:var(--sub); font-size:.92rem; margin-top:6px;}
.cat{font-size:1.05rem; font-weight:800; margin:26px 0 10px;}
/* footer */
.site-foot{
  border-top:1px solid var(--line); background:var(--card);
  padding:24px 16px; text-align:center; font-size:.8rem; color:var(--sub);
}
.site-foot nav{margin-bottom:8px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.site-foot a{color:var(--sub); text-decoration:none;}
.copy-ok{color:var(--ok); font-size:.8rem; font-weight:700; margin-left:8px;}