/* サブスクの解約・退会リンク集 共通スタイル
   モバイル最優先・軽量(フレームワーク不使用・Webフォント不使用) */
:root {
  --c-text: #2b2b2b;
  --c-sub: #666;
  --c-bg: #fff;
  --c-bg-soft: #f6f7f8;
  --c-line: #e0e3e6;
  --c-accent: #0f6e5c;
  --c-accent-soft: #e6f2ef;
  --c-warn-bg: #fff6e5;
  --c-warn-line: #e6c380;
  --c-result-bg: #f0f7f4;
  --radius: 10px;
  --maxw: 760px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.8;
  font-size: 16px;
}
header.site {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
header.site .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
header.site .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-accent);
  text-decoration: none;
}
header.site .tagline { font-size: .78rem; color: var(--c-sub); }
nav.breadcrumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 16px 0;
  font-size: .78rem;
  color: var(--c-sub);
}
nav.breadcrumb a { color: var(--c-sub); }
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 16px 40px;
}
h1 { font-size: 1.45rem; line-height: 1.4; margin: .8em 0 .4em; }
h2 {
  font-size: 1.15rem;
  margin: 2em 0 .6em;
  padding: .35em .6em;
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-soft);
  border-radius: 4px;
}
h3 { font-size: 1.02rem; margin: 1.5em 0 .5em; }
p.lead { color: var(--c-sub); margin-top: 0; }
a { color: var(--c-accent); }

/* ツールフォーム */
.tool {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin: 18px 0;
  background: var(--c-bg);
}
.tool .field { margin-bottom: 14px; }
.tool label.q {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  margin-bottom: 6px;
}
.tool label.q .hint { font-weight: 400; font-size: .8rem; color: var(--c-sub); }
.tool select, .tool input[type="number"], .tool input[type="text"] {
  width: 100%;
  padding: 12px;
  font-size: 1.05rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-bg);
  color: var(--c-text);
}
.tool select:focus, .tool input:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.tool .radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool .radio-row label {
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .9rem;
  cursor: pointer;
}
.tool .radio-row input { margin-right: 6px; }
.tool .radio-row input:checked + span { font-weight: 700; }
.tool .radio-row label:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}

/* 結果表示 */
.result {
  margin-top: 16px;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-result-bg);
  padding: 14px 16px;
}
.result .amount {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--c-accent);
}
.result .amount small { font-size: 1rem; }
.result .formula {
  font-size: .85rem;
  color: var(--c-sub);
  border-top: 1px dashed var(--c-line);
  margin-top: 8px;
  padding-top: 8px;
}
.result[hidden] { display: none; }

/* 補足・注意 */
.note {
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: .88rem;
  margin: 16px 0;
}
.source {
  font-size: .85rem;
  color: var(--c-sub);
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 16px 0;
}
.source ul { margin: .4em 0 0; padding-left: 1.3em; }

/* 表 */
.tablewrap { overflow-x: auto; margin: 14px 0; }
table.data {
  border-collapse: collapse;
  width: 100%;
  font-size: .88rem;
}
table.data th, table.data td {
  border: 1px solid var(--c-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
table.data th { background: var(--c-bg-soft); white-space: nowrap; }

/* FAQ */
details.faq {
  border: 1px solid var(--c-line);
  border-radius: 8px;
  margin: 8px 0;
  padding: 0 14px;
}
details.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: .95rem;
  padding: 12px 0;
}
details.faq p { margin-top: 0; }

/* 関連ツール */
.related { margin: 24px 0; }
.related ul { list-style: none; padding: 0; margin: 8px 0; }
.related li { margin: 6px 0; }
.related a {
  display: block;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 14px;
  text-decoration: none;
}
.related a:hover { background: var(--c-accent-soft); }
.related a .desc { display: block; font-size: .8rem; color: var(--c-sub); }

/* トップページのカード */
.toolgrid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
@media (min-width: 560px) { .toolgrid { grid-template-columns: 1fr 1fr; } }
.toolgrid a {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: var(--c-text);
  background: var(--c-bg);
}
.toolgrid a:hover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.toolgrid a strong { color: var(--c-accent); }
.toolgrid a span { display: block; font-size: .82rem; color: var(--c-sub); margin-top: 4px; }

/* 広告スロット(AdSense導入時に差し替え) */
.ad-slot {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: .75rem;
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  margin: 20px 0;
}

/* 免責・フッター */
.disclaimer {
  font-size: .8rem;
  color: var(--c-sub);
  border-top: 1px solid var(--c-line);
  margin-top: 32px;
  padding-top: 14px;
}
footer.site {
  border-top: 1px solid var(--c-line);
  margin-top: 24px;
  background: var(--c-bg-soft);
}
footer.site .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px;
  font-size: .8rem;
  color: var(--c-sub);
}
footer.site a { color: var(--c-sub); }
footer.site .footer-disclaimer {
  font-size: .78rem;
  line-height: 1.7;
  margin: 0 0 12px;
}
footer.site .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 10px;
}
footer.site .footer-links a {
  color: var(--c-sub);
  text-decoration: underline;
  font-size: .82rem;
}
footer.site .copyright {
  font-size: .78rem;
  margin: 0;
  color: var(--c-sub);
}

/* =========================================================================
   広告枠の一括制御
   AdSense掲載開始まで、全ページの広告枠(.ad-slot)を非表示にします。
   審査時に「広告スペース」プレースホルダが表示されると準備中サイトと
   みなされ審査落ちの原因になるため、掲載開始までは必ず非表示のままに。

   【掲載を始めるとき】
   (1) 各HTMLの <div class="ad-slot">...</div> の中身をAdSenseコードに差し替え
   (2) 下の1ブロック(このコメント含む)を削除する
   これで全ページの広告枠が一斉に有効化されます。
   ========================================================================= */
.ad-slot { display: none !important; }

/* =========================================================================
   cancel クラスター追加スタイル(デザイン担当追記分)
   既存の記述は書き換えず、ここから下に追記しています。
   ========================================================================= */
:root {
  --c-delete: #b23a2e;
  --c-delete-soft: #fbeae7;
  --c-delete-line: #e3a89c;
}

/* 情報確認日バー(subsc側の実装を踏襲) */
.infobar {
  font-size: .8rem;
  color: var(--c-sub);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 18px;
  line-height: 1.7;
}
.infobar strong { color: var(--c-text); }

/* 用語3分類の定義ブロック(被リンク獲得の目玉。引用しやすい独立ブロックにする) */
.glossary {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 18px 0 26px;
  background: var(--c-bg);
}
.glossary h2 { margin-top: 0; }
.glossary-en { font-size: .74rem; color: var(--c-sub); }
.glossary-cite { font-size: .82rem; color: var(--c-sub); margin: 10px 0 0; }
.glossary-list { margin: .6em 0 0; padding-left: 1.3em; font-size: .94rem; }
.glossary-list li { margin: .5em 0; }
.glossary-compact { background: var(--c-bg-soft); }

/* 解約と退会の別手続きバッジ(このサイトの核心機能。separate-yes を最も目立たせる) */
.separate-badge {
  display: block;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0 20px;
  font-size: .95rem;
  line-height: 1.7;
  border: 1px solid var(--c-line);
}
.separate-yes {
  background: var(--c-accent-soft);
  border: 2px solid var(--c-accent);
  font-size: 1.02rem;
}
.separate-yes strong { color: var(--c-accent); font-size: 1.08rem; }
.separate-no {
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-line);
}
.separate-unknown {
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-line);
  color: var(--c-sub);
}

/* 用語の注意(termNote) */
.note-inline {
  font-size: .85rem;
  color: var(--c-sub);
  background: var(--c-bg-soft);
  border-left: 3px solid var(--c-line);
  padding: 10px 12px;
  margin: 6px 0 20px;
}
.term-note {
  border-left-color: var(--c-warn-line);
  background: var(--c-warn-bg);
  color: var(--c-text);
}

/* 解約・退会・外部課金の各セクション(procbox)。解約=アクセントカラー / 退会=警告寄りの色で明確に区別する */
.procbox {
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin: 20px 0;
  border: 1px solid var(--c-line);
}
.procbox h2 { margin-top: 0; }
.procbox-cancel {
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent);
  border-left-width: 6px;
}
.procbox-delete {
  background: var(--c-delete-soft);
  border: 1px solid var(--c-delete);
  border-left-width: 6px;
}
.procbox-delete h2 { border-left-color: var(--c-delete); }
.procbox-external {
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-line);
}
.procbox:target { outline: 3px solid var(--c-accent); outline-offset: 3px; }

.proc-unavailable {
  background: var(--c-bg);
  border: 1px dashed var(--c-line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--c-sub);
  font-size: .92rem;
}
.proc-method { font-size: .85rem; color: var(--c-sub); margin: 4px 0; }
.proc-link { margin: 10px 0; }
.proc-link a {
  display: inline-block;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--c-bg);
  border: 1px solid currentColor;
  text-decoration: none;
}
.procbox-cancel .proc-link a { color: var(--c-accent); }
.procbox-delete .proc-link a { color: var(--c-delete); }
.proc-direct { margin-top: 6px; }
.proc-sub-h { font-weight: 700; font-size: .9rem; margin: 14px 0 4px; color: var(--c-text); }
.proc-recovery {
  font-size: .88rem;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.6);
}
.proc-recovery-unknown { color: var(--c-sub); font-style: italic; background: transparent; padding: 0; }

/* 一覧テーブル内「窓口なし」 */
.unavailable {
  color: var(--c-sub);
  font-style: italic;
  font-size: .85rem;
  background: var(--c-bg-soft);
  padding: 2px 8px;
  border-radius: 4px;
}

/* 一覧テーブルの絞り込みUI */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
  padding: 12px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.filterbar label { font-size: .85rem; font-weight: 700; }
.filterbar select,
.filterbar input[type="search"] {
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: .92rem;
  background: var(--c-bg);
  color: var(--c-text);
}
.filterbar input[type="search"] { flex: 1 1 180px; min-width: 160px; }
.filter-count { font-size: .8rem; color: var(--c-sub); margin: 0 0 10px; }

/* 「解約と退会が別手続きか」列を目立たせる(このサイトの核心表示) */
#service-table th:nth-child(5),
#service-table td:nth-child(5) {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-weight: 700;
}
#service-table tbody tr:target { background: var(--c-warn-bg); }
.row-anchor {
  margin-left: 6px;
  font-size: .78rem;
  color: var(--c-sub);
  text-decoration: none;
  /* 常時表示だと記号のノイズになるので、ふだんは隠しておく。
     opacity で消すことで、表示/非表示が切り替わっても列幅がずれない */
  opacity: 0;
  transition: opacity .12s ease-in-out;
}
#service-table tbody tr:hover .row-anchor,
#service-table tbody tr:focus-within .row-anchor,
#service-table tbody tr:target .row-anchor,
.row-anchor:focus { opacity: 1; }
.row-anchor:hover { color: var(--c-accent); }
/* タッチ環境にはホバーが無いので、薄く常時表示して見つけられるようにする */
@media (hover: none) {
  .row-anchor { opacity: .5; }
}

/* CSVダウンロードリンク・掲載方針箇条書き(subsc側の実装を踏襲) */
.csvlink { font-size: .92rem; margin: 10px 0 22px; }
.limitlist { margin: .6em 0; padding-left: 1.3em; font-size: .92rem; }
.limitlist li { margin: .5em 0; }

/* =========================================================================
   font-license クラスター追加スタイル
   既存の記述は書き換えず、ここから下に追記しています。
   ========================================================================= */

/* トップページの統計見出し(引用される数字。build.js が自動計算) */
.statbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 16px 0 22px;
}
@media (min-width: 480px) { .statbar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .statbar { grid-template-columns: repeat(4, 1fr); } }
.stat {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  padding: 14px 12px;
  text-align: center;
}
.stat-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1.2;
}
.stat-label {
  display: block;
  font-size: .78rem;
  color: var(--c-sub);
  margin-top: 4px;
}

/* 法的助言ではない旨の注意(.noteを強調。常時目立たせる) */
.legal-note { font-weight: 700; }
.legal-note strong { color: var(--c-text); }

/* 一覧テーブルの許諾セル(allowed×basisの組み合わせ表示)。null を不可と混同しない配色にする */
td.perm-yes { color: var(--c-accent); font-weight: 700; background: var(--c-accent-soft); }
td.perm-yes-derived { color: var(--c-accent); font-weight: 700; background: var(--c-accent-soft); font-size: .84rem; }
td.perm-no { color: var(--c-delete); font-weight: 700; background: var(--c-delete-soft); }
td.perm-review { color: #8a6300; font-weight: 700; background: var(--c-warn-bg); }
td.perm-unknown { color: var(--c-sub); font-style: italic; background: var(--c-bg-soft); }
/* note付きセルのツールチップ(abbr)。常時表示の飾りは付けず、下線のみで示す */
table.data td abbr { text-decoration: underline dotted; cursor: help; }

/* 表の凡例(可(別条項)・要確認の意味が伝わらないため、表の直前に必ず置く) */
.legend {
  font-size: .82rem;
  color: var(--c-sub);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 10px 0 16px;
}
.legend p { margin: .35em 0; }
.legend-item {
  display: inline-block;
  min-width: 3.6em;
  text-align: center;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  font-weight: 700;
  font-size: .82rem;
}
.legend-item.perm-yes { color: var(--c-accent); background: var(--c-accent-soft); }
.legend-item.perm-yes-derived { color: var(--c-accent); background: var(--c-accent-soft); }
.legend-item.perm-no { color: var(--c-delete); background: var(--c-delete-soft); }
.legend-item.perm-review { color: #8a6300; background: var(--c-warn-bg); }
.legend-item.perm-unknown { color: var(--c-sub); background: var(--c-bg); border: 1px dashed var(--c-line); }

/* フォント個別ページ: ライセンス原文への直リンク(最上部・最重要) */
.license-top-link {
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  background: var(--c-accent-soft);
  padding: 14px 16px;
  margin: 10px 0 18px;
}
.license-top-link p { margin: 6px 0; }
.license-original-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--c-accent);
  color: #fff !important;
  text-decoration: none;
}
.license-original-btn:hover { opacity: .9; }

/* フォント個別ページ: 6区分セクション・クレジット表記セクション */
.permbox {
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin: 16px 0;
  border: 1px solid var(--c-line);
}
.permbox h2 { margin-top: 0; }
.permbox.perm-yes { background: var(--c-accent-soft); border: 1px solid var(--c-accent); border-left-width: 6px; }
.permbox.perm-yes-derived { background: var(--c-accent-soft); border: 1px dashed var(--c-accent); border-left-width: 6px; }
.permbox.perm-no { background: var(--c-delete-soft); border: 1px solid var(--c-delete); border-left-width: 6px; }
.permbox.perm-review { background: var(--c-warn-bg); border: 1px solid var(--c-warn-line); border-left-width: 6px; }
.permbox.perm-unknown { background: var(--c-bg-soft); border: 1px dashed var(--c-line); }
.perm-desc { font-size: .88rem; color: var(--c-sub); margin: 4px 0 10px; }
.perm-status { font-size: 1rem; margin: 6px 0; }
.perm-basis { font-size: .82rem; color: var(--c-sub); margin: 0 0 6px; }
.perm-note {
  font-size: .88rem;
  background: rgba(255,255,255,.6);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 0;
}
.attribution-box { background: var(--c-bg-soft); border: 1px dashed var(--c-line); }
.attribution-note { font-size: .88rem; color: var(--c-sub); margin: 8px 0 0; }
.meta-section {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin: 16px 0;
  background: var(--c-bg);
}
.meta-section h2 { margin-top: 0; }
.meta-section ul { margin: .4em 0 0; padding-left: 1.3em; }