/* ============================================================
   ProSol 記事（用語辞典・コラム・セキュリティ情報）本文スタイル
   旧Diverテーマのマークアップを新デザインで表示するための補助CSS
   ============================================================ */

/* 記事ヘッダー */
.arthead{background:
   radial-gradient(700px 340px at 88% -20%,rgba(94,198,180,.18),transparent 62%),
   linear-gradient(180deg,#fbfdff,#eef7fc);border-bottom:1px solid var(--line)}
.arthead .wrap{padding:44px 24px 40px;max-width:840px}
.arthead .cat{display:inline-block;font-size:.74rem;font-weight:700;color:var(--teal-d);background:#e5f6f2;padding:4px 12px;border-radius:999px;margin-bottom:12px}
.arthead h1{font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.45;margin:0 0 12px;color:var(--head)}
.arthead .date{color:#9db0c0;font-size:.82rem}

/* 本文コンテナ */
.article{max-width:840px;margin:0 auto;padding:48px 24px 8px}
.article-body{font-size:1.02rem;line-height:1.95;color:#3b4b5a}
.article-body>*:first-child{margin-top:0}
.article-body p{margin:0 0 1.3em}
.article-body a{color:var(--blue-d);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--teal-d)}
.article-body img{max-width:100%;height:auto;border-radius:10px}
.article-body ul,.article-body ol{margin:0 0 1.4em;padding-left:1.4em}
.article-body li{margin:.3em 0}
.article-body strong,.article-body b{color:var(--head)}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* 見出し（素の h2-h5） */
.article-body h2{font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--teal));padding:12px 18px;border-radius:10px;margin:2em 0 .9em;line-height:1.5}
.article-body h3{font-size:1.2rem;color:var(--head);border-bottom:2px solid var(--blue);padding-bottom:6px;margin:1.8em 0 .8em}
.article-body h4{font-size:1.08rem;color:var(--head);margin:1.6em 0 .6em;padding-left:12px;border-left:4px solid var(--teal)}
.article-body h5{font-size:1rem;color:var(--head);margin:1.4em 0 .5em}

/* Diver: sc_heading（装飾見出し） */
.article-body .sc_heading{color:var(--head);background:none;border:0;border-left:5px solid var(--blue);border-radius:0;padding:6px 0 6px 16px;margin:1.9em 0 .9em;font-weight:800;line-height:1.5}
.article-body .sc_heading.red{border-left-color:var(--coral)}
.article-body .sc_heading.blue{border-left-color:var(--blue)}
.article-body .sc_heading.green{border-left-color:var(--teal)}
.article-body .sc_heading .sc_title,.article-body .sc_heading span{color:inherit;background:none}

/* Diver: 会話ふきだし voice / sc_balloon */
.article-body .voice{display:flex;align-items:flex-start;gap:16px;margin:1.6em 0}
.article-body .voice.right{flex-direction:row-reverse}
.article-body .voice .icon{width:76px;flex:none;text-align:center}
.article-body .voice .icon p{margin:0}
.article-body .voice .icon img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:#fff}
.article-body .voice .icon .name{font-size:.74rem;color:var(--muted);margin-top:4px}
.article-body .voice .text{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);color:#3b4b5a;margin:0}
.article-body .voice .text.white{background:#fff}
.article-body .voice.left .text::before{content:"";position:absolute;left:-9px;top:20px;border:5px solid transparent;border-right-color:#fff;filter:drop-shadow(-1px 0 0 var(--line))}
.article-body .voice.right .text::before{content:"";position:absolute;right:-9px;top:20px;border:5px solid transparent;border-left-color:#fff;filter:drop-shadow(1px 0 0 var(--line))}

/* Diver: テーブル（review table 等） */
.article-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94rem;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.article-body th{background:var(--soft);color:var(--head);font-weight:700}
.article-body thead th{background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;border-color:transparent}

/* Diver: ボタン button/btn */
.article-body .button,.article-body a.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff !important;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px;margin:.4em 0;box-shadow:0 8px 20px rgba(74,159,212,.25)}
.article-body .button.block,.article-body a.btn.block{display:flex;justify-content:center}
.article-body .button:hover{filter:brightness(1.05)}

/* 引用 */
.article-body blockquote{margin:1.4em 0;padding:14px 20px;background:var(--soft);border-left:4px solid var(--blue);border-radius:0 10px 10px 0;color:#4b5d6f}

/* 記事フッター導線 */
.article-nav{max-width:840px;margin:40px auto 0;padding:0 24px}
.backlink{display:inline-flex;align-items:center;gap:8px;color:var(--blue-d);font-weight:700;font-size:.92rem}