/* =====================================================
   Zubora Design Lab 共通デザイン設定（zdl-common.css）
   -----------------------------------------------------
   /tools/ 以下の全ツールページ専用。
   ※WordPress側（トップページ等）には読み込ませないこと。
   色を変えたいときは下の①を直せば全ツールに反映されます。
   ===================================================== */

/* ---------- ① 色の基本ルール（トップページと同じ配色） ---------- */
:root{
  --navy:   #1F2A44;  /* 濃い紺：見出し・ヘッダー・CTA箱 */
  --main:   #3D5A80;  /* 青：小見出し・リンク・ボタン */
  --sub:    #98C1D9;  /* 水色：英字ラベル・区切り線 */
  --accent: #F2C94C;  /* 黄色：ボタン・下線（ブランドの目印） */
  --cream:  #FFF7DC;  /* クリーム：注意書きの背景 */
  --bg:     #F7F9FC;  /* ページ背景 */
  --ink:    #3D3D3D;  /* 本文の文字色 */
  --line:   #E3E9F2;  /* 薄い枠線 */
  --white:  #FFFFFF;
  --err:    #C0392B;
}

/* ---------- ② 全体・文字 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.8; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:680px; margin:0 auto; padding:40px 20px 80px}

.eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:.25em;
  font-weight:700; color:var(--main); margin-bottom:14px;
}
h1{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:600; font-size:1.7rem; line-height:1.5; color:var(--navy);
  margin-bottom:14px;
}
h1::after{ /* トップページと同じ黄色い下線 */
  content:""; display:block; width:64px; height:6px;
  background:var(--accent); border-radius:3px; margin-top:12px;
}
.lead{font-size:.92rem; color:#5a5a5a; margin-bottom:36px}
.marker{ /* 黄色マーカー（トップの zdl-marker と同じ見た目） */
  background:linear-gradient(transparent 62%, var(--accent) 62%);
}

/* ---------- ③ カード・入力欄 ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:28px 24px; margin-bottom:24px;
}
.card h2{
  font-size:1rem; color:var(--navy); margin-bottom:18px;
  padding-bottom:10px; border-bottom:2px solid var(--sub);
}
.field{margin-bottom:18px}
.field label{display:block; font-size:.85rem; font-weight:700; margin-bottom:6px}
.field .hint{font-weight:400; color:#888; font-size:.75rem; margin-left:6px}
input[type=text], textarea, select{
  width:100%; padding:10px 12px; font-size:16px; font-family:inherit;
  border:1px solid var(--line); border-radius:6px; background:#FCFDFF; color:var(--ink);
}
textarea{min-height:72px; resize:vertical}
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, .opt input:focus-visible+span{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ---------- ④ 質問（選択肢） ---------- */
.q{margin-bottom:26px}
.q .qt{font-weight:700; font-size:.95rem; margin-bottom:10px}
.q .qt .qno{color:var(--main); font-family:"Shippori Mincho",serif; margin-right:8px}
.opt{display:block; margin-bottom:8px; cursor:pointer}
.opt input{position:absolute; opacity:0}
.opt span{
  display:block; padding:10px 14px; border:1px solid var(--line);
  border-radius:6px; background:#FCFDFF; font-size:.9rem;
  transition:border-color .15s, background .15s;
}
.opt input:checked+span{border-color:var(--main); background:#EEF3F8; font-weight:700}

/* ---------- ⑤ ボタン ---------- */
.btn{ /* メイン実行ボタン：黄色×紺（トップページのCTAと同じ組み合わせ） */
  display:block; width:100%; padding:15px; border:none; border-radius:999px;
  background:var(--accent); color:var(--navy); font-size:1.05rem; font-weight:700;
  font-family:inherit; cursor:pointer; letter-spacing:.08em;
}
.btn:hover{filter:brightness(1.05)}
.btn-sub{
  display:inline-block; padding:8px 16px; border:1.5px solid var(--navy);
  border-radius:999px; background:#fff; color:var(--navy); font-size:.8rem;
  font-family:inherit; cursor:pointer; font-weight:700;
}
.btn-sub:hover{background:#EEF3F8}
.err{color:var(--err); font-size:.85rem; margin-top:10px; display:none}

/* ---------- ⑥ 結果カルテ ---------- */
.result{display:none; margin-top:36px}
.karte{
  background:var(--white); border:2px solid var(--navy); border-radius:8px;
  padding:30px 26px; position:relative;
}
.karte::before{
  content:"ZUBORA DESIGN LAB"; position:absolute; top:-11px; left:20px;
  background:var(--white); padding:0 10px; font-size:.65rem;
  letter-spacing:.3em; color:var(--main);
}
.karte h3{
  font-family:"Shippori Mincho",serif; color:var(--navy);
  font-size:1.2rem; margin-bottom:14px;
}
.stamp{
  width:64px; height:64px; border-radius:50%; border:3px solid var(--accent);
  color:var(--navy); display:flex; align-items:center; justify-content:center;
  font-family:"Shippori Mincho",serif; font-size:1.8rem; font-weight:600;
  position:absolute; top:20px; right:20px; transform:rotate(8deg);
  background:var(--cream);
}
.outblock{
  background:#FCFDFF; border:1px dashed var(--line); border-radius:6px;
  padding:16px; margin:14px 0; white-space:pre-wrap; font-size:.92rem;
}
.outblock a{color:var(--main); font-weight:700}
.outlabel{
  font-size:.75rem; font-weight:700; color:var(--main);
  letter-spacing:.1em; margin-top:18px;
}
.copyrow{text-align:right; margin-top:6px}
.scorebar{height:8px; background:#E9EEF5; border-radius:4px; overflow:hidden; margin:4px 0 14px}
.scorebar i{display:block; height:100%; background:var(--accent)}

/* ---------- ⑦ CTA・誘導枠 ---------- */
.cta-box{
  margin-top:28px; background:var(--navy); color:#fff;
  border-radius:8px; padding:26px 24px; text-align:center;
}
.cta-box p{font-size:.9rem; margin-bottom:16px}
.cta-box a{
  display:inline-block; background:var(--accent); color:var(--navy);
  text-decoration:none; font-weight:700; padding:13px 30px; border-radius:999px;
}
.cta-box a:hover{filter:brightness(1.05)}
.cta-box .note{font-size:.72rem; color:var(--sub); margin-top:12px; margin-bottom:0}
.related-box{
  margin-top:20px; background:var(--white); border:1px solid var(--line);
  border-left:4px solid var(--sub); border-radius:8px; padding:22px 24px;
}
.related-box h3{font-size:.95rem; color:var(--navy); margin-bottom:8px}
.related-box p{font-size:.85rem; color:#5a5a5a; margin-bottom:14px}
.secondary-button{
  display:inline-block; padding:11px 22px; border:1.5px solid var(--navy);
  border-radius:999px; background:#fff; color:var(--navy); font-size:.88rem;
  font-weight:700; text-decoration:none;
}
.secondary-button:hover{background:#EEF3F8}
.note-box{ /* 注意書き（トップページの黄色枠と同じ） */
  margin-top:20px; padding:16px 18px; background:var(--cream);
  border:2px solid var(--accent); border-radius:10px;
  font-weight:700; font-size:.9rem;
}

/* ---------- ⑧ affiliate-tools ページ用 ---------- */
.ad-notice{
  background:var(--cream); border:2px solid var(--accent); border-radius:8px;
  padding:16px 18px; font-size:.82rem; margin-bottom:32px; color:var(--ink);
}
.catnav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:40px}
.catnav a{
  font-size:.8rem; font-weight:700; color:var(--main); text-decoration:none;
  border:1px solid var(--line); background:#fff; border-radius:20px; padding:7px 16px;
}
.catnav a:hover{border-color:var(--main); background:#EEF3F8}
.af-section{margin-bottom:56px; scroll-margin-top:20px}
.af-section h2{
  font-family:"Shippori Mincho","Hiragino Mincho ProN",serif; font-weight:600;
  font-size:1.25rem; color:var(--navy); margin-bottom:10px;
  padding-bottom:8px; border-bottom:2px solid var(--sub);
}
.af-section > p{font-size:.88rem; color:#5a5a5a; margin-bottom:22px}
.affiliate-card{
  background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:22px 22px; margin-bottom:16px;
}
.affiliate-category{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:var(--main); background:#EEF3F8; border-radius:3px;
  padding:3px 10px; margin-bottom:10px;
}
.affiliate-card h3{font-size:1.02rem; color:var(--ink); margin-bottom:10px}
.affiliate-target,.affiliate-purpose{font-size:.85rem; margin-bottom:4px}
.affiliate-note{
  font-size:.8rem; color:#5a5a5a; margin:10px 0 14px;
  padding-left:10px; border-left:3px solid var(--accent);
}
.affiliate-button{
  display:inline-block; background:var(--main); color:#fff; text-decoration:none;
  font-size:.85rem; font-weight:700; padding:10px 24px; border-radius:999px;
}
.affiliate-button:hover{background:#324a6a}
.af-caution{font-size:.78rem; color:#5a5a5a; background:var(--cream); border-radius:6px; padding:12px 14px; margin-bottom:20px}
.affiliate-button.is-pending{ /* リンク未設定ボタンの自動「準備中」表示 */
  background:#C9D2DF; color:#fff; pointer-events:none; cursor:default;
}

/* ---------- ⑨ スマホ・配慮設定 ---------- */
@media (max-width:480px){
  h1{font-size:1.4rem}
  .wrap{padding:28px 16px 60px}
  .stamp{width:52px; height:52px; font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
}