/* ==========================================================
   名古屋空き家相談室（nagoya-akiyasoudan.com）共通CSS
   設置場所：WPCode（CSSスニペット・全ページ）または 外観＞カスタマイズ＞追加CSS
   スコープ：.ak で囲った本文にだけ効く（テーマ側には干渉しない）
   設計方針：50代向け＝大きい文字・広い行間・明朝の見出し・紺×白・朱の電話
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

.ak{
  --ak-navy:#1c3557;      /* 紺：見出し・帯 */
  --ak-ink:#262a2f;       /* 本文の墨色 */
  --ak-mist:#eef2f6;      /* 薄藍：交互の背景 */
  --ak-line:#cfd8e1;      /* 罫線 */
  --ak-vermilion:#c6452c; /* 朱：電話・最重要ボタンだけに使う */
  --ak-moss:#4f7a4a;      /* 苔色：できる・安心の印 */
  --ak-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --ak-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-family:var(--ak-sans);
  color:var(--ak-ink);
  font-size:17px;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
.ak *{box-sizing:border-box}
.ak img{max-width:100%;height:auto;display:block}
.ak a{color:var(--ak-navy)}
.ak p{margin:0 0 1.1em}
.ak ul,.ak ol{margin:0 0 1.2em;padding-left:1.4em}
.ak li{margin:.3em 0}

/* 見出し：明朝・紺。装飾は左の太い罫1本だけ */
.ak h1,.ak h2,.ak h3{font-family:var(--ak-serif);color:var(--ak-navy);line-height:1.5;margin:0;font-weight:700}
.ak h1{font-size:clamp(27px,5.2vw,40px);letter-spacing:.03em}
.ak h1 .ak-h1sub{display:block;font-family:var(--ak-sans);font-weight:500;font-size:clamp(14px,2.6vw,17px);color:var(--ak-ink);margin-bottom:.5em;letter-spacing:.06em}
.ak h2{font-size:clamp(23px,4vw,30px);padding-left:.6em;border-left:6px solid var(--ak-navy);margin-bottom:.9em}
.ak h3{font-size:clamp(19px,3.2vw,22px);margin-bottom:.5em}

/* セクション */
.ak-sec{padding:56px 0}
.ak-sec--mist{background:var(--ak-mist)}
.ak-sec--navy{background:var(--ak-navy);color:#fff}
.ak-sec--navy h2,.ak-sec--navy h3,.ak-sec--navy a{color:#fff;border-color:#fff}
.ak-in{max-width:960px;margin:0 auto;padding:0 20px}
.ak-lead{font-size:1.06em;margin-bottom:1.6em}
.ak-note{font-size:.88em;color:#555}

/* ヒーロー：一番目立つのは「見出し」と「電話」。ここだけ大きく */
.ak-hero{padding:48px 0 40px;border-bottom:1px solid var(--ak-line)}
.ak-hero__one{max-width:820px}
.ak-hero__lead{font-size:clamp(16px,2.4vw,19px);margin:1em 0 1.4em}
.ak-hero__points{list-style:none;padding:0;margin:0 0 1.5em}
.ak-hero__points li{padding-left:1.6em;position:relative}
.ak-hero__points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ak-moss);font-weight:700}

/* 電話と相談ボタン */
.ak-contact{margin:8px 0 0}
.ak-tel{display:block;text-decoration:none;color:var(--ak-vermilion);font-family:var(--ak-serif);font-weight:700;font-size:clamp(30px,6.5vw,44px);line-height:1.15;letter-spacing:.02em}
.ak-tel small{display:block;font-family:var(--ak-sans);font-weight:500;font-size:15px;color:var(--ak-ink);letter-spacing:.04em;margin-bottom:2px}
.ak-tel__hours{font-size:.9em;color:#555;margin:.2em 0 .9em}
.ak-btn{display:inline-block;text-decoration:none;font-weight:700;font-size:17px;padding:14px 26px;border-radius:4px;line-height:1.4;text-align:center}
.ak-btn--navy,.ak a.ak-btn--navy{background:var(--ak-navy);color:#fff}
.ak-btn--ghost,.ak a.ak-btn--ghost{background:#fff;color:var(--ak-navy);border:2px solid var(--ak-navy)}
.ak-btn--vermilion,.ak a.ak-btn--vermilion{background:var(--ak-vermilion);color:#fff}
.ak-btn:focus-visible,.ak-tel:focus-visible{outline:3px solid #f2b211;outline-offset:3px}
.ak-btns{display:flex;flex-wrap:wrap;gap:12px}

/* このページの要点（AIO/GEO用：結論→数値→出典→更新日） */
.ak-gist{border:2px solid var(--ak-navy);background:#fff;padding:22px 22px 16px;margin:0 0 8px}
.ak-gist__title{font-family:var(--ak-serif);color:var(--ak-navy);font-size:1.1em;font-weight:700;margin:0 0 .6em}
.ak-gist dl{margin:.8em 0 .6em;display:grid;grid-template-columns:max-content 1fr;gap:.25em 1em;font-size:.97em}
.ak-gist dt{font-weight:700;color:var(--ak-navy)}
.ak-gist dd{margin:0}
@media(max-width:560px){.ak-gist dl{grid-template-columns:1fr}.ak-gist dd{margin-bottom:.4em}}
.ak-gist__meta{font-size:.85em;color:#555;margin:0}

/* よくある状況：罫で区切ったリスト（カードにしない） */
.ak-cases{list-style:none;padding:0;margin:0;border-top:1px solid var(--ak-line)}
.ak-cases li{border-bottom:1px solid var(--ak-line);padding:16px 4px;display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:700px){.ak-cases li{grid-template-columns:260px 1fr;gap:20px}}
.ak-cases b{font-family:var(--ak-serif);color:var(--ak-navy);font-size:1.08em;font-weight:700}
.ak-cases span{font-size:.97em}

/* できること：6枚。見出しと一言、その下に小さなリンク */
.ak-menu{display:grid;grid-template-columns:1fr;gap:14px;list-style:none;padding:0;margin:0}
@media(min-width:620px){.ak-menu{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.ak-menu{grid-template-columns:1fr 1fr 1fr}}
.ak-menu li{background:#fff;border:1px solid var(--ak-line);padding:20px 20px 18px;position:relative}
.ak-menu li.is-main{border-color:var(--ak-navy);border-width:2px}
.ak-menu h3{font-size:1.15em;margin-bottom:.4em}
.ak-menu p{font-size:.95em;margin:0 0 .8em}
.ak-menu a.ak-more{font-size:.93em;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.ak-menu a.ak-more::after{content:"";position:absolute;inset:0}

/* 料金：2列の比較表。数字を大きく */
.ak-plans{display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 14px}
@media(min-width:700px){.ak-plans{grid-template-columns:1fr 1fr}}
.ak-plan{background:#fff;border:1px solid var(--ak-line);padding:24px 22px}
.ak-plan.is-rec{border:2px solid var(--ak-navy)}
.ak-plan__name{font-family:var(--ak-serif);font-size:1.25em;color:var(--ak-navy);margin:0 0 .2em;font-weight:700}
.ak-plan__for{font-size:.93em;color:#555;margin:0 0 .8em}
.ak-plan__price{font-family:var(--ak-serif);color:var(--ak-navy);font-size:2.4em;line-height:1.1;font-weight:700;margin:0}
.ak-plan__price small{font-family:var(--ak-sans);font-size:.42em;font-weight:500;margin-left:.3em;color:var(--ak-ink)}
.ak-plan__tax{font-size:.85em;color:#555;margin:.2em 0 1em}
.ak-plan ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--ak-line)}
.ak-plan li{border-bottom:1px solid var(--ak-line);padding:.55em 0 .55em 1.5em;position:relative;font-size:.96em;margin:0}
.ak-plan li::before{content:"✓";position:absolute;left:.1em;color:var(--ak-moss);font-weight:700}
.ak-plan li.is-no{color:#8a949e}
.ak-plan li.is-no::before{content:"ー";color:#b0b8c0}

/* 流れ：順番がある内容なので番号を使う */
.ak-steps{list-style:none;padding:0;margin:0;counter-reset:ak}
.ak-steps li{counter-increment:ak;position:relative;padding:0 0 22px 58px;min-height:52px}
.ak-steps li::before{content:counter(ak);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--ak-navy);color:#fff;font-family:var(--ak-serif);font-weight:700;font-size:1.1em;display:flex;align-items:center;justify-content:center}
.ak-steps li::after{content:"";position:absolute;left:20px;top:46px;bottom:0;border-left:2px solid var(--ak-line)}
.ak-steps li:last-child::after{display:none}
.ak-steps b{display:block;font-family:var(--ak-serif);color:var(--ak-navy);font-size:1.1em;margin-bottom:.2em}
.ak-steps p{margin:0;font-size:.97em}

/* 制度：数値が主役。出典リンクを必ず添える */
.ak-facts{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 12px}
@media(min-width:700px){.ak-facts{grid-template-columns:1fr 1fr 1fr}}
.ak-fact{background:#fff;border-top:4px solid var(--ak-navy);padding:18px 18px 14px}
.ak-fact__num{font-family:var(--ak-serif);color:var(--ak-navy);font-size:1.9em;font-weight:700;line-height:1.2;margin:0 0 .2em}
.ak-fact__num small{font-size:.5em;font-family:var(--ak-sans);font-weight:500;margin-left:.2em}
.ak-fact p{margin:0;font-size:.95em}
.ak-fact a{font-size:.86em}

/* 対応エリア */
.ak-areas{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;padding:0;margin:0 0 12px}
.ak-areas li a{display:inline-block;border:1px solid var(--ak-line);background:#fff;padding:7px 14px;text-decoration:none;font-size:.95em;border-radius:3px}

/* 会社概要：定義リスト */
.ak-company{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--ak-line);margin:0}
.ak-company div{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ak-line);padding:12px 4px}
@media(min-width:620px){.ak-company div{grid-template-columns:180px 1fr;gap:16px}}
.ak-company dt{font-weight:700;color:var(--ak-navy)}
.ak-company dd{margin:0}

/* FAQ：details で折りたたみ。開く動作は本人の操作なのでOK */
.ak-faq{border-top:1px solid var(--ak-line)}
.ak-faq details{border-bottom:1px solid var(--ak-line)}
.ak-faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 4px;font-weight:700;font-size:1.03em;color:var(--ak-navy);position:relative}
.ak-faq summary::-webkit-details-marker{display:none}
.ak-faq summary::after{content:"＋";position:absolute;right:8px;top:14px;font-size:1.2em;color:var(--ak-navy)}
.ak-faq details[open] summary::after{content:"－"}
.ak-faq .ak-faq__a{padding:0 4px 18px;font-size:.97em}
.ak-faq .ak-faq__a p:last-child{margin:0}

/* 末尾の相談セクション */
.ak-cta{background:var(--ak-navy);color:#fff;padding:40px 20px;text-align:left}
.ak-cta h2{border-left-color:#fff;color:#fff}
.ak-cta .ak-tel{color:#fff}
.ak-cta .ak-tel small,.ak-cta .ak-tel__hours{color:#dbe3ec}
.ak-cta .ak-btn--ghost{background:#fff}

/* スマホ下部の追従バー（電話＋相談） */
.ak-bar{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ak-line);box-shadow:0 -2px 8px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom,0)}
.ak-bar a{display:flex;align-items:center;justify-content:center;gap:.4em;padding:14px 8px;font-weight:700;text-decoration:none;font-size:16px;line-height:1.2}
.ak-bar a.ak-bar__tel{background:var(--ak-vermilion);color:#fff}
.ak-bar a.ak-bar__form{background:var(--ak-navy);color:#fff}
@media(min-width:900px){.ak-bar{display:none}}
body.ak-has-bar{padding-bottom:64px}

@media(prefers-reduced-motion:reduce){.ak *{transition:none!important;animation:none!important}}

/* 表（管理項目・料金の内訳など） */
.ak-tablewrap{overflow-x:auto;margin:0 0 1.2em}
.ak-table{width:100%;border-collapse:collapse;font-size:.96em;background:#fff}
.ak-table th,.ak-table td{border:1px solid var(--ak-line);padding:10px 12px;text-align:left;vertical-align:top}
.ak-table th{background:var(--ak-mist);color:var(--ak-navy);font-weight:700;white-space:nowrap}
.ak-table td.c{text-align:center;white-space:nowrap}
.ak-table .ok{color:var(--ak-moss);font-weight:700}
.ak-table .no{color:#9aa6b2}

/* 「当社の場合」ブロック（記事・固定ページ共通） */
.ak-ours{background:var(--ak-mist);border-left:6px solid var(--ak-navy);padding:16px 20px;margin:0 0 1.4em}
.ak-ours__t{font-weight:700;color:var(--ak-navy);margin:0 0 .4em}
.ak-ours p:last-child{margin:0}

/* 選択肢の比較（貸す／壊す／売る など） */
.ak-choices{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 1.2em}
@media(min-width:760px){.ak-choices{grid-template-columns:repeat(3,1fr)}}
.ak-choice{background:#fff;border:1px solid var(--ak-line);padding:20px}
.ak-choice h3{font-size:1.12em;margin-bottom:.4em}
.ak-choice p{font-size:.95em;margin:0 0 .6em}
.ak-choice dl{margin:0;font-size:.92em}
.ak-choice dt{font-weight:700;color:var(--ak-navy);margin-top:.5em}
.ak-choice dd{margin:0}