/* スーパー電卓 共通スタイル */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #F0F0F1;
  font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  color: #121214;
}
a { color: inherit; text-decoration: none; }
input, select { font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input:focus, select:focus {
  outline: 2px solid #121214;
  outline-offset: 1px;
  border-color: #121214 !important;
}

/* ページ全体を中央寄せの白いカードとして表示(モバイル〜デスクトップ共通) */
.page-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  body { padding: 32px 16px; }
  .page-shell {
    min-height: auto;
    border-radius: 20px;
    box-shadow: 0 2px 24px rgba(18,18,20,0.06);
    overflow: hidden;
  }
}

.link-soft { color:#8A8A90; transition: color 0.15s ease; }
.link-soft:hover, .link-soft:active { color:#3A3A3F; }

.add-btn { background:#121214; color:#FFFFFF; transition: opacity 0.15s ease; cursor:pointer; }
.add-btn:hover { opacity:0.82; }

.cta-btn { background:#000000; color:#FFFFFF; transition: background 0.15s ease, color 0.15s ease; }
.cta-btn:hover { background:#05FF05; color:#000000; }
.cta-arrow { opacity: 0; transform: translateX(-4px); transition: opacity 0.45s ease, transform 0.45s ease; }
.cta-btn:hover .cta-arrow { opacity: 1; transform: translateX(0); }

.save-btn { background:#FFFFFF; color:#121214; border:1.5px solid #121214; transition: background 0.15s ease, color 0.15s ease; cursor:pointer; }
.save-btn:hover { background:#121214; color:#FFFFFF; }

.pill { cursor:pointer; }

.card { background:#F5F5F6; border-radius:16px; padding:20px; }

.badge { display:flex; align-items:center; gap:8px; border-radius:10px; padding:12px 14px; }
.badge-gold { background:#FDF3DA; color:#B8860B; }
.badge-gray { background:#EDEDEE; color:#6B6B70; }

.site-header { display:flex; align-items:center; padding:20px 24px; }
.site-footer { margin-top:32px; padding:28px 24px 36px; display:flex; flex-direction:column; gap:14px; border-top:1px solid #ECECEE; }
.site-footer .disclaimer { font-size:11.5px; line-height:1.85; color:#A6A6AC; }
.site-footer .contact { font-size:11.5px; color:#A6A6AC; }
.site-footer .legal-links { font-size:11.5px; color:#A6A6AC; display:flex; gap:14px; flex-wrap:wrap; }
.site-footer .legal-links a { color:#8A8A90; }
.site-footer .legal-links a:hover { color:#3A3A3F; text-decoration:underline; }

/* AdSense対策: 各ツールの解説文(使い方・計算のポイント) */
.tool-article { padding:28px 24px 4px; display:flex; flex-direction:column; gap:0; }
.tool-article h2 { font-size:15px; font-weight:900; margin:0; }
.tool-article p { font-size:13px; line-height:1.9; color:#6B6B70; margin:0; }
.tool-article table { width:100%; border-collapse:collapse; font-size:12.5px; color:#6B6B70; }
.tool-article th, .tool-article td { text-align:left; padding:6px 4px; border-bottom:1px solid #ECECEE; }

.tool-article-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding:0; margin:0; cursor:pointer; font-family:inherit; text-align:left; -webkit-tap-highlight-color:transparent; }
.tool-article-toggle-label { font-size:15px; font-weight:900; color:#121214; }
.tool-article-arrow { font-size:13px; font-weight:900; color:#121214; transition:color 0.15s ease; flex-shrink:0; padding-left:12px; }
.tool-article-toggle.open .tool-article-arrow { color:#05FF05; }
.tool-article-body { display:flex; flex-direction:column; gap:14px; overflow:hidden; max-height:0; }
.tool-article-body.open { max-height:none; margin-top:14px; }

.back-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }