/* ===== ツールページ共通 ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif; color: #1a1a2e; background: #fafaf8; line-height: 1.7; }
a { color: inherit; text-decoration: none; }

/* ヘッダー */
.tool-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-bottom: 1px solid #eee;
}
.tool-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.tool-brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg,#e8668c,#c84b7a);
  color: #fff; font-size: .9rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.tool-brand-name { font-size: .95rem; color: #1a1a2e; }
.tool-nav { display: flex; align-items: center; gap: 1rem; font-size: .85rem; }
.tool-nav a { color: #555; }
.tool-nav a:hover { color: #e8668c; }
.tool-nav-cta {
  padding: .4rem .9rem; border-radius: 6px;
  background: linear-gradient(135deg,#e8668c,#c84b7a);
  color: #fff !important; font-weight: 700;
}
@media(max-width:600px) {
  .tool-nav a:not(.tool-nav-cta) { display: none; }
}

/* メイン */
.tool-main { max-width: 860px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* ヒーロー */
.tool-hero { text-align: center; margin-bottom: 2.5rem; }
.tool-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #e8668c; margin-bottom: .5rem; }
.tool-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; color: #1a1a2e; line-height: 1.3; margin-bottom: .75rem; }
.tool-desc { font-size: 1rem; color: #555; max-width: 560px; margin: 0 auto; }

/* フォームカード */
.tool-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 1.75rem; margin-bottom: 2rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.tool-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.tool-field { display: flex; flex-direction: column; gap: .35rem; }
.tool-label { font-size: .85rem; font-weight: 700; color: #444; }
.tool-label-req { font-size: .72rem; background: #e8668c; color: #fff; padding: .1rem .4rem; border-radius: 4px; margin-left: .4rem; }
.tool-label-opt { font-size: .72rem; color: #999; margin-left: .4rem; font-weight: 400; }
.tool-input {
  padding: .65rem .9rem; border: 1.5px solid #ddd; border-radius: 8px;
  font-size: .95rem; background: #fafaf8; transition: border-color .15s;
  -webkit-appearance: none;
}
.tool-input:focus { outline: none; border-color: #e8668c; background: #fff; }
.tool-hint { font-size: .75rem; color: #999; }

/* ボタン */
.tool-btn {
  display: block; width: 100%; padding: .9rem;
  background: linear-gradient(135deg,#e8668c,#c84b7a);
  color: #fff; border: none; border-radius: 10px;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s;
}
.tool-btn:hover { opacity: .9; }

/* 結果 */
.tool-result { margin-bottom: 2.5rem; }
.tool-result-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; color: #1a1a2e; }
.tool-result-section { margin-bottom: 1.75rem; }
.tool-result-section-title { font-size: .9rem; font-weight: 700; color: #555; margin-bottom: .75rem; }
.tool-result-note { font-size: .75rem; color: #999; margin-top: 1rem; }

/* テーブル共通 */
.tool-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool-table { width: 100%; border-collapse: collapse; font-size: .88rem; white-space: nowrap; }
.tool-table th { background: #f4f0f8; padding: .6rem .9rem; text-align: left; font-weight: 700; font-size: .8rem; color: #444; border-bottom: 2px solid #e0d6ec; }
.tool-table td { padding: .55rem .9rem; border-bottom: 1px solid #f0f0f0; }
.tool-table tbody tr:hover { background: #faf8fc; }
.tool-cell-na { color: #ccc; }
.tool-cell-note { font-size: .78rem; color: #888; }
.tool-cell-empty { text-align: center; color: #999; padding: 1.5rem; }
.tool-row-best td { background: #fff8f9; font-weight: 700; color: #c84b7a; border-top: 2px solid #f5c0d0; }

/* セクションタイトル */
.tool-section-title { font-size: 1.15rem; font-weight: 700; color: #1a1a2e; margin-bottom: 1.25rem; text-align: center; }

/* ガイドグリッド */
.tool-method-guide { margin-top: 3rem; }
.tool-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tool-guide-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 1.2rem; }
.tool-guide-icon { font-size: 1.6rem; margin-bottom: .5rem; }
.tool-guide-name { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.tool-guide-desc { font-size: .78rem; color: #666; line-height: 1.6; margin-bottom: .5rem; }
.tool-guide-fee { font-size: .78rem; font-weight: 700; color: #e8668c; }

/* 利益カード */
.profit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.profit-card { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; }
.profit-card-minus { border-color: #ffd6d6; }
.profit-card-head { padding: .8rem 1rem; border-top: 4px solid #e8668c; display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; }
.profit-card-icon { font-size: 1.2rem; }
.profit-card-result { padding: .6rem 1rem; font-size: 1.5rem; font-weight: 900; display: flex; align-items: baseline; gap: .5rem; }
.profit-plus { color: #27ae60; }
.profit-minus { color: #e74c3c; }
.profit-rate { font-size: .8rem; font-weight: 400; color: #888; }
.profit-card-breakdown { padding: .5rem 1rem 1rem; border-top: 1px solid #f5f5f5; }
.profit-row { display: flex; justify-content: space-between; font-size: .8rem; padding: .2rem 0; color: #555; }
.profit-row-minus { color: #e74c3c; }
.profit-row-na { color: #ccc; }
.profit-row-total { font-weight: 700; color: #1a1a2e; border-top: 1px solid #eee; margin-top: .3rem; padding-top: .4rem; }
.profit-row-warn { color: #f39c12; font-size: .78rem; }
.profit-oversize { font-size: .9rem; font-weight: 700; color: #f39c12; }

/* 比較表 */
.compare-table-wrap { margin-bottom: 1rem; }
.compare-table { white-space: normal; }
.compare-table th { text-align: center; font-size: .8rem; }
.compare-table td { text-align: center; }
.compare-feature-col { text-align: left !important; font-size: .83rem; color: #444; white-space: nowrap; }
.compare-our-col { background: #fff8fa !important; }
.compare-our-head { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.compare-our-mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg,#e8668c,#c84b7a); color: #fff; font-size: .85rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.compare-badge { font-size: .65rem; background: #e8668c; color: #fff; padding: .1rem .4rem; border-radius: 4px; }
.compare-section-row td { background: #f4f0f8; font-weight: 700; font-size: .82rem; color: #555; padding: .5rem .9rem; text-align: left !important; }
.compare-yes { color: #27ae60; font-weight: 700; }
.compare-no { color: #ccc; }
.compare-partial { color: #f39c12; font-size: .82rem; }
.compare-price { font-weight: 700; color: #e8668c; }
.compare-disclaimer { font-size: .73rem; color: #aaa; margin-bottom: 2.5rem; text-align: center; }

/* CTAバナー */
.tool-cta-banner {
  background: linear-gradient(135deg,#1a1a2e,#2d1b5e);
  color: #fff; padding: 2rem 1.5rem;
}
.tool-cta-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.tool-cta-text { flex: 1; min-width: 220px; }
.tool-cta-text strong { display: block; font-size: 1rem; margin-bottom: .3rem; }
.tool-cta-text span { font-size: .85rem; color: #c8b8e8; }
.tool-cta-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tool-cta-sub { font-size: .83rem; color: #c8b8e8; }
.tool-cta-sub:hover { color: #fff; }
.tool-cta-btn {
  padding: .7rem 1.5rem; border-radius: 8px;
  background: linear-gradient(135deg,#e8668c,#c84b7a);
  color: #fff; font-weight: 700; font-size: .9rem;
  white-space: nowrap;
}
.tool-cta-btn:hover { opacity: .9; }

/* フッター */
.tool-footer { text-align: center; padding: 2rem 1.5rem; background: #1a1a2e; color: #888; font-size: .78rem; }
.tool-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; margin-bottom: .75rem; }
.tool-footer-links a { color: #aaa; }
.tool-footer-links a:hover { color: #fff; }

/* ===== LPのツールセクション ===== */
.lp-tools-section { padding-top: 4rem; padding-bottom: 4rem; }
.lp-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.lp-tool-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eee; border-radius: 16px;
  padding: 1.5rem; text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .2s;
}
.lp-tool-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-2px); }
.lp-tool-icon { font-size: 2rem; margin-bottom: .75rem; }
.lp-tool-name { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin-bottom: .5rem; }
.lp-tool-desc { font-size: .83rem; color: #666; line-height: 1.7; flex: 1; margin-bottom: 1rem; }
.lp-tool-link { font-size: .83rem; font-weight: 700; color: #e8668c; }