/* お役立ち記事セクション。LP本体の style.css を読み込んだ上に重ねる */

.art{padding:2.5rem 0 3.5rem}
.art .wrap{width:min(700px,100% - 2.5rem)}

.crumb{font-size:.82rem;color:var(--muted);margin-bottom:1.5rem}
.crumb a{color:var(--muted)}
.crumb span{margin:0 .4em}

.art h1{font-family:var(--mincho);font-size:clamp(1.5rem,5.2vw,2.1rem);
  line-height:1.55;letter-spacing:.02em;color:var(--ink);margin:0 0 1rem}
.art-meta{font-size:.84rem;color:var(--muted);border-bottom:1px solid var(--line);
  padding-bottom:1.5rem;margin-bottom:2rem}
.art-meta b{color:var(--ink);font-weight:600}

.art h2{font-family:var(--mincho);font-size:clamp(1.2rem,4vw,1.5rem);line-height:1.6;
  color:var(--ink);margin:3rem 0 1rem;padding-left:.85rem;border-left:4px solid var(--gold)}
.art h3{font-size:1.08rem;color:var(--ink);margin:2rem 0 .6rem}
.art p{margin:0 0 1.4rem}
.art strong{font-weight:700;color:var(--ink)}
.art a{color:var(--gold);text-decoration:underline}
.art ol,.art ul{margin:0 0 1.5rem;padding-left:1.4rem}
.art li{margin-bottom:.5rem}
.art hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.art figure{margin:2rem 0}
.art figure img{border-radius:.6rem;border:1px solid var(--line)}
.art figcaption{font-size:.8rem;color:var(--muted);margin-top:.6rem;text-align:center}

/* 補足の引用 */
.art blockquote{margin:0 0 1.5rem;padding:1.1rem 1.2rem;background:var(--warm);
  border-left:4px solid var(--gold);border-radius:0 .5rem .5rem 0}
.art blockquote p:last-child{margin-bottom:0}

/* 注意ボックス */
.warnbox{background:#FDF6F4;border:1px solid #E8C9C0;border-radius:.6rem;
  padding:1.3rem 1.4rem;margin:2rem 0}
.warnbox h2{margin:0 0 .8rem;padding:0;border:0;font-size:1.15rem;color:#8C3A25}
.warnbox ul{margin-bottom:0}

/* 手順 */
.stepbox{background:var(--panel);border:1px solid var(--line);border-radius:.6rem;
  padding:1.4rem 1.5rem;margin:1.5rem 0;box-shadow:var(--shadow)}
.stepbox h3{margin-top:0}
.stepbox ol{margin-bottom:0}

/* 記事末のCTA */
.art-cta{background:var(--ink);color:#fff;border-radius:.8rem;padding:2rem 1.6rem;
  margin:3rem 0 0;text-align:center}
.art-cta p{color:rgba(255,255,255,.88)}
.art-cta .k{font-size:.78rem;letter-spacing:.16em;color:var(--gold-soft);margin-bottom:.6rem}
.art-cta h2{font-family:var(--mincho);color:#fff;border:0;padding:0;margin:0 0 1rem;
  font-size:clamp(1.15rem,4vw,1.45rem)}
.art-cta .btn{margin-top:.5rem}

/* 一覧 */
.list{padding:2.5rem 0 4rem}
.list h1{font-family:var(--mincho);font-size:clamp(1.5rem,5vw,2rem);color:var(--ink);margin:0 0 .6rem}
.list .lead{color:var(--muted);margin-bottom:2.5rem}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.posts li{background:var(--panel);border:1px solid var(--line);border-radius:.7rem;
  box-shadow:var(--shadow);overflow:hidden}
.posts a{display:block;padding:1.4rem 1.5rem;text-decoration:none;color:inherit}
.posts a:hover{background:var(--warm)}
.posts .d{font-size:.78rem;color:var(--muted);margin-bottom:.4rem}
.posts .t{font-family:var(--mincho);font-size:1.1rem;line-height:1.6;color:var(--ink);margin-bottom:.5rem}
.posts .x{font-size:.9rem;color:var(--muted);line-height:1.85;margin:0}
.list .soon{margin-top:2rem;padding:1.2rem;border:1px dashed var(--line);
  border-radius:.6rem;color:var(--muted);font-size:.9rem;text-align:center}

/* 関連記事 */
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.related h2{font-size:1.05rem;margin:0 0 1rem;padding:0;border:0;font-family:var(--gothic);color:var(--muted)}

/* .art a の色指定がボタンを上書きしてしまうのを防ぐ */
.art .btn,.list .btn{text-decoration:none}
.art .btn-onnavy,.list .btn-onnavy{color:#fff}
.art .btn-ghost,.list .btn-ghost{color:var(--ink)}
.art .btn-primary,.list .btn-primary{color:#fff}

/* ============================================================
   明るい基調へ（2026-09-09）。記事末CTAの紺ベタをやめる。
   ============================================================ */
.art-cta{background:linear-gradient(180deg,#FFFDF8 0%,#F5EEE0 100%);
  color:var(--sumi);border:1px solid #E4C79A}
.art-cta .k{color:var(--gold)}
.art-cta h2{color:var(--ink)}
.art-cta p{color:#4A5361}
.art .art-cta .btn-onnavy,.list .art-cta .btn-onnavy{background:var(--gold);color:#fff}
.art .art-cta .btn-onnavy:hover,.list .art-cta .btn-onnavy:hover{background:#8F5C19}
.art a{color:var(--gold-text)}
.art .btn-onnavy,.list .btn-onnavy,.art .art-cta .btn-onnavy,.list .art-cta .btn-onnavy{background:var(--gold-text)}
.art .art-cta .btn-onnavy:hover,.list .art-cta .btn-onnavy:hover{background:#7E5115}